@sonic-equipment/ui 162.0.0 → 163.0.0

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

@@ -9,8 +9,9 @@ export interface LinkProps {
     isDisabled?: boolean;
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyUp?: (event: KeyboardEvent) => void;
+    role?: string;
     tabIndex?: number;
     target?: string;
     title?: string;
 }
-export declare function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, tabIndex, target, title, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link/link.js

@@ -3,17 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './link.module.css.js';
 
-function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, tabIndex, target, title, ...rest }) {
+function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }) {
     if (href) {
         return (jsx("a", { className: clsx({
                 [styles.hover]: Boolean(href || onClick),
                 [styles['has-underline']]: hasUnderline,
-            }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
+            }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
     }
     return (jsx("button", { className: clsx({
             [styles.hover]: Boolean(href || onClick),
             [styles['has-underline']]: hasUnderline,
-        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
+        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 }
 
 export { Link };

package/dist/collapsables/cascading-component/cascading-component-container-context.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContainerContextType } from './types';
+export declare const CascadingComponentContainerContext: React.Context<CascadingComponentContainerContextType | null>;

package/dist/collapsables/cascading-component/cascading-component-container-context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CascadingComponentContainerContext = createContext(null);
+
+export { CascadingComponentContainerContext };

package/dist/collapsables/cascading-component/cascading-component-container-provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface CascadingComponentContainerProps {
+    children: ReactNode;
+    onClose?: VoidFunction;
+    timeout?: number;
+}
+export declare function CascadingComponentContainerProvider({ children, onClose, timeout, }: CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/cascading-component/cascading-component-container-provider.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { voidFunction } from '../../shared/model/defaults.js';
+import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function CascadingComponentContainerProvider({ children, onClose, timeout, }) {
+    const parentContext = useCascadingComponentContainer();
+    const [closeChildrenFns, updateCloseChildrenFns] = useState([]);
+    const value = useMemo(() => ({
+        close: onClose || voidFunction,
+        closeChildCascadingComponents: () => closeChildrenFns.forEach(fn => fn()),
+        registerChild: onClose => updateCloseChildrenFns(fns => [...fns, onClose]),
+        timeout,
+        unregisterChild: onClose => updateCloseChildrenFns(fns => fns.filter(fn => fn !== onClose)),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onClose, timeout]);
+    useEffect(() => {
+        if (!parentContext || !onClose)
+            return;
+        parentContext.registerChild(onClose);
+        return () => parentContext.unregisterChild(onClose);
+    }, [onClose, parentContext]);
+    return (jsx(CascadingComponentContainerContext.Provider, { value: value, children: children }));
+}
+
+export { CascadingComponentContainerProvider };

package/dist/collapsables/cascading-component/cascading-component-container.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CascadingComponentProps {
+    children: React.ReactNode;
+    onClose?: VoidFunction;
+    timeout?: number;
+}
+export declare function CascadingComponentContainer({ children, onClose, timeout, }: CascadingComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/cascading-component/cascading-component-container.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
+
+function CascadingComponentContainer({ children, onClose, timeout, }) {
+    return (jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }));
+}
+
+export { CascadingComponentContainer };

package/dist/collapsables/cascading-component/cascading-component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RefHTMLElement } from '../unmounter/utils';
+import { CascadingComponentContainerProps } from './cascading-component-container-provider';
+interface CascadingComponentProps<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined> {
+    children: React.ReactNode;
+    isVisible?: boolean;
+    nodeRef: React.Ref<RefElement>;
+    onUnmounted?: () => void;
+    timeout?: number;
+}
+export declare function CascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible, nodeRef, onClose, onUnmounted, timeout, }: CascadingComponentProps<TElement, RefElement> & CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalCascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible: _isVisible, nodeRef, onUnmounted, timeout: timeout, }: CascadingComponentProps<TElement, RefElement>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/cascading-component/cascading-component.js

@@ -0,0 +1,44 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Unmounter } from '../unmounter/unmounter.js';
+import { createAddEndListener } from '../unmounter/utils.js';
+import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function CascadingComponent({ children, isVisible = false, nodeRef, onClose, onUnmounted, timeout, }) {
+    const context = useCascadingComponentContainer();
+    if (!context) {
+        return (jsx(Fragment, { children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onUnmounted: onUnmounted, timeout: timeout, children: children }) }) }));
+    }
+    return (jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onUnmounted: onUnmounted, timeout: timeout || context.timeout, children: children }));
+}
+function InternalCascadingComponent({ children, isVisible: _isVisible = false, nodeRef, onUnmounted, timeout: timeout, }) {
+    const [isVisible, setIsVisible] = useState(_isVisible);
+    const [unmount, setUnmount] = useState(false);
+    useEffect(() => {
+        if (_isVisible) {
+            setIsVisible(_isVisible);
+            setUnmount(false);
+        }
+        else {
+            setUnmount(true);
+        }
+    }, [_isVisible]);
+    useEffect(() => {
+        if (isVisible) {
+            setUnmount(false);
+        }
+    }, [isVisible]);
+    const onUnmountReady = useCallback(() => {
+        setIsVisible(false);
+    }, []);
+    const onClose = useCallback(() => {
+        setUnmount(true);
+    }, []);
+    return (jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, ...(timeout === undefined
+            ? { addEndListener: createAddEndListener(nodeRef) }
+            : { timeout }), in: isVisible, nodeRef: nodeRef, children: jsx(Unmounter, { onUnmounted: onUnmounted, onUnmountReady: onUnmountReady, unmount: unmount, children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }) }) }));
+}
+
+export { CascadingComponent, InternalCascadingComponent };

package/dist/collapsables/cascading-component/types.d.ts

@@ -0,0 +1,11 @@
+export interface CascadingComponentContainerContextType {
+    close: VoidFunction;
+    closeChildCascadingComponents: VoidFunction;
+    registerChild: (closeFn: VoidFunction) => void;
+    timeout?: number;
+    unregisterChild: (closeFn: VoidFunction) => void;
+}
+export interface CascadingComponentContextType {
+    close: VoidFunction;
+    closeChildCascadingComponents: VoidFunction;
+}

package/dist/collapsables/cascading-component/use-cascading-component-container.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContainerContextType } from './types';
+export declare function useCascadingComponentContainer(): CascadingComponentContainerContextType | null;

package/dist/collapsables/cascading-component/use-cascading-component-container.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
+
+function useCascadingComponentContainer() {
+    return useContext(CascadingComponentContainerContext);
+}
+
+export { useCascadingComponentContainer };

package/dist/collapsables/cascading-component/use-cascading-component.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContextType } from './types';
+export declare function useCascadingComponent(): CascadingComponentContextType;

package/dist/collapsables/cascading-component/use-cascading-component.js

@@ -0,0 +1,14 @@
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function useCascadingComponent() {
+    const context = useCascadingComponentContainer();
+    if (!context) {
+        throw new Error('useCascadingComponent must be used within a CascadingComponentProvider');
+    }
+    return {
+        close: context.close,
+        closeChildCascadingComponents: context.closeChildCascadingComponents,
+    };
+}
+
+export { useCascadingComponent };

package/dist/collapsables/cascading-component/use-has-cascading-component-container.d.ts

@@ -0,0 +1 @@
+export declare function useHasCascadingComponentContainer(): boolean;

package/dist/collapsables/cascading-component/use-has-cascading-component-container.js

@@ -0,0 +1,7 @@
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function useHasCascadingComponentContainer() {
+    return Boolean(useCascadingComponentContainer());
+}
+
+export { useHasCascadingComponentContainer };

package/dist/collapsables/unmounter/unmounter.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface UnmounterContextType {
+    registerChild: () => void;
+    unmount: boolean;
+    unregisterChild: () => void;
+}
+export declare const UnmounterContext: React.Context<UnmounterContextType | null>;
+export declare function useUnmount(): UnmounterContextType | null;
+export declare function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount, }: {
+    children: ReactNode;
+    onUnmountReady?: () => void;
+    onUnmounted?: () => void;
+    unmount?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/unmounter/unmounter.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useMemo } from 'react';
+
+const UnmounterContext = createContext(null);
+function useUnmount() {
+    const context = useContext(UnmounterContext);
+    return context;
+}
+function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount = false, }) {
+    const parentContext = useUnmount();
+    const [hadChildren, setHadChildren] = useState(false);
+    const [childCount, updateChildCount] = useState(0);
+    const unmount = Boolean(_unmount || parentContext?.unmount);
+    useEffect(() => {
+        return () => onUnmounted?.();
+    }, [onUnmounted]);
+    useEffect(() => {
+        if (!parentContext)
+            return;
+        parentContext.registerChild();
+        return () => {
+            parentContext.unregisterChild();
+        };
+    }, [parentContext]);
+    useEffect(() => {
+        if (!unmount || (hadChildren && childCount > 0))
+            return;
+        onUnmountReady?.();
+    }, [unmount, childCount, hadChildren, onUnmountReady]);
+    const value = useMemo(() => {
+        return {
+            registerChild: () => {
+                setHadChildren(true);
+                updateChildCount(count => count + 1);
+            },
+            unmount,
+            unregisterChild: () => updateChildCount(count => count - 1),
+        };
+    }, [unmount]);
+    return (jsx(UnmounterContext.Provider, { value: value, children: children }));
+}
+
+export { Unmounter, UnmounterContext, useUnmount };

