@sonic-equipment/ui 169.0.0 → 171.0.0

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

@@ -1,9 +1,9 @@
 "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';
 import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
+import { Button } from '../../../buttons/button/button.js';
 import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
 import { StrokeRecentIcon } from '../../../icons/stroke/stroke-recent-icon.js';
@@ -12,7 +12,6 @@ import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { PromoCard } from '../../../promos/promo-card/promo-card.js';
 import { isProductHit } from '../../../shared/model/hit.js';
-import { RouteButton } from '../../../shared/routing/route-button.js';
 import { useGlobalSearchDisclosure } from '../../global-search-provider/use-search-disclosure.js';
 import { Highlight } from '../../search-highlight/highlight.js';
 import { SearchList } from '../../search-section/search-list.js';
@@ -26,7 +25,7 @@ import styles from './search-content.module.css.js';
 function WithResults({ isLoading }) {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: !isLoading && (jsx(RouteButton, { withArrow: true, className: clsx(styles['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${encodeURIComponent(state.query)}`, onClick: close, children: jsx(FormattedMessage, { id: "See all results" }) })), leftContent: jsx(SuggestionsSection, {}), rightContent: isLoading ? jsx(SearchingSection, {}) : jsx(ProductResultsSection, {}) }) }));
+    return (jsx("div", { children: jsx(SectionContainer, { buttons: !isLoading && (jsx(Button, { withArrow: true, className: clsx(styles['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${encodeURIComponent(state.query)}`, onClick: close, children: jsx(FormattedMessage, { id: "See all results" }) })), leftContent: jsx(SuggestionsSection, {}), rightContent: isLoading ? jsx(SearchingSection, {}) : jsx(ProductResultsSection, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();
@@ -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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { AccountIcon } from '../../../navigation/account-icon/account-icon.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
-import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
 
 function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const t = useFormattedMessage();
     const { data: { isAuthenticated } = {} } = useFetchSession();
-    return (jsx(RouteIconButton, { 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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { CartIcon } from '../../../navigation/cart-icon/cart-icon.js';
 import { useFetchCurrentCartCount } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
-import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
 
 function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const count = useFetchCurrentCartCount();
     const t = useFormattedMessage();
-    return (jsx(RouteIconButton, { 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/buttons/favorites/connected-favorites-button.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { FavoriteIcon } from '../../../navigation/favorite-icon/favorite-icon.js';
-import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
 
 function ConnectedFavoritesButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
     const t = useFormattedMessage();
     // TODO: add a count of total favorites
-    return (jsx(RouteIconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(FavoriteIcon, { "aria-label": t('Favorites') }) }));
+    return (jsx(IconButton, { className: className, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(FavoriteIcon, { "aria-label": t('Favorites') }) }));
 }
 
 export { ConnectedFavoritesButton };

package/dist/header/buttons/search/search-button.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { RouteIconButton } from '../../../shared/routing/route-icon-button.js';
 
 function SearchButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
     const t = useFormattedMessage();
-    return (jsx(RouteIconButton, { "aria-controls": ariaControls, "aria-expanded": typeof isActive === 'boolean' ? isActive : undefined, "aria-label": t('Search'), "data-test-selector": dataTestSelector, onClick: () => onActiveChange(!isActive), children: jsx(StrokeSearchIcon, { role: "presentation" }) }));
+    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": typeof isActive === 'boolean' ? isActive : undefined, "aria-label": t('Search'), "data-test-selector": dataTestSelector, onClick: () => onActiveChange(!isActive), children: jsx(StrokeSearchIcon, { role: "presentation" }) }));
 }
 
 export { SearchButton };

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,14 +1,15 @@
+"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 { RouteLink } from '../../shared/routing/route-link.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(RouteLink, { "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(RouteLink, { className: styles.link, href: link.url, children: link.title }) }, 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,13 +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 { RouteLink } from '../../shared/routing/route-link.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();
-    const Tag = href ? RouteLink : 'div';
-    return (jsx(Tag, { 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

@@ -349,13 +349,13 @@ export { CartProvider, useCartEvents } from './shared/providers/cart-provider.js
 export { FavoriteProvider, useFavorite, useFavoriteProduct } from './shared/providers/favorite-provider.js';
 export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState } from './shared/providers/global-state-provider.js';
 export { ReactQueryContainer } from './shared/providers/react-query-container.js';
-export { RouteButton } from './shared/routing/route-button.js';
-export { RouteIconButton } from './shared/routing/route-icon-button.js';
-export { RouteLink } from './shared/routing/route-link.js';
 export { RouteProvider } from './shared/routing/route-provider.js';
+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';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.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

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link } from '../../buttons/link/link.js';
 import { GlyphsArrowBlackCapsRightIcon } from '../../icons/glyph/glyphs-arrow-blackcaps-right-icon.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './menu-list.module.css.js';
 
-function MenuListHeader({ children, href }) {
-    return (jsxs("h2", { className: styles['menu-list-header'], children: [href && (jsxs(RouteLink, { 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

@@ -1,15 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
 import { GlyphsChevronsSlimRightIcon } from '../../icons/glyph/glyphs-chevrons-slim-right-icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Image } from '../../media/image/image.js';
-import { RouteLink } from '../../shared/routing/route-link.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(RouteLink, { "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/modals/signin/sign-in-dialog.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button } from '../../buttons/button/button.js';
 import { SolidOkayIcon } from '../../icons/solid/solid-okay-icon.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { IconList, IconListItem } from '../../lists/icon-list/icon-list.js';
 import { useFavorite } from '../../shared/providers/favorite-provider.js';
-import { RouteButton } from '../../shared/routing/route-button.js';
 import { Dialog } from '../dialog/dialog.js';
 
 const getLocation = () => typeof window === 'undefined' ? undefined : window.location;
@@ -15,7 +15,7 @@ function SignInDialog({ isOpen, onOpenChange }) {
     const location = getLocation();
     if (!location)
         return null;
-    return (jsx(Dialog, { isDismissable: true, footer: jsxs(Fragment, { children: [jsx(RouteButton, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(IconList, { children: [jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
+    return (jsx(Dialog, { isDismissable: true, footer: jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(Button, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(IconList, { children: [jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
 }
 
 export { SignInDialog };

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 {