@sonic-equipment/ui 170.0.0 → 171.0.0

package/dist/algolia/algolia-query-string-routing.js

@@ -1,6 +1,6 @@
 "use client";
-import simpleStateMapping from '../node_modules/.pnpm/instantsearch.js@4.78.0_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/stateMappings/simple.js';
-import historyRouter from '../node_modules/.pnpm/instantsearch.js@4.78.0_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/routers/history.js';
+import simpleStateMapping from '../node_modules/.pnpm/instantsearch.js@4.78.3_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/stateMappings/simple.js';
+import historyRouter from '../node_modules/.pnpm/instantsearch.js@4.78.3_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/routers/history.js';
 
 function createQueryStringRouting({ algoliaIndex, hierarchicalCategories, }) {
     return {

package/dist/buttons/button/button.js

@@ -4,14 +4,11 @@ import { isValidElement } from 'react';
 import clsx from 'clsx';
 import { ProgressCircle } from '../../loading/progress-circle.js';
 import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
-import { buildHref } from '../../shared/routing/route-utils.js';
-import { useBasePath } from '../../shared/routing/use-base-path.js';
-import { useRouteLinkElement } from '../../shared/routing/use-route-link-element.js';
+import { useRouteLink } from '../../shared/routing/use-route-link.js';
 import buttonStyles from './button.module.css.js';
 
 function Button({ _pseudo = 'none', children: _children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, form, href, icon, iconPosition = 'left', isDisabled, isLoading = false, isValidating = true, name, onClick, route, size = 'lg', type = 'button', value, variant = 'solid', withArrow = false, }) {
-    const basePath = useBasePath();
-    const RouteLinkElement = useRouteLinkElement();
+    const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
     const handleButtonClick = (e) => {
         if (onClick)
             onClick(e);
@@ -30,7 +27,7 @@ function Button({ _pseudo = 'none', children: _children, className, color = 'pri
     const children = (jsxs(Fragment, { children: [showIconOnLeft && iconElement, jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? _children : isLoading) : _children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }));
     if (href) {
         const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, href: buildHref({ basePath, href }), onClick: onClick, route: route, type: type, children: children }));
+        return (jsx(Element, { className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, route: route, type: type, ...getRouteLinkProps(href, route), children: children }));
     }
     return (jsx("button", { className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, form: form, formNoValidate: isValidating ? undefined : true, name: name, onClick: handleButtonClick, type: type, value: value, children: children }));
 }

package/dist/buttons/icon-button/icon-button.d.ts

@@ -4,6 +4,7 @@ export interface IconButtonProps {
     children: ReactNode;
     className?: string;
     color?: 'primary' | 'secondary' | 'current-color';
+    'data-test-selector'?: string;
     href?: string;
     isDisabled?: boolean;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
@@ -13,4 +14,4 @@ export interface IconButtonProps {
     title?: string;
     type?: 'button' | 'submit' | 'reset';
 }
-export declare function IconButton({ children, className: _className, color, href, isDisabled, onClick, size, target, title, type, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ children, className: _className, color, 'data-test-selector': dataTestSelector, href, isDisabled, onClick, route, size, target, title, type, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/icon-button/icon-button.js

@@ -1,14 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { buildHref } from '../../shared/routing/route-utils.js';
-import { useBasePath } from '../../shared/routing/use-base-path.js';
-import { useRouteLinkElement } from '../../shared/routing/use-route-link-element.js';
+import { useRouteLink } from '../../shared/routing/use-route-link.js';
 import styles from './icon-button.module.css.js';
 
-function IconButton({ children, className: _className, color = 'primary', href, isDisabled, onClick, size = 'md', target, title, type = 'button', ...rest }) {
-    const basePath = useBasePath();
-    const RouteLinkElement = useRouteLinkElement();
+function IconButton({ children, className: _className, color = 'primary', 'data-test-selector': dataTestSelector, href, isDisabled, onClick, route, size = 'md', target, title, type = 'button', ...rest }) {
+    const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
     const handleButtonClick = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -17,9 +14,9 @@ function IconButton({ children, className: _className, color = 'primary', href,
     const className = clsx(styles['icon-button'], styles[size], styles[color], _className);
     if (href) {
         const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { className: className, "data-disabled": isDisabled ? true : undefined, href: buildHref({ basePath, href }), onClick: onClick, target: target, title: title, ...rest, children: children }));
+        return (jsx(Element, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
     }
-    return (jsx("button", { className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: handleButtonClick, title: title, type: type, ...rest, children: children }));
+    return (jsx("button", { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: handleButtonClick, title: title, type: type, ...rest, children: children }));
 }
 
 export { IconButton };

package/dist/buttons/link/link.js

@@ -2,21 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { buildHref } from '../../shared/routing/route-utils.js';
-import { useBasePath } from '../../shared/routing/use-base-path.js';
-import { useRouteLinkElement } from '../../shared/routing/use-route-link-element.js';
+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, tabIndex, target, title, ...rest }, ref) => {
-    const basePath = useBasePath();
-    const RouteLinkElement = useRouteLinkElement();
+const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, 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) {
         const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, href: buildHref({ basePath, href }), id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
+        return (jsx(Element, { 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("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 }));
 });

package/dist/carousel/carousel.js

@@ -2,9 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useMemo } from 'react';
 import clsx from 'clsx';
-import Navigation from '../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/modules/navigation.js';
-import freeMode from '../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/modules/free-mode.js';
-import { Swiper, SwiperSlide } from '../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/swiper-react.js';
+import Navigation from '../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/navigation.js';
+import freeMode from '../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/free-mode.js';
+import { Swiper, SwiperSlide } from '../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/swiper-react.js';
 import { breakpoints } from '../shared/utils/breakpoints.js';
 import { deepMerge } from '../shared/utils/merge.js';
 import { CarouselNavigationButton } from './carousel-navigation-button.js';

package/dist/carousel/usp-carousel/usp-carousel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState } from 'react';
-import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/swiper-react.js';
+import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/swiper-react.js';
 import { CarouselPagination } from '../pagination/pagination.js';
 import styles from './usp-carousel.module.css.js';
 

package/dist/drawer/drawer.d.ts

@@ -13,6 +13,7 @@ export interface DrawerProps {
     allowCloseOnBackgroundClick?: boolean;
     children: ReactNode | ((args: ChildrenFunctionArgs) => ReactNode);
     className?: string;
+    'data-test-selector'?: string;
     groupId?: string;
     instanceId?: string;
     isInitialOpen?: boolean;
@@ -24,4 +25,4 @@ export interface DrawerProps {
     showUnder?: 'header' | 'announcement';
     timeout?: number;
 }
-export declare function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen, isOpen: isOpenControlled, onClose, onClosed, position, showBackgroundOverlay, showUnder, timeout, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ allowCloseOnBackgroundClick, children, className, 'data-test-selector': dataTestSelector, groupId, instanceId, isInitialOpen, isOpen: isOpenControlled, onClose, onClosed, position, showBackgroundOverlay, showUnder, timeout, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/drawer/drawer.js

@@ -8,7 +8,7 @@ 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, onClosed, position, showBackgroundOverlay, showUnder, timeout, }) {
+function Drawer({ allowCloseOnBackgroundClick, children, className, 'data-test-selector': dataTestSelector, groupId, instanceId, isInitialOpen = false, isOpen: isOpenControlled, onClose, onClosed, position, showBackgroundOverlay, showUnder, timeout, }) {
     const wasOpenRef = useRef(isInitialOpen);
     const asideRef = useRef(null);
     const useDrawerResult = useDrawer({
@@ -30,7 +30,7 @@ function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, ins
         return onClosed;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxs(Fragment, { children: [jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, addEndListener: createAddEndListener(asideRef), in: isOpen, nodeRef: asideRef, onExited: onClosed, timeout: timeout, children: jsx("aside", { ref: asideRef, className: clsx(styles.drawer, styles[position], showUnder === 'header' && styles['under-header'], showUnder === 'announcement' && styles['under-announcement'], className), children: children instanceof Function ? children(useDrawerResult) : children }, `${groupId}-${instanceId}`) }, groupId), showBackgroundOverlay && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, addEndListener: createAddEndListener(asideRef), in: isOpen, nodeRef: asideRef, onExited: onClosed, timeout: timeout, children: jsx("aside", { ref: asideRef, className: clsx(styles.drawer, styles[position], showUnder === 'header' && styles['under-header'], showUnder === 'announcement' && styles['under-announcement'], className), "data-test-selector": dataTestSelector, children: children instanceof Function ? children(useDrawerResult) : children }, `${groupId}-${instanceId}`) }, groupId), showBackgroundOverlay && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: () => {
                     if (!allowCloseOnBackgroundClick)
                         return;
                     if (isControlled) {

package/dist/drawer/use-drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect, useCallback, useMemo } from 'react';
 import { useGlobalState } from '../shared/providers/global-state-provider.js';
 import { createUUID } from '../shared/utils/uuid.js';

package/dist/exports.d.ts

@@ -355,6 +355,7 @@ export * from './shared/routing/types';
 export * from './shared/routing/use-base-path';
 export * from './shared/routing/use-navigate';
 export * from './shared/routing/use-on-navigate';
+export * from './shared/routing/use-route-link';
 export * from './shared/routing/use-route-link-element';
 export * from './shared/routing/with-routing';
 export * from './shared/utils/array';

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

@@ -19,6 +19,7 @@ function SelectField({ className, 'data-test-selector': dataTestSelector, defaul
         onChange?.(key);
     };
     useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
         setSelectedKey(selectedOption);
     }, [selectedOption]);
     return (jsx(Select, { "aria-label": label, className: clsx(styles['select-field'], styles[size], styles[variant], {

package/dist/global-search/search-result-panel/sections/with-results.js

@@ -1,5 +1,4 @@
 "use client";
-import { createElement } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useAlgoliaInsights } from '../../../algolia/use-algolia-insights.js';
@@ -56,10 +55,10 @@ function SuggestionsSection() {
 function ProductHitCard({ autocomplete, hit, index, source, }) {
     const { close } = useGlobalSearchDisclosure();
     const { sendAddToCartFromSearchEvent, sendAddToWishListFromSearchEvent, sendProductClickFromSearchEvent, } = useAlgoliaInsights();
-    return (createElement(ConnectedProductCard, { ...autocomplete.getItemProps({
+    return (jsx(ConnectedProductCard, { ...autocomplete.getItemProps({
             item: hit.hit,
             source,
-        }), key: hit.storefrontId, href: hit.storefrontSlug, id: hit.storefrontId, image: {
+        }), href: hit.storefrontSlug, id: hit.storefrontId, image: {
             fit: 'contain',
             image: hit.image,
             title: hit.name,
@@ -87,7 +86,7 @@ function ProductHitCard({ autocomplete, hit, index, source, }) {
             isVatIncluded: hit.isVatIncluded,
             originalPrice: hit.originalPrice,
             price: hit.price,
-        }, sku: hit.id, tags: hit.labels, title: jsx(Highlight, { attribute: "name", hit: hit.hit }) }));
+        }, sku: hit.id, tags: hit.labels, title: jsx(Highlight, { attribute: "name", hit: hit.hit }) }, hit.storefrontId));
 }
 function ProductResultsSection() {
     const { autocomplete, products: collection } = useAlgoliaSearch();

package/dist/header/buttons/account/connected-account-button.js

@@ -8,7 +8,7 @@ import { useFetchSession } from '../../../shared/api/storefront/hooks/authentica
 function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const t = useFormattedMessage();
     const { data: { isAuthenticated } = {} } = useFetchSession();
-    return (jsx(IconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My account') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
+    return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My account') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
 }
 
 export { ConnectedAccountButton };

package/dist/header/buttons/cart/connected-cart-button.js

@@ -8,7 +8,7 @@ import { useFetchCurrentCartCount } from '../../../shared/api/storefront/hooks/c
 function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const count = useFetchCurrentCartCount();
     const t = useFormattedMessage();
-    return (jsx(IconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(CartIcon, { "aria-label": t('Shopping cart'), count: count }) }));
+    return (jsx(IconButton, { className: className, "data-count": count, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(CartIcon, { "aria-label": t('Shopping cart'), count: count }) }));
 }
 
 export { ConnectedCartButton };

package/dist/header/drawers/desktop-navigation-drawer.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Drawer } from '../../drawer/drawer.js';
 import { PanelNavigation } from '../../navigation/panel-navigation/panel-navigation.js';
 import styles from './desktop-navigation-drawer.module.css.js';
 
 function DesktopNavigationDrawer({ groupId, instanceId, onClosed, submenu, }) {
-    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['desktop-navigation-drawer'], groupId: groupId, instanceId: instanceId, onClosed: onClosed, position: "top", showUnder: "header", children: submenu && (jsx(PanelNavigation, { header: submenu.url
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['desktop-navigation-drawer'], "data-test-selector": "desktopNavigationDrawer", groupId: groupId, instanceId: instanceId, onClosed: onClosed, position: "top", showUnder: "header", children: submenu && (jsx(PanelNavigation, { "data-test-selector": "desktopNavigationPanel", header: submenu.url
                 ? { href: submenu.url, title: submenu.title }
                 : submenu.title, id: `panels-${submenu.key}`, links: submenu.links }, submenu.key)) }));
 }

package/dist/header/drawers/mobile-navigation-drawer.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Drawer } from '../../drawer/drawer.js';
 import { MobileNavigation } from '../../navigation/mobile-navigation/mobile-navigation.js';
 import styles from './mobile-navigation-drawer.module.css.js';
 
 function MobileNavigationDrawer({ groupId, instanceId, links, }) {
-    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['mobile-navigation-drawer'], groupId: groupId, instanceId: instanceId, position: "left", showUnder: "announcement", children: ({ close, isOpen }) => (jsx(MobileNavigation, { id: "mobile-navigation", isActive: isOpen, links: links, onActiveChange: close })) }));
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['mobile-navigation-drawer'], "data-test-selector": "mobileNavigationDrawer", groupId: groupId, instanceId: instanceId, position: "left", showUnder: "announcement", children: ({ close, isOpen }) => (jsx(MobileNavigation, { id: "mobile-navigation", isActive: isOpen, links: links, onActiveChange: close })) }));
 }
 
 export { MobileNavigationDrawer };

package/dist/header/drawers/search-drawer.js

@@ -3,7 +3,7 @@ import { Drawer } from '../../drawer/drawer.js';
 import { SearchRoot } from '../../global-search/global-search.js';
 
 function SearchDrawer({ groupId, instanceId }) {
-    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, "data-test-selector": "searchDrawer", groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
 }
 
 export { SearchDrawer };

package/dist/header/header.js

@@ -65,7 +65,7 @@ function Header({ className, links, sticky }) {
         if (activeSubmenu)
             setDesktopNavigationOpen(true);
     }, [activeSubmenu, setDesktopNavigationOpen]);
-    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { href: PATHS.HOME, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeSubmenu, links: links, onSubmenuToggle: link => toggleActiveSubmenu(link) }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { href: PATHS.ACCOUNT }), jsx(ConnectedFavoritesButton, { href: PATHS.FAVORITES }), jsx(ConnectedCartButton, { href: PATHS.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, links: links })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, onClosed: () => setActiveSubmenu(undefined), submenu: activeSubmenu }))] }));
+    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), "data-test-selector": "pageHeader", children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "pageHeaderHamburgerButton", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { "data-test-selector": "pageHeaderLogo", href: PATHS.HOME, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeSubmenu, "data-test-selector": "pageHeaderMainNavigation", links: links, onSubmenuToggle: link => toggleActiveSubmenu(link) }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { "data-test-selector": "pageHeaderAccountButton", href: PATHS.ACCOUNT }), jsx(ConnectedFavoritesButton, { "data-test-selector": "pageHeaderFavoritesButton", href: PATHS.FAVORITES }), jsx(ConnectedCartButton, { "data-test-selector": "pageHeaderCartButton", href: PATHS.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", "data-test-selector": "pageHeaderSearchButton", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, links: links })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, onClosed: () => setActiveSubmenu(undefined), submenu: activeSubmenu }))] }));
 }
 
 export { Header };

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

@@ -1,7 +1,8 @@
 import { NavigationLink } from '../../shared/api/bff/model/bff.model';
 export interface LinkListProps {
     activeLink?: NavigationLink;
+    'data-test-selector'?: string;
     links: NavigationLink[];
     onSubmenuToggle: (link: NavigationLink) => void;
 }
-export declare function NavigationLinkList({ activeLink, links, onSubmenuToggle, }: LinkListProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, links, onSubmenuToggle, }: LinkListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,13 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Link } from '../../buttons/link/link.js';
 import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
 import styles from './navigation-link-list.module.css.js';
 
-function NavigationLinkList({ activeLink, links, onSubmenuToggle, }) {
-    return (jsx("ul", { className: styles['navigation-link-list'], children: links.map(link => {
+function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, links, onSubmenuToggle, }) {
+    return (jsx("ul", { className: styles['navigation-link-list'], "data-test-selector": dataTestSelector, children: links.map(link => {
             if (link.links && link.links.length > 0) {
-                return (jsx("li", { className: activeLink === link ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${link.key}`, "aria-expanded": activeLink === link, className: styles.link, onClick: () => onSubmenuToggle(link), target: link.openInNewTab ? '_blank' : undefined, children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron })] }) }, link.key));
+                return (jsx("li", { className: activeLink === link ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${link.key}`, "aria-expanded": activeLink === link, className: styles.link, "data-test-selector": `navigationLink-${link.key}`, onClick: () => onSubmenuToggle(link), target: link.openInNewTab ? '_blank' : undefined, children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron, role: "presentation" })] }) }, link.key));
             }
             return (jsx("li", { children: jsx(Link, { className: styles.link, href: link.url, children: link.title }) }, link.key));
         }) }));

package/dist/header/sonic-logo/sonic-logo.d.ts

@@ -1,6 +1,7 @@
 export interface SonicLogoProps {
     className?: string;
+    'data-test-selector'?: string;
     href?: string;
     title?: string;
 }
-export declare function SonicLogo({ className, href, title }: SonicLogoProps): import("react/jsx-runtime").JSX.Element;
+export declare function SonicLogo({ className, 'data-test-selector': dataTestSelector, href, title, }: SonicLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/sonic-logo/sonic-logo.js

@@ -1,12 +1,13 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Link } from '../../buttons/link/link.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './sonic-logo.module.css.js';
 
-function SonicLogo({ className, href, title }) {
+function SonicLogo({ className, 'data-test-selector': dataTestSelector, href, title, }) {
     const t = useFormattedMessage();
-    return (jsx(Link, { className: clsx(styles.wrapper, className), href: href, title: title, children: jsx("svg", { "aria-label": t('Sonic Equipment'), className: styles['sonic-logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }) }));
+    return (jsx(Link, { className: clsx(styles.wrapper, className), "data-test-selector": dataTestSelector, href: href, title: title, children: jsx("svg", { "aria-label": t('Sonic Equipment'), className: styles['sonic-logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }) }));
 }
 
 export { SonicLogo };

package/dist/index.js

@@ -354,6 +354,7 @@ export { buildHref } from './shared/routing/route-utils.js';
 export { useBasePath } from './shared/routing/use-base-path.js';
 export { useNavigate } from './shared/routing/use-navigate.js';
 export { useOnNavigate } from './shared/routing/use-on-navigate.js';
+export { useRouteLink } from './shared/routing/use-route-link.js';
 export { useRouteLinkElement } from './shared/routing/use-route-link-element.js';
 export { withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';

package/dist/lists/menu-list/menu-list-back-button.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 interface MenuListBackButtonProps {
     children: ReactNode;
+    'data-test-selector'?: string;
     onClick: VoidFunction;
 }
-export declare function MenuListBackButton({ children, onClick, }: MenuListBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuListBackButton({ children, 'data-test-selector': dataTestSelector, onClick, }: MenuListBackButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lists/menu-list/menu-list-back-button.js

@@ -3,8 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { GlyphsChevronsSlimLeftIcon } from '../../icons/glyph/glyphs-chevrons-slim-left-icon.js';
 import styles from './menu-list.module.css.js';
 
-function MenuListBackButton({ children, onClick, }) {
-    return (jsxs("button", { className: styles['menu-list-back-button'], onClick: onClick, type: "button", children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles['icon'], role: "presentation" }), children] }));
+function MenuListBackButton({ children, 'data-test-selector': dataTestSelector, onClick, }) {
+    return (jsxs("button", { className: styles['menu-list-back-button'], "data-test-selector": dataTestSelector, onClick: onClick, type: "button", children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles['icon'], role: "presentation" }), children] }));
 }
 
 export { MenuListBackButton };

package/dist/lists/menu-list/menu-list-header.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 interface MenuListHeaderProps {
     children: ReactNode;
+    'data-test-selector'?: string;
     href?: string;
 }
-export declare function MenuListHeader({ children, href }: MenuListHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuListHeader({ children, 'data-test-selector': dataTestSelector, href, }: MenuListHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lists/menu-list/menu-list-header.js

@@ -3,8 +3,8 @@ import { Link } from '../../buttons/link/link.js';
 import { GlyphsArrowBlackCapsRightIcon } from '../../icons/glyph/glyphs-arrow-blackcaps-right-icon.js';
 import styles from './menu-list.module.css.js';
 
-function MenuListHeader({ children, href }) {
-    return (jsxs("h2", { className: styles['menu-list-header'], children: [href && (jsxs(Link, { href: href, children: [children, jsx(GlyphsArrowBlackCapsRightIcon, { className: styles['icon'], role: "presentation" })] })), !href && children] }));
+function MenuListHeader({ children, 'data-test-selector': dataTestSelector, href, }) {
+    return (jsxs("h2", { className: styles['menu-list-header'], "data-test-selector": dataTestSelector, children: [href && (jsxs(Link, { href: href, children: [children, jsx(GlyphsArrowBlackCapsRightIcon, { className: styles['icon'], role: "presentation" })] })), !href && children] }));
 }
 
 export { MenuListHeader };

package/dist/lists/menu-list/menu-list-item.d.ts

@@ -4,6 +4,7 @@ export interface MenuListItemProps {
     'aria-controls'?: string;
     badge?: ReactNode;
     children: ReactNode | string;
+    'data-test-selector'?: string;
     hasChildren?: boolean;
     href?: string;
     image?: ImageType;
@@ -11,4 +12,4 @@ export interface MenuListItemProps {
     onClick?: VoidFunction;
     openInNewTab?: boolean;
 }
-export declare function MenuListItem({ 'aria-controls': ariaControls, badge, children, hasChildren, href, image, isSelected, onClick, openInNewTab, }: MenuListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuListItem({ 'aria-controls': ariaControls, badge, children, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }: MenuListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/menu-list/menu-list-item.js

@@ -7,9 +7,9 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Image } from '../../media/image/image.js';
 import styles from './menu-list.module.css.js';
 
-function MenuListItem({ 'aria-controls': ariaControls, badge, children, hasChildren, href, image, isSelected, onClick, openInNewTab, }) {
+function MenuListItem({ 'aria-controls': ariaControls, badge, children, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }) {
     const t = useFormattedMessage();
-    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children']), children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: children }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
+    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children']), "data-test-selector": dataTestSelector, ...rest, children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: children }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
 }
 
 export { MenuListItem };

package/dist/lists/menu-list/menu-list.js

@@ -8,7 +8,7 @@ import styles from './menu-list.module.css.js';
 function MenuList({ back, children, header, scrollable = true, variant = 'default', }) {
     const headerTitle = typeof header === 'string' ? header : header?.title;
     const headerHref = typeof header === 'string' ? undefined : header?.href;
-    return (jsxs("section", { className: clsx(styles['menu-list'], styles[variant], scrollable && styles['scrollable']), role: "menu", children: [back && (jsx(MenuListBackButton, { onClick: back.onClick, children: back.title })), jsxs("div", { className: styles['scroll-area'], children: [header && (jsx(MenuListHeader, { href: headerHref, children: headerTitle })), jsx("ul", { className: styles['list'], children: children })] })] }));
+    return (jsxs("section", { className: clsx(styles['menu-list'], styles[variant], scrollable && styles['scrollable']), role: "menu", children: [back && (jsx(MenuListBackButton, { "data-test-selector": "menuListBackButton", onClick: back.onClick, children: back.title })), jsxs("div", { className: styles['scroll-area'], "data-test-selector": "menuListScrollArea", children: [header && (jsx(MenuListHeader, { "data-test-selector": "menuListHeader", href: headerHref, children: headerTitle })), jsx("ul", { className: styles['list'], children: children })] })] }));
 }
 
 export { MenuList };

package/dist/media/image-lightbox/image-lightbox.js

@@ -2,9 +2,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import clsx from 'clsx';
-import Navigation from '../../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/modules/navigation.js';
-import Thumb from '../../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/modules/thumbs.js';
-import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.5/node_modules/swiper/swiper-react.js';
+import Navigation from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/navigation.js';
+import Thumb from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/thumbs.js';
+import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/swiper-react.js';
 import { CarouselNavigationButton } from '../../carousel/carousel-navigation-button.js';
 import { CarouselPagination } from '../../carousel/pagination/pagination.js';
 import { Image } from '../image/image.js';

package/dist/navigation/cart-icon/cart-icon.js

@@ -7,7 +7,7 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 
 function CartIcon({ 'aria-label': ariaLabel, count }) {
     const t = useFormattedMessage();
-    return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: count && count > 0 ? (jsx(Badge, { "aria-label": count && count > 0 ? `(${t('Number of products')})` : undefined, count: count })) : undefined, "data-test-selector": "cartIcon", icon: jsx(SolidCartIcon, { role: "presentation" }) }));
+    return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: count && count > 0 ? (jsx(Badge, { "aria-label": count && count > 0 ? `(${t('Number of products')})` : undefined, count: count })) : undefined, "data-foo": "foo", "data-test-selector": "cartIcon", icon: jsx(SolidCartIcon, { role: "presentation" }) }));
 }
 
 export { CartIcon };

package/dist/navigation/mobile-navigation/mobile-navigation.js

@@ -19,7 +19,7 @@ function MobileNavigation({ id, isActive, links, onActiveChange, }) {
     const t = useFormattedMessage();
     const { data: { isAuthenticated } = {} } = useFetchSession();
     const cartCount = useFetchCurrentCartCount();
-    return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), href: PATHS.ACCOUNT, children: isAuthenticated ? t('My account') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), href: PATHS.CART, children: t('Shopping cart') })] }) })] }));
+    return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), "data-test-selector": "mobileNavigationMenu", id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "mobileNavigationHamburgerButton", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], "data-test-selector": "mobileNavigationPanel", isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), "data-authenticated": isAuthenticated ? true : false, "data-test-selector": "mobileNavigationAccountButton", href: PATHS.ACCOUNT, children: isAuthenticated ? t('My account') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), "data-test-selector": "mobileNavigationFavoritesButton", href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), "data-count": cartCount, "data-test-selector": "mobileNavigationCartButton", href: PATHS.CART, children: t('Shopping cart') })] }) })] }));
 }
 
 export { MobileNavigation };

package/dist/navigation/panel-navigation/panel-navigation.d.ts

@@ -4,6 +4,7 @@ export interface PanelNavigationProps {
     allowBack?: boolean;
     children?: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     header?: string | {
         href: string;
         title: string;
@@ -13,4 +14,4 @@ export interface PanelNavigationProps {
     links?: NavigationLink[];
     variant?: 'primary';
 }
-export declare function PanelNavigation({ allowBack, children, className, header, id, isNarrow, links, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, links, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/panel-navigation/panel-navigation.js

@@ -37,9 +37,9 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
         setSelectedNavigationVisible(Boolean(selectedNavigationLink));
     }, [selectedNavigationLink]);
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: links?.map(link => link.links && link.links.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), "data-test-selector": "panelNavigation", id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: links?.map(link => link.links && link.links.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, "data-test-selector": "panelNavigationItem", image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
                                 ? undefined
-                                : link), children: link.title }, link.key)) : (jsx(MenuListItem, { href: link.url, image: link.image, openInNewTab: link.openInNewTab, children: link.title }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
+                                : link), children: link.title }, link.key)) : (jsx(MenuListItem, { "data-test-selector": "panelNavigationItem", href: link.url, image: link.image, openInNewTab: link.openInNewTab, children: link.title }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
                         ? {
                             onClick: () => {
                                 setSelectedNavigationVisible(false);
@@ -62,8 +62,8 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
                         : [] }, selectedNavigationLink?.key) })] }));
 });
 NavigationMenu.displayName = 'NavigationMenu';
