@sonic-equipment/ui 164.0.0 → 165.0.0

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

@@ -6,24 +6,26 @@ import clsx from 'clsx';
 import { Link } from '../buttons/link/link.js';
 import { StrokeCategoriesIcon } from '../icons/stroke/stroke-categories-icon.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { transformAlgoliaCategoryData } from '../shared/model/category.js';
 import { FilterSection } from './filter-section.js';
 import styles from './algolia-filter-panel.module.css.js';
 import filterSectionStyles from './filter-section.module.css.js';
 
 function AlgoliaCategoriesFilters() {
-    const { items: categories, refine } = useHierarchicalMenu({
+    const { items, refine } = useHierarchicalMenu({
         attributes: [
-            'hierarchicalCategories.lvl0',
-            'hierarchicalCategories.lvl1',
-            'hierarchicalCategories.lvl2',
+            'hierarchicalStorefrontCategories.lvl0',
+            'hierarchicalStorefrontCategories.lvl1',
+            'hierarchicalStorefrontCategories.lvl2',
         ],
     });
     const t = useFormattedMessage();
-    if (categories.length <= 0)
+    if (items.length <= 0)
         return null;
-    return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map(category => (jsx(Fragment, { children: jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles.category, {
+    const categories = transformAlgoliaCategoryData(items);
+    return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map((category, index) => (jsx(Fragment, { children: jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles.category, {
                         [styles['is-active']]: category.isRefined,
-                    }), color: "primary", onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label }), jsxs("span", { className: styles.count, children: ["(", category.count, ")"] })] }) }) }, category.value))) }));
+                    }), color: "primary", onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.name }), jsxs("span", { className: styles.count, children: ["(", category.count, ")"] })] }) }) }, category.href || index))) }));
 }
 
 export { AlgoliaCategoriesFilters };

package/dist/background-overlay/background-overlay-manager.d.ts

@@ -0,0 +1,178 @@
+/**
+ * BackgroundOverlayManager is a singleton class that manages the background overlay elements.
+ * It creates, updates, and removes the background overlay elements as needed.
+ */
+export declare class BackgroundOverlayManager {
+    private static _element;
+    private static _overlayZIndexes;
+    private static _overlayQueue;
+    /**
+     * Gets the z-index from a css variable using a given overlay name.
+     * @private
+     * @param overlayName - The name of the overlay.
+     * @returns The z-index of the overlay.
+     */
+    private static _getZIndexByOverlayName;
+    /**
+     * Gets, or creates, the background DOM element to use as the dim layer.
+     * When the element is created, it is appended to the document body.
+     * The element is also given an ID and a class name.
+     * @private
+     * @returns The background DOM element.
+     */
+    private static _getElement;
+    /**
+     * Removes the background DOM element visually by removing the 'visible' class.
+     * @private
+     */
+    private static _removeElement;
+    /**
+     * Gets the current, visual, most in front, overlay entry from the overlay queue.
+     * @private
+     * @returns The current overlay entry.
+     */
+    private static get _currentOverlayEntry();
+    /**
+     * Get the overlay entry by instance ID.
+     * @private
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns The overlay entry.
+     */
+    private static _getOverlayEntryByInstanceId;
+    /**
+     * Removes the overlay entry by instance ID from the overlay queue.
+     * This method also calls the onClose function of the entry if it exists.
+     * @private
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns Void
+     */
+    private static _removeOverlayEntry;
+    /**
+     * Rerenders the background overlay element.
+     * This method updates the z-index of the element and adds the 'visible' class.
+     * If there is no current overlay entry, it removes the element.
+     * @private
+     * @returns Void
+     */
+    private static _rerender;
+    /**
+     * Handles the click event on the background overlay element.
+     * This method stops the event from propagating and prevents the default action.
+     * It also calls the onClick function of the current overlay entry if it exists.
+     * @private
+     * @param e - The mouse event.
+     * @returns Void
+     */
+    private static _onClick;
+    /**
+     * Mounts an overlay instance.
+     * This method creates a new overlay entry in the overlay queue.
+     * It also sets the z-index and timestamp of the entry.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isVisible - A boolean indicating whether the overlay is visible or not.
+     * @param onClick - A function to call when the overlay is clicked.
+     * @param onClose - A function to call when the overlay is closed.
+     * @param overlayName - The name of the overlay.
+     * @returns Void
+     */
+    static mountInstance({ instanceId, isVisible, onClick, onClose, overlayName, }: {
+        instanceId: string;
+        isVisible: boolean;
+        onClick: VoidFunction | undefined;
+        onClose: VoidFunction | undefined;
+        overlayName: string;
+    }): void;
+    /**
+     * Unmounts an overlay instance.
+     * This method removes the overlay entry from the overlay queue.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns Void
+     */
+    static unmountInstance(instanceId: string): void;
+    /**
+     * Updates an overlay instance.
+     * This method updates the properties of the overlay entry in the overlay queue.
+     * It also sets the z-index of the entry.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isVisible - A boolean indicating whether the overlay is visible or not.
+     * @param onClick - A function to call when the overlay is clicked.
+     * @param onClose - A function to call when the overlay is closed.
+     * @param overlayName - The name of the overlay.
+     * @returns Void
+     */
+    static updateInstance({ instanceId, isVisible, onClick, onClose, overlayName, }: {
+        instanceId: string;
+        isVisible: boolean;
+        onClick: VoidFunction | undefined;
+        onClose: VoidFunction | undefined;
+        overlayName: string;
+    }): void;
+    /**
+     * Shows or hides the overlay.
+     * This method updates the visibility of the overlay entry in the overlay queue.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isOpen - A boolean indicating whether to show or hide the overlay.
+     * @returns Void
+     */
+    static showOverlay({ instanceId, isOpen, }: {
+        instanceId: string;
+        isOpen: boolean;
+    }): void;
+    /**
+     * Creates a new background overlay instance.
+     * This method returns a new instance of the BackgroundOverlay class.
+     * @public
+     * @returns A new instance of the BackgroundOverlay class.
+     */
+    static createBackgroundOverlay(): BackgroundOverlay;
+}
+/**
+ * BackgroundOverlay is a class that represents a single background overlay.
+ * It is used to create and manage the background overlay elements.
+ * It is a wrapper around the BackgroundOverlayManager class.
+ */
+declare class BackgroundOverlay {
+    /**
+     * The ID of the overlay instance.
+     * This is a unique identifier for the overlay instance.
+     * @private
+     * @default A unique UUID string.
+     */
+    private _instanceId;
+    /**
+     * A boolean indicating whether the overlay instance is mounted.
+     * This is used to determine whether to create or update the overlay instance.
+     * @private
+     * @default false
+     */
+    private _isMounted;
+    /**
+     * Mounts or updates the overlay instance.
+     * This method creates or updates the overlay instance with the given properties.
+     * @returns Void
+     */
+    mountOrUpdate({ isVisible, onClick, onClose, overlayName, }: {
+        isVisible?: boolean;
+        onClick?: VoidFunction;
+        onClose?: VoidFunction;
+        overlayName: string;
+    }): void;
+    /**
+     * Unmounts the overlay instance.
+     * This method removes the overlay instance visually and from the overlay queue
+     * @returns Void
+     */
+    unmount(): void;
+    /**
+     * Shows or hides the overlay.
+     * This method updates the visibility of the overlay instance.
+     * @param isOpen - A boolean indicating whether to show or hide the overlay.
+     * @returns Void
+     */
+    show(isOpen: boolean): void;
+}
+export {};

package/dist/background-overlay/background-overlay-manager.js

@@ -0,0 +1,291 @@
+import { getCssPropertyValue } from '../shared/utils/css.js';
+import { createUUID } from '../shared/utils/uuid.js';
+
+/**
+ * BackgroundOverlayManager is a singleton class that manages the background overlay elements.
+ * It creates, updates, and removes the background overlay elements as needed.
+ */
+class BackgroundOverlayManager {
+    /**
+     * Gets the z-index from a css variable using a given overlay name.
+     * @private
+     * @param overlayName - The name of the overlay.
+     * @returns The z-index of the overlay.
+     */
+    static _getZIndexByOverlayName(overlayName) {
+        if (BackgroundOverlayManager._overlayZIndexes[overlayName])
+            return BackgroundOverlayManager._overlayZIndexes[overlayName];
+        const zIndex = Number.parseFloat(String(getCssPropertyValue(`--background-overlay-${overlayName}`)));
+        if (Number.isNaN(zIndex))
+            throw new Error(`Unable to determine z-index for CSS property: --background-overlay-${overlayName}`);
+        return (BackgroundOverlayManager._overlayZIndexes[overlayName] = zIndex);
+    }
+    /**
+     * Gets, or creates, the background DOM element to use as the dim layer.
+     * When the element is created, it is appended to the document body.
+     * The element is also given an ID and a class name.
+     * @private
+     * @returns The background DOM element.
+     */
+    static _getElement() {
+        if (BackgroundOverlayManager._element)
+            return BackgroundOverlayManager._element;
+        if (!document)
+            throw new Error('Not running in browser? document is not defined.');
+        const element = (BackgroundOverlayManager._element =
+            document.createElement('div'));
+        element.id = 'background-overlay';
+        element.classList.add('background-overlay');
+        element.addEventListener('click', BackgroundOverlayManager._onClick);
+        document.body.append(element);
+        return element;
+    }
+    /**
+     * Removes the background DOM element visually by removing the 'visible' class.
+     * @private
+     */
+    static _removeElement() {
+        BackgroundOverlayManager._element?.classList.remove('visible');
+    }
+    /**
+     * Gets the current, visual, most in front, overlay entry from the overlay queue.
+     * @private
+     * @returns The current overlay entry.
+     */
+    static get _currentOverlayEntry() {
+        return BackgroundOverlayManager._overlayQueue
+            .sort((a, b) => b.zIndex - a.zIndex || b.timestamp - a.timestamp)
+            .find(entry => entry.isVisible);
+    }
+    /**
+     * Get the overlay entry by instance ID.
+     * @private
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns The overlay entry.
+     */
+    static _getOverlayEntryByInstanceId(instanceId) {
+        return BackgroundOverlayManager._overlayQueue.find(entry => entry.instanceId === instanceId);
+    }
+    /**
+     * Removes the overlay entry by instance ID from the overlay queue.
+     * This method also calls the onClose function of the entry if it exists.
+     * @private
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns Void
+     */
+    static _removeOverlayEntry(instanceId) {
+        const entry = BackgroundOverlayManager._getOverlayEntryByInstanceId(instanceId);
+        entry?.onClose?.();
+        BackgroundOverlayManager._overlayQueue =
+            BackgroundOverlayManager._overlayQueue.filter(entry => entry.instanceId !== instanceId);
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Rerenders the background overlay element.
+     * This method updates the z-index of the element and adds the 'visible' class.
+     * If there is no current overlay entry, it removes the element.
+     * @private
+     * @returns Void
+     */
+    static _rerender() {
+        const currentOverlayZindex = BackgroundOverlayManager._currentOverlayEntry?.zIndex;
+        if (currentOverlayZindex === undefined)
+            return this._removeElement();
+        BackgroundOverlayManager._getElement().style.zIndex =
+            String(currentOverlayZindex);
+        BackgroundOverlayManager._getElement().classList.add('visible');
+    }
+    /**
+     * Mounts an overlay instance.
+     * This method creates a new overlay entry in the overlay queue.
+     * It also sets the z-index and timestamp of the entry.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isVisible - A boolean indicating whether the overlay is visible or not.
+     * @param onClick - A function to call when the overlay is clicked.
+     * @param onClose - A function to call when the overlay is closed.
+     * @param overlayName - The name of the overlay.
+     * @returns Void
+     */
+    static mountInstance({ instanceId, isVisible, onClick, onClose, overlayName, }) {
+        const zIndex = BackgroundOverlayManager._getZIndexByOverlayName(overlayName);
+        const timestamp = Date.now();
+        BackgroundOverlayManager._overlayQueue.push({
+            instanceId,
+            isVisible,
+            onClick,
+            onClose,
+            timestamp,
+            zIndex,
+        });
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Unmounts an overlay instance.
+     * This method removes the overlay entry from the overlay queue.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @returns Void
+     */
+    static unmountInstance(instanceId) {
+        BackgroundOverlayManager._removeOverlayEntry(instanceId);
+    }
+    /**
+     * Updates an overlay instance.
+     * This method updates the properties of the overlay entry in the overlay queue.
+     * It also sets the z-index of the entry.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isVisible - A boolean indicating whether the overlay is visible or not.
+     * @param onClick - A function to call when the overlay is clicked.
+     * @param onClose - A function to call when the overlay is closed.
+     * @param overlayName - The name of the overlay.
+     * @returns Void
+     */
+    static updateInstance({ instanceId, isVisible, onClick, onClose, overlayName, }) {
+        const zIndex = BackgroundOverlayManager._getZIndexByOverlayName(overlayName);
+        const instance = BackgroundOverlayManager._getOverlayEntryByInstanceId(instanceId);
+        if (!instance)
+            return;
+        instance.isVisible = isVisible;
+        instance.onClick = onClick;
+        instance.onClose = onClose;
+        instance.zIndex = zIndex;
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Shows or hides the overlay.
+     * This method updates the visibility of the overlay entry in the overlay queue.
+     * @public
+     * @param instanceId - The instance ID of the overlay entry.
+     * @param isOpen - A boolean indicating whether to show or hide the overlay.
+     * @returns Void
+     */
+    static showOverlay({ instanceId, isOpen, }) {
+        const entry = BackgroundOverlayManager._getOverlayEntryByInstanceId(instanceId);
+        if (!entry)
+            return;
+        entry.isVisible = isOpen;
+        BackgroundOverlayManager._rerender();
+    }
+    /**
+     * Creates a new background overlay instance.
+     * This method returns a new instance of the BackgroundOverlay class.
+     * @public
+     * @returns A new instance of the BackgroundOverlay class.
+     */
+    static createBackgroundOverlay() {
+        return new BackgroundOverlay();
+    }
+}
+Object.defineProperty(BackgroundOverlayManager, "_element", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: null
+});
+Object.defineProperty(BackgroundOverlayManager, "_overlayZIndexes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {}
+});
+Object.defineProperty(BackgroundOverlayManager, "_overlayQueue", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: []
+});
+/**
+ * Handles the click event on the background overlay element.
+ * This method stops the event from propagating and prevents the default action.
+ * It also calls the onClick function of the current overlay entry if it exists.
+ * @private
+ * @param e - The mouse event.
+ * @returns Void
+ */
+Object.defineProperty(BackgroundOverlayManager, "_onClick", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const currentOverlayEntry = BackgroundOverlayManager._currentOverlayEntry;
+        if (!currentOverlayEntry)
+            return;
+        return currentOverlayEntry.onClick?.();
+    }
+});
+/**
+ * BackgroundOverlay is a class that represents a single background overlay.
+ * It is used to create and manage the background overlay elements.
+ * It is a wrapper around the BackgroundOverlayManager class.
+ */
+class BackgroundOverlay {
+    constructor() {
+        /**
+         * The ID of the overlay instance.
+         * This is a unique identifier for the overlay instance.
+         * @private
+         * @default A unique UUID string.
+         */
+        Object.defineProperty(this, "_instanceId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createUUID()
+        });
+        /**
+         * A boolean indicating whether the overlay instance is mounted.
+         * This is used to determine whether to create or update the overlay instance.
+         * @private
+         * @default false
+         */
+        Object.defineProperty(this, "_isMounted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+    }
+    /**
+     * Mounts or updates the overlay instance.
+     * This method creates or updates the overlay instance with the given properties.
+     * @returns Void
+     */
+    mountOrUpdate({ isVisible = false, onClick, onClose, overlayName, }) {
+        (this._isMounted
+            ? BackgroundOverlayManager.updateInstance
+            : BackgroundOverlayManager.mountInstance)({
+            instanceId: this._instanceId,
+            isVisible,
+            onClick,
+            onClose,
+            overlayName,
+        });
+        this._isMounted = true;
+    }
+    /**
+     * Unmounts the overlay instance.
+     * This method removes the overlay instance visually and from the overlay queue
+     * @returns Void
+     */
+    unmount() {
+        BackgroundOverlayManager.unmountInstance(this._instanceId);
+    }
+    /**
+     * Shows or hides the overlay.
+     * This method updates the visibility of the overlay instance.
+     * @param isOpen - A boolean indicating whether to show or hide the overlay.
+     * @returns Void
+     */
+    show(isOpen) {
+        BackgroundOverlayManager.showOverlay({
+            instanceId: this._instanceId,
+            isOpen,
+        });
+    }
+}
+
+export { BackgroundOverlayManager };

package/dist/background-overlay/background-overlay.d.ts

@@ -1,7 +1,17 @@
+import './background-overlay.module.css';
+type Position = 'in-front' | 'behind-header';
 interface BackgroundOverlayProps {
-    className?: string;
+    /** Whether the overlay is open or not. */
     isOpen: boolean;
+    /** Function to call when the overlay is clicked. */
+    onClick?: VoidFunction;
+    /** Function to call when the overlay is closed. */
     onClose?: VoidFunction;
+    /** Position of the overlay. Can be 'in-front' or 'behind-header' */
+    position?: Position;
 }
-export declare function BackgroundOverlay({ className, isOpen, onClose, }: BackgroundOverlayProps): React.ReactPortal | null;
+/**
+ * BackgroundOverlay is a component that renders a "virtual" background overlay.
+ */
+export declare function BackgroundOverlay({ isOpen, onClick, onClose, position, }: BackgroundOverlayProps): null;
 export {};

package/dist/background-overlay/background-overlay.js

@@ -1,33 +1,34 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import clsx from 'clsx';
-import styles from './background-overlay.module.css.js';
+import { useMemo, useEffect } from 'react';
+import { BackgroundOverlayManager } from './background-overlay-manager.js';
 
-function BackgroundOverlay({ className, isOpen, onClose, }) {
-    const nodeRef = useRef(null);
+/**
+ * BackgroundOverlay is a component that renders a "virtual" background overlay.
+ */
+function BackgroundOverlay({ isOpen, onClick, onClose, position = 'in-front', }) {
+    /**
+     * An instance of the BackgroundOverlay class is
+     * created using the BackgroundOverlayManager.
+     */
+    const backgroundOverlay = useMemo(() => BackgroundOverlayManager.createBackgroundOverlay(), []);
     useEffect(() => {
-        const node = nodeRef.current;
-        if (!node || isOpen)
-            return;
-        const handleAnimationEnd = () => {
-            node.removeEventListener('animationend', handleAnimationEnd);
-        };
-        node.addEventListener('animationend', handleAnimationEnd);
-        return () => {
-            node.removeEventListener('animationend', handleAnimationEnd);
-        };
-    }, [isOpen]);
-    if (typeof document === 'undefined')
-        return null;
-    return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles['background-overlay'], {
-            [styles['open']]: isOpen,
-            [styles['close']]: !isOpen,
-        }, className), onClick: onClose, onKeyUp: event => {
-            if (event.key === 'Escape')
-                onClose?.();
-        }, role: "none" }), document.body);
+        /* Mount or update the background overlay instance */
+        backgroundOverlay.mountOrUpdate({
+            isVisible: isOpen,
+            onClick,
+            onClose,
+            overlayName: position,
+        });
+    }, [backgroundOverlay, isOpen, onClick, onClose, position]);
+    useEffect(() => {
+        /* Show or hide the background overlay */
+        backgroundOverlay.show(isOpen);
+    }, [backgroundOverlay, isOpen]);
+    useEffect(() => {
+        /* Unmount the background overlay instance */
+        return () => backgroundOverlay.unmount();
+    }, [backgroundOverlay]);
+    return null;
 }
 
 export { BackgroundOverlay };

package/dist/badges/badge/badge.d.ts

@@ -1,5 +1,6 @@
 export interface BadgeProps {
+    'aria-label'?: string;
     count?: number;
     variant?: 'red' | 'orange' | 'green';
 }
-export declare function Badge({ count, variant }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ 'aria-label': ariaLabel, count, variant, }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/badges/badge/badge.js

@@ -5,12 +5,12 @@ import clsx from 'clsx';
 import styles from './badge.module.css.js';
 
 const ANIMATION_DURATION = 600;
-function Badge({ count, variant = 'red' }) {
+function Badge({ 'aria-label': ariaLabel, count, variant = 'red', }) {
     const lastCount = useRef(null);
     useEffect(() => {
         lastCount.current = count;
     }, [count]);
-    return (jsx("span", { className: clsx(styles.badge, styles[variant], {
+    return (jsx("span", { "aria-label": ariaLabel, className: clsx(styles.badge, styles[variant], {
             [styles['is-animating']]: count !== undefined && count !== lastCount.current,
         }), style: { '--animation-duration': `${ANIMATION_DURATION}ms` }, children: count !== undefined && jsx("span", { className: styles.count, children: count }) }, count));
 }

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

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 export interface IconWithBadgeProps {
+    'aria-label'?: string;
     badge: ReactNode;
     'data-test-selector'?: string;
     icon: ReactNode;
 }
-export declare function IconWithBadge({ badge, 'data-test-selector': dataTestSelector, icon, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconWithBadge({ 'aria-label': ariaLabel, 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, '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 })] }));
+function IconWithBadge({ 'aria-label': ariaLabel, badge, 'data-test-selector': dataTestSelector, icon, }) {
+    return (jsxs("div", { "aria-label": ariaLabel, className: styles['icon-with-badge'], children: [icon, jsx("div", { className: styles['badge-wrapper'], "data-test-selector": dataTestSelector, children: badge })] }));
 }
 
 export { IconWithBadge };

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

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