@sonic-equipment/ui 202.0.0 → 203.0.0

package/dist/breadcrumbs/breadcrumb.js

@@ -5,32 +5,23 @@ import clsx from 'clsx';
 import { Link } from '../buttons/link/link.js';
 import { GlyphsChevronsSlimLeftIcon } from '../icons/glyph/glyphs-chevrons-slim-left-icon.js';
 import { SolidHomeIcon } from '../icons/solid/solid-home-icon.js';
-import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
 import styles from './breadcrumb.module.css.js';
 
-function BreadcrumbShort({ links }) {
+function Breadcrumb({ links }) {
+    if (links.length <= 1)
+        return null;
+    const linksWithoutFirst = links.slice(1);
     const homeLink = links[0];
     const previousLink = links.at(-2);
     const isHomeLink = previousLink === undefined || previousLink === homeLink;
     const href = previousLink?.href || homeLink?.href;
     const label = previousLink?.label || homeLink?.label;
-    return (jsx(Breadcrumbs, { className: styles.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(Link, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
-}
-function BreadcrumbLongItem({ index, isDisabled, link, }) {
-    return (jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(Link, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles['previous-icon'], styles.icon) }), link.label] }) }, index));
-}
-function BreadcrumbLong({ links }) {
-    const linksWithoutFirst = links.slice(1);
-    const homeLink = links[0];
     if (!homeLink)
         return null;
-    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsx(Link, { className: styles.link, href: homeLink.href, title: homeLink.label, children: jsx(SolidHomeIcon, { className: clsx(styles['home-icon'], styles.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, link.href + link.label || index)))] }));
+    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.short), children: jsxs(Link, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles.icon })) : (jsx("span", { children: previousLink.label }))] }) }), jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsx(Link, { className: styles.link, href: homeLink.href, title: homeLink.label, children: jsx(SolidHomeIcon, { className: clsx(styles['home-icon'], styles.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, link.href + link.label || index)))] }));
 }
-function Breadcrumb({ links }) {
-    const isLg = useIsBreakpoint('lg');
-    if (links.length <= 1)
-        return null;
-    return isLg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
+function BreadcrumbLongItem({ index, isDisabled, link, }) {
+    return (jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsxs(Link, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles['previous-icon'], styles.icon) }), link.label] }) }, index));
 }
 
 export { Breadcrumb };

package/dist/breadcrumbs/breadcrumb.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
+var styles = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ","short":"breadcrumb-module-ToeDB","long":"breadcrumb-module-np5GK"};
 
 export { styles as default };

package/dist/buttons/add-to-cart-button/add-to-cart-button.d.ts

@@ -3,5 +3,5 @@ interface AddToCartButtonProps {
     onChange: (quantity: number) => void;
     quantity: number;
 }
-export declare function AddToCartButton({ isDisabled, onChange, quantity, }: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddToCartButton({ isDisabled, onChange: _onChange, quantity: _quantity, }: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,18 +1,16 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { NumberField } from '../../forms/fields/number-field/number-field.js';
 import { SolidCartIcon } from '../../icons/solid/solid-cart-icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
 import { ensureNumber } from '../../shared/utils/number.js';
 import { Button } from '../button/button.js';
 import styles from './add-to-cart-button.module.css.js';
 
-function AddToCartButton({ isDisabled = false, onChange, quantity, }) {
-    return (jsx(InternalAddToCartButton, { isDisabled: isDisabled, onChange: onChange, quantity: quantity }));
-}
-function InternalAddToCartButton({ isDisabled = false, onChange: _onChange, quantity: _quantity, }) {
+function AddToCartButton({ isDisabled = false, onChange: _onChange, quantity: _quantity, }) {
     const [quantity, setQuantity] = useState(_quantity);
     const [currentState, setState] = useState(quantity > 0 ? 'input' : 'initial');
     const [hasFocus, setHasFocus] = useState(false);
@@ -60,7 +58,6 @@ function InitialState({ buttonRef, hasFocus, isDisabled, onAddToCart, onHasFocus
                 onAddToCart();
         }, size: "md" }));
 }
-let debounced;
 /* input state: spinner buttons and manual input */
 function InputState({ hasFocus, inputRef, isDisabled, onChange: _onChange, onHasFocussed, quantity, }) {
     const t = useFormattedMessage();
@@ -68,6 +65,7 @@ function InputState({ hasFocus, inputRef, isDisabled, onChange: _onChange, onHas
     const [manualQuantity, setManualQuantity] = useState(null);
     const isManualInput = useMemo(() => manualQuantity !== null, [manualQuantity]);
     const isSpinnerInput = useMemo(() => manualQuantity === null, [manualQuantity]);
+    const onChangeDebounced = useDebouncedCallback((quantity) => _onChange(quantity), 1500);
     useEffect(() => {
         if (hasFocus) {
             inputRef?.current?.focus();
@@ -78,28 +76,29 @@ function InputState({ hasFocus, inputRef, isDisabled, onChange: _onChange, onHas
     useEffect(() => {
         // clear debounced when switching to manual input or when quantity is 0 (returning to initial state)
         if (isManualInput)
-            clearTimeout(debounced);
-    }, [isManualInput]);
+            onChangeDebounced.cancel();
+    }, [isManualInput, onChangeDebounced]);
     const onKeyUp = (e) => {
         if (isSpinnerInput)
             return;
         if (e.key === 'Enter')
             confirmManualQuantity();
         if (e.key === 'Escape') {
+            /* returns to spinner input and restarts a debounce timer for the internalQuantity on the field */
             setManualQuantity(null);
-            setInternalQuantity(quantity);
+            onChangeDebounced(internalQuantity);
         }
     };
     const onSpinnerChange = (quantity) => {
-        clearTimeout(debounced);
+        if (Number.isNaN(quantity))
+            return;
         setInternalQuantity(quantity);
         if (quantity === 0) {
+            onChangeDebounced.cancel();
             _onChange(0);
         }
         else {
-            debounced = setTimeout(() => {
-                _onChange(quantity);
-            }, 1500);
+            onChangeDebounced(quantity);
         }
     };
     const onManualInput = (e) => {

package/dist/collapsables/accordion/accordion-item.js

@@ -20,14 +20,15 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
         }
     }, [close, initialIsOpen, open]);
     const panelId = `panel-${id}`;
-    return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
+    return (jsxs("div", { suppressHydrationWarning: true, className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
             [styles['is-open']]: isOpen,
-            [styles['allow-collapse']]: allowCollapse,
             [styles['allow-toggle']]: allowCollapse && allowToggle,
-        }), "data-test-selector": dataTestSelector, children: [jsx(Heading, { className: styles.heading, tag: "h3", children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
-                        if (allowToggle)
+        }), "data-test-selector": dataTestSelector, children: [jsx(Heading, { className: styles.heading, tag: "h3", children: jsxs("button", { suppressHydrationWarning: true, "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo], {
+                        [styles['disable-collapse']]: !allowCollapse,
+                    }), disabled: isDisabled, id: id, onClick: () => {
+                        if (allowToggle && allowCollapse)
                             toggle();
-                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] })) : (jsx("span", { className: styles.button, children: title })) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
+                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
 }
 
 export { AccordionItem };

package/dist/collapsables/accordion/accordion.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","heading":"accordion-module-d-B4T","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a","select":"accordion-module-SAbiG","disabled":"accordion-module-ogvYX"};
+var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","heading":"accordion-module-d-B4T","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","allow-toggle":"accordion-module-QEO2d","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a","disable-collapse":"accordion-module-RnNRT","select":"accordion-module-SAbiG","disabled":"accordion-module-ogvYX"};
 
 export { styles as default };

package/dist/cookies/client-cookie-context.d.ts

@@ -0,0 +1,3 @@
+import { CookieAttributes, CookieGetterSetter } from './types';
+export declare const defaultCookieOptions: CookieAttributes;
+export declare const clientCookieContextValue: CookieGetterSetter;

package/dist/cookies/client-cookie-context.js

@@ -0,0 +1,30 @@
+import Cookies from 'js-cookie';
+import { config } from '../config.js';
+import { TIME } from '../shared/utils/time.js';
+
+const defaultCookieOptions = {
+    domain: config.COOKIE_DOMAIN,
+    expires: new Date(Date.now() + TIME.DAY * 356), // 365,
+    path: '/',
+    sameSite: 'none',
+    secure: true,
+};
+function get(name) {
+    if (name)
+        return Cookies.get(name);
+    return Cookies.get();
+}
+function set(name, value, options) {
+    if (value) {
+        Cookies.set(name, value, options);
+    }
+    else {
+        Cookies.remove(name);
+    }
+}
+const clientCookieContextValue = {
+    get,
+    set,
+};
+
+export { clientCookieContextValue, defaultCookieOptions };

package/dist/cookies/cookie-context.d.ts

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

package/dist/cookies/cookie-context.js

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

package/dist/cookies/cookie-provider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { CookieContextValue } from './types';
+export declare function CookieProvider({ children, value, }: {
+    children: ReactNode;
+    value: CookieContextValue;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cookies/cookie-provider.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { clientCookieContextValue } from './client-cookie-context.js';
+import { CookieContext } from './cookie-context.js';
+
+function CookieProvider({ children, value = clientCookieContextValue, }) {
+    return (jsx(CookieContext.Provider, { value: value, children: children }));
+}
+
+export { CookieProvider };

package/dist/cookies/readonly-cookie-reader.d.ts

@@ -0,0 +1,2 @@
+import { CookieGetterSetter } from './types';
+export declare function createReadonlyCookieReader(cookies: Record<string, string>): CookieGetterSetter;

package/dist/cookies/readonly-cookie-reader.js

@@ -0,0 +1,18 @@
+import { logger } from '../logging/logger.js';
+
+function set(name, value, _options) {
+    logger.warn('Attempted to set a cookie on a readonly cookie reader', {
+        name,
+        value,
+    });
+}
+function createReadonlyCookieReader(cookies) {
+    function get(name) {
+        if (name)
+            return cookies[name];
+        return cookies;
+    }
+    return { get, set };
+}
+
+export { createReadonlyCookieReader };

package/dist/cookies/types.d.ts

@@ -0,0 +1,14 @@
+export interface CookieAttributes {
+    domain?: string | undefined;
+    expires?: Date | undefined;
+    path?: string | undefined;
+    sameSite?: 'lax' | 'strict' | 'none' | undefined;
+    secure?: boolean | undefined;
+}
+export interface CookieGetterSetter {
+    get(): Record<string, string> | undefined;
+    get(name: string): string | undefined;
+    set(name: string, value: string | undefined, options?: CookieAttributes): void;
+}
+export type CookieContextValue = CookieGetterSetter | Record<string, string>;
+export declare function isCookieGetterSetter(value: CookieContextValue): value is CookieGetterSetter;

package/dist/cookies/types.js

@@ -0,0 +1,7 @@
+function isCookieGetterSetter(value) {
+    return (typeof value.get === 'function' &&
+        typeof value.set === 'function' &&
+        Object.keys(value).length === 2);
+}
+
+export { isCookieGetterSetter };

package/dist/{shared/hooks → cookies}/use-cookie.d.ts

@@ -1,5 +1,4 @@
-import { CookieAttributes } from 'js-cookie';
-export declare const defaultCookieOptions: CookieAttributes;
+import { CookieAttributes } from './types';
 interface SetValueFn {
     (value: string | undefined): void;
     (fn: (value: string | undefined) => string | undefined): void;

package/dist/cookies/use-cookie.js

@@ -0,0 +1,30 @@
+"use client";
+import { useContext, useState } from 'react';
+import { defaultCookieOptions, clientCookieContextValue } from './client-cookie-context.js';
+import { CookieContext } from './cookie-context.js';
+import { createReadonlyCookieReader } from './readonly-cookie-reader.js';
+import { isCookieGetterSetter } from './types.js';
+
+function useCookie(name, options = defaultCookieOptions) {
+    const context = useContext(CookieContext);
+    const Cookies = context
+        ? isCookieGetterSetter(context)
+            ? context
+            : createReadonlyCookieReader(context)
+        : clientCookieContextValue;
+    const cookieValue = Cookies.get()?.[name];
+    const [stateValue, setStateValue] = useState(cookieValue);
+    if (cookieValue !== stateValue) {
+        setStateValue(cookieValue);
+    }
+    function setValue(valueOrFn) {
+        setStateValue(oldValue => {
+            const newValue = typeof valueOrFn === 'function' ? valueOrFn(oldValue) : valueOrFn;
+            Cookies.set(name, newValue, options);
+            return newValue;
+        });
+    }
+    return [stateValue, setValue];
+}
+
+export { useCookie };

package/dist/country-select/hooks/use-countries.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
+import { useCookie } from '../../cookies/use-cookie.js';
 import { isCountryCode, isCultureCode, isLanguageCode } from '../../intl/types.js';
 import { useFetchCountriesWithLanguages } from '../../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
-import { useCookie } from '../../shared/hooks/use-cookie.js';
 import { useSessionStorage } from '../../shared/hooks/use-session-storage.js';
 
 function useCountries({ enabled = true, } = {}) {

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

@@ -38,7 +38,7 @@ function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onC
         logger.error('Error fetching countries and languages:', error);
         return null;
     }
-    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
+    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
                     if (!isDismissable)
                         return;
                     setIsOpen(open);

package/dist/country-selector/use-countries-languages.js

@@ -1,24 +1,16 @@
 "use client";
 import { useEffect } from 'react';
-import { config } from '../config.js';
+import { useCookie } from '../cookies/use-cookie.js';
 import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
 import { updateLocale } from '../shared/api/storefront/services/website-service.js';
-import { useCookie } from '../shared/hooks/use-cookie.js';
 import { useSessionStorage } from '../shared/hooks/use-session-storage.js';
 import { isCountry } from '../shared/model/countries-languages.js';
 
-const cookieOptions = {
-    domain: config.COOKIE_DOMAIN,
-    expires: 365,
-    path: '/',
-    sameSite: 'None',
-    secure: true,
-};
 function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
-    const [currentCountryId] = useCookie('CurrentCountryId', cookieOptions);
+    const [currentCountryId] = useCookie('CurrentCountryId');
     // const [currentLanguageId] = ['be71b608-4876-420a-b1f5-adfe0093a72a'] // useCookie('CurrentLanguageId', cookieOptions)
-    const [currentLanguageId] = useCookie('CurrentLanguageId', cookieOptions);
+    const [currentLanguageId] = useCookie('CurrentLanguageId');
     const hasSessionCountries = Boolean(sessionCountries?.length);
     const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
         enabled: !hasSessionCountries,

package/dist/exports.d.ts

@@ -72,6 +72,12 @@ export * from './collapsables/show-all/show-all';
 export * from './collapsables/unmounter/unmounter';
 export * from './collapsables/unmounter/utils';
 export * from './config';
+export * from './cookies/client-cookie-context';
+export * from './cookies/cookie-context';
+export * from './cookies/cookie-provider';
+export * from './cookies/readonly-cookie-reader';
+export * from './cookies/types';
+export * from './cookies/use-cookie';
 export * from './country-select/country-select';
 export * from './country-select/hooks/use-countries';
 export * from './country-selector/connected-country-selector';
@@ -374,7 +380,6 @@ export * from './shared/ga/google-analytics-provider';
 export * from './shared/ga/types';
 export * from './shared/ga/use-data-layer';
 export * from './shared/hooks/use-breakpoint';
-export * from './shared/hooks/use-cookie';
 export * from './shared/hooks/use-cookiebot';
 export * from './shared/hooks/use-css-link';
 export * from './shared/hooks/use-debounced-callback';

package/dist/header/buttons/account/connected-account-button.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
 import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { AccountIcon } from '../../../navigation/account-icon/account-icon.js';
@@ -12,13 +11,7 @@ function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelec
     const paths = usePaths();
     const t = useFormattedMessage();
     const isAuthenticated = useIsAuthenticated();
-    const _location = useLocation();
-    const href = useMemo(() => 
-    // TODO: Replace with relative URL when migrated away from Umbraco
-    typeof location === 'undefined' ? undefined : location.href, 
-    // Using the location hook to detect url changes, but not using it directly
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_location]);
+    const { href } = useLocation();
     return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: isAuthenticated
             ? paths.ACCOUNT
             : `${paths.SIGN_IN}${href ? `?returnUrl=${encodeURIComponent(href)}` : ''}`, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));

package/dist/index.js

@@ -76,6 +76,12 @@ 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 { clientCookieContextValue, defaultCookieOptions } from './cookies/client-cookie-context.js';
+export { CookieContext } from './cookies/cookie-context.js';
+export { CookieProvider } from './cookies/cookie-provider.js';
+export { createReadonlyCookieReader } from './cookies/readonly-cookie-reader.js';
+export { isCookieGetterSetter } from './cookies/types.js';
+export { useCookie } from './cookies/use-cookie.js';
 export { CountrySelect } from './country-select/country-select.js';
 export { useCountries } from './country-select/hooks/use-countries.js';
 export { ConnectedCountrySelector } from './country-selector/connected-country-selector.js';
@@ -375,7 +381,6 @@ export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAn
 export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
-export { defaultCookieOptions, useCookie } from './shared/hooks/use-cookie.js';
 export { useCookiebot } from './shared/hooks/use-cookiebot.js';
 export { useCSSLink } from './shared/hooks/use-css-link.js';
 export { useDebouncedCallback } from './shared/hooks/use-debounced-callback.js';
@@ -403,7 +408,7 @@ export { isResponsiveImage } from './shared/model/image.js';
 export { CartProvider, useCartEvents } from './shared/providers/cart-provider.js';
 export { FavoriteProvider, useFavorite, useFavoriteProduct } from './shared/providers/favorite-provider.js';
 export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState } from './shared/providers/global-state-provider.js';
-export { ReactQueryContainer } from './shared/providers/react-query-container.js';
+export { ReactQueryContainer, globalQueryClient } from './shared/providers/react-query-container.js';
 export { RouteContext } from './shared/routing/route-context.js';
 export { RouteProvider } from './shared/routing/route-provider.js';
 export { buildHref } from './shared/routing/route-utils.js';

package/dist/media/image-grid/images-grid.d.ts

@@ -1,7 +1,8 @@
 import { ImageType } from '../../shared/model/image';
 interface ImagesGridProps {
+    className?: string;
     images: ImageType[];
     onSelectImage?: (image: ImageType, index: number) => void;
 }
-export declare function ImagesGrid({ images, onSelectImage }: ImagesGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagesGrid({ className, images, onSelectImage, }: ImagesGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/media/image-grid/images-grid.js

@@ -11,7 +11,7 @@ const mainImagePosition = {
     4: 0,
     5: 2,
 };
-function ImagesGrid({ images, onSelectImage }) {
+function ImagesGrid({ className, images, onSelectImage, }) {
     const positionIndex = mainImagePosition[images.length] || 0;
     const imageList = [
         ...images.slice(1, positionIndex + 1),
@@ -24,7 +24,7 @@ function ImagesGrid({ images, onSelectImage }) {
             onSelectImage?.(image, images.indexOf(image));
         }
     }
-    return (jsx("div", { className: styles['images-grid'], "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": `Open image ${index}`, className: clsx(styles['grid-item'], {
+    return (jsx("div", { className: clsx(styles['images-grid'], className), "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": `Open image ${index}`, className: clsx(styles['grid-item'], {
                 [styles.clickable]: Boolean(onSelectImage),
             }), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
 }

package/dist/media/image-lightbox/image-lightbox.d.ts

@@ -1,6 +1,7 @@
 import 'swiper/css';
 import { ImageType } from '../../shared/model/image';
 export interface ImageLightboxProps {
+    className?: string;
     images: ImageType[];
     initialSelectedIndex?: number;
     onZoom?: (args: {
@@ -9,4 +10,4 @@ export interface ImageLightboxProps {
     }) => void;
     variant?: 'sm' | 'lg';
 }
-export declare function ImageLightbox({ images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageLightbox({ className, images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/media/image-lightbox/image-lightbox.js

@@ -10,7 +10,7 @@ import { CarouselPagination } from '../../carousel/pagination/pagination.js';
 import { Image } from '../image/image.js';
 import styles from './image-lightbox.module.css.js';
 
-function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm', }) {
+function ImageLightbox({ className, images, initialSelectedIndex = 0, onZoom, variant = 'sm', }) {
     const [thumbsSwiper, setThumbsSwiper] = useState();
     const [currentIndex, setCurrentIndex] = useState(initialSelectedIndex);
     const nextEl = useRef(null);
@@ -26,7 +26,7 @@ function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm
         const scrollPercentage = clientY / height;
         onZoom?.({ index: currentIndex, scrollPercentage });
     }
-    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (
+    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant], className), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (
                 // eslint-disable-next-line @eslint-react/no-array-index-key
                 jsx(SwiperSlide, { className: styles.slide, children: jsx("div", { className: styles.thumb, children: jsx(Image, { className: styles.image, fit: "contain", height: 80, image: {
                                 1: image['1'],

package/dist/pages/account/components/create-account-form/create-account-form.js

@@ -62,7 +62,7 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
         });
     };
     // form header
-    const header = (jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
+    const header = (jsx(Heading, { "data-test-selector": "pageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
     // form footer
     const footer = (jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "createAccount_createButton", isDisabled: isDisabled, isLoading: isPendingCreateAccount && 'Creating account...', type: "submit", withArrow: true, children: t('create account') }) }));
     return (jsxs(Form, { "aria-label": title, autoComplete: true, className: styles['create-account-form'], errorMessage: errorType && errorMessages[errorType], footer: footer, header: header, onSubmit: handleSubmit, title: title, children: [jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(TextField, { autoComplete: "username", "data-test-selector": "createAccount_email", inputMode: "email", isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", type: "email", validate: value => {

package/dist/pages/account/create-account-page/create-account-page.js

@@ -20,8 +20,10 @@ function CreateAccountPage({ returnUrl } = {}) {
     const { error: errorCreateAccount, isPending: isPendingCreateAccount, isSuccess, mutate: createAccount, } = useCreateAccount();
     const isExistingAccount = errorCreateAccount instanceof ExistingAccountError;
     const isDisabled = isSuccess || isExistingAccount;
-    const continuePath = returnUrl && returnUrl !== paths.ACCOUNT_CREATE ? returnUrl : paths.ACCOUNT;
-    const isReturnToShipping = returnUrl === paths.CHECKOUT_SHIPPING;
+    const continuePath = returnUrl && decodeURIComponent(returnUrl) !== paths.ACCOUNT_CREATE
+        ? decodeURIComponent(returnUrl)
+        : paths.ACCOUNT;
+    const isReturnToShipping = returnUrl && decodeURIComponent(returnUrl) === paths.CHECKOUT_SHIPPING;
     const onSubmit = ({ data }) => {
         createAccount(data, {
             onSuccess() {
@@ -40,7 +42,7 @@ function CreateAccountPage({ returnUrl } = {}) {
         navigate(continuePath, { reload: true });
         return;
     }
-    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "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." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${paths.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, "data-test-selector": "create-account-page", children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "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." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${paths.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
 }
 
 export { CreateAccountPage };

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-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/types.d.ts

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

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

@@ -3,12 +3,12 @@ import qs from 'query-string';
 import { useRouter } from './use-router.js';
 
 function useLocation() {
-    const { url: { basePathname, pathname, search }, } = useRouter();
+    const { url: { basePathname, href, pathname, search }, } = useRouter();
     const query = qs.parse(search || '');
     return {
         basePathname,
         fullPathname: pathname,
-        href: `${pathname}${search}`,
+        href,
         pathname: pathname.replace(new RegExp(`^${basePathname}`), ''),
         query,
         search,

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": "202.0.0",
+  "version": "203.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/shared/hooks/use-cookie.js

@@ -1,34 +0,0 @@
-"use client";
-import { useState } from 'react';
-import Cookies from 'js-cookie';
-import { config } from '../../config.js';
-
-const defaultCookieOptions = {
-    domain: config.COOKIE_DOMAIN,
-    expires: 365,
-    path: '/',
-    sameSite: 'None',
-    secure: true,
-};
-function useCookie(name, options = defaultCookieOptions) {
-    const cookieValue = Cookies.get()?.[name];
-    const [stateValue, setStateValue] = useState(cookieValue);
-    if (cookieValue !== stateValue) {
-        setStateValue(cookieValue);
-    }
-    function setValue(valueOrFn) {
-        setStateValue(oldValue => {
-            const newValue = typeof valueOrFn === 'function' ? valueOrFn(oldValue) : valueOrFn;
-            if (newValue) {
-                Cookies.set(name, newValue, options);
-            }
-            else {
-                Cookies.remove(name);
-            }
-            return newValue;
-        });
-    }
-    return [stateValue, setValue];
-}
-
-export { defaultCookieOptions, useCookie };