@sonic-equipment/ui 0.0.33 → 0.0.34

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, createContext, useContext, forwardRef, useLayoutEffect, Children, cloneElement, createElement as createElement$1, useMemo, Fragment as Fragment$1 } from 'react';
+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 clsx from 'clsx';
@@ -46,28 +46,36 @@ const useBreakpoint = () => {
         }, defaultBreakpointReturnType);
     };
     const [device, setDevice] = useState(getBreakpoints());
+    const handleResize = useCallback(() => {
+        const breakpoints = getBreakpoints();
+        setDevice(previousBreakpoints => {
+            if (previousBreakpoints.current === breakpoints.current)
+                return previousBreakpoints;
+            return breakpoints;
+        });
+    }, []);
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const handleResize = () => setDevice(getBreakpoints());
         handleResize();
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
-    }, []);
+    }, [handleResize]);
     return device;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useDebouncedCallback(func, delay) {
     const timeoutId = useRef();
-    if (typeof window === 'undefined')
-        return func;
-    return function debounced(...args) {
+    const debouncedCallback = useCallback(function debounced(...args) {
+        if (typeof window === 'undefined')
+            return func(...args);
         clearTimeout(timeoutId.current);
         timeoutId.current = setTimeout(() => {
             func(...args);
         }, delay);
-    };
+    }, [delay, func]);
+    return debouncedCallback;
 }
 
 const useDisclosure = (initialState = false) => {
@@ -541,9 +549,11 @@ function Tag({ children }) {
 
 const IntlContext = createContext({
     formatMessage: text => text,
+    languageCode: 'en-GB',
+    updateLanguageCode: () => { },
 });
 
-const useFormattedMessage = () => {
+function useFormattedMessage() {
     const { formatMessage } = useContext(IntlContext);
     return (id, { fallbackValue, optional, replacementValues } = {}) => {
         const message = formatMessage(id, 
@@ -566,7 +576,7 @@ const useFormattedMessage = () => {
             console.warn(`Missing translation with id: ${id}`);
         return message || fallbackValue || id;
     };
-};
+}
 
 const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
 
@@ -627,7 +637,7 @@ function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: Favorit
     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, id: tag }) }, 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 })] })] })] }));
+        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 })] })] })] }));
 }
 
 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"};
@@ -635,7 +645,7 @@ var styles$n = {"category-card":"category-card-module-4NUjH","title":"category-c
 function CategoryCard({ href, image, isSelected = false, title, }) {
     return (jsxs(Link, { 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 }) }), jsx("p", { className: styles$n.title, children: title })] }));
