@sonic-equipment/ui 202.0.0 → 204.0.0

package/dist/address-info-display/address-info-display.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import styles from './address-info-display.module.css.js';
 

package/dist/algolia/filter-section.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Accordion } from '../collapsables/accordion/accordion.js';

package/dist/badges/badge/icon-with-badge/icon-with-badge.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './icon-with-badge.module.css.js';
 

package/dist/badges/tag/tag.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './tag.module.css.js';
 

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/cards/data-card/data-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
 import clsx from 'clsx';

package/dist/cards/orderline-card/orderline-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Tag } from '../../badges/tag/tag.js';

package/dist/carousel/category-carousel/category-carousel.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Carousel } from '../carousel.js';
 import styles from './category-carousel.module.css.js';

package/dist/carousel/usp-carousel/product-usp-carousel-slide.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Image } from '../../media/image/image.js';
 import { Heading } from '../../typography/heading/heading.js';

package/dist/carousel/usp-carousel/product-usp-carousel.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { ProductUsp } from './product-usp-carousel-slide.js';
 import { USPCarousel } from './usp-carousel.js';

package/dist/cart-totals/cart-totals-summary.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { FormattedMessage } from '../intl/formatted-message.js';

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.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Children, cloneElement } from 'react';
 import clsx from 'clsx';

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,8 @@
+"use client";
 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/display/info-display/info-display.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './info-display.module.css.js';
 

package/dist/display/product-sku/product-sku.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './product-sku.module.css.js';

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/forms/layout/form/form-segment-group.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './form-segment-group.module.css.js';

package/dist/forms/layout/form/form-segment.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './form-segment.module.css.js';

package/dist/forms/partials/password-validation/password-validation.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect } from 'react';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';

package/dist/global-search/plugins/categories-plugin.js

@@ -1,3 +1,4 @@
+"use client";
 import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
 
 const categoriesPlugin = ({ productsIndexName, searchClient, }) => {

package/dist/global-search/plugins/popular-categories-plugin.js

@@ -1,3 +1,4 @@
+"use client";
 import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
 
 const popularCategoriesPlugin = ({ productsIndexName, searchClient, }) => {

package/dist/global-search/plugins/popular-searches-plugin.js

@@ -1,3 +1,4 @@
+"use client";
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 
 const popularSearchesPlugin = ({ searchClient, suggestionsIndexName, }) => createQuerySuggestionsPlugin({

package/dist/global-search/plugins/query-suggestions-plugin.js

@@ -1,3 +1,4 @@
+"use client";
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 
 const querySuggestionsPlugin = ({ searchClient, suggestionsIndexName, }) => createQuerySuggestionsPlugin({

package/dist/global-search/plugins/quick-access-plugin.js

@@ -1,3 +1,4 @@
+"use client";
 import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
 
 const quickAccessPlugin = ({ productsIndexName, searchClient, }) => {

package/dist/global-search/plugins/recent-searches-plugin.js

@@ -1,3 +1,4 @@
+"use client";
 import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
 
 const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({

package/dist/global-search/search-highlight/highlight.js

@@ -1,3 +1,4 @@
+"use client";
 import { createElement, Fragment } from 'react';
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 

package/dist/global-search/search-result-panel/sections/section-container.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import styles from './search-content.module.css.js';
 

package/dist/global-search/search-section/search-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './search-list.module.css.js';

package/dist/global-search/search-section/search-section.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './search-section.module.css.js';

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/header/drawers/search-drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Drawer } from '../../drawer/drawer.js';
 import { SearchRoot } from '../../global-search/global-search.js';

package/dist/header/header-layout/header-layout.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './header-layout.module.css.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsArrowBlackCapsRightIcon(props) {

package/dist/icons/glyph/glyphs-arrow-boldcaps-left-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsArrowBoldCapsLeftIcon(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsArrowBoldCapsRightIcon(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsArrowSemiBoldRightIcon(props) {