@sonic-equipment/ui 0.0.103 → 0.0.105

package/dist/index.d.ts

@@ -4141,6 +4141,11 @@ declare function RouteProvider({ children, navigate }: RouteProviderProps): reac
 declare function useOnNavigate(callback?: NavigateFn): NavigateFn;
 declare function useNavigate(): NavigateFn;
 
+interface WithRoutingProps {
+    href?: string;
+    route?: NavigateOptions;
+}
+
 interface LinkProps$1 extends AnchorHTMLAttributes<HTMLAnchorElement> {
   areaSelected?: boolean
   color?: 'primary' | 'secondary'
@@ -4149,11 +4154,7 @@ interface LinkProps$1 extends AnchorHTMLAttributes<HTMLAnchorElement> {
   role?: 'option'
 }
 
-interface RouteLinkProps extends Omit<LinkProps$1, 'onPress'> {
-    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
-    route?: NavigateOptions;
-}
-declare function RouteLink({ children, ...props }: RouteLinkProps): react_jsx_runtime.JSX.Element;
+declare const RouteLink: React.FC<LinkProps$1 & WithRoutingProps>;
 
 interface ButtonProps$1 {
   _pseudo?: 'none' | 'focus' | 'hover' | 'active'
@@ -4171,11 +4172,7 @@ interface ButtonProps$1 {
   withArrow?: boolean
 }
 
-interface RouteButtonProps extends ButtonProps$1 {
-    href?: string;
-    route?: NavigateOptions;
-}
-declare function RouteButton({ children, onClick, ...props }: RouteButtonProps): react_jsx_runtime.JSX.Element;
+declare const RouteButton: React.FC<ButtonProps$1 & WithRoutingProps>;
 
 interface DPRSrcSet {
   1: string
@@ -4320,9 +4317,9 @@ declare function Button({ _pseudo, children, className, color, condensed, icon,
 interface FavoriteButtonProps {
     isDisabled?: boolean;
     isFavorite: boolean;
-    onPress: () => void;
+    onClick: () => void;
 }
-declare function FavoriteButton({ isDisabled, isFavorite, onPress, }: FavoriteButtonProps): react_jsx_runtime.JSX.Element;
+declare function FavoriteButton({ isDisabled, isFavorite, onClick: onClick, }: FavoriteButtonProps): react_jsx_runtime.JSX.Element;
 
 interface IconButtonProps {
     children: React.ReactNode;

package/dist/index.js

@@ -1,5 +1,5 @@
 import qs from 'query-string';
-import React, { useMemo, useState, useCallback, useEffect, useRef, createContext, useContext, forwardRef, useLayoutEffect, Children, cloneElement, createElement as createElement$1, Fragment as Fragment$1 } from 'react';
+import React, { useMemo, useState, useCallback, useEffect, useRef, createContext, useContext, createElement as createElement$1, forwardRef, useLayoutEffect, Children, cloneElement, Fragment as Fragment$1 } from 'react';
 import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { deepEqual } from 'fast-equals';
@@ -20,6 +20,119 @@ import { getAlgoliaResults, parseAlgoliaHitHighlight } from '@algolia/autocomple
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
 
+/* eslint-disable no-prototype-builtins */
+/** Mocks the localStorage and sessionStorage API in Node.js
+ * @see https://gitlab.com/kaictl/node/mock-local-storage */
+const HAS_LOCAL_STORAGE_SUPPORT = typeof localStorage !== 'undefined';
+function mockStorage() {
+    if (HAS_LOCAL_STORAGE_SUPPORT)
+        return;
+    // const global = require('global')
+    // const window = require('global/window')
+    let win;
+    if (typeof global !== 'undefined') {
+        win = global;
+    }
+    else if (typeof self !== 'undefined') {
+        win = self;
+    }
+    else {
+        win = {};
+    }
+    Object.defineProperty(global, 'Storage', {
+        value: createStorage,
+    });
+    Object.defineProperty(win, 'Storage', {
+        value: createStorage,
+    });
+    Object.defineProperty(global, 'localStorage', {
+        value: createStorage(),
+    });
+    Object.defineProperty(win, 'localStorage', {
+        value: global.localStorage,
+    });
+    Object.defineProperty(global, 'sessionStorage', {
+        value: createStorage(),
+    });
+    Object.defineProperty(win, 'sessionStorage', {
+        value: global.sessionStorage,
+    });
+}
+function createStorage() {
+    const UNSET = Symbol();
+    const s = {};
+    const noopCallback = () => { };
+    let _itemInsertionCallback = noopCallback;
+    Object.defineProperty(s, 'setItem', {
+        get: () => {
+            return (k, v = UNSET) => {
+                if (v === UNSET) {
+                    throw new TypeError(`Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present.`);
+                }
+                if (!s.hasOwnProperty(String(k))) {
+                    _itemInsertionCallback();
+                }
+                s[String(k)] = String(v);
+            };
+        },
+    });
+    Object.defineProperty(s, 'getItem', {
+        get: () => {
+            return k => {
+                if (s.hasOwnProperty(String(k))) {
+                    return s[String(k)];
+                }
+                else {
+                    return null;
+                }
+            };
+        },
+    });
+    Object.defineProperty(s, 'removeItem', {
+        get: () => {
+            return k => {
+                if (s.hasOwnProperty(String(k))) {
+                    delete s[String(k)];
+                }
+            };
+        },
+    });
+    Object.defineProperty(s, 'clear', {
+        get: () => {
+            return () => {
+                for (const k in s) {
+                    delete s[String(k)];
+                }
+            };
+        },
+    });
+    Object.defineProperty(s, 'length', {
+        get: () => {
+            return Object.keys(s).length;
+        },
+    });
+    Object.defineProperty(s, 'key', {
+        value: k => {
+            const key = Object.keys(s)[String(k)];
+            return !key ? null : key;
+        },
+    });
+    Object.defineProperty(s, 'itemInsertionCallback', {
+        get: () => {
+            return _itemInsertionCallback;
+        },
+        set: v => {
+            if (!v || typeof v != 'function') {
+                v = noopCallback;
+            }
+            _itemInsertionCallback = v;
+        },
+    });
+    return s;
+}
+// Mock localStorage
+mockStorage();
+
 const environments = [
     'sandbox',
     'production',
@@ -375,7 +488,6 @@ const features = {
     plpv1: 'plpV1',
     searchv1: 'searchV1',
 };
-const HAS_LOCAL_STORAGE_SUPPORT = typeof localStorage !== 'undefined';
 function useFeatureFlags() {
     const { search } = typeof window !== 'undefined'
         ? window.location
@@ -389,9 +501,7 @@ function useFeatureFlags() {
             /* When no new feature flags are set get them from localStorage */
             return Object.entries(features).reduce((acc, [, value]) => ({
                 ...acc,
-                [value]: HAS_LOCAL_STORAGE_SUPPORT
-                    ? localStorage.getItem(value) === 'true'
-                    : false,
+                [value]: localStorage.getItem(value) === 'true',
             }), {});
         }
         const queryStringFeatures = String(queryParams['features'])
@@ -403,8 +513,6 @@ function useFeatureFlags() {
             value: value,
         }));
         featureResults.forEach(({ selected, value }) => {
-            if (!HAS_LOCAL_STORAGE_SUPPORT)
-                return;
             localStorage.setItem(value, selected.toString());
         });
         return featureResults.reduce((acc, { selected, value }) => ({
@@ -1201,28 +1309,33 @@ function Link({ children, className, color = 'primary', hasUnderline, isDisabled
     return (jsx("a", { className: clsx({ [styles$19['has-underline']]: hasUnderline }, styles$19['link'], styles$19[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, ...props, children: children }));
 }
 
-function RouteLink({ children, ...props }) {
-    const navigate = useNavigate();
-    function onClick(e) {
-        props.onClick?.(e);
-        if (!props.href)
-            return;
-        e.preventDefault();
-        if (props.isDisabled)
-            return;
-        if (e.ctrlKey || e.metaKey || e.shiftKey) {
-            return window.open(props.href, '_blank');
-        }
-        navigate(props.href, props.route);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function onHoverStart(e) {
-        // TODO: Implement prefetch
-        props.onMouseEnter?.(e);
-    }
-    return (jsx(Link, { ...props, onClick: onClick, onMouseEnter: onHoverStart, children: children }));
+function withRouting(component) {
+    const Component = ({ href, onClick, route, ...rest }) => {
+        const navigate = useNavigate();
+        const props = {
+            ...rest,
+            onClick(e) {
+                onClick?.(e);
+                if (!href)
+                    return;
+                e.preventDefault();
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (rest.isDisabled || rest.disabled)
+                    return;
+                if (e.ctrlKey || e.metaKey || e.shiftKey) {
+                    return window.open(href, '_blank');
+                }
+                navigate(href, route);
+            },
+        };
+        return createElement$1(component, props);
+    };
+    Component.displayName = component.displayName;
+    return Component;
 }
 
+const RouteLink = withRouting(Link);
+
 function GlyphsArrowBoldCapsRightIcon(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.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd" }) }));
 }
@@ -1243,21 +1356,7 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
     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 })] }));
 }
 
-function RouteButton({ children, onClick, ...props }) {
-    const navigate = useNavigate();
-    return (jsx(Button, { onClick: e => {
-            onClick?.(e);
-            if (!props.href)
-                return;
-            e.preventDefault();
-            if (props.isDisabled)
-                return;
-            if (e.ctrlKey || e.metaKey || e.shiftKey) {
-                return window.open(props.href, '_blank');
-            }
-            navigate(props.href, props.route);
-        }, ...props, children: children }));
-}
+const RouteButton = withRouting(Button);
 
 function transformAlgoliaPromoHitToPromoHit(algoliaPromoHit) {
     return {
@@ -1341,9 +1440,9 @@ var styles$17 = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-modu
 
 function IconButton({ children, className, color = 'primary', isDisabled, onClick, size = 'md', type = 'button', }) {
     return (jsx("button", { className: clsx(styles$17['icon-button'], styles$17[size], styles$17[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: e => {
-            onClick?.(e);
             e.preventDefault();
             e.stopPropagation();
+            onClick?.(e);
         }, type: type, children: children }));
 }
 
@@ -1357,10 +1456,10 @@ function StrokeFavoriteIcon(props) {
 
 var styles$16 = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
 
-function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
+function FavoriteButton({ isDisabled, isFavorite, onClick: onClick, }) {
     return (jsx(IconButton, { className: clsx(styles$16['favorite-button'], {
             [styles$16['is-favorite']]: isFavorite,
-        }), color: "secondary", isDisabled: isDisabled, onClick: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
+        }), color: "secondary", isDisabled: isDisabled, onClick: onClick, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
 }
 
 var styles$15 = {"field-error":"field-error-module-FXnIg"};
@@ -7732,7 +7831,22 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
 var styles$Q = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","content":"modal-module-FJxzx","modal-slide":"modal-module-jkAe7","modal-delayed-fade":"modal-module-WOZ01","close":"modal-module-7zIZE","modal-zoom":"modal-module-aPJ7X"};
 
 function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside = true, }) {
-    return (jsx(ModalOverlay, { className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$Q.modal, {
+    return (jsx(ModalOverlay, { ref: ref => {
+            ref?.addEventListener('click', e => {
+                if ((!e.target || ref.contains(e.target)) &&
+                    ref !== e.target)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+            });
+            ref?.addEventListener('touchend', e => {
+                if ((!e.target || ref.contains(e.target)) &&
+                    ref !== e.target)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+            });
+        }, className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$Q.modal, {
                 [styles$Q['is-full-screen']]: isFullScreen,
             }), children: [hasCloseButton && (jsx("div", { className: styles$Q.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$Q.content, children: children })] }) }));
 }
@@ -8101,9 +8215,11 @@ function useFetchCurrentCartCount() {
     return data?.reduce((acc, cartLine) => acc + (cartLine.qtyOrdered || 0), 0);
 }
 
+const RouteIconButton = withRouting(IconButton);
+
 function ConnectedCartIcon({ href }) {
     const count = useFetchCurrentCartCount();
-    return (jsx(RouteLink, { href: href, children: jsx(IconWithBadge, { badge: count ? jsx(Badge, { count: count }) : undefined, icon: jsx(SolidCartIcon, {}) }) }));
+    return (jsx(RouteIconButton, { href: href, children: jsx(IconWithBadge, { badge: count ? jsx(Badge, { count: count }) : undefined, icon: jsx(SolidCartIcon, {}) }) }));
 }
 
 function IntlProvider({ children, formatMessage, languageCode: _languageCode, }) {
@@ -8217,7 +8333,7 @@ function ConnectedAnnouncement({ announcement: { endDate, startDate, ...announce
     return jsx(Announcement, { announcement: announcement, onDismiss: onDismiss });
 }
 
-var styles$B = {"announcement-enter":"announcement-provider-module-ksjgO","announcement-enter-active":"announcement-provider-module-k0zd-","announcement-exit":"announcement-provider-module-w2N0B","announcement-exit-active":"announcement-provider-module-4lfx2"};
+var styles$B = {"announcement-provider":"announcement-provider-module-sVIKY","announcement-enter":"announcement-provider-module-ksjgO","announcement-enter-active":"announcement-provider-module-k0zd-","announcement-exit":"announcement-provider-module-w2N0B","announcement-exit-active":"announcement-provider-module-4lfx2"};
 
 function AnnouncementProvider() {
     const languageCode = useLanguageCode();
@@ -8226,7 +8342,7 @@ function AnnouncementProvider() {
     });
     const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
     const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
-    return (jsx(TransitionGroup, { children: filteredAnnouncements?.map(({ href, id, text, title, type }) => (jsx(CSSTransition, { classNames: {
+    return (jsx(TransitionGroup, { className: styles$B['announcement-provider'], children: filteredAnnouncements?.map(({ href, id, text, title, type }) => (jsx(CSSTransition, { classNames: {
                 enter: styles$B['announcement-enter'],
                 enterActive: styles$B['announcement-enter-active'],
                 exit: styles$B['announcement-exit'],
@@ -8270,7 +8386,7 @@ var styles$x = {"sign-in-dialog":"sign-in-dialog-module-P-AHV"};
 function SignInDialog({ isOpen, onOpenChange }) {
     const { signInUrl } = useFavorite();
     const t = useFormattedMessage();
-    return (jsx(Dialog, { isDismissable: true, dialogClassName: styles$x['sign-in-dialog'], footer: jsxs(Fragment, { children: [jsx(RouteButton, { color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.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, dialogClassName: styles$x['sign-in-dialog'], footer: jsxs(Fragment, { children: [jsx(RouteButton, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "sign in" }) }), jsx(RouteButton, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(window.location.pathname + window.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') })] }) }));
 }
 
 function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onFavoriting, productId, }) {
@@ -8321,7 +8437,7 @@ function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onF
     }, [addWishListItemToCurrentWishListError, refetch]);
     if (isFetching)
         return null;
-    return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onPress: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));
+    return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onClick: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));
 }
 
 function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...props }) {
@@ -8548,7 +8664,7 @@ const USPCarousel = ({ slides }) => {
 };
 
 function ProductUsp({ usp }) {
-    return (jsxs("div", { className: styles$u['product-usp'], children: [jsx("div", { className: styles$u.left, children: jsx(Image, { className: styles$u.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles$u.right, children: jsxs("div", { "data-content": true, className: styles$u.content, children: [jsx(Image, { className: styles$u.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles$u.title, size: "xs", children: usp.heading }), jsx("p", { className: styles$u.text, dangerouslySetInnerHTML: { __html: usp.text } })] }) })] }));
+    return (jsxs("div", { className: styles$u['product-usp'], children: [jsx("div", { className: styles$u.left, children: jsx(Image, { className: styles$u.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles$u.right, children: jsxs("div", { "data-content": true, className: styles$u.content, children: [jsx(Image, { className: styles$u.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles$u.title, size: "xs", children: usp.heading }), jsx("div", { className: styles$u.text, dangerouslySetInnerHTML: { __html: usp.text } })] }) })] }));
 }
 
 function ProductUSPCarousel({ usps }) {
@@ -8634,19 +8750,35 @@ function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
     const nextEl = useRef(null);
     const prevEl = useRef(null);
     const mainSwiperRef = useRef(null);
-    const [isZoomed, setIsZoomed] = useState(false);
-    function handleZoom() {
-        setIsZoomed(!isZoomed);
+    const [scrollFromTopPercentage, setScrollFromTopPercentage] = useState(0.5);
+    const { close, isOpen, open } = useDisclosure(false);
+    function handleZoom(e) {
+        const target = e.target;
+        const clientRect = target?.getBoundingClientRect();
+        if (!clientRect)
+            return;
+        const height = clientRect.height;
+        const clientY = e.clientY - clientRect.top;
+        const scrollPercentage = clientY / height;
+        setScrollFromTopPercentage(scrollPercentage);
+        open();
     }
     return (jsxs("div", { className: clsx(styles$q['image-lightbox'], styles$q[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles$q['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("div", { className: styles$q.thumb, children: jsx(Image, { className: styles$q.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles$q['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
                             nextEl: nextEl.current,
                             prevEl: prevEl.current,
-                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("button", { className: styles$q['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isZoomed, onClose: handleZoom })] }));
+                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("button", { className: styles$q['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isOpen, onClose: close, scrollFromTopPercentage: scrollFromTopPercentage })] }));
 }
-function ZoomImage({ currentImage, isZoomed, onClose, }) {
+function ZoomImage({ currentImage, isZoomed, onClose, scrollFromTopPercentage, }) {
     if (!isZoomed || !currentImage)
         return null;
-    return (jsx(Modal, { className: styles$q['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: () => onClose(), children: jsx("div", { className: styles$q['zoomed-container'], onClick: onClose, children: jsx(Image, { className: styles$q['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
+    return (jsx(Modal, { className: styles$q['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: onClose, children: jsx("div", { ref: element => {
+                setTimeout(() => {
+                    if (!element)
+                        return;
+                    element.scrollTo(0, element.scrollHeight * scrollFromTopPercentage -
+                        element.clientHeight / 2);
+                }, 100);
+            }, className: styles$q['zoomed-container'], onClick: onClose, children: jsx(Image, { className: styles$q['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
 }
 
 var styles$p = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};

package/dist/src/buttons/favorite/favorite-button.d.ts

@@ -1,6 +1,6 @@
 export interface FavoriteButtonProps {
     isDisabled?: boolean;
     isFavorite: boolean;
-    onPress: () => void;
+    onClick: () => void;
 }
-export declare function FavoriteButton({ isDisabled, isFavorite, onPress, }: FavoriteButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function FavoriteButton({ isDisabled, isFavorite, onClick: onClick, }: FavoriteButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
+import 'shared/utils/local-storage';
 import './tokens/index.css';
 export * from 'shared/utils/environment';
 export * from './config';

package/dist/src/shared/routing/route-button.d.ts

@@ -1,8 +1 @@
-import { ButtonProps } from 'buttons/button/button';
-import { NavigateOptions } from './route-provider';
-interface RouteButtonProps extends ButtonProps {
-    href?: string;
-    route?: NavigateOptions;
-}
-export declare function RouteButton({ children, onClick, ...props }: RouteButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const RouteButton: React.FC<import("buttons/button/button").ButtonProps & import("./with-routing").WithRoutingProps>;

package/dist/src/shared/routing/route-button.stories.d.ts

@@ -1,11 +1,10 @@
 import { StoryObj } from '@storybook/react';
-import { RouteButton } from './route-button';
 declare const meta: {
     args: {
         children: string;
         href: string;
     };
-    component: typeof RouteButton;
+    component: React.FC<import("../..").ButtonProps & import("./with-routing").WithRoutingProps>;
     parameters: {
         layout: string;
     };

package/dist/src/shared/routing/route-icon-button.d.ts

@@ -0,0 +1 @@
+export declare const RouteIconButton: React.FC<import("buttons/icon-button/icon-button").IconButtonProps & import("./with-routing").WithRoutingProps>;

package/dist/src/shared/routing/route-link.d.ts

@@ -1,9 +1 @@
-import { MouseEvent } from 'react';
-import { LinkProps } from 'buttons/link/link';
-import { NavigateOptions } from './route-provider';
-interface RouteLinkProps extends Omit<LinkProps, 'onPress'> {
-    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
-    route?: NavigateOptions;
-}
-export declare function RouteLink({ children, ...props }: RouteLinkProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const RouteLink: React.FC<import("buttons/link/link").LinkProps & import("./with-routing").WithRoutingProps>;

package/dist/src/shared/routing/route-link.stories.d.ts

@@ -1,11 +1,10 @@
 import { StoryObj } from '@storybook/react';
-import { RouteLink } from './route-link';
 declare const meta: {
     args: {
         children: string;
         href: string;
     };
-    component: typeof RouteLink;
+    component: React.FC<import("../..").LinkProps & import("./with-routing").WithRoutingProps>;
     parameters: {
         layout: string;
     };

package/dist/src/shared/routing/with-routing.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, ComponentType, FC, MouseEventHandler } from 'react';
+import { NavigateOptions } from './route-provider';
+export interface WithRoutingProps {
+    href?: string;
+    route?: NavigateOptions;
+}
+export declare function withRouting<TComponent extends ComponentType<TProps>, TProps extends {
+    children: React.ReactNode;
+    onClick?: MouseEventHandler<TElement> | undefined;
+}, TElement extends HTMLElement>(component: TComponent): FC<ComponentProps<TComponent> & WithRoutingProps>;

package/dist/src/shared/utils/local-storage.d.ts

@@ -0,0 +1,6 @@
+/** Mocks the localStorage and sessionStorage API in Node.js
+ * @see https://gitlab.com/kaictl/node/mock-local-storage */
+declare const HAS_LOCAL_STORAGE_SUPPORT: boolean;
+declare function mockStorage(): void;
+declare function createStorage(): {};
+declare const _: void;

package/dist/styles.css

@@ -44,39 +44,50 @@
   --line-height-38: 2.375rem;
   --line-height-42: 2.625rem;
   --line-height-44: 2.75rem;
+  --line-height-46: 2.875rem;
+  --line-height-48: 3rem;
   --line-height-56: 3.5rem;
+  --line-height-60: 3.75rem;
   --line-height-84: 5.25rem;
+  --line-height-88: 5.5rem;
 
   /* base line height */
   --line-height-base: var(--line-height-24);
 
   /* headings xxl */
   --text-heading-xxl-size: var(--font-size-96);
-  --text-heading-xxl-line-height: var(--line-height-84);
+  --text-heading-xxl-line-height: var(--line-height-88);
+  --text-heading-xxl-line-height-uppercase: var(--line-height-84);
 
   /* headings xl */
   --text-heading-xl-size: var(--font-size-64);
-  --text-heading-xl-line-height: var(--line-height-56);
+  --text-heading-xl-line-height: var(--line-height-60);
+  --text-heading-xl-line-height-uppercase: var(--line-height-56);
 
   /* headings l */
   --text-heading-l-size: var(--font-size-52);
-  --text-heading-l-line-height: var(--line-height-44);
+  --text-heading-l-line-height: var(--line-height-48);
+  --text-heading-l-line-height-uppercase: var(--line-height-44);
 
   /* headings m */
   --text-heading-m-size: var(--font-size-48);
-  --text-heading-m-line-height: var(--line-height-42);
+  --text-heading-m-line-height: var(--line-height-46);
+  --text-heading-m-line-height-uppercase: var(--line-height-42);
 
   /* headings s */
   --text-heading-s-size: var(--font-size-44);
-  --text-heading-s-line-height: var(--line-height-38);
+  --text-heading-s-line-height: var(--line-height-42);
+  --text-heading-s-line-height-uppercase: var(--line-height-38);
 
   /* headings xs */
   --text-heading-xs-size: var(--font-size-32);
-  --text-heading-xs-line-height: var(--line-height-28);
+  --text-heading-xs-line-height: var(--line-height-32);
+  --text-heading-xs-line-height-uppercase: var(--line-height-28);
 
   /* headings xxs */
   --text-heading-xxs-size: var(--font-size-24);
   --text-heading-xxs-line-height: var(--line-height-22);
+  --text-heading-xxs-line-height-uppercase: var(--line-height-24);
 }
 :root {
   /*********************************************************
@@ -541,12 +552,10 @@
   color: currentcolor;
 }
 
-.icon-button-module-fTeP4:where([data-hovered]), .icon-button-module-dM0eo:where([data-hovered]) {
-    color: var(--color-brand-red);
-  }
-
-.icon-button-module-fTeP4:where([data-pressed]), .icon-button-module-dM0eo:where([data-pressed]) {
-    color: var(--color-brand-dark-red);
+@media (hover: hover) {
+    .icon-button-module-fTeP4:hover, .icon-button-module-dM0eo:hover {
+      color: var(--color-brand-red);
+    }
   }
 
 .favorite-button-module-tXSS3:where(.favorite-button-module-l557q) {
@@ -1405,11 +1414,11 @@
   transition: background-color 0.2s ease;
 }
 
-  .carousel-navigation-button-module-a1-I4[data-hovered] {
+  .carousel-navigation-button-module-a1-I4:hover {
     background-color: var(--color-brand-light-gray);
   }
 
-  .carousel-navigation-button-module-a1-I4[data-disabled],
+  .carousel-navigation-button-module-a1-I4[disabled],
   .carousel-navigation-button-module-a1-I4.swiper-button-disabled {
     background-color: var(--color-brand-white);
     color: #bcbcbc66;
@@ -1527,6 +1536,14 @@
         top: 50%;
       }
 
+  .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-kcqEE.carousel-module-984Rr {
+          transform: translate(-50%, -50%);
+        }
+
+  .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-kcqEE.carousel-module-T7bTr {
+          transform: translate(50%, -50%);
+        }
+
   @media (width < 1024px) {
     .carousel-module-ealh-:has(.carousel-module-tPg7k) {
       width: calc(100% + 20px);
@@ -2025,39 +2042,68 @@
     line-height: var(--text-heading-xxl-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module-Kn3ZN).heading-module-6spgX {
+      line-height: var(--text-heading-xxl-line-height-uppercase);
+    }
+
   .heading-module-pMC65:where(.heading-module--hZs-) {
     font-size: var(--text-heading-xl-size);
     line-height: var(--text-heading-xl-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module--hZs-).heading-module-6spgX {
+      line-height: var(--text-heading-xl-line-height-uppercase);
+    }
+
   .heading-module-pMC65:where(.heading-module-WrJRY) {
     font-size: var(--text-heading-l-size);
     line-height: var(--text-heading-l-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module-WrJRY).heading-module-6spgX {
+      line-height: var(--text-heading-l-line-height-uppercase);
+    }
+
   .heading-module-pMC65:where(.heading-module-hTexc) {
     font-size: var(--text-heading-m-size);
     line-height: var(--text-heading-m-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module-hTexc).heading-module-6spgX {
+      line-height: var(--text-heading-m-line-height-uppercase);
+    }
+
   .heading-module-pMC65:where(.heading-module-7W29m) {
     font-size: var(--text-heading-s-size);
     line-height: var(--text-heading-s-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module-7W29m).heading-module-6spgX {
+      line-height: var(--text-heading-s-line-height-uppercase);
+    }
+
   .heading-module-pMC65:where(.heading-module-SgaLB) {
     font-size: var(--text-heading-xs-size);
     line-height: var(--text-heading-xs-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module-SgaLB).heading-module-6spgX {
+      line-height: var(--text-heading-xs-line-height-uppercase);
+    }
+
   .heading-module-pMC65:where(.heading-module-33en7) {
     font-size: var(--text-heading-xxs-size);
     line-height: var(--text-heading-xxs-line-height);
   }
 
+  .heading-module-pMC65:where(.heading-module-33en7).heading-module-6spgX {
+      line-height: var(--text-heading-xxs-line-height-uppercase);
+    }
+
 .dialog-module-qKzgy {
   position: relative;
-  padding: 1rem;
+  padding: var(--space-24);
+  padding-right: var(--space-32);
 }
 
   .dialog-module-qKzgy,
@@ -2069,6 +2115,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    font-weight: var(--font-weight-bold);
     gap: 8px;
     line-height: 1;
   }
@@ -2079,14 +2126,15 @@
 
   .dialog-module-qKzgy .dialog-module-ZnsAe .dialog-module-Y7Tqg {
       position: absolute;
-      top: 0;
-      right: 0;
+      top: -8px;
+      right: -8px;
     }
 
   .dialog-module-qKzgy .dialog-module-y7Axm {
     display: flex;
     flex-direction: column;
     margin-top: var(--space-32);
+    margin-right: calc(-1 * var(--space-8));
     gap: 8px;
   }
 
@@ -2693,6 +2741,11 @@
           }
 }
 
+.announcement-provider-module-sVIKY {
+  position: relative;
+  z-index: calc(var(--header-layer) + 1);
+}
+
 .announcement-provider-module-ksjgO {
   margin-top: calc(-1 * var(--announcement-bar-height));
 }
@@ -2780,7 +2833,6 @@
 
 .sign-in-dialog-module-P-AHV {
   max-width: 403px;
-  padding: 28px 24px 36px;
 }
 
 .card-carousel-module-JXQmk {
@@ -2822,6 +2874,8 @@
 
 .card-carousel-module-DxKOG.card-carousel-module-8uKSt {
     --slide-width: var(--slide-width-narrow);
+
+    max-height: calc(var(--slide-width) * 1.8177);
   }
 
 .card-carousel-module-DxKOG.card-carousel-module-l-ylK {
@@ -2878,6 +2932,8 @@
 
     .card-carousel-module-DxKOG.card-carousel-module-8uKSt {
       --slide-width: var(--slide-width-narrow);
+
+      max-height: calc(var(--slide-width) * 1.8177);
     }
 
     .card-carousel-module-DxKOG.card-carousel-module-l-ylK {
@@ -3243,8 +3299,15 @@ button.swiper-pagination-bullet {
           margin: 0;
           font-size: var(--text-font-size);
           line-height: var(--text-line-height);
+
+          /* stylelint-disable-next-line max-nesting-depth */
         }
 
+  .usp-carousel-module-UCbpX .usp-carousel-module-rtIrb .usp-carousel-module-2fygw .usp-carousel-module-AOJJg .usp-carousel-module-tq8R8 b,
+          .usp-carousel-module-UCbpX .usp-carousel-module-rtIrb .usp-carousel-module-2fygw .usp-carousel-module-AOJJg .usp-carousel-module-tq8R8 strong {
+            font-weight: var(--font-weight-bold);
+          }
+
   .usp-carousel-module-UCbpX .usp-carousel-module-rtIrb .usp-carousel-module-2fygw .usp-carousel-module-L5Kmv {
         position: absolute;
         bottom: 0;

package/package.json

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

package/dist/src/carousel/promo-card-carousel/promo-card-carousel.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { CarouselProps } from 'carousel/carousel';
-interface PromoCardCarouselProps {
-    cardWidth?: 'normal' | 'narrow' | 'auto';
-    hasOverflow?: boolean;
-    promoCards: ReactNode[];
-    promosPerView?: CarouselProps['slidesPerView'];
-}
-export declare function PromoCardCarousel({ promoCards }: PromoCardCarouselProps): import("react/jsx-runtime").JSX.Element;
-export {};