+        }, 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 })] }));
 }
 
 /**
@@ -5791,9 +5801,9 @@ function CheckmarkFilledIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M10.864 17c-.2 0-.378-.045-.534-.135a1.588 1.588 0 0 1-.446-.407L6.278 12.22c-.185-.233-.278-.474-.278-.722 0-.264.087-.488.262-.672a.86.86 0 0 1 .651-.276c.156 0 .299.033.429.101s.258.188.384.361l3.094 3.71 5.42-8.19c.216-.354.483-.531.802-.531.245 0 .466.08.663.243A.785.785 0 0 1 18 6.88c0 .12-.028.243-.084.367a2.53 2.53 0 0 1-.194.356l-5.934 8.844c-.23.369-.538.553-.924.553z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$h = {"select":"select-module-ui-Wc","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$h = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","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, selectedOption, showLabel = true, }) {
+function Select({ isDisabled = false, label, onChange, options, selectedOption, showLabel = true, size = 'md', }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {
@@ -5808,7 +5818,7 @@ function Select({ isDisabled = false, label, onChange, options, selectedOption,
         window.addEventListener('resize', updateWidth);
         return () => window.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: styles$h.select, isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$h.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$h.chevron })] }), jsx(Popover, { className: styles$h.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$h.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$h.header, children: label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$h.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$h.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$h.select, styles$h[size]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$h.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$h.chevron })] }), jsx(Popover, { className: styles$h.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$h.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$h.header, children: label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$h.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$h.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
 }
 
 var styles$g = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
@@ -5882,8 +5892,9 @@ function HashedOutlinedIcon(props) {
     return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 7.666C9.54 7.666 7.538 9.61 7.538 12c0 2.39 2.001 4.334 4.462 4.334 2.46 0 4.462-1.944 4.462-4.334 0-2.39-2.001-4.334-4.462-4.334M12 5c5.514 0 10 3.14 10 7s-4.486 7-10 7-10-3.14-10-7 4.486-7 10-7zm0 1.292c-2.39 0-4.624.642-6.29 1.809C4.175 9.175 3.33 10.56 3.33 12s.845 2.825 2.38 3.9c1.666 1.166 3.9 1.808 6.29 1.808s4.624-.642 6.29-1.809c1.535-1.074 2.38-2.459 2.38-3.9 0-1.44-.845-2.824-2.38-3.898-1.666-1.167-3.9-1.81-6.29-1.81zm0 3.958c.994 0 1.802.785 1.802 1.75s-.808 1.75-1.802 1.75-1.802-.785-1.802-1.75.808-1.75 1.802-1.75z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-function IntlProvider({ children, formatMessage }) {
-    return (jsx(IntlContext.Provider, { value: { formatMessage }, children: children }));
+function IntlProvider({ children, formatMessage, languageCode: _languageCode, }) {
+    const [languageCode, updateLanguageCode] = useState(_languageCode);
+    return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
 }
 
 var styles$e = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
@@ -5892,10 +5903,10 @@ function ProductOverviewGrid({ children }) {
     return (jsx("div", { className: styles$e['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$e['grid-item'], children: child }, index))) }));
 }
 
-var styles$d = {"page-container":"page-layout-module-sSsgZ","page-layout":"page-layout-module-osQ2n"};
+var styles$d = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
 
-function PageLayout({ children, className, }) {
-    return (jsx("div", { className: styles$d['page-container'], children: jsx("div", { className: clsx(styles$d['page-layout'], className), children: children }) }));
+function PageContainer({ children, className, }) {
+    return (jsx("div", { className: styles$d['page-container'], children: jsx("div", { className: clsx(styles$d['inner-page-container'], className), children: children }) }));
 }
 
 var styles$c = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","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"};
@@ -5922,7 +5933,7 @@ var styles$b = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","tit
 
 function Page({ children, className, title }) {
     const { lg, xxl } = useBreakpoint();
-    return (jsxs(PageLayout, { 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(ConnectedBreadcrumb, {}) }), 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) {
@@ -5970,7 +5981,7 @@ function AccordionItem({ _pseudo = 'none', children, className, id, initialIsOpe
         }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$l.button, styles$l[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$l.icon, children: size === 'lg' ? jsx(ChevronDownBold, {}) : jsx(ChevronDownSlim, {}) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$l.panel, id: panelId, role: "region", children: jsx("div", { className: styles$l.content, children: children }) })] }));
 }
 
-var styles$9 = {"filter-panel":"filter-panel-module-8oxI1","scroll-container":"filter-panel-module-w0hhZ","accordion-title":"filter-panel-module-bRChA","categories-section":"filter-panel-module-AHlq3","category":"filter-panel-module-TMp3J","count":"filter-panel-module-ykW1a","categories":"filter-panel-module-xvhRz","categories-header":"filter-panel-module-hJVR0","button":"filter-panel-module-hMmIb"};
+var styles$9 = {"filter-panel":"filter-panel-module-8oxI1","scroll-container":"filter-panel-module-w0hhZ","categories-section":"filter-panel-module-AHlq3","category":"filter-panel-module-TMp3J","count":"filter-panel-module-ykW1a","categories":"filter-panel-module-xvhRz","categories-header":"filter-panel-module-hJVR0","button":"filter-panel-module-hMmIb"};
 
 function AlgoliaFilterSection({ attribute, children, initialIsOpen = true, }) {
     const { items, refine } = useRefinementList({
@@ -5982,7 +5993,7 @@ function AlgoliaFilterSection({ attribute, children, initialIsOpen = true, }) {
     if (items.length < 2 && items.filter(item => item.isRefined).length === 0) {
         return null;
     }
-    return (jsx(Accordion, { children: jsx(AccordionItem, { id: attribute, initialIsOpen: initialIsOpen, title: jsx("span", { className: styles$9['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: attribute, id: `facets.${attribute}` }) }), children: children({ items, refine }) }) }));
+    return (jsx(Accordion, { children: jsx(AccordionItem, { id: attribute, initialIsOpen: initialIsOpen, title: jsx("span", { className: styles$9['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: attribute, id: `facet.${attribute.toLowerCase()}` }) }), children: children({ items, refine }) }) }));
 }
 
 function AlgoliaMultiSelectFilterSection({ attribute, }) {
@@ -6029,126 +6040,149 @@ function AlgoliaPagination({ onChange }) {
     return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => handlePageChange(pageNumber), totalPages: nbPages }));
 }
 
-const environmentUrl = typeof process !== 'undefined'
-    ? process.env.ISC_API_URL
-    : typeof window !== 'undefined'
-        ? window.location.hostname
-        : undefined;
-const environment = environmentUrl?.match(/local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com/i)
-    ? 'sandbox'
-    : environmentUrl?.match(/sonic-equipment.com/i)
-        ? 'production'
-        : undefined;
+const sandboxUrls = /local|insitesandbox.com|azurestaticapps|ui.sonic-equipment.com/i;
+const productionUrls = /sonic-equipment.com/i;
+let environmentUrl;
+if (typeof process !== 'undefined' && process.env.ISC_API_URL) {
+    environmentUrl = process.env.ISC_API_URL;
+}
+else if (typeof window !== 'undefined') {
+    environmentUrl = window.location.hostname;
+}
+else {
+    throw new Error('Unable to detect environment url');
+}
+let environment;
+if (environmentUrl.match(sandboxUrls)) {
+    environment = 'sandbox';
+}
+else if (environmentUrl.match(productionUrls)) {
+    environment = 'production';
+}
+else {
+    throw new Error('Environment not detected for url ${environmentUrl}');
+}
 
 const algoliaIndexesPerEnvironment = {
     production: {
-        default: 'prod_sonic_products_en',
+        default: 'prod_sonic_products_<languageCode>',
         sort: [
             {
-                index: 'prod_sonic_products_en',
+                index: 'prod_sonic_products_<languageCode>',
                 name: 'relevance',
             },
             {
-                index: 'prod_sonic_products_en_is-new_desc',
+                index: 'prod_sonic_products_<languageCode>_is-new_desc',
                 name: 'newest',
             },
             {
-                index: 'prod_sonic_products_en_price_asc',
+                index: 'prod_sonic_products_<languageCode>_price_asc',
                 name: 'price_asc',
             },
             {
-                index: 'prod_sonic_products_en_price_desc',
+                index: 'prod_sonic_products_<languageCode>_price_desc',
                 name: 'price_desc',
             },
         ],
     },
     sandbox: {
-        default: 'dev_sonic_products_en',
+        default: 'dev_sonic_products_<languageCode>',
         sort: [
             {
-                index: 'dev_sonic_products_en',
+                index: 'dev_sonic_products_<languageCode>',
                 name: 'relevance',
             },
             {
-                index: 'dev_sonic_products_en_is-new_desc',
+                index: 'dev_sonic_products_<languageCode>_is-new_desc',
                 name: 'newest',
             },
             {
-                index: 'dev_sonic_products_en_price_asc',
+                index: 'dev_sonic_products_<languageCode>_price_asc',
                 name: 'price_asc',
             },
             {
-                index: 'dev_sonic_products_en_price_desc',
+                index: 'dev_sonic_products_<languageCode>_price_desc',
                 name: 'price_desc',
             },
         ],
     },
 };
-const currentIndexes = environment
-    ? algoliaIndexesPerEnvironment[environment]
-    : undefined;
-
-const queryStringRouting = {
-    router: history({
-        cleanUrlOnDispose: true,
-        createURL({ location, qsModule: qs, routeState }) {
-            const indexNames = Object.keys(routeState);
-            const indexName = indexNames[0];
-            if (!indexName)
-                return location.href;
-            if (indexNames.length !== 1)
-                throw new Error('Only one index is supported');
-            const state = routeState[indexName];
-            if (!state)
-                throw new Error(`Index ${indexName} not found in routeState`);
-            const queryString = qs.parse(location.search.slice(1), {
-                allowDots: true,
-                duplicates: 'combine',
-            });
-            queryString.filters = state.refinementList;
-            queryString.sortBy = state.sortBy;
-            const newQueryString = qs.stringify(queryString, {
-                addQueryPrefix: true,
-                allowDots: true,
-                arrayFormat: 'repeat',
-            });
-            return `${location.href.split('?')[0]}${newQueryString}`;
-        },
-        parseURL({ location, qsModule: qs }) {
-            if (!currentIndexes)
-                throw new Error('Environment not detected');
-            const queryString = qs.parse(location.search.slice(1), {
-                allowDots: true,
-                duplicates: 'combine',
-            });
-            const refinementList = Object.keys(queryString.filters || {}).reduce((refinementList, filter) => {
-                refinementList[filter] = [].concat(queryString.filters?.[filter]);
-                return refinementList;
-            }, {});
-            const uiState = {
-                [currentIndexes.default]: {
-                    refinementList,
-                    sortBy: queryString.sortBy?.toString(),
-                },
-            };
-            return uiState;
-        },
-    }),
-    stateMapping: simple(),
+const getAlgoliaIndex = (environment, languageCode) => {
+    const environmentIndex = algoliaIndexesPerEnvironment[environment];
+    const shortLanguageCode = languageCode.split('-')[0];
+    if (!shortLanguageCode)
+        throw new Error('Language code not detected');
+    if (!environmentIndex)
+        throw new Error('Environment not detected');
+    return {
+        default: environmentIndex.default.replace(/<languageCode>/, shortLanguageCode),
+        sort: environmentIndex.sort.map(({ index, name }) => ({
+            index: index.replace(/<languageCode>/, shortLanguageCode),
+            name,
+        })),
+    };
 };
 
+function createQueryStringRouting(algoliaIndex) {
+    return {
+        router: history({
+            cleanUrlOnDispose: true,
+            createURL({ location, qsModule: qs, routeState }) {
+                const indexNames = Object.keys(routeState);
+                const indexName = indexNames[0];
+                if (!indexName)
+                    return location.href;
+                if (indexNames.length !== 1)
+                    throw new Error('Only one index is supported');
+                const state = routeState[indexName];
+                if (!state)
+                    throw new Error(`Index ${indexName} not found in routeState`);
+                const queryString = qs.parse(location.search.slice(1), {
+                    allowDots: true,
+                    duplicates: 'combine',
+                });
+                queryString.filters = state.refinementList;
+                queryString.sortBy = state.sortBy;
+                const newQueryString = qs.stringify(queryString, {
+                    addQueryPrefix: true,
+                    allowDots: true,
+                    arrayFormat: 'repeat',
+                });
+                return `${location.href.split('?')[0]}${newQueryString}`;
+            },
+            parseURL({ location, qsModule: qs }) {
+                const queryString = qs.parse(location.search.slice(1), {
+                    allowDots: true,
+                    duplicates: 'combine',
+                });
+                const refinementList = Object.keys(queryString.filters || {}).reduce((refinementList, filter) => {
+                    refinementList[filter] = [].concat(queryString.filters?.[filter]);
+                    return refinementList;
+                }, {});
+                const uiState = {
+                    [algoliaIndex.default]: {
+                        refinementList,
+                        sortBy: queryString.sortBy?.toString(),
+                    },
+                };
+                return uiState;
+            },
+        }),
+        stateMapping: simple(),
+    };
+}
+
 const AlgoliaContext = createContext({
     online: false,
     setOnline: () => { },
     toggleOnline: () => { },
 });
-function AlgoliaProvider({ category, children, offlineSearchClient, online: _online = true, routing = queryStringRouting, searchClient, }) {
+function AlgoliaProvider({ category, children, languageCode, offlineSearchClient, online: _online = true, routing, searchClient, }) {
     const [online, setOnline] = useState(_online);
-    if (!currentIndexes)
-        throw new Error('Environment not detected');
+    const algoliaIndex = getAlgoliaIndex(environment, languageCode);
     if (!category) {
         // TODO: Implement loading page
-        return jsx("h1", { children: "Loading..." });
+        return null;
     }
     return (jsx(AlgoliaContext.Provider, { value: {
             online,
@@ -6157,9 +6191,9 @@ function AlgoliaProvider({ category, children, offlineSearchClient, online: _onl
         }, children: jsxs(InstantSearch, { future: {
                 persistHierarchicalRootCount: true,
                 preserveSharedStateOnUnmount: true,
-            }, indexName: currentIndexes.default, routing: routing, searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category.length
+            }, indexName: algoliaIndex.default, routing: routing || createQueryStringRouting(algoliaIndex), searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category.length
                         ? `categoryPages: '${category.join(' > ')}'`
-                        : undefined, hitsPerPage: 9, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
+                        : undefined, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
 }
 function useAlgolia() {
     return useContext(AlgoliaContext);
@@ -6184,12 +6218,17 @@ const createSonicSearchClient = (url) => ({
     },
 });
 
+function useLanguageCode() {
+    const { languageCode } = useContext(IntlContext);
+    return languageCode;
+}
+
 function AlgoliaSortBy() {
-    if (!currentIndexes)
-        throw new Error('Environment not detected');
+    const languageCode = useLanguageCode();
+    const algoliaIndex = getAlgoliaIndex(environment, languageCode);
     const t = useFormattedMessage();
     const { currentRefinement, options: algoliaOptions, refine, } = useSortBy({
-        items: currentIndexes.sort.map(({ index, name }) => ({
+        items: algoliaIndex.sort.map(({ index, name }) => ({
             label: t(`sort.${name}`),
             value: index,
         })),
@@ -6200,16 +6239,11 @@ function AlgoliaSortBy() {
         acc[option.value] = option.label;
         return acc;
     }, {});
-    return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false }));
-}
-
-function ConnectedFavoriteButton({ productId }) {
-    const { isFavorite, toggle } = useFavorite(productId);
-    return jsx(FavoriteButton, { isFavorite: isFavorite, onPress: toggle });
+    return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
 }
 
 function ConnectedProductCart({ productId, ...props }) {
-    return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }), favoriteButton: jsx(ConnectedFavoriteButton, { productId: productId }) }));
+    return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
 }
 
 function useSubcatagories() {
@@ -6278,7 +6312,9 @@ const scrollToTop = (scrollOptions) => {
 };
 
 const SidebarContext = createContext({
+    close: () => { },
     isOpen: false,
+    open: () => { },
     toggle: () => { },
     transition: false,
 });
@@ -6311,15 +6347,17 @@ 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, pageUrl) {
+function useFetchProductListingPageData(bffUrl, { languageCode, pageUrl }) {
     return useQuery({
         queryFn: async () => {
-            const response = await fetch(`${bffUrl}/api/v1/plp/?pageUrl=${pageUrl}`);
+            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],
+        queryKey: [bffUrl, 'product-listing-page-data', pageUrl, languageCode],
         retry: false,
         select: (data) => {
             return {
@@ -6351,11 +6389,11 @@ function useFetchProductListingPageData(bffUrl, pageUrl) {
     });
 }
 
-var styles$6 = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","action-bar":"product-listing-page-module-XxGrr","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$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, }) {
-    const { toggle } = useSidebar();
-    const { data, error, isError, isFetching } = useFetchProductListingPageData(bffUrl, pageUrl);
+    const languageCode = useLanguageCode();
+    const { data, error, isError, isFetching } = useFetchProductListingPageData(bffUrl, { languageCode, pageUrl });
     if (isError) {
         if (!isResponseError(error))
             throw error;
@@ -6364,11 +6402,15 @@ function ProductListingPage({ bffUrl, pageUrl, searchClient, }) {
     }
     if (!data || isFetching) {
         // TODO: Implement loading page
-        return jsx("h1", { children: "Loading..." });
+        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, offlineSearchClient: offlineSearchClient, searchClient: searchClient ||
-                createSonicSearchClient(`${bffUrl}${bffUrl.endsWith('/') ? '' : '/'}search`), children: jsxs(Page, { className: styles$6['product-listing'], title: category.slice().pop(), children: [jsx("section", { className: styles$6.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$6['action-bar'], children: [jsx("div", { children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$6.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$6.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$6['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$6['product-grid'], children: [jsx(ProductOverview, {}), jsx("div", { className: styles$6.pagination, children: jsx(AlgoliaPagination, { onChange: () => scrollToTop() }) })] })] }) })] }) }) }));
+    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, {}) }) }) }));
+}
+function ProductListingPageContent() {
+    const { toggle } = useSidebar();
+    return (jsxs(Fragment, { children: [jsx("section", { className: styles$6.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$6['action-bar'], children: [jsx("div", { className: styles$6['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$6.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$6.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$6['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$6['product-grid'], children: [jsx(ProductOverview, {}), jsx("div", { className: styles$6.pagination, children: jsx(AlgoliaPagination, { onChange: () => scrollToTop() }) })] })] }) })] }));
 }
 function ProductOverview() {
     const { hits: productHits } = useHits();
@@ -6431,14 +6473,37 @@ function OverlayBackground({ isOpen, onClick }) {
         }), onClick: onClick }), document.body);
 }
 
+function useIsBreakpoint(breakpoint) {
+    const getWindowWidth = () => typeof window !== 'undefined' ? window.innerWidth : 0;
+    const checkIsMatch = useCallback(() => getWindowWidth() >= breakpoints$1[breakpoint], [breakpoint]);
+    const [isMatch, setIsMatch] = useState(checkIsMatch());
+    const handleResize = useCallback(() => setIsMatch(checkIsMatch()), [checkIsMatch]);
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    return isMatch;
+}
+
 var styles$4 = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR","sidebar-background":"sidebar-provider-module-VRgS9","is-open":"sidebar-provider-module-lxq2-"};
 
-function SidebarProvider({ children }) {
-    const { xxl } = useBreakpoint();
+function SidebarDetectBreakpoint() {
+    const xxl = useIsBreakpoint('xxl');
     const lastBreakpoint = useRef(xxl);
-    const { close, isOpen, open, toggle } = useDisclosure(xxl);
+    const { close, isOpen, open } = useSidebar();
     const [transition, setTransition] = useState(false);
     useScrollLock(isOpen && !xxl);
+    useEffect(() => {
+        if (!transition)
+            return;
+        setTimeout(() => setTransition(false), 300);
+    }, [transition]);
+    const closeTransitions = () => {
+        setTransition(true);
+        close();
+    };
     useEffect(() => {
         if (lastBreakpoint.current === xxl)
             return;
@@ -6450,22 +6515,20 @@ function SidebarProvider({ children }) {
         }
         lastBreakpoint.current = xxl;
     }, [xxl, close, open]);
-    useEffect(() => {
-        if (!transition)
-            return;
-        setTimeout(() => setTransition(false), 300);
-    }, [transition]);
+    if (xxl)
+        return null;
+    return jsx(OverlayBackground, { isOpen: isOpen, onClick: closeTransitions });
+}
+function SidebarProvider({ children }) {
+    const { close, isOpen, open, toggle } = useDisclosure(false);
+    const [transition, setTransition] = useState(isOpen);
     const toggleTransition = () => {
         setTransition(true);
         toggle();
     };
-    const closeTransitions = () => {
-        setTransition(true);
-        close();
-    };
-    return (jsx(SidebarContext.Provider, { value: { isOpen, toggle: toggleTransition, transition }, children: jsxs("div", { className: clsx(styles$4['sidebar-container'], {
+    return (jsx(SidebarContext.Provider, { value: { close, isOpen, open, toggle: toggleTransition, transition }, children: jsxs("div", { className: clsx(styles$4['sidebar-container'], {
                 [styles$4['transition']]: transition,
-            }), children: [!xxl && (jsx(OverlayBackground, { isOpen: isOpen, onClick: closeTransitions })), children] }) }));
+            }), children: [jsx(SidebarDetectBreakpoint, {}), children] }) }));
 }
 
 function AlgoliaCategories() {
@@ -6983,4 +7046,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, PageLayout, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useAlgoliaSearch, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalSearchDisclosure, useGlobalState, useProductCartLine, useScrollLock };
+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 };

package/dist/intl/intl-context.d.ts

@@ -1,6 +1,8 @@
 import { FormatMessageFunction } from './types';
 interface IntlContextType {
     formatMessage: FormatMessageFunction;
+    languageCode: string;
+    updateLanguageCode: (languageCode: string) => void;
 }
 export declare const IntlContext: React.Context<IntlContextType>;
 export {};

package/dist/intl/intl-provider.d.ts

@@ -2,6 +2,7 @@ import { FormatMessageFunction } from './types';
 interface IntlProviderProps {
     children: React.ReactNode;
     formatMessage: FormatMessageFunction;
+    languageCode: string;
 }
-export declare function IntlProvider({ children, formatMessage }: IntlProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function IntlProvider({ children, formatMessage, languageCode: _languageCode, }: IntlProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = 'Chosen filters' | 'Clear' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort by' | 'Submit' | 'articles' | 'article' | 'of' | 'sort.relevance' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc';
+export type TranslationId = 'Chosen filters' | 'Clear' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort by' | 'Submit' | 'articles' | 'article' | 'of' | 'sort.relevance' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'tag.new' | 'facet.weight' | 'facet.height';

package/dist/intl/use-format-message.d.ts

@@ -4,4 +4,4 @@ export type FormattedMessageFunction = (id: TranslationId, options?: {
     optional?: boolean;
     replacementValues?: Record<string, string>;
 }) => string;
-export declare const useFormattedMessage: () => FormattedMessageFunction;
+export declare function useFormattedMessage(): FormattedMessageFunction;

package/dist/intl/use-language-code.d.ts

@@ -0,0 +1,2 @@
+export declare function useLanguageCode(): string;
+export declare function useUpdateLanguageCode(): (languageCode: string) => void;

package/dist/pages/{page-layout/page-layout.d.ts → page-container/page-container.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare function PageLayout({ children, className, }: {
+export declare function PageContainer({ children, className, }: {
     children: ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;