@sonic-equipment/ui 0.0.89 → 0.0.91

package/dist/index.js

@@ -71,7 +71,8 @@ const configPerEnvironment = {
         ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
         ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
-        BFF_API_URL: 'https://localhost:8000/api/v1/bff',
+        BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
+        COOKIE_DOMAIN: undefined,
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         '',
@@ -81,6 +82,7 @@ const configPerEnvironment = {
         ALGOLIA_APP_ID: '14CUFCVMAD',
         ALGOLIA_HOST: 'shop.sonic-equipment.com',
         BFF_API_URL: 'https://shop.sonic-equipment.com/api/v1/bff',
+        COOKIE_DOMAIN: '.sonic-equipment.com',
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         SHOP_API_URL: 'https://shop.sonic-equipment.com',
     },
@@ -89,6 +91,7 @@ const configPerEnvironment = {
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
         ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
         BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
+        COOKIE_DOMAIN: '.insitesandbox.com',
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         'https://sonicequipment.commerce.insitesandbox.com',
@@ -98,6 +101,7 @@ const configPerEnvironment = {
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
         ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
         BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
+        COOKIE_DOMAIN: '.insitesandbox.com',
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         'https://sonic.local.com:4443',
@@ -1256,6 +1260,16 @@ function RouteButton({ children, onClick, ...props }) {
         }, ...props, children: children }));
 }
 
+function transformAlgoliaPromoHitToPromoHit(algoliaPromoHit) {
+    return {
+        hit: algoliaPromoHit,
+        href: algoliaPromoHit.url,
+        id: algoliaPromoHit.objectID,
+        image: algoliaPromoHit.image,
+        isExternal: algoliaPromoHit.isExternal,
+        type: 'promo',
+    };
+}
 function transformAlgoliaProductHitToProductHit(algoliaProductHit) {
     return {
         hit: algoliaProductHit,
@@ -1274,13 +1288,21 @@ function transformAlgoliaProductHitToProductHit(algoliaProductHit) {
         name: algoliaProductHit.name,
         objectId: algoliaProductHit.objectID,
         originalPrice: algoliaProductHit.originalPrice,
-        position: algoliaProductHit.__position,
+        position: isNaN(parseFloat(String(algoliaProductHit.__position)))
+            ? 0
+            : parseFloat(String(algoliaProductHit.__position)),
         price: algoliaProductHit.price,
-        queryId: algoliaProductHit.__autocomplete_queryID,
+        queryId: algoliaProductHit.__autocomplete_queryID === undefined
+            ? undefined
+            : String(algoliaProductHit.__autocomplete_queryID),
         storefrontId: algoliaProductHit.storefrontId,
         storefrontSlug: algoliaProductHit.storefrontSlug,
+        type: 'product',
     };
 }
+function isProductHit(hit) {
+    return hit.type === 'product';
+}
 
 function GlyphsChevronsSlimLeftIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M3,6 L7.93354971,1 C8.12109594,1.08169007 8.30512588,1.19817561 8.48563954,1.34945663 C8.6661532,1.50073764 8.83760669,1.68216803 9,1.89374779 L4.91652188,5.98800959 L9,9.9960307 C8.83350762,10.2121071 8.66205413,10.4031847 8.48563954,10.5692635 C8.30922495,10.7353424 8.12519501,10.8789212 7.93354971,11 L3,6 Z", fillRule: "evenodd" }) }));
@@ -1662,8 +1684,8 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
 }
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
     if (!image)
-        return (jsx("picture", { className: clsx(styles$V.picture, className), children: jsx("img", { className: clsx(styles$V[fit], styles$V['has-error']), src: fallbackSrc, ...rest }) }));
-    return (jsxs("picture", { className: clsx(styles$V.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$V[fit], {
+        return (jsx("picture", { className: clsx(styles$V.picture, className), children: jsx("img", { className: clsx(styles$V.image, styles$V[fit], styles$V['has-error']), src: fallbackSrc, ...rest }) }));
+    return (jsxs("picture", { className: clsx(styles$V.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$V.image, styles$V[fit], {
                     [styles$V['has-error']]: hasError,
                 }), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
 }
@@ -7762,7 +7784,7 @@ function useUpdateLanguageById() {
 }
 
 function useCookie(name, options) {
-    const cookieValue = Cookies.get(name);
+    const cookieValue = Cookies.get()[name];
     const [stateValue, setStateValue] = useState(cookieValue);
     function setValue(valueOrFn) {
         setStateValue(oldValue => {
@@ -7796,7 +7818,11 @@ function useSessionStorage(key, initialState) {
 }
 
 const cookieOptions = {
+    domain: config.COOKIE_DOMAIN,
+    expires: 365,
     path: '/',
+    sameSite: 'None',
+    secure: true,
 };
 function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
@@ -8201,18 +8227,18 @@ function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...p
     return (jsx(ProductCard, { id: id, ...props, addToCartButton: jsx(ConnectedAddToCartButton, { onAddToCart: onAddToCart, productId: id }), favoriteButton: jsx(ConnectedFavoriteButton, { onFavorited: onFavorited, onFavoriting: onFavoriting, productId: id }) }));
 }
 
-var styles$v = {"carousel-container":"product-carousel-module-DpUaX","button":"product-carousel-module-0ymqZ","slide":"product-carousel-module-XVTB1","width-auto":"product-carousel-module-E2EUK","width-narrow":"product-carousel-module-yrkV9","width-normal":"product-carousel-module-SzVga"};
+var styles$v = {"carousel-container":"card-carousel-module-JXQmk","button":"card-carousel-module-XQ2pX","slide":"card-carousel-module-DxKOG","width-auto":"card-carousel-module-RQ8gl","width-narrow":"card-carousel-module-8uKSt","width-normal":"card-carousel-module-l-ylK"};
 
-function ProductCarousel({ allowExpandToGrid = false, cardWidth = 'auto', hasOverflow = false, productCards, productsPerView = {
+function CardCarousel({ allowExpandToGrid = false, cards, cardsPerView = {
     md: 2,
     sm: 1,
     xxl: 3,
-}, }) {
+}, cardWidth = 'auto', hasOverflow = false, }) {
     const [isExpanded, setIsExpanded] = useState(false);
     if (!isExpanded) {
-        return (jsxs("div", { className: styles$v['carousel-container'], children: [jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: clsx(styles$v.slide, styles$v[`width-${cardWidth}`]), slides: productCards, slidesPerView: productsPerView, spaceBetween: 16 }), allowExpandToGrid && (jsx(Button, { withArrow: true, className: styles$v.button, color: "secondary", onClick: () => setIsExpanded(true), variant: "outline", children: jsx(FormattedMessage, { id: "Show all" }) }))] }));
+        return (jsxs("div", { className: styles$v['carousel-container'], children: [jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: clsx(styles$v.slide, styles$v[`width-${cardWidth}`]), slides: cards, slidesPerView: cardsPerView, spaceBetween: 16 }), allowExpandToGrid && (jsx(Button, { withArrow: true, className: styles$v.button, color: "secondary", onClick: () => setIsExpanded(true), variant: "outline", children: jsx(FormattedMessage, { id: "Show all" }) }))] }));
     }
-    return (jsxs("div", { className: styles$v['carousel-container'], children: [jsxs(ProductOverviewGrid, { children: [...productCards] }), jsx(Button, { withArrow: true, className: styles$v.button, color: "secondary", onClick: () => setIsExpanded(false), variant: "outline", children: jsx(FormattedMessage, { id: "Show less" }) })] }));
+    return (jsxs("div", { className: styles$v['carousel-container'], children: [jsxs(ProductOverviewGrid, { children: [...cards] }), jsx(Button, { withArrow: true, className: styles$v.button, color: "secondary", onClick: () => setIsExpanded(false), variant: "outline", children: jsx(FormattedMessage, { id: "Show less" }) })] }));
 }
 
 class Animation {
@@ -8678,12 +8704,12 @@ function ProductDetailsPage({ pageUrl }) {
         return jsx(LoadingPage, {});
     const { breadCrumb, included, product, recentlyViewed } = data;
     return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ProductDetailImages, { images: product.images }), included: included !== undefined &&
-                Boolean(included.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(ProductCarousel, { allowExpandToGrid: true, hasOverflow: true, productCards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
+                Boolean(included.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(CardCarousel, { allowExpandToGrid: true, hasOverflow: true, cards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
                                 fit: 'contain',
                                 image: product.image,
                                 title: product.image?.altText || product.title,
                             }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { product: product }), recentlyViewed: recentlyViewed !== undefined &&
-                Boolean(recentlyViewed.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(ProductCarousel, { hasOverflow: true, productCards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
+                Boolean(recentlyViewed.length) && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(CardCarousel, { hasOverflow: true, cards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
                                 fit: 'contain',
                                 image: product.image,
                                 title: product.image?.altText || product.title,
@@ -8926,6 +8952,55 @@ function AlgoliaPagination({ onChange }) {
     return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => handlePageChange(pageNumber), totalPages: nbPages }));
 }
 
+function isAlgoliaProductHit(hit) {
+    return hit.type === 'product';
+}
+
+const useAlgoliaHitsItems = () => useGlobalState('algolia-product-hits-items', []);
+const useAlgoliaHitsLoading = () => useGlobalState('algolia-product-hits-loading');
+function useAlgoliaHits() {
+    const [items] = useAlgoliaHitsItems();
+    const [isLoading] = useAlgoliaHitsLoading();
+    return {
+        hits: items.map(hit => isAlgoliaProductHit(hit)
+            ? transformAlgoliaProductHitToProductHit(hit)
+            : transformAlgoliaPromoHitToPromoHit(hit)),
+        isLoading,
+    };
+}
+
+const useAlgoliaInstantSearchStateIndex = () => useGlobalState('algolia-global-state-index');
+const useAlgoliaInstantSearchStateQueryId = () => useGlobalState('algolia-global-state-queryId');
+const useAlgoliaInstantSearchStateOnline = (initialState) => useGlobalState('algolia-global-state-online', initialState ?? true);
+const useAlgoliaInstantSearchStateStatus = (initialState) => useGlobalState('algolia-global-state-status', initialState ?? 'idle');
+function useAlgoliaInstantSearchState(initialState) {
+    const [index, setIndex] = useAlgoliaInstantSearchStateIndex();
+    const [queryId, setQueryId] = useAlgoliaInstantSearchStateQueryId();
+    const [online, setOnline] = useAlgoliaInstantSearchStateOnline(initialState?.online);
+    const [status, setStatus] = useAlgoliaInstantSearchStateStatus(initialState?.status);
+    return {
+        index,
+        online,
+        queryId,
+        setIndex,
+        setOnline,
+        setQueryId,
+        setStatus,
+        status,
+    };
+}
+
+function AlgoliaHitsProvider() {
+    const { status } = useAlgoliaInstantSearchState();
+    const [, setItems] = useAlgoliaHitsItems();
+    const [, setLoading] = useAlgoliaHitsLoading();
+    const { items, results } = useHits();
+    setItems(items);
+    // @ts-expect-error -- params is not officially exposed but is included in results
+    setLoading(status !== 'idle' || !results || results.params === '');
+    return null;
+}
+
 const defaultLanguageCodes = {
     pl: 'en',
 };
@@ -9053,27 +9128,6 @@ function AlgoliaInsightsProvider({ children, value, }) {
     return (jsx(AlgoliaInsightsProviderContext.Provider, { value: combinedValue, children: children }));
 }
 
-const useAlgoliaInstantSearchStateIndex = () => useGlobalState('algolia-global-state-index');
-const useAlgoliaInstantSearchStateQueryId = () => useGlobalState('algolia-global-state-queryId');
-const useAlgoliaInstantSearchStateOnline = (initialState) => useGlobalState('algolia-global-state-online', initialState ?? true);
-const useAlgoliaInstantSearchStateStatus = (initialState) => useGlobalState('algolia-global-state-status', initialState ?? 'idle');
-function useAlgoliaInstantSearchState(initialState) {
-    const [index, setIndex] = useAlgoliaInstantSearchStateIndex();
-    const [queryId, setQueryId] = useAlgoliaInstantSearchStateQueryId();
-    const [online, setOnline] = useAlgoliaInstantSearchStateOnline(initialState?.online);
-    const [status, setStatus] = useAlgoliaInstantSearchStateStatus(initialState?.status);
-    return {
-        index,
-        online,
-        queryId,
-        setIndex,
-        setOnline,
-        setQueryId,
-        setStatus,
-        status,
-    };
-}
-
 function AlgoliaInsightInstantSearchProvider({ children, }) {
     const { index, queryId } = useAlgoliaInstantSearchState();
     return (jsx(AlgoliaInsightsProvider, { value: {
@@ -9093,30 +9147,6 @@ function AlgoliaInstantSearchStateProvider() {
     return null;
 }
 
-const useAlgoliaProductHitsItems = () => useGlobalState('algolia-product-hits-items', []);
-const useAlgoliaProductHitsLoading = () => useGlobalState('algolia-product-hits-loading');
-function useAlgoliaProductHits() {
-    const [items] = useAlgoliaProductHitsItems();
-    const [isLoading] = useAlgoliaProductHitsLoading();
-    return {
-        isLoading,
-        products: items
-            .map(transformAlgoliaProductHitToProductHit)
-            .filter(product => product.hit.type === 'product'),
-    };
-}
-
-function AlgoliaProductHitsProvider() {
-    const { status } = useAlgoliaInstantSearchState();
-    const [, setItems] = useAlgoliaProductHitsItems();
-    const [, setLoading] = useAlgoliaProductHitsLoading();
-    const { items, results } = useHits();
-    setItems(items);
-    // @ts-expect-error -- params is not officially exposed but is included in results
-    setLoading(status !== 'idle' || !results || results.params === '');
-    return null;
-}
-
 function createQueryStringRouting({ algoliaIndex, hierarchicalCategories, }) {
     return {
         router: history({
@@ -9232,7 +9262,7 @@ function AlgoliaProvider({ categoryPages, children, hierarchicalCategories, lang
         }), searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: true, filters: categoryPages
                     ? // Replace double quotes with escaped double quotes to avoid breaking the query
                         `categoryPages: "${categoryPages.replace(/"/g, '\\"')}"`
-                    : undefined, maxValuesPerFacet: 100, query: query, ruleContexts: ['storefront'] }), jsx(AlgoliaInstantSearchStateProvider, {}), jsx(AlgoliaProductHitsProvider, {}), jsx(AlgoliaInsightInstantSearchProvider, { children: children })] }));
+                    : undefined, hitsPerPage: 12, maxValuesPerFacet: 100, query: query, ruleContexts: ['storefront'] }), jsx(AlgoliaInstantSearchStateProvider, {}), jsx(AlgoliaHitsProvider, {}), jsx(AlgoliaInsightInstantSearchProvider, { children: children })] }));
 }
 function useAlgolia() {
     const [online, setOnline] = useGlobalState('algolia', false);
@@ -9288,20 +9318,20 @@ function AlgoliaSortBy() {
     return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
 }
 
-var styles$h = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
+var styles$h = {"promo-banner":"promo-banner-module-yuVEO","sm":"promo-banner-module-ut8Kd","lg":"promo-banner-module-CSkIw"};
 
-function PromoCard({ href, image, variant }) {
-    return (jsx(RouteLink, { className: clsx(styles$h['promo-card'], styles$h[variant]), href: href, tabIndex: 0, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
+function PromoBanner({ href, image, variant }) {
+    return (jsx(RouteLink, { className: clsx(styles$h['promo-banner'], styles$h[variant]), href: href, tabIndex: 0, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
 }
 
-var styles$g = {"promos":"promo-cards-module-Dy4p3"};
+var styles$g = {"promos":"promo-banners-module-uVyxh"};
 
-function PromoCards({ promoCardsData = [] }) {
+function PromoBanners({ promoBannersData = [] }) {
     const { lg } = useBreakpoint();
-    const promoCards = promoCardsData.map((promoCard, index) => (jsx(PromoCard, { href: promoCard.href, image: promoCard.image, variant: index % 2 === 0 ? 'lg' : 'sm' }, `promo-card-${index}`)));
-    if (promoCardsData.length === 0)
+    const promoBanners = promoBannersData.map((promoBanner, index) => (jsx(PromoBanner, { href: promoBanner.href, image: promoBanner.image, variant: index % 2 === 0 ? 'lg' : 'sm' }, `promo-banner-${index}`)));
+    if (promoBannersData.length === 0)
         return null;
-    return (jsx("div", { className: styles$g.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
+    return (jsx("div", { className: styles$g.promos, children: lg ? (jsx(Fragment, { children: promoBanners })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoBanners, spaceBetween: 16 })) }));
 }
 
 function useFetchProductListingPageData({ languageCode, pageUrl, }) {
@@ -9331,9 +9361,9 @@ function useFetchProductListingPageData({ languageCode, pageUrl, }) {
                     : undefined,
                 categoryPages: body.categoryPages,
                 hierarchicalCategories: body.hierarchicalCategories,
-                promoCards: body.promoCards
+                promoBanners: body.promoBanners
                     ? {
-                        top: body.promoCards.top || undefined,
+                        top: body.promoBanners.top || undefined,
                     }
                     : undefined,
                 subcategories: body.categories?.subCategories?.map(subcategory => ({
@@ -9642,29 +9672,38 @@ function useAlgoliaInsights() {
   sendEvents: Parameters<ReturnType<typeof makeSendEvents>>;
 */
 
-function ProductListingProductOverview() {
-    const { isLoading, products } = useAlgoliaProductHits();
+var styles$c = {"promo-card-container":"promo-card-module-idY1g","promo-card":"promo-card-module-e2oii","image":"promo-card-module-jr9sn"};
+
+function PromoCard({ href, image, onClick }) {
+    return (jsx("div", { className: styles$c['promo-card-container'], children: jsx(RouteLink, { className: styles$c['promo-card'], href: href, onClick: onClick, children: jsx(Image, { className: styles$c.image, fit: "cover", image: image, title: image.altText }) }) }));
+}
+
+function ProductHitCard$2({ hit }) {
     const { sendAddToCartFromProductListPageEvent, sendAddToWishListFromProductListPageEvent, sendProductClickFromProductListPageEvent, } = useAlgoliaInsights();
-    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: products.map(product => (jsx(ConnectedProductCard, { href: product.storefrontSlug, id: product.storefrontId, image: {
-                fit: 'contain',
-                image: product.image,
-                title: product.name,
-            }, onAddToCart: () => sendAddToCartFromProductListPageEvent({
-                objectId: product.objectId,
-            }), onClick: () => sendProductClickFromProductListPageEvent({
-                objectId: product.objectId,
-                position: product.position,
-            }), onFavoriting: () => sendAddToWishListFromProductListPageEvent({
-                objectId: product.objectId,
-                position: product.position,
-            }), price: {
-                isVatIncluded: product.isVatIncluded,
-                originalPrice: product.originalPrice,
-                price: product.price,
-            }, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
-}
-
-var styles$c = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","promos":"product-listing-page-module-iY1yj","action-bar":"product-listing-page-module-XxGrr","sidebar-toggle":"product-listing-page-module-F7bxy","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
+    return (jsx(ConnectedProductCard, { href: hit.storefrontSlug, id: hit.storefrontId, image: {
+            fit: 'contain',
+            image: hit.image,
+            title: hit.name,
+        }, onAddToCart: () => sendAddToCartFromProductListPageEvent({
+            objectId: hit.objectId,
+        }), onClick: () => sendProductClickFromProductListPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), onFavoriting: () => sendAddToWishListFromProductListPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), price: {
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+}
+function ProductListingProductOverview() {
+    const { hits, isLoading } = useAlgoliaHits();
+    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard$2, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) }));
+}
+
+var styles$b = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","promos":"product-listing-page-module-iY1yj","action-bar":"product-listing-page-module-XxGrr","sidebar-toggle":"product-listing-page-module-F7bxy","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
 
 const defaultSearchClient = createSonicSearchClient({
     apiKey: config.ALGOLIA_API_KEY,
@@ -9682,43 +9721,46 @@ function ProductListingPage({ pageUrl, searchClient = defaultSearchClient, }) {
     if (!data || isFetching)
         return jsx(LoadingPage, {});
     const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
-    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoCards: data.promoCards?.top }) }) }, data.categoryPages) }));
+    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$b['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoBanners: data.promoBanners?.top }) }) }, data.categoryPages) }));
 }
-function ProductListingPageContent({ currentCategoryPath, promoCards, }) {
-    const { isLoading, products } = useAlgoliaProductHits();
-    const hasProducts = products.length > 0;
+function ProductListingPageContent({ currentCategoryPath, promoBanners, }) {
+    const { hits, isLoading } = useAlgoliaHits();
+    const hasHits = hits.length > 0;
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && jsx(LoadingPage, {}), isLoading === false && !hasProducts && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
-                    display: !hasProducts ? 'none' : undefined,
-                }, children: [promoCards?.length && (jsx("section", { className: styles$c.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$c.categories, children: jsx(ProductListingPageCategoryCarousel, { currentCategoryPath: currentCategoryPath }) }), jsxs("section", { className: styles$c['action-bar'], children: [jsx("div", { className: styles$c['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$c.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$c.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$c['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$c['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$c.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
+                    display: !hasHits ? 'none' : undefined,
+                }, children: [promoBanners?.length && (jsx("section", { className: styles$b.promos, children: jsx(PromoBanners, { promoBannersData: promoBanners }) })), jsx("section", { className: styles$b.categories, children: jsx(ProductListingPageCategoryCarousel, { currentCategoryPath: currentCategoryPath }) }), jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
                                                     setTimeout(() => {
                                                         scrollToTop();
                                                     }, 100);
                                                 } }) })] })] }) })] })] }));
 }
 
-function SearchResultProductOverview() {
-    const { isLoading, products } = useAlgoliaProductHits();
+function ProductHitCard$1({ hit }) {
     const { sendAddToCartFromSearchResultPageEvent, sendAddToWishListFromSearchResultPageEvent, sendProductClickFromSearchResultPageEvent, } = useAlgoliaInsights();
-    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: products.map(product => (jsx(ConnectedProductCard, { href: product.storefrontSlug, id: product.storefrontId, image: {
-                fit: 'contain',
-                image: product.image,
-                title: product.name,
-            }, onAddToCart: () => sendAddToCartFromSearchResultPageEvent({
-                objectId: product.objectId,
-            }), onClick: () => {
-                sendProductClickFromSearchResultPageEvent({
-                    objectId: product.objectId,
-                    position: product.position,
-                });
-            }, onFavoriting: () => sendAddToWishListFromSearchResultPageEvent({
-                objectId: product.objectId,
-                position: product.position,
-            }), price: {
-                isVatIncluded: product.isVatIncluded,
-                originalPrice: product.originalPrice,
-                price: product.price,
-            }, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
+    return (jsx(ConnectedProductCard, { href: hit.storefrontSlug, id: hit.storefrontId, image: {
+            fit: 'contain',
+            image: hit.image,
+            title: hit.name,
+        }, onAddToCart: () => sendAddToCartFromSearchResultPageEvent({
+            objectId: hit.objectId,
+        }), onClick: () => {
+            sendProductClickFromSearchResultPageEvent({
+                objectId: hit.objectId,
+                position: hit.position,
+            });
+        }, onFavoriting: () => sendAddToWishListFromSearchResultPageEvent({
+            objectId: hit.objectId,
+            position: hit.position,
+        }), price: {
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+}
+function SearchResultProductOverview() {
+    const { hits, isLoading } = useAlgoliaHits();
+    return (jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard$1, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) }));
 }
 
 function SearchResultsPageCategoryCarousel() {
@@ -9735,7 +9777,7 @@ function SearchResultsPageCategoryCarousel() {
             }, title: category.name }, index))) }));
 }
 
-var styles$b = {"search-results":"search-results-page-module-M7SIu","header":"search-results-page-module-DpNT-","action-bar":"search-results-page-module-RJoMk","sidebar-toggle":"search-results-page-module-SzLQb","sort":"search-results-page-module-cgonp","count":"search-results-page-module-hunZp","categories":"search-results-page-module-n2lSj","product-grid-container":"search-results-page-module-TK-iE","product-grid":"search-results-page-module-HWUnk","pagination":"search-results-page-module-SZYiA"};
+var styles$a = {"search-results":"search-results-page-module-M7SIu","header":"search-results-page-module-DpNT-","action-bar":"search-results-page-module-RJoMk","sidebar-toggle":"search-results-page-module-SzLQb","sort":"search-results-page-module-cgonp","count":"search-results-page-module-hunZp","categories":"search-results-page-module-n2lSj","product-grid-container":"search-results-page-module-TK-iE","product-grid":"search-results-page-module-HWUnk","pagination":"search-results-page-module-SZYiA"};
 
 function SearchResultsPage({ location, searchClient, }) {
     const languageCode = useLanguageCode();
@@ -9744,26 +9786,26 @@ function SearchResultsPage({ location, searchClient, }) {
     const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
     if (!keyword)
         return jsx("h1", { children: "No search results...." });
-    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$b['search-results'], title: t("'{0}' in all products", {
+    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$a['search-results'], title: t("'{0}' in all products", {
                 replacementValues: { 0: keyword },
             }), children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
 }
 function SearchResultsPageContent({ keyword }) {
-    const { isLoading, products } = useAlgoliaProductHits();
-    const hasProducts = products.length > 0;
+    const { hits, isLoading } = useAlgoliaHits();
+    const hasHits = hits.length > 0;
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && jsx(LoadingPage, {}), isLoading === false && !hasProducts && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
+    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
                     replacementValues: { 0: keyword },
                 }) })), jsxs("div", { style: {
-                    display: !hasProducts ? 'none' : undefined,
-                }, children: [jsx("section", { className: styles$b.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+                    display: !hasHits ? 'none' : undefined,
+                }, children: [jsx("section", { className: styles$a.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("section", { className: styles$a['action-bar'], children: [jsx("div", { className: styles$a['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$a.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$a.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$a['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$a['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$a.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
                                                     setTimeout(() => {
                                                         scrollToTop();
                                                     }, 100);
                                                 } }) })] })] }) })] })] }));
 }
 
-var styles$a = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
+var styles$9 = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
 
 function BackgroundOverlay({ className, isOpen, onClick, }) {
     const [, setRender] = useState(isOpen);
@@ -9784,13 +9826,13 @@ function BackgroundOverlay({ className, isOpen, onClick, }) {
     }, [isOpen]);
     if (typeof window === 'undefined')
         return null;
-    return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$a['background-overlay'], {
-            [styles$a['open']]: isOpen,
-            [styles$a['close']]: !isOpen,
+    return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$9['background-overlay'], {
+            [styles$9['open']]: isOpen,
+            [styles$9['close']]: !isOpen,
         }, className), onClick: onClick }), document.body);
 }
 
-var styles$9 = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
+var styles$8 = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
 
 function SidebarDetectBreakpoint() {
     const xxl = useIsBreakpoint('xxl');
@@ -9820,10 +9862,10 @@ function SidebarDetectBreakpoint() {
 function SidebarProvider({ children }) {
     const state = useSidebar();
     const { close, isDocked, isOpen, transition } = state;
-    return (jsxs("div", { className: clsx(styles$9['sidebar-container'], {
-            [styles$9['transition']]: transition,
-            [styles$9['docked']]: isDocked,
-            [styles$9['open']]: isOpen,
+    return (jsxs("div", { className: clsx(styles$8['sidebar-container'], {
+            [styles$8['transition']]: transition,
+            [styles$8['docked']]: isDocked,
+            [styles$8['open']]: isOpen,
         }), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: close }))] }));
 }
 
@@ -10096,7 +10138,9 @@ function useAlgoliaSearch() {
     const products = state.collections
         .map(collection => ({
         ...collection,
-        items: collection.items.map(transformAlgoliaProductHitToProductHit),
+        items: collection.items.map(hit => isAlgoliaProductHit(hit)
+            ? transformAlgoliaProductHitToProductHit(hit)
+            : transformAlgoliaPromoHitToPromoHit(hit)),
     }))
         .find(collection => collection.source.sourceId === 'productsPlugin');
     const popularSearches = state.collections.find(collection => collection.source.sourceId === 'popularSearchesPlugin');
@@ -10119,12 +10163,12 @@ function useAlgoliaSearch() {
     };
 }
 
-var styles$8 = {"global-search-background-overlay-position":"global-search-module-T0bEf","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
+var styles$7 = {"global-search-background-overlay-position":"global-search-module-T0bEf","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
 
 const GlobalSearchDisclosureContext = createContext(null);
 function GlobalSearchProvider({ children, searchClient, }) {
     const { close, isOpen, open, toggle } = useDisclosure(false);
-    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [children, jsx(BackgroundOverlay, { className: styles$8['global-search-background-overlay-position'], isOpen: isOpen, onClick: toggle })] }) }));
+    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [children, jsx(BackgroundOverlay, { className: styles$7['global-search-background-overlay-position'], isOpen: isOpen, onClick: toggle })] }) }));
 }
 
 const useGlobalSearchDisclosure = () => {
@@ -10139,7 +10183,7 @@ function StrokeSearchIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M10.1044994,16.5738466 C6.53724234,16.5738466 3.63503896,13.6716658 3.63503896,10.1044364 C3.63503896,6.53739167 6.53724234,3.63521084 10.1044994,3.63521084 C13.6717564,3.63521084 16.5737752,6.53739167 16.5737752,10.1044364 C16.5737752,13.6716658 13.6717564,16.5738466 10.1044994,16.5738466 M21.7583512,20.6019769 L16.3655653,15.2505791 C17.5171805,13.8510793 18.2089988,12.0586047 18.2089988,10.1044364 C18.2089988,5.62851052 14.5804601,2 10.1044994,2 C5.62853871,2 2,5.62851052 2,10.1044364 C2,14.5805469 5.62853871,18.2090574 10.1044994,18.2090574 C12.0372712,18.2090574 13.8113014,17.5312728 15.2041671,16.4020009 L20.6065514,21.7628123 C20.7660314,21.9208144 20.9742413,22 21.1824513,22 C21.3925071,22 21.6029321,21.9191531 21.7627812,21.7581977 C22.0808183,21.4377636 22.0787879,20.9200114 21.7583512,20.6019769", fillRule: "evenodd" }) }));
 }
 
-var styles$7 = {"form":"search-input-module-xCCzd","input-container":"search-input-module-okP8k","icon":"search-input-module-GZbhK","label":"search-input-module-vKCm4","reset-btn":"search-input-module-lYseZ","input":"search-input-module-bELFK"};
+var styles$6 = {"form":"search-input-module-xCCzd","input-container":"search-input-module-okP8k","icon":"search-input-module-GZbhK","label":"search-input-module-vKCm4","reset-btn":"search-input-module-lYseZ","input":"search-input-module-bELFK"};
 
 function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, placeholder, }) {
     const formProps = autocomplete?.getFormProps({
@@ -10155,10 +10199,10 @@ function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, plac
         formProps?.onSubmit(e);
         onSubmit?.();
     }
-    return (jsx("form", { ref: formRef, className: styles$7.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles$7['input-container'], children: [jsx("label", { className: styles$7.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$7['icon-search'], styles$7.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
+    return (jsx("form", { ref: formRef, className: styles$6.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles$6['input-container'], children: [jsx("label", { className: styles$6.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$6['icon-search'], styles$6.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
                         if (e.key === 'Escape')
                             onCancel?.();
-                    }, ...inputProps, className: styles$7.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles$7['reset-btn'], color: "secondary", onClick: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
+                    }, ...inputProps, className: styles$6.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles$6['reset-btn'], color: "secondary", onClick: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
 }
 
 function ConnectedSearchInput() {
@@ -10172,26 +10216,26 @@ function ConnectedSearchInput() {
         }, placeholder: t('What are you searching for?') }));
 }
 
-var styles$6 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1","category-grid-card":"categories-grid-module-Q7i00"};
+var styles$5 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1","category-grid-card":"categories-grid-module-Q7i00"};
 
 function CategoriesGrid({ categories, onItemClick, }) {
-    return (jsx("div", { className: styles$6['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$6['category'], children: jsx(CategoryCard, { className: styles$6['category-grid-card'], href: category.href, image: {
+    return (jsx("div", { className: styles$5['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$5['category'], children: jsx(CategoryCard, { className: styles$5['category-grid-card'], href: category.href, image: {
                     fit: 'contain',
                     image: category.image,
                     title: category.title,
                 }, onClick: onItemClick, title: category.title }, category.title) }, category.title))) }));
 }
 
-var styles$5 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR"};
+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$5['search-section'], className), children: [jsxs("div", { className: styles$5.header, children: [title && jsx("h2", { className: styles$5.title, children: title }), button && button] }), children] }));
+    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] }));
 }
 
