@sonic-equipment/ui 0.0.34 → 0.0.36

package/dist/index.js

@@ -1,11 +1,11 @@
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import React, { useState, useCallback, useEffect, useRef, createContext, useContext, forwardRef, useLayoutEffect, Children, cloneElement, createElement as createElement$1, useMemo, Fragment as Fragment$1 } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Breadcrumbs, Breadcrumb as Breadcrumb$1, Link, Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Link, Button as Button$1, Breadcrumbs, Breadcrumb as Breadcrumb$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
 import { history } from 'instantsearch.js/es/lib/routers/index.js';
 import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
-import { useQuery } from '@tanstack/react-query';
 import ReactDOM from 'react-dom';
 import { TransitionGroup, Transition } from 'react-transition-group';
 import { createAutocomplete } from '@algolia/autocomplete-core';
@@ -13,6 +13,282 @@ import { getAlgoliaResults, getAlgoliaFacets, parseAlgoliaHitHighlight } from '@
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
 
+class ResponseError extends Error {
+    constructor(response, message) {
+        super(response.statusText);
+        Object.defineProperty(this, "response", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "statusText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "url", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.message = message || response.statusText;
+        this.name = 'ResponseError';
+        this.response = response;
+        this.status = response.status;
+        this.statusText = response.statusText;
+        this.type = response.type;
+        this.url = response.url;
+    }
+}
+function isResponseError(error) {
+    return error instanceof ResponseError;
+}
+
+class FetchProductListingPageDataError extends ResponseError {
+    constructor(response, message) {
+        super(response, message);
+        this.name = 'FetchProductListingPageDataError';
+    }
+}
+function useFetchProductListingPageData(bffUrl, { languageCode, pageUrl }) {
+    return useQuery({
+        gcTime: 1000 * 60 * 60 * 24,
+        queryFn: async () => {
+            const res = await fetch(`${bffUrl}/api/v1/plp/?pageUrl=${pageUrl}`, {
+                headers: { 'Current-Language-Id': languageCode },
+            });
+            if (!res.ok)
+                throw new FetchProductListingPageDataError(res);
+            return (await res.json());
+        },
+        queryKey: [bffUrl, 'product-listing-page-data', pageUrl, languageCode],
+        retry: false,
+        select: (data) => {
+            return {
+                banner: data.banner,
+                breadCrumb: data.breadCrumb.map(breadCrumb => ({
+                    href: breadCrumb.url,
+                    label: breadCrumb.text,
+                })),
+                category: {
+                    href: data.categories.path,
+                    image: {
+                        alt: data.categories.imageAltText,
+                        src: data.categories.smallImagePath,
+                        title: data.categories.shortDescription,
+                    },
+                    title: data.categories.shortDescription,
+                },
+                categoryPages: data.categoryPages,
+                subcategories: data.categories.subCategories?.map(subcategory => ({
+                    href: subcategory.path,
+                    image: {
+                        alt: subcategory.imageAltText,
+                        src: subcategory.smallImagePath,
+                        title: subcategory.shortDescription,
+                    },
+                    title: subcategory.shortDescription,
+                })),
+            };
+        },
+        staleTime: 1000 * 60 * 60 * 24,
+    });
+}
+
+var CurrencyPositioningType;
+(function (CurrencyPositioningType) {
+    CurrencyPositioningType["Left"] = "Left";
+    CurrencyPositioningType["Right"] = "Right";
+})(CurrencyPositioningType || (CurrencyPositioningType = {}));
+var AvailabilityMessageType;
+(function (AvailabilityMessageType) {
+    AvailabilityMessageType[AvailabilityMessageType["NoMessage"] = 0] = "NoMessage";
+    AvailabilityMessageType[AvailabilityMessageType["Available"] = 1] = "Available";
+    AvailabilityMessageType[AvailabilityMessageType["OutOfStock"] = 2] = "OutOfStock";
+    AvailabilityMessageType[AvailabilityMessageType["LowStock"] = 3] = "LowStock";
+})(AvailabilityMessageType || (AvailabilityMessageType = {}));
+var VariantDisplayTypeValues;
+(function (VariantDisplayTypeValues) {
+    VariantDisplayTypeValues["Button"] = "Button";
+    VariantDisplayTypeValues["Dropdown"] = "Dropdown";
+    VariantDisplayTypeValues["SwatchDropdown"] = "SwatchDropdown";
+    VariantDisplayTypeValues["SwatchGrid"] = "SwatchGrid";
+    VariantDisplayTypeValues["SwatchList"] = "SwatchList";
+})(VariantDisplayTypeValues || (VariantDisplayTypeValues = {}));
+var BadgeTypeValues;
+(function (BadgeTypeValues) {
+    BadgeTypeValues["Image"] = "Image";
+    BadgeTypeValues["Text"] = "Text";
+})(BadgeTypeValues || (BadgeTypeValues = {}));
+var BadgeImagePlacementValues;
+(function (BadgeImagePlacementValues) {
+    BadgeImagePlacementValues["BottomCenter"] = "Bottom Center";
+    BadgeImagePlacementValues["BottomLeft"] = "Bottom Left";
+    BadgeImagePlacementValues["BottomRight"] = "Bottom Right";
+    BadgeImagePlacementValues["None"] = "None";
+    BadgeImagePlacementValues["TopCenter"] = "Top Center";
+    BadgeImagePlacementValues["TopLeft"] = "Top Left";
+    BadgeImagePlacementValues["TopRight"] = "Top Right";
+})(BadgeImagePlacementValues || (BadgeImagePlacementValues = {}));
+var BadgeStyleValues;
+(function (BadgeStyleValues) {
+    BadgeStyleValues["Rectangle"] = "Rectangle";
+    BadgeStyleValues["Round"] = "Round";
+})(BadgeStyleValues || (BadgeStyleValues = {}));
+
+const config = {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    SHOP_API_URL: '',
+};
+
+class AddProductToCurrentCartError extends ResponseError {
+    constructor(response, message) {
+        super(response, message);
+        this.name = 'AddProductToCurrentCartError';
+    }
+}
+function useAddProductToCurrentCart() {
+    const queryClient = useQueryClient();
+    const queryKey = ['carts', 'current', 'cartlines'];
+    return useMutation({
+        mutationFn: async (productOrderData) => {
+            const res = await fetch(`${config.SHOP_API_URL}/api/v1/carts/current/cartlines`, {
+                body: JSON.stringify(productOrderData),
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'POST',
+            });
+            if (!res.ok)
+                throw new AddProductToCurrentCartError(res, `Failed to add product ${productOrderData.productId} to cart`);
+            const cartLine = (await res.json());
+            if (cartLine.productId !== productOrderData.productId)
+                throw new Error(`Product ${productOrderData.productId} has not been added to the current cart`);
+            const cartLines = queryClient.getQueryData(queryKey) ||
+                [];
+            queryClient.setQueryData(queryKey, cartLines.some(cl => cl.id === cartLine.id)
+                ? cartLines.map(cl => (cl.id === cartLine.id ? cartLine : cl))
+                : cartLines.concat(cartLine));
+            // Invalidate the related current cart query cache
+            queryClient.invalidateQueries({ queryKey: ['carts', 'current'] });
+            return cartLine;
+        },
+        onError: () => {
+            queryClient.invalidateQueries({ queryKey });
+        },
+    });
+}
+
+class DeleteCartLineByIdError extends ResponseError {
+    constructor(response, message) {
+        super(response, message);
+        this.name = 'DeleteCartLineByIdError';
+    }
+}
+function useDeleteCartLineById() {
+    const queryClient = useQueryClient();
+    const queryKey = ['carts', 'current', 'cartlines'];
+    return useMutation({
+        mutationFn: async (cartLineId) => {
+            const res = await fetch(`${config.SHOP_API_URL}/api/v1/carts/current/cartlines/${cartLineId}`, {
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'DELETE',
+            });
+            if (!res.ok)
+                throw new DeleteCartLineByIdError(res, `Failed to delete cart line with id ${cartLineId}`);
+            const cartLines = queryClient.getQueryData(queryKey);
+            queryClient.setQueryData(queryKey, cartLines?.filter(line => line.id !== cartLineId));
+            // Invalidate the related current cart query cache
+            queryClient.invalidateQueries({ queryKey: ['carts', 'current'] });
+        },
+        onError: () => {
+            queryClient.invalidateQueries({ queryKey });
+        },
+    });
+}
+
+class FetchCurrentCartLinesError extends ResponseError {
+    constructor(response, message) {
+        super(response, message);
+        this.name = 'FetchCurrentCartLinesError';
+    }
+}
+function useFetchCurrentCartLines() {
+    return useQuery({
+        queryFn: async () => {
+            const res = await fetch(`${config.SHOP_API_URL}/api/v1/carts/current/cartlines?page=1&pageSize=999`, {
+                credentials: 'include',
+            });
+            if (!res.ok)
+                throw new FetchCurrentCartLinesError(res);
+            const result = (await res.json());
+            return result.cartLines;
+        },
+        queryKey: ['carts', 'current', 'cartlines'],
+        retry: false,
+    });
+}
+
+class UpdateCartLineByIdError extends ResponseError {
+    constructor(response, message) {
+        super(response, message);
+        this.name = 'UpdateCartLineByIdError';
+    }
+}
+function useUpdateCartLineById() {
+    const queryClient = useQueryClient();
+    const queryKey = ['carts', 'current', 'cartlines'];
+    return useMutation({
+        mutationFn: async ({ cartLine: _cartLine, cartLineId }) => {
+            const res = await fetch(`${config.SHOP_API_URL}/api/v1/carts/current/cartlines/${cartLineId}`, {
+                body: JSON.stringify(_cartLine),
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'PATCH',
+            });
+            if (!res.ok)
+                throw new UpdateCartLineByIdError(res, `Failed to update cart line with ${cartLineId}`);
+            // Invalidate the related current cart query cache
+            queryClient.invalidateQueries({ queryKey: ['carts', 'current'] });
+        },
+        onError: () => {
+            queryClient.invalidateQueries({ queryKey });
+        },
+        onMutate: async ({ cartLine }) => {
+            await queryClient.cancelQueries({ queryKey });
+            const cartLines = (queryClient.getQueryData(queryKey) ||
+                []);
+            const previousCartLine = cartLines.find(line => line.id === cartLine.id);
+            queryClient.setQueryData(queryKey, cartLines.some(cl => cl.id === cartLine.id)
+                ? cartLines.map(cl => (cl.id === cartLine.id ? cartLine : cl))
+                : cartLines.concat(cartLine));
+            // Return a context with the previous and new todo
+            return { newCartLine: cartLine, previousCartLine };
+        },
+    });
+}
+
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 const breakpoints$1 = {
     sm: 0,
@@ -199,32 +475,16 @@ function useGlobalState(key, initialState) {
 }
 
 function CartProvider(props) {
-    const [, updateState] = useGlobalState('cart', props);
-    useEffect(() => {
-        updateState(props);
-    }, [props, updateState]);
+    useGlobalState('cart', props);
     return null;
 }
-function useCart() {
+function useCartEvents() {
     const [state] = useGlobalState('cart');
     if (!state) {
         throw new Error('useCart must be used together with the CartProvider');
     }
     return state;
 }
-function useProductCartLine(productId) {
-    const { addToCart, currentCart, isLoaded, isLoading, loadCurrentCart, removeCartLine, updateCartLine, } = useCart();
-    return {
-        addToCart,
-        cartLine: currentCart?.cartLines?.find(cl => cl.productId === productId),
-        currentCart,
-        isLoaded,
-        isLoading,
-        loadCurrentCart,
-        removeCartLine,
-        updateCartLine,
-    };
-}
 
 function FavoriteProvider(props) {
     const [, updateState] = useGlobalState('favorite', props);
@@ -244,6 +504,54 @@ function useFavorite(productId) {
     };
 }
 
+function RouteProvider({ children, navigate }) {
+    useGlobalState('routing', { navigate });
+    return jsx(Fragment, { children: children });
+}
+function useNavigate() {
+    const [state] = useGlobalState('routing');
+    if (!state) {
+        throw new Error('RouteProvider not found');
+    }
+    return state.navigate;
+}
+
+function RouteLink({ children, ...props }) {
+    const navigate = useNavigate();
+    function onClick(e) {
+        if (!props.href)
+            return;
+        e.preventDefault();
+        navigate(props.href, props.route);
+    }
+    function onHoverStart() {
+        // TODO: Implement prefetch
+    }
+    return (jsx(Link
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    , { 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onClick: onClick, onHoverStart: onHoverStart, ...props, children: children }));
+}
+
+function RouteButton({ children, ...props }) {
+    const navigate = useNavigate();
+    return (jsx(Button$1
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    , { 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onClick: e => {
+            if (!props.href)
+                return;
+            e.preventDefault();
+            navigate(props.href, props.route);
+        }, ...props, children: children }));
+}
+
 function ChevronLeftFilledIcon(props) {
     return (jsx("svg", { height: "13", viewBox: "0 0 13 13", width: "13", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m3.889 6 5.025-5c.19.082.378.198.562.35.184.15.359.332.524.544L5.84 5.988 10 9.996c-.17.216-.344.407-.524.573-.18.166-.367.31-.562.431L3.889 6z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
@@ -254,46 +562,26 @@ function HomeFilledIcon(props) {
 
 var styles$C = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
 
-function Breadcrumb({ links }) {
-    const { lg } = useBreakpoint();
-    if (links.length <= 1)
-        return null;
-    return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
-}
 function BreadcrumbShort({ links }) {
     const homeLink = links[0];
     const previousLink = links[links.length - 2];
-    return (jsx(Breadcrumbs, { className: styles$C.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$C.breadcrumb, children: jsx(Link, { className: styles$C.link, isDisabled: false, children: previousLink === undefined || previousLink === homeLink ? (jsxs(Fragment, { children: [jsx(ChevronLeftFilledIcon, { className: styles$C.icon }), jsx(HomeFilledIcon, { className: styles$C.icon })] })) : (jsxs(Fragment, { children: [jsx(ChevronLeftFilledIcon, { className: styles$C.icon }), jsx("span", { children: previousLink.label })] })) }) }) }));
+    return (jsx(Breadcrumbs, { className: styles$C.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$C.breadcrumb, children: jsxs(RouteLink, { className: styles$C.link, isDisabled: false, children: [jsx(ChevronLeftFilledIcon, { className: styles$C.icon }), previousLink === undefined || previousLink === homeLink ? (jsx(HomeFilledIcon, { className: styles$C.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
+}
+function BreadcrumbLongItem({ index, isDisabled, link, }) {
+    return (jsx(Breadcrumb$1, { className: styles$C.breadcrumb, children: jsxs(RouteLink, { className: styles$C.link, href: link.href, isDisabled: isDisabled, children: [jsx(ChevronLeftFilledIcon, { className: clsx(styles$C['previous-icon'], styles$C.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$C.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$C.breadcrumb, children: jsx(Link, { className: styles$C.link, href: homeLink.href, children: jsx(HomeFilledIcon, { className: clsx(styles$C['home-icon'], styles$C.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(Breadcrumb$1, { className: styles$C.breadcrumb, children: jsxs(Link, { className: styles$C.link, href: link.href, isDisabled: index === linksWithoutFirst.length - 1, children: [jsx(ChevronLeftFilledIcon, { className: clsx(styles$C['previous-icon'], styles$C.icon) }), link.label] }) }, index)))] }));
+    return (jsxs(Breadcrumbs, { className: styles$C.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$C.breadcrumb, children: jsx(RouteLink, { className: styles$C.link, href: homeLink.href, children: jsx(HomeFilledIcon, { className: clsx(styles$C['home-icon'], styles$C.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
 }
-
-const ProductListingPageContext = createContext({
-    data: undefined,
-});
-
-function ProductListingPageProvider({ children, data, error, isError, isLoading, }) {
-    return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
-}
-function useProductListingPageProvider() {
-    return useContext(ProductListingPageContext);
-}
-
-function useBreadcrumb() {
-    const { data, isLoading } = useProductListingPageProvider();
-    return { breadCrumb: data?.breadCrumb, isLoading };
-}
-
-function ConnectedBreadcrumb() {
-    const { breadCrumb } = useBreadcrumb();
-    if (!breadCrumb)
+function Breadcrumb({ links }) {
+    const { lg } = useBreakpoint();
+    if (links.length <= 1)
         return null;
-    return jsx(Breadcrumb, { links: breadCrumb });
+    return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
 }
 
 function TextAlignedArrowIcon(props) {
@@ -333,11 +621,15 @@ function FavoriteButton({ isFavorite, onPress }) {
 
 var styles$y = {"link-button":"link-button-module-6i75g"};
 
-function LinkButton({ children, className, href, isDisabled, onPress, target, }) {
-    if (href) {
-        return (jsx(Link, { className: clsx(styles$y['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, target: target, children: children }));
+function LinkButton({ children, className, href, isDisabled, onPress, route, target, type = href ? 'link' : 'button', }) {
+    if (type === 'link') {
+        return (jsx(RouteLink, { className: clsx(styles$y['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, route: route, target: target, children: children }));
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    }
+    else if (type === 'button') {
+        return (jsx(RouteButton, { className: clsx(styles$y['link-button'], className), href: href, isDisabled: isDisabled, onPress: onPress, route: route, type: "button", children: children }));
     }
-    return (jsx(Button$1, { className: clsx(styles$y['link-button'], className), isDisabled: isDisabled, onPress: onPress, type: "button", children: children }));
+    throw new Error('Invalid type ${type} for LinkButton component');
 }
 
 var styles$x = {"field-error":"field-error-module-FXnIg"};
@@ -402,10 +694,10 @@ function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { styl
         inputRef.current.focus();
         inputRef.current.selectionStart = inputRef.current.value.length || 0;
     }, 500);
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$u.field, styles$u[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$u['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$u.field, styles$u[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$u['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(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(TrashOutlinedIcon, {}) : jsx(MinusFilledIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
+                        onClick: e => e.preventDefault(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(TrashOutlinedIcon, {}) : jsx(MinusFilledIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
                         onClick: e => e.preventDefault(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "increment", children: jsx(PlusFilledIcon, {}) }))] }), jsx(FieldError, {})] }));
@@ -464,7 +756,19 @@ const ensureNumber = (value) => {
 };
 function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
     const [internalQuantity, setInternalQuantity] = useState(quantity);
-    const onDebouncedChange = useDebouncedCallback(onChange, 500);
+    const mounted = useRef(false);
+    const onDebouncedChange = useDebouncedCallback(value => {
+        // Prevent calling the debounced onChange callback after the component is unmounted
+        if (!mounted.current)
+            return;
+        onChange(value);
+    }, 500);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
     useEffect(() => {
         setInternalQuantity(quantity);
     }, [quantity]);
@@ -495,48 +799,45 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
 }
 
 const ConnectedAddToCartButton = ({ productId }) => {
-    const [quantity, setQuantity] = useState(undefined);
-    const [previousQuantity, setPreviousState] = useState(0);
-    const { addToCart, cartLine: _cartLine, isLoaded, isLoading, loadCurrentCart, removeCartLine, updateCartLine, } = useProductCartLine(productId);
-    const [cartLine, setCartLineState] = useState(_cartLine);
-    useEffect(() => {
-        if (isLoading || isLoaded)
-            return;
-        loadCurrentCart();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isLoading || isLoaded]);
-    useEffect(() => {
-        if (cartLine === undefined)
-            setCartLineState(_cartLine);
-        setPreviousState(quantity || 0);
-        if (quantity !== undefined && quantity !== 0)
-            return;
-        setQuantity(_cartLine?.qtyOrdered || 0);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_cartLine]);
-    useEffect(() => {
-        if (quantity === 0)
-            setCartLineState(undefined);
-    }, [quantity]);
+    const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
+    const { data: cartLines, isLoading: isLoadingCartLines } = useFetchCurrentCartLines();
+    const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
+    const { mutate: updateCartLine } = useUpdateCartLineById();
+    const { onCartLineAdded, onCartLineError, onCartLineRemoved, onCartLineUpdated, } = useCartEvents();
+    const cartLine = cartLines?.find(line => line.productId === productId);
+    const quantity = cartLine?.qtyOrdered || 0;
     const handleChange = (quantity) => {
-        setQuantity(quantity);
         if (cartLine) {
             if (quantity === 0) {
-                removeCartLine({ cartLineId: cartLine.id });
+                deleteCartLine(cartLine.id, {
+                    onError: error => onCartLineError?.(error, cartLine),
+                    onSuccess: () => {
+                        onCartLineRemoved?.(cartLine);
+                    },
+                });
             }
             else {
-                updateCartLine({ ...cartLine, qtyOrdered: quantity });
+                updateCartLine({
+                    cartLine: { ...cartLine, qtyOrdered: quantity },
+                    cartLineId: cartLine.id,
+                }, {
+                    onError: error => onCartLineError?.(error, cartLine),
+                    onSuccess: () => {
+                        onCartLineUpdated?.({ ...cartLine, qtyOrdered: quantity });
+                    },
+                });
             }
         }
         else {
-            addToCart({ productId, quantity });
+            addToCart({ productId, qtyOrdered: quantity, unitOfMeasure: '' }, {
+                onError: error => onCartLineError?.(error, cartLine),
+                onSuccess: cartLine => {
+                    onCartLineAdded?.(cartLine);
+                },
+            });
         }
     };
-    return (jsx(AddToCartButton, { isDisabled: quantity === undefined ||
-            !isLoaded ||
-            (isLoading &&
-                ((quantity === 0 && previousQuantity !== 0) ||
-                    (quantity === 1 && previousQuantity === 0))), onChange: handleChange, quantity: quantity || 0 }));
+    return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
 };
 
 var styles$s = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
@@ -544,7 +845,7 @@ var styles$s = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-
 function Tag({ children }) {
     if (!children)
         return null;
-    return (jsxs("div", { className: styles$s.tag, children: [jsx("div", { className: styles$s.body, children: children }), jsx("svg", { className: styles$s.shape, height: "16", viewBox: "0 0 8 16", width: "8", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M.925 0H0v16h5.412l2.463-8.429c.362-1.238-.08-2.576-1.094-3.315L.925 0z", fill: "currentColor", fillRule: "nonzero" }) })] }));
+    return (jsxs("div", { className: styles$s.tag, children: [jsx("div", { className: styles$s.body, children: children }), jsx("svg", { className: styles$s.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({
@@ -606,20 +907,25 @@ var styles$p = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cov
 const breakpointToWidth = {
     lg: 1440,
     md: 1024,
-    sm: 414,
 };
-function Image({ alt, className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, loading = 'eager', sizes: sizesProp, src, srcSet: srcSetProp, title, width, }) {
+function Image({ alt, className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, loading = 'eager', src, srcSet: srcSetProp, title, width, }) {
     const [hasError, setHasError] = useState(false);
     const srcSet = srcSetProp
         ? srcSetProp.map(({ url, width }) => `${url} ${width}w`).join(', ')
         : undefined;
-    const sizes = sizesProp
-        ? Object.entries(sizesProp)
-            .map(([breakpoint, width]) => {
-            const widthValue = breakpointToWidth[breakpoint];
-            return widthValue
-                ? `${breakpoint !== 'sm' ? `(min-width: ${widthValue}px)` : ''} ${width}px`
-                : `${width}px`;
+    const sizesString = srcSetProp
+        ? srcSetProp
+            .map((image, index, array) => {
+            const breakpoint = image.breakpoint;
+            if (breakpoint === 'lg') {
+                return `${image.width}px`;
+            }
+            else {
+                const nextBreakpointWidth = array[index + 1]
+                    ? breakpointToWidth[array[index + 1]?.breakpoint ?? 'sm'] - 1
+                    : null;
+                return `(max-width: ${nextBreakpointWidth}px) ${image.width}px`;
+            }
         })
             .join(', ')
         : undefined;
@@ -628,22 +934,19 @@ function Image({ alt, className, fallbackSrc = 'https://res.cloudinary.com/dkz9e
     };
     return (jsx("img", { alt: alt, className: clsx({
             [styles$p['has-error']]: hasError,
-        }, styles$p.image, styles$p[fit], className), height: height, loading: loading, onError: handleError, sizes: sizes, src: hasError ? fallbackSrc : src, srcSet: srcSet, title: title, width: width }));
+        }, styles$p.image, styles$p[fit], className), height: height, loading: loading, onError: handleError, sizes: sizesString, src: hasError ? fallbackSrc : src, srcSet: srcSet, title: title, width: width }));
 }
 
 var styles$o = {"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, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, onPress, price, sku, tags, title, }) {
-    return (jsxs(Link, { className: styles$o['product-card'], href: href, 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        onClick: onClick, onPress: onPress, children: [jsx("div", { className: styles$o.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$o['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$o.content, children: [jsxs("div", { className: styles$o.top, children: [jsx("div", { className: styles$o.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$o.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$o.bottom, children: [jsx("div", { className: styles$o.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$o['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image, price, sku, tags, title, }) {
+    return (jsxs(RouteLink, { className: styles$o['product-card'], href: href, children: [jsx("div", { className: styles$o.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$o['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$o.content, children: [jsxs("div", { className: styles$o.top, children: [jsx("div", { className: styles$o.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$o.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$o.bottom, children: [jsx("div", { className: styles$o.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$o['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
 var styles$n = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
 
 function CategoryCard({ href, image, isSelected = false, title, }) {
-    return (jsxs(Link, { className: clsx({
+    return (jsxs(RouteLink, { className: clsx({
             [styles$n['is-selected']]: isSelected,
         }, styles$n['category-card']), href: href, children: [jsx("div", { className: styles$n['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("p", { className: styles$n.title, children: title })] }));
 }
@@ -5931,9 +6234,9 @@ function Heading({ children, className, italic, size = 'xxl', tag, uppercase, })
 
 var styles$b = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
 
-function Page({ children, className, title }) {
+function Page({ breadCrumb, children, className, title }) {
     const { lg, xxl } = useBreakpoint();
-    return (jsxs(PageContainer, { className: clsx(styles$b.page, className), children: [jsx("div", { className: styles$b.breadcrumb, children: jsx(ConnectedBreadcrumb, {}) }), title && (jsx(Heading, { italic: true, uppercase: true, className: styles$b.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: title })), children] }));
+    return (jsxs(PageContainer, { className: clsx(styles$b.page, className), children: [jsx("div", { className: styles$b.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && (jsx(Heading, { italic: true, uppercase: true, className: styles$b.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: title })), children] }));
 }
 
 function CloseFilledIcon(props) {
@@ -6028,7 +6331,7 @@ function ChevronRightFilledIcon(props) {
 var styles$8 = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
 
 function Pagination({ currentPage, onChange, totalPages, }) {
-    return (jsxs("div", { className: styles$8.pagination, children: [jsx(IconButton, { color: "secondary", isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(ChevronLeftFilledIcon, {}) }), jsxs("div", { className: styles$8['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, { color: "secondary", isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(ChevronRightFilledIcon, {}) })] }));
+    return (jsxs("div", { className: styles$8.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(ChevronLeftFilledIcon, {}) }), jsxs("div", { className: styles$8['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(ChevronRightFilledIcon, {}) })] }));
 }
 
 function AlgoliaPagination({ onChange }) {
@@ -6177,10 +6480,10 @@ const AlgoliaContext = createContext({
     setOnline: () => { },
     toggleOnline: () => { },
 });
-function AlgoliaProvider({ category, children, languageCode, offlineSearchClient, online: _online = true, routing, searchClient, }) {
+function AlgoliaProvider({ categoryPages, children, languageCode, offlineSearchClient, online: _online = true, routing, searchClient, }) {
     const [online, setOnline] = useState(_online);
     const algoliaIndex = getAlgoliaIndex(environment, languageCode);
-    if (!category) {
+    if (!categoryPages) {
         // TODO: Implement loading page
         return null;
     }
@@ -6191,9 +6494,7 @@ function AlgoliaProvider({ category, children, languageCode, offlineSearchClient
         }, children: jsxs(InstantSearch, { future: {
                 persistHierarchicalRootCount: true,
                 preserveSharedStateOnUnmount: true,
-            }, indexName: algoliaIndex.default, routing: routing || createQueryStringRouting(algoliaIndex), searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category.length
-                        ? `categoryPages: '${category.join(' > ')}'`
-                        : undefined, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
+            }, indexName: algoliaIndex.default, routing: routing || createQueryStringRouting(algoliaIndex), searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: `categoryPages: "${categoryPages}"`, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
 }
 function useAlgolia() {
     return useContext(AlgoliaContext);
@@ -6246,6 +6547,17 @@ function ConnectedProductCart({ productId, ...props }) {
     return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
 }
 
+const ProductListingPageContext = createContext({
+    data: undefined,
+});
+
+function ProductListingPageProvider({ children, data, error, isError, isLoading, }) {
+    return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
+}
+function useProductListingPageProvider() {
+    return useContext(ProductListingPageContext);
+}
+
 function useSubcatagories() {
     const { data, isLoading } = useProductListingPageProvider();
     return { isLoading, subcategories: data?.subcategories };
@@ -6258,52 +6570,6 @@ function ConnectedCategoryCarousel() {
     return jsx(CategoryCarousel, { categories: subcategories });
 }
 
-class ResponseError extends Error {
-    constructor(response) {
-        super(response.statusText);
-        Object.defineProperty(this, "response", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "status", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "statusText", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "type", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "url", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.message = response.statusText;
-        this.name = 'ResponseError';
-        this.response = response;
-        this.status = response.status;
-        this.statusText = response.statusText;
-        this.type = response.type;
-        this.url = response.url;
-    }
-}
-function isResponseError(error) {
-    return error instanceof ResponseError;
-}
-
 const scrollToTop = (scrollOptions) => {
     window.scrollTo({
         behavior: 'smooth',
@@ -6347,48 +6613,6 @@ const ToggleSidebarButton = () => {
     return (jsx(Button, { color: "secondary", icon: jsx(FilterOutlinedIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
-function useFetchProductListingPageData(bffUrl, { languageCode, pageUrl }) {
-    return useQuery({
-        queryFn: async () => {
-            const response = await fetch(`${bffUrl}/api/v1/plp/?pageUrl=${pageUrl}`, {
-                headers: { 'Current-Language-Id': languageCode },
-            });
-            if (!response.ok)
-                throw new ResponseError(response);
-            return (await response.json());
-        },
-        queryKey: [bffUrl, 'product-listing-page-data', pageUrl, languageCode],
-        retry: false,
-        select: (data) => {
-            return {
-                banner: data.banner,
-                breadCrumb: data.breadCrumb.map(breadCrumb => ({
-                    href: breadCrumb.url,
-                    label: breadCrumb.text,
-                })),
-                category: {
-                    href: data.categories.path,
-                    image: {
-                        alt: data.categories.imageAltText,
-                        src: data.categories.smallImagePath,
-                        title: data.categories.shortDescription,
-                    },
-                    title: data.categories.shortDescription,
-                },
-                subcategories: data.categories.subCategories?.map(subcategory => ({
-                    href: subcategory.path,
-                    image: {
-                        alt: subcategory.imageAltText,
-                        src: subcategory.smallImagePath,
-                        title: subcategory.shortDescription,
-                    },
-                    title: subcategory.shortDescription,
-                })),
-            };
-        },
-    });
-}
-
 var styles$6 = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","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({ bffUrl, pageUrl, searchClient, }) {
@@ -6405,8 +6629,8 @@ function ProductListingPage({ bffUrl, pageUrl, searchClient, }) {
         return null;
     }
     const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
-    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { category: category, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient ||
-                createSonicSearchClient(`${bffUrl}${bffUrl.endsWith('/') ? '' : '/'}search`), children: jsx(Page, { className: styles$6['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, {}) }) }) }));
+    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient ||
+                createSonicSearchClient(`${bffUrl}${bffUrl.endsWith('/') ? '' : '/'}search`), children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$6['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, {}) }) }) }));
 }
 function ProductListingPageContent() {
     const { toggle } = useSidebar();
@@ -6414,30 +6638,11 @@ function ProductListingPageContent() {
 }
 function ProductOverview() {
     const { hits: productHits } = useHits();
-    const baseUrl = location.href.split('?')[0];
-    return (jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `${baseUrl}${baseUrl && baseUrl.endsWith('/') ? '' : '/'}${productHit.id}-${productHit.name.replace(/ /g, '-')}`, image: {
+    return (jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `/Product/${productHit.storefrontSlug}`, image: {
                 alt: productHit.name,
                 fit: 'contain',
-                sizes: { lg: 288, md: 204, sm: 122 },
-                src: productHit.images?.find(image => image.quality === 'large')
+                src: productHit.images?.find(image => image.quality === 'medium')
                     ?.url || '',
-                srcSet: [
-                    {
-                        url: productHit.images?.find(image => image.quality === 'small')
-                            ?.url || '',
-                        width: 122,
-                    },
-                    {
-                        url: productHit.images?.find(image => image.quality === 'medium')
-                            ?.url || '',
-                        width: 204,
-                    },
-                    {
-                        url: productHit.images?.find(image => image.quality === 'large')
-                            ?.url || '',
-                        width: 288,
-                    },
-                ],
                 title: productHit.name,
             }, price: {
                 isVatIncluded: productHit.isVatIncluded,
@@ -6491,7 +6696,7 @@ var styles$4 = {"sidebar-container":"sidebar-provider-module-rjeCL","transition"
 
 function SidebarDetectBreakpoint() {
     const xxl = useIsBreakpoint('xxl');
-    const lastBreakpoint = useRef(xxl);
+    const lastBreakpoint = useRef(null);
     const { close, isOpen, open } = useSidebar();
     const [transition, setTransition] = useState(false);
     useScrollLock(isOpen && !xxl);
@@ -6977,26 +7182,8 @@ function ProductResultsSection() {
                     }), addToCartButton: jsx(AddToCartButton, { quantity: 0 }), image: {
                         alt: item.name,
                         fit: 'contain',
-                        sizes: { lg: 288, md: 204, sm: 122 },
-                        src: item.images?.find(image => image.quality === 'large')?.url ||
+                        src: item.images?.find(image => image.quality === 'medium')?.url ||
                             '',
-                        srcSet: [
-                            {
-                                url: item.images?.find(image => image.quality === 'small')
-                                    ?.url || '',
-                                width: 122,
-                            },
-                            {
-                                url: item.images?.find(image => image.quality === 'medium')
-                                    ?.url || '',
-                                width: 204,
-                            },
-                            {
-                                url: item.images?.find(image => image.quality === 'large')
-                                    ?.url || '',
-                                width: 288,
-                            },
-                        ],
                         title: item.name,
                     }, price: {
                         isVatIncluded: item.isVatIncluded,
@@ -7046,4 +7233,4 @@ function GlobalSearch({ children, searchClient }) {
     return (jsx(GlobalSearchContainer, { children: jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs("div", { className: styles['search-wrapper'], children: [children, jsx("div", { className: styles['search-root'], children: jsx(SearchRoot, {}) })] }) }) }));
 }
 
-export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FormattedMessage, GlobalSearch, GlobalSearchContainer, GlobalSearchDisclosureContext, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, MultiSelect, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextAlignedArrowIcon, TextField, breakpoints$1 as breakpoints, createSonicSearchClient, useAlgolia, useAlgoliaSearch, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useProductCartLine, useScrollLock };
+export { Accordion, AddProductToCurrentCartError, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, AvailabilityMessageType, BadgeImagePlacementValues, BadgeStyleValues, BadgeTypeValues, Breadcrumb, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, CurrencyPositioningType, DehashedOutlinedIcon, DeleteCartLineByIdError, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FetchCurrentCartLinesError, FetchProductListingPageDataError, FormattedMessage, GlobalSearch, GlobalSearchContainer, GlobalSearchDisclosureContext, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, MultiSelect, NumberField, Page, PageContainer, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, RouteButton, RouteLink, RouteProvider, Select, ShowAll, Sidebar, SidebarDetectBreakpoint, SidebarProvider, TextAlignedArrowIcon, TextField, UpdateCartLineByIdError, VariantDisplayTypeValues, breakpoints$1 as breakpoints, createSonicSearchClient, useAddProductToCurrentCart, useAlgolia, useAlgoliaSearch, useBreakpoint, useCartEvents, useDebouncedCallback, useDeleteCartLineById, useDisclosure, useFavorite, useFetchCurrentCartLines, useFetchProductListingPageData, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useNavigate, useScrollLock, useUpdateCartLineById };