@sonic-equipment/ui 163.0.0 → 165.0.0

package/dist/cards/product-card/product-card.js

@@ -4,12 +4,16 @@ import { Tag } from '../../badges/tag/tag.js';
 import { Price } from '../../display/price/price.js';
 import { ProductSku } from '../../display/product-sku/product-sku.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
+import { logger } from '../../logging/logger.js';
 import { Image } from '../../media/image/image.js';
 import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './product-card.module.css.js';
 
 function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
-    return (jsx("div", { className: styles['product-card-container'], children: jsxs("article", { "aria-labelledby": `title-${id}`, className: styles['product-card'], "data-product-id": sku, id: id, children: [jsx(RouteLink, { className: styles.title, href: href, id: `title-${id}`, onClick: onClick, children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" }), jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton })] }) }));
+    if (!price.currencyCode) {
+        logger.error(`Product '${sku}' does not have a currency code`);
+    }
+    return (jsx("div", { className: styles['product-card-container'], children: jsxs("article", { "aria-labelledby": `title-${id}`, className: styles['product-card'], "data-product-id": sku, id: id, children: [jsx(RouteLink, { className: styles.title, href: href, id: `title-${id}`, onClick: onClick, children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), price.currencyCode && (jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" })), jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton })] }) }));
 }
 
 export { ProductCard };

package/dist/collapsables/cascading-component/cascading-component.d.ts

@@ -5,9 +5,13 @@ interface CascadingComponentProps<TElement extends HTMLElement = HTMLElement, Re
     children: React.ReactNode;
     isVisible?: boolean;
     nodeRef: React.Ref<RefElement>;
+    onEnter?: VoidFunction;
+    onEntered?: VoidFunction;
+    onExit?: VoidFunction;
+    onExited?: VoidFunction;
     onUnmounted?: () => void;
     timeout?: number;
 }
-export declare function CascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible, nodeRef, onClose, onUnmounted, timeout, }: CascadingComponentProps<TElement, RefElement> & CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;
-export declare function InternalCascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible: _isVisible, nodeRef, onUnmounted, timeout: timeout, }: CascadingComponentProps<TElement, RefElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible, nodeRef, onClose, onEnter, onEntered, onExit, onExited, onUnmounted, timeout, }: CascadingComponentProps<TElement, RefElement> & CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalCascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible: _isVisible, nodeRef, onEnter, onEntered, onExit, onExited, onUnmounted, timeout: timeout, }: CascadingComponentProps<TElement, RefElement>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/collapsables/cascading-component/cascading-component.js

@@ -6,14 +6,14 @@ import { createAddEndListener } from '../unmounter/utils.js';
 import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
 import { useCascadingComponentContainer } from './use-cascading-component-container.js';
 
-function CascadingComponent({ children, isVisible = false, nodeRef, onClose, onUnmounted, timeout, }) {
+function CascadingComponent({ children, isVisible = false, nodeRef, onClose, onEnter, onEntered, onExit, onExited, onUnmounted, timeout, }) {
     const context = useCascadingComponentContainer();
     if (!context) {
-        return (jsx(Fragment, { children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onUnmounted: onUnmounted, timeout: timeout, children: children }) }) }));
+        return (jsx(Fragment, { children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, onUnmounted: onUnmounted, timeout: timeout, children: children }) }) }));
     }
-    return (jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onUnmounted: onUnmounted, timeout: timeout || context.timeout, children: children }));
+    return (jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, onUnmounted: onUnmounted, timeout: timeout || context.timeout, children: children }));
 }
