@sonic-equipment/ui 141.0.0 → 142.0.0

package/dist/country-select/country-select.d.ts

@@ -0,0 +1,27 @@
+import { Country } from '../shared/model/countries-languages';
+interface CountrySelectProps<T extends Country> {
+    countries: T[];
+    countryNameInLanguageOfCountry?: boolean;
+    'data-test-selector'?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    name?: string;
+    showLabel?: boolean;
+}
+interface CountrySelectPropsWithDefaultSelectedCountry<T extends Country> extends CountrySelectProps<T> {
+    defaultSelectedCountry: T;
+    onCountryChange?: (country: T) => void;
+}
+interface CountrySelectPropsWithSelectedCountry<T extends Country> extends CountrySelectProps<T> {
+    onCountryChange?: (country: T) => void;
+    selectedCountry: T;
+}
+interface CountrySelectPropsWithoutSelectedCountry<T extends Country> extends CountrySelectProps<T> {
+    defaultSelectedCountry?: T | undefined;
+    onCountryChange?: (country: T | undefined) => void;
+    selectedCountry?: T | undefined;
+}
+export declare function CountrySelect<T extends Country>(props: CountrySelectPropsWithDefaultSelectedCountry<T>): JSX.Element;
+export declare function CountrySelect<T extends Country>(props: CountrySelectPropsWithSelectedCountry<T>): JSX.Element;
+export declare function CountrySelect<T extends Country>(props: CountrySelectPropsWithoutSelectedCountry<T>): JSX.Element;
+export {};

package/dist/{country-selector/country-select → country-select}/country-select.js

@@ -1,14 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { Select } from '../../forms/select/select.js';
-import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Select } from '../forms/select/select.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
 
-function CountrySelect({ countries, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
+function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
     const t = useFormattedMessage();
+    const translationPrefix = countryNameInLanguageOfCountry
+        ? 'clSelector'
+        : 'country';
     const countryOptions = useMemo(() => countries
         .map((country) => [
         country.id,
-        t(`clSelector.${country.abbreviation}`),
+        t(`${translationPrefix}.${country.abbreviation}`),
     ])
         .sort(([, labelA], [, labelB]) => labelA.localeCompare(labelB))
         .reduce((acc, [id, label]) => ({

package/dist/country-select/hooks/use-countries.d.ts

@@ -0,0 +1,12 @@
+import { Country } from '../../shared/model/countries-languages';
+interface UseCountriesArgs {
+    enabled?: boolean;
+}
+interface UseCountriesReturnType {
+    countries: Country[] | undefined;
+    currentCountry: Country | undefined;
+    error: unknown;
+    isFetching: boolean;
+}
+export declare function useCountries({ enabled, }: UseCountriesArgs): UseCountriesReturnType;
+export {};

package/dist/country-select/hooks/use-countries.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { isCountryCode, isCultureCode, isLanguageCode } from '../../intl/types.js';
+import { useFetchCountriesWithLanguages } from '../../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
+import { useCookie } from '../../shared/hooks/use-cookie.js';
+import { useSessionStorage } from '../../shared/hooks/use-session-storage.js';
+
+function useCountries({ enabled = true, }) {
+    const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
+    const [currentCountryId] = useCookie('CurrentCountryId');
+    const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
+        enabled: !sessionCountries && enabled,
+    });
+    const countries = useMemo(() => {
+        if (sessionCountries)
+            return sessionCountries;
+        const countries = apiCountries?.map((country) => {
+            if (!isCountryCode(country.abbreviation))
+                throw new Error(`Invalid country code: ${country.abbreviation}`);
+            return {
+                abbreviation: country.abbreviation,
+                currencyCode: country.currencyCode,
+                id: country.id,
+                languages: country.languages.map((language) => {
+                    if (!isCultureCode(language.cultureCode))
+                        throw new Error(`Invalid culture code: ${language.cultureCode}`);
+                    if (!isLanguageCode(language.languageCode))
+                        throw new Error(`Invalid language code: ${language.languageCode}`);
+                    return {
+                        cultureCode: language.cultureCode,
+                        description: language.description,
+                        id: language.id,
+                        languageCode: language.languageCode,
+                    };
+                }),
+                name: country.name,
+            };
+        });
+        return countries;
+    }, [apiCountries, sessionCountries]);
+    if (countries !== sessionCountries)
+        setSessionCountries(countries);
+    const currentCountry = countries?.find(country => country.id === currentCountryId);
+    return {
+        countries,
+        currentCountry,
+        error,
+        isFetching,
+    };
+}
+
+export { useCountries };

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { Button } from '../../buttons/button/button.js';
+import { CountrySelect } from '../../country-select/country-select.js';
 import { Select } from '../../forms/select/select.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Dialog } from '../../modals/dialog/dialog.js';
-import { CountrySelect } from '../country-select/country-select.js';
 import styles from './country-selector-dialog.module.css.js';
 
 function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry = true, }) {
@@ -14,15 +14,17 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
     const [currentCountry, setCurrentCountry] = useState(selectedCountry);
     const [currentLanguage, setCurrentLanguage] = useState(selectedLanguage);
     const languageOptions = useMemo(() => currentCountry.languages.reduce((acc, language) => ({ ...acc, [language.id]: language.description }), {}), [currentCountry]);
-    useEffect(() => {
-        if (currentCountry.languages.some(language => language.id === currentLanguage.id))
+    const onCountryChange = useCallback((country) => {
+        setCurrentCountry(country);
+        /* Check if the current language is available in the selected country */
+        if (country.languages.some(language => language.id === currentLanguage.id))
             return;
-        const fallbackLanguage = currentCountry.languages[0];
+        /* When the current language is not available, select the first language of the selected country */
+        const fallbackLanguage = country.languages[0];
         if (!fallbackLanguage)
-            throw new Error(`Country ${currentCountry.name} has no languages to select`);
+            throw new Error(`Country ${country.name} has no languages to select`);
         setCurrentLanguage(fallbackLanguage);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentCountry]);
+    }, [currentLanguage.id]);
     return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
             dialog: styles['country-selector-dialog'],
             modal: styles.modal,
@@ -30,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, "data-test-selector": "clSelector_country", onCountryChange: setCurrentCountry, 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, { 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" })] })] }) }));
 }
 
 export { CountrySelectorDialog };

package/dist/country-selector/country-selector-trigger/country-selector-trigger.d.ts

@@ -1,6 +1,6 @@
 import { Country, Language } from '../../shared/model/countries-languages';
 export interface CountrySelectorTriggerProps {
-    onClick: () => void;
+    onClick: VoidFunction;
     selectedCountry: Country | undefined;
     selectedLanguage: Language | undefined;
     showCountry?: boolean;

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

@@ -1,5 +1,5 @@
 import { CountryCode, LanguageCode } from '../intl/types';
-import { CountriesLanguages, Country, Language } from '../shared/model/countries-languages';
+import { Country, Language } from '../shared/model/countries-languages';
 interface UseCountriesLanguagesArgs {
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
@@ -17,7 +17,7 @@ interface UseCountriesLanguagesReturnTypeFetching {
     }): Promise<void>;
 }
 interface UseCountriesLanguagesReturnTypeSelected {
-    countries: CountriesLanguages;
+    countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
     isFetching: false;
@@ -29,7 +29,7 @@ interface UseCountriesLanguagesReturnTypeSelected {
     }): Promise<void>;
 }
 interface UseCountriesLanguagesReturnType {
-    countries: CountriesLanguages;
+    countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
     isFetching: false;

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

@@ -5,6 +5,7 @@ import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/w
 import { updateLocale } from '../shared/api/storefront/services/website-service.js';
 import { useCookie } from '../shared/hooks/use-cookie.js';
 import { useSessionStorage } from '../shared/hooks/use-session-storage.js';
+import { isCountry } from '../shared/model/countries-languages.js';
 
 const cookieOptions = {
     domain: config.COOKIE_DOMAIN,
@@ -20,6 +21,7 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const [contextLanguageCode] = useCookie('SetContextLanguageCode', cookieOptions);
     const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
         enabled: !sessionCountries,
+        select: countries => countries.filter(country => isCountry(country)),
     });
     const countries = sessionCountries ?? apiCountries;
     useEffect(() => {
@@ -44,7 +46,7 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
             updateCountryLanguage,
         };
     }
-    if (!countries?.length)
+    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)

package/dist/exports.d.ts

@@ -1,4 +1,4 @@
-export * from './address/address';
+export * from './address-info-display/address-info-display';
 export * from './algolia/algolia-active-categories';
 export * from './algolia/algolia-active-filters';
 export * from './algolia/algolia-categories-filters';
@@ -60,8 +60,9 @@ export * from './collapsables/accordion/accordion';
 export * from './collapsables/accordion/accordion-item';
 export * from './collapsables/show-all/show-all';
 export * from './config';
+export * from './country-select/country-select';
+export * from './country-select/hooks/use-countries';
 export * from './country-selector/connected-country-selector';
-export * from './country-selector/country-select/country-select';
 export * from './country-selector/country-selector-dialog/country-selector-dialog';
 export * from './country-selector/country-selector-trigger/country-selector-trigger';
 export * from './country-selector/use-countries-languages';
@@ -112,6 +113,7 @@ export * from './header/cart-icon/connected-cart-icon';
 export * from './header/hamburger-button/hamburger-button';
 export * from './header/header';
 export * from './header/header-layout/header-layout';
+export * from './header/link-list/navigation-link-list';
 export * from './header/sonic-logo/sonic-logo';
 export * from './info-icon-tooltip/info-icon-tooltip';
 export * from './intl/formatted-message';
@@ -168,6 +170,7 @@ export * from './pages/checkout/payment-page/hooks/use-has-returned-from-adyen';
 export * from './pages/checkout/payment-page/payment-page';
 export * from './pages/checkout/payment-page/payment-page-content';
 export * from './pages/checkout/payment-page/utils/parse-amount';
+export * from './pages/checkout/shipping-page/components/currency-change-dialog';
 export * from './pages/checkout/shipping-page/components/edit-address-form';
 export * from './pages/checkout/shipping-page/components/readonly-address';
 export * from './pages/checkout/shipping-page/components/sonic-address';
@@ -239,9 +242,9 @@ export * from './shared/api/storefront/hooks/payment/use-create-adyen-session';
 export * from './shared/api/storefront/hooks/payment/use-fetch-adyen-config';
 export * from './shared/api/storefront/hooks/payment/use-invalidate-adyen';
 export * from './shared/api/storefront/hooks/translation/use-fetch-translations';
-export * from './shared/api/storefront/hooks/website/use-fetch-countries';
 export * from './shared/api/storefront/hooks/website/use-fetch-countries-languages';
 export * from './shared/api/storefront/hooks/website/use-fetch-countries-with-languages';
+export * from './shared/api/storefront/hooks/website/use-fetch-country-models';
 export * from './shared/api/storefront/hooks/website/use-fetch-settings';
 export * from './shared/api/storefront/hooks/website/use-update-locale';
 export * from './shared/api/storefront/hooks/wishlist/use-add-wishlist-item-to-current-wishlist';
@@ -258,6 +261,8 @@ export * from './shared/api/storefront/services/payment-service';
 export * from './shared/api/storefront/services/translation-service';
 export * from './shared/api/storefront/services/website-service';
 export * from './shared/api/storefront/services/wishlist-service';
+export * from './shared/data/cart.data';
+export * from './shared/data/countries-languages.data';
 export * from './shared/feature-flags/use-feature-flags';
 export * from './shared/fetch/request';
 export * from './shared/ga/data-layer';
@@ -272,6 +277,7 @@ export * from './shared/hooks/use-disclosure';
 export * from './shared/hooks/use-enable-mobile-zoom';
 export * from './shared/hooks/use-intersection-observer';
 export * from './shared/hooks/use-is-breakpoint';
+export * from './shared/hooks/use-is-scrolled-beyond-element';
 export * from './shared/hooks/use-resize-observer';
 export * from './shared/hooks/use-script';
 export * from './shared/hooks/use-scroll-lock';
@@ -281,11 +287,12 @@ export * from './shared/hooks/use-watch-css-property';
 export * from './shared/model/address';
 export * from './shared/model/announcement';
 export * from './shared/model/category';
-export * from './shared/model/countries';
 export * from './shared/model/countries-languages';
 export * from './shared/model/currency';
+export * from './shared/model/defaults';
 export * from './shared/model/hit';
 export * from './shared/model/image';
+export * from './shared/model/link';
 export * from './shared/model/price';
 export * from './shared/providers/cart-provider';
 export * from './shared/providers/favorite-provider';
@@ -307,6 +314,7 @@ export * from './shared/utils/debug';
 export * from './shared/utils/environment';
 export * from './shared/utils/event-emitter';
 export * from './shared/utils/merge';
+export * from './shared/utils/number';
 export * from './shared/utils/price';
 export * from './shared/utils/promise';
 export * from './shared/utils/random';

package/dist/filters/active-filters/active-filters.d.ts

@@ -7,7 +7,7 @@ export interface SelectedFilterCategory {
     label: string;
 }
 export interface ActiveFiltersProps {
-    onClearAllFilters: () => void;
+    onClearAllFilters: VoidFunction;
     onClearFilter: (categoryLabel: string, filter: SelectedFilter) => void;
     selectedFilterCategories: SelectedFilterCategory[];
 }

package/dist/forms/number-field/number-field.js

@@ -11,11 +11,15 @@ import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 import styles from './number-field.module.css.js';
 
+const defaultFormatOptions = {
+    style: 'decimal',
+    useGrouping: false,
+};
 /**
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
-function NumberField({ autoFocus, autoGrow, 'data-test-selector': dataTestSelector, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', validate, value, withButtons, }) {
+function NumberField({ autoFocus, autoGrow, 'data-test-selector': dataTestSelector, defaultValue, formatOptions = defaultFormatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', validate, value, withButtons, }) {
     const inputRef = useRef(null);
     return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), "data-test-selector": dataTestSelector, defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, validate: validate, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { "data-test-selector": "decrement", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/dist/forms/select/select.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { Select as Select$1, Button, SelectValue, Popover, ListBox, Section, Header, ListBoxItem } from 'react-aria-components';
 import clsx from 'clsx';
@@ -10,7 +10,8 @@ import { FieldError } from '../field-error/field-error.js';
 import { Label } from '../label/label.js';
 import styles from './select.module.css.js';
 
-function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption, icon = (jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })), isDisabled = false, isLoading, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+const defaultIcon = (jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron }));
+function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption, icon = defaultIcon, isDisabled = false, isLoading, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {

package/dist/forms/textarea/textarea.js

@@ -22,7 +22,7 @@ const TextArea = forwardRef(({ autoGrow, className, label, size, ...textAreaProp
             return void ref.current.style.removeProperty('height');
         ref.current.style.height = `${initialHeight.current}px`;
         if (ref.current.scrollHeight > (initialHeight.current || 0)) {
-            ref.current.style.height = ref.current.scrollHeight + 'px';
+            ref.current.style.height = `${ref.current.scrollHeight}px`;
         }
     }, [autoGrow, ref]);
     useEffect(() => {

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext } from 'react';
+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';
@@ -9,7 +9,8 @@ import styles from '../global-search.module.css.js';
 const GlobalSearchDisclosureContext = createContext(null);
 function GlobalSearchProvider({ children, searchClient, }) {
     const { close, isOpen, open, toggle } = useDisclosure(false);
-    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [children, jsx(BackgroundOverlay, { className: styles['global-search-background-overlay-position'], isOpen: isOpen, onClose: close })] }) }));
+    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 })] }) }));
 }
 
 export { GlobalSearchDisclosureContext, GlobalSearchProvider };

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

@@ -4,6 +4,7 @@ import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 function Highlight({ attribute, hit, tagName = 'mark', }) {
     return createElement(Fragment, {}, parseAlgoliaHitHighlight({ attribute, hit }).map(({ isHighlighted, value }, index) => {
         if (isHighlighted) {
+            // eslint-disable-next-line @eslint-react/no-array-index-key
             return createElement(tagName, { key: index }, value);
         }
         return value;

package/dist/global-search/search-result-panel/sections/no-search.js

@@ -50,7 +50,9 @@ function QuickAccessSection() {
     if (!collection)
         return;
     const { items } = collection;
-    return (jsx(SearchSection, { headerClassName: styles['quick-access-section-header'], title: t('Quick access'), children: jsx("div", { className: styles['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard, { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
+    return (jsx(SearchSection, { headerClassName: styles['quick-access-section-header'], title: t('Quick access'), children: jsx("div", { className: styles['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                , { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
 }
 
 export { NoSearch };

package/dist/header/header.d.ts

@@ -1 +1,5 @@
-export declare function Header(): import("react/jsx-runtime").JSX.Element;
+import { NavigationLink } from '../shared/model/link';
+export interface HeaderProps {
+    links: NavigationLink[];
+}
+export declare function Header({ links }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -1,9 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { HeaderLayout } from './header-layout/header-layout.js';
+import { NavigationLinkList } from './link-list/navigation-link-list.js';
 import { SonicLogo } from './sonic-logo/sonic-logo.js';
 
-function Header() {
-    return (jsx(HeaderLayout, { hamburgerButton: null, logo: jsx(SonicLogo, { href: "/" }), mainNavigation: null, navigationActions: null, search: null }));
+function Header({ links }) {
+    return (jsx(HeaderLayout, { hamburgerButton: null, logo: jsx(SonicLogo, { href: "/" }), mainNavigation: jsx(NavigationLinkList, { links: links, 
+            // eslint-disable-next-line no-console
+            onSubmenuToggle: link => console.log('open menu', link) }), navigationActions: null, search: null }));
 }
 
 export { Header };

package/dist/header/link-list/navigation-link-list.d.ts

@@ -0,0 +1,6 @@
+import { NavigationLink } from '../../shared/model/link';
+export interface LinkListProps {
+    links: NavigationLink[];
+    onSubmenuToggle: (link: NavigationLink) => void;
+}
+export declare function NavigationLinkList({ links, onSubmenuToggle }: LinkListProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/link-list/navigation-link-list.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './navigation-link-list.module.css.js';
+
+function NavigationLinkList({ links, onSubmenuToggle }) {
+    return (jsx("ul", { className: styles['navigation-link-list'], children: links.map(link => {
+            if (link.links.length > 0) {
+                return (jsx("li", { children: jsxs(RouteLink, { className: styles.link, onClick: () => onSubmenuToggle(link), children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron })] }) }, link.key));
+            }
+            return (jsx("li", { children: jsx(RouteLink, { className: styles.link, href: link.url, children: link.title }) }, link.key));
+        }) }));
+}
+
+export { NavigationLinkList };

package/dist/header/link-list/navigation-link-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"navigation-link-list":"navigation-link-list-module-Ku9Sa","link":"navigation-link-list-module-kj0Rj","chevron":"navigation-link-list-module-QiKiA"};
+
+export { styles as default };

package/dist/index.js

@@ -3,7 +3,7 @@ import * as bff_model from './shared/api/bff/model/bff.model.js';
 export { bff_model as BffModel };
 import * as storefront_model from './shared/api/storefront/model/storefront.model.js';
 export { storefront_model as StorefrontModel };
-export { Address } from './address/address.js';
+export { AddressInfoDisplay } from './address-info-display/address-info-display.js';
 export { AlgoliaActiveCategories } from './algolia/algolia-active-categories.js';
 export { AlgoliaActiveFilters } from './algolia/algolia-active-filters.js';
 export { AlgoliaCategoriesFilters } from './algolia/algolia-categories-filters.js';
@@ -65,8 +65,9 @@ export { Accordion } from './collapsables/accordion/accordion.js';
 export { AccordionItem } from './collapsables/accordion/accordion-item.js';
 export { ShowAll } from './collapsables/show-all/show-all.js';
 export { config, configPerEnvironment } from './config.js';
+export { CountrySelect } from './country-select/country-select.js';
+export { useCountries } from './country-select/hooks/use-countries.js';
 export { ConnectedCountrySelector } from './country-selector/connected-country-selector.js';
-export { CountrySelect } from './country-selector/country-select/country-select.js';
 export { CountrySelectorDialog } from './country-selector/country-selector-dialog/country-selector-dialog.js';
 export { CountrySelectorTrigger } from './country-selector/country-selector-trigger/country-selector-trigger.js';
 export { useCountriesLanguages } from './country-selector/use-countries-languages.js';
@@ -116,6 +117,7 @@ export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
 export { HamburgerButton } from './header/hamburger-button/hamburger-button.js';
 export { Header } from './header/header.js';
 export { HeaderLayout } from './header/header-layout/header-layout.js';
+export { NavigationLinkList } from './header/link-list/navigation-link-list.js';
 export { SonicLogo } from './header/sonic-logo/sonic-logo.js';
 export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';
 export { FormattedMessage } from './intl/formatted-message.js';
@@ -171,6 +173,7 @@ export { useHasReturnedFromAdyen } from './pages/checkout/payment-page/hooks/use
 export { PaymentPage } from './pages/checkout/payment-page/payment-page.js';
 export { PaymentPageContent } from './pages/checkout/payment-page/payment-page-content.js';
 export { parseAmount } from './pages/checkout/payment-page/utils/parse-amount.js';
+export { CurrencyChangeDialog } from './pages/checkout/shipping-page/components/currency-change-dialog.js';
 export { EDIT_ADDRESS_FORM_ID, EditAddressesForm } from './pages/checkout/shipping-page/components/edit-address-form.js';
 export { ReadOnlyAddresses } from './pages/checkout/shipping-page/components/readonly-address.js';
 export { SonicAddress } from './pages/checkout/shipping-page/components/sonic-address.js';
@@ -241,9 +244,9 @@ export { useCreateAdyenSession } from './shared/api/storefront/hooks/payment/use
 export { useFetchAdyenConfig } from './shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
 export { useInvalidateAdyen } from './shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
 export { useFetchTranslations } from './shared/api/storefront/hooks/translation/use-fetch-translations.js';
-export { useFetchCountries } from './shared/api/storefront/hooks/website/use-fetch-countries.js';
 export { useFetchCountriesLanguages } from './shared/api/storefront/hooks/website/use-fetch-countries-languages.js';
 export { useFetchCountriesWithLanguages } from './shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
+export { useFetchCountryModels } from './shared/api/storefront/hooks/website/use-fetch-country-models.js';
 export { useFetchSettings } from './shared/api/storefront/hooks/website/use-fetch-settings.js';
 export { useUpdateLocale } from './shared/api/storefront/hooks/website/use-update-locale.js';
 export { useAddWishListItemToCurrentWishList } from './shared/api/storefront/hooks/wishlist/use-add-wishlist-item-to-current-wishlist.js';
@@ -258,8 +261,10 @@ export { fetchBillToAddresses, fetchFulfillmentMethods, fetchShipToAddresses, pa
 export { validateVATNumber } from './shared/api/storefront/services/finance-service.js';
 export { createAdyenSession, fetchAdyenConfig } from './shared/api/storefront/services/payment-service.js';
 export { fetchTranslations } from './shared/api/storefront/services/translation-service.js';
-export { fetchCountries, fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
+export { fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
 export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishList, deleteWishList, deleteWishListItemFromWishList, getWishList, getWishListItemsByWishListId, getWishLists } from './shared/api/storefront/services/wishlist-service.js';
+export { cart } from './shared/data/cart.data.js';
+export { countries, dutch, english, france, french, german, germany, languages, netherlands, unitedKingdom } from './shared/data/countries-languages.data.js';
 export { useFeatureFlags } from './shared/feature-flags/use-feature-flags.js';
 export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request } from './shared/fetch/request.js';
 export { dataLayer } from './shared/ga/data-layer.js';
@@ -267,24 +272,26 @@ export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAn
 export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
-export { useCookie } from './shared/hooks/use-cookie.js';
+export { defaultCookieOptions, useCookie } from './shared/hooks/use-cookie.js';
 export { useCSSLink } from './shared/hooks/use-css-link.js';
 export { useDebouncedCallback } from './shared/hooks/use-debounced-callback.js';
 export { useDisclosure } from './shared/hooks/use-disclosure.js';
 export { useEnableMobileZoom } from './shared/hooks/use-enable-mobile-zoom.js';
 export { useIntersectionObserver } from './shared/hooks/use-intersection-observer.js';
 export { useIsBreakpoint } from './shared/hooks/use-is-breakpoint.js';
+export { useIsScrolledBeyondElement } from './shared/hooks/use-is-scrolled-beyond-element.js';
 export { useResizeObserver } from './shared/hooks/use-resize-observer.js';
 export { useScript } from './shared/hooks/use-script.js';
 export { useScrollLock } from './shared/hooks/use-scroll-lock.js';
-export { scrollToTop, useScrollTo } from './shared/hooks/use-scroll-to.js';
+export { scrollTo, scrollToTop } from './shared/hooks/use-scroll-to.js';
 export { useSessionStorage } from './shared/hooks/use-session-storage.js';
 export { useWatchCssProperty } from './shared/hooks/use-watch-css-property.js';
 export { validateEmail, validatePhone } from './shared/model/address.js';
 export { announcementSubTypes, announcementTypes, isAnnouncementSubtype, isAnnouncementType } from './shared/model/announcement.js';
 export { transformAlgoliaCategoryData } from './shared/model/category.js';
-export { countries } from './shared/model/countries.js';
+export { isCountry, isLanguage } from './shared/model/countries-languages.js';
 export { currencySymbolToISO } from './shared/model/currency.js';
+export { voidFunction } from './shared/model/defaults.js';
 export { isProductHit, transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit } from './shared/model/hit.js';
 export { isResponsiveImage } from './shared/model/image.js';
 export { CartProvider, useCartEvents } from './shared/providers/cart-provider.js';
@@ -306,6 +313,7 @@ export { trackPropertyChange } from './shared/utils/debug.js';
 export { environment, environments } from './shared/utils/environment.js';
 export { EventEmitter } from './shared/utils/event-emitter.js';
 export { clone, deepMerge, isPlainObject, default as main, merge } from './shared/utils/merge.js';
+export { ensureNumber } from './shared/utils/number.js';
 export { currencies, formatPrice, getCurrencyByCountryCode } from './shared/utils/price.js';
 export { isPromise, wait } from './shared/utils/promise.js';
 export { random, randomInt } from './shared/utils/random.js';

package/dist/info-icon-tooltip/info-icon-tooltip.d.ts

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
+type Variant = 'solid' | 'stroke';
 export interface InfoIconTooltipProps {
     children: string | ReactNode;
     className?: string;
-    variant?: 'solid' | 'stroke';
+    variant?: Variant;
 }
 export declare function InfoIconTooltip({ children, className, variant, }: InfoIconTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/info-icon-tooltip/info-icon-tooltip.js

@@ -8,13 +8,13 @@ import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { Tooltip } from '../tooltip/tooltip.js';
 import styles from './info-icon-tooltip.module.css.js';
 
-function InfoIconTooltip({ children, className, variant = 'solid', }) {
+function Icon({ variant, ...props }) {
     const t = useFormattedMessage();
     const triggerLabel = t('Information');
-    function Icon(props) {
-        return (jsx(IconButton, { ...props, className: clsx(styles.trigger), children: variant === 'stroke' ? (jsx(StrokeInformationIcon, { "aria-description": triggerLabel })) : (jsx(SolidInformationIcon, { "aria-description": triggerLabel })) }));
-    }
-    return (jsx(Tooltip, { className: clsx(className, styles['info-icon-tooltip'], styles[variant]), trigger: jsx(Icon, {}), children: children }));
+    return (jsx(IconButton, { ...props, className: clsx(styles.trigger), children: variant === 'stroke' ? (jsx(StrokeInformationIcon, { "aria-description": triggerLabel })) : (jsx(SolidInformationIcon, { "aria-description": triggerLabel })) }));
+}
+function InfoIconTooltip({ children, className, variant = 'solid', }) {
+    return (jsx(Tooltip, { className: clsx(className, styles['info-icon-tooltip'], styles[variant]), trigger: jsx(Icon, { variant: variant }), children: children }));
 }
 
 export { InfoIconTooltip };

package/dist/intl/intl-context.js

@@ -1,10 +1,11 @@
 "use client";
 import { createContext } from 'react';
+import { voidFunction } from '../shared/model/defaults.js';
 
 const IntlContext = createContext({
     cultureCode: 'en-GB',
     formattedMessage: id => id,
-    updateCultureCode: () => { },
+    updateCultureCode: voidFunction,
 });
 
 export { IntlContext };