@sonic-equipment/ui 135.0.0 → 137.0.0

package/dist/algolia/algolia-initialization.js

@@ -2,6 +2,7 @@
 import { config } from '../config.js';
 import Cookies from 'js-cookie';
 import aa from 'search-insights';
+import { logger } from '../logging/logger.js';
 import { request } from '../shared/fetch/request.js';
 import { createUUID } from '../shared/utils/uuid.js';
 
@@ -14,7 +15,7 @@ aa('init', {
 });
 aa('getUserToken', {}, (err, value) => {
     if (err)
-        return console.error(err);
+        return logger.error(err);
     userToken = value === undefined ? generateUserToken() : String(value);
 });
 aa('onUserTokenChange', value => {

package/dist/algolia/algolia-insights-provider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { useCultureCode } from '../intl/use-culture-code.js';
 import { getLanguageCodeFromCultureCode } from '../intl/utils.js';
 import { environment } from '../shared/utils/environment.js';
@@ -13,12 +13,12 @@ function AlgoliaInsightsProvider({ children, value, }) {
     const algoliaIndex = getAlgoliaIndex(environment, getLanguageCodeFromCultureCode(cultureCode));
     const [globalState] = useAlgoliaInsightsGlobalState();
     const context = useContext(AlgoliaInsightsProviderContext);
-    const combinedValue = {
+    const combinedValue = useMemo(() => ({
         index: algoliaIndex.default,
         ...globalState,
         ...context,
         ...value,
-    };
+    }), [algoliaIndex.default, context, globalState, value]);
     return (jsx(AlgoliaInsightsProviderContext.Provider, { value: combinedValue, children: children }));
 }
 

package/dist/algolia/algolia-searchclient-offline.js

@@ -1,11 +1,12 @@
 "use client";
+import { logger } from '../logging/logger.js';
+
 const searchClientLogger = (searchClient) => {
     return {
         ...searchClient,
         search: (async (queries, requestOptions) => {
             const response = await searchClient.search(queries, requestOptions);
-            // eslint-disable-next-line no-console
-            console.log('Algolia::SearchClient::search', {
+            logger.info('Algolia::SearchClient::search', {
                 args: { queries, requestOptions },
                 response,
             });

package/dist/algolia/use-algolia-insights.js

@@ -1,6 +1,7 @@
 "use client";
 import { useContext, useMemo } from 'react';
 import aa from 'search-insights';
+import { logger } from '../logging/logger.js';
 import { currencySymbolToISO } from '../shared/model/currency.js';
 import { ensureArray } from '../shared/utils/array.js';
 import { userToken } from './algolia-initialization.js';
@@ -18,7 +19,7 @@ function useAlgoliaInsights() {
         context,
         sendAddToCartFromProductDetailsPageEvent({ cartLine }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (context.queryId) {
                 aa('addedToCartObjectIDsAfterSearch', {
                     currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
@@ -55,9 +56,9 @@ function useAlgoliaInsights() {
         },
         sendAddToCartFromProductListPageEvent({ cartLine }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('addedToCartObjectIDsAfterSearch', {
                 currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
                 eventName: 'PLP: AddToCart ClickedAfterSearch',
@@ -76,7 +77,7 @@ function useAlgoliaInsights() {
         },
         sendAddToCartFromSearchEvent({ cartLine, queryId }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('addedToCartObjectIDsAfterSearch', {
                 currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
                 eventName: 'SRP: AddToCart ClickedAfterSearch',
@@ -95,9 +96,9 @@ function useAlgoliaInsights() {
         },
         sendAddToCartFromSearchResultPageEvent({ cartLine }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('addedToCartObjectIDsAfterSearch', {
                 currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
                 eventName: 'SRP: AddToCart ClickedAfterSearch',
@@ -116,10 +117,10 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromProductDetailsPageEvent({ objectId, position }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (context.queryId) {
                 if (!position)
-                    return console.warn('Unable to send clickedObjectIDsAfterSearch event, no position', context, objectId);
+                    return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no position', context, objectId);
                 aa('clickedObjectIDsAfterSearch', {
                     eventName: 'PDP: Product Added to Wishlist',
                     index: context.index,
@@ -140,9 +141,9 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromProductListPageEvent({ objectId, position }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'PLP: Product Added to Wishlist',
                 index: context.index,
@@ -154,7 +155,7 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromSearchEvent({ objectId, position, queryId }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Added to Wishlist',
                 index: context.index,
@@ -166,9 +167,9 @@ function useAlgoliaInsights() {
         },
         sendAddToWishListFromSearchResultPageEvent({ objectId, position, }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Added to Wishlist',
                 index: context.index,
@@ -180,11 +181,11 @@ function useAlgoliaInsights() {
         },
         sendProductClickFromProductListPageEvent({ objectId, position }) {
             if (!objectId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'PLP: Product Clicked',
                 index: context.index,
@@ -200,9 +201,9 @@ function useAlgoliaInsights() {
         },
         sendProductClickFromSearchEvent({ objectId, position, queryId }) {
             if (!objectId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Clicked',
                 index: context.index,
@@ -218,11 +219,11 @@ function useAlgoliaInsights() {
         },
         sendProductClickFromSearchResultPageEvent({ objectId, position }) {
             if (!objectId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!context.queryId)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
             aa('clickedObjectIDsAfterSearch', {
                 eventName: 'SRP: Product Clicked',
                 index: context.index,
@@ -238,9 +239,9 @@ function useAlgoliaInsights() {
         },
         sendPurchaseEventFromPaymentPage({ cart }) {
             if (!context.index)
-                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+                return logger.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
             if (!cart.cartLines || cart.cartLines.length === 0)
-                return console.warn('Unable to send purchasedObjectIDs event, no cartLines', cart);
+                return logger.warn('Unable to send purchasedObjectIDs event, no cartLines', cart);
             aa('purchasedObjectIDs', {
                 currency: currencySymbolToISO[cart.currencySymbol],
                 eventName: 'Purchase Successful',

package/dist/buttons/link/link.d.ts

@@ -2,8 +2,9 @@ import { AnchorHTMLAttributes } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     areaSelected?: boolean;
     color?: 'primary' | 'secondary';
+    currentColor?: boolean;
     hasUnderline?: boolean;
     isDisabled?: boolean;
     role?: 'option';
 }
-export declare function Link({ children, className, color, hasUnderline, isDisabled, onClick, onKeyUp, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, className, color, currentColor, hasUnderline, isDisabled, onClick, onKeyUp, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link/link.js

@@ -3,11 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './link.module.css.js';
 
-function Link({ children, className, color = 'primary', hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
+function Link({ children, className, color = 'primary', currentColor, hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
     return (jsx("a", { className: clsx({
             [styles.hover]: Boolean(props.href),
             [styles['has-underline']]: hasUnderline && props.href,
-        }, styles['link'], styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
+            [styles[color]]: !currentColor,
+            [styles['current-color']]: currentColor,
+        }, styles['link'], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
 }
 
 export { Link };

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type BorderType = 'top' | 'middle' | 'middle-accentuated' | 'bottom';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    allowCollapse?: boolean;
     allowToggle?: boolean;
     borderType?: BorderType | BorderType[];
     children: ReactNode;
@@ -12,4 +13,4 @@ export interface AccordionItemProps {
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import clsx from 'clsx';
 import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
 import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
@@ -7,16 +8,24 @@ import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { ensureArray } from '../../shared/utils/array.js';
 import styles from './accordion.module.css.js';
 
-function AccordionItem({ _pseudo = 'none', allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
-    const { isOpen, toggle } = useDisclosure(initialIsOpen);
+function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+    const { close, isOpen, open, toggle } = useDisclosure(initialIsOpen);
+    useEffect(() => {
+        if (initialIsOpen) {
+            open();
+        }
+        else {
+            close();
+        }
+    }, [close, initialIsOpen, open]);
     const panelId = `panel-${id}`;
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], {
             [styles['is-open']]: isOpen,
             [styles['allow-toggle']]: allowToggle,
-        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
+        }), children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
                         if (allowToggle)
                             toggle();
-                    }, 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 }) })] }));
+                    }, 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 }) })] }));
 }
 
 export { AccordionItem };

package/dist/config.js

@@ -13,8 +13,8 @@ const configPerEnvironment = {
     local: () => ({
         ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
-        ALGOLIA_HOST: 'shop-accept.sonic-equipment.workers.dev',
-        BFF_API_URL: 'https://shop-accept.sonic-equipment.workers.dev/api/v1/bff',
+        ALGOLIA_HOST: 'sonic.local.com:4443',
+        BFF_API_URL: '/api/v1/bff',
         COOKIE_DOMAIN: undefined,
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/dist/country-selector/country-select/country-select.d.ts

@@ -8,14 +8,20 @@ interface CountrySelectProps<T extends Country | CountryModel> {
     name?: string;
     showLabel?: boolean;
 }
+interface CountrySelectPropsWithDefaultSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
+    defaultSelectedCountry: T;
+    onCountryChange?: (country: T) => void;
+}
 interface CountrySelectPropsWithSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
     onCountryChange?: (country: T) => void;
     selectedCountry: T;
 }
 interface CountrySelectPropsWithoutSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
+    defaultSelectedCountry?: T | undefined;
     onCountryChange?: (country: T | undefined) => void;
     selectedCountry?: T | undefined;
 }
+export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithDefaultSelectedCountry<T>): JSX.Element;
 export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithSelectedCountry<T>): JSX.Element;
 export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithoutSelectedCountry<T>): JSX.Element;
 export {};

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

@@ -3,15 +3,21 @@ import { useMemo } from 'react';
 import { Select } from '../../forms/select/select.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 
-function CountrySelect({ countries, 'data-test-selector': dataTestSelector, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
+function CountrySelect({ countries, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
     const t = useFormattedMessage();
-    const countryOptions = useMemo(() => countries.reduce((acc, country) => ({
+    const countryOptions = useMemo(() => countries
+        .map((country) => [
+        country.id,
+        t(`clSelector.${country.abbreviation}`),
+    ])
+        .sort(([, labelA], [, labelB]) => labelA.localeCompare(labelB))
+        .reduce((acc, [id, label]) => ({
         ...acc,
-        [country.id]: t(`clSelector.${country.abbreviation}`),
+        [id]: label,
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(Select, { "data-test-selector": dataTestSelector, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(Select, { "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
 }
 
 export { CountrySelect };

package/dist/exports.d.ts

@@ -73,6 +73,7 @@ export * from './display/product-sku/product-sku';
 export * from './filters/active-filters/active-filters';
 export * from './filters/multi-select/multi-select';
 export * from './filters/pagination/pagination';
+export * from './footer/footer';
 export * from './forms/checkbox/checkbox';
 export * from './forms/color-checkbox/color-checkbox';
 export * from './forms/field-error/field-error';
@@ -109,6 +110,7 @@ export * from './global-search/search-section/search-section';
 export * from './global-search/types';
 export * from './header/cart-icon/connected-cart-icon';
 export * from './header/hamburger-button/hamburger-button';
+export * from './header/header';
 export * from './header/header-layout/header-layout';
 export * from './header/sonic-logo/sonic-logo';
 export * from './info-icon-tooltip/info-icon-tooltip';
@@ -130,6 +132,8 @@ export * from './lists/ul/list';
 export * from './loading/blank-page-spacer';
 export * from './loading/loading-overlay';
 export * from './loading/progress-circle';
+export * from './logging/logger';
+export * from './logging/use-log-error';
 export * from './media/image-grid/images-grid';
 export * from './media/image-lightbox/image-lightbox';
 export * from './media/image/image';
@@ -290,6 +294,7 @@ export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';
 export * from './shared/utils/date';
+export * from './shared/utils/debug';
 export * from './shared/utils/environment';
 export * from './shared/utils/event-emitter';
 export * from './shared/utils/merge';

package/dist/footer/footer.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { FooterLink, LinkBlock } from './footer.model';
+export interface FooterProps {
+    bottomLinks: FooterLink[];
+    copyright: string;
+    countrySelector: ReactNode;
+    linkBlocks: LinkBlock[];
+}
+export declare function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/footer/footer.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Accordion } from '../collapsables/accordion/accordion.js';
+import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
+import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
+import { RouteLink } from '../shared/routing/route-link.js';
+import styles from './footer.module.css.js';
+
+function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }) {
+    const isXl = useIsBreakpoint('xl');
+    return (jsxs("footer", { className: styles.footer, children: [jsx("div", { className: styles['main-links'], children: linkBlocks.map(linkBlock => (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${linkBlock.key}`, initialIsOpen: isXl, title: linkBlock.header, children: jsx("ul", { className: styles['list'], children: linkBlock.links.map(link => (jsx("li", { children: jsx(RouteLink, { currentColor: true, href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }) }, link.key))) }) }) }) }, linkBlock.key))) }), jsxs("div", { className: styles['bottom-section'], children: [jsx("p", { className: styles.copyright, children: copyright }), jsx("div", { className: styles['bottom-links'], children: bottomLinks.map(link => (jsx(RouteLink, { className: styles['bottom-link'], currentColor: true, href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) }), countrySelector] })] }));
+}
+
+export { Footer };

package/dist/footer/footer.model.d.ts

@@ -0,0 +1,18 @@
+export interface FooterLink {
+    externalLink?: string;
+    internalLink?: string;
+    isButton: boolean;
+    key: string;
+    openInNewTab: boolean;
+    title?: string;
+}
+export interface LinkBlock {
+    header: string;
+    key: string;
+    links: FooterLink[];
+}
+export interface FooterModel {
+    bottomLinks: FooterLink[];
+    copyright: string;
+    linkBlocks: LinkBlock[];
+}

package/dist/footer/footer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"footer":"footer-module-YzJ68","main-links":"footer-module-rFBXC","link-block":"footer-module-P5FXP","link-block-heading":"footer-module-umuTh","list":"footer-module-FM4hU","bottom-section":"footer-module-TZq-4","copyright":"footer-module-qlHSS","bottom-links":"footer-module-5eyFH","bottom-link":"footer-module-0gJpF"};
+
+export { styles as default };

package/dist/header/header.d.ts

@@ -0,0 +1 @@
+export declare function Header(): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { HeaderLayout } from './header-layout/header-layout.js';
+import { SonicLogo } from './sonic-logo/sonic-logo.js';
+
+function Header() {
+    return (jsx(HeaderLayout, { hamburgerButton: null, logo: jsx(SonicLogo, { href: "/" }), mainNavigation: null, navigationActions: null, search: null }));
+}
+
+export { Header };

package/dist/index.js

@@ -78,6 +78,7 @@ export { ProductSku } from './display/product-sku/product-sku.js';
 export { ActiveFilters } from './filters/active-filters/active-filters.js';
 export { MultiSelect } from './filters/multi-select/multi-select.js';
 export { Pagination } from './filters/pagination/pagination.js';
+export { Footer } from './footer/footer.js';
 export { Checkbox } from './forms/checkbox/checkbox.js';
 export { ColorCheckbox } from './forms/color-checkbox/color-checkbox.js';
 export { FieldError } from './forms/field-error/field-error.js';
@@ -113,6 +114,7 @@ export { SearchListItem } from './global-search/search-section/search-list-item.
 export { SearchSection } from './global-search/search-section/search-section.js';
 export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
 export { HamburgerButton } from './header/hamburger-button/hamburger-button.js';
+export { Header } from './header/header.js';
 export { HeaderLayout } from './header/header-layout/header-layout.js';
 export { SonicLogo } from './header/sonic-logo/sonic-logo.js';
 export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';
@@ -133,6 +135,8 @@ export { List, ListItem } from './lists/ul/list.js';
 export { BlankPageSpacer } from './loading/blank-page-spacer.js';
 export { LoadingOverlay } from './loading/loading-overlay.js';
 export { ProgressCircle } from './loading/progress-circle.js';
+export { consoleLogger, initLogger, logger } from './logging/logger.js';
+export { useLogError } from './logging/use-log-error.js';
 export { ImagesGrid } from './media/image-grid/images-grid.js';
 export { ImageLightbox } from './media/image-lightbox/image-lightbox.js';
 export { Image } from './media/image/image.js';
@@ -290,6 +294,7 @@ export { withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';
 export { convertDateUnitToPluralOrSingle, formatDateToLocaleString, getDateUnitObject } from './shared/utils/date.js';
+export { trackPropertyChange } from './shared/utils/debug.js';
 export { environment, environments } from './shared/utils/environment.js';
 export { EventEmitter } from './shared/utils/event-emitter.js';
 export { clone, deepMerge, isPlainObject, default as main, merge } from './shared/utils/merge.js';

package/dist/intl/utils.js

@@ -1,3 +1,4 @@
+import { logger } from '../logging/logger.js';
 import { isLanguageCode } from './types.js';
 
 function getLanguageCodeFromCultureCode(cultureCode) {
@@ -21,7 +22,7 @@ function spireTranslateAdapter(translate) {
             }, [])
             : []));
         if (optional && message === undefined)
-            console.warn(`Missing translation with id: ${id}`);
+            logger.warn(`Missing translation with id: ${id}`);
         return message || fallbackValue || id;
     };
 }

package/dist/logging/logger.d.ts

@@ -0,0 +1,11 @@
+export interface Logger {
+    debug(message: unknown, ...args: unknown[]): void;
+    error(message: unknown, error: unknown): void;
+    error(message: unknown, error: unknown, ...args: unknown[]): void;
+    error(error: unknown): void;
+    info(message: unknown, ...args: unknown[]): void;
+    warn(message: unknown, ...args: unknown[]): void;
+}
+export declare const consoleLogger: Logger;
+export declare let logger: Logger;
+export declare function initLogger(replacementLogger: Logger): Logger;

package/dist/logging/logger.js

@@ -0,0 +1,22 @@
+const consoleLogger = {
+    debug(...args) {
+        // eslint-disable-next-line no-console
+        return console.debug('⚡️', ...args);
+    },
+    error(...args) {
+        return console.error('❌', ...args);
+    },
+    info(...args) {
+        // eslint-disable-next-line no-console
+        return console.log('✅', ...args);
+    },
+    warn(...args) {
+        return console.warn('⚠️', ...args);
+    },
+};
+let logger = consoleLogger;
+function initLogger(replacementLogger) {
+    return (logger = replacementLogger);
+}
+
+export { consoleLogger, initLogger, logger };

package/dist/logging/use-log-error.d.ts

@@ -0,0 +1 @@
+export declare function useLogError(error?: unknown): void;

package/dist/logging/use-log-error.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { logger } from './logger.js';
+
+function useLogError(error) {
+    return useEffect(() => {
+        if (!error)
+            return;
+        logger.error(error);
+    }, [error]);
+}
+
+export { useLogError };

package/dist/media/image/image.js

@@ -25,12 +25,19 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
     }
     return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
 }
+function createSrcSet(image) {
+    return ([
+        image[1] && `${image[1]} 1x`,
+        image[2] && `${image[2]} 2x`,
+        image[3] && `${image[3]} 3x`,
+    ]
+        .filter(Boolean)
+        .join(', ') || undefined);
+}
 function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
     if (!image)
         return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
-    const srcSet = hasError
-        ? undefined
-        : `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`;
+    const srcSet = hasError ? undefined : createSrcSet(image);
     return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
             [styles['has-error']]: hasError,
         }), src: hasError ? fallbackSrc : image[3], srcSet: srcSet, ...rest }));
@@ -38,7 +45,7 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
     if (!image)
         return (jsx("picture", { className: clsx(styles.picture, className), children: jsx("img", { alt: "Missing", className: clsx(styles.image, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }) }));
-    return (jsxs("picture", { className: clsx(styles.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
+    return (jsxs("picture", { className: clsx(styles.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: createSrcSet(image.sm) }), jsx("source", { media: "(max-width: 1439px)", srcSet: createSrcSet(image.md) }), jsx("source", { media: "(min-width: 1440px)", srcSet: createSrcSet(image.lg) }), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
                     [styles['has-error']]: hasError,
                 }), src: hasError ? fallbackSrc : image.lg[3], ...rest })] }));
 }

package/dist/notifications/announcements/announcement-provider.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { useCultureCode } from '../../intl/use-culture-code.js';
+import { useLogError } from '../../logging/use-log-error.js';
 import { useFetchAnnouncements } from '../../shared/api/bff/hooks/use-fetch-announcements.js';
 import { useLocalStorage } from '../../shared/hooks/use-local-storage.js';
 import { ConnectedAnnouncement } from './connected-announcement.js';
@@ -14,11 +15,7 @@ function AnnouncementProvider() {
     const { data: announcements, error } = useFetchAnnouncements({
         cultureCode,
     });
-    useEffect(() => {
-        if (!error)
-            return;
-        console.error(error);
-    }, [error]);
+    useLogError(error);
     const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
     const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
     return (jsx(TransitionGroup, { className: styles['announcement-provider'], children: filteredAnnouncements?.map(announcement => (jsx(CSSTransition, { classNames: {

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

@@ -39,7 +39,13 @@ function OrderConfirmationPageContent({ cart, }) {
             });
         },
     });
-    return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
+    return (jsx(Page, { breadCrumb: [
+            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+            {
+                href: `${CHECKOUT_PATHS.ORDER_CONFIRMATION}?cartId=${cart.id}`,
+                label: t('Order confirmation'),
+            },
+        ], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
                 primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });