@sonic-equipment/ui 168.0.0 → 170.0.0

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-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/connected-header.d.ts

@@ -1,4 +1,5 @@
 import { NavigationLinkSource } from '../shared/api/bff/services/bff-service';
-export declare function ConnectedHeader({ source }: {
+export declare function ConnectedHeader({ className, source, }: {
+    className?: string;
     source: NavigationLinkSource;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/header/connected-header.js

@@ -1,13 +1,12 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useCultureCode } from '../intl/use-culture-code.js';
-import { ConnectedAnnouncementList } from '../notifications/announcements/connected-announcement-list.js';
 import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
 import { Header } from './header.js';
 
-function ConnectedHeader({ source }) {
+function ConnectedHeader({ className, source, }) {
     const cultureCode = useCultureCode();
     const { data } = useFetchNavigationLinks({ cultureCode, source });
-    return (jsxs(Fragment, { children: [jsx(ConnectedAnnouncementList, {}), jsx(Header, { links: data?.header ?? [], sticky: true })] }));
+    return (jsx(Header, { className: className, links: data?.header ?? [], sticky: true }));
 }
 
 export { ConnectedHeader };

package/dist/header/header.d.ts

@@ -1,6 +1,7 @@
 import { NavigationLink } from '../shared/api/bff/model/bff.model';
 export interface HeaderProps {
+    className?: string;
     links: NavigationLink[];
     sticky?: boolean;
 }
-export declare function Header({ links, sticky }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ className, links, sticky }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -22,7 +22,7 @@ import { NavigationLinkList } from './link-list/navigation-link-list.js';
 import { SonicLogo } from './sonic-logo/sonic-logo.js';
 import styles from './header.module.css.js';
 
-function Header({ links, sticky }) {
+function Header({ className, links, sticky }) {
     const [activeSubmenu, setActiveSubmenu] = useState();
     const t = useFormattedMessage();
     const isXl = useIsBreakpoint('xl');
@@ -65,7 +65,7 @@ function Header({ links, sticky }) {
         if (activeSubmenu)
             setDesktopNavigationOpen(true);
     }, [activeSubmenu, setDesktopNavigationOpen]);
-    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky']), 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), 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 }))] }));
 }
 
 export { Header };

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

@@ -1,14 +1,14 @@
 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 => {
             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, onClick: () => onSubmenuToggle(link), target: link.openInNewTab ? '_blank' : undefined, children: [link.title, jsx(GlyphsChevronsBoldDownIcon, { className: styles.chevron })] }) }, link.key));
             }
-            return (jsx("li", { children: jsx(RouteLink, { className: styles.link, href: link.url, children: link.title }) }, link.key));
+            return (jsx("li", { children: jsx(Link, { className: styles.link, href: link.url, children: link.title }) }, link.key));
         }) }));
 }
 

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

@@ -1,13 +1,12 @@
 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 }) {
     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), 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,12 @@ 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 { 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-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] }));
+    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] }));
 }
 
 export { MenuListHeader };

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, }) {
     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']), 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/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": "cartIconCount", 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-test-selector": "cartIcon", icon: jsx(SolidCartIcon, { role: "presentation" }) }));
 }
 
 export { CartIcon };

package/dist/notifications/announcements/announcement.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { Link } from '../../buttons/link/link.js';
 import { GlyphsArrowSemiBoldRightIcon } from '../../icons/glyph/glyphs-arrow-semibold-right-icon.js';
 import { SolidAttentionIcon } from '../../icons/solid/solid-attention-icon.js';
 import { SolidEventIcon } from '../../icons/solid/solid-event-icon.js';
@@ -12,7 +13,6 @@ import { SolidNoticeIcon } from '../../icons/solid/solid-notice-icon.js';
 import { SolidSaleIcon } from '../../icons/solid/solid-sale-icon.js';
 import { SolidTagIcon } from '../../icons/solid/solid-tag-icon.js';
 import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import { multiRef } from '../../shared/utils/refs.js';
 import styles from './announcement.module.css.js';
 
@@ -27,7 +27,7 @@ const iconMap = {
 };
 const Announcement = forwardRef(({ announcement: { href, id, subType, text, title, type }, className, onDismiss, }, ref) => {
     return (jsx("div", { ref: multiRef(ref), className: clsx(styles.announcement, styles[type], styles[subType], className), role: "listitem", children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, role: "presentation", children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), text &&
-                            (href ? (jsxs(RouteLink, { className: styles.link, href: href, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })) : (jsx("p", { className: styles.text, children: text })))] }), jsx(IconButton, { className: styles.close, color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) })] }) }));
+                            (href ? (jsxs(Link, { className: styles.link, href: href, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })) : (jsx("p", { className: styles.text, children: text })))] }), jsx(IconButton, { className: styles.close, color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) })] }) }));
 });
 Announcement.displayName = 'Announcement';
 

package/dist/notifications/announcements/connected-announcement-list.d.ts

@@ -1 +1,3 @@
-export declare function ConnectedAnnouncementList(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConnectedAnnouncementList({ className, }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -6,7 +6,7 @@ import { useFetchAnnouncements } from '../../shared/api/bff/hooks/use-fetch-anno
 import { useLocalStorage } from '../../shared/hooks/use-local-storage.js';
 import { AnnouncementList } from './announcement-list.js';
 
-function ConnectedAnnouncementList() {
+function ConnectedAnnouncementList({ className, }) {
     const cultureCode = useCultureCode();
     const { data: announcements, error } = useFetchAnnouncements({
         cultureCode,
@@ -16,7 +16,7 @@ function ConnectedAnnouncementList() {
     const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
     if (!filteredAnnouncements)
         return null;
-    return (jsx(AnnouncementList, { announcements: filteredAnnouncements, onDismiss: id => setDismissedIds(dismissedIds => [...dismissedIds, id]), sticky: true }));
+    return (jsx(AnnouncementList, { announcements: filteredAnnouncements, className: className, onDismiss: id => setDismissedIds(dismissedIds => [...dismissedIds, id]), sticky: true }));
 }
 
 export { ConnectedAnnouncementList };

package/dist/pages/account/components/sign-in-form/sign-in-form.js

@@ -10,7 +10,6 @@ import { TextField } from '../../../../forms/text-field/text-field.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { validateEmail } from '../../../../shared/model/address.js';
 import { voidFunction } from '../../../../shared/model/defaults.js';
-import { RouteLink } from '../../../../shared/routing/route-link.js';
 import { Heading } from '../../../../typography/heading/heading.js';
 import styles from './sign-in-form.module.css.js';
 
@@ -60,7 +59,7 @@ function SignInForm({ allowGuestSignIn = false, createAccountPath, errorType, in
     // form header
     const header = (jsx(Heading, { "data-test-selector": "pageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
     // form footer
-    const footer = (jsxs(Fragment, { children: [jsx(FormSegment, { isFloating: true, children: jsx(SwitchField, { defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs(FormSegment, { children: [jsx("p", { className: styles['footer-options'], children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, isDisabled: isDisabled, onClick: onRecoverPasswordDialogOpen, children: t('Forgot password?') }) }), jsx("p", { className: styles['footer-options'], children: jsxs(Fragment, { children: [t('New user?'), ' ', jsx(RouteLink, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: createAccountPath, isDisabled: isDisabled, children: t('create account') })] }) })] }), allowGuestSignIn && (jsx(FormSegment, { children: jsx(Button, { color: "secondary", "data-test-selector": "continueAsGuest", isDisabled: isDisabled, isLoading: isPendingGuestSignIn && t('Signing in…'), isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or continue as guest') }) }))] }));
+    const footer = (jsxs(Fragment, { children: [jsx(FormSegment, { isFloating: true, children: jsx(SwitchField, { defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs(FormSegment, { children: [jsx("p", { className: styles['footer-options'], children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, isDisabled: isDisabled, onClick: onRecoverPasswordDialogOpen, children: t('Forgot password?') }) }), jsx("p", { className: styles['footer-options'], children: jsxs(Fragment, { children: [t('New user?'), ' ', jsx(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: createAccountPath, isDisabled: isDisabled, children: t('create account') })] }) })] }), allowGuestSignIn && (jsx(FormSegment, { children: jsx(Button, { color: "secondary", "data-test-selector": "continueAsGuest", isDisabled: isDisabled, isLoading: isPendingGuestSignIn && t('Signing in…'), isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or continue as guest') }) }))] }));
     return (jsx(Form, { autoComplete: true, className: styles['sign-in-form'], errorMessage: errorMessage, footer: footer, header: header, onSubmit: handleSubmit, title: title, children: jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(TextField, { autoComplete: "username", "data-test-selector": "signIn_userName", defaultValue: initialEmail, inputMode: "email", isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
                             if (!value)
                                 return value;

package/dist/pages/account/create-account-page/create-account-page.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
+import { Button } from '../../../buttons/button/button.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { Dialog } from '../../../modals/dialog/dialog.js';
 import { useCreateAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-account.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { ExistingAccountError } from '../../../shared/api/storefront/services/authentication-service.js';
-import { RouteButton } from '../../../shared/routing/route-button.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { Page } from '../../components/page/page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
@@ -40,7 +40,7 @@ function CreateAccountPage({ returnUrl } = {}) {
         navigate(continuePath, { reload: true });
         return;
     }
-    return (jsxs(Page, { fluid: true, fullHeight: true, "data-test-selector": "createAccountPage", children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(RouteButton, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(RouteButton, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
+    return (jsxs(Page, { fluid: true, fullHeight: true, "data-test-selector": "createAccountPage", children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
 }
 
 export { CreateAccountPage };

package/dist/pages/checkout/cart-page/cart-page.js

@@ -14,8 +14,8 @@ import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authent
 import { useDeleteCartLineById } from '../../../shared/api/storefront/hooks/cart/use-delete-cart-line-by-id.js';
 import { useDeleteCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-delete-current-cart.js';
 import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
-import { RouteButton } from '../../../shared/routing/route-button.js';
 import { useToast } from '../../../toast/use-toast.js';
+import { Button } from '../../../buttons/button/button.js';
 import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
@@ -81,12 +81,10 @@ function CartContent({ cartLines }) {
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
     return (jsx(CheckoutPageLayout, { actions: {
-            primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Start checkout" }) })),
-            secondary: (jsx(RouteButton, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: isAuthenticated ? undefined : PATHS.SIGN_IN, onClick: () => {
-                    if (!isAuthenticated)
-                        return;
+            primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Start checkout" }) })),
+            secondary: isAuthenticated ? (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", onClick: () => {
                     saveCartForLater.mutate({ cart: currentCart });
-                }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
+                }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })) : (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: PATHS.SIGN_IN, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
         }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: currentCart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, shippingCost: currentCart.shippingAndHandling, subtotal: currentCart.orderSubTotal, tax: currentCart.totalTax, total: currentCart.orderGrandTotal, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                     fit: 'contain',
                     image: {

package/dist/pages/checkout/layouts/checkout-page-layout/checkout-page-layout.js

@@ -12,7 +12,7 @@ function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
     const isXXL = useIsBreakpoint('xxl');
     const topRef = useRef(null);
     const bottomRef = useRef(null);
-    const headerHeight = useWatchCssProperty('--header-height');
+    const headerHeight = useWatchCssProperty('--header-bottom');
     const isScrolledBeyond = useIsScrolledBeyondElement(bottomRef.current || undefined);
     const observables = useMemo(() => [
         {

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button } from '../../../buttons/button/button.js';
 import { PrintButton } from '../../../buttons/print-button/print-button.js';
 import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
@@ -10,7 +11,6 @@ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
 import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
-import { RouteButton } from '../../../shared/routing/route-button.js';
 import { formatDateToLocaleString } from '../../../shared/utils/date.js';
 import { ensureNumber } from '../../../shared/utils/number.js';
 import { useToast } from '../../../toast/use-toast.js';
@@ -52,8 +52,8 @@ function OrderConfirmationPageContent({ cart, }) {
                 label: t('Order confirmation'),
             },
         ], "data-test-selector": "orderConfirmationPage", title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
-                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
-                secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(Button, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
             }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: cart.fulfillmentMethod, orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {

package/dist/pages/checkout/shipping-page/components/currency-change-dialog.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../../../../buttons/link/link.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { Dialog } from '../../../../modals/dialog/dialog.js';
-import { RouteLink } from '../../../../shared/routing/route-link.js';
 import { PATHS } from '../../../paths.js';
 
 function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }) {
     const t = useFormattedMessage();
-    return (jsx(Dialog, { "data-test-selector": "currencyChangeDialog", isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: onSubmit, shouldCloseOnInteractOutside: true, submitLabel: "Continue", title: t('Currency Change'), children: jsxs("p", { children: [jsx(FormattedMessage, { id: "You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, " }), jsx(RouteLink, { hasUnderline: true, color: "secondary", href: PATHS.CART, onClick: onSubmit, children: jsx(FormattedMessage, { id: "please go back to your cart." }) }), ' ', jsx(FormattedMessage, { id: "If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country." })] }) }));
+    return (jsx(Dialog, { "data-test-selector": "currencyChangeDialog", isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: onSubmit, shouldCloseOnInteractOutside: true, submitLabel: "Continue", title: t('Currency Change'), children: jsxs("p", { children: [jsx(FormattedMessage, { id: "You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, " }), jsx(Link, { hasUnderline: true, color: "secondary", href: PATHS.CART, onClick: onSubmit, children: jsx(FormattedMessage, { id: "please go back to your cart." }) }), ' ', jsx(FormattedMessage, { id: "If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country." })] }) }));
 }
 
 export { CurrencyChangeDialog };

package/dist/pages/checkout/shipping-page/components/readonly-address.js

@@ -2,11 +2,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Form } from 'react-aria-components';
 import { AddressInfoDisplay } from '../../../../address-info-display/address-info-display.js';
+import { Link } from '../../../../buttons/link/link.js';
 import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 import { TextField } from '../../../../forms/text-field/text-field.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
-import { RouteLink } from '../../../../shared/routing/route-link.js';
 import { PATHS } from '../../../paths.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
@@ -25,7 +25,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                     ? undefined
                     : formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(AddressInfoDisplay, { address: {
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(Link, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(AddressInfoDisplay, { address: {
                                     address1: billTo.address1,
                                     address2: billTo.address2,
                                     address3: billTo.address3,
@@ -37,7 +37,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     lastName: billTo.lastName,
                                     phone: billTo.phone,
                                     postalCode: billTo.postalCode,
-                                }, "data-test-selector": "billToAddress" })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(AddressInfoDisplay, { address: {
+                                }, "data-test-selector": "billToAddress" })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(Link, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(AddressInfoDisplay, { address: {
                                         address1: shipTo.address1,
                                         address2: shipTo.address2,
                                         address3: shipTo.address3,

package/dist/pages/product/components/product-overview.d.ts

@@ -1,7 +1,9 @@
 import { ProductHit } from '../../../shared/model/hit';
+import { NavigateOptions } from '../../../shared/routing/types';
 interface ProductOverviewProps {
     ProductHitCard: React.ComponentType<{
         hit: ProductHit;
+        route?: NavigateOptions;
     }>;
 }
 export declare function ProductOverview({ ProductHitCard }: ProductOverviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product/components/product-overview.js

@@ -14,7 +14,7 @@ function ProductOverview({ ProductHitCard }) {
     const { currentRefinement, nbHits, nbPages } = usePagination();
     const currentPage = currentRefinement + 1;
     const isLastPage = currentPage === nbPages;
-    return (jsxs(Fragment, { children: [isLastPage && nbHits > MAX_QUERY_RESULTS && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!" }) })), jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) })] }));
+    return (jsxs(Fragment, { children: [isLastPage && nbHits > MAX_QUERY_RESULTS && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!" }) })), jsx(ProductOverviewGrid, { isLoading: isLoading, children: hits.map(hit => isProductHit(hit) ? (jsx(ProductHitCard, { hit: hit, route: { prefetch: true } }, hit.id)) : (jsx(PromoCard, { href: hit.href, image: hit.image }, hit.id))) })] }));
 }
 
 export { ProductOverview };

package/dist/pages/product/product-listing-page/no-results/no-results.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../../buttons/button/button.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
-import { RouteButton } from '../../../../shared/routing/route-button.js';
 import { Heading } from '../../../../typography/heading/heading.js';
 import styles from './no-results.module.css.js';
 
 function NoResults({ content, title }) {
     const isLg = useIsBreakpoint('lg');
-    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: isLg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(RouteButton, { withArrow: true, "data-test-selector": "buttonContinueShopping", href: "/", size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
+    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: isLg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(Button, { withArrow: true, "data-test-selector": "buttonContinueShopping", href: "/", size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
 }
 
 export { NoResults };

package/dist/pages/product/product-listing-page/product-listing-page-category-carousel/product-listing-page-category-carousel.js

@@ -16,7 +16,7 @@ function ProductListingPageCategoryCarousel({ currentCategoryPath, }) {
     return (jsx(CategoryCarousel, { categoryCards: categories.map((category, index) => (jsx(CategoryCard, { href: category.href, image: {
                 image: category.image,
                 title: category.name,
-            }, title: category.name }, category.href || index))) }));
+            }, route: { prefetch: true }, title: category.name }, category.href || index))) }));
 }
 
 export { ProductListingPageCategoryCarousel };

package/dist/pages/product/product-listing-page/product-listing-product-overview/product-listing-product-overview.js

@@ -23,7 +23,7 @@ function ProductHitCard({ hit }) {
             isVatIncluded: hit.isVatIncluded,
             originalPrice: hit.originalPrice,
             price: hit.price,
-        }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
+        }, route: { prefetch: true }, sku: hit.id, tags: hit.labels, title: hit.name }, hit.storefrontId));
 }
 function ProductListingProductOverview() {
     return jsx(ProductOverview, { ProductHitCard: ProductHitCard });

package/dist/promos/promo-banner/promo-banner.js

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
 import { Image } from '../../media/image/image.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './promo-banner.module.css.js';
 
 function PromoBanner({ href, image, variant }) {
-    return (jsx(RouteLink, { className: clsx(styles['promo-banner'], styles[variant]), href: href, tabIndex: 0, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
+    return (jsx(Link, { className: clsx(styles['promo-banner'], styles[variant]), href: href, tabIndex: 0, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
 }
 
 export { PromoBanner };

package/dist/promos/promo-card/promo-card.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { Link } from '../../buttons/link/link.js';
 import { Image } from '../../media/image/image.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './promo-card.module.css.js';
 
 function PromoCard({ href, image, onClick }) {
-    return (jsx("div", { className: styles['promo-card-container'], children: jsx(RouteLink, { className: styles['promo-card'], href: href, onClick: onClick, children: jsx(Image, { className: styles.image, fit: "cover", image: image, title: image.altText }) }) }));
+    return (jsx("div", { className: styles['promo-card-container'], children: jsx(Link, { className: styles['promo-card'], href: href, onClick: onClick, children: jsx(Image, { className: styles.image, fit: "cover", image: image, title: image.altText }) }) }));
 }
 
 export { PromoCard };

package/dist/shared/hooks/use-watch-css-property.js

@@ -10,7 +10,7 @@ function useWatchCssProperty(property) {
         const mutationObserver = new MutationObserver(() => {
             if (typeof document === 'undefined')
                 return;
-            const propertyValue = getComputedStyle?.(document.body).getPropertyValue(property);
+            const propertyValue = getCssPropertyValue(property);
             setValue(propertyValue);
         });
         mutationObserver.observe(document.body, {