-function PanelNavigation({ allowBack, children, className, header, id, isNarrow, links, variant, }) {
-    return (jsx("section", { className: clsx(styles['panel-navigation'], className), id: id, children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, links: links, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
+function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, links, variant, }) {
+    return (jsx("section", { className: clsx(styles['panel-navigation'], className), "data-test-selector": dataTestSelector, id: id, children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, links: links, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
 }
 
 export { PanelNavigation };

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/modules/free-mode.js

@@ -1,4 +1,4 @@
-import { d as now, k as elementTransitionEnd } from '../shared/utils.js';
+import { f as now, l as elementTransitionEnd } from '../shared/utils.js';
 
 function freeMode(_ref) {
   let {

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/modules/thumbs.js

@@ -1,5 +1,5 @@
 import { g as getDocument } from '../shared/ssr-window.esm.js';
-import { l as isObject, e as elementChildren } from '../shared/utils.js';
+import { o as isObject, e as elementChildren } from '../shared/utils.js';
 
 function Thumb(_ref) {
   let {

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/shared/swiper-core.js

@@ -1,5 +1,5 @@
 import { a as getWindow, g as getDocument } from './ssr-window.esm.js';
-import { w as extend, u as showWarning, e as elementChildren, n as nextTick, t as animateCSSModeScroll, j as getTranslate, q as elementNextAll, r as elementPrevAll, s as setCSSProperty, p as elementStyle, f as elementOuterSize, h as elementIndex, c as createElement, x as deleteProps, v as elementIsChildOf, d as now, a as elementParents } from './utils.js';
+import { x as extend, v as showWarning, e as elementChildren, n as nextTick, u as animateCSSModeScroll, k as getTranslate, r as elementNextAll, t as elementPrevAll, a as setCSSProperty, q as elementStyle, h as elementOuterSize, i as elementIndex, c as createElement, y as deleteProps, w as elementIsChildOf, f as now, b as elementParents } from './utils.js';
 
 let support;
 function calcSupport() {
@@ -1310,11 +1310,9 @@ function transitionEmit(_ref) {
     if (activeIndex > previousIndex) dir = 'next';else if (activeIndex < previousIndex) dir = 'prev';else dir = 'reset';
   }
   swiper.emit(`transition${step}`);
-  if (runCallbacks && activeIndex !== previousIndex) {
-    if (dir === 'reset') {
-      swiper.emit(`slideResetTransition${step}`);
-      return;
-    }
+  if (runCallbacks && dir === 'reset') {
+    swiper.emit(`slideResetTransition${step}`);
+  } else if (runCallbacks && activeIndex !== previousIndex) {
     swiper.emit(`slideChangeTransition${step}`);
     if (dir === 'next') {
       swiper.emit(`slideNextTransition${step}`);
@@ -1810,7 +1808,7 @@ var slide = {
   slideToClickedSlide
 };
 
-function loopCreate(slideRealIndex) {
+function loopCreate(slideRealIndex, initial) {
   const swiper = this;
   const {
     params,
@@ -1858,7 +1856,8 @@ function loopCreate(slideRealIndex) {
   }
   swiper.loopFix({
     slideRealIndex,
-    direction: params.centeredSlides ? undefined : 'next'
+    direction: params.centeredSlides ? undefined : 'next',
+    initial
   });
 }
 
@@ -1869,6 +1868,7 @@ function loopFix(_temp) {
     direction,
     setTranslate,
     activeSlideIndex,
+    initial,
     byController,
     byMousewheel
   } = _temp === void 0 ? {} : _temp;
@@ -1883,7 +1883,8 @@ function loopFix(_temp) {
     params
   } = swiper;
   const {
-    centeredSlides
+    centeredSlides,
+    initialSlide
   } = params;
   swiper.allowSlidePrev = true;
   swiper.allowSlideNext = true;
@@ -1919,14 +1920,16 @@ function loopFix(_temp) {
   loopedSlides += params.loopAdditionalSlides;
   swiper.loopedSlides = loopedSlides;
   const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
-  if (slides.length < slidesPerView + loopedSlides) {
-    showWarning('Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters');
+  if (slides.length < slidesPerView + loopedSlides || swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2) {
+    showWarning('Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters');
   } else if (gridEnabled && params.grid.fill === 'row') {
     showWarning('Swiper Loop Warning: Loop mode is not compatible with grid.fill = `row`');
   }
   const prependSlidesIndexes = [];
   const appendSlidesIndexes = [];
-  let activeIndex = swiper.activeIndex;
+  const cols = gridEnabled ? Math.ceil(slides.length / params.grid.rows) : slides.length;
+  const isInitialOverflow = initial && cols - initialSlide < slidesPerView && !centeredSlides;
+  let activeIndex = isInitialOverflow ? initialSlide : swiper.activeIndex;
   if (typeof activeSlideIndex === 'undefined') {
     activeSlideIndex = swiper.getSlideIndex(slides.find(el => el.classList.contains(params.slideActiveClass)));
   } else {
@@ -1936,7 +1939,6 @@ function loopFix(_temp) {
   const isPrev = direction === 'prev' || !direction;
   let slidesPrepended = 0;
   let slidesAppended = 0;
-  const cols = gridEnabled ? Math.ceil(slides.length / params.grid.rows) : slides.length;
   const activeColIndex = gridEnabled ? slides[activeSlideIndex].column : activeSlideIndex;
   const activeColIndexWithShift = activeColIndex + (centeredSlides && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0);
   // prepend last slides before start
@@ -1958,6 +1960,9 @@ function loopFix(_temp) {
     }
   } else if (activeColIndexWithShift + slidesPerView > cols - loopedSlides) {
     slidesAppended = Math.max(activeColIndexWithShift - (cols - loopedSlides * 2), slidesPerGroup);
+    if (isInitialOverflow) {
+      slidesAppended = Math.max(slidesAppended, slidesPerView - cols + initialSlide + 1);
+    }
     for (let i = 0; i < slidesAppended; i += 1) {
       const index = i - Math.floor(i / cols) * cols;
       if (gridEnabled) {
@@ -1973,6 +1978,14 @@ function loopFix(_temp) {
   requestAnimationFrame(() => {
     swiper.__preventObserver__ = false;
   });
+  if (swiper.params.effect === 'cards' && slides.length < slidesPerView + loopedSlides * 2) {
+    if (appendSlidesIndexes.includes(activeSlideIndex)) {
+      appendSlidesIndexes.splice(appendSlidesIndexes.indexOf(activeSlideIndex), 1);
+    }
+    if (prependSlidesIndexes.includes(activeSlideIndex)) {
+      prependSlidesIndexes.splice(prependSlidesIndexes.indexOf(activeSlideIndex), 1);
+    }
+  }
   if (isPrev) {
     prependSlidesIndexes.forEach(index => {
       slides[index].swiperLoopMoveDOM = true;
@@ -2329,7 +2342,9 @@ function onTouchMove(event) {
         data.isMoved = false;
         return;
       }
-    } else if (pageX < touches.startX && swiper.translate <= swiper.maxTranslate() || pageX > touches.startX && swiper.translate >= swiper.minTranslate()) {
+    } else if (rtl && (pageX > touches.startX && -swiper.translate <= swiper.maxTranslate() || pageX < touches.startX && -swiper.translate >= swiper.minTranslate())) {
+      return;
+    } else if (!rtl && (pageX < touches.startX && swiper.translate <= swiper.maxTranslate() || pageX > touches.startX && swiper.translate >= swiper.minTranslate())) {
       return;
     }
   }
@@ -3794,7 +3809,7 @@ class Swiper {
 
     // Create loop
     if (swiper.params.loop) {
-      swiper.loopCreate();
+      swiper.loopCreate(undefined, true);
     }
 
     // Attach events

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/shared/update-on-virtual-data.js

@@ -122,6 +122,7 @@ const updateOnVirtualData = swiper => {
   swiper.updateSlides();
   swiper.updateProgress();
   swiper.updateSlidesClasses();
+  swiper.emit('_virtualUpdated');
   if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
     swiper.parallax.setTranslate();
   }

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/shared/update-swiper.js

@@ -1,3 +1,5 @@
+import { s as setInnerHTML } from './utils.js';
+
 /* underscore in name -> watch for changes */
 const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'swiperElementNodeName', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
 // modules
@@ -192,14 +194,14 @@ function updateSwiper(_ref) {
       if (!nextEl || typeof nextEl === 'string') {
         nextEl = document.createElement('div');
         nextEl.classList.add('swiper-button-next');
-        nextEl.innerHTML = swiper.hostEl.constructor.nextButtonSvg;
+        setInnerHTML(nextEl, swiper.hostEl.constructor.nextButtonSvg);
         nextEl.part.add('button-next');
         swiper.el.appendChild(nextEl);
       }
       if (!prevEl || typeof prevEl === 'string') {
         prevEl = document.createElement('div');
         prevEl.classList.add('swiper-button-prev');
-        prevEl.innerHTML = swiper.hostEl.constructor.prevButtonSvg;
+        setInnerHTML(prevEl, swiper.hostEl.constructor.prevButtonSvg);
         prevEl.part.add('button-prev');
         swiper.el.appendChild(prevEl);
       }

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/shared/utils.js

@@ -299,5 +299,17 @@ function elementOuterSize(el, size, includeMargins) {
 function makeElementsArray(el) {
   return (Array.isArray(el) ? el : [el]).filter(e => !!e);
 }
+function setInnerHTML(el, html) {
+  if (html === void 0) {
+    html = '';
+  }
+  if (typeof trustedTypes !== 'undefined') {
+    el.innerHTML = trustedTypes.createPolicy('html', {
+      createHTML: s => s
+    }).createHTML(html);
+  } else {
+    el.innerHTML = html;
+  }
+}
 
-export { elementParents as a, createElement as c, now as d, elementChildren as e, elementOuterSize as f, elementIndex as h, classesToTokens as i, getTranslate as j, elementTransitionEnd as k, isObject as l, makeElementsArray as m, nextTick as n, elementStyle as p, elementNextAll as q, elementPrevAll as r, setCSSProperty as s, animateCSSModeScroll as t, showWarning as u, elementIsChildOf as v, extend as w, deleteProps as x };
+export { setCSSProperty as a, elementParents as b, createElement as c, elementChildren as e, now as f, elementOuterSize as h, elementIndex as i, classesToTokens as j, getTranslate as k, elementTransitionEnd as l, makeElementsArray as m, nextTick as n, isObject as o, elementStyle as q, elementNextAll as r, setInnerHTML as s, elementPrevAll as t, animateCSSModeScroll as u, showWarning as v, elementIsChildOf as w, extend as x, deleteProps as y };

package/dist/node_modules/.pnpm/{swiper@11.2.5 → swiper@11.2.8}/node_modules/swiper/swiper-react.js

@@ -4,7 +4,7 @@ import { g as getParams, m as mountSwiper, a as getChangedParams, u as updateOnV
 import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination, e as extend, u as updateSwiper } from './shared/update-swiper.js';
 
 /**
- * Swiper React 11.2.5
+ * Swiper React 11.2.8
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -12,7 +12,7 @@ import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needs
  *
  * Released under the MIT License
  *
- * Released on: March 3, 2025
+ * Released on: May 23, 2025
  */
 
 

package/dist/notifications/announcements/announcement-list.js

@@ -15,7 +15,7 @@ function AnnouncementList({ announcements, className, onDismiss, sticky, }) {
         const height = Math.floor(size.height);
         document?.documentElement.style.setProperty('--announcements-height', `${height}px`);
     });
-    return (jsx("section", { ref: announcementRef, className: clsx(styles['announcement-list'], sticky && styles['sticky'], className), children: jsx(TransitionGroup, { className: styles['list'], role: "list", children: filteredAnnouncements.map(announcement => (jsx(CSSTransition, { classNames: {
+    return (jsx("section", { ref: announcementRef, className: clsx(styles['announcement-list'], sticky && styles['sticky'], className), "data-test-selector": "announcementList", children: jsx(TransitionGroup, { className: styles['list'], role: "list", children: filteredAnnouncements.map(announcement => (jsx(CSSTransition, { classNames: {
                     enter: styles['enter'],
                     enterActive: styles['enter-active'],
                     exit: styles['exit'],

package/dist/notifications/announcements/announcement.js

@@ -26,8 +26,8 @@ const iconMap = {
     sales: jsx(SolidSaleIcon, {}),
 };
 const Announcement = forwardRef(({ announcement: { href, id, subType, text, title, type }, className, onDismiss, }, ref) => {
-    return (jsx("div", { ref: multiRef(ref), className: clsx(styles.announcement, styles[type], styles[subType], className), role: "listitem", children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, role: "presentation", children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), text &&
-                            (href ? (jsxs(Link, { className: styles.link, href: href, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })) : (jsx("p", { className: styles.text, children: text })))] }), jsx(IconButton, { className: styles.close, color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) })] }) }));
+    return (jsx("div", { ref: multiRef(ref), className: clsx(styles.announcement, styles[type], styles[subType], className), "data-id": id, "data-sub-type": subType, "data-test-selector": "announcement", "data-type": type, role: "listitem", children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, role: "presentation", children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, "data-test-selector": "announcementTitle", children: title }), text &&
+                            (href ? (jsxs(Link, { className: styles.link, "data-test-selector": "announcementLink", href: href, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })) : (jsx("p", { className: styles.text, children: text })))] }), jsx(IconButton, { className: styles.close, color: "current-color", "data-test-selector": "announcementCloseButton", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) })] }) }));
 });
 Announcement.displayName = 'Announcement';
 

package/dist/pages/checkout/payment-page/hooks/use-get-adyen-redirect-result.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef } from 'react';
 import qs from 'query-string';
 

package/dist/shared/api/storefront/hooks/cart/use-fetch-cart-by-id.d.ts

@@ -5,4 +5,4 @@ export interface UseFetchCartByIdArgs<T> {
     id: string;
     select?: (data: CartModel) => T;
 }
-export declare function useFetchCartById<T = CartModel>({ enabled, forceRecalculation, id, select, }: UseFetchCartByIdArgs<T>): import("@tanstack/react-query").UseQueryResult<T, Error>;
+export declare function useFetchCartById<T = CartModel>({ enabled, forceRecalculation, id, select, }: UseFetchCartByIdArgs<T>): import("@tanstack/react-query").UseQueryResult<import("@tanstack/react-query").NoInfer<T>, Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart.d.ts

@@ -1,3 +1,3 @@
 import { CartModel } from '../../model/storefront.model';
 import { UseFetchCartByIdArgs } from './use-fetch-cart-by-id';
-export declare function useFetchCurrentCart<T = CartModel>(args?: Omit<UseFetchCartByIdArgs<T>, 'id'>): import("@tanstack/react-query").UseQueryResult<T, Error>;
+export declare function useFetchCurrentCart<T = CartModel>(args?: Omit<UseFetchCartByIdArgs<T>, 'id'>): import("@tanstack/react-query").UseQueryResult<import("@tanstack/react-query").NoInfer<T>, Error>;

package/dist/shared/api/storefront/hooks/website/use-fetch-countries-with-languages.d.ts

@@ -2,4 +2,4 @@ import { Country } from '../../model/storefront.model';
 export declare function useFetchCountriesWithLanguages<TReturnType = Country[]>({ enabled, select, }?: {
     enabled?: boolean;
     select?: (data: Country[]) => TReturnType;
-}): import("@tanstack/react-query").UseQueryResult<TReturnType, Error>;
+}): import("@tanstack/react-query").UseQueryResult<import("@tanstack/react-query").NoInfer<TReturnType>, Error>;

package/dist/shared/hooks/use-debounced-callback.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useCallback } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/shared/hooks/use-enable-mobile-zoom.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from 'react';
 
 function useEnableMobileZoom({ isEnabled }) {

package/dist/shared/hooks/use-intersection-observer.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect } from 'react';
 
 function useIntersectionObserver({ isDisabled, observables, onIntersectingChange, }) {

package/dist/shared/hooks/use-mutation-observer.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from 'react';
 
 function useMutationObserver(onChange, options) {

package/dist/shared/hooks/use-resize-observer.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from 'react';
 
 function useResizeObserver(resizeCallback) {

package/dist/shared/routing/types.d.ts

@@ -6,6 +6,7 @@ export interface RouteContext {
 }
 export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement> {
     href: string;
+    onNavigate: () => void;
     route?: NavigateOptions;
 }
 export interface NavigateOptions {

package/dist/shared/routing/use-route-link.d.ts

@@ -0,0 +1,8 @@
+import { NavigateOptions } from './types';
+export declare function useRouteLink(): {
+    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps> | undefined;
+    getRouteLinkProps: (href: string, route?: NavigateOptions) => {
+        href: string;
+        onNavigate: () => void;
+    };
+};

package/dist/shared/routing/use-route-link.js

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { buildHref } from './route-utils.js';
+import { useBasePath } from './use-base-path.js';
+import { useOnNavigate } from './use-on-navigate.js';
+import { useRouteLinkElement } from './use-route-link-element.js';
+
+function useRouteLink() {
+    const basePath = useBasePath();
+    const RouteLinkElement = useRouteLinkElement();
+    const triggerCallbacks = useOnNavigate();
+    const getRouteLinkProps = useCallback((href, route) => {
+        href = buildHref({ basePath, href });
+        return {
+            href,
+            onNavigate: () => triggerCallbacks(href, route),
+        };
+    }, [basePath, triggerCallbacks]);
+    return {
+        RouteLinkElement,
+        getRouteLinkProps,
+    };
+}
+
+export { useRouteLink };

package/dist/styles.css

@@ -3379,7 +3379,7 @@ html {
 }
 
 /**
- * Swiper 11.2.5
+ * Swiper 11.2.8
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -3387,7 +3387,7 @@ html {
  *
  * Released under the MIT License
  *
- * Released on: March 3, 2025
+ * Released on: May 23, 2025
  */
 
 /* FONT_START */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "170.0.0",
+  "version": "171.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -52,59 +52,59 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@csstools/postcss-global-data": "3.0.0",
-    "@eslint-react/eslint-plugin": "^1.35.0",
+    "@eslint-react/eslint-plugin": "^1.50.0",
     "@rollup/plugin-alias": "5.1.1",
     "@rollup/plugin-commonjs": "28.0.3",
     "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-replace": "6.0.2",
     "@rollup/plugin-typescript": "12.1.2",
-    "@storybook/addon-docs": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/addon-viewport": "^8.6.7",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/preview-api": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-vite": "^8.6.7",
-    "@storybook/test": "^8.6.7",
+    "@storybook/addon-docs": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-viewport": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/preview-api": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/js-cookie": "3.0.6",
-    "@types/node": "22.13.10",
+    "@types/node": "22.15.23",
     "@types/postcss-import": "14.0.3",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.26.1",
-    "@typescript-eslint/parser": "8.26.1",
+    "@typescript-eslint/eslint-plugin": "8.33.0",
+    "@typescript-eslint/parser": "8.33.0",
     "@typescript/lib-dom": "npm:typescript-partial-lib-dom@^1.1.0",
-    "@vitejs/plugin-react": "4.3.4",
+    "@vitejs/plugin-react": "4.5.0",
     "autoprefixer": "10.4.21",
     "concurrently": "9.1.2",
     "eslint": "8.57.0",
-    "eslint-config-prettier": "10.1.1",
-    "eslint-import-resolver-typescript": "3.9.1",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-import-resolver-typescript": "3.10.1",
     "eslint-plugin-css-modules": "^2.12.0",
-    "eslint-plugin-formatjs": "^5.2.14",
+    "eslint-plugin-formatjs": "^5.3.1",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-mdx": "3.2.0",
-    "eslint-plugin-prettier": "5.2.3",
-    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-mdx": "3.4.2",
+    "eslint-plugin-prettier": "5.4.0",
+    "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-sort-destructure-keys": "2.0.0",
     "eslint-plugin-sort-keys-fix": "1.1.2",
     "eslint-plugin-ssr-friendly": "^1.3.0",
-    "eslint-plugin-storybook": "^0.11.6",
+    "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-typescript-sort-keys": "3.3.0",
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-unused-imports": "4.1.4",
     "http-server": "14.1.1",
     "husky": "9.1.7",
-    "instantsearch.js": "4.78.0",
-    "nodemon": "3.1.9",
+    "instantsearch.js": "4.78.3",
+    "nodemon": "3.1.10",
     "postcss": "8.5.3",
-    "postcss-custom-media": "11.0.5",
+    "postcss-custom-media": "11.0.6",
     "postcss-import": "16.1.0",
     "postcss-nested": "7.0.2",
     "prettier": "3.5.3",
@@ -112,44 +112,44 @@
     "react-dom": "18.3.1",
     "react-json-view": "1.21.3",
     "rimraf": "6.0.1",
-    "rollup": "4.36.0",
+    "rollup": "4.41.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^8.6.7",
-    "stylelint": "16.16.0",
+    "storybook": "^8.6.14",
+    "stylelint": "16.19.1",
     "stylelint-config-css-modules": "4.4.0",
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-config-standard": "37.0.0",
-    "typescript": "5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "6.2.2",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.33.0",
+    "vite": "6.3.5",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.0.9"
+    "vitest": "3.1.4"
   },
   "dependencies": {
     "@adyen/adyen-web": "5.32.0",
-    "@algolia/autocomplete-core": "1.18.1",
-    "@algolia/autocomplete-plugin-query-suggestions": "1.18.1",
-    "@algolia/autocomplete-plugin-recent-searches": "1.18.1",
-    "@algolia/autocomplete-preset-algolia": "1.18.1",
+    "@algolia/autocomplete-core": "1.19.2",
+    "@algolia/autocomplete-plugin-query-suggestions": "1.19.2",
+    "@algolia/autocomplete-plugin-recent-searches": "1.19.2",
+    "@algolia/autocomplete-preset-algolia": "1.19.2",
     "@algolia/client-search": "4.24.0",
-    "@tanstack/react-query": "5.69.0",
-    "@tanstack/react-query-devtools": "5.69.0",
+    "@tanstack/react-query": "5.77.2",
+    "@tanstack/react-query-devtools": "5.77.2",
     "@types/react-transition-group": "4.4.12",
     "algoliasearch": "4.24.0",
     "clsx": "2.1.1",
     "fast-equals": "5.2.2",
-    "instantsearch.js": "4.78.0",
+    "instantsearch.js": "4.78.3",
     "js-cookie": "3.0.5",
-    "query-string": "9.1.1",
-    "react-aria": "3.38.1",
-    "react-aria-components": "1.7.1",
-    "react-instantsearch": "7.15.4",
+    "query-string": "9.2.0",
+    "react-aria": "3.40.0",
+    "react-aria-components": "1.9.0",
+    "react-instantsearch": "7.15.8",
     "react-toastify": "10.0.6",
     "react-transition-group": "4.4.5",
     "search-insights": "2.17.3",
-    "swiper": "11.2.5"
+    "swiper": "11.2.8"
   },
   "publishConfig": {
     "access": "public"