@sonic-equipment/ui 152.0.0 → 154.0.0

package/dist/address-info-display/address-info-display.js

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import styles from './address-info-display.module.css.js';
 
 function AddressInfoDisplay({ address, 'data-test-selector': dataTestSelector, }) {
     const { address1, address2, address3, city, companyName, country, email, firstName, lastName, phone, postalCode, } = address;
-    return (jsxs("address", { className: styles.address, "data-test-selector": dataTestSelector, children: [(firstName || lastName) && (jsx("p", { "data-test-selector": "addressInfoDisplay_name", children: `${firstName} ${lastName}` })), companyName && (jsx("p", { "data-test-selector": "addressInfoDisplay_companyName", children: companyName })), address1 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address1", children: address1 })), address2 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address2", children: address2 })), address3 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address3", children: address3 })), (postalCode || city) && (jsxs("p", { children: [postalCode && (jsxs("span", { "data-test-selector": "addressInfoDisplay_postalCode", children: [postalCode, ' '] })), city && (jsx("span", { "data-test-selector": "addressInfoDisplay_city", children: city }))] })), country && (jsx("p", { "data-test-selector": "addressInfoDisplay_country", children: country })), phone && jsx("p", { "data-test-selector": "addressInfoDisplay_phone", children: phone }), email && jsx("p", { "data-test-selector": "addressInfoDisplay_email", children: email })] }));
+    return (jsxs("address", { className: styles.address, "data-test-selector": dataTestSelector, children: [(firstName || lastName) && (jsxs("p", { "data-test-selector": "addressInfoDisplay_name", children: [jsx("span", { "data-test-selector": "addressInfoDisplay_name_firstName", children: firstName }), ` `, jsx("span", { "data-test-selector": "addressInfoDisplay_name_lastName", children: lastName })] })), companyName && (jsx("p", { "data-test-selector": "addressInfoDisplay_companyName", children: companyName })), address1 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address1", children: address1 })), address2 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address2", children: address2 })), address3 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address3", children: address3 })), (postalCode || city) && (jsxs("p", { children: [postalCode && (jsxs(Fragment, { children: [jsx("span", { "data-test-selector": "addressInfoDisplay_postalCode", children: postalCode }), ' '] })), city && (jsx("span", { "data-test-selector": "addressInfoDisplay_city", children: city }))] })), country && (jsx("p", { "data-test-selector": "addressInfoDisplay_country", children: country })), phone && jsx("p", { "data-test-selector": "addressInfoDisplay_phone", children: phone }), email && jsx("p", { "data-test-selector": "addressInfoDisplay_email", children: email })] }));
 }
 
 export { AddressInfoDisplay };

package/dist/badges/badge/icon-with-badge/icon-with-badge.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 export interface IconWithBadgeProps {
     badge: ReactNode;
+    'data-test-selector'?: string;
     icon: ReactNode;
 }
-export declare function IconWithBadge({ badge, icon }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconWithBadge({ badge, 'data-test-selector': dataTestSelector, icon, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/badges/badge/icon-with-badge/icon-with-badge.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './icon-with-badge.module.css.js';
 
-function IconWithBadge({ badge, icon }) {
-    return (jsxs("div", { className: styles['icon-with-badge'], children: [icon, jsx("div", { className: styles['badge-wrapper'], children: badge })] }));
+function IconWithBadge({ badge, 'data-test-selector': dataTestSelector, icon, }) {
+    return (jsxs("div", { className: styles['icon-with-badge'], children: [icon, jsx("div", { className: styles['badge-wrapper'], "data-test-selector": dataTestSelector, children: badge })] }));
 }
 
 export { IconWithBadge };

package/dist/badges/tag/tag.js

@@ -4,7 +4,7 @@ import styles from './tag.module.css.js';
 function Tag({ children }) {
     if (!children)
         return null;
-    return (jsxs("div", { className: styles.tag, children: [jsx("div", { className: styles.body, children: children }), jsx("svg", { className: styles.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
+    return (jsxs("div", { className: styles.tag, children: [jsx("div", { className: styles.body, "data-test-selector": "tag", children: children }), jsx("svg", { className: styles.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
 }
 
 export { Tag };

package/dist/cards/orderline-card/connected-remove-button.js

@@ -13,7 +13,7 @@ function ConnectedRemoveButton({ id: productId, onRemove: _onRemove, }) {
         close();
         _onRemove(productId);
     }
-    return (jsxs(Fragment, { children: [jsx(IconButton, { color: "secondary", onClick: open, children: jsx(StrokeTrashIcon, {}) }), jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemove, title: t('Are you sure you want to remove this item from your cart?') })] }));
+    return (jsxs(Fragment, { children: [jsx(IconButton, { color: "secondary", onClick: open, children: jsx(StrokeTrashIcon, {}) }), jsx(ConfirmationDialog, { "data-test-selector": "removeItemFromCartConfirmationDialog", isOpen: isOpen, onCancel: close, onConfirm: onRemove, title: t('Are you sure you want to remove this item from your cart?') })] }));
 }
 
 export { ConnectedRemoveButton };

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

@@ -12,7 +12,7 @@ import styles from './orderline-card.module.css.js';
 
 function OrderLineCard(props) {
     const { deliveryDate, href, image, isReadonly, price, productId, sku, tags, title, } = props;
-    return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { ...image, fit: "contain" }) }), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", 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 }), 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(Price, { className: styles.price, currencyCode: price.currencyCode, originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && jsx("div", { className: styles.remove, children: props.removeButton })] }));
+    return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-test-selector": "orderLineListItem", href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), jsx(Heading, { className: styles.title, "data-test-selector": "orderLineCardTitle", size: "xxxs", tag: "h3", 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 }), 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(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
 }
 
 export { OrderLineCard };

package/dist/country-select/country-select.js

@@ -20,7 +20,7 @@ function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'dat
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(Select, { "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(Select, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
 }
 
 export { CountrySelect };

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

@@ -10,7 +10,7 @@ import styles from './delivery-time.module.css.js';
 function DeliveryTime({ className, deliveryDate }) {
     const t = useFormattedMessage();
     const { number, unit } = getDateUnitObject(deliveryDate);
-    return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
+    return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { "data-test-selector": "deliveryTime", children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
                         '0': number.toString(),
                         '1': t.pluralize('unit', unit, number),
                     } }) }), jsx(InfoIconTooltip, { variant: "stroke", children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));

package/dist/display/price/price.js

@@ -24,7 +24,7 @@ function Price({ className, currencyCode, 'data-test-selector': dataTestSelector
     const { cultureCode: defaultLocale } = useIntl();
     const priceLocale = locale || defaultLocale;
     const showOriginalPrice = originalPrice !== undefined && price !== originalPrice;
-    return (jsxs("div", { className: clsx(styles['price'], styles[variant], className), "data-currency-code": currencyCode, "data-current-price": price, "data-locale": priceLocale, "data-original-price": originalPrice, "data-price-per-unit": pricePerUnit, "data-test-selector": dataTestSelector, "data-unit-amount": pricePerUnit && unitAmount, "data-unit-type": pricePerUnit && unitType, "data-vat": isVatIncluded === null ? undefined : isVatIncluded, style: style, children: [showOriginalPrice && (jsx(SinglePrice, { className: styles['original-price'], currencyCode: currencyCode, isOld: showOriginalPrice, locale: priceLocale, price: originalPrice, small: variant === 'sonic', variant: variant })), jsx(SinglePrice, { className: styles['current-price'], currencyCode: currencyCode, isDiscount: showOriginalPrice, locale: priceLocale, price: price, variant: variant }), pricePerUnit && (jsxs("span", { className: styles['price-per-unit'], children: [jsx(SinglePrice, { currencyCode: currencyCode, locale: priceLocale, price: pricePerUnit }), "/", unitAmount > 1 && unitAmount, t.pluralize('priceUnit', unitType, unitAmount)] })), isVatIncluded !== null && (jsx("span", { className: styles.vat, children: t(isVatIncluded ? 'Incl. VAT' : 'Excl. VAT') }))] }));
+    return (jsxs("div", { className: clsx(styles['price'], styles[variant], className), "data-currency-code": currencyCode, "data-current-price": price, "data-locale": priceLocale, "data-original-price": originalPrice, "data-price-per-unit": pricePerUnit, "data-test-selector": dataTestSelector || 'price', "data-unit-amount": pricePerUnit && unitAmount, "data-unit-type": pricePerUnit && unitType, "data-vat": isVatIncluded === null ? undefined : isVatIncluded, style: style, children: [showOriginalPrice && (jsx(SinglePrice, { className: styles['original-price'], currencyCode: currencyCode, isOld: showOriginalPrice, locale: priceLocale, price: originalPrice, small: variant === 'sonic', variant: variant })), jsx(SinglePrice, { className: styles['current-price'], currencyCode: currencyCode, isDiscount: showOriginalPrice, locale: priceLocale, price: price, variant: variant }), pricePerUnit && (jsxs("span", { className: styles['price-per-unit'], children: [jsx(SinglePrice, { currencyCode: currencyCode, locale: priceLocale, price: pricePerUnit }), "/", unitAmount > 1 && unitAmount, t.pluralize('priceUnit', unitType, unitAmount)] })), isVatIncluded !== null && (jsx("span", { className: styles.vat, children: t(isVatIncluded ? 'Incl. VAT' : 'Excl. VAT') }))] }));
 }
 
 export { Price };

package/dist/header/cart-icon/connected-cart-icon.js

@@ -8,7 +8,7 @@ import { RouteIconButton } from '../../shared/routing/route-icon-button.js';
 
 function ConnectedCartIcon({ href }) {
     const count = useFetchCurrentCartCount();
-    return (jsx(RouteIconButton, { "data-test-selector": "cartIcon", href: href, children: jsx(IconWithBadge, { badge: count ? jsx(Badge, { count: count }) : undefined, icon: jsx(SolidCartIcon, {}) }) }));
+    return (jsx(RouteIconButton, { "data-test-selector": "cartIcon", href: href, children: jsx(IconWithBadge, { badge: count ? jsx(Badge, { count: count }) : undefined, "data-test-selector": "cartIconCount", icon: jsx(SolidCartIcon, {}) }) }));
 }
 
 export { ConnectedCartIcon };

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

@@ -20,7 +20,7 @@ function OrderLineList({ children, onRemoveAll }) {
             return;
         open();
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsx("p", { className: styles.count, children: `${count} ${productString.toLowerCase()}` }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: 
+    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsxs("p", { className: styles.count, children: [jsx("span", { "data-test-selector": "orderLineListCount", children: count }), ` ${productString.toLowerCase()}`] }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: 
                         // eslint-disable-next-line @eslint-react/no-children-map
                         Children.map(children, (child, index) => (
                         // eslint-disable-next-line @eslint-react/no-array-index-key

package/dist/media/image/image.d.ts

@@ -1,6 +1,7 @@
 import { type ImageType, ResponsiveImageType } from '../../shared/model/image';
 interface ImageProps {
     className?: string;
+    'data-test-selector'?: string;
     fallbackSrc?: string;
     fit?: 'contain' | 'cover';
     height?: number;
@@ -10,5 +11,5 @@ interface ImageProps {
     title: string;
     width?: number;
 }
-export declare function Image({ className, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Image({ className, 'data-test-selector': dataTestSelector, fallbackSrc, fit, height, image, loading, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/media/image/image.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { isResponsiveImage } from '../../shared/model/image.js';
 import styles from './image.module.css.js';
 
-function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
+function Image({ className, 'data-test-selector': dataTestSelector, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
     const [hasError, setHasError] = useState(false);
     const handleError = () => {
         setHasError(true);
@@ -21,9 +21,9 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
         width,
     };
     if (isResponsiveImage(image)) {
-        return jsx(PictureComponent, { ...props, hasError: hasError, image: image });
+        return (jsx(PictureComponent, { ...props, "data-test-selector": dataTestSelector, hasError: hasError, image: image }));
     }
-    return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
+    return (jsx(ImageComponent, { ...props, "data-test-selector": dataTestSelector, hasError: hasError, image: image }));
 }
 function createSrcSet(image) {
     return ([

package/dist/modals/confirmation/confirmation-dialog.d.ts

@@ -1,10 +1,11 @@
 interface ConfirmationDialogProps {
     cancelLabel?: string;
+    'data-test-selector'?: string;
     isOpen: boolean;
     onCancel: VoidFunction;
     onConfirm: VoidFunction;
     submitLabel?: string;
     title: string;
 }
-export declare function ConfirmationDialog({ cancelLabel, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmationDialog({ cancelLabel, 'data-test-selector': dataTestSelector, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modals/confirmation/confirmation-dialog.js

@@ -4,9 +4,9 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Dialog } from '../dialog/dialog.js';
 import styles from './confirmation-dialog.module.css.js';
 
-function ConfirmationDialog({ cancelLabel = 'Cancel', isOpen, onCancel, onConfirm, submitLabel = 'Continue', title, }) {
+function ConfirmationDialog({ cancelLabel = 'Cancel', 'data-test-selector': dataTestSelector, isOpen, onCancel, onConfirm, submitLabel = 'Continue', title, }) {
     const t = useFormattedMessage();
-    return (jsx(Dialog, { isDismissable: true, cancelLabel: t(cancelLabel), className: { dialog: styles['confirmation-dialog'] }, isOpen: isOpen, onOpenChange: onCancel, onSubmit: onConfirm, submitLabel: t(submitLabel), title: title }));
+    return (jsx(Dialog, { isDismissable: true, cancelLabel: t(cancelLabel), className: { dialog: styles['confirmation-dialog'] }, "data-test-selector": dataTestSelector, isOpen: isOpen, onOpenChange: onCancel, onSubmit: onConfirm, submitLabel: t(submitLabel), title: title }));
 }
 
 export { ConfirmationDialog };

package/dist/modals/dialog/dialog.d.ts

@@ -17,6 +17,7 @@ interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
         heading?: string;
         modal?: string;
     };
+    'data-test-selector'?: string;
     footer?: ReactNode | ((props: DialogFooterProps) => ReactNode);
     hideTitle?: boolean;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -29,5 +30,5 @@ interface DialogFooterProps {
     close: VoidFunction;
     submitLabel: string;
 }
-export declare function Dialog({ allowClose, cancelLabel, children, className, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ allowClose, cancelLabel, children, className, 'data-test-selector': dataTestSelector, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modals/dialog/dialog.js

@@ -14,15 +14,15 @@ import styles from './dialog.module.css.js';
 function Footer({ cancelLabel, close, submitLabel }) {
     return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
 }
-function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
+function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, 'data-test-selector': dataTestSelector = 'dialog', footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
     const t = useFormattedMessage();
-    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), "data-test-selector": "dialog", children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
+    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), "data-test-selector": dataTestSelector, children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
                     e.preventDefault();
                     e.stopPropagation();
                     onSubmit?.(e);
                 }, validationErrors: validationErrors, children: [jsxs("header", { className: clsx(styles.header, typeof className === 'string' ? undefined : className?.header), children: [!hideTitle && (jsx(Heading, { className: clsx(styles.heading, typeof className === 'string'
                                     ? undefined
-                                    : className?.heading), size: "xs", children: title })), hasCloseButton && (jsx("div", { className: clsx(styles.close, typeof className === 'string'
+                                    : className?.heading), size: "xs", tag: "h2", children: title })), hasCloseButton && (jsx("div", { className: clsx(styles.close, typeof className === 'string'
                                     ? undefined
                                     : className?.close), children: jsx(IconButton, { "aria-label": t('Close'), color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: clsx(styles.content, typeof className === 'string' ? undefined : className?.content), children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: clsx(styles.footer, typeof className === 'string' ? undefined : className?.footer), children: footer instanceof Function
                             ? footer({ cancelLabel, close, submitLabel })

package/dist/pages/account/sign-in-page/sign-in-page.js

@@ -63,7 +63,7 @@ function SignInPage({ returnUrl } = {}) {
     const onRecoverPasswordDialogOpen = () => {
         setRecoverPasswordDialogOpen(true);
     };
-    return (jsxs(Fragment, { children: [jsx(Page, { fullHeight: true, fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, image: IMAGE, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorMessage: errorMessage, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
+    return (jsxs(Fragment, { children: [jsx(Page, { fullHeight: true, "data-test-selector": "signInPage", fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, image: IMAGE, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorMessage: errorMessage, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
 }
 
 export { SignInPage };

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

@@ -81,7 +81,7 @@ function CartContent({ cartLines }) {
         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: "Continue shopping" }) })),
-            secondary: (jsx(RouteButton, { color: "secondary", href: isAuthenticated ? undefined : PATHS.SIGN_IN, onClick: () => {
+            secondary: (jsx(RouteButton, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: isAuthenticated ? undefined : PATHS.SIGN_IN, onClick: () => {
                     if (!isAuthenticated)
                         return;
                     saveCartForLater.mutate({ cart: currentCart });
@@ -112,7 +112,7 @@ function CartPage() {
     return (jsx(Page, { breadcrumb: [
             { href: PATHS.HOME, label: 'home' },
             { href: PATHS.CART, label: t('Cart') },
-        ], canonicalUrl: PATHS.CART, title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
+        ], canonicalUrl: PATHS.CART, "data-test-selector": "cartPage", title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
 }
 
 export { CartPage };

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

@@ -50,7 +50,7 @@ function OrderConfirmationPageContent({ cart, }) {
                 href: `${PATHS.ORDER_CONFIRMATION}?cartId=${cart.id}`,
                 label: t('Order confirmation'),
             },
-        ], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
+        ], "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: () => {
                                 saveCartForLater.mutate({ cart });

package/dist/pages/checkout/payment-page/payment-page-content.js

@@ -26,7 +26,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                 href: PATHS.REVIEW_AND_SUBMIT,
                 label: t('Review and payment'),
             },
-        ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
+        ], "data-test-selector": "paymentPage", title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidatingVAT ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
                     cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidatingVAT: setIsValidatingVAT }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {

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

@@ -19,7 +19,7 @@ function PaymentPage() {
         forceRecalculation: !hasReturnedFromAdyen,
     });
     const { data: atp, isLoading: isAtpLoading } = useFetchCurrentCheckoutAtp();
-    const hasAtp = atp && atp.length > 1;
+    const hasAtp = atp !== undefined && atp.length > 1;
     const isLoading = isLoadingCart || isAtpLoading;
     const [isProcessing, setIsProcessing] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
@@ -45,16 +45,19 @@ function PaymentPage() {
     }, [cart, navigate, isAuthenticated, isNavigating]);
     if (error)
         return jsx(ErrorPage, { error: error });
+    if (!isAtpLoading && !atp)
+        return jsx(ErrorPage, { error: new Error('ATP not found') });
     if (isLoading || isNavigating)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
-        hasNo(atp) ||
         hasNo(cart) ||
         hasNo(cart.cartLines) ||
         cart.cartLines.length === 0 ||
         hasNo(cart.billTo?.address1))
         return null;
-    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: Boolean(hasAtp), isProcessing: isProcessing, isValidatingVAT: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidatingVAT: setIsValidating }));
+    if (!atp)
+        throw new Error('Unexpected condition: ATP is undefined');
+    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: hasAtp, isProcessing: isProcessing, isValidatingVAT: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidatingVAT: setIsValidating }));
 }
 
 export { PaymentPage };

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

@@ -7,7 +7,7 @@ import { PATHS } from '../../../paths.js';
 
 function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }) {
     const t = useFormattedMessage();
-    return (jsx(Dialog, { 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(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." })] }) }));
 }
 
 export { CurrencyChangeDialog };

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

@@ -16,7 +16,7 @@ import styles from './readonly-address.module.css.js';
 
 function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipTo, }) {
     const t = useFormattedMessage();
-    return (jsxs(Form, { "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+    return (jsxs(Form, { id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
             e.preventDefault();
             const formData = new FormData(e.currentTarget);
             onSubmit({
@@ -36,7 +36,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     lastName: billTo.lastName,
                                     phone: billTo.phone,
                                     postalCode: billTo.postalCode,
-                                } })), 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(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: {
                                         address1: shipTo.address1,
                                         address2: shipTo.address2,
                                         address3: shipTo.address3,
@@ -48,7 +48,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                         lastName: shipTo.lastName,
                                         phone: shipTo.phone,
                                         postalCode: shipTo.postalCode,
-                                    } }))] })) })] })] }));
+                                    }, "data-test-selector": "shipToAddress" }))] })) })] })] }));
 }
 
 export { ReadOnlyAddresses };

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

@@ -3,7 +3,7 @@ import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import styles from './sonic-address.module.css.js';
 
 function SonicAddress() {
-    return (jsx("div", { className: styles['sonic-address'], children: jsx(FormattedMessage, { id: "Sonic address" }) }));
+    return (jsx("div", { className: styles['sonic-address'], "data-test-selector": "pickupAddressSonic", children: jsx(FormattedMessage, { id: "Sonic address" }) }));
 }
 
 export { SonicAddress };

package/dist/pages/checkout/shipping-page/shipping-page-content.js

@@ -30,7 +30,7 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
                 href: PATHS.CHECKOUT_SHIPPING,
                 label: t('Shipping details'),
             },
-        ], title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
+        ], "data-test-selector": "shippingPage", title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
                     ? cart.fulfillmentMethod

package/dist/pages/components/page/page.d.ts

@@ -5,8 +5,9 @@ export interface PageProps extends PageMetaDataProps {
     breadcrumb?: BreadcrumbLink[];
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     fluid?: boolean;
     fullHeight?: boolean;
     title?: string;
 }
-export declare function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, fluid, fullHeight, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/components/page/page.js

@@ -6,10 +6,10 @@ import { PageContainer } from '../page-container/page-container.js';
 import { PageMetaData } from '../page-meta-data/page-meta-data.js';
 
 function PageTitle({ children }) {
-    return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, size: "s", tag: "h1", children: children }));
+    return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, "data-test-selector": "pageTitle", size: "s", tag: "h1", children: children }));
 }
-function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, fluid, fullHeight, meta, openGraph, title, windowTitle, }) {
-    return (jsxs(Fragment, { children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx(PageContainer, { breadcrumbSlot: breadcrumb && jsx(Breadcrumb, { links: breadcrumb }), className: className, fluid: fluid, fullHeight: fullHeight, titleSlot: title && jsx(PageTitle, { children: title }), children: children })] }));
+function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, meta, openGraph, title, windowTitle, }) {
+    return (jsxs(Fragment, { children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx(PageContainer, { breadcrumbSlot: breadcrumb && jsx(Breadcrumb, { links: breadcrumb }), className: className, "data-test-selector": dataTestSelector, fluid: fluid, fullHeight: fullHeight, titleSlot: title && jsx(PageTitle, { children: title }), children: children })] }));
 }
 
 export { Page };

package/dist/pages/components/page-container/page-container.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
-export declare function PageContainer({ breadcrumbSlot, children, className, fluid, fullHeight, titleSlot, }: {
+export declare function PageContainer({ breadcrumbSlot, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, titleSlot, }: {
     breadcrumbSlot?: ReactNode;
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     fluid?: boolean;
     fullHeight?: boolean;
     titleSlot?: ReactNode;

package/dist/pages/components/page-container/page-container.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import resetStyles from '../../../shared/reset.module.css.js';
 import styles from './page-container.module.css.js';
 
-function PageContainer({ breadcrumbSlot, children, className, fluid, fullHeight, titleSlot, }) {
-    return (jsx("div", { className: clsx(styles['page-container'], resetStyles.reset, fullHeight && styles['full-height'], fluid && styles['fluid'], className), children: jsxs("main", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
+function PageContainer({ breadcrumbSlot, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, titleSlot, }) {
+    return (jsx("div", { className: clsx(styles['page-container'], resetStyles.reset, fullHeight && styles['full-height'], fluid && styles['fluid'], className), "data-test-selector": dataTestSelector, children: jsxs("main", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
 }
 
 export { PageContainer };

package/dist/pages/error-page/error-page.js

@@ -20,7 +20,7 @@ function ErrorPage({ error }) {
     return (jsx(Page, { breadcrumb: [
             { href: PATHS.HOME, label: 'Home' },
             { href: PATHS.HOME, label: 'Error' },
-        ], title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
+        ], "data-test-selector": "errorPage", title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
 }
 
 export { ErrorPage };

package/dist/pages/product/product-details-page/product-details.js

@@ -20,7 +20,7 @@ function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
         },
         product,
     });
-    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadcrumb: breadCrumb, canonicalUrl: page.canonicalPath, meta: {
+    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadcrumb: breadCrumb, canonicalUrl: page.canonicalPath, "data-test-selector": "productDetailsPage", meta: {
             description: page.metaDescription,
             keywords: page.metaKeywords,
         }, openGraph: {

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

@@ -24,7 +24,7 @@ import styles from './product-listing-page.module.css.js';
 function ProductListing({ data, searchClient, }) {
     const languageCode = useLanguageCode();
     const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
-    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { alternateLanguageUrls: data.page.alternateLanguageUrls, breadcrumb: data.breadCrumb, canonicalUrl: data.page.canonicalPath, className: styles['product-listing'], meta: {
+    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { alternateLanguageUrls: data.page.alternateLanguageUrls, breadcrumb: data.breadCrumb, canonicalUrl: data.page.canonicalPath, className: styles['product-listing'], "data-test-selector": "productListingPage", meta: {
                 description: data.page.metaDescription,
                 keywords: data.page.metaKeywords,
             }, openGraph: {

package/dist/pages/product/search-result-page/search-results-page.js

@@ -31,7 +31,7 @@ function SearchResultsPage({ location, searchClient, }) {
         // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
         , { 
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-            canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, className: styles['search-results'], title: t("'{0}' in all products", {
+            canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, className: styles['search-results'], "data-test-selector": "searchResultsPage", title: t("'{0}' in all products", {
                 replacementValues: { 0: keyword },
             }), windowTitle: `${t('Search')} - ${t('Sonic Equipment')}`, children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
 }

package/dist/sign-in-form/sign-in-form.js

@@ -49,11 +49,11 @@ function SignInForm({ allowGuestSignIn = false, createAccountPath, errorMessage,
             },
         });
     };
-    return (jsxs(Form, { "aria-label": title, autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }) }), errorMessage === 'Access denied' && (jsx(Message, { type: "danger", children: t('Your email and password were not recognized.') })), errorMessage === 'Unexpected error' && (jsx(Message, { type: "danger", children: t('An unexpected error occured. Please try again.') })), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+    return (jsxs(Form, { "aria-label": title, autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "pageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }) }), errorMessage === 'Access denied' && (jsx(Message, { type: "danger", children: t('Your email and password were not recognized.') })), errorMessage === 'Unexpected error' && (jsx(Message, { type: "danger", children: t('An unexpected error occured. Please try again.') })), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
                                 if (!value)
                                     return value;
                                 return (validateEmail(value) || t('Please enter a valid email address'));
-                            } }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, isDisabled: isDisabled, onClick: onRecoverPasswordDialogOpen, children: t('Forgot password?') }) }), jsx("p", { 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("div", { className: styles['form-segment'], children: jsx(Button, { color: "secondary", 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') }) }))] })] }));
+                            } }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, isDisabled: isDisabled, onClick: onRecoverPasswordDialogOpen, children: t('Forgot password?') }) }), jsx("p", { 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("div", { className: styles['form-segment'], 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') }) }))] })] }));
 }
 
 export { SignInForm };

package/dist/styles.css

@@ -2937,12 +2937,10 @@
 
   @container (inline-size >= 576px) {.orderline-card-module-AMTMm {
     padding: 32px 64px 32px 0;
-    grid-template:
-      repeat(3, minmax(0, min-content)) minmax(8px, 1fr) repeat(
+    grid-template: repeat(3, minmax(0, min-content)) minmax(8px, 1fr) repeat(
         2,
         minmax(0, min-content)
-      )
-      / 143px 1fr auto;
+      ) / 143px 1fr auto;
     grid-template-areas:
       'image tags tags'
       'image title title'
@@ -3004,8 +3002,7 @@
       var(--space-8),
       1fr
     )
-    repeat(2, minmax(0, min-content))
-    / 1fr;
+    repeat(2, minmax(0, min-content)) / 1fr;
   grid-template-areas:
     'image'
     '.'
@@ -3096,13 +3093,10 @@
 .product-card-module-pLaiB {
     --box-shadow: var(--box-shadow-heavy);
 
-    grid-template:
-      204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
+    grid-template: 204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
         var(--space-16),
         1fr
-      )
-      minmax(0, min-content)
-      / 1fr minmax(0, min-content);
+      ) minmax(0, min-content) / 1fr minmax(0, min-content);
     grid-template-areas:
       'image image'
       '. .'
@@ -3949,9 +3943,7 @@
 
   @media (width >= 768px) {
     .usp-carousel-module-UCbpX .usp-carousel-module-msaeJ {
-      left: calc(
-        ((100% - var(--image-max-width)) / 2) + var(--image-max-width)
-      );
+      left: calc((100% - var(--image-max-width)) / 2 + var(--image-max-width));
     }
   }
 

package/dist/typography/heading/heading.d.ts

@@ -8,12 +8,14 @@ export interface HeadingProps {
     breakpoints?: Partial<Record<Breakpoint, Size>>;
     children: React.ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     italic?: boolean;
     size?: Size;
     tag?: Tag;
     uppercase?: boolean;
 }
-export declare function Heading({ bold, breakpoints, children, className, italic, size, tag, uppercase, }: HeadingProps): React.ReactElement<{
+export declare function Heading({ bold, breakpoints, children, className, 'data-test-selector': dataTestSelector, italic, size, tag, uppercase, }: HeadingProps): React.ReactElement<{
     className: string;
+    'data-test-selector': string;
 }, string | React.JSXElementConstructor<any>>;
 export {};

package/dist/typography/heading/heading.js

@@ -14,7 +14,7 @@ const sizeToTag = {
     xxs: 'h6',
     xxxs: 'h6',
 };
-function Heading({ bold = true, breakpoints, children, className, italic, size = 'xxl', tag, uppercase, }) {
+function Heading({ bold = true, breakpoints, children, className, 'data-test-selector': dataTestSelector = 'heading', italic, size = 'xxl', tag, uppercase, }) {
     return createElement(tag || sizeToTag[size], {
         className: clsx(className, styles.heading, styles[size], breakpoints &&
             Object.entries(breakpoints).map(([breakpoint, bpSize]) => styles[`${breakpoint}-${bpSize}`]), {
@@ -22,6 +22,7 @@ function Heading({ bold = true, breakpoints, children, className, italic, size =
             [styles.italic]: italic,
             [styles.bold]: bold,
         }),
+        'data-test-selector': dataTestSelector,
     }, children);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "152.0.0",
+  "version": "154.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {