@sonic-equipment/ui 0.0.62 → 0.0.64

package/dist/index.js

@@ -2,7 +2,7 @@ import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider
 import qs from 'query-string';
 import React, { useState, useCallback, useEffect, useRef, createContext, useContext, forwardRef, useLayoutEffect, Children, cloneElement, createElement as createElement$1, useMemo, Fragment as Fragment$1 } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Link, Button as Button$1, Breadcrumbs, Breadcrumb as Breadcrumb$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1, ModalOverlay, Modal as Modal$1, Dialog as Dialog$1, Form } from 'react-aria-components';
+import { Link as Link$1, Button as Button$1, Breadcrumbs, Breadcrumb as Breadcrumb$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1, ModalOverlay, Modal as Modal$1, Dialog as Dialog$1, Form } from 'react-aria-components';
 import clsx from 'clsx';
 import { useHierarchicalMenu, useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useInstantSearch as useInstantSearch$1, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
 import { useInstantSearch } from 'react-instantsearch-core';
@@ -54,18 +54,16 @@ const configPerEnvironment = {
     production: {
         ALGOLIA_API_KEY: 'e31a3a53449eceb4d0f9273b9bcd9759',
         ALGOLIA_APP_ID: '14CUFCVMAD',
-        ALGOLIA_HOST: 'bff.shop.sonic-equipment.com',
-        ALGOLIA_PROXY_HOST: 'sonicequipment.commerce.insitesandbox.com',
-        PROXY_API_URL: 'https://shop.sonic-equipment.com/api/v1/bff',
+        ALGOLIA_HOST: 'shop.sonic-equipment.com',
+        BFF_API_URL: 'https://shop.sonic-equipment.com/api/v1/bff',
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         SHOP_API_URL: 'https://shop.sonic-equipment.com',
     },
     sandbox: {
         ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
-        ALGOLIA_HOST: 'test-bff.shop.sonic-equipment.com',
-        ALGOLIA_PROXY_HOST: 'sonicequipment.commerce.insitesandbox.com',
-        PROXY_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
+        ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
+        BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         'https://sonicequipment.commerce.insitesandbox.com',
@@ -323,7 +321,7 @@ function useFetchProductListingPageData({ languageCode, pageUrl, }) {
         queryFn: async () => {
             return request({
                 headers: { 'Current-Language-Id': languageCode },
-                url: `${config.PROXY_API_URL}/plp/?pageUrl=${pageUrl}`,
+                url: `${config.BFF_API_URL}/plp/?pageUrl=${pageUrl}`,
             });
         },
         queryKey: ['product-listing-page-data', pageUrl, languageCode],
@@ -344,6 +342,7 @@ function useFetchProductListingPageData({ languageCode, pageUrl, }) {
                     title: data.categories.shortDescription,
                 },
                 categoryPages: data.categoryPages,
+                hierarchicalCategories: data.hierarchicalCategories,
                 promoCards: data.promoCards
                     ? {
                         top: data.promoCards.top,
@@ -778,9 +777,10 @@ async function getWishListItemsByWishListId({ wishListId, }) {
     });
 }
 
-function useFetchAllWishListsItems() {
+function useFetchAllWishListsItems({ enabled = true } = { enabled: true }) {
     const queryClient = useQueryClient();
     return useQuery({
+        enabled,
         queryFn: async () => {
             const body = 
             // Reuse existing data if available
@@ -817,8 +817,8 @@ function useFavorite() {
     return { signInUrl: state.signInUrl };
 }
 function useFavoriteProduct(productId) {
-    const { data: entries, isFetching: isFetchingWishListItems } = useFetchAllWishListsItems();
     const isAuthenticated = useIsAuthenticated();
+    const { data: entries, isFetching: isFetchingWishListItems } = useFetchAllWishListsItems({ enabled: Boolean(isAuthenticated) });
     const entry = entries?.find(({ wishListItem }) => wishListItem.productId === productId);
     return {
         isFavorite: Boolean(entry),
@@ -840,6 +840,22 @@ function useNavigate() {
     return state.navigate;
 }
 
+var styles$Q = {"link":"link-module-xLqBn","primary":"link-module-bGD6u","secondary":"link-module-v31wH","has-underline":"link-module-UuCEp"};
+
+function Link({ children, className, color = 'primary', hasUnderline, onClick: _onClick, ...props }) {
+    function onClick(e) {
+        _onClick?.(e);
+        if (props.href)
+            return;
+        e.preventDefault();
+    }
+    return (jsx(Link$1, { className: clsx({ [styles$Q['has-underline']]: hasUnderline }, styles$Q['link'], styles$Q[color], className), 
+        // Workaround for adobe/react-spectrum #963
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onClick: onClick, ...props, children: children }));
+}
+
 function RouteLink({ children, onClick: _onClick, ...props }) {
     const navigate = useNavigate();
     function onClick(e) {
@@ -847,33 +863,46 @@ function RouteLink({ children, onClick: _onClick, ...props }) {
         if (!props.href)
             return;
         e.preventDefault();
+        if (props.isDisabled)
+            return;
         navigate(props.href, props.route);
     }
-    function onHoverStart() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function onHoverStart(e) {
         // TODO: Implement prefetch
+        props.onHoverStart?.(e);
     }
-    return (jsx(Link
-    // Workaround for adobe/react-spectrum #963
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    , { 
+    return (jsx(Link, { onClick: onClick, onHoverStart: onHoverStart, ...props, children: children }));
+}
+
+function GlyphsArrowBoldCapsRightIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd" }) }));
+}
+
+var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
+
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, href, icon, iconPosition = 'left', isDisabled, onClick: _onClick, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+    const showIconOnLeft = icon && iconPosition === 'left';
+    const showIconOnRight = icon && iconPosition === 'right';
+    const onClick = (e) => {
+        if (_onClick)
+            _onClick(e);
+        if (e.isDefaultPrevented())
+            return;
+        if (href)
+            window.location.href = href;
+        e.preventDefault();
+    };
+    return (jsxs(Button$1, { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), isDisabled: isDisabled, 
         // Workaround for adobe/react-spectrum #963
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        onClick: onClick, onHoverStart: onHoverStart, ...props, children: children }));
+        onClick: onClick, onPress: onPress, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
 }
 
 function RouteButton({ children, ...props }) {
     const navigate = useNavigate();
-    return (jsx(Button$1
-    // Workaround for adobe/react-spectrum #963
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    , { 
-        // Workaround for adobe/react-spectrum #963
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        onClick: e => {
+    return (jsx(Button, { onClick: e => {
             if (!props.href)
                 return;
             e.preventDefault();
@@ -915,22 +944,22 @@ function SolidHomeIcon(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: "M15.039782,22 C14.6690193,22 14.3684378,21.6994185 14.3684378,21.3286559 L14.3684378,15.6029043 L9.34495251,15.6029043 L9.34495251,21.3286559 C9.34495251,21.6994185 9.04437101,22 8.67345678,22 L3.67134415,22 C3.3005815,22 3,21.6994185 3,21.3286559 L3,9.79560307 C3,9.60127857 3.08412644,9.41665514 3.23055192,9.28917706 L11.4158271,2.16495603 C11.6686612,1.94501466 12.0447291,1.94501466 12.2975632,2.16495603 L20.4828384,9.28917706 C20.6292639,9.41665514 20.7133903,9.60127857 20.7133903,9.79560307 L20.7133903,21.3286559 C20.7133903,21.6994185 20.4128088,22 20.0418946,22 L15.039782,22 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$Q = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
+var styles$P = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
 
 function BreadcrumbShort({ links }) {
     const homeLink = links[0];
     const previousLink = links[links.length - 2];
-    return (jsx(Breadcrumbs, { className: styles$Q.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$Q.breadcrumb, children: jsxs(RouteLink, { className: styles$Q.link, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$Q.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(SolidHomeIcon, { className: styles$Q.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
+    return (jsx(Breadcrumbs, { className: styles$P.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$P.breadcrumb, children: jsxs(RouteLink, { className: styles$P.link, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$P.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(SolidHomeIcon, { className: styles$P.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
 }
 function BreadcrumbLongItem({ index, isDisabled, link, }) {
-    return (jsx(Breadcrumb$1, { className: styles$Q.breadcrumb, children: jsxs(RouteLink, { className: styles$Q.link, href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$Q['previous-icon'], styles$Q.icon) }), link.label] }) }, index));
+    return (jsx(Breadcrumb$1, { className: styles$P.breadcrumb, children: jsxs(RouteLink, { className: styles$P.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$P['previous-icon'], styles$P.icon) }), link.label] }) }, index));
 }
 function BreadcrumbLong({ links }) {
     const linksWithoutFirst = links.slice(1);
     const homeLink = links[0];
     if (!homeLink)
         return null;
-    return (jsxs(Breadcrumbs, { className: styles$Q.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$Q.breadcrumb, children: jsx(RouteLink, { className: styles$Q.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$Q['home-icon'], styles$Q.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
+    return (jsxs(Breadcrumbs, { className: styles$P.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$P.breadcrumb, children: jsx(RouteLink, { className: styles$P.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$P['home-icon'], styles$P.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
 }
 function Breadcrumb({ links }) {
     const { lg } = useBreakpoint();
@@ -939,24 +968,10 @@ function Breadcrumb({ links }) {
     return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
 }
 
-function GlyphsArrowBoldCapsRightIcon(props) {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd" }) }));
-}
-
-var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
-
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
-    return (jsxs(Button$1, { className: clsx(className, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], { [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles[_pseudo]), isDisabled: isDisabled, 
-        // Workaround for adobe/react-spectrum #963
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        onClick: e => e.preventDefault(), onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: buttonStyles.icon, children: icon })), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: buttonStyles.icon, children: icon }))] }));
-}
-
-var styles$P = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
+var styles$O = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
 
 function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', type = 'button', }) {
-    return (jsx(Button$1, { className: clsx(styles$P['icon-button'], styles$P[size], styles$P[color], className), isDisabled: isDisabled, 
+    return (jsx(Button$1, { className: clsx(styles$O['icon-button'], styles$O[size], styles$O[color], className), isDisabled: isDisabled, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         onClick: e => e.preventDefault(), onPress: onPress, type: type, children: children }));
@@ -970,27 +985,14 @@ function StrokeFavoriteIcon(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: "M7.33319295,3.33090958 C5.12714802,3.33090958 3.33232058,5.12348359 3.33232058,7.32679321 C3.33232058,8.18447047 3.64878056,9.03643889 4.29989998,9.93107334 L11.9997744,20.2227497 L19.7053643,9.92401241 C20.351069,9.03643889 20.6673786,8.1846207 20.6673786,7.32679321 C20.6673786,5.12348359 18.8727016,3.33090958 16.6666566,3.33090958 C14.8537801,3.33090958 13.1222748,4.56251549 12.6388611,6.19569283 C12.5552338,6.47843037 12.2951771,6.67253074 11.9999248,6.67253074 C11.7046724,6.67253074 11.4447662,6.47843037 11.3609885,6.19569283 C10.8775748,4.56251549 9.14606944,3.33090958 7.33319295,3.33090958 M11.9997744,22 L11.9997744,22 C11.7898038,22 11.5918659,21.9008466 11.4662746,21.7327364 L3.22718487,10.720545 C2.41106707,9.59905954 2,8.45954615 2,7.32679321 C2,4.3895979 4.39240135,2 7.33319295,2 C9.22488362,2 11.0018124,2.98206975 11.9999248,4.46786903 C12.9978868,2.98206975 14.774966,2 16.6666566,2 C19.6072978,2 22,4.3895979 22,7.32679321 C22,8.45969638 21.5887825,9.59920978 20.777929,10.7136343 L12.5334246,21.7327364 C12.4076829,21.9008466 12.2098954,22 11.9997744,22", fillRule: "evenodd" }) }));
 }
 
-var styles$O = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
+var styles$N = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
 
 function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
-    return (jsx(IconButton, { className: clsx(styles$O['favorite-button'], {
-            [styles$O['is-favorite']]: isFavorite,
+    return (jsx(IconButton, { className: clsx(styles$N['favorite-button'], {
+            [styles$N['is-favorite']]: isFavorite,
         }), color: "secondary", isDisabled: isDisabled, onPress: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
 }
 
-var styles$N = {"link-button":"link-button-module-6i75g","primary":"link-button-module-DRTd0","secondary":"link-button-module-HEqnO","has-underline":"link-button-module-Xc-3N"};
-
-function LinkButton({ children, className, href, isDisabled, onPress, route, hasUnderline = false, target, color = 'primary', type = href ? 'link' : 'button', }) {
-    if (type === 'link') {
-        return (jsx(RouteLink, { className: clsx(styles$N['link-button'], styles$N[color], { [styles$N['has-underline']]: hasUnderline }, className), href: href, isDisabled: isDisabled, onPress: onPress, route: route, target: target, children: children }));
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    }
-    else if (type === 'button') {
-        return (jsx(RouteButton, { className: clsx(styles$N['link-button'], styles$N[color], { [styles$N['has-underline']]: hasUnderline }, styles$N[color], className), href: href, isDisabled: isDisabled, onPress: onPress, route: route, type: "button", children: children }));
-    }
-    throw new Error('Invalid type ${type} for LinkButton component');
-}
-
 var styles$M = {"field-error":"field-error-module-FXnIg"};
 
 function FieldError({ children }) {
@@ -1261,7 +1263,7 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
 var styles$F = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return jsx("p", { className: styles$F['product-sku'], children: sku });
+    return (jsx("p", { className: styles$F['product-sku'], "data-test-selector": "productNumber", children: sku }));
 }
 
 function isResponsiveImage(image) {
@@ -1310,7 +1312,7 @@ function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, ima
 var styles$D = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
 function ProductCard({ addToCartButton: AddToCartButton, areaSelected, favoriteButton: FavoriteButton, href, id, image, onClick, onMouseDown, onMouseMove, onPress, price, role, sku, tags, title, }) {
-    return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$D['product-card'], href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$D.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$D['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$D.content, children: [jsxs("div", { className: styles$D.top, children: [jsx("div", { className: styles$D.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$D.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$D.bottom, children: [jsx("div", { className: styles$D.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$D['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+    return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$D['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$D.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$D['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$D.content, children: [jsxs("div", { className: styles$D.top, children: [jsx("div", { className: styles$D.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$D.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$D.bottom, children: [jsx("div", { className: styles$D.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$D['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
 /**
@@ -2563,7 +2565,7 @@ function updateSlides() {
       allSlidesSize += slideSizeValue + (spaceBetween || 0);
     });
     allSlidesSize -= spaceBetween;
-    const maxSnap = allSlidesSize - swiperSize;
+    const maxSnap = allSlidesSize > swiperSize ? allSlidesSize - swiperSize : 0;
     snapGrid = snapGrid.map(snap => {
       if (snap <= 0) return -offsetBefore;
       if (snap > maxSnap) return maxSnap + offsetAfter;
@@ -3410,8 +3412,11 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
   let direction;
   if (slideIndex > activeIndex) direction = 'next';else if (slideIndex < activeIndex) direction = 'prev';else direction = 'reset';
 
+  // initial virtual
+  const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
+  const isInitialVirtual = isVirtual && initial;
   // Update Index
-  if (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate) {
+  if (!isInitialVirtual && (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate)) {
     swiper.updateActiveIndex(slideIndex);
     // Update Height
     if (params.autoHeight) {
@@ -3431,7 +3436,6 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
     const isH = swiper.isHorizontal();
     const t = rtl ? translate : -translate;
     if (speed === 0) {
-      const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
       if (isVirtual) {
         swiper.wrapperEl.style.scrollSnapType = 'none';
         swiper._immediateVirtual = true;
@@ -6231,7 +6235,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.1.10
+ * Swiper React 11.1.11
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -6239,7 +6243,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: August 21, 2024
+ * Released on: August 28, 2024
  */
 
 
@@ -6694,7 +6698,7 @@ const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen,
             [styles$A['is-open']]: isOpen,
         }), children: [jsx("div", { className: styles$A.panel, children: jsx("div", { className: clsx(styles$A.content, {
                         [styles$A['has-transparency']]: hasTransparency,
-                    }), children: children }) }), jsxs(LinkButton, { className: styles$A.button, onPress: () => onToggle(!isOpen), children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$A.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
+                    }), children: children }) }), jsxs(RouteLink, { className: styles$A.button, color: "secondary", onPress: () => onToggle(!isOpen), children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$A.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
 };
 
 var styles$z = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
@@ -6961,7 +6965,7 @@ function Categories({ categories, path: _path, }) {
         .map(category => {
         const path = _path + '/' + category.label;
         const isActive = !category.data || !category.data.some(c => c.isRefined);
-        return (jsxs(Fragment, { children: [jsx(RouteLink, { className: clsx(styles$n.category, {
+        return (jsxs(Fragment, { children: [jsx(RouteLink, { hasUnderline: true, className: clsx(styles$n.category, {
                         [styles$n['is-active']]: isActive,
                     }), href: path, isDisabled: isActive, children: category.label }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
     });
@@ -6976,7 +6980,7 @@ var styles$m = {"active-filter-item":"active-filters-module-Rrmhy","category":"a
 const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
     if (selectedFilterCategories.length === 0)
         return null;
-    return (jsx(FilterSection, { button: jsx(LinkButton, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: "Chosen filters", variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$m.category, children: category.filters.map(filter => (jsxs("div", { className: styles$m['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [category.label, ": "] }), jsx("span", { className: styles$m['active-filter-value'], children: filter.label })] }), jsx(IconButton, { color: "secondary", onPress: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`))) }, `${category.label}-${index}`))) }));
+    return (jsx(FilterSection, { button: jsx(RouteLink, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: "Chosen filters", variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$m.category, children: category.filters.map(filter => (jsxs("div", { className: styles$m['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [category.label, ": "] }), jsx("span", { className: styles$m['active-filter-value'], children: filter.label })] }), jsx(IconButton, { color: "secondary", onPress: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`))) }, `${category.label}-${index}`))) }));
 };
 
 function AlgoliaActiveFilters() {
@@ -7017,9 +7021,9 @@ function AlgoliaCategoriesFilters() {
     const t = useFormattedMessage();
     if (categories.length <= 0)
         return null;
-    return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs("button", { className: clsx(styles$n.category, {
+    return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs(Link, { className: clsx(styles$n.category, {
                 [styles$n['is-active']]: isRefined,
-            }), onClick: () => refine(value), type: "button", children: [jsx("span", { children: value }), " ", jsxs("span", { className: styles$n.count, children: ["(", count, ")"] })] }, value))) }));
+            }), isDisabled: isRefined, onClick: () => refine(value), children: [jsx("span", { children: value }), " ", jsxs("span", { className: styles$n.count, children: ["(", count, ")"] })] }, value))) }));
 }
 
 function AlgoliaMultiSelectFilterSection({ attribute, }) {
@@ -7246,7 +7250,7 @@ function Dialog({ allowClose = true, children, className, footer = Footer, hideT
 function SignInDialog({ isOpen, onOpenChange }) {
     const t = useFormattedMessage();
     const { signInUrl } = useFavorite();
-    return (jsxs(Dialog, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, title: t('Please Sign In'), children: [t('You must '), jsx(LinkButton, { href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onPress: () => onOpenChange(false), type: "link", children: t('sign in') }), t(' to your account to manage your lists.')] }));
+    return (jsxs(Dialog, { isDismissable: true, isOpen: isOpen, onOpenChange: onOpenChange, title: t('Please Sign In'), children: [t('You must '), jsx(RouteLink, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onPress: () => onOpenChange(false), children: t('sign in') }), t(' to your account to manage your lists.')] }));
 }
 
 function useAddWishListItemToCurrentWishList() {
@@ -7304,6 +7308,8 @@ function ConnectedFavoriteButton({ productId }) {
             addWishListItemToCurrentWishList({ productId });
         }
     }
+    if (isFetching)
+        return null;
     return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onPress: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));
 }
 
@@ -7407,7 +7413,7 @@ const getAlgoliaIndex = (environment, languageCode) => {
     };
 };
 
-function createQueryStringRouting({ algoliaIndex, categoryPages, }) {
+function createQueryStringRouting({ algoliaIndex, hierarchicalCategories, }) {
     return {
         router: history({
             cleanUrlOnDispose: true,
@@ -7433,7 +7439,7 @@ function createQueryStringRouting({ algoliaIndex, categoryPages, }) {
                 else {
                     delete queryString.page;
                 }
-                if (!categoryPages &&
+                if (!hierarchicalCategories &&
                     state.hierarchicalMenu?.['hierarchicalCategories.lvl0']) {
                     queryString.category =
                         state.hierarchicalMenu['hierarchicalCategories.lvl0'].join('+');
@@ -7454,9 +7460,9 @@ function createQueryStringRouting({ algoliaIndex, categoryPages, }) {
                     refinementList[filter] = [].concat(queryString.filters?.[filter]);
                     return refinementList;
                 }, {});
-                const hierarchicalMenu = categoryPages
+                const hierarchicalMenu = hierarchicalCategories
                     ? {
-                        'hierarchicalCategories.lvl0': categoryPages.split('+'),
+                        'hierarchicalCategories.lvl0': hierarchicalCategories,
                     }
                     : queryString.category
                         ? typeof queryString.category === 'string'
@@ -7487,7 +7493,7 @@ function createQueryStringRouting({ algoliaIndex, categoryPages, }) {
         }),
         stateMapping: {
             routeToState(routeState) {
-                return simple().routeToState(!categoryPages
+                return simple().routeToState(!hierarchicalCategories
                     ? routeState
                     : Object.keys(routeState).reduce((newRouteState, indexName) => {
                         if (!routeState[indexName])
@@ -7497,7 +7503,7 @@ function createQueryStringRouting({ algoliaIndex, categoryPages, }) {
                             [indexName]: {
                                 ...routeState[indexName],
                                 hierarchicalMenu: {
-                                    'hierarchicalCategories.lvl0': categoryPages.split(' > '),
+                                    'hierarchicalCategories.lvl0': hierarchicalCategories,
                                 },
                             },
                         };
@@ -7515,13 +7521,17 @@ function AlgoliaInsightInstantSearchProvider({ children, }) {
             queryId: results.queryID,
         }, children: children }));
 }
-function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online = true, query, routing, searchClient, }) {
+function AlgoliaProvider({ categoryPages, children, hierarchicalCategories, languageCode, offlineSearchClient, online: _online = true, query, routing, searchClient, }) {
     const [online] = useGlobalState('algolia', _online);
     const algoliaIndex = getAlgoliaIndex(environment, languageCode);
     return (jsxs(InstantSearch, { future: {
             persistHierarchicalRootCount: true,
             preserveSharedStateOnUnmount: true,
-        }, indexName: algoliaIndex.default, insights: true, routing: routing || createQueryStringRouting({ algoliaIndex, categoryPages }), searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: true, filters: categoryPages ? `categoryPages: "${categoryPages}"` : undefined, maxValuesPerFacet: 100, query: query, ruleContexts: ['storefront'] }), jsx(AlgoliaInsightInstantSearchProvider, { children: children })] }));
+        }, indexName: algoliaIndex.default, insights: true, routing: routing ||
+            createQueryStringRouting({ algoliaIndex, hierarchicalCategories }), 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(AlgoliaInsightInstantSearchProvider, { children: children })] }, algoliaIndex.default));
 }
 function useAlgolia() {
     const [online, setOnline] = useGlobalState('algolia', false);
@@ -7676,7 +7686,7 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
         createSonicSearchClient({
             apiKey: config.ALGOLIA_API_KEY,
             appId: config.ALGOLIA_APP_ID,
-            host: config.ALGOLIA_PROXY_HOST,
+            host: config.ALGOLIA_HOST,
         }), [_searchClient]);
     if (isError) {
         if (!isRequestError(error))
@@ -7688,7 +7698,7 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
         return jsx(LoadingOverlay, {});
     }
     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, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$e['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { promoCards: data.promoCards?.top }) }) }) }));
+    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$e['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { promoCards: data.promoCards?.top }) }) }) }));
 }
 function ProductListingPageContent({ promoCards, }) {
     return (jsxs(Fragment, { children: [promoCards?.length && (jsx("section", { className: styles$e.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$e.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$e['action-bar'], children: [jsx("div", { className: styles$e['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$e.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$e.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$e['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$e['product-grid'], children: [jsx(ProductOverview, {}), jsx("div", { className: styles$e.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
@@ -7979,7 +7989,7 @@ function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
         createSonicSearchClient({
             apiKey: config.ALGOLIA_API_KEY,
             appId: config.ALGOLIA_APP_ID,
-            host: config.ALGOLIA_PROXY_HOST,
+            host: config.ALGOLIA_HOST,
         }), [_searchClient]);
     const languageCode = useLanguageCode();
     const index = getAlgoliaIndex(environment, languageCode);
@@ -8133,7 +8143,7 @@ function StrokeSearchIcon(props) {
 
 var styles$9 = {"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, }) {
+function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, placeholder, }) {
     const formProps = autocomplete?.getFormProps({
         inputElement: inputRef.current,
     });
@@ -8141,16 +8151,26 @@ function SearchInput({ autocomplete, formRef, inputRef, onCancel, }) {
         inputElement: inputRef.current,
     });
     const labelProps = autocomplete?.getLabelProps({});
-    return (jsx("form", { ref: formRef, className: styles$9.form, ...formProps, children: jsxs("div", { className: styles$9['input-container'], children: [jsx("label", { className: styles$9.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$9['icon-search'], styles$9.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
+    function handleSubmit(e) {
+        if (!inputProps?.value)
+            return;
+        formProps?.onSubmit(e);
+        onSubmit?.();
+    }
+    return (jsx("form", { ref: formRef, className: styles$9.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles$9['input-container'], children: [jsx("label", { className: styles$9.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$9['icon-search'], styles$9.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
                         if (e.key === 'Escape')
                             onCancel?.();
-                    }, ...inputProps, className: styles$9.input }), inputProps?.value && (jsx(IconButton, { className: styles$9['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
+                    }, ...inputProps, className: styles$9.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles$9['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
 }
 
 function ConnectedSearchInput() {
     const { autocomplete, formRef, inputRef } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close }));
+    const t = useFormattedMessage();
+    const navigate = useNavigate();
+    return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close, onSubmit: () => {
+            navigate(`/search?keyword=${inputRef.current?.value}`);
+        }, placeholder: t('Search tools, toolsets, boxes and more') }));
 }
 
 var styles$8 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
@@ -8172,7 +8192,7 @@ function SearchSection({ button, children, className, title, }) {
 var styles$6 = {"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 (jsxs("div", { className: styles$6['section-container'], children: [jsxs("div", { className: styles$6['content'], children: [jsx("div", { className: styles$6['left'], children: leftContent }), jsx("div", { className: styles$6['right'], children: rightContent })] }), jsx("div", { className: styles$6['button-container'], children: buttons })] }));
+    return (jsx("div", { className: styles$6['section-container'], children: jsxs("div", { className: styles$6['content'], children: [jsx("div", { className: styles$6['left'], children: leftContent }), jsxs("div", { className: styles$6['right'], children: [rightContent, jsx("div", { className: styles$6['button-container'], children: buttons })] })] }) }));
 }
 
 function NoResults() {
@@ -8239,7 +8259,7 @@ function RecentSearchesSection() {
         return null;
     }
     const { items, source } = collection;
-    return (jsx(SearchSection, { button: jsx(LinkButton, { color: "secondary", hasUnderline: true, onPress: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
+    return (jsx(SearchSection, { button: jsx(RouteLink, { hasUnderline: true, onPress: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                     item,
                     source: source,
                 }), icon: jsx(StrokeSearchIcon, {}), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
@@ -8267,7 +8287,7 @@ function StrokeRecentIcon(props) {
 function WithResults() {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$6['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onPress: 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$6['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onPress: 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();
@@ -8339,16 +8359,6 @@ var styles = {"search-container":"search-root-module-g9MP0","input":"search-root
 function SearchRoot() {
     const { autocomplete, inputRef } = useAlgoliaSearch();
     const { isOpen } = useGlobalSearchDisclosure();
-    useEffect(() => {
-        if (inputRef.current === null)
-            return;
-        if (isOpen) {
-            inputRef.current.focus();
-        }
-        else {
-            inputRef.current.blur();
-        }
-    }, [inputRef, isOpen]);
     return (jsx(Fragment, { children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles['search-container'], styles[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
 }
 
@@ -8378,4 +8388,4 @@ function ReactQueryContainer({ children }) {
     return (jsx(QueryClientProvider, { client: queryClient, children: children }));
 }
 
-export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightInstantSearchProvider, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, FormattedMessage, GlobalSearch, GlobalSearchContainer, GlobalSearchDisclosureContext, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, IntlProvider, LinkButton, LoadingOverlay, MultiSelect, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RouteButton, RouteLink, RouteProvider, SearchResultsPage, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, VariantDisplayTypeValues, config, configPerEnvironment, createSonicSearchClient, transformAlgoliaProductHitToProductHit, useAddProductToCurrentCart, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useDebouncedCallback, useDeleteCartLineById, useDisclosure, useFavorite, useFavoriteProduct, useFetchCurrentCartLines, useFetchProductListingPageData, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useNavigate, useScrollLock, useUpdateCartLineById, userToken, userTokenEventEmitter };
+export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightInstantSearchProvider, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, FavoriteButton, FavoriteProvider, FilterSection, FormattedMessage, GlobalSearch, GlobalSearchContainer, GlobalSearchDisclosureContext, GlobalStateProvider, GlobalStateProviderContext, IconButton, Image, IntlProvider, Link, LoadingOverlay, MultiSelect, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, ProgressCircle, ReactQueryContainer, RouteButton, RouteLink, RouteProvider, SearchResultsPage, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextField, VariantDisplayTypeValues, config, configPerEnvironment, createSonicSearchClient, transformAlgoliaProductHitToProductHit, useAddProductToCurrentCart, useAlgolia, useAlgoliaInsights, useAlgoliaSearch, useBreakpoint, useCartEvents, useDebouncedCallback, useDeleteCartLineById, useDisclosure, useFavorite, useFavoriteProduct, useFetchCurrentCartLines, useFetchProductListingPageData, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useNavigate, useScrollLock, useUpdateCartLineById, userToken, userTokenEventEmitter };

package/dist/src/algolia/algolia-provider.d.ts

@@ -5,6 +5,7 @@ import { UiState } from 'instantsearch.js/es/types';
 interface AlgoliaProviderProps {
     categoryPages?: string;
     children: ReactNode;
+    hierarchicalCategories?: string[];
     languageCode: string;
     offlineSearchClient?: SearchClient;
     online?: boolean;
@@ -15,7 +16,7 @@ interface AlgoliaProviderProps {
 export declare function AlgoliaInsightInstantSearchProvider({ children, }: {
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online, query, routing, searchClient, }: AlgoliaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlgoliaProvider({ categoryPages, children, hierarchicalCategories, languageCode, offlineSearchClient, online: _online, query, routing, searchClient, }: AlgoliaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useAlgolia(): {
     online: boolean;
     setOnline: import("shared/providers/global-state-provider").UpdateGlobalState<boolean>;

package/dist/src/algolia/algolia-query-string-routing.d.ts

@@ -1,7 +1,7 @@
 import { RouterProps } from 'instantsearch.js/es/middlewares/createRouterMiddleware';
 import { UiState } from 'instantsearch.js/es/types';
 import { Indexes } from './algolia-index-config';
-export declare function createQueryStringRouting({ algoliaIndex, categoryPages, }: {
+export declare function createQueryStringRouting({ algoliaIndex, hierarchicalCategories, }: {
     algoliaIndex: Indexes;
-    categoryPages?: string;
+    hierarchicalCategories: string[] | undefined;
 }): RouterProps<UiState, UiState>;

package/dist/src/breadcrumbs/breadcrumb.d.ts

@@ -1,8 +1,8 @@
-export interface Link {
+export interface BreadcrumbLink {
     href: string;
     label: string;
 }
 export interface BreadcrumbProps {
-    links: Link[];
+    links: BreadcrumbLink[];
 }
 export declare function Breadcrumb({ links }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;