-var styles$4 = {"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","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$4['section-container'], children: jsxs("div", { className: styles$4['content'], children: [jsx("div", { className: styles$4['left'], children: leftContent }), jsxs("div", { className: styles$4['right'], children: [rightContent, jsx("div", { className: styles$4['button-container'], children: buttons })] })] }) }));
+    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 })] })] }) }));
 }
 
 function NoResults() {
@@ -10200,7 +10244,7 @@ function NoResults() {
 function NotFound() {
     const { state } = useAlgoliaSearch();
     const t = useFormattedMessage();
-    return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles$4['no-results-text'], children: jsxs("div", { className: styles$4.section, children: [jsxs("p", { className: styles$4.query, children: ["'", state.query, "'"] }), jsxs("div", { className: styles$4.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles$4.list, children: [jsx("li", { children: jsx(FormattedMessage, { id: "Searching again using more general terms" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Double check your spelling" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Use fewer keywords" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Exploring our products by category" }) })] })] })] }) }) }));
+    return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles$3['no-results-text'], children: jsxs("div", { className: styles$3.section, children: [jsxs("p", { className: styles$3.query, children: ["'", state.query, "'"] }), jsxs("div", { className: styles$3.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles$3.list, children: [jsx("li", { children: jsx(FormattedMessage, { id: "Searching again using more general terms" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Double check your spelling" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Use fewer keywords" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Exploring our products by category" }) })] })] })] }) }) }));
 }
 function PopularCategoriesSection() {
     const { popularCategories: collection } = useAlgoliaSearch();
@@ -10209,7 +10253,7 @@ function PopularCategoriesSection() {
     if (!collection)
         return null;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$4['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
+    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$3['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
 }
 
 function Highlight({ attribute, hit, tagName = 'mark', }) {
@@ -10221,20 +10265,18 @@ function Highlight({ attribute, hit, tagName = 'mark', }) {
     }));
 }
 
-var styles$3 = {"search-list":"search-list-module-vRuMO"};
+var styles$2 = {"search-list":"search-list-module-vRuMO"};
 
 function SearchList({ ariaLabelledby, children, className, id, }) {
-    return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$3['search-list'], className), id: id, children: children }));
+    return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$2['search-list'], className), id: id, children: children }));
 }
 
-var styles$2 = {"search-list-item":"search-list-item-module-WXp77","clear-filter-button":"search-list-item-module-YJvJm","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN"};
+var styles$1 = {"search-list-item":"search-list-item-module-WXp77","clear-filter-button":"search-list-item-module-YJvJm","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN"};
 
 function SearchListItem({ icon, isRemovable = false, onClick, onRemove, text, }) {
-    return (jsxs("li", { className: styles$2['search-list-item'], onClick: onClick, role: "option", children: [jsxs("div", { className: styles$2.content, children: [icon && icon, text && jsx("span", { className: styles$2.text, children: text })] }), isRemovable && (jsx(IconButton, { className: styles$2['clear-filter-button'], color: "secondary", onClick: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
+    return (jsxs("li", { className: styles$1['search-list-item'], onClick: onClick, role: "option", children: [jsxs("div", { className: styles$1.content, children: [icon && icon, text && jsx("span", { className: styles$1.text, children: text })] }), isRemovable && (jsx(IconButton, { className: styles$1['clear-filter-button'], color: "secondary", onClick: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
 }
 
-var styles$1 = {"quick-access-section":"no-search-module-87NKV","quick-access-carousel":"no-search-module-beCXI","quick-access-card":"no-search-module-dtT5J"};
-
 function NoSearch() {
     return (jsx(SectionContainer, { leftContent: jsxs("div", { children: [jsx(RecentSearchesSection, {}), jsx(PopularSearchesSection, {})] }), rightContent: jsx(QuickAccessSection, {}) }));
 }
@@ -10270,7 +10312,7 @@ function QuickAccessSection() {
     if (!collection)
         return;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$1['quick-access-section'], children: jsx(Carousel, { className: styles$1['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$1['quick-access-card'], href: item.action.url, onClick: close, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), slidesPerView: "auto", spaceBetween: 16 }) }) }));
+    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" }) }) }));
 }
 
 function StrokeRecentIcon(props) {
@@ -10280,12 +10322,12 @@ function StrokeRecentIcon(props) {
 function WithResults() {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$4['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onClick: close, children: [jsx(FormattedMessage, { id: "See all results" }), jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
+    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$3['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onClick: close, children: [jsx(FormattedMessage, { id: "See all results" }), jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
     const t = useFormattedMessage();
-    return (jsxs(SearchSection, { className: styles$4['product-results-section'], title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
+    return (jsxs(SearchSection, { className: styles$3['product-results-section'], 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,
@@ -10307,45 +10349,48 @@ function SuggestionsSection() {
                         source: categories.source,
                     }), icon: jsx(StrokeSearchIcon, {}), text: jsxs("span", { children: [jsx("span", { children: item.listCategories[item.listCategories.length - 1] }), jsx("span", { children: item.listCategories.slice(0, -1).join(' > ') })] }) }, item.objectID))) }))] }));
 }
-function ProductResultsSection() {
-    const { autocomplete, products: collection } = useAlgoliaSearch();
+function ProductHitCard({ autocomplete, hit, index, source, }) {
     const { close } = useGlobalSearchDisclosure();
     const { sendAddToCartFromSearchEvent, sendAddToWishListFromSearchEvent, sendProductClickFromSearchEvent, } = useAlgoliaInsights();
+    return (createElement$1(ConnectedProductCard, { ...autocomplete.getItemProps({
+            item: hit.hit,
+            source,
+        }), key: hit.storefrontId, href: hit.storefrontSlug, id: hit.storefrontId, image: {
+            fit: 'contain',
+            image: hit.image,
+            title: hit.name,
+        }, onAddToCart: () => hit.queryId &&
+            sendAddToCartFromSearchEvent({
+                objectId: hit.objectId,
+                queryId: hit.queryId,
+            }), onClick: () => {
+            close();
+            hit.queryId &&
+                sendProductClickFromSearchEvent({
+                    objectId: hit.objectId,
+                    position: hit.position || index + 1,
+                    queryId: hit.queryId,
+                });
+        }, onFavoriting: () => {
+            hit.queryId &&
+                sendAddToWishListFromSearchEvent({
+                    objectId: hit.objectId,
+                    position: hit.position || index + 1,
+                    queryId: hit.queryId,
+                });
+        }, price: {
+            isVatIncluded: hit.isVatIncluded,
+            originalPrice: hit.originalPrice,
+            price: hit.price,
+        }, sku: hit.id, tags: hit.labels, title: jsx(Highlight, { attribute: "name", hit: hit.hit }) }));
+}
+function ProductResultsSection() {
+    const { autocomplete, products: collection } = useAlgoliaSearch();
     const t = useFormattedMessage();
     if (!collection)
         return null;
     const { items, source } = collection;
-    return (jsx(SearchSection, { className: styles$4['product-results-section'], title: t('Products'), children: jsx("div", { className: styles$4['product-results'], ...autocomplete.getListProps({ source }), children: jsx(ProductCarousel, { cardWidth: "narrow", productCards: items.map((product, index) => (createElement$1(ConnectedProductCard, { ...autocomplete.getItemProps({
-                        item: product.hit,
-                        source: source,
-                    }), key: product.storefrontId, href: product.storefrontSlug, id: product.storefrontId, image: {
-                        fit: 'contain',
-                        image: product.image,
-                        title: product.name,
-                    }, onAddToCart: () => product.queryId &&
-                        sendAddToCartFromSearchEvent({
-                            objectId: product.objectId,
-                            queryId: product.queryId,
-                        }), onClick: () => {
-                        close();
-                        product.queryId &&
-                            sendProductClickFromSearchEvent({
-                                objectId: product.objectId,
-                                position: product.position || index + 1,
-                                queryId: product.queryId,
-                            });
-                    }, onFavoriting: () => {
-                        product.queryId &&
-                            sendAddToWishListFromSearchEvent({
-                                objectId: product.objectId,
-                                position: product.position || index + 1,
-                                queryId: product.queryId,
-                            });
-                    }, price: {
-                        isVatIncluded: product.isVatIncluded,
-                        originalPrice: product.originalPrice,
-                        price: product.price,
-                    }, sku: product.id, tags: product.labels, title: jsx(Highlight, { attribute: "name", hit: product.hit }) }))), productsPerView: "auto" }) }) }));
+    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" }) }) }));
 }
 
 function PanelContent() {
@@ -10375,7 +10420,7 @@ function SearchRoot() {
             inputRef.current.blur();
         }
     }, [inputRef, isOpen]);
-    return (jsx("div", { className: styles$8['search-root'], children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles$8['search-container'], styles$8[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles$8.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles$8.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
+    return (jsx("div", { className: styles$7['search-root'], children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles$7['search-container'], styles$7[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles$7.input, children: jsx(ConnectedSearchInput, {}) }), jsx(SearchResultPanel, {})] })) }) }));
 }
 /**
  * Global search using algolia autocomplete with a custom renderer
@@ -10389,7 +10434,7 @@ function GlobalSearch() {
     const panelRef = useRef(null);
     const { close, isOpen } = useGlobalSearchDisclosure();
     useOnNavigate(close);
-    return (jsx(TransitionGroup, { children: jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: jsx("div", { className: styles$8['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
+    return (jsx(TransitionGroup, { children: jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: jsx("div", { className: styles$7['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
 }
 
 const queryClient = new QueryClient({
@@ -10419,4 +10464,4 @@ console.log(`@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@`);
 
-export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AnnouncementProvider, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CountrySelector, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, InternalServerErrorRequest, IntlProvider, Link, LoadingOverlay, MultiSelect, NotFoundRequestError, NumberField, Page, PageContainer, ProductCard, ProductDetailsPage, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RequestError, RouteButton, RouteLink, RouteProvider, SearchResultsPage, SearchRoot, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useOnNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
+export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AnnouncementProvider, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CountrySelector, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, ForbiddenRequestError, FormattedMessage, GlobalSearch, GlobalSearchDisclosureContext, GlobalSearchProvider, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, InternalServerErrorRequest, IntlProvider, Link, LoadingOverlay, MultiSelect, NotFoundRequestError, NumberField, Page, PageContainer, ProductCard, ProductDetailsPage, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RequestError, RouteButton, RouteLink, RouteProvider, SearchResultsPage, SearchRoot, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, VariantDisplayTypeValues, WishListNameAlreadyExistsError, addProductToCurrentCart, addWishListItemToWishList, config, configPerEnvironment, createSession, createSonicSearchClient, createWishList, deleteCartLineById, deleteWishList, deleteWishListItemFromWishList, environment, environments, fetchCurrentCartLines, fetchTranslations, getSession, getWishList, getWishListItemsByWishListId, getWishLists, isProductHit, isRequestError, request, signIn, signOut, transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit, updateCartLineById, useAddProductToCurrentCart, useAddWishListItemToCurrentWishList, useAddWishListItemToWishList, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useCreateWishList, useDebouncedCallback, useDeleteCartLineById, useDeleteWishListItemFromWishList, useDisclosure, useFavorite, useFavoriteProduct, useFeatureFlags, useFetchAllWishListsItems, useFetchCurrentCartLines, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useOnNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };