@sonic-equipment/ui 120.0.0 → 121.0.0

package/dist/buttons/add-to-cart-button/add-to-cart-button.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useRef } from 'react';
 import { NumberField } from '../../forms/number-field/number-field.js';
 import { SolidCartIcon } from '../../icons/solid/solid-cart-icon.js';
@@ -28,20 +28,16 @@ function AddToCartButton({ initialState = 'initial', isDisabled = false, onChang
             setManualInputQuantity(null);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [quantity]);
-    if (currentState === 'initial')
-        return (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => {
-                onChange(1);
-            } }));
-    if (currentState === 'spinner')
-        return (jsx(SpinnerState, { isDisabled: isDisabled, onChange: value => {
-                onChange(value);
-            }, onManualInput: value => {
-                setManualInputQuantity(value);
-                setState('manual-input');
-            }, quantity: quantity }));
-    return (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: value => {
-            onChange(value);
-        }, quantity: manualInputQuantity || '' }));
+    return (jsxs("div", { "data-test-selector": "addToCartButton", children: [currentState === 'initial' && (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => {
+                    onChange(1);
+                } })), currentState === 'spinner' && (jsx(SpinnerState, { isDisabled: isDisabled, onChange: value => {
+                    onChange(value);
+                }, onManualInput: value => {
+                    setManualInputQuantity(value);
+                    setState('manual-input');
+                }, quantity: quantity })), currentState === 'manual-input' && (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: value => {
+                    onChange(value);
+                }, quantity: manualInputQuantity || '' }))] }));
 }
 function InitialState({ isDisabled, onAddToCart, }) {
     return (jsx(Button, { condensed: true, icon: jsx(SolidCartIcon, {}), isDisabled: isDisabled, onClick: e => {

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

@@ -5,6 +5,7 @@ export interface ButtonProps {
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
+    'data-test-selector'?: string;
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
@@ -14,4 +15,4 @@ export interface ButtonProps {
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, icon, iconPosition, isDisabled, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
 import buttonStyles from './button.module.css.js';
 
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, icon, iconPosition = 'left', isDisabled, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     const showIconOnLeft = icon && iconPosition === 'left';
     const showIconOnRight = icon && iconPosition === 'right';
     const onClick = (e) => {
@@ -15,7 +15,7 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
             return;
         e.preventDefault();
     };
-    return (jsxs("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: onClick, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
+    return (jsxs("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: onClick, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
 }
 
 export { Button };

package/dist/buttons/link/link.js

@@ -4,7 +4,10 @@ import clsx from 'clsx';
 import styles from './link.module.css.js';
 
 function Link({ children, className, color = 'primary', hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
-    return (jsx("a", { className: clsx({ [styles['has-underline']]: hasUnderline }, styles['link'], styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
+    return (jsx("a", { className: clsx({
+            [styles.hover]: Boolean(props.href),
+            [styles['has-underline']]: hasUnderline && props.href,
+        }, styles['link'], styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
 }
 
 export { Link };

package/dist/buttons/link/link.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"link":"link-module-xLqBn","has-underline":"link-module-UuCEp","secondary":"link-module-v31wH","primary":"link-module-bGD6u"};
+var styles = {"link":"link-module-xLqBn","hover":"link-module-HZbAL","has-underline":"link-module-UuCEp","secondary":"link-module-v31wH","primary":"link-module-bGD6u"};
 
 export { styles as default };

package/dist/country-selector/country-selector-dialog/country-selector-dialog.js

@@ -31,12 +31,12 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
     return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
             dialog: styles['country-selector-dialog'],
             modal: styles.modal,
-        }, footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
+        }, footer: jsx(Button, { withArrow: true, "data-test-selector": "clSelector_apply", type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
             onSubmit({ country: currentCountry, language: currentLanguage });
             e.preventDefault();
             e.stopPropagation();
-        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(Select, { label: t('Country'), onChange: value => setCurrentCountry(countries.find(country => country.id === value) ||
-                                currentCountry), options: countryOptions, selectedOption: currentCountry.id, showPlaceholder: false, variant: "solid" })), jsx(Select, { label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
+        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(Select, { "data-test-selector": "clSelector_country", label: t('Country'), onChange: value => setCurrentCountry(countries.find(country => country.id === value) ||
+                                currentCountry), options: countryOptions, selectedOption: currentCountry.id, showPlaceholder: false, variant: "solid" })), jsx(Select, { "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
 }
 
 export { CountrySelectorDialog };

package/dist/display/product-price/product-price.d.ts

@@ -3,6 +3,5 @@ export interface ProductPriceProps {
     isVatIncluded: boolean | null;
     originalPrice: number;
     price: number;
-    pricePerUnit?: number;
 }
 export declare function ProductPrice({ className, isVatIncluded, originalPrice, price, }: ProductPriceProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/display/product-price/product-price.js

@@ -11,7 +11,7 @@ function ProductPrice({ className, isVatIncluded = false, originalPrice, price,
     const priceWithCurrency = formatPrice(price);
     const [wholes, decimals] = priceWithCurrency.split('.');
     const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
-    return (jsxs("div", { className: clsx(className, styles['product-price']), children: [jsx("span", { className: clsx(styles['original-price'], {
+    return (jsxs("div", { className: clsx(className, styles['product-price']), "data-current-price": price, "data-original-price": originalPrice, children: [jsx("span", { className: clsx(styles['original-price'], {
                     [styles['is-hidden']]: !showOriginalPrice,
                 }), children: originalPriceWithCurrency }), jsxs("div", { className: styles['current-price-wrapper'], children: [jsxs("div", { className: styles['current-price'], children: [jsx("span", { className: styles.wholes, children: wholes }), jsx("span", { className: styles.dot, children: "." }), jsx("span", { className: styles.decimals, children: decimals })] }), isVatIncluded !== null && (jsx("span", { className: styles.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) }))] })] }));
 }

package/dist/display/product-price/product-total-price.js

@@ -10,7 +10,7 @@ function ProductTotalPrice({ className, originalTotalPrice: originalPrice, price
     const t = useFormattedMessage();
     if (Number.isNaN(totalPrice))
         return;
-    return (jsxs("div", { className: clsx(styles['product-total-price'], className), children: [jsx(ProductPrice, { isVatIncluded: null, originalPrice: originalPrice, price: totalPrice }), jsx("span", { className: styles['price-per-unit'], children: `${formatPrice(pricePerUnit ?? 0)}/${t('pc')}` })] }));
+    return (jsxs("div", { className: clsx(styles['product-total-price'], className), "data-price-per-unit": pricePerUnit, children: [jsx(ProductPrice, { isVatIncluded: null, originalPrice: originalPrice, price: totalPrice }), jsx("span", { className: styles['price-per-unit'], children: `${formatPrice(pricePerUnit ?? 0)}/${t('pc')}` })] }));
 }
 
 export { ProductTotalPrice };

package/dist/forms/number-field/number-field.js

@@ -17,10 +17,10 @@ import styles from './number-field.module.css.js';
  */
 function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
     const inputRef = useRef(null);
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { isDisabled: isDisabled, 
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { "data-test-selector": "decrement", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
-                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button, { isDisabled: isDisabled, 
+                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button, { "data-test-selector": "increment", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
                         onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "increment", children: jsx(StrokeExpandIcon, {}) }))] }), jsx(FieldError, {})] }));

package/dist/forms/select/select.d.ts

@@ -1,4 +1,5 @@
 export interface SelectProps<T> {
+    'data-test-selector'?: string;
     isDisabled?: boolean;
     label: string;
     onChange: (value: keyof T) => void;
@@ -10,4 +11,4 @@ export interface SelectProps<T> {
     size?: 'sm' | 'md';
     variant?: 'outline' | 'solid';
 }
-export declare function Select<T extends object>({ isDisabled, label, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends object>({ 'data-test-selector': dataTestSelector, isDisabled, label, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/select/select.js

@@ -8,7 +8,7 @@ import { StrokeCheckmarkIcon } from '../../icons/stroke/stroke-checkmark-icon.js
 import { Label } from '../label/label.js';
 import styles from './select.module.css.js';
 
-function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+function Select({ 'data-test-selector': dataTestSelector, isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {
@@ -23,9 +23,9 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
         window.addEventListener('resize', updateWidth);
         return () => window?.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })] }), jsx(Popover, { ref: ref => 
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant]), "data-test-selector": dataTestSelector, isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })] }), jsx(Popover, { ref: ref => 
                 // Workaround for react/react-aria #1513
-                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles.listbox, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
+                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
 }
 
 export { Select };

package/dist/notifications/announcements/announcement.js

@@ -24,7 +24,7 @@ const iconMap = {
     sales: jsx(SolidSaleIcon, {}),
 };
 function Announcement({ announcement: { href, id, subType, text, title, type }, onDismiss, }) {
-    return (jsxs(RouteLink, { className: clsx(styles.announcement, styles[type], styles[subType]), href: href, children: [jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), jsxs("p", { className: styles.text, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
+    return (jsxs(RouteLink, { className: clsx(styles.announcement, { [styles.hover]: Boolean(href) }, styles[type], styles[subType]), href: href, children: [jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), jsxs("p", { className: styles.text, children: [text, href && jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
 }
 
 export { Announcement };

package/dist/notifications/announcements/announcement.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
+var styles = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","hover":"announcement-module-Fj5ya","promo":"announcement-module-E6DqW"};
 
 export { styles as default };

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './product-details-page-layout.module.css.js';
 
 function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }) {
-    return (jsxs("div", { className: styles['product-details-page-layout'], children: [jsxs("section", { className: styles.top, children: [jsx("div", { className: styles['image-gallery'], children: imageGallery }), jsx("div", { className: styles['product-information'], children: productInformation })] }), jsx("section", { className: styles.usp, children: usp }), jsx("section", { className: styles.included, children: included }), jsx("section", { className: styles['recently-viewed'], children: recentlyViewed })] }));
+    return (jsxs("div", { className: styles['product-details-page-layout'], children: [jsxs("section", { className: styles.top, children: [jsx("div", { className: styles['image-gallery'], children: imageGallery }), jsx("div", { className: styles['product-information'], "data-test-selector": "productInformation", children: productInformation })] }), jsx("section", { className: styles.usp, "data-test-selector": "usp", children: usp }), jsx("section", { className: styles.included, "data-test-selector": "included", children: included }), jsx("section", { className: styles['recently-viewed'], "data-test-selector": "recentlyViewed", children: recentlyViewed })] }));
 }
 
 export { ProductDetailsPageLayout };

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

@@ -13,7 +13,7 @@ import { Heading } from '../../../../typography/heading/heading.js';
 import styles from './product-details-panel.module.css.js';
 
 function ProductDetailsPanel({ priceComponent, product, }) {
-    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(ProductPrice, { isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles.description, dangerouslySetInnerHTML: {
+    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(ProductPrice, { "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles.description, dangerouslySetInnerHTML: {
                                 __html: product.content.htmlContent,
                             } }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [product.attributeTypes.length > 0 && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles['feature-list'], features: product.attributeTypes.map(attribute => ({
                                     id: `${attribute.id}`,

package/dist/styles.css

@@ -252,7 +252,6 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  cursor: pointer;
   font: inherit;
   gap: var(--space-4);
   -webkit-tap-highlight-color: transparent;
@@ -266,12 +265,15 @@
     cursor: default;
     opacity: 0.4;
   }
-.link-module-xLqBn:where(.link-module-UuCEp) {
-    text-decoration: underline;
+.link-module-xLqBn:where(.link-module-HZbAL) {
+    cursor: pointer;
   }
-.link-module-xLqBn:where(.link-module-UuCEp)::after {
-      display: none;
+.link-module-xLqBn:where(.link-module-HZbAL):where(.link-module-UuCEp) {
+      text-decoration: underline;
     }
+.link-module-xLqBn:where(.link-module-HZbAL):where(.link-module-UuCEp)::after {
+        display: none;
+      }
 .link-module-xLqBn:where(.link-module-v31wH) {
     color: var(--color-brand-red);
   }
@@ -4490,11 +4492,11 @@ button.swiper-pagination-bullet {
 
   /* stylelint-disable-next-line no-descending-specificity */
 
-  .announcement-module-Xi0L5:hover .announcement-module-yXGsN {
+  .announcement-module-Xi0L5.announcement-module-Fj5ya:hover .announcement-module-yXGsN {
       text-decoration: underline;
     }
 
-  .announcement-module-Xi0L5:hover:where(.announcement-module-E6DqW) {
+  .announcement-module-Xi0L5.announcement-module-Fj5ya:hover:where(.announcement-module-E6DqW) {
       border-color: var(--color-brand-dark-red);
       background-color: var(--color-brand-dark-red);
     }

package/package.json

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