package/dist/collapsables/unmounter/utils.d.ts

@@ -0,0 +1,2 @@
+export type RefHTMLElement<TElement extends HTMLElement> = TElement | undefined;
+export declare function createAddEndListener<TElement extends HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>(nodeRef: React.Ref<RefElement>): (doneOrNode: VoidFunction | HTMLElement, done?: VoidFunction) => void;

package/dist/collapsables/unmounter/utils.js

@@ -0,0 +1,18 @@
+function createAddEndListener(nodeRef) {
+    return function addEndListener(doneOrNode, done) {
+        if (done === undefined) {
+            if (typeof doneOrNode === 'function') {
+                if (nodeRef && 'current' in nodeRef && nodeRef.current) {
+                    return nodeRef.current.addEventListener('transitionend', doneOrNode, false);
+                }
+                throw new Error('Unsupported CSSTransition addEndListener function call');
+            }
+        }
+        else if (typeof doneOrNode !== 'function') {
+            return doneOrNode.addEventListener('transitionend', done, false);
+        }
+        throw new Error('Unsupported CSSTransition addEndListener function call');
+    };
+}
+
+export { createAddEndListener };

package/dist/exports.d.ts

@@ -58,7 +58,17 @@ export * from './cart-totals/cart-totals';
 export * from './cart-totals/cart-totals-summary';
 export * from './collapsables/accordion/accordion';
 export * from './collapsables/accordion/accordion-item';
+export * from './collapsables/cascading-component/cascading-component';
+export * from './collapsables/cascading-component/cascading-component-container';
+export * from './collapsables/cascading-component/cascading-component-container-context';
+export * from './collapsables/cascading-component/cascading-component-container-provider';
+export * from './collapsables/cascading-component/types';
+export * from './collapsables/cascading-component/use-cascading-component';
+export * from './collapsables/cascading-component/use-cascading-component-container';
+export * from './collapsables/cascading-component/use-has-cascading-component-container';
 export * from './collapsables/show-all/show-all';
+export * from './collapsables/unmounter/unmounter';
+export * from './collapsables/unmounter/utils';
 export * from './config';
 export * from './country-select/country-select';
 export * from './country-select/hooks/use-countries';
@@ -138,9 +148,13 @@ export * from './intl/use-language-code';
 export * from './intl/utils';
 export * from './lists/download-document-list/download-document-list';
 export * from './lists/feature-list/feature-list';
+export * from './lists/icon-list/icon-list';
+export * from './lists/menu-list/menu-list';
+export * from './lists/menu-list/menu-list-back-button';
+export * from './lists/menu-list/menu-list-header';
+export * from './lists/menu-list/menu-list-item';
 export * from './lists/orderline-list/orderline-list';
 export * from './lists/product-overview-grid/product-overview-grid';
-export * from './lists/ul/list';
 export * from './loading/blank-page-spacer';
 export * from './loading/loading-overlay';
 export * from './loading/progress-circle';

package/dist/icons/glyph/glyphs-arrow-blackcaps-right-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsArrowBlackCapsRightIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31976777,11 C2.06899066,11 1.91614593,10.7405883 2.04903704,10.5406252 L5.82841248,4.85263431 C5.99833751,4.59667547 5.97375465,4.27015906 5.76703514,4.04017141 L2.58259687,0.493978041 C2.40732426,0.298743748 2.55482143,0 2.82650993,0 L5.99283031,0.000300244973 C6.08685178,0.000300244973 6.17600455,0.0392570302 6.23666356,0.106812149 L8.10264638,2.18458242 C9.16944677,3.37250165 9.29722976,5.05702607 8.4207071,6.37630248 L5.44211038,10.8588849 C5.38376599,10.9466315 5.28144382,11 5.17137965,11 L2.31976777,11 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsArrowBlackCapsRightIcon };

package/dist/index.js

@@ -63,7 +63,16 @@ export { CartTotals, formatDisplayPriceToSymbolSpaceValue } from './cart-totals/
 export { CartTotalsSummary } from './cart-totals/cart-totals-summary.js';
 export { Accordion } from './collapsables/accordion/accordion.js';
 export { AccordionItem } from './collapsables/accordion/accordion-item.js';
+export { CascadingComponent, InternalCascadingComponent } from './collapsables/cascading-component/cascading-component.js';
+export { CascadingComponentContainer } from './collapsables/cascading-component/cascading-component-container.js';
+export { CascadingComponentContainerContext } from './collapsables/cascading-component/cascading-component-container-context.js';
+export { CascadingComponentContainerProvider } from './collapsables/cascading-component/cascading-component-container-provider.js';
+export { useCascadingComponent } from './collapsables/cascading-component/use-cascading-component.js';
+export { useCascadingComponentContainer } from './collapsables/cascading-component/use-cascading-component-container.js';
+export { useHasCascadingComponentContainer } from './collapsables/cascading-component/use-has-cascading-component-container.js';
 export { ShowAll } from './collapsables/show-all/show-all.js';
+export { Unmounter, UnmounterContext, useUnmount } from './collapsables/unmounter/unmounter.js';
+export { createAddEndListener } from './collapsables/unmounter/utils.js';
 export { config, configPerEnvironment } from './config.js';
 export { CountrySelect } from './country-select/country-select.js';
 export { useCountries } from './country-select/hooks/use-countries.js';
@@ -141,9 +150,13 @@ export { useLanguageCode } from './intl/use-language-code.js';
 export { getLanguageCodeFromCultureCode, spireTranslateAdapter } from './intl/utils.js';
 export { DownloadDocumentList } from './lists/download-document-list/download-document-list.js';
 export { FeatureList } from './lists/feature-list/feature-list.js';
+export { IconList, IconListItem } from './lists/icon-list/icon-list.js';
+export { MenuList } from './lists/menu-list/menu-list.js';
+export { MenuListBackButton } from './lists/menu-list/menu-list-back-button.js';
+export { MenuListHeader } from './lists/menu-list/menu-list-header.js';
+export { MenuListItem } from './lists/menu-list/menu-list-item.js';
 export { OrderLineList } from './lists/orderline-list/orderline-list.js';
 export { ProductOverviewGrid } from './lists/product-overview-grid/product-overview-grid.js';
-export { List, ListItem } from './lists/ul/list.js';
 export { BlankPageSpacer } from './loading/blank-page-spacer.js';
 export { LoadingOverlay } from './loading/loading-overlay.js';
 export { ProgressCircle } from './loading/progress-circle.js';

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Your email and password were not recognized.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Close' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'More than {0} articles' | 'New list name' | 'New user?' | 'of' | 'Or continue as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'Passwords do not match' | 'Password does not meet requirements' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Submitting…' | 'Submit email address' | 'Recover your password' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Select a list' | 'Select an industry' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signing in…' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | '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, ' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!';
+export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Your email and password were not recognized.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Close' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'More than {0} articles' | 'New list name' | 'New user?' | 'of' | 'Or continue as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'Passwords do not match' | 'Password does not meet requirements' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Submenu' | 'Submitting…' | 'Submit email address' | 'Recover your password' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Select a list' | 'Select an industry' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signing in…' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | '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, ' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!';

package/dist/lists/icon-list/icon-list.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface IconListProps {
+    children: ReactNode;
+}
+export declare function IconList({ children }: IconListProps): import("react/jsx-runtime").JSX.Element;
+export interface IconListItemProps {
+    icon?: ReactNode;
+    text: ReactNode;
+}
+export declare function IconListItem({ icon, text }: IconListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './icon-list.module.css.js';
+
+function IconList({ children }) {
+    return jsx("ul", { className: styles['icon-list'], children: children });
+}
+function IconListItem({ icon, text }) {
+    return (jsxs("li", { className: styles['icon-list-item'], children: [icon && jsx("span", { className: styles.icon, children: icon }), text] }));
+}
+
+export { IconList, IconListItem };

package/dist/lists/icon-list/icon-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon-list":"icon-list-module-tWkJY","icon-list-item":"icon-list-module-3BzE4","icon":"icon-list-module-9-620"};
+
+export { styles as default };

package/dist/lists/menu-list/menu-list-back-button.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface MenuListBackButtonProps {
+    children: ReactNode;
+    onClick: VoidFunction;
+}
+export declare function MenuListBackButton({ children, onClick, }: MenuListBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lists/menu-list/menu-list-back-button.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { GlyphsChevronsSlimLeftIcon } from '../../icons/glyph/glyphs-chevrons-slim-left-icon.js';
+import styles from './menu-list.module.css.js';
+
+function MenuListBackButton({ children, onClick, }) {
+    return (jsxs("button", { className: styles['menu-list-back-button'], onClick: onClick, type: "button", children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles['icon'], role: "presentation" }), children] }));
+}
+
+export { MenuListBackButton };

package/dist/lists/menu-list/menu-list-header.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface MenuListHeaderProps {
+    children: ReactNode;
+    href?: string;
+}
+export declare function MenuListHeader({ children, href }: MenuListHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lists/menu-list/menu-list-header.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { GlyphsArrowBlackCapsRightIcon } from '../../icons/glyph/glyphs-arrow-blackcaps-right-icon.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './menu-list.module.css.js';
+
+function MenuListHeader({ children, href }) {
+    return (jsxs("h2", { className: styles['menu-list-header'], children: [href && (jsxs(RouteLink, { href: href, children: [children, jsx(GlyphsArrowBlackCapsRightIcon, { className: styles['icon'], role: "presentation" })] })), !href && children] }));
+}
+
+export { MenuListHeader };

package/dist/lists/menu-list/menu-list-item.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ImageType } from '../../shared/model/image';
+interface MenuListItemPropsBase {
+    children: ReactNode | string;
+    onClick?: VoidFunction;
+}
+interface MenuListItemNoChildrenProps {
+    hasChildren?: false;
+    href: string;
+}
+interface MenuListItemWithChildrenProps {
+    'aria-controls'?: string;
+    hasChildren: true;
+    isSelected?: boolean;
+}
+interface MenuListItemWithImageProps {
+    badge?: never;
+    image?: ImageType;
+}
+interface MenuListItemWithBadgeProps {
+    badge?: ReactNode;
+    image?: never;
+}
+export type MenuListItemProps = MenuListItemPropsBase & (MenuListItemNoChildrenProps | MenuListItemWithChildrenProps) & (MenuListItemWithImageProps | MenuListItemWithBadgeProps);
+export declare function MenuListItem(props: MenuListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lists/menu-list/menu-list-item.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { GlyphsChevronsSlimRightIcon } from '../../icons/glyph/glyphs-chevrons-slim-right-icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Image } from '../../media/image/image.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './menu-list.module.css.js';
+
+function MenuListItem(props) {
+    const { children, hasChildren, onClick } = props;
+    const href = 'href' in props ? props.href : undefined;
+    const isSelected = 'isSelected' in props ? props.isSelected : false;
+    const badge = 'badge' in props ? props.badge : undefined;
+    const image = 'image' in props ? props.image : undefined;
+    const ariaControls = 'aria-controls' in props ? props['aria-controls'] : undefined;
+    const t = useFormattedMessage();
+    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children']), children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(RouteLink, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, children: children }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
+}
+
+export { MenuListItem };

package/dist/lists/menu-list/menu-list.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface MenuListProps {
+    back?: {
+        onClick: () => void;
+        title: string;
+    };
+    children: ReactNode;
+    header?: string | {
+        href: string;
+        title: string;
+    };
+    variant?: 'default' | 'primary';
+}
+export declare function MenuList({ back, children, header, variant, }: MenuListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { MenuListBackButton } from './menu-list-back-button.js';
+import { MenuListHeader } from './menu-list-header.js';
+import styles from './menu-list.module.css.js';
+
+function MenuList({ back, children, header, variant = 'default', }) {
+    const headerTitle = typeof header === 'string' ? header : header?.title;
+    const headerHref = typeof header === 'string' ? undefined : header?.href;
+    return (jsxs("section", { className: clsx(styles['menu-list'], styles[variant]), role: "menu", children: [back && (jsx(MenuListBackButton, { onClick: back.onClick, children: back.title })), jsxs("div", { className: styles['scroll-area'], children: [header && (jsx(MenuListHeader, { href: headerHref, children: headerTitle })), jsx("ul", { className: styles['list'], children: children })] })] }));
+}
+
+export { MenuList };

package/dist/lists/menu-list/menu-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"menu-list":"menu-list-module-TloB9","primary":"menu-list-module-xUg6i","scroll-area":"menu-list-module-x3D-V","list":"menu-list-module-m3rpo","menu-list-back-button":"menu-list-module-eKDL9","icon":"menu-list-module-syyw9","menu-list-header":"menu-list-module-S08LI","menu-list-item":"menu-list-module-4QhF4","label":"menu-list-module-xFYyo","image":"menu-list-module-ELekn","badge":"menu-list-module-4PbP-","selected":"menu-list-module-hiMca","has-children":"menu-list-module-61uJb"};
+
+export { styles as default };

package/dist/modals/signin/sign-in-dialog.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SolidOkayIcon } from '../../icons/solid/solid-okay-icon.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
-import { List, ListItem } from '../../lists/ul/list.js';
+import { IconList, IconListItem } from '../../lists/icon-list/icon-list.js';
 import { useFavorite } from '../../shared/providers/favorite-provider.js';
 import { RouteButton } from '../../shared/routing/route-button.js';
 import { Dialog } from '../dialog/dialog.js';
@@ -15,7 +15,7 @@ function SignInDialog({ isOpen, onOpenChange }) {
     const location = getLocation();
     if (!location)
         return null;
-    return (jsx(Dialog, { isDismissable: true, footer: jsxs(Fragment, { children: [jsx(RouteButton, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(List, { children: [jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(ListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
+    return (jsx(Dialog, { isDismissable: true, footer: jsxs(Fragment, { children: [jsx(RouteButton, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(IconList, { children: [jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Easily add your favorite products') }), jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Your favorites are available on multiple devices') }), jsx(IconListItem, { icon: jsx(SolidOkayIcon, { fill: "var(--color-status-available)" }), text: t('Share your favorite list with others') })] }) }));
 }
 
 export { SignInDialog };

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

@@ -100,7 +100,7 @@ function CartContent({ cartLines }) {
                     originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
                     pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                     totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
-                }, productId: cartLine.productId || '', sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }));
+                }, productId: cartLine.productId || '', sku: cartLine.erpNumber || '', tags: [], title: cartLine.shortDescription }, cartLine.id))) }) }));
 }
 function CartPage() {
     const t = useFormattedMessage();

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

@@ -89,7 +89,7 @@ function OrderConfirmationPageContent({ cart, }) {
                                         originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
                                         pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                                         totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
-                                    }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }) })] }) }) }));
+                                    }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.shortDescription }, cartLine.id))) }) }) })] }) }) }));
 }
 
 export { OrderConfirmationPageContent };

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

@@ -47,7 +47,7 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
                         redirectResult: state.details.redirectResult,
                     });
                     if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
-                        return onError(new Error('Invalid amount'), result);
+                        return onError(new Error(`Invalid amount submitted '${amount.toFixed(2).replaceAll(/[,.]/gi, '')}' vs received '${adyenAmount}'`), result);
                     if (customerId !== adyenCustomerId)
                         return onError(new Error('Invalid customer'), result);
                     return handlePaymentResponse(result, onComplete, onError);

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

@@ -43,7 +43,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                                     originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
                                     pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                                     totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
-                                }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }) })] }) }));
+                                }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.shortDescription }, cartLine.id))) }) }) })] }) }));
 }
 
 export { PaymentPageContent };

package/dist/shared/utils/date.js

@@ -33,7 +33,7 @@ const dateThresholds = [
 function getDateUnitObject(date) {
     const fallbackDateUnitObject = { number: 6, unit: 'month' };
     const days = getDaysDifference(date, new Date());
-    if (days < 1)
+    if (days <= -1)
         return fallbackDateUnitObject;
     for (const threshold of dateThresholds) {
         if (days <= threshold.numberOfDays) {

package/dist/styles.css

@@ -1464,6 +1464,9 @@
         opacity: 1;
         visibility: visible;
       }
+.input-module-2woJR .input-module-zjVxG input[type='password']::-ms-reveal {
+        display: none;
+      }
 
 .number-field-module-xawWc .number-field-module-A1nvE {
     display: flex;
@@ -1948,7 +1951,7 @@
 }
   }
 
-.list-module-7-DFP {
+.icon-list-module-tWkJY {
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -1957,13 +1960,13 @@
   list-style: none;
 }
 
-.list-module-YMLVY .list-module-wTIOA {
+.icon-list-module-3BzE4 .icon-list-module-9-620 {
     display: block;
     width: 24px;
     height: 24px;
   }
 
-.list-module-YMLVY {
+.icon-list-module-3BzE4 {
 
   display: flex;
   align-items: center;
@@ -2612,7 +2615,7 @@
       aspect-ratio: 1 / 1;
       background-color: var(--color-brand-light-gray);
       content: '';
-      inset: 0;
+      inset: var(--space-2);
     }
 
   @media (width >= 768px) {
@@ -5715,6 +5718,318 @@ button.swiper-pagination-bullet {
     height: 20px;
   }
 
+.menu-list-module-TloB9 {
+  --ml-font-size: var(--font-size-16);
+  --ml-font-weight: var(--font-weight-normal);
+  --ml-item-minimal-height: 48px;
+  --ml-item-inner-spacing: var(--space-12);
+  --ml-item-outer-spacing: var(--space-16);
+  --ml-icon-size: 16px;
+
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  color: currentcolor;
+  font-size: var(--ml-font-size);
+  grid-template: auto 1fr / 1fr;
+  grid-template-areas:
+    'back-button'
+    'scroll-area';
+}
+
+  /* TODO: scroll area row should stretch to avail height, but also enforce the scroll-area to scroll if overflowing */
+
+  .menu-list-module-TloB9.menu-list-module-xUg6i {
+    --ml-font-size: var(--font-size-18);
+    --ml-font-weight: var(--font-weight-bold);
+    --ml-button-hover-color: var(--color-white);
+    --ml-button-hover-bgcolor: var(--color-brand-red);
+    --ml-link-hover-color: var(--color-white);
+    --ml-link-hover-bgcolor: var(--color-brand-red);
+    --ml-selected-color: var(--color-white);
+    --ml-selected-bgcolor: var(--color-brand-red);
+  }
+
+  /* scroll area */
+
+  .menu-list-module-TloB9 .menu-list-module-x3D-V {
+    grid-area: scroll-area;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  /* list */
+
+  .menu-list-module-TloB9 .menu-list-module-m3rpo {
+    display: grid;
+    padding: 0 0 1px;
+    margin: 0;
+    grid-template-columns: 1fr;
+    list-style: none;
+  }
+
+  .menu-list-module-TloB9 .menu-list-module-m3rpo > * {
+      margin-block: 0 -1px;
+    }
+
+/* menu list back button */
+
+.menu-list-module-eKDL9 {
+  all: unset;
+  display: flex;
+  align-items: center;
+  padding: var(--space-4) var(--ml-item-outer-spacing, var(--space-8));
+  background: var(--color-brand-light-gray);
+  cursor: pointer;
+  gap: var(--space-4);
+  grid-area: back-button;
+  inset-block-start: 0;
+  min-block-size: var(--ml-item-minimal-height, 0);
+}
+
+.menu-list-module-eKDL9:focus-visible {
+    box-shadow: inset var(--shadow-focus-outline);
+  }
+
+.menu-list-module-eKDL9 .menu-list-module-syyw9 {
+    block-size: var(--ml-icon-size);
+    inline-size: var(--ml-icon-size);
+  }
+
+/* menu list title */
+
+.menu-list-module-S08LI {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--space-8) var(--ml-item-outer-spacing, 0);
+  margin: 0 0 -2px;
+  background: var(--color-white);
+  color: var(--color-brand-dark-gray);
+  font-size: var(--text-heading-xxxs-size);
+  font-style: italic;
+  font-weight: var(--font-weight-black);
+  line-height: 1;
+  min-block-size: var(--ml-item-minimal-height, 0);
+  text-wrap: pretty;
+}
+
+.menu-list-module-S08LI [href] {
+    position: static;
+    display: flex;
+    align-items: center;
+    box-shadow: none;
+    color: var(--color-brand-dark-gray);
+  }
+
+.menu-list-module-S08LI [href]:hover {
+      color: var(--color-brand-red);
+    }
+
+.menu-list-module-S08LI [href] .menu-list-module-syyw9 {
+      flex-shrink: 0;
+      block-size: 1ex;
+      inline-size: 1ex;
+      margin-block-start: 0.1em;
+    }
+
+.menu-list-module-S08LI [href]::after {
+      position: absolute;
+      background: transparent;
+      content: '';
+      inset: 0;
+    }
+
+.menu-list-module-S08LI:has(:focus-visible) {
+    z-index: 1;
+    box-shadow: inset var(--shadow-focus-outline);
+  }
+
+/* menu list item */
+
+.menu-list-module-4QhF4 {
+  --mli-button-hover-color: var(--ml-button-hover-color, currentcolor);
+  --mli-button-hover-bgcolor: var(
+    --ml-button-hover-bgcolor,
+    var(--color-brand-light-gray)
+  );
+  --mli-link-hover-color: var(--ml-link-hover-color, var(--color-brand-red));
+  --mli-link-hover-bgcolor: var(--ml-link-hover-bgcolor, transparent);
+  --mli-selected-color: var(--ml-selected-color, currentcolor);
+  --mli-selected-bgcolor: var(
+    --ml-selected-bgcolor,
+    var(--color-brand-light-gray)
+  );
+  --mli-inner-spacing: var(--ml-item-inner-spacing, var(--space-12));
+  --mli-outer-spacing: var(--ml-item-outer-spacing, var(--space-16));
+  --mli-image-size: 48px;
+  --mli-badge-size: 24px;
+  --mli-icon-size: var(--ml-icon-size, 16px);
+
+  position: relative;
+  z-index: 0;
+  display: grid;
+  align-items: center;
+  padding: var(--space-8) 0;
+  margin: 0;
+  grid-template:
+    minmax(var(--ml-item-minimal-height, 48px), min-content) / var(
+      --mli-outer-spacing
+    )
+    minmax(0, min-content) 1fr var(--mli-outer-spacing);
+  grid-template-areas: '. imagebadge label .';
+
+  /* children icon */
+}
+
+/* separator lines */
+
+.menu-list-module-4QhF4::before,
+  .menu-list-module-4QhF4::after {
+    position: absolute;
+    z-index: -2;
+    background: var(--color-brand-light-gray);
+    block-size: 1px;
+    content: '';
+    inset-inline: var(--mli-outer-spacing);
+  }
+
+.menu-list-module-4QhF4::before {
+    inset-block: 0 auto;
+  }
+
+.menu-list-module-4QhF4::after {
+    inset-block: auto 0;
+  }
+
+/* text label */
+
+.menu-list-module-4QhF4 .menu-list-module-xFYyo {
+    position: static;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    color: currentcolor;
+    cursor: pointer;
+    font: inherit;
+    font-weight: var(--ml-font-weight, normal);
+    grid-area: label;
+    line-height: 1;
+    text-align: left;
+  }
+
+.menu-list-module-4QhF4 .menu-list-module-xFYyo::before {
+      position: absolute;
+      z-index: -1;
+      background: inherit;
+      content: '';
+      inset: 0;
+    }
+
+.menu-list-module-4QhF4 .menu-list-module-xFYyo::after {
+      position: absolute;
+      background: transparent;
+      content: '';
+      inset: 0;
+    }
+
+/* image */
+
+.menu-list-module-4QhF4 .menu-list-module-ELekn {
+    position: relative;
+    z-index: 0;
+    aspect-ratio: 1;
+    grid-area: imagebadge;
+    inline-size: var(--mli-image-size);
+    margin-inline-end: var(--mli-inner-spacing);
+  }
+
+.menu-list-module-4QhF4 .menu-list-module-ELekn [class*='image'] {
+      mix-blend-mode: multiply;
+    }
+
+.menu-list-module-4QhF4 .menu-list-module-ELekn::after {
+      position: absolute;
+      z-index: -1;
+      border-radius: 100%;
+      background-color: rgb(0 0 0 / 7%);
+      content: '';
+      inset: 2px;
+    }
+
+/* badge */
+
+.menu-list-module-4QhF4 .menu-list-module-4PbP- {
+    display: grid;
+    grid-area: imagebadge;
+    inline-size: var(--mli-badge-size);
+    margin-inline-end: var(--mli-inner-spacing);
+  }
+
+/* stylelint-disable-next-line no-descending-specificity */
+
+.menu-list-module-4QhF4 .menu-list-module-syyw9 {
+    aspect-ratio: 1;
+    block-size: var(--mli-icon-size);
+    grid-area: icon;
+    inline-size: var(--mli-icon-size);
+    justify-self: center;
+  }
+
+/* focus */
+
+.menu-list-module-4QhF4:has(:focus-visible) {
+    z-index: 2;
+  }
+
+.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
+      box-shadow: inset var(--shadow-focus-outline);
+    }
+
+/* selected state */
+
+.menu-list-module-4QhF4.menu-list-module-hiMca {
+    z-index: 1;
+    color: var(--mli-selected-color);
+  }
+
+.menu-list-module-4QhF4.menu-list-module-hiMca .menu-list-module-xFYyo::before {
+      background: var(--mli-selected-bgcolor);
+    }
+
+/* no children */
+
+.menu-list-module-4QhF4:not(.menu-list-module-61uJb, .menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) {
+    z-index: 2;
+    color: var(--mli-link-hover-color);
+  }
+
+.menu-list-module-4QhF4:not(.menu-list-module-61uJb, .menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) .menu-list-module-xFYyo::before {
+      background: var(--mli-link-hover-bgcolor);
+    }
+
+/* has children */
+
+.menu-list-module-4QhF4.menu-list-module-61uJb {
+    grid-template-areas: '. imagebadge label icon';
+    grid-template-columns:
+      var(--mli-outer-spacing) minmax(0, min-content)
+      1fr calc(
+        var(--mli-inner-spacing) + var(--mli-icon-size) +
+          var(--mli-inner-spacing)
+      );
+  }
+
+.menu-list-module-4QhF4.menu-list-module-61uJb:not(.menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) {
+      z-index: 2;
+      color: var(--mli-button-hover-color);
+    }
+
+.menu-list-module-4QhF4.menu-list-module-61uJb:not(.menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) .menu-list-module-xFYyo::before {
+        background: var(--mli-button-hover-bgcolor);
+      }
+
 .orderline-list-module-v-FqO {
   container-type: inline-size;
 }

package/package.json

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

package/dist/lists/ul/list.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export interface ListProps {
-    children: ReactNode;
-}
-export declare function List({ children }: ListProps): import("react/jsx-runtime").JSX.Element;
-export interface ListItemProps {
-    icon?: ReactNode;
-    text: ReactNode;
-}
-export declare function ListItem({ icon, text }: ListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/ul/list.js

@@ -1,11 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styles from './list.module.css.js';
-
-function List({ children }) {
-    return jsx("ul", { className: styles.list, children: children });
-}
-function ListItem({ icon, text }) {
-    return (jsxs("li", { className: styles['list-item'], children: [icon && jsx("span", { className: styles.icon, children: icon }), text] }));
-}
-
-export { List, ListItem };

package/dist/lists/ul/list.module.css.js

@@ -1,3 +0,0 @@
-var styles = {"list":"list-module-7-DFP","list-item":"list-module-YMLVY","icon":"list-module-wTIOA"};
-
-export { styles as default };