@sonic-equipment/ui 0.0.101 → 0.0.103

package/dist/index.js

@@ -7731,10 +7731,10 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
 
 var styles$Q = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","content":"modal-module-FJxzx","modal-slide":"modal-module-jkAe7","modal-delayed-fade":"modal-module-WOZ01","close":"modal-module-7zIZE","modal-zoom":"modal-module-aPJ7X"};
 
-function Modal({ children, className, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
-    return (jsx(ModalOverlay, { className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: clsx(styles$Q.modal, {
+function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside = true, }) {
+    return (jsx(ModalOverlay, { className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$Q.modal, {
                 [styles$Q['is-full-screen']]: isFullScreen,
-            }), children: jsx("div", { className: styles$Q.content, children: children }) }) }));
+            }), children: [hasCloseButton && (jsx("div", { className: styles$Q.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$Q.content, children: children })] }) }));
 }
 
 var styles$P = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
@@ -7763,8 +7763,8 @@ var styles$O = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","c
 function Footer({ close }) {
     return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: "Submit" }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: "Close" })] }));
 }
-function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles$O['modal-overlay'], className), isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$O.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$O.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$O.header, children: [!hideTitle && (jsx(Heading, { className: styles$O.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$O.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$O.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$O.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
+function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }) {
+    return (jsx(Modal, { className: clsx(styles$O['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$O.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$O.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$O.header, children: [!hideTitle && (jsx(Heading, { className: styles$O.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$O.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$O.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$O.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
 }
 
 var styles$N = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};
@@ -8153,6 +8153,7 @@ function useFetchAnnouncements({ languageCode, }) {
             url: `${config.BFF_API_URL}/notification/announcement`,
         }),
         queryKey: ['announcements', languageCode],
+        refetchInterval: 5 * TIME.MINUTE,
         select: ({ body }) => body.map(({ endDate, href, id, startDate, text, title, type }) => {
             if (!isAnnouncementType(type))
                 throw new Error(`Invalid announcement type: ${type}`);
@@ -8591,56 +8592,6 @@ function useFetchProductDetailsPageData({ languageCode, pageUrl, }) {
                 headers: { 'Current-Language-Id': languageCode },
                 url: `${config.BFF_API_URL}/pdp/?pageUrl=${pageUrl}`,
             });
-            body.usps = [
-                {
-                    heading: 'Safety first',
-                    icon: {
-                        1: 'https://ui.sonic-equipment.com/images/usps/usp-1-icon.svg',
-                        2: 'https://ui.sonic-equipment.com/images/usps/usp-1-icon.svg',
-                        3: 'https://ui.sonic-equipment.com/images/usps/usp-1-icon.svg',
-                        altText: 'Icon',
-                    },
-                    image: {
-                        1: 'https://ui.sonic-equipment.com/images/usps/usp-1.png',
-                        2: 'https://ui.sonic-equipment.com/images/usps/usp-1@2x.png',
-                        3: 'https://ui.sonic-equipment.com/images/usps/usp-1@3x.png',
-                        altText: 'Image',
-                    },
-                    text: 'Did you know that every Sonic NEXT S15 toolbox comes standard with an <b>advanced drawer blocking system for anti-tilt protection?</b> This make this flagship toolbox the <b>safest ultimate storage solution on wheels</b> in your workshop.',
-                },
-                {
-                    heading: "Lock n' load",
-                    icon: {
-                        1: 'https://ui.sonic-equipment.com/images/usps/usp-2-icon.svg',
-                        2: 'https://ui.sonic-equipment.com/images/usps/usp-2-icon.svg',
-                        3: 'https://ui.sonic-equipment.com/images/usps/usp-2-icon.svg',
-                        altText: 'Icon',
-                    },
-                    image: {
-                        1: 'https://ui.sonic-equipment.com/images/usps/usp-2.png',
-                        2: 'https://ui.sonic-equipment.com/images/usps/usp-2@2x.png',
-                        3: 'https://ui.sonic-equipment.com/images/usps/usp-2@3x.png',
-                        altText: 'Image',
-                    },
-                    text: 'Did you know that every Sonic NEXT S15 toolbox comes standard with an <b>advanced drawer blocking system for anti-tilt protection?</b> This make this flagship toolbox the <b>safest ultimate storage solution on wheels</b> in your workshop.',
-                },
-                {
-                    heading: 'Ready, Set, Go!',
-                    icon: {
-                        1: 'https://ui.sonic-equipment.com/images/usps/usp-3-icon.svg',
-                        2: 'https://ui.sonic-equipment.com/images/usps/usp-3-icon.svg',
-                        3: 'https://ui.sonic-equipment.com/images/usps/usp-3-icon.svg',
-                        altText: 'Icon',
-                    },
-                    image: {
-                        1: 'https://ui.sonic-equipment.com/images/usps/usp-3.png',
-                        2: 'https://ui.sonic-equipment.com/images/usps/usp-3@2x.png',
-                        3: 'https://ui.sonic-equipment.com/images/usps/usp-3@3x.png',
-                        altText: 'Image',
-                    },
-                    text: 'Did you know that every Sonic NEXT S15 toolbox comes standard with <b>heavy-duty lockable bearing caster wheels with brakes and swivel?</b> Mobility, security and safety while these wheels keep on turning.',
-                },
-            ];
             return body;
         },
         queryKey: ['product-details-page-data', pageUrl, languageCode],
@@ -8675,7 +8626,7 @@ function ImagesGrid({ images, onSelectImage }) {
             }), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles$r.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
 }
 
-var styles$q = {"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"};
+var styles$q = {"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-"};
 
 function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
     const [thumbsSwiper, setThumbsSwiper] = useState();
@@ -8683,10 +8634,19 @@ function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
     const nextEl = useRef(null);
     const prevEl = useRef(null);
     const mainSwiperRef = useRef(null);
+    const [isZoomed, setIsZoomed] = useState(false);
+    function handleZoom() {
+        setIsZoomed(!isZoomed);
+    }
     return (jsxs("div", { className: clsx(styles$q['image-lightbox'], styles$q[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles$q['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$q.slide, children: jsx("div", { className: styles$q.thumb, children: jsx(Image, { className: styles$q.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles$q['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$q.slide, children: jsx("div", { className: styles$q['active-image'], children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { 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$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] })] }));
+                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("button", { className: styles$q['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { 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$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isZoomed, onClose: handleZoom })] }));
+}
+function ZoomImage({ currentImage, isZoomed, onClose, }) {
+    if (!isZoomed || !currentImage)
+        return null;
+    return (jsx(Modal, { className: styles$q['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: () => onClose(), children: jsx("div", { className: styles$q['zoomed-container'], onClick: onClose, children: jsx(Image, { className: styles$q['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
 }
 
 var styles$p = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};
@@ -8706,7 +8666,7 @@ function ProductDetailImages({ images }) {
     if (!isXl) {
         return jsx(ImageLightbox, { images: images });
     }
-    return (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Dialog, { hasCloseButton: true, hideTitle: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: toggle, title: "Product images", children: jsx("div", { className: styles$p['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, variant: "lg" }) }) })] }));
+    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$p['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, variant: "lg" }) }) })] }));
 }
 
 function GlyphsChevronsBoldDownIcon(props) {
@@ -8763,7 +8723,7 @@ function DownloadListItem({ document: { href, name }, }) {
 var styles$m = {"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"};
 
 function ProductDetailsPanel({ product }) {
-    return (jsxs("div", { className: styles$m['product-details-panel'], children: [jsxs("div", { className: styles$m.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles$m['price-action-container'], children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { className: styles$m['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles$m['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$m.description, dangerouslySetInnerHTML: {
+    return (jsxs("div", { className: styles$m['product-details-panel'], children: [jsxs("div", { className: styles$m.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles$m['price-action-container'], children: [jsx(ProductPrice, { isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price }), jsxs("div", { className: styles$m['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles$m['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$m.description, dangerouslySetInnerHTML: {
                                 __html: product.content.htmlContent,
                             } }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$m['feature-list'], features: product.attributeTypes.map(attribute => ({
                                     id: `${attribute.id}`,
@@ -10311,11 +10271,11 @@ function CategoriesGrid({ categories, onItemClick, }) {
 
 var styles$4 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR"};
 
-function SearchSection({ button, children, className, title, }) {
-    return (jsxs("div", { className: clsx(styles$4['search-section'], className), children: [jsxs("div", { className: styles$4.header, children: [title && jsx("h2", { className: styles$4.title, children: title }), button && button] }), children] }));
+function SearchSection({ button, children, className, headerClassName, title, }) {
+    return (jsxs("div", { className: clsx(styles$4['search-section'], className), children: [jsxs("div", { className: clsx(styles$4.header, headerClassName), children: [title && jsx("h2", { className: styles$4.title, children: title }), button && button] }), children] }));
 }
 
-var styles$3 = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
+var styles$3 = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
 
 function SectionContainer({ buttons, leftContent, rightContent, }) {
     return (jsx("div", { className: styles$3['section-container'], children: jsxs("div", { className: styles$3['content'], children: [jsx("div", { className: styles$3['left'], children: leftContent }), jsxs("div", { className: styles$3['right'], children: [rightContent, jsx("div", { className: styles$3['button-container'], children: buttons })] })] }) }));
@@ -10395,7 +10355,7 @@ function QuickAccessSection() {
     if (!collection)
         return;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$3['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard, { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
+    return (jsx(SearchSection, { headerClassName: styles$3['quick-access-section-header'], title: t('Quick access'), children: jsx("div", { className: styles$3['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard, { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
 }
 
 function StrokeRecentIcon(props) {
@@ -10410,7 +10370,7 @@ function WithResults() {
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
     const t = useFormattedMessage();
-    return (jsxs(SearchSection, { className: styles$3['product-results-section'], title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
+    return (jsxs(SearchSection, { title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
                     source: recentSearches.source,
                 }), children: recentSearches.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                         item,
@@ -10473,7 +10433,7 @@ function ProductResultsSection() {
     if (!collection)
         return null;
     const { items, source } = collection;
-    return (jsx(SearchSection, { className: styles$3['product-results-section'], title: t('Products'), children: jsx("div", { className: styles$3['product-results'], ...autocomplete.getListProps({ source }), children: jsx(CardCarousel, { cards: items.map((hit, index) => isProductHit(hit) ? (jsx(ProductHitCard, { autocomplete: autocomplete, hit: hit, index: index, source: source }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
+    return (jsx(SearchSection, { className: styles$3['product-results-section'], headerClassName: styles$3['product-results-section-header'], title: t('Products'), children: jsx("div", { className: styles$3['product-results'], ...autocomplete.getListProps({ source }), children: jsx(CardCarousel, { cards: items.map((hit, index) => isProductHit(hit) ? (jsx(ProductHitCard, { autocomplete: autocomplete, hit: hit, index: index, source: source }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
 }
 
 function PanelContent() {

package/dist/src/global-search/search-section/search-section.d.ts

@@ -3,7 +3,8 @@ interface SearchSectionProps {
     button?: ReactElement;
     children: ReactNode;
     className?: string;
+    headerClassName?: string;
     title?: string;
 }
-export declare function SearchSection({ button, children, className, title, }: SearchSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchSection({ button, children, className, headerClassName, title, }: SearchSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,5 +15,5 @@ interface DialogProps extends Omit<ModalProps, 'children'> {
     title: string;
     validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
 }
-export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,5 +8,6 @@ export interface ModalProps {
     isKeyboardDismissDisabled?: boolean;
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
+    shouldCloseOnInteractOutside?: boolean;
 }
-export declare function Modal({ children, className, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/shared/api/bff/model/bff.model.d.ts

@@ -102,6 +102,7 @@ export interface ProductDetails {
     }>;
     id: string;
     images: Array<Image>;
+    isVatIncluded: boolean;
     minimumOrderQty: number;
     originalPrice: number;
     price: number;

package/dist/styles.css

@@ -220,6 +220,7 @@
   --sidebar-layer: 100;
   --search-layer: 200;
   --modal-layer: 300;
+  --zoom-image-layer: 400;
 }
 :root {
   --header-height-desktop: 96px;
@@ -3433,6 +3434,13 @@ button.swiper-pagination-bullet {
     width: auto;
   }
 
+  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
+    all: unset;
+    width: 100%;
+    aspect-ratio: 1;
+    cursor: zoom-in;
+  }
+
   .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi,
   .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
     display: flex;
@@ -3443,11 +3451,6 @@ button.swiper-pagination-bullet {
       mix-blend-mode: multiply;
     }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
-    width: 100%;
-    aspect-ratio: 1;
-  }
-
   .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
     width: var(--thumb-size);
     height: var(--thumb-size);
@@ -3524,6 +3527,26 @@ button.swiper-pagination-bullet {
       }
     }
 
+.image-lightbox-module-UVzAg {
+  z-index: var(--zoom-image-layer);
+  cursor: zoom-out;
+}
+
+.image-lightbox-module-UVzAg .image-lightbox-module-sBtWE {
+    display: grid;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    place-items: center;
+  }
+
+.image-lightbox-module-UVzAg .image-lightbox-module-sBtWE .image-lightbox-module-aehw- {
+      width: 100%;
+      height: auto;
+      -o-object-fit: contain;
+         object-fit: contain;
+    }
+
 .product-detail-images-module-N3Ms- {
   display: flex;
   width: 100%;
@@ -5372,14 +5395,22 @@ button.swiper-pagination-bullet {
 .search-content-module-w-ORq {
   display: flex;
   flex-wrap: wrap;
+  padding-right: var(--padding-inline);
+  padding-left: var(--padding-inline);
   gap: var(--space-16);
-  padding-inline: var(--padding-inline);
 }
 
 .search-content-module-w-ORq:not(:empty) {
     padding-bottom: var(--padding-block);
   }
 
+@media (width >= 768px) {
+
+.search-content-module-w-ORq {
+    padding-left: var(--space-48)
+}
+  }
+
 @media (width < 768px) {
     .search-content-module-w-ORq .search-content-module-bO1Q0 {
       width: 100%;
@@ -5397,6 +5428,14 @@ button.swiper-pagination-bullet {
   padding-block-end: var(--padding-block);
 }
 
+@media (width >= 768px) {
+
+.search-content-module-HrHCE,
+.search-content-module-9bgxF {
+    padding-left: 22px
+}
+  }
+
 .search-content-module-H-FX2 .search-content-module-LbQnK {
     margin-top: var(--space-12);
     margin-bottom: var(--space-24);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.101",
+  "version": "0.0.103",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -15,10 +15,7 @@
       "default": "./dist/index.js"
     }
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "files": ["dist", "README.md"],
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
@@ -53,93 +50,93 @@
     "react-instantsearch-core": "^7"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@csstools/postcss-global-data": "^3.0.0",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@storybook/addon-docs": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-viewport": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/preview-api": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@typescript-eslint/parser": "^8.13.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.20",
-    "concurrently": "^9.1.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-no-relative-import-paths": "^1.5.5",
-    "eslint-plugin-prettier": "^5.2.1",
+    "@chromatic-com/storybook": "3.2.2",
+    "@csstools/postcss-global-data": "3.0.0",
+    "@rollup/plugin-alias": "5.1.1",
+    "@rollup/plugin-commonjs": "28.0.1",
+    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-replace": "6.0.1",
+    "@rollup/plugin-typescript": "12.1.1",
+    "@storybook/addon-docs": "8.4.2",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-interactions": "8.4.2",
+    "@storybook/addon-links": "8.4.2",
+    "@storybook/addon-viewport": "8.4.2",
+    "@storybook/blocks": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-vite": "8.4.2",
+    "@storybook/test": "8.4.2",
+    "@types/js-cookie": "3.0.6",
+    "@types/node": "22.9.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@typescript-eslint/eslint-plugin": "8.13.0",
+    "@typescript-eslint/parser": "8.13.0",
+    "@vitejs/plugin-react": "4.3.3",
+    "autoprefixer": "10.4.20",
+    "concurrently": "9.1.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-mdx": "3.1.5",
+    "eslint-plugin-no-relative-import-paths": "1.5.5",
+    "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-sort-destructure-keys": "^2.0.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-storybook": "^0.11.0",
-    "eslint-plugin-typescript-sort-keys": "^3.3.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "http-server": "^14.1.1",
-    "husky": "^9.1.6",
-    "instantsearch.js": "^4.75.4",
-    "nodemon": "^3.1.7",
-    "postcss": "^8.4.47",
-    "postcss-custom-media": "^11.0.5",
-    "postcss-import": "^16.1.0",
-    "postcss-nested": "^7.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.24.4",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.4.2",
-    "stylelint": "^16.10.0",
-    "stylelint-config-css-modules": "^4.4.0",
-    "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.1",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.1.0"
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-sort-destructure-keys": "2.0.0",
+    "eslint-plugin-sort-keys-fix": "1.1.2",
+    "eslint-plugin-storybook": "0.11.0",
+    "eslint-plugin-typescript-sort-keys": "3.3.0",
+    "eslint-plugin-unused-imports": "4.1.4",
+    "http-server": "14.1.1",
+    "husky": "9.1.6",
+    "instantsearch.js": "4.75.4",
+    "nodemon": "3.1.7",
+    "postcss": "8.4.47",
+    "postcss-custom-media": "11.0.5",
+    "postcss-import": "16.1.0",
+    "postcss-nested": "7.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rimraf": "6.0.1",
+    "rollup": "4.24.4",
+    "rollup-plugin-dts": "6.1.1",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "storybook": "8.4.2",
+    "stylelint": "16.10.0",
+    "stylelint-config-css-modules": "4.4.0",
+    "stylelint-config-idiomatic-order": "10.0.0",
+    "stylelint-config-standard": "36.0.1",
+    "typescript": "5.6.3",
+    "vite": "5.4.10",
+    "vite-tsconfig-paths": "5.1.0"
   },
   "dependencies": {
-    "@algolia/autocomplete-core": "^1.17.7",
-    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.7",
-    "@algolia/autocomplete-plugin-recent-searches": "^1.17.7",
-    "@algolia/autocomplete-preset-algolia": "^1.17.7",
-    "@algolia/client-search": "^4.24.0",
-    "@tanstack/react-query": "^5.59.20",
-    "@tanstack/react-query-devtools": "^5.59.20",
-    "@types/react-transition-group": "^4.4.11",
-    "algoliasearch": "^4.24.0",
-    "clsx": "^2.1.1",
-    "fast-equals": "^5.0.1",
-    "instantsearch.js": "^4.75.4",
-    "js-cookie": "^3.0.5",
-    "query-string": "^9.1.1",
-    "react-aria": "^3.35.1",
-    "react-aria-components": "^1.4.1",
-    "react-instantsearch": "^7.13.7",
-    "react-toastify": "^10.0.6",
-    "react-transition-group": "^4.4.5",
+    "@algolia/autocomplete-core": "1.17.7",
+    "@algolia/autocomplete-plugin-query-suggestions": "1.17.7",
+    "@algolia/autocomplete-plugin-recent-searches": "1.17.7",
+    "@algolia/autocomplete-preset-algolia": "1.17.7",
+    "@algolia/client-search": "4.24.0",
+    "@tanstack/react-query": "5.59.20",
+    "@tanstack/react-query-devtools": "5.59.20",
+    "@types/react-transition-group": "4.4.11",
+    "algoliasearch": "4.24.0",
+    "clsx": "2.1.1",
+    "fast-equals": "5.0.1",
+    "instantsearch.js": "4.75.4",
+    "js-cookie": "3.0.5",
+    "query-string": "9.1.1",
+    "react-aria": "3.35.1",
+    "react-aria-components": "1.4.1",
+    "react-instantsearch": "7.13.7",
+    "react-toastify": "10.0.6",
+    "react-transition-group": "4.4.5",
     "search-insights": "2.17.2",
-    "swiper": "^11.1.14"
+    "swiper": "11.1.14"
   },
   "publishConfig": {
     "access": "public"