@sonic-equipment/ui 201.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/buttons/button/button.js

@@ -27,8 +27,7 @@ const Button = forwardRef(({ _pseudo = 'none', 'aria-label': ariaLabel, children
     const children = (jsxs(Fragment, { children: [showIconOnLeft && iconElement, jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? _children : isLoading) : _children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }));
     if (href) {
         // TODO: only button currently supports ref for now
-        const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, type: type, ...getRouteLinkProps(href, route), children: children }));
+        return (jsx(RouteLinkElement, { "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, type: type, ...getRouteLinkProps(href, route), children: children }));
     }
     return (jsx("button", { ref: ref, "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, form: form, formNoValidate: isValidating ? undefined : true, name: name, onClick: handleButtonClick, type: type, value: value, children: children }));
 });

package/dist/buttons/icon-button/icon-button.js

@@ -13,8 +13,7 @@ function IconButton({ children, className: _className, color = 'primary', 'data-
     };
     const className = clsx(styles['icon-button'], styles[size], styles[color], _className);
     if (href) {
-        const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        return (jsx(RouteLinkElement, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
     }
     return (jsx("button", { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: handleButtonClick, title: title, type: type, ...rest, children: children }));
 }

package/dist/buttons/link/link.js

@@ -12,8 +12,7 @@ const Link = forwardRef(({ children, className: _className, color, hasUnderline,
         [styles['has-underline']]: hasUnderline,
     }, styles['link'], color && styles[color], _className);
     if (href) {
-        const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
     }
     return (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 });

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';
@@ -404,6 +409,7 @@ export * from './shared/providers/cart-provider';
 export * from './shared/providers/favorite-provider';
 export * from './shared/providers/global-state-provider';
 export * from './shared/providers/react-query-container';
+export * from './shared/routing/route-context';
 export * from './shared/routing/route-provider';
 export * from './shared/routing/route-utils';
 export * from './shared/routing/types';
@@ -413,6 +419,7 @@ export * from './shared/routing/use-on-navigate';
 export * from './shared/routing/use-paths';
 export * from './shared/routing/use-route-link';
 export * from './shared/routing/use-route-link-element';
+export * from './shared/routing/use-router';
 export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';

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,8 @@ 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';
 export { useLocation } from './shared/routing/use-location.js';
@@ -412,7 +418,8 @@ export { useOnNavigate } from './shared/routing/use-on-navigate.js';
 export { usePaths } from './shared/routing/use-paths.js';
 export { useRouteLink } from './shared/routing/use-route-link.js';
 export { useRouteLinkElement } from './shared/routing/use-route-link-element.js';
-export { withRouting } from './shared/routing/with-routing.js';
+export { useRouter } from './shared/routing/use-router.js';
+export { FallbackRouteLink, withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';
 export { getCssPropertyValue } from './shared/utils/css.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 };