@sonic-equipment/ui 251.0.0 → 253.0.0

package/dist/buttons/link/link.d.ts

@@ -10,6 +10,7 @@ export interface LinkProps {
     isDisabled?: boolean;
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyUp?: (event: KeyboardEvent) => void;
+    rel?: string;
     role?: string;
     route?: NavigateOptions;
     tabIndex?: number;

package/dist/buttons/link/link.js

@@ -5,16 +5,16 @@ import clsx from 'clsx';
 import { useRouteLink } from '../../shared/routing/use-route-link.js';
 import styles from './link.module.css.js';
 
-const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, route, tabIndex, target, title, ...rest }, ref) => {
+const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
     const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
     const className = clsx({
         [styles.hover]: Boolean(href || onClick),
         [styles['has-underline']]: hasUnderline,
     }, styles['link'], color && styles[color], _className);
     if (href) {
-        return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
     }
-    return (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
+    return (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 });
 Link.displayName = 'Link';
 

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

@@ -7,7 +7,7 @@ export type OnCountryLanguageChangeHandler = (args: {
 export interface ConnectedCountrySelectorProps {
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
+    lockCountry?: boolean;
     onChange?: OnCountryLanguageChangeHandler;
-    showCountry?: boolean;
 }
-export declare function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry, }: ConnectedCountrySelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, lockCountry, onChange, }: ConnectedCountrySelectorProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -2,15 +2,18 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useMemo, useEffect } from 'react';
 import { logger } from '../logging/logger.js';
+import { useFetchSession } from '../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useCookiebot } from '../shared/hooks/use-cookiebot.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';
 import { useCountriesLanguages } from './use-countries-languages.js';
 
-function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry = true, }) {
+function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, lockCountry = false, onChange, }) {
+    const { data: sessionData } = useFetchSession();
     const { close, isOpen, open, setIsOpen } = useDisclosure(false);
     const { countries, defaultCountry, defaultLanguage, error, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
+        billToCountryId: sessionData?.billTo?.country?.id,
         defaultCountryCode,
         defaultLanguageCode,
     });
@@ -38,7 +41,7 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
         logger.error('Error fetching countries and languages:', error);
         return null;
     }
-    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
+    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, lockCountry: lockCountry, onOpenChange: open => {
                     if (!isDismissable)
                         return;
                     setIsOpen(open);
@@ -49,7 +52,7 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
                     await updateCountryLanguage({ country, language });
                     close();
                     onChange?.({ country, language });
-                }, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage, showCountry: showCountry })] }));
+                }, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage })] }));
 }
 
 export { ConnectedCountrySelector };

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

@@ -3,6 +3,7 @@ export interface CountrySelectorDialogProps {
     countries: Country[];
     isDismissable?: boolean;
     isOpen: boolean;
+    lockCountry?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     onSubmit: ({ country, language, }: {
         country: Country;
@@ -10,6 +11,5 @@ export interface CountrySelectorDialogProps {
     }) => void;
     selectedCountry: Country;
     selectedLanguage: Language;
-    showCountry?: boolean;
 }
-export declare function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry, }: CountrySelectorDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function CountrySelectorDialog({ countries, isDismissable, isOpen, lockCountry, onOpenChange, onSubmit, selectedCountry, selectedLanguage, }: CountrySelectorDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,7 +9,7 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Dialog } from '../../modals/dialog/dialog.js';
 import styles from './country-selector-dialog.module.css.js';
 
-function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry = true, }) {
+function CountrySelectorDialog({ countries, isDismissable, isOpen, lockCountry = false, onOpenChange, onSubmit, selectedCountry, selectedLanguage, }) {
     const t = useFormattedMessage();
     const [currentCountry, setCurrentCountry] = useState(selectedCountry);
     const [currentLanguage, setCurrentLanguage] = useState(selectedLanguage);
@@ -28,7 +28,7 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
     return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
             dialog: styles['country-selector-dialog'],
             modal: styles.modal,
-        }, footer: jsx(Button, { withArrow: true, "data-test-selector": "clSelector_apply", type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: () => onSubmit({ country: currentCountry, language: currentLanguage }), 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" })] })] }) }));
+        }, footer: jsx(Button, { withArrow: true, "data-test-selector": "clSelector_apply", type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: () => onSubmit({ country: currentCountry, language: currentLanguage }), 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: [jsx(CountrySelect, { isRequired: true, countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", isDisabled: lockCountry, 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/country-selector-trigger/country-selector-trigger.d.ts

@@ -3,6 +3,5 @@ export interface CountrySelectorTriggerProps {
     onClick: VoidFunction;
     selectedCountry: Country | undefined;
     selectedLanguage: Language | undefined;
-    showCountry?: boolean;
 }
-export declare function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, showCountry, }: CountrySelectorTriggerProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, }: CountrySelectorTriggerProps): import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -1,18 +1,24 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Image } from '../../media/image/image.js';
 import styles from './country-selector-trigger.module.css.js';
 
-function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, showCountry = true, }) {
+function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, }) {
     const t = useFormattedMessage();
     if (!selectedCountry || !selectedLanguage)
         return;
     const abbreviation = selectedCountry.abbreviation.toLowerCase();
     const flagSrc = `https://res.cloudinary.com/dkz9eknwh/image/upload/v1729678637/images/flags/${abbreviation}.svg`;
-    return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles.flag, height: 24, image: { 1: flagSrc, 2: flagSrc, 3: flagSrc, altText: abbreviation }, title: abbreviation, width: 24 }), jsxs("div", { className: styles.text, children: [showCountry && (jsxs(Fragment, { children: [jsx("span", { children: t(`clSelector.${selectedCountry.abbreviation}`, {
-                                    noTranslationId: true,
-                                }) }), jsx("span", { className: styles.divider, children: "-" })] })), jsx("span", { children: selectedLanguage.description })] })] }));
+    const countryName = t(`clSelector.${selectedCountry.abbreviation}`, {
+        noTranslationId: true,
+    });
+    return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles.flag, height: 24, image: {
+                    1: flagSrc,
+                    2: flagSrc,
+                    3: flagSrc,
+                    altText: countryName,
+                }, title: countryName, width: 24 }), jsx("div", { className: styles.text, children: jsx("span", { children: selectedLanguage.description }) })] }));
 }
 
 export { CountrySelectorTrigger };

package/dist/country-selector/country-selector-trigger/country-selector-trigger.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"country-selector-trigger":"country-selector-trigger-module-aioDu","flag":"country-selector-trigger-module-zOSJK","text":"country-selector-trigger-module-TE8tl","divider":"country-selector-trigger-module-GNRDD"};
+var styles = {"country-selector-trigger":"country-selector-trigger-module-aioDu","flag":"country-selector-trigger-module-zOSJK","text":"country-selector-trigger-module-TE8tl"};
 
 export { styles as default };

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

@@ -1,6 +1,7 @@
 import { CountryCode, LanguageCode } from '../intl/types';
 import { Country, Language } from '../shared/model/countries-languages';
 interface UseCountriesLanguagesArgs {
+    billToCountryId?: string;
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
 }
@@ -56,5 +57,5 @@ interface UseCountriesLanguagesReturnType {
         language: Language;
     }): Promise<void>;
 }
