@sonic-equipment/ui 168.0.0 → 170.0.0

package/dist/algolia/algolia-active-categories.js

@@ -2,9 +2,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useHierarchicalMenu } from 'react-instantsearch';
 import clsx from 'clsx';
+import { Link } from '../buttons/link/link.js';
 import { StrokeCategoriesIcon } from '../icons/stroke/stroke-categories-icon.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
-import { RouteLink } from '../shared/routing/route-link.js';
 import { FilterSection } from './filter-section.js';
 import styles from './algolia-filter-panel.module.css.js';
 import filterSectionStyles from './filter-section.module.css.js';
@@ -29,7 +29,7 @@ function Categories({ categories, path: _path, }) {
         const categorySlug = category.label.toLowerCase().replaceAll(' ', '-');
         const path = `${_path}/${categorySlug}`;
         const isActive = !category.data || !category.data.some(c => c.isRefined);
-        return (jsxs(Fragment, { children: [jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(RouteLink, { hasUnderline: true, className: clsx(styles.category, {
+        return (jsxs(Fragment, { children: [jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles.category, {
                             [styles['is-active']]: isActive,
                         }), href: path, isDisabled: isActive, children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label })] }) }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
     });

package/dist/breadcrumbs/breadcrumb.js

@@ -2,10 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Breadcrumbs, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
 import clsx from 'clsx';
+import { Link } from '../buttons/link/link.js';
 import { GlyphsChevronsSlimLeftIcon } from '../icons/glyph/glyphs-chevrons-slim-left-icon.js';
 import { SolidHomeIcon } from '../icons/solid/solid-home-icon.js';
 import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
-import { RouteLink } from '../shared/routing/route-link.js';
 import styles from './breadcrumb.module.css.js';
 
 function BreadcrumbShort({ links }) {
@@ -14,17 +14,17 @@ function BreadcrumbShort({ links }) {
     const isHomeLink = previousLink === undefined || previousLink === homeLink;
     const href = previousLink?.href || homeLink?.href;
     const label = previousLink?.label || homeLink?.label;
-    return (jsx(Breadcrumbs, { className: styles.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(RouteLink, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
+    return (jsx(Breadcrumbs, { className: styles.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(Link, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
 }
 function BreadcrumbLongItem({ index, isDisabled, link, }) {
-    return (jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(RouteLink, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles['previous-icon'], styles.icon) }), link.label] }) }, index));
+    return (jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(Link, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles['previous-icon'], styles.icon) }), link.label] }) }, index));
 }
 function BreadcrumbLong({ links }) {
     const linksWithoutFirst = links.slice(1);
     const homeLink = links[0];
     if (!homeLink)
         return null;
-    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsx(RouteLink, { className: styles.link, href: homeLink.href, title: homeLink.label, children: jsx(SolidHomeIcon, { className: clsx(styles['home-icon'], styles.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, link.href + link.label || index)))] }));
+    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsx(Link, { className: styles.link, href: homeLink.href, title: homeLink.label, children: jsx(SolidHomeIcon, { className: clsx(styles['home-icon'], styles.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, link.href + link.label || index)))] }));
 }
 function Breadcrumb({ links }) {
     const isLg = useIsBreakpoint('lg');

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

@@ -1,4 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children?: ReactNode;
@@ -7,17 +8,19 @@ export interface ButtonProps {
     condensed?: boolean;
     'data-test-selector'?: string;
     form?: string;
+    href?: string;
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     isLoading?: string | ReactNode | boolean;
     isValidating?: boolean;
     name?: string;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    route?: NavigateOptions;
     size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     value?: string;
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, form, icon, iconPosition, isDisabled, isLoading, isValidating, name, onClick: _onClick, size, type, value, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children: _children, className, color, condensed, 'data-test-selector': dataTestSelector, form, href, icon, iconPosition, isDisabled, isLoading, isValidating, name, onClick, route, size, type, value, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.js

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

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

@@ -1,13 +1,16 @@
+import { MouseEvent, ReactNode } from 'react';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface IconButtonProps {
-    children: React.ReactNode;
+    children: ReactNode;
     className?: string;
     color?: 'primary' | 'secondary' | 'current-color';
     href?: string;
     isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    route?: NavigateOptions;
     size?: 'md' | 'lg';
     target?: string;
     title?: string;
     type?: 'button' | 'submit' | 'reset';
 }
-export declare function IconButton({ children, className, color, href, isDisabled, onClick: _onClick, size, target, title, type, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ children, className: _className, color, href, isDisabled, onClick, size, target, title, type, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,4 +1,5 @@
 import { KeyboardEvent, MouseEventHandler, ReactNode } from 'react';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface LinkProps {
     children: ReactNode;
     className?: string;
@@ -10,6 +11,7 @@ export interface LinkProps {
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyUp?: (event: KeyboardEvent) => void;
     role?: string;
+    route?: NavigateOptions;
     tabIndex?: number;
     target?: string;
     title?: string;

package/dist/buttons/link/link.js

@@ -2,19 +2,23 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
+import { buildHref } from '../../shared/routing/route-utils.js';
+import { useBasePath } from '../../shared/routing/use-base-path.js';
+import { useRouteLinkElement } from '../../shared/routing/use-route-link-element.js';
 import styles from './link.module.css.js';
 
-const Link = forwardRef(({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }, ref) => {
+const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }, ref) => {
+    const basePath = useBasePath();
+    const RouteLinkElement = useRouteLinkElement();
+    const className = clsx({
+        [styles.hover]: Boolean(href || onClick),
+        [styles['has-underline']]: hasUnderline,
+    }, styles['link'], color && styles[color], _className);
     if (href) {
-        return (jsx("a", { ref: ref, className: clsx({
-                [styles.hover]: Boolean(href || onClick),
-                [styles['has-underline']]: hasUnderline,
-            }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
+        const Element = RouteLinkElement || 'a';
+        return (jsx(Element, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, href: buildHref({ basePath, href }), id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
     }
-    return (jsx("button", { ref: ref, className: clsx({
-            [styles.hover]: Boolean(href || onClick),
-            [styles['has-underline']]: hasUnderline,
-        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
+    return (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 });
 Link.displayName = 'Link';
 

package/dist/cards/category-card/category-card.d.ts

@@ -1,11 +1,13 @@
 import { ImageSourceType } from '../../shared/model/image';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface CategoryCardProps {
     className?: string;
     href: string;
     image: ImageSourceType;
     isSelected?: boolean;
     onClick?: VoidFunction;
+    route?: NavigateOptions;
     title: string;
     withArrow?: boolean;
 }
-export declare function CategoryCard({ className, href, image, isSelected, onClick, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryCard({ className, href, image, isSelected, onClick, route, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/category-card/category-card.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 { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
 import { Image } from '../../media/image/image.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './category-card.module.css.js';
 
-function CategoryCard({ className, href, image, isSelected = false, onClick, title, withArrow = false, }) {
-    return (jsxs(RouteLink, { className: clsx({
+function CategoryCard({ className, href, image, isSelected = false, onClick, route, title, withArrow = false, }) {
+    return (jsxs(Link, { className: clsx({
             [styles['is-selected']]: isSelected,
-        }, styles['category-card'], className), href: href, onClick: onClick, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { className: styles.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles.arrow })] })] }));
+        }, styles['category-card'], className), href: href, onClick: onClick, route: route, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { className: styles.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles.arrow })] })] }));
 }
 
 export { CategoryCard };

package/dist/cards/orderline-card/orderline-card.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Tag } from '../../badges/tag/tag.js';
+import { Link } from '../../buttons/link/link.js';
 import { DeliveryTime } from '../../delivery-time/delivery-time.js';
 import { Price } from '../../display/price/price.js';
 import { ProductSku } from '../../display/product-sku/product-sku.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { logger } from '../../logging/logger.js';
 import { Image } from '../../media/image/image.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './orderline-card.module.css.js';
 
 function OrderLineCard(props) {
@@ -15,7 +15,7 @@ function OrderLineCard(props) {
     if (!price.currencyCode) {
         logger.error(`Product '${sku}' does not have a currency code`);
     }
-    return (jsxs("article", { "aria-labelledby": `title-${productId}`, className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-disabled": isReadonly ? true : undefined, "data-product-id": sku, "data-test-selector": "orderLineListItem", id: productId, children: [isReadonly ? (jsx("div", { className: styles.title, "data-test-selector": "orderLineCardTitle", id: `title-${productId}`, children: title })) : (jsx(RouteLink, { className: styles.title, "data-test-selector": "orderLineCardTitle", href: href, id: `title-${productId}`, children: title })), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), price.currencyCode && (jsx(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" })), jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate }), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
+    return (jsxs("article", { "aria-labelledby": `title-${productId}`, className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-disabled": isReadonly ? true : undefined, "data-product-id": sku, "data-test-selector": "orderLineListItem", id: productId, children: [isReadonly ? (jsx("div", { className: styles.title, "data-test-selector": "orderLineCardTitle", id: `title-${productId}`, children: title })) : (jsx(Link, { className: styles.title, "data-test-selector": "orderLineCardTitle", href: href, id: `title-${productId}`, children: title })), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), price.currencyCode && (jsx(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" })), jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate }), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
 }
 
 export { OrderLineCard };

package/dist/cards/product-card/connected-product-card.d.ts

@@ -1,8 +1,10 @@
 import { AddToCartHandler } from '../../buttons/add-to-cart-button/connected-add-to-cart-button';
+import { NavigateOptions } from '../../shared/routing/types';
 import { ProductCardProps } from './product-card';
 export interface ConnectedProductCardProps extends Omit<ProductCardProps, 'addToCartButton' | 'favoriteButton'> {
     onAddToCart?: AddToCartHandler;
     onFavorited?: VoidFunction;
     onFavoriting?: VoidFunction;
+    route?: NavigateOptions;
 }
 export declare function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...props }: ConnectedProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import type { ImageSourceType } from '../../shared/model/image';
 import type { ProductPriceType } from '../../shared/model/price';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface ProductCardProps {
     addToCartButton: ReactElement;
     favoriteButton?: ReactElement;
@@ -9,8 +10,9 @@ export interface ProductCardProps {
     image: ImageSourceType;
     onClick?: VoidFunction;
     price: ProductPriceType;
+    route?: NavigateOptions;
     sku: string;
     tags?: string[];
     title: ReactNode;
 }
-export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, route, sku, tags, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tag } from '../../badges/tag/tag.js';
+import { Link } from '../../buttons/link/link.js';
 import { Price } from '../../display/price/price.js';
 import { ProductSku } from '../../display/product-sku/product-sku.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { logger } from '../../logging/logger.js';
 import { Image } from '../../media/image/image.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './product-card.module.css.js';
 
-function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
+function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, route, sku, tags, title, }) {
     if (!price.currencyCode) {
         logger.error(`Product '${sku}' does not have a currency code`);
     }
-    return (jsx("div", { className: styles['product-card-container'], children: jsxs("article", { "aria-labelledby": `title-${id}`, className: styles['product-card'], "data-product-id": sku, id: id, children: [jsx(RouteLink, { className: styles.title, href: href, id: `title-${id}`, onClick: onClick, children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), price.currencyCode && (jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" })), jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton })] }) }));
+    return (jsx("div", { className: styles['product-card-container'], children: jsxs("article", { "aria-labelledby": `title-${id}`, className: styles['product-card'], "data-product-id": sku, id: id, children: [jsx(Link, { className: styles.title, href: href, id: `title-${id}`, onClick: onClick, route: route, children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), price.currencyCode && (jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" })), jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton })] }) }));
 }
 
 export { ProductCard };

package/dist/collapsables/show-all/show-all.js

@@ -2,11 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState } from 'react';
 import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
 import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { useResizeObserver } from '../../shared/hooks/use-resize-observer.js';
-import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './show-all.module.css.js';
 
 function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
@@ -23,7 +23,7 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
             [styles['is-open']]: isReallyOpen,
         }), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles.panel, children: jsx("div", { className: clsx(styles.content, {
                         [styles['has-transparency']]: !contentFits && hasTransparency,
-                    }), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles.button, color: "secondary", onClick: () => {
+                    }), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
                     if (isControlled)
                         return onToggle(!isControlled);
                     toggle();

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

@@ -1,13 +1,13 @@
 import { CountryCode, LanguageCode } from '../intl/types';
 import { Country, Language } from '../shared/model/countries-languages';
-interface ConnectedCountrySelectorProps {
+export type OnCountryLanguageChangeHandler = (args: {
+    country: Country;
+    language: Language;
+}) => void;
+export interface ConnectedCountrySelectorProps {
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
-    onChange?: (args: {
-        country: Country;
-        language: Language;
-    }) => void;
+    onChange?: OnCountryLanguageChangeHandler;
     showCountry?: boolean;
 }
 export declare function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry, }: ConnectedCountrySelectorProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/exports.d.ts

@@ -349,14 +349,13 @@ export * from './shared/providers/cart-provider';
 export * from './shared/providers/favorite-provider';
 export * from './shared/providers/global-state-provider';
 export * from './shared/providers/react-query-container';
-export * from './shared/routing/route-button';
-export * from './shared/routing/route-icon-button';
-export * from './shared/routing/route-link';
 export * from './shared/routing/route-provider';
+export * from './shared/routing/route-utils';
 export * from './shared/routing/types';
 export * from './shared/routing/use-base-path';
 export * from './shared/routing/use-navigate';
 export * from './shared/routing/use-on-navigate';
+export * from './shared/routing/use-route-link-element';
 export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';

package/dist/filters/active-filters/active-filters.js

@@ -3,10 +3,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { FilterSection } from '../../algolia/filter-section.js';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { Link } from '../../buttons/link/link.js';
 import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.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 filterSectionStyles from '../../algolia/filter-section.module.css.js';
 import styles from './active-filters.module.css.js';
 
@@ -14,7 +14,7 @@ const ActiveFilters = ({ onClearAllFilters, onClearFilter, selectedFilterCategor
     const t = useFormattedMessage();
     if (selectedFilterCategories.length === 0)
         return null;
-    return (jsx(FilterSection, { button: jsx(RouteLink, { onClick: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map(category => category.filters.map(filter => (jsxs("div", { className: clsx(filterSectionStyles['filter-section-item'], styles['active-filter-item']), children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles['active-filter-value'], children: filter.label })] }), jsx(IconButton, { className: styles['clear-filter-button'], color: "secondary", onClick: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`)))) }));
+    return (jsx(FilterSection, { button: jsx(Link, { onClick: onClearAllFilters, children: jsx(FormattedMessage, { id: "Clear filters" }) }), title: t('Chosen filters'), variant: "with-action", children: selectedFilterCategories.map(category => category.filters.map(filter => (jsxs("div", { className: clsx(filterSectionStyles['filter-section-item'], styles['active-filter-item']), children: [jsxs("span", { children: [jsxs("span", { children: [jsx(FormattedMessage, { id: `facet.${category.label.toLowerCase()}` }), jsx("span", { children: ": " })] }), jsx("span", { className: styles['active-filter-value'], children: filter.label })] }), jsx(IconButton, { className: styles['clear-filter-button'], color: "secondary", onClick: () => onClearFilter(category.label, filter), children: jsx(StrokeCloseboxIcon, {}) })] }, `${category.label}-${filter.value}`)))) }));
 };
 
 export { ActiveFilters };

package/dist/footer/connected-footer.d.ts

@@ -1,4 +1,6 @@
+import { OnCountryLanguageChangeHandler } from '../country-selector/connected-country-selector';
 import { NavigationLinkSource } from '../shared/api/bff/services/bff-service';
-export declare function ConnectedFooter({ source }: {
+export declare function ConnectedFooter({ onCountryLanguageChange, source, }: {
+    onCountryLanguageChange: OnCountryLanguageChangeHandler;
     source: NavigationLinkSource;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/footer/connected-footer.js

@@ -4,10 +4,10 @@ import { useCultureCode } from '../intl/use-culture-code.js';
 import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
 import { Footer } from './footer.js';
 
-function ConnectedFooter({ source }) {
+function ConnectedFooter({ onCountryLanguageChange, source, }) {
     const cultureCode = useCultureCode();
     const { data } = useFetchNavigationLinks({ cultureCode, source });
-    return (jsx(Footer, { bottomLinks: data?.footer.bottomLinks || [], copyright: data?.footer.copyright || '', countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN" }), linkBlocks: data?.footer.linkBlocks || [] }));
+    return (jsx(Footer, { bottomLinks: data?.footer.bottomLinks || [], copyright: data?.footer.copyright || '', countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN", onChange: onCountryLanguageChange }), linkBlocks: data?.footer.linkBlocks || [] }));
 }
 
 export { ConnectedFooter };

package/dist/footer/footer.js

@@ -1,23 +1,23 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link } from '../buttons/link/link.js';
 import { Accordion } from '../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
 import { logger } from '../logging/logger.js';
 import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
-import { RouteLink } from '../shared/routing/route-link.js';
 import styles from './footer.module.css.js';
 
 function BottomSection({ bottomLinks, copyright, countrySelector, }) {
-    return (jsxs("div", { className: styles['bottom-section'], children: [copyright && jsx("p", { className: styles.copyright, children: copyright }), bottomLinks.length > 0 && (jsx("div", { className: styles['bottom-links'], children: bottomLinks.map(link => (jsx(RouteLink, { className: styles['bottom-link'], href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) })), countrySelector] }));
+    return (jsxs("div", { className: styles['bottom-section'], children: [copyright && jsx("p", { className: styles.copyright, children: copyright }), bottomLinks.length > 0 && (jsx("div", { className: styles['bottom-links'], children: bottomLinks.map(link => (jsx(Link, { className: styles['bottom-link'], href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) })), countrySelector] }));
 }
 function LinkSection({ link }) {
     const isXl = useIsBreakpoint('xl');
-    return (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${link.key}`, initialIsOpen: isXl, title: link.title, children: jsx("ul", { className: styles['list'], children: link.links?.map(link => jsx(Link, { link: link }, link.key)) }) }) }) }, link.key));
+    return (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${link.key}`, initialIsOpen: isXl, title: link.title, children: jsx("ul", { className: styles['list'], children: link.links?.map(link => jsx(FooterLink, { link: link }, link.key)) }) }) }) }, link.key));
 }
-function Link({ link }) {
+function FooterLink({ link }) {
     const type = link.type;
     if (type === 'link' || type === 'category') {
-        return (jsx(RouteLink, { href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }));
+        return (jsx(Link, { href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }));
     }
     if (type === 'section') {
         return jsx(LinkSection, { link: link });
@@ -26,7 +26,7 @@ function Link({ link }) {
     return null;
 }
 function FooterLinkBlock({ linkBlocks }) {
-    return (jsx("div", { className: styles['main-links'], children: linkBlocks.map(link => (jsx(Link, { link: link }, link.key))) }));
+    return (jsx("div", { className: styles['main-links'], children: linkBlocks.map(link => (jsx(FooterLink, { link: link }, link.key))) }));
 }
 function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }) {
     return (jsxs("footer", { className: styles.footer, children: [jsx(FooterLinkBlock, { linkBlocks: linkBlocks }), jsx(BottomSection, { bottomLinks: bottomLinks, copyright: copyright, countrySelector: countrySelector })] }));

package/dist/global-search/search-result-panel/sections/no-search.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
+import { Link } from '../../../buttons/link/link.js';
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
 import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
 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 { RouteLink } from '../../../shared/routing/route-link.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';
@@ -39,7 +39,7 @@ function RecentSearchesSection() {
         return null;
     }
     const { items, source } = collection;
-    return (jsx(SearchSection, { button: jsx(RouteLink, { hasUnderline: true, onClick: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
+    return (jsx(SearchSection, { button: jsx(Link, { hasUnderline: true, onClick: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
                     item,
                     source: source,
                 }), icon: jsx(StrokeSearchIcon, {}), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));

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

@@ -4,6 +4,7 @@ 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 +13,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 +26,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();

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