-function InternalCascadingComponent({ children, isVisible: _isVisible = false, nodeRef, onUnmounted, timeout: timeout, }) {
+function InternalCascadingComponent({ children, isVisible: _isVisible = false, nodeRef, onEnter, onEntered, onExit, onExited, onUnmounted, timeout: timeout, }) {
     const [isVisible, setIsVisible] = useState(_isVisible);
     const [unmount, setUnmount] = useState(false);
     useEffect(() => {
@@ -36,7 +36,7 @@ function InternalCascadingComponent({ children, isVisible: _isVisible = false, n
     const onClose = useCallback(() => {
         setUnmount(true);
     }, []);
-    return (jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, ...(timeout === undefined
+    return (jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, ...(timeout === undefined
             ? { addEndListener: createAddEndListener(nodeRef) }
             : { timeout }), in: isVisible, nodeRef: nodeRef, children: jsx(Unmounter, { onUnmounted: onUnmounted, onUnmountReady: onUnmountReady, unmount: unmount, children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }) }) }));
 }

package/dist/collapsables/unmounter/unmounter.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
 
 const UnmounterContext = createContext(null);
 function useUnmount() {
@@ -12,7 +12,7 @@ function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _
     const [childCount, updateChildCount] = useState(0);
     const unmount = Boolean(_unmount || parentContext?.unmount);
     useEffect(() => {
-        return () => onUnmounted?.();
+        return onUnmounted;
     }, [onUnmounted]);
     useEffect(() => {
         if (!parentContext)

package/dist/country-select/country-select.js

@@ -20,7 +20,7 @@ function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'dat
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(SelectField, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isLoading: isLoading, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(SelectField, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isLoading: isLoading, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, placeholder: t('Select a country'), selectedOption: selectedCountry?.id, showLabel: showLabel, variant: "solid" }));
 }
 
 export { CountrySelect };

package/dist/country-selector/connected-country-selector.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useMemo, useEffect } from 'react';
+import { logger } from '../logging/logger.js';
 import { useDisclosure } from '../shared/hooks/use-disclosure.js';
 import { CountrySelectorDialog } from './country-selector-dialog/country-selector-dialog.js';
 import { CountrySelectorTrigger } from './country-selector-trigger/country-selector-trigger.js';
@@ -8,18 +9,35 @@ import { useCountriesLanguages } from './use-countries-languages.js';
 
 function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry = true, }) {
     const { close, isOpen, open, setIsOpen } = useDisclosure(false);
-    const { countries, defaultCountry, defaultLanguage, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
+    const { countries, defaultCountry, defaultLanguage, error, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
         defaultCountryCode,
         defaultLanguageCode,
     });
     const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
     const isDismissable = isCountryLanguageSelected;
     useEffect(() => {
+        if (!isFetching) {
+            if (selectedCountry === undefined && selectedLanguage === undefined) {
+                logger.info('Opening country selector dialog because no country or language is selected');
+            }
+            else if (selectedCountry === undefined) {
+                logger.info('Opening country selector dialog because no country is selected');
+            }
+            else if (selectedLanguage === undefined) {
+                logger.info('Opening country selector dialog because no language is selected');
+            }
+        }
+        if (isOpen)
+            return;
         setIsOpen(!isFetching && !isCountryLanguageSelected);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFetching, isCountryLanguageSelected]);
+    }, [isFetching, isCountryLanguageSelected, isOpen]);
     if (isFetching)
         return null;
+    if (error !== undefined) {
+        logger.error('Error fetching countries and languages:', error);
+        return null;
+    }
     return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
                     if (!isDismissable)
                         return;

package/dist/country-selector/country-selector-dialog/country-selector-dialog.js

@@ -32,7 +32,7 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
             onSubmit({ country: currentCountry, language: currentLanguage });
             e.preventDefault();
             e.stopPropagation();
-        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(CountrySelect, { countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", onCountryChange: onCountryChange, selectedCountry: currentCountry })), jsx(Select, { "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
+        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(CountrySelect, { isRequired: true, countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", onCountryChange: onCountryChange, selectedCountry: currentCountry })), jsx(Select, { isRequired: true, "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, placeholder: t('Select a language'), selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
 }
 
 export { CountrySelectorDialog };

package/dist/country-selector/use-countries-languages.d.ts

@@ -4,10 +4,24 @@ interface UseCountriesLanguagesArgs {
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
 }
+interface UseCountriesLanguagesReturnTypeError {
+    countries: undefined;
+    defaultCountry: undefined;
+    defaultLanguage: undefined;
+    error: object | Error | string;
+    isFetching: false;
+    selectedCountry: undefined;
+    selectedLanguage: undefined;
+    updateCountryLanguage(args: {
+        country: Country;
+        language: Language;
+    }): Promise<void>;
+}
 interface UseCountriesLanguagesReturnTypeFetching {
     countries: undefined;
     defaultCountry: undefined;
     defaultLanguage: undefined;
+    error: undefined;
     isFetching: true;
     selectedCountry: undefined;
     selectedLanguage: undefined;
@@ -20,6 +34,7 @@ interface UseCountriesLanguagesReturnTypeSelected {
     countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
+    error: undefined;
     isFetching: false;
     selectedCountry: Country;
     selectedLanguage: Language;
@@ -32,6 +47,7 @@ interface UseCountriesLanguagesReturnType {
     countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
+    error: undefined;
     isFetching: false;
     selectedCountry: Country | undefined;
     selectedLanguage: Language | undefined;
@@ -40,5 +56,5 @@ interface UseCountriesLanguagesReturnType {
         language: Language;
     }): Promise<void>;
 }
-export declare function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
+export declare function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeError | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
 export {};

package/dist/country-selector/use-countries-languages.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect } from 'react';
 import { config } from '../config.js';
+import { logger } from '../logging/logger.js';
 import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
 import { updateLocale } from '../shared/api/storefront/services/website-service.js';
 import { useCookie } from '../shared/hooks/use-cookie.js';
@@ -17,8 +18,8 @@ const cookieOptions = {
 function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
     const [currentCountryId] = useCookie('CurrentCountryId', cookieOptions);
+    // const [currentLanguageId] = ['be71b608-4876-420a-b1f5-adfe0093a72a'] // useCookie('CurrentLanguageId', cookieOptions)
     const [currentLanguageId] = useCookie('CurrentLanguageId', cookieOptions);
-    const [contextLanguageCode] = useCookie('SetContextLanguageCode', cookieOptions);
     const hasSessionCountries = Boolean(sessionCountries?.length);
     const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
         enabled: !hasSessionCountries,
@@ -32,44 +33,72 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiCountries]);
     async function updateCountryLanguage({ country, language, }) {
-        await updateLocale({ countryId: country.id, languageId: language.id });
+        await updateLocale({
+            countryId: country.id,
+            languageId: language.id,
+        });
     }
-    if (error)
-        throw error;
-    if (isFetching) {
+    useEffect(() => {
+        logger.info('CountryID from cookie', currentCountryId, countries?.find(country => country.id === currentCountryId)?.name ||
+            'Unknown');
+    }, [countries, currentCountryId]);
+    useEffect(() => {
+        logger.info('LanguageID from cookie', currentLanguageId, countries
+            ?.find(country => country.id === currentCountryId)
+            ?.languages.find(language => language.id === currentLanguageId)
+            ?.description || 'Unknown');
+    }, [countries, currentCountryId, currentLanguageId]);
+    try {
+        if (error)
+            throw error;
+        if (isFetching) {
+            return {
+                countries: undefined,
+                defaultCountry: undefined,
+                defaultLanguage: undefined,
+                error: undefined,
+                isFetching,
+                selectedCountry: undefined,
+                selectedLanguage: undefined,
+                updateCountryLanguage,
+            };
+        }
+        if (!countries || countries.length === 0)
+            throw new Error('No countries found');
+        const defaultCountry = countries.find(country => country.abbreviation.toUpperCase() ===
+            defaultCountryCode.toUpperCase()) || countries[0];
+        if (!defaultCountry)
+            throw new Error(`Unable to find the default country ${defaultCountryCode}`);
+        const defaultLanguage = defaultCountry.languages.find(language => language.languageCode.toUpperCase() ===
+            defaultLanguageCode.toUpperCase()) || defaultCountry.languages[0];
+        if (!defaultLanguage)
+            throw new Error(`Unable to find the default language ${defaultLanguageCode} for country ${defaultCountry.name}`);
+        const selectedCountry = countries.find(country => country.id === currentCountryId);
+        const selectedLanguage = selectedCountry &&
+            selectedCountry.languages.find(language => language.id === currentLanguageId);
+        return {
+            countries,
+            defaultCountry,
+            defaultLanguage,
+            error: undefined,
+            isFetching,
+            selectedCountry,
+            selectedLanguage,
+            updateCountryLanguage,
+        };
+    }
+    catch (error) {
         return {
             countries: undefined,
             defaultCountry: undefined,
             defaultLanguage: undefined,
-            isFetching,
+            error: error,
+            isFetching: false,
             selectedCountry: undefined,
             selectedLanguage: undefined,
             updateCountryLanguage,
         };
     }
-    if (!countries || countries.length === 0)
-        throw new Error('No countries found');
-    const defaultCountry = countries.find(country => country.abbreviation.toUpperCase() === defaultCountryCode.toUpperCase()) || countries[0];
-    if (!defaultCountry)
-        throw new Error(`Unable to find the default country ${defaultCountryCode}`);
-    const defaultLanguage = defaultCountry.languages.find(language => language.languageCode.toUpperCase() ===
-        defaultLanguageCode.toUpperCase()) || defaultCountry.languages[0];
-    if (!defaultLanguage)
-        throw new Error(`Unable to find the default language ${defaultLanguageCode} for country ${defaultCountry.name}`);
-    const selectedCountry = countries.find(country => country.id === currentCountryId);
-    const selectedLanguage = selectedCountry &&
-        (selectedCountry.languages.find(language => language.id === currentLanguageId) ||
-            selectedCountry.languages.find(language => language.languageCode.toUpperCase() ===
-                contextLanguageCode?.toUpperCase()));
-    return {
-        countries,
-        defaultCountry,
-        defaultLanguage,
-        isFetching,
-        selectedCountry,
-        selectedLanguage,
-        updateCountryLanguage,
-    };
 }
 
 export { useCountriesLanguages };

package/dist/delivery-time/delivery-time.d.ts

@@ -1,5 +1,5 @@
 export interface DeliveryTimeProps {
     className?: string;
-    deliveryDate: Date;
+    deliveryDate?: Date;
 }
 export declare function DeliveryTime({ className, deliveryDate }: DeliveryTimeProps): import("react/jsx-runtime").JSX.Element;

package/dist/delivery-time/delivery-time.js

@@ -1,19 +1,31 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { FormattedMessage } from '../intl/formatted-message.js';
-import { useFormattedMessage } from '../intl/use-formatted-message.js';
-import { getDateUnitObject } from '../shared/utils/date.js';
 import { InfoIconTooltip } from '../info-icon-tooltip/info-icon-tooltip.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useIntl } from '../intl/use-intl.js';
+import { formatDateToLocaleString } from '../shared/utils/date.js';
 import styles from './delivery-time.module.css.js';
 
 function DeliveryTime({ className, deliveryDate }) {
+    const { cultureCode } = useIntl();
     const t = useFormattedMessage();
-    const { number, unit } = getDateUnitObject(deliveryDate);
-    return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { "data-test-selector": "deliveryTime", children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
-                        '0': number.toString(),
-                        '1': t.pluralize('unit', unit, number),
-                    } }) }), jsx(InfoIconTooltip, { variant: "stroke", children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
+    if (!deliveryDate) {
+        return (jsx("div", { className: clsx(styles['delivery-time'], className), children: jsx("p", { 
+                // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+                dangerouslySetInnerHTML: {
+                    __html: t('Availability unknown, please contact customer support for lead time or alternatives.'),
+                }, "data-test-selector": "deliveryTime_unknown" }) }));
+    }
+    const localeDate = formatDateToLocaleString(deliveryDate, cultureCode, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+    return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { "data-test-selector": "deliveryTime", children: jsx(FormattedMessage, { id: "Delivery expected on {0}", replacementValues: {
+                        '0': localeDate,
+                    } }) }), jsx(InfoIconTooltip, { className: styles['info'], variant: "stroke", children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
 }
 
 export { DeliveryTime };

package/dist/delivery-time/delivery-time.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"delivery-time":"delivery-time-module-fEWEl"};
+var styles = {"delivery-time":"delivery-time-module-fEWEl","info":"delivery-time-module-Ta7xm"};
 
 export { styles as default };

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export interface ChildrenFunctionArgs {
+    close: VoidFunction;
+    groupId?: string;
+    instanceId: string;
+    isClosed: boolean;
+    isOpen: boolean;
+    open: VoidFunction;
+    setIsOpen: (isOpen: boolean) => void;
+    toggle: VoidFunction;
+}
+export interface DrawerProps {
+    allowCloseOnBackgroundClick?: boolean;
+    children: ReactNode | ((args: ChildrenFunctionArgs) => ReactNode);
+    className?: string;
+    groupId?: string;
+    instanceId?: string;
+    isInitialOpen?: boolean;
+    isOpen?: boolean;
+    onClose?: VoidFunction;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    showBackgroundOverlay?: boolean;
+    showUnderHeader?: boolean;
+    timeout?: number;
+}
+export declare function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen, isOpen: isOpenControlled, onClose, position, showBackgroundOverlay, showUnderHeader, timeout, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/drawer/drawer.js

@@ -0,0 +1,37 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { BackgroundOverlay } from '../background-overlay/background-overlay.js';
+import { createAddEndListener } from '../collapsables/unmounter/utils.js';
+import { useDrawer } from './use-drawer.js';
+import styles from './drawer.module.css.js';
+
+function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen = false, isOpen: isOpenControlled, onClose, position, showBackgroundOverlay, showUnderHeader = false, timeout, }) {
+    const wasOpenRef = useRef(isInitialOpen);
+    const asideRef = useRef(null);
+    const useDrawerResult = useDrawer({
+        groupId,
+        instanceId,
+        isInitialOpen,
+        isOpen: isOpenControlled,
+    });
+    const { close, isControlled, isOpen } = useDrawerResult;
+    useEffect(() => {
+        if (wasOpenRef.current && !isOpen)
+            onClose?.();
+        wasOpenRef.current = isOpen;
+    }, [instanceId, isOpen, onClose]);
+    return (jsxs(Fragment, { children: [jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, addEndListener: createAddEndListener(asideRef), in: isOpen, nodeRef: asideRef, timeout: timeout, children: jsx("aside", { ref: asideRef, className: clsx(styles.drawer, styles[position], showUnderHeader && styles['under-header'], className), children: children instanceof Function ? children(useDrawerResult) : children }, `${groupId}-${instanceId}`) }, groupId), showBackgroundOverlay && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: () => {
+                    if (!allowCloseOnBackgroundClick)
+                        return;
+                    if (isControlled) {
+                        onClose?.();
+                    }
+                    else {
+                        close();
+                    }
+                }, position: showUnderHeader ? 'behind-header' : 'in-front' }))] }));
+}
+
+export { Drawer };

package/dist/drawer/drawer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"drawer":"drawer-module-5ARuA","left":"drawer-module-yjFdX","right":"drawer-module-bZLBV","top":"drawer-module-KiviE","bottom":"drawer-module-p-PYu","under-header":"drawer-module-0jRBQ"};
+
+export { styles as default };

package/dist/drawer/use-drawer.d.ts

@@ -0,0 +1,17 @@
+export interface UseDrawerReturnType {
+    close: VoidFunction;
+    groupId?: string;
+    instanceId: string;
+    isClosed: boolean;
+    isControlled: boolean;
+    isOpen: boolean;
+    open: VoidFunction;
+    setIsOpen: (isOpen: boolean) => void;
+    toggle: VoidFunction;
+}
+export declare function useDrawer({ groupId: _groupId, instanceId: _instanceId, isInitialOpen, isOpen: isOpenControlled, }?: {
+    groupId?: string;
+    instanceId?: string;
+    isInitialOpen?: boolean;
+    isOpen?: boolean;
+}): UseDrawerReturnType;

package/dist/drawer/use-drawer.js

@@ -0,0 +1,71 @@
+import { useRef, useEffect, useCallback, useMemo } from 'react';
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+import { createUUID } from '../shared/utils/uuid.js';
+
+function useDrawer({ groupId: _groupId, instanceId: _instanceId, isInitialOpen, isOpen: isOpenControlled, } = {}) {
+    const groupIdRef = useRef(_groupId);
+    const groupId = groupIdRef.current;
+    const instanceIdRef = useRef(_instanceId || createUUID());
+    const instanceId = instanceIdRef.current;
+    const isControlled = isOpenControlled !== undefined;
+    const [openInstanceId, setOpenInstanceId] = useGlobalState(`drawer-${groupId || instanceId}`);
+    useEffect(() => {
+        if (isInitialOpen || isOpen)
+            setOpenInstanceId(instanceId);
+        return () => {
+            if (isOpen) {
+                setOpenInstanceId(undefined);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (isOpenControlled) {
+            setOpenInstanceId(instanceId);
+        }
+        else if (openInstanceId === instanceId) {
+            setOpenInstanceId(undefined);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpenControlled]);
+    const open = useCallback(() => {
+        if (isControlled)
+            return;
+        setOpenInstanceId(instanceId);
+    }, [setOpenInstanceId, instanceId, isControlled]);
+    const close = useCallback(() => {
+        if (isControlled)
+            return;
+        setOpenInstanceId(undefined);
+    }, [setOpenInstanceId, isControlled]);
+    const toggle = useCallback(() => {
+        if (openInstanceId === instanceId) {
+            close();
+        }
+        else {
+            open();
+        }
+    }, [close, instanceId, open, openInstanceId]);
+    const setIsOpen = useCallback((isOpen) => {
+        if (isOpen) {
+            open();
+        }
+        else {
+            close();
+        }
+    }, [close, open]);
+    const isOpen = useMemo(() => (isControlled ? isOpenControlled : openInstanceId === instanceId), [isControlled, isOpenControlled, openInstanceId, instanceId]);
+    return {
+        close,
+        groupId,
+        instanceId,
+        isClosed: !isOpen,
+        isControlled,
+        isOpen,
+        open,
+        setIsOpen,
+        toggle,
+    };
+}
+
+export { useDrawer };

package/dist/exports.d.ts

@@ -27,6 +27,7 @@ export * from './algolia/use-algolia-insights-provider-global-state';
 export * from './algolia/use-algolia-instant-search-state';
 export * from './algolia/use-algolia-search';
 export * from './background-overlay/background-overlay';
+export * from './background-overlay/background-overlay-manager';
 export * from './badges/badge/badge';
 export * from './badges/badge/icon-with-badge/icon-with-badge';
 export * from './badges/tag/tag';
@@ -80,6 +81,8 @@ export * from './delivery-time/delivery-time';
 export * from './display/info-display/info-display';
 export * from './display/price/price';
 export * from './display/product-sku/product-sku';
+export * from './drawer/drawer';
+export * from './drawer/use-drawer';
 export * from './filters/active-filters/active-filters';
 export * from './filters/multi-select/multi-select';
 export * from './filters/pagination/pagination';
@@ -146,6 +149,7 @@ export * from './intl/use-formatted-message';
 export * from './intl/use-intl';
 export * from './intl/use-language-code';
 export * from './intl/utils';
+export * from './layout/center';
 export * from './lists/download-document-list/download-document-list';
 export * from './lists/feature-list/feature-list';
 export * from './lists/icon-list/icon-list';
@@ -171,6 +175,11 @@ export * from './modals/favorite/add-to-favorite-dialog';
 export * from './modals/modal/modal';
 export * from './modals/recover-password/recover-password-dialog';
 export * from './modals/signin/sign-in-dialog';
+export * from './navigation/account-icon/account-icon';
+export * from './navigation/cart-icon/cart-icon';
+export * from './navigation/favorite-icon/favorite-icon';
+export * from './navigation/mobile-navigation/mobile-navigation';
+export * from './navigation/panel-navigation/panel-navigation';
 export * from './notifications/announcements/announcement';
 export * from './notifications/announcements/announcement-provider';
 export * from './notifications/announcements/connected-announcement';
@@ -305,6 +314,7 @@ export * from './shared/hooks/use-css-link';
 export * from './shared/hooks/use-debounced-callback';
 export * from './shared/hooks/use-disclosure';
 export * from './shared/hooks/use-enable-mobile-zoom';
+export * from './shared/hooks/use-global-disclosure';
 export * from './shared/hooks/use-intersection-observer';
 export * from './shared/hooks/use-is-breakpoint';
 export * from './shared/hooks/use-is-scrolled-beyond-element';
@@ -340,6 +350,7 @@ export * from './shared/routing/use-on-navigate';
 export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';
+export * from './shared/utils/css';
 export * from './shared/utils/date';
 export * from './shared/utils/debug';
 export * from './shared/utils/environment';
@@ -349,6 +360,7 @@ export * from './shared/utils/number';
 export * from './shared/utils/price';
 export * from './shared/utils/promise';
 export * from './shared/utils/random';
+export * from './shared/utils/refs';
 export * from './shared/utils/string';
 export * from './shared/utils/time';
 export * from './shared/utils/types';

package/dist/global-search/global-search-provider/global-search-provider.js

@@ -4,13 +4,12 @@ import { createContext, useMemo } from 'react';
 import { AlgoliaSearchProvider } from '../../algolia/algolia-search-provider.js';
 import { BackgroundOverlay } from '../../background-overlay/background-overlay.js';
 import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
-import styles from '../global-search.module.css.js';
 
 const GlobalSearchDisclosureContext = createContext(null);
 function GlobalSearchProvider({ children, searchClient, }) {
     const { close, isOpen, open, toggle } = useDisclosure(false);
     const value = useMemo(() => ({ close, isOpen, open, toggle }), [close, isOpen, open, toggle]);
-    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: value, children: [children, jsx(BackgroundOverlay, { className: styles['global-search-background-overlay-position'], isOpen: isOpen, onClose: close })] }) }));
+    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: value, children: [children, jsx(BackgroundOverlay, { isOpen: isOpen, onClick: close, position: "behind-header" })] }) }));
 }
 
 export { GlobalSearchDisclosureContext, GlobalSearchProvider };

package/dist/global-search/global-search.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"global-search-background-overlay-position":"global-search-module-T0bEf","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
+var styles = {"search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
 
 export { styles as default };