@sonic-equipment/ui 170.0.0 → 173.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/cards/orderline-card/orderline-card.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { ImageSourceType } from '../../shared/model/image';
 import { ProductTotalPriceType } from '../../shared/model/price';
 export interface BaseOrderLineCardProps {
-    deliveryDate?: Date;
+    deliveryDate?: Date | null;
     href: string;
     image: ImageSourceType;
     isReadonly: boolean;

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/delivery-time/delivery-time.d.ts

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

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

@@ -11,7 +11,9 @@ import styles from './delivery-time.module.css.js';
 function DeliveryTime({ className, deliveryDate }) {
     const { cultureCode } = useIntl();
     const t = useFormattedMessage();
-    if (!deliveryDate) {
+    if (deliveryDate === undefined)
+        return null;
+    if (deliveryDate === null) {
         return (jsx("div", { className: clsx(styles['delivery-time'], className), children: jsx("p", { 
                 // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
                 dangerouslySetInnerHTML: {

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 };