@sonic-equipment/ui 0.0.71 → 0.0.72

package/dist/index.js

@@ -388,65 +388,6 @@ function useFeatureFlags() {
     return { pdpV2, plpV2, searchV2 };
 }
 
-var TIME;
-(function (TIME) {
-    TIME[TIME["SECOND"] = 1000] = "SECOND";
-    TIME[TIME["MINUTE"] = 60000] = "MINUTE";
-    TIME[TIME["HOUR"] = 3600000] = "HOUR";
-    TIME[TIME["DAY"] = 86400000] = "DAY";
-})(TIME || (TIME = {}));
-
-function useFetchProductListingPageData({ languageCode, pageUrl, }) {
-    return useQuery({
-        gcTime: 1 * TIME.DAY,
-        queryFn: async () => {
-            return request({
-                headers: { 'Current-Language-Id': languageCode },
-                url: `${config.BFF_API_URL}/plp/?pageUrl=${pageUrl}`,
-            });
-        },
-        queryKey: ['product-listing-page-data', pageUrl, languageCode],
-        select: ({ body }) => {
-            return {
-                breadCrumb: body.breadCrumb.map(breadCrumb => ({
-                    href: breadCrumb.url,
-                    label: breadCrumb.text,
-                })),
-                category: body.categories
-                    ? {
-                        href: body.categories.path,
-                        image: {
-                            1: body.categories.smallImagePath,
-                            2: body.categories.smallImagePath,
-                            3: body.categories.smallImagePath,
-                            altText: body.categories.imageAltText,
-                        },
-                        title: body.categories.shortDescription,
-                    }
-                    : undefined,
-                categoryPages: body.categoryPages,
-                hierarchicalCategories: body.hierarchicalCategories,
-                promoCards: body.promoCards
-                    ? {
-                        top: body.promoCards.top || undefined,
-                    }
-                    : undefined,
-                subcategories: body.categories?.subCategories?.map(subcategory => ({
-                    href: subcategory.path,
-                    image: {
-                        1: subcategory.smallImagePath,
-                        2: subcategory.smallImagePath,
-                        3: subcategory.smallImagePath,
-                        altText: subcategory.imageAltText,
-                    },
-                    title: subcategory.shortDescription,
-                })),
-            };
-        },
-        staleTime: 1 * TIME.DAY,
-    });
-}
-
 var CurrencyPositioningType;
 (function (CurrencyPositioningType) {
     CurrencyPositioningType["Left"] = "Left";
@@ -657,8 +598,9 @@ async function getWishListItemsByWishListId({ wishListId, }) {
     return body;
 }
 
-function useSession() {
+function useSession({ enabled = true } = {}) {
     return useQuery({
+        enabled,
         queryFn: async () => {
             return await getSession();
         },
@@ -785,6 +727,14 @@ function useUpdateCartLineById() {
     });
 }
 
+var TIME;
+(function (TIME) {
+    TIME[TIME["SECOND"] = 1000] = "SECOND";
+    TIME[TIME["MINUTE"] = 60000] = "MINUTE";
+    TIME[TIME["HOUR"] = 3600000] = "HOUR";
+    TIME[TIME["DAY"] = 86400000] = "DAY";
+})(TIME || (TIME = {}));
+
 function useFetchTranslations(languagCode) {
     return useQuery({
         gcTime: 1 * TIME.DAY,
@@ -1189,7 +1139,7 @@ function useNavigate() {
     };
 }
 
-var styles$R = {"link":"link-module-xLqBn","primary":"link-module-bGD6u","secondary":"link-module-v31wH","has-underline":"link-module-UuCEp"};
+var styles$T = {"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) {
@@ -1198,7 +1148,7 @@ function Link({ children, className, color = 'primary', hasUnderline, onClick: _
             return;
         e.preventDefault();
     }
-    return (jsx(Link$1, { className: clsx({ [styles$R['has-underline']]: hasUnderline }, styles$R['link'], styles$R[color], className), 
+    return (jsx(Link$1, { className: clsx({ [styles$T['has-underline']]: hasUnderline }, styles$T['link'], styles$T[color], className), 
         // Workaround for adobe/react-spectrum #963
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -1214,6 +1164,9 @@ function RouteLink({ children, onClick: _onClick, ...props }) {
         e.preventDefault();
         if (props.isDisabled)
             return;
+        if (e.ctrlKey || e.metaKey || e.shiftKey) {
+            return window.open(props.href, '_blank');
+        }
         navigate(props.href, props.route);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1249,9 +1202,10 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
         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 }) {
+function RouteButton({ children, onClick, ...props }) {
     const navigate = useNavigate();
     return (jsx(Button, { onClick: e => {
+            onClick?.(e);
             if (!props.href)
                 return;
             e.preventDefault();
@@ -1293,22 +1247,24 @@ 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$S = {"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 }))] }) }) }));
+    const isHomeLink = previousLink === undefined || previousLink === homeLink;
+    const href = previousLink?.href || homeLink?.href;
+    return (jsx(Breadcrumbs, { className: styles$S.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$S.breadcrumb, children: jsxs(RouteLink, { className: styles$S.link, href: href, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$S.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles$S.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, color: "secondary", 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$S.breadcrumb, children: jsxs(RouteLink, { className: styles$S.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$S['previous-icon'], styles$S.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$S.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$S.breadcrumb, children: jsx(RouteLink, { className: styles$S.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$S['home-icon'], styles$S.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
 }
 function Breadcrumb({ links }) {
     const { lg } = useBreakpoint();
@@ -1317,10 +1273,10 @@ function Breadcrumb({ links }) {
     return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
 }
 
-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$R = {"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$R['icon-button'], styles$R[size], styles$R[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 }));
@@ -1334,21 +1290,21 @@ 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$Q = {"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$Q['favorite-button'], {
+            [styles$Q['is-favorite']]: isFavorite,
         }), color: "secondary", isDisabled: isDisabled, onPress: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
 }
 
-var styles$N = {"field-error":"field-error-module-FXnIg"};
+var styles$P = {"field-error":"field-error-module-FXnIg"};
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles$N['field-error'], children: children }));
+    return (jsx(FieldError$1, { className: styles$P['field-error'], children: children }));
 }
 
-var styles$M = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
+var styles$O = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
 
 /**
  * This component is used to create an input that grows as the user types.
@@ -1364,20 +1320,20 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
         ? onChange?.(event)
         : setUncontrolledValue(event.target.value);
     const { pressProps } = usePress({});
-    return (jsx("div", { className: clsx(styles$M['input-container'], styles$M[size], styles$M[_pseudo]), children: jsxs("div", { className: clsx({ [styles$M['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
+    return (jsx("div", { className: clsx(styles$O['input-container'], styles$O[size], styles$O[_pseudo]), children: jsxs("div", { className: clsx({ [styles$O['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
                         e.preventDefault();
                         e.stopPropagation();
                         e.target.focus();
-                    } }), autoGrow && jsx("span", { className: styles$M['shadow-input'], children: value })] }) }));
+                    } }), autoGrow && jsx("span", { className: styles$O['shadow-input'], children: value })] }) }));
 });
 Input.displayName = 'Input';
 
-var styles$L = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+var styles$N = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
 
 function Label({ children, isRequired }) {
     if (!children)
         return null;
-    return (jsxs(Label$1, { className: styles$L.label, children: [children, isRequired && jsx("span", { className: styles$L.required, children: "*" })] }));
+    return (jsxs(Label$1, { className: styles$N.label, children: [children, isRequired && jsx("span", { className: styles$N.required, children: "*" })] }));
 }
 
 function StrokeCollapseIcon(props) {
@@ -1392,7 +1348,7 @@ function StrokeTrashIcon(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.77273912,6.04398453 L9.07201126,6.04398453 L9.07201126,4.11757519 C9.07201126,3.84748949 9.15880324,3.63104347 9.33238719,3.46823712 C9.50597114,3.30543077 9.73570292,3.22402759 10.0215825,3.22402759 L13.3263825,3.22402759 C13.6186194,3.22402759 13.850313,3.30543077 14.0214633,3.46823712 C14.1926136,3.63104347 14.2781888,3.84748949 14.2781888,4.11757519 L14.2781888,6.04398453 L15.5846129,6.04398453 L15.5846129,4.04352264 C15.5846129,3.40769382 15.3900697,2.90814951 15.0009834,2.5448897 C14.6118971,2.1816299 14.0799703,2 13.405203,2 L9.942762,2 C9.26869007,2 8.73850162,2.1816299 8.35219662,2.5448897 C7.96589162,2.90814951 7.77273912,3.40769382 7.77273912,4.04352264 L7.77273912,6.04398453 Z M3.60955531,6.6940676 L19.7561406,6.6940676 C19.9248076,6.6940676 20.0683931,6.6332263 20.186897,6.51154371 C20.305401,6.38986111 20.3646529,6.242352 20.3646529,6.06901638 C20.3646529,5.9003494 20.3052023,5.75537328 20.186301,5.63408801 C20.0673997,5.51280275 19.9240129,5.45216011 19.7561406,5.45216011 L3.60955531,5.45216011 C3.44734496,5.45216011 3.30519982,5.51300141 3.18311989,5.63468401 C3.06103996,5.75636661 3,5.90114406 3,6.06901638 C3,6.24314666 3.06103996,6.39085444 3.18311989,6.5121397 C3.30519982,6.63342497 3.44734496,6.6940676 3.60955531,6.6940676 Z M7.56920636,22 L15.8049825,22 C16.4210441,22 16.9252074,21.8108208 17.3174724,21.4324624 C17.7097373,21.0541041 17.9209684,20.5545101 17.9511655,19.9336805 L18.6066126,6.5283806 L17.2870766,6.5283806 L16.6578534,19.8059883 C16.6444435,20.0808419 16.5455825,20.3084381 16.3612707,20.4887766 C16.1769588,20.6691152 15.9469787,20.7592845 15.6713303,20.7592845 L7.68497866,20.7592845 C7.41479362,20.7592845 7.18757,20.6677246 7.00330778,20.4846047 C6.81904556,20.3014848 6.72015983,20.0752793 6.70665057,19.8059883 L6.05358753,6.5295726 L4.76996029,6.5295726 L5.41587138,19.9420245 C5.4468632,20.562854 5.65806942,21.0610573 6.04949005,21.4366344 C6.44091068,21.8122115 6.94748278,22 7.56920636,22 Z M9.00213069,19.1375783 C9.15957307,19.1375783 9.2862223,19.0920591 9.38207839,19.0010206 C9.47793448,18.9099822 9.5230812,18.7917017 9.51751857,18.6461793 L9.2314403,8.86811345 C9.22587767,8.72338566 9.17618647,8.60729053 9.0823667,8.51982806 C8.98854694,8.43236558 8.86649184,8.38863435 8.71620142,8.38863435 C8.55945437,8.38863435 8.43436962,8.43395491 8.34094719,8.52459603 C8.24752475,8.61523714 8.20081354,8.73371626 8.20081354,8.88003338 L8.48555081,18.6485633 C8.49121278,18.7988537 8.54055631,18.9179288 8.63358142,19.0057886 C8.72660652,19.0936484 8.84945628,19.1375783 9.00213069,19.1375783 Z M11.6876904,19.1375783 C11.8451328,19.1375783 11.9717821,19.0922578 12.0676381,19.0016166 C12.1634942,18.9109755 12.2114223,18.7924964 12.2114223,18.6461793 L12.2114223,8.88003338 C12.2114223,8.73451092 12.1634942,8.61623047 12.0676381,8.52519202 C11.9717821,8.43415357 11.8451328,8.38863435 11.6876904,8.38863435 C11.5310427,8.38863435 11.4032015,8.43415357 11.3041668,8.52519202 C11.205132,8.61623047 11.1556147,8.73451092 11.1556147,8.88003338 L11.1556147,18.6461793 C11.1556147,18.7924964 11.205132,18.9109755 11.3041668,19.0016166 C11.4032015,19.0922578 11.5310427,19.1375783 11.6876904,19.1375783 Z M14.3635653,19.1387703 C14.516339,19.1387703 14.6392384,19.0948404 14.7322635,19.0069806 C14.8252886,18.9191208 14.8745825,18.802827 14.8801451,18.6580992 L15.1662234,8.88122537 C15.1662234,8.73490825 15.1194873,8.6166278 15.0260152,8.52638402 C14.9325431,8.43614023 14.8070859,8.39101833 14.6496435,8.39101833 C14.4993531,8.39101833 14.3772732,8.4345509 14.2834037,8.52161604 C14.1895343,8.60868118 14.1398183,8.7277563 14.1342556,8.87884138 L13.8483264,18.6485633 C13.8483264,18.7932911 13.8948389,18.9111742 13.987864,19.0022126 C14.0808891,19.0932511 14.2061229,19.1387703 14.3635653,19.1387703 Z" }) }));
 }
 
-var styles$K = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
+var styles$M = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
 
 /**
  * This component is used to create a number field.
@@ -1400,7 +1356,7 @@ var styles$K = {"field":"number-field-module-gmnog","button-input-container":"nu
  */
 function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
     const inputRef = useRef(null);
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$K.field, styles$K[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$K['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$M.field, styles$M[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$M['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
                         onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
@@ -1413,7 +1369,7 @@ function SolidCartIcon(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.89619008,16.6656848 C9.33405626,16.6656848 10.4996925,17.831321 10.4996925,19.2690253 C10.4996925,20.7068915 9.33405626,21.8725278 7.89619008,21.8725278 C6.45832389,21.8725278 5.29268766,20.7068915 5.29268766,19.2690253 C5.29268766,17.831321 6.45832389,16.6656848 7.89619008,16.6656848 Z M16.8207199,16.6656848 C18.2585861,16.6656848 19.4242223,17.831321 19.4242223,19.2690253 C19.4242223,20.7068915 18.2585861,21.8725278 16.8207199,21.8725278 C15.3828537,21.8725278 14.2172175,20.7068915 14.2172175,19.2690253 C14.2172175,17.831321 15.3828537,16.6656848 16.8207199,16.6656848 Z M7.89619008,18.0995047 C7.25122196,18.0995047 6.72650762,18.6242191 6.72650762,19.2690253 C6.72650762,19.9139935 7.25122196,20.4387078 7.89619008,20.4387078 C8.54115819,20.4387078 9.06587253,19.9139935 9.06587253,19.2690253 C9.06587253,18.6242191 8.54115819,18.0995047 7.89619008,18.0995047 Z M16.8207199,18.0995047 C16.1757518,18.0995047 15.6510375,18.6242191 15.6510375,19.2690253 C15.6510375,19.9139935 16.1757518,20.4387078 16.8207199,20.4387078 C17.465688,20.4387078 17.9904024,19.9139935 17.9904024,19.2690253 C17.9904024,18.6242191 17.465688,18.0995047 16.8207199,18.0995047 Z M4.58909785,3 C4.6054446,3 4.6206584,3.00372253 4.63668145,3.00485547 C4.65869291,3.00631211 4.68038067,3.0079306 4.70174473,3.01132943 C4.72958275,3.0158612 4.75628783,3.02233516 4.78299291,3.02994206 C4.8001489,3.03479753 4.81698119,3.03949115 4.83365164,3.04564141 C4.8622989,3.05616159 4.88948953,3.06862396 4.91619461,3.08254297 L4.956495,3.10439258 C4.98287638,3.12025378 5.00763927,3.13789532 5.03175477,3.15699349 L5.06736154,3.18645 C5.08921115,3.20603373 5.10911857,3.22707409 5.1283786,3.2492474 C5.13986987,3.26251902 5.1511993,3.27562878 5.16171948,3.28970964 C5.17806623,3.31155925 5.19230894,3.33421811 5.2060661,3.35768621 C5.21626258,3.37500405 5.22597352,3.39216004 5.23455152,3.41028712 C5.24555725,3.43326967 5.25462079,3.45706147 5.26319878,3.48150066 C5.27032014,3.50205548 5.27711779,3.52244845 5.28245881,3.54381251 C5.28860907,3.56825171 5.29249345,3.59317645 5.29605412,3.61858673 C5.29799631,3.63299129 5.30252808,3.64642476 5.30382287,3.66115301 L5.510504,6.30738355 L21.2869744,6.30772748 C21.3139222,6.30835464 21.3370666,6.31256272 21.3603729,6.3151523 C21.3861069,6.31790373 21.4120027,6.31936037 21.4369275,6.32486324 C21.4591008,6.32923316 21.4726961,6.33603082 21.4875862,6.34056259 C21.5163953,6.34914058 21.5452044,6.35723303 21.5722332,6.36920985 C21.5918169,6.37778785 21.6092966,6.38911728 21.6275855,6.39931376 C21.6497588,6.41145243 21.6722559,6.42278186 21.6928107,6.43718642 C21.711747,6.45029618 21.7280937,6.46583368 21.7455734,6.48072379 C21.763215,6.49577574 21.7815039,6.51001845 21.7976888,6.52668889 C21.8132263,6.54287379 21.8261742,6.56067718 21.8400932,6.57815686 C21.8551452,6.59676949 21.8706827,6.61473473 21.8836306,6.634804 C21.8954456,6.65293108 21.9043473,6.67251481 21.9145437,6.69161299 C21.9258732,6.71330075 21.9381737,6.73434111 21.9473991,6.75716182 C21.9559771,6.77868773 21.9614799,6.80134658 21.9679539,6.82368174 C21.9744279,6.8456932 21.9820348,6.86705726 21.9864047,6.89003981 C21.9915839,6.91658304 21.9925549,6.94393552 21.994659,6.97128799 C21.9959538,6.98909138 22,7.00608552 22,7.0242126 C21.9988671,7.05496391 21.994659,7.07794646 21.9922312,7.10109086 C21.9894798,7.1269867 21.9880232,7.15320623 21.9825203,7.17813097 L20.5915903,13.2322533 L20.587706,13.2487619 C20.5797754,13.2835594 20.5681222,13.3164147 20.555498,13.3486227 C20.5524229,13.3567151 20.5499951,13.3651313 20.5465963,13.3730619 C20.5299259,13.4117438 20.5096948,13.4483216 20.4870359,13.4827955 C20.4797527,13.4938012 20.4710129,13.5031884 20.4632441,13.5137086 C20.445117,13.5381478 20.4265044,13.5619396 20.4056259,13.5836274 C20.3944583,13.5952805 20.3823196,13.605477 20.3705046,13.6163208 C20.3505972,13.6344479 20.3302043,13.6517658 20.3083546,13.6674651 C20.2941119,13.6778235 20.2795455,13.6872107 20.2646554,13.6964361 C20.2424821,13.7101932 20.2198233,13.7223319 20.1963552,13.7334995 L20.148286,13.7550254 C20.1214191,13.7655456 20.0935811,13.7734762 20.0654194,13.7807594 C20.0513385,13.7843201 20.037905,13.7888518 20.0235005,13.7916033 C19.9798012,13.8000194 19.9351309,13.8053604 19.8898132,13.8053604 L6.09623539,13.8051986 L6.20774933,15.2317353 L19.411064,15.2317353 C19.8069466,15.2317353 20.1278931,15.5528437 20.1278931,15.9487262 C20.1278931,16.3446088 19.8069466,16.6657172 19.411064,16.6657172 L5.54384488,16.6657172 C5.49593759,16.6657172 5.44932509,16.660538 5.40384553,16.6514744 C5.38863173,16.6483993 5.37471272,16.6425728 5.35998446,16.6386884 C5.33052795,16.6307578 5.30090959,16.6231509 5.27290972,16.6116596 C5.25543003,16.6043764 5.23940699,16.5945036 5.22257469,16.5859256 C5.19910659,16.5741106 5.17547665,16.5627812 5.15362704,16.5485385 C5.13711844,16.5376946 5.12255203,16.5249086 5.10701453,16.5127699 C5.08694526,16.4972324 5.06687599,16.4821804 5.04874891,16.4647007 C5.03434435,16.4509436 5.02204383,16.4357298 5.00893406,16.4208397 C4.99226362,16.4019033 4.97575503,16.3834526 4.96118862,16.3628977 C4.94937364,16.3463891 4.93966271,16.3285858 4.92930437,16.3111061 C4.91668015,16.2899039 4.90437963,16.2688635 4.8940213,16.2462046 C4.88511961,16.2267828 4.87832195,16.2065516 4.87103875,16.1861587 C4.86310815,16.163338 4.8553394,16.1406791 4.84967468,16.1168873 C4.84433367,16.0950377 4.84109669,16.0728644 4.83785971,16.0502055 L4.82992911,16.0045641 L3.92600265,4.43381996 L2.7169909,4.43381996 C2.32110834,4.43381996 2,4.11287347 2,3.7169909 C2,3.32094649 2.32110834,3 2.7169909,3 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$J = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
+var styles$L = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
 
 function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
     const [currentState, setState] = useState(initialState);
@@ -1501,7 +1457,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
         e.key === 'Enter' && onConfirm(ensureNumber(updatedQuantity));
         e.key === 'Escape' && onCancel();
     };
-    return (jsxs("div", { className: styles$J['manual-input-container'], children: [jsx("div", { className: styles$J['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
+    return (jsxs("div", { className: styles$L['manual-input-container'], children: [jsx("div", { className: styles$L['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,
@@ -1551,12 +1507,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
     return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
 };
 
-var styles$I = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+var styles$K = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
 
 function Tag({ children }) {
     if (!children)
         return null;
-    return (jsxs("div", { className: styles$I.tag, children: [jsx("div", { className: styles$I.body, children: children }), jsx("svg", { className: styles$I.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
+    return (jsxs("div", { className: styles$K.tag, children: [jsx("div", { className: styles$K.body, children: children }), jsx("svg", { className: styles$K.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
 }
 
 const IntlContext = createContext({
@@ -1592,7 +1548,7 @@ function useFormattedMessage() {
 
 const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
 
-var styles$H = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
+var styles$J = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
 
 const formatPrice = (price) => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 2,
@@ -1605,22 +1561,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
     const priceWithCurrency = formatPrice(price);
     const [wholes, decimals] = priceWithCurrency.split('.');
     const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
-    return (jsxs("div", { className: clsx(className, styles$H['product-price']), children: [jsx("span", { className: clsx(styles$H['original-price'], {
-                    [styles$H['is-hidden']]: !showOriginalPrice,
-                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$H['current-price-wrapper'], children: [jsxs("div", { className: styles$H['current-price'], children: [jsx("span", { className: styles$H.wholes, children: wholes }), jsx("span", { className: styles$H.dot, children: "." }), jsx("span", { className: styles$H.decimals, children: decimals })] }), jsx("span", { className: styles$H.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
+    return (jsxs("div", { className: clsx(className, styles$J['product-price']), children: [jsx("span", { className: clsx(styles$J['original-price'], {
+                    [styles$J['is-hidden']]: !showOriginalPrice,
+                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$J['current-price-wrapper'], children: [jsxs("div", { className: styles$J['current-price'], children: [jsx("span", { className: styles$J.wholes, children: wholes }), jsx("span", { className: styles$J.dot, children: "." }), jsx("span", { className: styles$J.decimals, children: decimals })] }), jsx("span", { className: styles$J.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
 }
 
-var styles$G = {"product-sku":"product-sku-module-ITb8x"};
+var styles$I = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return (jsx("p", { className: styles$G['product-sku'], "data-test-selector": "productNumber", children: sku }));
+    return (jsx("p", { className: styles$I['product-sku'], "data-test-selector": "productNumber", children: sku }));
 }
 
 function isResponsiveImage(image) {
     return Boolean(image.lg);
 }
 
-var styles$F = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
+var styles$H = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
 
 function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
     const [hasError, setHasError] = useState(false);
@@ -1647,22 +1603,22 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
     const srcSet = !hasError
         ? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
         : undefined;
-    return (jsx("img", { alt: image.altText, className: clsx(styles$F.image, className, styles$F[fit], {
-            [styles$F['has-error']]: hasError,
+    return (jsx("img", { alt: image.altText, className: clsx(styles$H.image, className, styles$H[fit], {
+            [styles$H['has-error']]: hasError,
         }), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
 }
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
     if (!isResponsiveImage(image))
         return null;
-    return (jsxs("picture", { className: clsx(styles$F.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$F[fit], {
-                    [styles$F['has-error']]: hasError,
+    return (jsxs("picture", { className: clsx(styles$H.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$H[fit], {
+                    [styles$H['has-error']]: hasError,
                 }), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
 }
 
-var styles$E = {"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"};
+var styles$G = {"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$E['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$E.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$E['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$E.content, children: [jsxs("div", { className: styles$E.top, children: [jsx("div", { className: styles$E.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$E.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$E.bottom, children: [jsx("div", { className: styles$E.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$E['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+    return (jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$G['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$G.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$G['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$G.content, children: [jsxs("div", { className: styles$G.top, children: [jsx("div", { className: styles$G.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$G.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$G.bottom, children: [jsx("div", { className: styles$G.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$G['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
 /**
@@ -4571,7 +4527,7 @@ function onTouchStart(event) {
       data.isTouched = false;
     }
   }
-  if (document.activeElement && document.activeElement.matches(data.focusableElements) && document.activeElement !== targetEl) {
+  if (document.activeElement && document.activeElement.matches(data.focusableElements) && document.activeElement !== targetEl && (e.pointerType === 'mouse' || e.pointerType !== 'mouse' && !targetEl.matches(data.focusableElements))) {
     document.activeElement.blur();
   }
   const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
@@ -4650,6 +4606,9 @@ function onTouchMove(event) {
       return;
     }
   }
+  if (document.activeElement && document.activeElement.matches(data.focusableElements) && document.activeElement !== e.target && e.pointerType !== 'mouse') {
+    document.activeElement.blur();
+  }
   if (document.activeElement) {
     if (e.target === document.activeElement && e.target.matches(data.focusableElements)) {
       data.isMoved = true;
@@ -6585,7 +6544,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.1.12
+ * Swiper React 11.1.14
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -6593,7 +6552,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: September 1, 2024
+ * Released on: September 12, 2024
  */
 
 
@@ -6974,7 +6933,7 @@ function GlyphsArrowBoldCapsLeftIcon(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", transform: "matrix(-1 0 0 1 11 0)" }) }));
 }
 
-var styles$D = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button":"carousel-module-kcqEE","is-locked":"carousel-module-uCrOA","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
+var styles$F = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button":"carousel-module-kcqEE","is-locked":"carousel-module-uCrOA","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
 
 function CarouselNavigationButton({ direction, isDisabled = false, }) {
     const swiper = useSwiper();
@@ -6986,48 +6945,47 @@ function CarouselNavigationButton({ direction, isDisabled = false, }) {
             swiper.slidePrev();
         }
     }
-    return (jsx(Button$1, { className: clsx(styles$D['navigation-button'], {
-            [styles$D['is-locked']]: swiper.isLocked,
+    return (jsx(Button$1, { className: clsx(styles$F['navigation-button'], {
+            [styles$F['is-locked']]: swiper.isLocked,
         }), isDisabled: isDisabled, onPress: handleNavigation, children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
 }
 
-function Carousel({ breakpoints, className, hasNavigation = true, hasOverflow = true, navigationButtonsPosition = 'top', slideClasses, slides, slidesPerView = 'auto', spaceBetween = 8, }) {
+function Carousel({ breakpoints, className, hasNavigation = true, hasOverflow = true, navigationButtonsPosition = 'top', slideClasses, slides, slidesPerView = 'auto', spaceBetween, }) {
     const [isEnd, setIsEnd] = useState(false);
     const [isBeginning, setIsBeginning] = useState(true);
-    const [isLocked, setIsLocked] = useState(false);
+    const [isLocked, setIsLocked] = useState(undefined);
     const [isDragging, setIsDragging] = useState(false);
+    const [isReady, setIsReady] = useState(false);
     function handleSlideChange(swiper) {
         setIsEnd(swiper.isEnd);
         setIsLocked(swiper.isLocked);
-        setIsBeginning(swiper.activeIndex === 0);
+        setIsBeginning(swiper.isBeginning);
     }
-    const showNavigation = hasNavigation && !isLocked;
     if (slides.length === 0)
         return null;
-    return (jsx("div", { className: clsx(styles$D.carousel, className), children: jsxs(Swiper, { breakpoints: breakpoints, className: clsx(styles$D.swiper, {
-                [styles$D['is-dragging']]: isDragging,
-                [styles$D['has-overflow']]: hasOverflow,
+    return (jsx("div", { className: clsx(styles$F.carousel, className), children: jsxs(Swiper, { breakpoints: breakpoints, className: clsx(styles$F.swiper, {
+                [styles$F['is-dragging']]: isDragging,
+                [styles$F['has-overflow']]: hasOverflow,
+                [styles$F['is-ready']]: isReady,
             }), freeMode: {
                 enabled: true,
                 sticky: true,
-            }, modules: [freeMode], onSlideChange: swiper => handleSlideChange(swiper), onSliderMove: () => setIsDragging(true), onSwiper: swiper => setIsLocked(swiper.isLocked), onTouchEnd: () => setIsDragging(false), onUpdate: swiper => handleSlideChange(swiper), slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$D.slide, slideClasses), children: slide }, index))), showNavigation && (jsxs("div", { className: clsx(styles$D['navigation-buttons'], styles$D[navigationButtonsPosition]), children: [jsx("div", { className: clsx(styles$D['navigation-button-wrapper'], styles$D['navigation-button-prev']), children: jsx(CarouselNavigationButton, { direction: "previous", isDisabled: isBeginning }) }), jsx("div", { className: clsx(styles$D['navigation-button-wrapper'], styles$D['navigation-button-next']), children: jsx(CarouselNavigationButton, { direction: "next", isDisabled: isEnd }) })] }))] }) }));
+            }, modules: [freeMode], onReachBeginning: () => setIsBeginning(true), onReachEnd: () => setIsEnd(true), onResize: swiper => setIsLocked(swiper.isLocked), onSlideChange: swiper => handleSlideChange(swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
+                if (!isReady)
+                    setIsReady(true);
+            }, onSwiper: swiper => handleSlideChange(swiper), onTouchEnd: () => setIsDragging(false), onUpdate: swiper => handleSlideChange(swiper), slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$F.slide, slideClasses), children: slide }, index))), hasNavigation && isLocked === false && (jsxs("div", { className: clsx(styles$F['navigation-buttons'], styles$F[navigationButtonsPosition]), children: [jsx("div", { className: clsx(styles$F['navigation-button-wrapper'], styles$F['navigation-button-prev']), children: jsx(CarouselNavigationButton, { direction: "previous", isDisabled: isBeginning }) }), jsx("div", { className: clsx(styles$F['navigation-button-wrapper'], styles$F['navigation-button-next']), children: jsx(CarouselNavigationButton, { direction: "next", isDisabled: isEnd }) })] }))] }) }));
 }
 
+var styles$E = {"slide":"category-carousel-module-muLq-"};
+
 function CategoryCarousel({ categoryCards }) {
-    return (jsx(Carousel, { breakpoints: {
-            1024: {
-                spaceBetween: 12,
-            },
-            1440: {
-                spaceBetween: 16,
-            },
-        }, slides: categoryCards, spaceBetween: 8 }));
+    return jsx(Carousel, { slideClasses: styles$E.slide, slides: categoryCards });
 }
 
-var styles$C = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","border-top":"accordion-module-J1-Eb","border-bottom":"accordion-module-4LI1K","indented":"accordion-module-6CcEH","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
+var styles$D = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","border-top":"accordion-module-J1-Eb","border-bottom":"accordion-module-4LI1K","indented":"accordion-module-6CcEH","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
 
 function Accordion({ borderPosition = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
-    return (jsx("div", { className: clsx({ [styles$C.indented]: indented }, styles$C.accordion, styles$C[color], styles$C[size], styles$C[`border-${borderPosition}`], hasLineSeparator && styles$C['with-seperators']), children: children &&
+    return (jsx("div", { className: clsx({ [styles$D.indented]: indented }, styles$D.accordion, styles$D[color], styles$D[size], styles$D[`border-${borderPosition}`], hasLineSeparator && styles$D['with-seperators']), children: children &&
             Children.map(children, child => {
                 return cloneElement(child, { size });
             }) }));
@@ -7037,7 +6995,7 @@ function GlyphsChevronsSlimDownIcon(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: "M6,9 L1,4.06645029 C1.08169007,3.87890406 1.19817561,3.69487412 1.34945663,3.51436046 C1.50073764,3.3338468 1.68216803,3.16239331 1.89374779,3 L5.98800959,7.08347812 L9.9960307,3 C10.2121071,3.16649238 10.4031847,3.33794587 10.5692635,3.51436046 C10.7353424,3.69077505 10.8789212,3.87480499 11,4.06645029 L6,9 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$B = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI"};
+var styles$C = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI"};
 
 const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen, onToggle, }) => {
     const showAllRef = useRef(null);
@@ -7046,14 +7004,14 @@ const ShowAll = ({ children, hasTransparency = true, initialHeight = 0, isOpen,
             return;
         showAllRef.current.style.setProperty('--initital-height', `${initialHeight}px`);
     }, [initialHeight]);
-    return (jsxs("div", { ref: showAllRef, className: clsx(styles$B['show-all'], {
-            [styles$B['is-open']]: isOpen,
-        }), children: [jsx("div", { className: styles$B.panel, children: jsx("div", { className: clsx(styles$B.content, {
-                        [styles$B['has-transparency']]: hasTransparency,
-                    }), children: children }) }), jsxs(RouteLink, { className: styles$B.button, color: "secondary", onPress: () => onToggle(!isOpen), children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$B.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
+    return (jsxs("div", { ref: showAllRef, className: clsx(styles$C['show-all'], {
+            [styles$C['is-open']]: isOpen,
+        }), children: [jsx("div", { className: styles$C.panel, children: jsx("div", { className: clsx(styles$C.content, {
+                        [styles$C['has-transparency']]: hasTransparency,
+                    }), children: children }) }), jsxs(RouteLink, { className: styles$C.button, color: "secondary", onPress: () => onToggle(!isOpen), children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$C.icon }), isOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] })] }));
 };
 
-var styles$A = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
+var styles$B = {"multi-select":"multi-select-module-DC7Ix","filter-items":"multi-select-module-cwVFb","hidden":"multi-select-module-o7yHU","filter-item":"multi-select-module-OW-NK"};
 
 function MultiSelect({ amountShown = 3, onChange, options, render, }) {
     const shownOptions = options.slice(0, amountShown);
@@ -7064,28 +7022,28 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
         options.filter(option => option.isSelected).length === 0) {
         return null;
     }
-    return (jsxs("div", { className: styles$A['multi-select'], children: [jsx("div", { className: styles$A['filter-items'], children: shownOptions
+    return (jsxs("div", { className: styles$B['multi-select'], children: [jsx("div", { className: styles$B['filter-items'], children: shownOptions
                     .concat(isOpen ? [] : hiddenSelectedOptions)
-                    .map(option => (jsxs("div", { className: styles$A['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$A['filter-items'], styles$A['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$A['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
+                    .map(option => (jsxs("div", { className: styles$B['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$B['filter-items'], styles$B['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$B['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
 }
 
-var styles$z = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
+var styles$A = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
 
 function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles$z.checkbox, styles$z[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$z.box, children: jsx("svg", { "aria-hidden": "true", className: styles$z.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$A.checkbox, styles$A[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$A.box, children: jsx("svg", { "aria-hidden": "true", className: styles$A.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
 }
 
 function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles$z.checkbox, styles$z['color-checkbox'], styles$z[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$A.checkbox, styles$A['color-checkbox'], styles$A[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
             '--selected-color': color,
-        }, value: value, children: [jsx("div", { className: styles$z.box }), children] }));
+        }, value: value, children: [jsx("div", { className: styles$A.box }), children] }));
 }
 
 function StrokeCheckmarkIcon(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.8641425,17 C10.6636971,17 10.4855234,16.9548533 10.3296214,16.8645598 C10.1737194,16.7742664 10.0252413,16.6388262 9.88418708,16.4582393 L6.27839644,12.2189616 C6.09279881,11.9857035 6,11.744921 6,11.496614 C6,11.2332581 6.08723088,11.0094056 6.26169265,10.8250564 C6.43615442,10.6407073 6.65330364,10.5485327 6.91314031,10.5485327 C7.06904232,10.5485327 7.21195249,10.5823928 7.34187082,10.6501129 C7.47178916,10.717833 7.59985152,10.8382242 7.72605791,11.0112867 L10.8195991,14.7200903 L16.2405345,6.53047404 C16.4558278,6.17682468 16.7230883,6 17.0423163,6 C17.2873051,6 17.5081663,6.08088789 17.7048998,6.24266366 C17.9016333,6.40443943 18,6.61700527 18,6.88036117 C18,7.00075245 17.9721604,7.12302483 17.9164811,7.24717833 C17.8608018,7.37133183 17.7958426,7.48984199 17.7216036,7.6027088 L11.7884187,16.4469526 C11.5582777,16.8156509 11.2501856,17 10.8641425,17 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$y = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","solid":"select-module-IRd4F","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
+var styles$z = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","solid":"select-module-IRd4F","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
 
 function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, size = 'md', variant = 'outline', }) {
     const selectRef = useRef(null);
@@ -7102,12 +7060,12 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
         window.addEventListener('resize', updateWidth);
         return () => window.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$y.select, styles$y[size], styles$y[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$y.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$y.chevron })] }), jsx(Popover, { ref: ref => 
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$z.select, styles$z[size], styles$z[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$z.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$z.chevron })] }), jsx(Popover, { ref: ref => 
                 // Workaround for react/react-aria #1513
-                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$y.popover, styles$y[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$y.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$y.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$y.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$y.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
+                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$z.popover, styles$z[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$z.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$z.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$z.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$z.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
 }
 
-var styles$x = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
+var styles$y = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
 
 /**
  * This component is used to create a textarea that can grow as the user types.
@@ -7142,7 +7100,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
         }
         updateHeight();
     }, [ref, autoGrow, updateHeight, size]);
-    return (jsx("div", { className: styles$x['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
+    return (jsx("div", { className: styles$y['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
                 ref.current =
                     node;
                 textAreaRef.current = node;
@@ -7153,7 +7111,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
 });
 TextArea.displayName = 'TextArea';
 
-var styles$w = {"field":"text-field-module-JeaK0"};
+var styles$x = {"field":"text-field-module-JeaK0"};
 
 /**
  * This component is used to create a text field.
@@ -7161,7 +7119,7 @@ var styles$w = {"field":"text-field-module-JeaK0"};
  * This field can also grow when a user types in text.
  */
 function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
-    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$w.field, styles$w[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
+    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$x.field, styles$x[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
             onChange?.(value);
         }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
 }
@@ -7171,31 +7129,31 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
     return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
 }
 
-var styles$v = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
+var styles$w = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
 
 function ProgressCircle({ className }) {
-    return (jsxs("svg", { className: clsx(styles$v['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
+    return (jsxs("svg", { className: clsx(styles$w['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
 }
 
-var styles$u = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
+var styles$v = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
 
 function ProductOverviewGrid({ children, isLoading, }) {
-    return (jsxs("div", { className: styles$u['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$u['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$u['loading-panel'], children: jsx(ProgressCircle, { className: styles$u['progress-circle'] }) }))] }));
+    return (jsxs("div", { className: styles$v['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$v['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$v['loading-panel'], children: jsx(ProgressCircle, { className: styles$v['progress-circle'] }) }))] }));
 }
 
-var styles$t = {"loading-overlay":"loading-overlay-module-L67Gy"};
+var styles$u = {"loading-overlay":"loading-overlay-module-L67Gy"};
 
 function LoadingOverlay() {
-    return (jsx("div", { className: styles$t['loading-overlay'], children: jsx(ProgressCircle, {}) }));
+    return (jsx("div", { className: styles$u['loading-overlay'], children: jsx(ProgressCircle, {}) }));
 }
 
-var styles$s = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
+var styles$t = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
 
 function PageContainer({ children, className, }) {
-    return (jsx("div", { className: styles$s['page-container'], children: jsx("div", { className: clsx(styles$s['inner-page-container'], className), children: children }) }));
+    return (jsx("div", { className: styles$t['page-container'], children: jsx("div", { className: clsx(styles$t['inner-page-container'], className), children: children }) }));
 }
 
-var styles$r = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
+var styles$s = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
 
 const sizeToTag = {
     l: 'h3',
@@ -7208,29 +7166,190 @@ const sizeToTag = {
 };
 function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
     return createElement$1(tag || sizeToTag[size], {
-        className: clsx(className, styles$r.heading, styles$r[size], {
-            [styles$r.uppercase]: uppercase,
-            [styles$r.italic]: italic,
-            [styles$r.bold]: bold,
+        className: clsx(className, styles$s.heading, styles$s[size], {
+            [styles$s.uppercase]: uppercase,
+            [styles$s.italic]: italic,
+            [styles$s.bold]: bold,
         }),
     }, children);
 }
 
-var styles$q = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
+var styles$r = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
 
 function PageTitle({ children }) {
     const { lg, xxl } = useBreakpoint();
-    return (jsx(Heading, { italic: true, uppercase: true, className: styles$q.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
+    return (jsx(Heading, { italic: true, uppercase: true, className: styles$r.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
 }
 function Page({ breadCrumb, children, className, title }) {
-    return (jsxs(PageContainer, { className: clsx(styles$q.page, className), children: [jsx("div", { className: styles$q.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
+    return (jsxs(PageContainer, { className: clsx(styles$r.page, className), children: [jsx("div", { className: styles$r.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
 }
 
-function ProductDetailsPage({ pageUrl }) {
-    return (jsxs(Page, { breadCrumb: [
+function StrokeCloseboxIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
+}
+
+var styles$q = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X"};
+
+function Modal({ children, className, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
+    return (jsx(ModalOverlay, { className: clsx(styles$q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: styles$q.modal, children: children }) }));
+}
+
+var styles$p = {"header":"dialog-module-ZnsAe","heading":"dialog-module-SwpuZ","close":"dialog-module-Y7Tqg","content":"dialog-module-Koqia","footer":"dialog-module-y7Axm"};
+
+function Footer({ close }) {
+    return (jsx(Button, { onPress: close, size: "md", children: "Close" }));
+}
+function Dialog({ allowClose = true, children, className, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
+    return (jsx(Modal, { className: clsx(styles$p['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, children: ({ close }) => (jsxs(Form, { onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$p.header, children: [!hideTitle && (jsx(Heading, { className: styles$p.heading, size: "xs", children: title })), jsx("div", { className: styles$p.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onPress: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$p.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$p.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
+}
+
+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(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 ConnectedFavoriteButton({ onFavorite: _onFavorite, productId, }) {
+    const { refetch } = useSession();
+    const isAuthenticated = useIsAuthenticated();
+    const { isFavorite, isFetching, wishList, wishListItem } = useFavoriteProduct(productId);
+    const [showSignInDialog, setShowSignInDialog] = useState(false);
+    const { error, mutate: addWishListItemToCurrentWishList } = useAddWishListItemToCurrentWishList();
+    const { mutate: deleteWishListItemFromWishList } = useDeleteWishListItemFromWishList();
+    function onFavorite() {
+        if (!isAuthenticated) {
+            return setShowSignInDialog(true);
+        }
+        if (wishList && wishListItem) {
+            deleteWishListItemFromWishList({
+                wishListId: wishList.id,
+                wishListItemId: wishListItem.id,
+            });
+        }
+        else {
+            addWishListItemToCurrentWishList({ productId });
+            _onFavorite?.();
+        }
+    }
+    useEffect(() => {
+        if (error instanceof ForbiddenRequestError ||
+            error instanceof UnauthorizedRequestError) {
+            refetch();
+            return setShowSignInDialog(true);
+        }
+    }, [error, refetch]);
+    if (isFetching)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onPress: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));
+}
+
+function ConnectedProductCard({ onAddToCart, onFavorite, productId, ...props }) {
+    return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { onAddToCart: onAddToCart, productId: productId }), favoriteButton: jsx(ConnectedFavoriteButton, { onFavorite: onFavorite, productId: productId }) }));
+}
+
+var styles$o = {"slide":"product-carousel-module-XVTB1"};
+
+function ProductCarousel({ hasOverflow = false, productCards, }) {
+    return (jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: styles$o.slide, slides: productCards, spaceBetween: 16 }));
+}
+
+function useLanguageCode() {
+    const { languageCode } = useContext(IntlContext);
+    return languageCode;
+}
+
+function ErrorPage({ error }) {
+    useEffect(() => {
+        setTimeout(() => {
+            if (!isRequestError(error))
+                throw error;
+        }, 0);
+    }, [error]);
+    return (jsx(Page, { breadCrumb: [
             { href: '/', label: 'Home' },
-            { href: '/', label: 'Products' },
-        ], title: "Product Details", children: [jsx("p", { children: "Hello Product Details" }), jsx("p", { children: pageUrl })] }));
+            { href: '/', label: 'Error' },
+        ], title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
+}
+
+var styles$n = {"product-details-page-layout":"product-details-page-layout-module-IQFIn","top":"product-details-page-layout-module--7oUp","image-gallery":"product-details-page-layout-module-Efavu","product-information":"product-details-page-layout-module-Y2490"};
+
+function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }) {
+    return (jsxs("div", { className: styles$n['product-details-page-layout'], children: [jsxs("section", { className: styles$n.top, children: [jsx("div", { className: styles$n['image-gallery'], children: imageGallery }), jsx("div", { className: styles$n['product-information'], children: productInformation })] }), jsx("section", { className: styles$n.usp, children: usp }), jsx("section", { className: styles$n.include, children: included }), jsx("section", { className: styles$n['recently-viewed'], children: recentlyViewed })] }));
+}
+
+var styles$m = {"blank-page-spacer":"blank-page-spacer-module-lXxle","loading-overlay":"blank-page-spacer-module-hbxDP"};
+
+function BlankPageSpacer({ children }) {
+    return jsx("div", { className: styles$m['blank-page-spacer'], children: children });
+}
+
+function LoadingPage() {
+    return (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) }));
+}
+
+function useFetchProductDetailsPageData({ languageCode, pageUrl, }) {
+    return useQuery({
+        gcTime: 1 * TIME.DAY,
+        queryFn: async () => {
+            const { body } = await request({
+                headers: { 'Current-Language-Id': languageCode },
+                // url: `${config.BFF_API_URL}/pdp/?pageUrl=${pageUrl}`,
+                // url: `/data/product-details/bff-response.json`,
+                url: `${config.SHOP_API_URL}/pdp/?pageUrl=${pageUrl}`,
+            });
+            return body;
+        },
+        queryKey: ['product-details-page-data', pageUrl, languageCode],
+        staleTime: 1 * TIME.DAY,
+    });
+}
+
+function ProductDetailsPage({ pageUrl }) {
+    const languageCode = useLanguageCode();
+    const { data, error, isError, isFetching } = useFetchProductDetailsPageData({
+        languageCode,
+        pageUrl,
+    });
+    if (isError)
+        return jsx(ErrorPage, { error: error });
+    if (!data || isFetching)
+        return jsx(LoadingPage, {});
+    const { breadCrumb, included, product, recentlyViewed } = data;
+    return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx("div", { style: {
+                    display: 'grid',
+                    gap: '1rem',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+                    padding: '1rem',
+                }, children: product.images.map((image, index) => (jsx(Image, { fit: "contain", height: 200, image: image, title: image.altText, width: 200 }, index))) }), included: jsxs("div", { style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: '0 1rem 1rem',
+                }, children: [jsx("h1", { style: { marginTop: '0' }, children: "Includes" }), included && (jsx(ProductCarousel, { hasOverflow: true, productCards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
+                                fit: 'contain',
+                                image: product.image,
+                                title: product.image.altText,
+                            }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) }))] }), productInformation: jsxs("div", { style: {
+                    padding: '1rem',
+                }, children: [jsx("h1", { children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber }), jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId })), jsx("h2", { children: "Product Features" }), jsx("div", { dangerouslySetInnerHTML: {
+                            __html: product.content.htmlContent,
+                        } }), jsx("h2", { children: "Specifications" }), jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: product.attributeTypes.map(attribute => attribute.attributeValues.map(attributeValue => (jsxs("div", { style: { display: 'flex' }, children: [jsx("b", { children: attribute.label }), ":", jsx("span", { children: attributeValue.value })] }, `${attribute.id}-${attributeValue.id}`)))) }), jsx("h2", { children: "Features" }), jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: product.specifications.map(specification => (jsxs("div", { style: { display: 'flex' }, children: [jsx("b", { children: specification.nameDisplay }), ":", jsx("span", { children: specification.value })] }, specification.id))) }), jsx("h2", { children: "Downloads" }), jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: product.documents.map(document => (jsx("a", { href: `${config.SHOP_API_URL}/${document.filePath}`, rel: "noreferrer", target: "_blank", children: document.name }, document.id))) })] }), recentlyViewed: jsxs("div", { style: {
+                    padding: '0 1rem 1rem',
+                }, children: [jsx("h1", { style: { marginTop: '0' }, children: "Recently Viewed" }), recentlyViewed && (jsx(ProductCarousel, { hasOverflow: true, productCards: recentlyViewed.map(product => (jsx(ConnectedProductCard, { href: product.href, image: {
+                                fit: 'contain',
+                                image: product.image,
+                                title: product.image.altText,
+                            }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) }))] }), usp: jsx("div", { style: {
+                    backgroundColor: '#bcbcbc',
+                    display: 'grid',
+                    fontWeight: 'bold',
+                    height: '509px',
+                    padding: '1rem',
+                    placeItems: 'center',
+                }, children: "Usp" }) }) }));
 }
 
 const useSidebar = () => {
@@ -7276,12 +7395,12 @@ function GlyphsChevronsBoldDownIcon(props) {
 function AccordionItem({ _pseudo = 'none', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
     const { isOpen, toggle } = useDisclosure(initialIsOpen);
     const panelId = `panel-${id}`;
-    return (jsxs("div", { className: clsx(className, styles$C['accordion-item'], {
-            [styles$C['is-open']]: isOpen,
-        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$C.button, styles$C[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$C.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$C.panel, id: panelId, role: "region", children: jsx("div", { className: styles$C.content, children: children }) })] }));
+    return (jsxs("div", { className: clsx(className, styles$D['accordion-item'], {
+            [styles$D['is-open']]: isOpen,
+        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$D.button, styles$D[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$D.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$D.panel, id: panelId, role: "region", children: jsx("div", { className: styles$D.content, children: children }) })] }));
 }
 
-var styles$p = {"filter-section":"filter-section-module-q1Ob8","default":"filter-section-module-JkP09","title":"filter-section-module-hWVv-","with-action":"filter-section-module-9qc6L","header":"filter-section-module-zi2ZE","content":"filter-section-module-15-YW","sm":"filter-section-module-crU-3","md":"filter-section-module-vHRQu","border-top":"filter-section-module-dGcTY"};
+var styles$l = {"filter-section":"filter-section-module-q1Ob8","default":"filter-section-module-JkP09","title":"filter-section-module-hWVv-","with-action":"filter-section-module-9qc6L","header":"filter-section-module-zi2ZE","content":"filter-section-module-15-YW","sm":"filter-section-module-crU-3","md":"filter-section-module-vHRQu","border-top":"filter-section-module-dGcTY"};
 
 function FilterSection({ ...props }) {
     const variant = props.variant;
@@ -7299,16 +7418,16 @@ function FilterSection({ ...props }) {
     /* eslint-enable @typescript-eslint/no-unnecessary-condition */
 }
 function CollapsibleFilterSection({ children, gap = 'md', initialIsOpen = true, title, variant, }) {
-    return (jsx("section", { className: clsx(styles$p['filter-section'], styles$p[variant], styles$p[gap]), children: jsx(Accordion, { borderPosition: "top", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: styles$p['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: children }) }) }));
+    return (jsx("section", { className: clsx(styles$l['filter-section'], styles$l[variant], styles$l[gap]), children: jsx(Accordion, { borderPosition: "top", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: styles$l['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: children }) }) }));
 }
 function WithActionFilterSection({ button, children, gap = 'md', title, variant, }) {
-    return (jsxs("section", { className: clsx(styles$p['filter-section'], styles$p[variant], styles$p[gap]), children: [jsxs("div", { className: styles$p.header, children: [jsx("h3", { className: styles$p.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: styles$p.content, children: children })] }));
+    return (jsxs("section", { className: clsx(styles$l['filter-section'], styles$l[variant], styles$l[gap]), children: [jsxs("div", { className: styles$l.header, children: [jsx("h3", { className: styles$l.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: styles$l.content, children: children })] }));
 }
 function DefaultFilterSection({ children, gap = 'md', title, variant, }) {
-    return (jsxs("section", { className: clsx(styles$p['filter-section'], styles$p[variant], styles$p[gap]), children: [jsx("h3", { className: styles$p.title, children: title }), jsx("div", { className: styles$p.content, children: children })] }));
+    return (jsxs("section", { className: clsx(styles$l['filter-section'], styles$l[variant], styles$l[gap]), children: [jsx("h3", { className: styles$l.title, children: title }), jsx("div", { className: styles$l.content, children: children })] }));
 }
 
-var styles$o = {"filter-panel":"algolia-filter-panel-module-GfhOO","scroll-container":"algolia-filter-panel-module-4ubB1","category":"algolia-filter-panel-module-LKet3","is-active":"algolia-filter-panel-module-yf8kI","value":"algolia-filter-panel-module-gQzED","count":"algolia-filter-panel-module-uAHPx","button":"algolia-filter-panel-module-ABOYv"};
+var styles$k = {"filter-panel":"algolia-filter-panel-module-GfhOO","scroll-container":"algolia-filter-panel-module-4ubB1","category":"algolia-filter-panel-module-LKet3","is-active":"algolia-filter-panel-module-yf8kI","value":"algolia-filter-panel-module-gQzED","count":"algolia-filter-panel-module-uAHPx","button":"algolia-filter-panel-module-ABOYv"};
 
 function AlgoliaActiveCategories() {
     const { items: categories } = useHierarchicalMenu({
@@ -7330,23 +7449,19 @@ function Categories({ categories, path: _path, }) {
         const categorySlug = category.label.toLowerCase().replace(/ /g, '-');
         const path = `${_path}/${categorySlug}`;
         const isActive = !category.data || !category.data.some(c => c.isRefined);
-        return (jsxs(Fragment, { children: [jsxs(RouteLink, { hasUnderline: true, className: clsx(styles$o.category, {
-                        [styles$o['is-active']]: isActive,
+        return (jsxs(Fragment, { children: [jsxs(RouteLink, { hasUnderline: true, className: clsx(styles$k.category, {
+                        [styles$k['is-active']]: isActive,
                     }), href: path, isDisabled: isActive, children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label })] }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
     });
 }
 
-function StrokeCloseboxIcon(props) {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
-}
-
-var styles$n = {"active-filter-item":"active-filters-module-Rrmhy","category":"active-filters-module-u9TTE","active-filter-value":"active-filters-module-CIuPU"};
+var styles$j = {"active-filter-item":"active-filters-module-Rrmhy","category":"active-filters-module-u9TTE","active-filter-value":"active-filters-module-CIuPU"};
 
 const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }) => {
     const t = useFormattedMessage();
     if (selectedFilterCategories.length === 0)
         return null;
-    return (jsx(FilterSection, { button: jsx(RouteLink, { onPress: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$n.category, children: category.filters.map(filter => (jsxs("div", { className: styles$n['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles$n['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: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map((category, index) => (jsx("section", { className: styles$j.category, children: category.filters.map(filter => (jsxs("div", { className: styles$j['active-filter-item'], children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles$j['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() {
@@ -7387,9 +7502,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(Link, { className: clsx(styles$o.category, {
-                [styles$o['is-active']]: isRefined,
-            }), isDisabled: isRefined, onClick: () => refine(value), children: [jsx("span", { className: styles$o.value, children: value }), ' ', jsxs("span", { className: styles$o.count, children: ["(", count, ")"] })] }, value))) }));
+    return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(({ count, isRefined, value }) => (jsxs(Link, { className: clsx(styles$k.category, {
+                [styles$k['is-active']]: isRefined,
+            }), isDisabled: isRefined, onClick: () => refine(value), children: [jsx("span", { className: styles$k.value, children: value }), ' ', jsxs("span", { className: styles$k.count, children: ["(", count, ")"] })] }, value))) }));
 }
 
 function AlgoliaDummyRefinementListConsumer() {
@@ -7441,7 +7556,7 @@ const MULTISELECT_ATTRIBUTE_IGNORE_LIST = [
 ];
 function PanelCloseButton() {
     const { close } = useSidebarActions();
-    return (jsx("div", { className: styles$o.button, children: jsxs(Button, { withArrow: true, onPress: close, size: "md", children: [jsx(FormattedMessage, { id: "Show" }), " ", jsx(AlgoliaResultsCount, {})] }) }));
+    return (jsx("div", { className: styles$k.button, children: jsxs(Button, { withArrow: true, onPress: close, size: "md", children: [jsx(FormattedMessage, { id: "Show" }), " ", jsx(AlgoliaResultsCount, {})] }) }));
 }
 function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilters = false, }) {
     /*
@@ -7456,7 +7571,7 @@ function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilter
         facets: ['*'],
         maxValuesPerFacet: 100,
     });
-    return (jsx("div", { className: styles$o['filter-panel'], children: jsxs("div", { className: styles$o['scroll-container'], children: [showActiveCategories && jsx(AlgoliaActiveCategories, {}), showCategoriesFilters && jsx(AlgoliaCategoriesFilters, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length === 0 ? (jsx(AlgoliaDummyRefinementListConsumer, {})) : (jsx("section", { children: attributesToRender
+    return (jsx("div", { className: styles$k['filter-panel'], children: jsxs("div", { className: styles$k['scroll-container'], children: [showActiveCategories && jsx(AlgoliaActiveCategories, {}), showCategoriesFilters && jsx(AlgoliaCategoriesFilters, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length === 0 ? (jsx(AlgoliaDummyRefinementListConsumer, {})) : (jsx("section", { children: attributesToRender
                         .filter(attribute => !MULTISELECT_ATTRIBUTE_IGNORE_LIST.includes(attribute))
                         .map((attribute, index) => {
                         return (jsx(AlgoliaMultiSelectFilterSection, { attribute: attribute }, `attribute-${index}`));
@@ -7467,10 +7582,10 @@ function GlyphsChevronsSlimRightIcon(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: "M9,6 L4.06645029,1 C3.87890406,1.08169007 3.69487412,1.19817561 3.51436046,1.34945663 C3.3338468,1.50073764 3.16239331,1.68216803 3,1.89374779 L7.08347812,5.98800959 L3,9.9960307 C3.16649238,10.2121071 3.33794587,10.4031847 3.51436046,10.5692635 C3.69077505,10.7353424 3.87480499,10.8789212 4.06645029,11 L9,6 Z", fillRule: "evenodd" }) }));
 }
 
-var styles$m = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
+var styles$i = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
 
 function Pagination({ currentPage, onChange, totalPages, }) {
-    return (jsxs("div", { className: styles$m.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles$m['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
+    return (jsxs("div", { className: styles$i.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles$i['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
 }
 
 function AlgoliaPagination({ onChange }) {
@@ -7806,11 +7921,6 @@ const createSonicSearchClient = ({ apiKey, appId, host, }) => {
     return searchClient;
 };
 
-function useLanguageCode() {
-    const { languageCode } = useContext(IntlContext);
-    return languageCode;
-}
-
 function AlgoliaSortBy() {
     const languageCode = useLanguageCode();
     const algoliaIndex = getAlgoliaIndex(environment, languageCode);
@@ -7830,12 +7940,12 @@ function AlgoliaSortBy() {
     return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
 }
 
-var styles$l = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
+var styles$h = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
 
 function CategoryCard({ href, image, isSelected = false, onClick, title, withArrow = false, }) {
     return (jsxs(RouteLink, { className: clsx({
-            [styles$l['is-selected']]: isSelected,
-        }, styles$l['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$l['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsxs("p", { className: styles$l.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$l.arrow })] })] }));
+            [styles$h['is-selected']]: isSelected,
+        }, styles$h['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$h['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsxs("p", { className: styles$h.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$h.arrow })] })] }));
 }
 
 const ProductListingPageContext = createContext({
@@ -7864,26 +7974,71 @@ function ConnectedCategoryCarousel() {
             }, title: category.title }, index))) }));
 }
 
-var styles$k = {"blank-page-spacer":"blank-page-spacer-module-lXxle","loading-overlay":"blank-page-spacer-module-hbxDP"};
-
-function BlankPageSpacer({ children }) {
-    return jsx("div", { className: styles$k['blank-page-spacer'], children: children });
-}
-
-var styles$j = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
+var styles$g = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
 
 function PromoCard({ href, image, variant }) {
-    return (jsx(RouteLink, { className: clsx(styles$j['promo-card'], styles$j[variant]), href: href, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
+    return (jsx(RouteLink, { className: clsx(styles$g['promo-card'], styles$g[variant]), href: href, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
 }
 
-var styles$i = {"promos":"promo-cards-module-Dy4p3"};
+var styles$f = {"promos":"promo-cards-module-Dy4p3"};
 
-function PromoCards({ promoCardsData = [], }) {
+function PromoCards({ promoCardsData = [] }) {
     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)
         return null;
-    return (jsx("div", { className: styles$i.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
+    return (jsx("div", { className: styles$f.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
+}
+
+function useFetchProductListingPageData({ languageCode, pageUrl, }) {
+    return useQuery({
+        gcTime: 1 * TIME.DAY,
+        queryFn: async () => {
+            return request({
+                headers: { 'Current-Language-Id': languageCode },
+                url: `${config.BFF_API_URL}/plp/?pageUrl=${pageUrl}`,
+            });
+        },
+        queryKey: ['product-listing-page-data', pageUrl, languageCode],
+        select: ({ body }) => {
+            return {
+                breadCrumb: body.breadCrumb.map(breadCrumb => ({
+                    href: breadCrumb.url,
+                    label: breadCrumb.text,
+                })),
+                category: body.categories
+                    ? {
+                        href: body.categories.path,
+                        image: {
+                            1: body.categories.smallImagePath,
+                            2: body.categories.smallImagePath,
+                            3: body.categories.smallImagePath,
+                            altText: body.categories.imageAltText,
+                        },
+                        title: body.categories.shortDescription,
+                    }
+                    : undefined,
+                categoryPages: body.categoryPages,
+                hierarchicalCategories: body.hierarchicalCategories,
+                promoCards: body.promoCards
+                    ? {
+                        top: body.promoCards.top || undefined,
+                    }
+                    : undefined,
+                subcategories: body.categories?.subCategories?.map(subcategory => ({
+                    href: subcategory.path,
+                    image: {
+                        1: subcategory.smallImagePath,
+                        2: subcategory.smallImagePath,
+                        3: subcategory.smallImagePath,
+                        altText: subcategory.imageAltText,
+                    },
+                    title: subcategory.shortDescription,
+                })),
+            };
+        },
+        staleTime: 1 * TIME.DAY,
+    });
 }
 
 const scrollToTop = (scrollOptions) => {
@@ -7893,17 +8048,17 @@ const scrollToTop = (scrollOptions) => {
     });
 };
 
-var styles$h = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","is-not-docked":"sidebar-module-Scw7D"};
+var styles$e = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","is-not-docked":"sidebar-module-Scw7D"};
 
 function InnerSidebar({ children }) {
     const { isDocked, isOpen, toggle, transition } = useSidebar();
-    return (jsxs("aside", { className: clsx(styles$h.sidebar, {
-            [styles$h['transition']]: transition,
-            [styles$h['is-open']]: isOpen,
-            [styles$h['is-closed']]: !isOpen,
-            [styles$h['is-docked']]: isDocked,
-            [styles$h['is-not-docked']]: !isDocked,
-        }), children: [jsx("div", { className: styles$h.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
+    return (jsxs("aside", { className: clsx(styles$e.sidebar, {
+            [styles$e['transition']]: transition,
+            [styles$e['is-open']]: isOpen,
+            [styles$e['is-closed']]: !isOpen,
+            [styles$e['is-docked']]: isDocked,
+            [styles$e['is-not-docked']]: !isDocked,
+        }), children: [jsx("div", { className: styles$e.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
 }
 function Sidebar({ children }) {
     return jsx(InnerSidebar, { children: children });
@@ -7918,11 +8073,11 @@ const ToggleSidebarButton = () => {
     return (jsx(Button, { color: "secondary", icon: jsx(StrokeFilterIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
-var styles$g = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
+var styles$d = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
 
 function NoResults$1({ content, title }) {
     const { lg } = useBreakpoint();
-    return (jsxs("div", { className: styles$g['no-results'], children: [jsx(Heading, { bold: false, className: styles$g.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles$g.body, children: content }), jsx("div", { className: styles$g.buttons, children: jsx(RouteButton, { withArrow: true, href: `${config.SHOP_API_URL}`, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
+    return (jsxs("div", { className: styles$d['no-results'], children: [jsx(Heading, { bold: false, className: styles$d.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles$d.body, children: content }), jsx("div", { className: styles$d.buttons, children: jsx(RouteButton, { withArrow: true, href: `${config.SHOP_API_URL}`, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
 }
 
 function getCookies() {
@@ -8134,57 +8289,6 @@ function useAlgoliaInsights() {
   sendEvents: Parameters<ReturnType<typeof makeSendEvents>>;
 */
 
-var styles$f = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X"};
-
-function Modal({ children, className, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
-    return (jsx(ModalOverlay, { className: clsx(styles$f['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: styles$f.modal, children: children }) }));
-}
-
-var styles$e = {"header":"dialog-module-ZnsAe","heading":"dialog-module-SwpuZ","close":"dialog-module-Y7Tqg","content":"dialog-module-Koqia","footer":"dialog-module-y7Axm"};
-
-function Footer({ close }) {
-    return (jsx(Button, { onPress: close, size: "md", children: "Close" }));
-}
-function Dialog({ allowClose = true, children, className, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles$e['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, children: ({ close }) => (jsxs(Form, { onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$e.header, children: [!hideTitle && (jsx(Heading, { className: styles$e.heading, size: "xs", children: title })), jsx("div", { className: styles$e.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onPress: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$e.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$e.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
-}
-
-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(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 ConnectedFavoriteButton({ onFavorite: _onFavorite, productId, }) {
-    const { isFavorite, isFetching, wishList, wishListItem } = useFavoriteProduct(productId);
-    const isAuthenticated = useIsAuthenticated();
-    const [showSignInDialog, setShowSignInDialog] = useState(false);
-    const { mutate: addWishListItemToCurrentWishList } = useAddWishListItemToCurrentWishList();
-    const { mutate: deleteWishListItemFromWishList } = useDeleteWishListItemFromWishList();
-    function onFavorite() {
-        if (!isAuthenticated) {
-            return setShowSignInDialog(true);
-        }
-        if (wishList && wishListItem) {
-            deleteWishListItemFromWishList({
-                wishListId: wishList.id,
-                wishListItemId: wishListItem.id,
-            });
-        }
-        else {
-            addWishListItemToCurrentWishList({ productId });
-            _onFavorite?.();
-        }
-    }
-    if (isFetching)
-        return null;
-    return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onPress: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));
-}
-
-function ConnectedProductCard({ onAddToCart, onFavorite, productId, ...props }) {
-    return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { onAddToCart: onAddToCart, productId: productId }), favoriteButton: jsx(ConnectedFavoriteButton, { onFavorite: onFavorite, productId: productId }) }));
-}
-
 function ProductListingProductOverview() {
     const { isLoading, products } = useAlgoliaProductHits();
     const { sendAddToCartFromProductListPageEvent, sendAddToWishListFromProductListPageEvent, sendProductClickFromProductListPageEvent, } = useAlgoliaInsights();
@@ -8207,7 +8311,7 @@ function ProductListingProductOverview() {
             }, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
 }
 
-var styles$d = {"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"};
+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"};
 
 function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
     const languageCode = useLanguageCode();
@@ -8221,25 +8325,20 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
             appId: config.ALGOLIA_APP_ID,
             host: config.ALGOLIA_HOST,
         }), [_searchClient]);
-    if (isError) {
-        if (!isRequestError(error))
-            throw error;
-        // TODO: Implement error page (404, 500, etc.)
-        return (jsxs("h1", { children: [error.status, " - ", error.statusText] }));
-    }
-    if (!data || isFetching) {
-        return (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) }));
-    }
+    if (isError)
+        return jsx(ErrorPage, { error: error });
+    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$d['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$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { promoCards: data.promoCards?.top }) }) }) }));
 }
 function ProductListingPageContent({ promoCards, }) {
     const { isLoading, products } = useAlgoliaProductHits();
     const hasProducts = products.length > 0;
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) })), 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: {
+    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$d.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$d.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$d['action-bar'], children: [jsx("div", { className: styles$d['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$d.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$d.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$d['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$d['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$d.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+                }, children: [promoCards?.length && (jsx("section", { className: styles$c.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$c.categories, children: jsx(ConnectedCategoryCarousel, {}) }), 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: () => {
                                                     setTimeout(() => {
                                                         scrollToTop();
                                                     }, 100);
@@ -8268,7 +8367,7 @@ function SearchResultProductOverview() {
             }, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
 }
 
-var styles$c = {"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$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"};
 
 function SearchResultsPage({ location, searchClient, }) {
     const languageCode = useLanguageCode();
@@ -8277,7 +8376,7 @@ 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$c['search-results'], title: t("'{0}' in all products", {
+    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], className: styles$b['search-results'], title: t("'{0}' in all products", {
                 replacementValues: { 0: keyword },
             }), children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
 }
@@ -8285,20 +8384,20 @@ function SearchResultsPageContent({ keyword }) {
     const { isLoading, products } = useAlgoliaProductHits();
     const hasProducts = products.length > 0;
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && jsx(LoadingOverlay, {}), 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 && !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}'", {
                     replacementValues: { 0: keyword },
                 }) })), jsxs("div", { style: {
                     display: !hasProducts ? 'none' : undefined,
-                }, children: [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, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$c['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$c.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+                }, children: [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: () => {
                                                     setTimeout(() => {
                                                         scrollToTop();
                                                     }, 100);
                                                 } }) })] })] }) })] })] }));
 }
 
-var styles$b = {"overlay-background":"overlay-background-module-j7R7T","open":"overlay-background-module-DZWsP","close":"overlay-background-module-8pcWN"};
+var styles$a = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
 
-function OverlayBackground({ className, isOpen, onClick, }) {
+function BackgroundOverlay({ className, isOpen, onClick, }) {
     const [, setRender] = useState(isOpen);
     const nodeRef = useRef(null);
     useEffect(() => {
@@ -8317,13 +8416,13 @@ function OverlayBackground({ className, isOpen, onClick, }) {
     }, [isOpen]);
     if (typeof window === 'undefined')
         return null;
-    return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$b['overlay-background'], {
-            [styles$b['open']]: isOpen,
-            [styles$b['close']]: !isOpen,
+    return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles$a['background-overlay'], {
+            [styles$a['open']]: isOpen,
+            [styles$a['close']]: !isOpen,
         }, className), onClick: onClick }), document.body);
 }
 
-var styles$a = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
+var styles$9 = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR"};
 
 function SidebarDetectBreakpoint() {
     const xxl = useIsBreakpoint('xxl');
@@ -8353,11 +8452,11 @@ function SidebarDetectBreakpoint() {
 function SidebarProvider({ children }) {
     const state = useSidebar();
     const { close, isDocked, isOpen, transition } = state;
-    return (jsxs("div", { className: clsx(styles$a['sidebar-container'], {
-            [styles$a['transition']]: transition,
-            [styles$a['docked']]: isDocked,
-            [styles$a['open']]: isOpen,
-        }), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(OverlayBackground, { isOpen: isOpen, onClick: close }))] }));
+    return (jsxs("div", { className: clsx(styles$9['sidebar-container'], {
+            [styles$9['transition']]: transition,
+            [styles$9['docked']]: isDocked,
+            [styles$9['open']]: isOpen,
+        }), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: close }))] }));
 }
 
 const categoriesPlugin = ({ productsIndexName, searchClient, }) => {
@@ -8694,12 +8793,12 @@ function useAlgoliaSearch() {
     };
 }
 
-var styles$9 = {"global-search-overlay-background-position":"global-search-module-mmXv1","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$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"};
 
 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(OverlayBackground, { className: styles$9['global-search-overlay-background-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$8['global-search-background-overlay-position'], isOpen: isOpen, onClick: toggle })] }) }));
 }
 
 const useGlobalSearchDisclosure = () => {
@@ -8718,7 +8817,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$8 = {"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$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"};
 
 function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, placeholder, }) {
     const formProps = autocomplete?.getFormProps({
@@ -8734,10 +8833,10 @@ function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, plac
         formProps?.onSubmit(e);
         onSubmit?.();
     }
-    return (jsx("form", { ref: formRef, className: styles$8.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles$8['input-container'], children: [jsx("label", { className: styles$8.label, ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles$8['icon-search'], styles$8.icon) }) }), jsx("input", { ref: inputRef, onKeyUp: e => {
+    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 => {
                         if (e.key === 'Escape')
                             onCancel?.();
-                    }, ...inputProps, className: styles$8.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles$8['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
+                    }, ...inputProps, className: styles$7.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles$7['reset-btn'], color: "secondary", onPress: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
 }
 
 function ConnectedSearchInput() {
@@ -8751,26 +8850,26 @@ function ConnectedSearchInput() {
         }, placeholder: t('What are you searching for?') }));
 }
 
-var styles$7 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
+var styles$6 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
 
 function CategoriesGrid({ categories, onItemClick, }) {
-    return (jsx("div", { className: styles$7['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$7['category'], children: jsx(CategoryCard, { withArrow: true, href: category.href, image: {
+    return (jsx("div", { className: styles$6['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$6['category'], children: jsx(CategoryCard, { withArrow: true, href: category.href, image: {
                     fit: 'contain',
                     image: category.image,
                     title: category.title,
                 }, onClick: onItemClick, title: category.title }, category.title) }, category.title))) }));
 }
 
-var styles$6 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR","content":"search-section-module-VZlvZ"};
+var styles$5 = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR","content":"search-section-module-VZlvZ"};
 
 function SearchSection({ button, children, className, title, }) {
-    return (jsxs("div", { className: clsx(styles$6['search-section'], className), children: [jsxs("div", { className: styles$6.header, children: [title && jsx("h2", { className: styles$6.title, children: title }), button && button] }), jsx("div", { className: styles$6.content, children: children })] }));
+    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] }), jsx("div", { className: styles$5.content, children: children })] }));
 }
 
-var styles$5 = {"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$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"};
 
 function SectionContainer({ buttons, leftContent, rightContent, }) {
-    return (jsx("div", { className: styles$5['section-container'], children: jsxs("div", { className: styles$5['content'], children: [jsx("div", { className: styles$5['left'], children: leftContent }), jsxs("div", { className: styles$5['right'], children: [rightContent, jsx("div", { className: styles$5['button-container'], children: buttons })] })] }) }));
+    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 })] })] }) }));
 }
 
 function NoResults() {
@@ -8779,7 +8878,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$5['no-results-text'], children: jsxs("div", { className: styles$5.section, children: [jsxs("p", { className: styles$5.query, children: ["'", state.query, "'"] }), jsxs("div", { className: styles$5.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles$5.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$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" }) })] })] })] }) }) }));
 }
 function PopularCategoriesSection() {
     const { popularCategories: collection } = useAlgoliaSearch();
@@ -8788,7 +8887,7 @@ function PopularCategoriesSection() {
     if (!collection)
         return null;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$5['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
+    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles$4['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
 }
 
 function Highlight({ attribute, hit, tagName = 'mark', }) {
@@ -8800,19 +8899,19 @@ function Highlight({ attribute, hit, tagName = 'mark', }) {
     }));
 }
 
-var styles$4 = {"search-list":"search-list-module-vRuMO"};
+var styles$3 = {"search-list":"search-list-module-vRuMO"};
 
 function SearchList({ ariaLabelledby, children, className, id, }) {
-    return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$4['search-list'], className), id: id, children: children }));
+    return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles$3['search-list'], className), id: id, children: children }));
 }
 
-var styles$3 = {"search-list-item":"search-list-item-module-WXp77","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN"};
+var styles$2 = {"search-list-item":"search-list-item-module-WXp77","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$3['search-list-item'], onClick: onClick, role: "option", children: [jsxs("div", { className: styles$3.content, children: [icon && icon, text && jsx("span", { className: styles$3.text, children: text })] }), isRemovable && (jsx(IconButton, { color: "secondary", onPress: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
+    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, { color: "secondary", onPress: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
 }
 
-var styles$2 = {"quick-access-section":"no-search-module-87NKV","quick-access-carousel":"no-search-module-beCXI","quick-access-card":"no-search-module-dtT5J"};
+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, {}) }));
@@ -8849,13 +8948,7 @@ function QuickAccessSection() {
     if (!collection)
         return;
     const { items } = collection;
-    return (jsx(SearchSection, { title: t('Quick access'), children: jsx("div", { className: styles$2['quick-access-section'], children: jsx(Carousel, { className: styles$2['quick-access-carousel'], hasNavigation: false, hasOverflow: false, navigationButtonsPosition: "center", slides: items.map((item, index) => (jsx(RouteLink, { className: styles$2['quick-access-card'], href: item.action.url, onClick: close, children: jsx(Image, { height: 343, image: item.image, title: item.image.altText, width: 192 }) }, index))), spaceBetween: 16 }) }) }));
-}
-
-var styles$1 = {"slide":"product-carousel-module-XVTB1"};
-
-function ProductCarousel({ productCards }) {
-    return (jsx(Carousel, { hasOverflow: false, navigationButtonsPosition: "center", slideClasses: styles$1.slide, slides: productCards, spaceBetween: 16 }));
+    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))), spaceBetween: 16 }) }) }));
 }
 
 function StrokeRecentIcon(props) {
@@ -8865,12 +8958,12 @@ function StrokeRecentIcon(props) {
 function WithResults() {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$5['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$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, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
     const t = useFormattedMessage();
-    return (jsxs(SearchSection, { className: styles$5['product-results-section'], title: t('Suggestions'), children: [recentSearches && (jsx(SearchList, { ...autocomplete.getListProps({
+    return (jsxs(SearchSection, { className: styles$4['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,
@@ -8900,7 +8993,7 @@ function ProductResultsSection() {
     if (!collection)
         return null;
     const { items, source } = collection;
-    return (jsx(SearchSection, { className: styles$5['product-results-section'], title: t('Products'), children: jsx("div", { className: styles$5['product-results'], ...autocomplete.getListProps({ source }), children: jsx(ProductCarousel, { productCards: items.map((product, index) => (createElement$1(ConnectedProductCard, { ...autocomplete.getItemProps({
+    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, { productCards: items.map((product, index) => (createElement$1(ConnectedProductCard, { ...autocomplete.getItemProps({
                         item: product.hit,
                         source: source,
                     }), key: product.storefrontId, href: product.storefrontSlug, image: {
@@ -8911,14 +9004,14 @@ function ProductResultsSection() {
                         sendAddToCartFromSearchEvent({
                             objectId: product.objectId,
                             queryId: product.queryId,
-                        }), onFavorite: () => {
+                        }), onClick: () => close(), onFavorite: () => {
                         product.queryId &&
                             sendAddToWishListFromSearchEvent({
                                 objectId: product.objectId,
                                 position: product.position || index + 1,
                                 queryId: product.queryId,
                             });
-                    }, onPress: () => close(), price: {
+                    }, price: {
                         isVatIncluded: product.isVatIncluded,
                         originalPrice: product.originalPrice,
                         price: product.price,
@@ -8952,7 +9045,7 @@ function SearchRoot() {
             inputRef.current.blur();
         }
     }, [inputRef, isOpen]);
-    return (jsx("div", { className: styles$9['search-root'], children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles$9['search-container'], styles$9[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles$9.input, children: jsx(ConnectedSearchInput, {}) }), jsx("div", { className: styles$9.panel, children: jsx(SearchResultPanel, {}) })] })) }) }));
+    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, {}) })] })) }) }));
 }
 /**
  * Global search using algolia autocomplete with a custom renderer
@@ -8965,7 +9058,7 @@ function SearchRoot() {
 function GlobalSearch() {
     const panelRef = useRef(null);
     const { isOpen } = useGlobalSearchDisclosure();
-    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$9['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$8['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
 }
 
 const queryClient = new QueryClient({
@@ -8982,4 +9075,4 @@ function ReactQueryContainer({ children }) {
     return (jsx(QueryClientProvider, { client: queryClient, children: children }));
 }
 
-export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, 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, useFetchProductListingPageData, useFetchTranslations, useFetchWishLists, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useIsAuthenticated, useIsBreakpoint, useNavigate, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };
+export { Accordion, AddToCartButton, AlgoliaActiveCategories, AlgoliaCategoriesFilters, AlgoliaFilterPanel, AlgoliaInsightsProvider, AlgoliaInsightsProviderContext, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadRequestError, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, 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, useScrollLock, useSession, useSignIn, useSignOut, useUpdateCartLineById, userToken };