@sonic-equipment/ui 201.0.0 → 203.0.0

package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.d.ts

@@ -2,7 +2,8 @@ import { ReactNode } from 'react';
 import { ImageType } from '../../../../shared/model/image';
 export interface SignInPageLayoutProps {
     children?: ReactNode;
+    'data-test-selector': string;
     fullHeight?: boolean;
     image?: ImageType;
 }
-export declare function SignInPageLayout({ children, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignInPageLayout({ children, 'data-test-selector': dataTestSelector, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
 import { Image } from '../../../../media/image/image.js';
 import { SIGN_IN_PAGE_BACKGROUND_IMAGE } from './sign-in-page-background-image.js';
 import styles from './sign-in-page-layout.module.css.js';
 
-function SignInPageLayout({ children, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
-    const isLg = useIsBreakpoint('lg');
-    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("section", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
+function SignInPageLayout({ children, 'data-test-selector': dataTestSelector, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
+    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), "data-test-selector": dataTestSelector, children: [jsx("section", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) })] }));
 }
 
 export { SignInPageLayout };

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

@@ -37,7 +37,7 @@ function SignInPage({ returnUrl } = {}) {
         navigate(returnUrl || paths.HOME, { reload: true });
     };
     const allowGuestSignIn = returnUrl === paths.CHECKOUT_SHIPPING;
-    const createAccountPath = `${paths.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${returnUrl}` : ''}`;
+    const createAccountPath = `${paths.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`;
     const onSubmit = ({ data }) => {
         resetSignIn();
         resetCreateGuest();
@@ -57,7 +57,7 @@ function SignInPage({ returnUrl } = {}) {
     const onRecoverPasswordDialogOpen = () => {
         setRecoverPasswordDialogOpen(true);
     };
-    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isLoading: isLoading, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, "data-test-selector": "signInPage", children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isLoading: isLoading, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
 }
 
 export { SignInPage };

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

@@ -82,7 +82,7 @@ function CartContent({ cartLines }) {
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
     return (jsx(CheckoutPageLayout, { actions: {
-            primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Start checkout" }) })),
+            primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: paths.CHECKOUT_SHIPPING, children: jsx(FormattedMessage, { id: "Start checkout" }) })),
             secondary: isAuthenticated ? (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", onClick: () => {
                     saveCartForLater.mutate({ cart: currentCart });
                 }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })) : (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: paths.SIGN_IN, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),

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

@@ -51,7 +51,7 @@ function OrderConfirmationPageContent({ cart, }) {
                 label: t('Order confirmation'),
             },
         ], "data-test-selector": "orderConfirmationPage", title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: paths.HOME, children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(Button, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),

package/dist/pages/my-sonic/widgets/connected-bill-to-address-widget.js

@@ -9,7 +9,8 @@ import { AddressDataCard } from './components/address-data-card.js';
 
 function ConnectedBillToAddressWidget({ billToId = 'current', } = {}) {
     const paths = usePaths();
-    const { href } = useLocation();
+    const { pathname, search } = useLocation();
+    const href = `${pathname}${search}`;
     const editAddressUrl = `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}?returnUrl=${encodeURIComponent(href)}`;
     const { data: billToAddress, error, isLoading, } = useFetchBillToAddress({ billToId });
     return (jsx(AddressDataCard, { actions: [

package/dist/pages/my-sonic/widgets/connected-ship-to-address-widget.js

@@ -9,7 +9,8 @@ import { AddressDataCard } from './components/address-data-card.js';
 
 function ConnectedShipToAddressWidget({ billToId = 'current', shipToId = 'current', } = {}) {
     const paths = usePaths();
-    const { href } = useLocation();
+    const { pathname, search } = useLocation();
+    const href = `${pathname}${search}`;
     const editAddressUrl = `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${shipToId}?returnUrl=${encodeURIComponent(href)}`;
     const createAddressUrl = `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(href)}`;
     const { data: shipToAddress, error, isLoading, } = useFetchShipToAddress({

package/dist/pages/product/product-details-page/components/product-details-images/product-detail-images.js

@@ -6,7 +6,6 @@ import { ImageLightbox } from '../../../../../media/image-lightbox/image-lightbo
 import { ZoomImage } from '../../../../../media/zoom-image/zoom-image.js';
 import { Modal } from '../../../../../modals/modal/modal.js';
 import { useDisclosure } from '../../../../../shared/hooks/use-disclosure.js';
-import { useIsBreakpoint } from '../../../../../shared/hooks/use-is-breakpoint.js';
 import styles from './product-detail-images.module.css.js';
 
 const MAX_IMAGES = 5;
@@ -16,7 +15,6 @@ function ProductDetailImages({ images }) {
     const [scrollPercentage, setScrollPercentage] = useState(0);
     const { isOpen: isOpenModal, open: openModal, toggle: toggleModal, } = useDisclosure();
     const { close: closeZoom, isOpen: isOpenZoom, open: openZoom, } = useDisclosure();
-    const isXl = useIsBreakpoint('xl');
     if (images.length > MAX_IMAGES) {
         images = images.slice(0, MAX_IMAGES);
     }
@@ -29,7 +27,7 @@ function ProductDetailImages({ images }) {
         setScrollPercentage(scrollPercentage);
         openZoom();
     }
-    return (jsxs(Fragment, { children: [isXl ? (jsxs(Fragment, { children: [jsx(ImagesGrid, { images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), jsx(Modal, { hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpenModal, onOpenChange: toggleModal, shouldCloseOnInteractOutside: false, children: jsx("div", { className: styles['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, onZoom: onZoom, variant: "lg" }) }) })] })) : (jsx(ImageLightbox, { images: images, onZoom: onZoom })), isOpenZoom && (jsx(ZoomImage, { currentImage: images[selectedZoomImageIndex], isZoomed: isOpenZoom, onClose: closeZoom, scrollFromTopPercentage: scrollPercentage }))] }));
+    return (jsxs(Fragment, { children: [jsx(ImagesGrid, { className: styles['images-grid'], images: images, onSelectImage: (image, _index) => handleOpenImage(image) }), isOpenModal && (jsx(Modal, { hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isOpenModal, onOpenChange: toggleModal, shouldCloseOnInteractOutside: false, children: jsx("div", { className: styles['image-lightbox-modal'], children: jsx(ImageLightbox, { images: images, initialSelectedIndex: selectedImageIndex, onZoom: onZoom, variant: "lg" }) }) })), jsx(ImageLightbox, { className: styles['image-lightbox'], images: images, onZoom: onZoom }), isOpenZoom && (jsx(ZoomImage, { currentImage: images[selectedZoomImageIndex], isZoomed: isOpenZoom, onClose: closeZoom, scrollFromTopPercentage: scrollPercentage }))] }));
 }
 
 export { ProductDetailImages };

package/dist/pages/product/product-details-page/components/product-details-images/product-detail-images.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"image-lightbox-modal":"product-detail-images-module-ERzjA"};
+var styles = {"image-lightbox-modal":"product-detail-images-module-ERzjA","images-grid":"product-detail-images-module-cdIHn","image-lightbox":"product-detail-images-module-0udrk"};
 
 export { styles as default };

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
 import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
 import { ProductUSPCarousel } from '../../../carousel/usp-carousel/product-usp-carousel.js';
@@ -15,7 +16,10 @@ import { ProductDetailsRecentlyViewedSection } from './components/product-detail
 
 function ProductDetails({ data, priceComponent, }) {
     const { breadCrumb, included, page, product, usps } = data;
-    useMarkProductAsRecentlyViewed({ productId: product.id });
+    const { mutate } = useMarkProductAsRecentlyViewed();
+    useEffect(() => {
+        mutate({ productId: product.id });
+    }, [mutate, product]);
     useDataLayer({
         event: {
             event: 'view_item',

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

@@ -3,12 +3,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from '../../../../buttons/button/button.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
 import { Heading } from '../../../../typography/heading/heading.js';
 import styles from './no-results.module.css.js';
 
 function NoResults({ content, title }) {
+    const paths = usePaths();
     const isLg = useIsBreakpoint('lg');
-    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: isLg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(Button, { withArrow: true, "data-test-selector": "buttonContinueShopping", href: "/", size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
+    return (jsxs("div", { className: styles['no-results'], children: [jsx(Heading, { bold: false, className: styles.title, size: isLg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles.body, children: content }), jsx("div", { className: styles.buttons, children: jsx(Button, { withArrow: true, "data-test-selector": "buttonContinueShopping", href: paths.HOME, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
 }
 
 export { NoResults };

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js

@@ -12,10 +12,12 @@ function useFetchCurrentCartWithAtp({ forceRecalculation = true, select = cartMo
             select(atp
                 ? {
                     ...cartResult.data,
-                    cartLines: cartResult.data.cartLines?.map(line => ({
-                        ...line,
-                        atp: atp.find(a => a.productCode === line.erpNumber) || null,
-                    })),
+                    cartLines: cartResult.data.cartLines?.map(line => {
+                        const matchingAtp = atp.find(a => a.productCode === line.erpNumber);
+                        if (!matchingAtp)
+                            return line;
+                        return { ...line, atp: matchingAtp };
+                    }),
                 }
                 : cartResult.data),
         error: cartResult.error || error,

package/dist/shared/api/storefront/hooks/product/use-mark-product-as-viewed.d.ts

@@ -1,3 +1,5 @@
-export declare function useMarkProductAsRecentlyViewed({ productId, }: {
-    productId?: string;
-}): import("@tanstack/react-query").UseQueryResult<void, Error>;
+interface MarkProductAsRecentlyViewedParams {
+    productId: string;
+}
+export declare function useMarkProductAsRecentlyViewed(): import("@tanstack/react-query").UseMutationResult<void, Error, MarkProductAsRecentlyViewedParams, unknown>;
+export {};

package/dist/shared/api/storefront/hooks/product/use-mark-product-as-viewed.js

@@ -1,19 +1,15 @@
-import { useQueryClient, useQuery } from '@tanstack/react-query';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { markProductAsRecentlyViewed } from '../../services/product-service.js';
 
-function useMarkProductAsRecentlyViewed({ productId, }) {
+function useMarkProductAsRecentlyViewed() {
     const queryClient = useQueryClient();
-    return useQuery({
-        enabled: Boolean(productId),
-        gcTime: 0,
-        queryFn: () => {
+    return useMutation({
+        mutationFn: async ({ productId }) => {
             markProductAsRecentlyViewed({ productId: productId });
             queryClient.invalidateQueries({
                 queryKey: ['products', 'recently-viewed'],
             });
         },
-        queryKey: ['mark-product-as-recently-viewed', productId],
-        staleTime: 0,
     });
 }
 

package/dist/shared/api/storefront/services/website-service.js

@@ -1,8 +1,13 @@
 import { config } from '../../../../config.js';
 import { request } from '../../../fetch/request.js';
+import { TIME } from '../../../utils/time.js';
 
 async function fetchCountriesLanguages() {
     const { body } = await request({
+        next: {
+            revalidate: 1 * TIME.DAY,
+            tags: ['countries-languages'],
+        },
         url: `${config.SHOP_API_URL}/api/v1/websites/current?expand=languages%2Ccountries`,
     });
     return {
@@ -12,6 +17,10 @@ async function fetchCountriesLanguages() {
 }
 async function fetchCountriesWithLanguages() {
     const { body } = await request({
+        next: {
+            revalidate: 1 * TIME.DAY,
+            tags: ['countries-languages'],
+        },
         url: `${config.SHOP_API_URL}/api/v1/custom/countrylanguage`,
     });
     return body;

package/dist/shared/hooks/use-debounced-callback.d.ts

@@ -1 +1,5 @@
-export declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => Promise<ReturnType<T>>;
+export interface DebouncedCallback<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): Promise<ReturnType<T>>;
+    cancel: VoidFunction;
+}
+export declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): DebouncedCallback<T>;

package/dist/shared/hooks/use-debounced-callback.js

@@ -4,16 +4,16 @@ import { useRef, useCallback } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useDebouncedCallback(func, delay) {
     const timeoutId = useRef();
-    return useCallback(function debounced(...args) {
-        return new Promise(resolve => {
-            if (typeof window === 'undefined')
-                return resolve(func(...args));
-            clearTimeout(timeoutId.current);
-            timeoutId.current = setTimeout(() => {
-                resolve(func(...args));
-            }, delay);
-        });
-    }, [delay, func]);
+    const debounced = (...args) => new Promise(resolve => {
+        if (typeof window === 'undefined')
+            return resolve(func(...args));
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(() => {
+            resolve(func(...args));
+        }, delay);
+    });
+    debounced.cancel = () => clearTimeout(timeoutId.current);
+    return useCallback(debounced, [delay, func]);
 }
 
 export { useDebouncedCallback };

package/dist/shared/providers/react-query-container.d.ts

@@ -1,5 +1,10 @@
-import { ReactNode } from 'react';
-export declare function ReactQueryContainer({ children, enableDevTools, }: {
-    children: ReactNode;
+import { ReactElement, ReactNode } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+export declare const globalQueryClient: QueryClient;
+export declare function ReactQueryContainer({ children, enableDevTools, queryClient, }: {
+    children: ReactNode | ((args: {
+        queryClient: QueryClient;
+    }) => ReactNode | ReactElement);
     enableDevTools?: boolean;
+    queryClient?: QueryClient;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/shared/providers/react-query-container.js

@@ -5,7 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { environment } from '../utils/environment.js';
 import { TIME } from '../utils/time.js';
 
-const queryClient = new QueryClient({
+const globalQueryClient = new QueryClient({
     defaultOptions: {
         queries: {
             /* Set gcTime and staleTime to 0 to disable react query cache */
@@ -15,8 +15,8 @@ const queryClient = new QueryClient({
         },
     },
 });
-function ReactQueryContainer({ children, enableDevTools = environment !== 'production', }) {
-    return (jsxs(QueryClientProvider, { client: queryClient, children: [enableDevTools && jsx(ReactQueryDevtools, { initialIsOpen: false }), children] }));
+function ReactQueryContainer({ children, enableDevTools = environment !== 'production', queryClient = globalQueryClient, }) {
+    return (jsxs(QueryClientProvider, { client: queryClient, children: [enableDevTools && jsx(ReactQueryDevtools, { initialIsOpen: false }), children instanceof Function ? children({ queryClient }) : children] }));
 }
 
-export { ReactQueryContainer };
+export { ReactQueryContainer, globalQueryClient };

package/dist/shared/routing/route-context.d.ts

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

package/dist/shared/routing/route-context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const RouteContext = createContext(undefined);
+
+export { RouteContext };

package/dist/shared/routing/route-provider.d.ts

@@ -7,6 +7,7 @@ export interface RouteProviderProps {
     paths: Paths;
     url: {
         basePathname?: string;
+        href: string;
         pathname: string;
         search: string;
     };

package/dist/shared/routing/route-provider.js

@@ -1,17 +1,16 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useGlobalState } from '../providers/global-state-provider.js';
-import { withRouting } from './with-routing.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { RouteContext } from './route-context.js';
 
-function RouteProvider({ children, Link = FallbackRouteLink, navigate, paths, url, }) {
-    useGlobalState('routing', {
+function RouteProvider({ children, Link, navigate, paths, url, }) {
+    const value = useMemo(() => ({
         Link,
         navigate,
         paths,
         url,
-    });
-    return jsx(Fragment, { children: children });
+    }), [Link, navigate, paths, url]);
+    return jsx(RouteContext.Provider, { value: value, children: children });
 }
-const FallbackRouteLink = withRouting('a');
 
 export { RouteProvider };

package/dist/shared/routing/types.d.ts

@@ -18,12 +18,13 @@ export interface Paths {
     REVIEW_AND_SUBMIT: string;
     SIGN_IN: string;
 }
-export interface RouteContext {
+export interface RouteContextValue {
     Link?: ElementType<RouteLinkElementProps>;
     navigate: NavigateFunction;
     paths: Paths;
     url: {
         basePathname?: string;
+        href: string;
         pathname: string;
         search: string;
     };

package/dist/shared/routing/use-location.d.ts

@@ -1,9 +1,9 @@
 import qs from 'query-string';
 export declare function useLocation(): {
     basePathname: string | undefined;
-    fullPathname: string | undefined;
+    fullPathname: string;
     href: string;
-    pathname: string | undefined;
+    pathname: string;
     query: qs.ParsedQuery<string>;
-    search: string | undefined;
+    search: string;
 };

package/dist/shared/routing/use-location.js

@@ -1,15 +1,15 @@
+"use client";
 import qs from 'query-string';
-import { useGlobalState } from '../providers/global-state-provider.js';
+import { useRouter } from './use-router.js';
 
 function useLocation() {
-    const [routeState] = useGlobalState('routing');
-    const { url: { basePathname, pathname, search }, } = routeState || { url: {} };
+    const { url: { basePathname, href, pathname, search }, } = useRouter();
     const query = qs.parse(search || '');
     return {
         basePathname,
         fullPathname: pathname,
-        href: `${pathname}${search}`,
-        pathname: pathname?.replace(new RegExp(`^${basePathname}`), ''),
+        href,
+        pathname: pathname.replace(new RegExp(`^${basePathname}`), ''),
         query,
         search,
     };

package/dist/shared/routing/use-navigate.js

@@ -1,22 +1,19 @@
 "use client";
 import { useRef, useCallback } from 'react';
-import { useGlobalState } from '../providers/global-state-provider.js';
 import { useOnNavigate } from './use-on-navigate.js';
+import { useRouter } from './use-router.js';
 
 function useNavigate() {
     const isNavigatingRef = useRef(false);
-    const [state] = useGlobalState('routing');
+    const routeState = useRouter();
     const trigger = useOnNavigate(() => {
         isNavigatingRef.current = false;
     });
-    if (!state) {
-        throw new Error('RouteProvider not found');
-    }
     const navigate = useCallback((href, options) => {
         trigger(href, options);
         isNavigatingRef.current = true;
-        return state.navigate(href, options);
-    }, [state, trigger]);
+        return routeState.navigate(href, options);
+    }, [routeState, trigger]);
     return { isNavigating: isNavigatingRef.current, navigate };
 }
 

package/dist/shared/routing/use-paths.js

@@ -1,10 +1,9 @@
-import { useGlobalState } from '../providers/global-state-provider.js';
+"use client";
+import { useRouter } from './use-router.js';
 
 function usePaths() {
-    const [routeState] = useGlobalState('routing');
-    if (!routeState)
-        throw new Error('usePaths must be used within a RouteProvider context');
-    return routeState.paths;
+    const { paths } = useRouter();
+    return paths;
 }
 
 export { usePaths };

package/dist/shared/routing/use-route-link-element.d.ts

@@ -1 +1 @@
-export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps> | undefined;
+export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps>;

package/dist/shared/routing/use-route-link-element.js

@@ -1,11 +1,10 @@
-import { useGlobalState } from '../providers/global-state-provider.js';
+"use client";
+import { useRouter } from './use-router.js';
+import { FallbackRouteLink } from './with-routing.js';
 
 function useRouteLinkElement() {
-    const [state] = useGlobalState('routing');
-    if (!state) {
-        throw new Error('RouteProvider not found');
-    }
-    return state.Link;
+    const { Link } = useRouter();
+    return Link || FallbackRouteLink;
 }
 
 export { useRouteLinkElement };

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

@@ -1,6 +1,6 @@
 import { NavigateOptions } from './types';
 export declare function useRouteLink(): {
-    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps> | undefined;
+    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps>;
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;
         onNavigate: () => void;

package/dist/shared/routing/use-route-link.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 import { buildHref } from './route-utils.js';
 import { useLocation } from './use-location.js';

package/dist/shared/routing/use-router.d.ts

@@ -0,0 +1 @@
+export declare function useRouter(): import("./types").RouteContextValue;

package/dist/shared/routing/use-router.js

@@ -0,0 +1,13 @@
+"use client";
+import { useContext } from 'react';
+import { RouteContext } from './route-context.js';
+
+function useRouter() {
+    const context = useContext(RouteContext);
+    if (!context) {
+        throw new Error('useRouter must be used within a RouteProvider');
+    }
+    return context;
+}
+
+export { useRouter };

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

@@ -5,3 +5,4 @@ export interface WithRoutingProps {
     route?: NavigateOptions;
 }
 export declare function withRouting(component: ElementType<RouteLinkElementProps>): React.FunctionComponent<RouteLinkElementProps>;
+export declare const FallbackRouteLink: React.FunctionComponent<RouteLinkElementProps>;

package/dist/shared/routing/with-routing.js

@@ -29,5 +29,6 @@ function withRouting(component) {
     Component.displayName = `WithRouting(${component.toString()})`;
     return Component;
 }
+const FallbackRouteLink = withRouting('a');
 
-export { withRouting };
+export { FallbackRouteLink, withRouting };

package/dist/sidebar/sidebar-provider.js

@@ -41,8 +41,6 @@ function SidebarProvider({ children }) {
     const { close, isDocked, isOpen, transition } = state;
     return (jsxs("div", { className: clsx(styles['sidebar-container'], {
             [styles['transition']]: transition,
-            [styles['docked']]: isDocked,
-            [styles['open']]: isOpen,
         }), children: [jsx(SidebarDetectBreakpoint, {}), children, jsx(BackgroundOverlay, { isOpen: isDocked && isOpen, onClick: close })] }));
 }
 

package/dist/styles.css

@@ -479,7 +479,7 @@ html {
         grid-template-rows: 1fr;
       }
 
-  .accordion-module-9WvAH .accordion-module-lf9d-:has(.accordion-module--Rwpb[disabled]) {
+  .accordion-module-9WvAH .accordion-module-lf9d-:has(.accordion-module--Rwpb[disabled]):not(.accordion-module-RnNRT) {
       border-color: var(--color-brand-light-gray);
     }
 
@@ -2218,6 +2218,21 @@ html {
       content: '/';
       margin-inline: 10px;
     }
+.breadcrumb-module-CQGse .breadcrumb-module-hxhDY.breadcrumb-module-ToeDB {
+      display: flex;
+    }
+.breadcrumb-module-CQGse .breadcrumb-module-hxhDY.breadcrumb-module-np5GK {
+      display: none;
+    }
+@media (width >= 768px) {
+      .breadcrumb-module-CQGse .breadcrumb-module-hxhDY.breadcrumb-module-ToeDB {
+        display: none;
+      }
+
+      .breadcrumb-module-CQGse .breadcrumb-module-hxhDY.breadcrumb-module-np5GK {
+        display: flex;
+      }
+    }
 @media (width < 768px) {
       .breadcrumb-module-CQGse .breadcrumb-module-hxhDY::after {
         display: none;
@@ -3369,6 +3384,7 @@ html {
 
 .product-card-module-pLaiB .product-card-module-XzunM {
     z-index: var(--z-top);
+    margin: 0;
     grid-area: sku;
     justify-self: start;
     -webkit-user-select: all;
@@ -8555,6 +8571,20 @@ button.swiper-pagination-bullet {
   padding: 64px 48px;
 }
 
+.product-detail-images-module-cdIHn {
+  display: none;
+}
+
+@media (width >= 1024px) {
+  .product-detail-images-module-0udrk {
+    display: none;
+  }
+
+  .product-detail-images-module-cdIHn {
+    display: grid;
+  }
+}
+
 .product-details-panel-module-MXfPm {
   display: flex;
   flex-direction: column;

package/package.json

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