-export declare function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeError | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
+export declare function useCountriesLanguages({ billToCountryId, defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeError | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
 export {};

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

@@ -6,10 +6,11 @@ import { updateLocale } from '../shared/api/storefront/services/website-service.
 import { useSessionStorage } from '../shared/local-storage/use-session-storage.js';
 import { isCountry } from '../shared/model/countries-languages.js';
 
-function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
+function useCountriesLanguages({ billToCountryId, defaultCountryCode, defaultLanguageCode, }) {
     const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
-    const [currentCountryId] = useCookie('CurrentCountryId');
-    // const [currentLanguageId] = ['be71b608-4876-420a-b1f5-adfe0093a72a'] // useCookie('CurrentLanguageId', cookieOptions)
+    // get the current country ID from billToCountryId, from CurrentCountryId cookie second
+    const [cookieCountryId] = useCookie('CurrentCountryId');
+    const currentCountryId = billToCountryId ?? cookieCountryId;
     const [currentLanguageId] = useCookie('CurrentLanguageId');
     const hasSessionCountries = Boolean(sessionCountries?.length);
     const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
@@ -19,6 +20,11 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const countries = hasSessionCountries
         ? sessionCountries
         : apiCountries;
+    const allLanguages = [
+        ...new Map(countries
+            ?.flatMap(country => country.languages)
+            .map(language => [language.id, language])).values(),
+    ];
     useEffect(() => {
         setSessionCountries(apiCountries);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,8 +61,12 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
         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);
+        const selectedLanguage = allLanguages.find(language => language.id === currentLanguageId);
+        // const selectedLanguage: Language | undefined =
+        //   selectedCountry &&
+        //   selectedCountry.languages.find(
+        //     language => language.id === currentLanguageId,
+        //   )
         return {
             countries,
             defaultCountry,

package/dist/footer/connected-footer.js

@@ -17,7 +17,7 @@ function ConnectedFooter({ className, onCountryLanguageChange, source, }) {
     const footerNavigationSection = data?.items
         .filter(isNavigationSection)
         .find(item => item.key === 'footer');
-    return (jsx(Footer, { className: className, copyright: jsx(FormattedMessage, { id: "Copyright \u00A9 Sonic Equipment B.V." }), countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN", onChange: onCountryLanguageChange, showCountry: isAuthenticated === false }), footerNavigationSection: footerNavigationSection }));
+    return (jsx(Footer, { className: className, copyright: jsx(FormattedMessage, { id: "Copyright \u00A9 Sonic Equipment B.V." }), countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN", lockCountry: isAuthenticated === true, onChange: onCountryLanguageChange }), footerNavigationSection: footerNavigationSection }));
 }
 
 export { ConnectedFooter };

package/dist/lists/download-document-list/download-document-list.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../../buttons/link/link.js';
 import { StrokeDownloadIcon } from '../../icons/stroke/stroke-download-icon.js';
 import { FeatureList } from '../feature-list/feature-list.js';
 import styles from './download-document-list.module.css.js';
@@ -11,7 +12,7 @@ function DownloadDocumentList({ className, documents, }) {
         })), style: { valueAlignment: 'left' } }));
 }
 function DownloadListItem({ document: { href, name }, }) {
-    return (jsxs("div", { className: styles['download-list-item'], children: [jsx(StrokeDownloadIcon, {}), jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: name })] }));
+    return (jsxs("div", { className: styles['download-list-item'], children: [jsx(StrokeDownloadIcon, {}), jsx(Link, { href: href, rel: "download noreferrer", target: "_blank", children: name })] }));
 }
 
 export { DownloadDocumentList };

package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.js

@@ -37,10 +37,10 @@ function ProductDetailsPanel({ priceComponent, product, }) {
                                     key: { label: specification.nameDisplay },
                                     value: specification.value,
                                 })) }) })), product.documents.length > 0 && (jsx(AccordionItem, { id: "downloads", title: jsx(FormattedMessage, { id: "Downloads" }), children: jsx(DownloadDocumentList, { className: styles['feature-list'], documents: product.documents
-                                    .map(document => ({
-                                    href: document.filePath,
-                                    id: document.id,
-                                    name: document.name,
+                                    .map(({ filePath, id, name }) => ({
+                                    href: `/${filePath.startsWith('/') ? filePath.slice(1) : filePath}`,
+                                    id,
+                                    name,
                                 }))
                                     .sort((a, b) => a.name.localeCompare(b.name)) }) }))] }) })] }));
 }

package/dist/styles.css

@@ -4982,10 +4982,6 @@ button.swiper-pagination-bullet {
     line-height: 1;
   }
 
-  .country-selector-trigger-module-aioDu .country-selector-trigger-module-TE8tl .country-selector-trigger-module-GNRDD {
-      margin-inline: var(--space-4);
-    }
-
 .details-module-yz0rE {
   --duration: var(--transition-duration-short);
   --arrow-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "251.0.0",
+  "version": "253.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {