@sonic-equipment/ui 167.0.0 → 169.0.0

package/dist/lists/menu-list/menu-list-item.d.ts

@@ -1,26 +1,14 @@
 import { ReactNode } from 'react';
 import { ImageType } from '../../shared/model/image';
-interface MenuListItemPropsBase {
-    children: ReactNode | string;
-    onClick?: VoidFunction;
-}
-interface MenuListItemNoChildrenProps {
-    hasChildren?: false;
-    href: string;
-}
-interface MenuListItemWithChildrenProps {
+export interface MenuListItemProps {
     'aria-controls'?: string;
-    hasChildren: true;
-    isSelected?: boolean;
-}
-interface MenuListItemWithImageProps {
-    badge?: never;
-    image?: ImageType;
-}
-interface MenuListItemWithBadgeProps {
     badge?: ReactNode;
-    image?: never;
+    children: ReactNode | string;
+    hasChildren?: boolean;
+    href?: string;
+    image?: ImageType;
+    isSelected?: boolean;
+    onClick?: VoidFunction;
+    openInNewTab?: boolean;
 }
-export type MenuListItemProps = MenuListItemPropsBase & (MenuListItemNoChildrenProps | MenuListItemWithChildrenProps) & (MenuListItemWithImageProps | MenuListItemWithBadgeProps);
-export declare function MenuListItem(props: MenuListItemProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function MenuListItem({ 'aria-controls': ariaControls, badge, children, hasChildren, href, image, isSelected, onClick, openInNewTab, }: MenuListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/menu-list/menu-list-item.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { GlyphsChevronsSlimRightIcon } from '../../icons/glyph/glyphs-chevrons-slim-right-icon.js';
@@ -6,15 +7,9 @@ import { Image } from '../../media/image/image.js';
 import { RouteLink } from '../../shared/routing/route-link.js';
 import styles from './menu-list.module.css.js';
 
-function MenuListItem(props) {
-    const { children, hasChildren, onClick } = props;
-    const href = 'href' in props ? props.href : undefined;
-    const isSelected = 'isSelected' in props ? props.isSelected : false;
-    const badge = 'badge' in props ? props.badge : undefined;
-    const image = 'image' in props ? props.image : undefined;
-    const ariaControls = 'aria-controls' in props ? props['aria-controls'] : undefined;
+function MenuListItem({ 'aria-controls': ariaControls, badge, children, hasChildren, href, image, isSelected, onClick, openInNewTab, }) {
     const t = useFormattedMessage();
-    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children']), children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(RouteLink, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, children: children }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
+    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children']), children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(RouteLink, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: children }), hasChildren && (jsx(GlyphsChevronsSlimRightIcon, { "aria-description": `(${t('Submenu')})`, className: styles['icon'] }))] }));
 }
 
 export { MenuListItem };

package/dist/lists/menu-list/menu-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { MenuListBackButton } from './menu-list-back-button.js';

package/dist/lists/orderline-list/orderline-list.js

@@ -19,11 +19,11 @@ function OrderLineList({ children, onRemoveAll }) {
             return;
         open();
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsxs("p", { className: styles.count, children: [jsx("span", { "data-test-selector": "orderLineListCount", children: count }), ` ${t.pluralize('product', count)}`] }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: 
+    return (jsxs(Fragment, { children: [jsxs("section", { "aria-labelledby": "orderline-list-count", className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsxs("p", { className: styles.count, id: "orderline-list-count", children: [jsx("span", { "data-test-selector": "orderLineListCount", children: count }), ` ${t.pluralize('product', count)}`] }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], color: "primary", "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("ul", { className: styles.items, children: 
                         // eslint-disable-next-line @eslint-react/no-children-map
                         Children.map(children, (child, index) => (
                         // eslint-disable-next-line @eslint-react/no-array-index-key
-                        jsx("div", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
+                        jsx("li", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
 }
 
 export { OrderLineList };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Modal } from '../../modals/modal/modal.js';
 import { Image } from '../image/image.js';

package/dist/navigation/account-icon/account-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Badge } from '../../badges/badge/badge.js';
 import { IconWithBadge } from '../../badges/badge/icon-with-badge/icon-with-badge.js';

package/dist/navigation/cart-icon/cart-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Badge } from '../../badges/badge/badge.js';
 import { IconWithBadge } from '../../badges/badge/icon-with-badge/icon-with-badge.js';
@@ -6,7 +7,7 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 
 function CartIcon({ 'aria-label': ariaLabel, count }) {
     const t = useFormattedMessage();
-    return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: count && count > 0 ? (jsx(Badge, { "aria-label": count && count > 0 ? `(${t('Number of products')})` : undefined, count: count })) : undefined, "data-test-selector": "cartIconCount", icon: jsx(SolidCartIcon, { role: "presentation" }) }));
+    return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: count && count > 0 ? (jsx(Badge, { "aria-label": count && count > 0 ? `(${t('Number of products')})` : undefined, count: count })) : undefined, "data-test-selector": "cartIcon", icon: jsx(SolidCartIcon, { role: "presentation" }) }));
 }
 
 export { CartIcon };

package/dist/navigation/favorite-icon/favorite-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Badge } from '../../badges/badge/badge.js';
 import { IconWithBadge } from '../../badges/badge/icon-with-badge/icon-with-badge.js';

package/dist/navigation/mobile-navigation/mobile-navigation.d.ts

@@ -1,5 +1,8 @@
-import { NavigationMenuLink } from '../panel-navigation/panel-navigation';
+import { NavigationLink } from '../../shared/api/bff/model/bff.model';
 export interface MobileNavigationProps {
-    links: NavigationMenuLink[];
+    id: string;
+    isActive: boolean;
+    links: NavigationLink[];
+    onActiveChange: (isActive: boolean) => void;
 }
-export declare function MobileNavigation({ links }: MobileNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileNavigation({ id, isActive, links, onActiveChange, }: MobileNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/mobile-navigation/mobile-navigation.js

@@ -1,4 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { HamburgerButton } from '../../header/buttons/hamburger/hamburger-button.js';
+import { SonicLogo } from '../../header/sonic-logo/sonic-logo.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { MenuList } from '../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../lists/menu-list/menu-list-item.js';
@@ -9,12 +13,13 @@ import { AccountIcon } from '../account-icon/account-icon.js';
 import { CartIcon } from '../cart-icon/cart-icon.js';
 import { FavoriteIcon } from '../favorite-icon/favorite-icon.js';
 import { PanelNavigation } from '../panel-navigation/panel-navigation.js';
+import styles from './mobile-navigation.module.css.js';
 
-function MobileNavigation({ links }) {
+function MobileNavigation({ id, isActive, links, onActiveChange, }) {
     const t = useFormattedMessage();
     const { data: { isAuthenticated } = {} } = useFetchSession();
     const cartCount = useFetchCurrentCartCount();
-    return (jsx(PanelNavigation, { allowBack: true, isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), href: PATHS.ACCOUNT, children: isAuthenticated ? t('My account') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), href: PATHS.CART, children: t('Shopping cart') })] }) }));
+    return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], isNarrow: true, links: links, variant: "primary", children: jsxs(MenuList, { header: t('My Sonic'), scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), href: PATHS.ACCOUNT, children: isAuthenticated ? t('My account') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), href: PATHS.CART, children: t('Shopping cart') })] }) })] }));
 }
 
 export { MobileNavigation };

package/dist/navigation/mobile-navigation/mobile-navigation.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"mobile-navigation":"mobile-navigation-module-rMdS-","header":"mobile-navigation-module-XKb3-","active":"mobile-navigation-module-P0kLz","logo":"mobile-navigation-module-keQoj","hamburger":"mobile-navigation-module-3Z-Sl","panels":"mobile-navigation-module-zDR9Q"};
+
+export { styles as default };

package/dist/navigation/panel-navigation/panel-navigation.d.ts

@@ -1,17 +1,5 @@
 import { ReactNode } from 'react';
-import { ImageType } from '../../shared/model/image';
-import { NavigationLink } from '../../shared/model/link';
-interface NavigationMenuLinkBase extends Omit<NavigationLink, 'external' | 'openInNewTab' | 'type' | 'url' | 'links'> {
-    image?: ImageType;
-}
-interface MenuListItemWithChildrenProps {
-    links: NavigationMenuLink[];
-    url?: string;
-}
-interface MenuListItemWithoutChildrenProps {
-    url: string;
-}
-export type NavigationMenuLink = NavigationMenuLinkBase & (MenuListItemWithChildrenProps | MenuListItemWithoutChildrenProps);
+import { NavigationLink } from '../../shared/api/bff/model/bff.model';
 export interface PanelNavigationProps {
     allowBack?: boolean;
     children?: ReactNode;
@@ -20,9 +8,9 @@ export interface PanelNavigationProps {
         href: string;
         title: string;
     };
+    id?: string;
     isNarrow?: boolean;
-    links?: NavigationMenuLink[];
+    links?: NavigationLink[];
     variant?: 'primary';
 }
-export declare function PanelNavigation({ allowBack, children, className, header, isNarrow, links, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function PanelNavigation({ allowBack, children, className, header, id, isNarrow, links, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/panel-navigation/panel-navigation.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
@@ -36,9 +37,9 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
         setSelectedNavigationVisible(Boolean(selectedNavigationLink));
     }, [selectedNavigationLink]);
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: links?.map(link => 'links' in link ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: links?.map(link => link.links && link.links.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
                                 ? undefined
-                                : link), children: link.title }, link.key)) : (jsx(MenuListItem, { href: link.url, image: link.image, children: link.title }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
+                                : link), children: link.title }, link.key)) : (jsx(MenuListItem, { href: link.url, image: link.image, openInNewTab: link.openInNewTab, children: link.title }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: onFocus(menuRef), onUnmounted: onUnmounted, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
                         ? {
                             onClick: () => {
                                 setSelectedNavigationVisible(false);
@@ -61,9 +62,8 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
                         : [] }, selectedNavigationLink?.key) })] }));
 });
 NavigationMenu.displayName = 'NavigationMenu';
-function PanelNavigation({ allowBack, children, className, header, isNarrow, links, variant, }) {
-    const t = useFormattedMessage();
-    return (jsx("section", { "aria-label": t('Navigation'), className: clsx(styles['panel-navigation'], className), children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, links: links, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
+function PanelNavigation({ allowBack, children, className, header, id, isNarrow, links, variant, }) {
+    return (jsx("section", { className: clsx(styles['panel-navigation'], className), id: id, children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, links: links, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));
 }
 
 export { PanelNavigation };

package/dist/notifications/announcements/announcement-list.d.ts

@@ -0,0 +1,7 @@
+import { AnnouncementObject } from '../../shared/model/announcement';
+export declare function AnnouncementList({ announcements, className, onDismiss, sticky, }: {
+    announcements: AnnouncementObject[];
+    className?: string;
+    onDismiss?: (id: string) => void;
+    sticky?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { useResizeObserver } from '../../shared/hooks/use-resize-observer.js';
+import { Announcement } from './announcement.js';
+import { useFilterAnnouncements } from './use-filter-announcements.js';
+import styles from './announcement-list.module.css.js';
+
+function AnnouncementList({ announcements, className, onDismiss, sticky, }) {
+    const filteredAnnouncements = useFilterAnnouncements(announcements);
+    const nodeRef = useRef(null);
+    const { ref: announcementRef } = useResizeObserver((_, size) => {
+        const height = Math.floor(size.height);
+        document?.documentElement.style.setProperty('--announcements-height', `${height}px`);
+    });
+    return (jsx("section", { ref: announcementRef, className: clsx(styles['announcement-list'], sticky && styles['sticky'], className), children: jsx(TransitionGroup, { className: styles['list'], role: "list", children: filteredAnnouncements.map(announcement => (jsx(CSSTransition, { classNames: {
+                    enter: styles['enter'],
+                    enterActive: styles['enter-active'],
+                    exit: styles['exit'],
+                    exitActive: styles['exit-active'],
+                }, nodeRef: nodeRef, timeout: 250, children: jsx(Announcement, { ref: nodeRef, announcement: announcement, className: styles['list-item'], onDismiss: onDismiss }) }, announcement.id))) }) }));
+}
+
+export { AnnouncementList };

package/dist/notifications/announcements/announcement-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"announcement-list":"announcement-list-module-Nn6HC","sticky":"announcement-list-module-icXq8","list":"announcement-list-module-cgFNU","list-item":"announcement-list-module-fUupi","enter":"announcement-list-module-W10mi","exit":"announcement-list-module-tyqE0","exit-active":"announcement-list-module-dUOEB","enter-active":"announcement-list-module-1Rfn0"};
+
+export { styles as default };

package/dist/notifications/announcements/announcement.d.ts

@@ -1,6 +1,7 @@
 import { AnnouncementObject } from '../../shared/model/announcement';
 export interface AnnouncementProps {
     announcement: AnnouncementObject;
+    className?: string;
     onDismiss?: (id: string) => void;
 }
-export declare function Announcement({ announcement: { href, id, subType, text, title, type }, onDismiss, }: AnnouncementProps): import("react/jsx-runtime").JSX.Element;
+export declare const Announcement: React.ForwardRefExoticComponent<AnnouncementProps & React.RefAttributes<HTMLDivElement>>;

package/dist/notifications/announcements/announcement.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
 import { GlyphsArrowSemiBoldRightIcon } from '../../icons/glyph/glyphs-arrow-semibold-right-icon.js';
@@ -12,6 +13,7 @@ import { SolidSaleIcon } from '../../icons/solid/solid-sale-icon.js';
 import { SolidTagIcon } from '../../icons/solid/solid-tag-icon.js';
 import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
 import { RouteLink } from '../../shared/routing/route-link.js';
+import { multiRef } from '../../shared/utils/refs.js';
 import styles from './announcement.module.css.js';
 
 const iconMap = {
@@ -23,8 +25,10 @@ const iconMap = {
     notice: jsx(SolidNoticeIcon, {}),
     sales: jsx(SolidSaleIcon, {}),
 };
-function Announcement({ announcement: { href, id, subType, text, title, type }, onDismiss, }) {
-    return (jsxs(RouteLink, { className: clsx(styles.announcement, { [styles.hover]: Boolean(href) }, styles[type], styles[subType]), href: href, children: [jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), jsxs("p", { className: styles.text, children: [text, href && jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
-}
+const Announcement = forwardRef(({ announcement: { href, id, subType, text, title, type }, className, onDismiss, }, ref) => {
+    return (jsx("div", { ref: multiRef(ref), className: clsx(styles.announcement, styles[type], styles[subType], className), role: "listitem", children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.icon, role: "presentation", children: iconMap[subType] }), jsxs("div", { className: styles.content, children: [jsx("h2", { className: styles.title, children: title }), text &&
+                            (href ? (jsxs(RouteLink, { className: styles.link, href: href, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })) : (jsx("p", { className: styles.text, children: text })))] }), jsx(IconButton, { className: styles.close, color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) })] }) }));
+});
+Announcement.displayName = 'Announcement';
 
 export { Announcement };

package/dist/notifications/announcements/announcement.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","hover":"announcement-module-Fj5ya","promo":"announcement-module-E6DqW"};
+var styles = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","link":"announcement-module--Bhqj","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
 
 export { styles as default };

package/dist/notifications/announcements/connected-announcement-list.d.ts

@@ -0,0 +1,3 @@
+export declare function ConnectedAnnouncementList({ className, }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/notifications/announcements/connected-announcement-list.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+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 { AnnouncementList } from './announcement-list.js';
+
+function ConnectedAnnouncementList({ className, }) {
+    const cultureCode = useCultureCode();
+    const { data: announcements, error } = useFetchAnnouncements({
+        cultureCode,
+    });
+    useLogError(error);
+    const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
+    const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
+    if (!filteredAnnouncements)
+        return null;
+    return (jsx(AnnouncementList, { announcements: filteredAnnouncements, className: className, onDismiss: id => setDismissedIds(dismissedIds => [...dismissedIds, id]), sticky: true }));
+}
+
+export { ConnectedAnnouncementList };

package/dist/notifications/announcements/use-filter-announcements.d.ts

@@ -0,0 +1,2 @@
+import { AnnouncementObject } from '../../shared/model/announcement';
+export declare function useFilterAnnouncements(announcements: AnnouncementObject[]): AnnouncementObject[];

package/dist/notifications/announcements/use-filter-announcements.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useCallback, useEffect } from 'react';
+import { TIME } from '../../shared/utils/time.js';
+
+const now = () => new Date();
+const filterAnnouncement = (announcement) => {
+    const { endDate, startDate } = announcement;
+    const isVisible = (!startDate || startDate <= now()) && (!endDate || endDate > now());
+    return isVisible;
+};
+const arraysEqual = (a, b) => {
+    if (a.length !== b.length)
+        return false;
+    return a.every((val, index) => val === b[index]);
+};
+function useFilterAnnouncements(announcements) {
+    const [filteredAnnouncements, setFilteredAnnouncements] = useState(announcements.filter(filterAnnouncement));
+    const updateAnnouncements = useCallback(() => {
+        const newFilteredAnnouncements = announcements.filter(filterAnnouncement);
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setFilteredAnnouncements(filteredAnnouncements => arraysEqual(filteredAnnouncements, newFilteredAnnouncements)
+            ? filteredAnnouncements
+            : newFilteredAnnouncements);
+    }, [announcements]);
+    useEffect(() => {
+        updateAnnouncements();
+    }, [announcements, updateAnnouncements]);
+    useEffect(() => {
+        const intervalId = setInterval(updateAnnouncements, 1 * TIME.MINUTE);
+        return () => clearInterval(intervalId);
+    }, [updateAnnouncements]);
+    return filteredAnnouncements;
+}
+
+export { useFilterAnnouncements };

package/dist/observers/intersection-observer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { useIntersectionObserver } from '../shared/hooks/use-intersection-observer.js';

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

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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { RecoverPasswordDialog } from '../../../modals/recover-password/recover-password-dialog.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { ConnectedOrderLineCard } from '../../../cards/orderline-card/connected-orderline-card.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
@@ -80,7 +81,7 @@ function CartContent({ cartLines }) {
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
     return (jsx(CheckoutPageLayout, { actions: {
-            primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+            primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Start checkout" }) })),
             secondary: (jsx(RouteButton, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: isAuthenticated ? undefined : PATHS.SIGN_IN, onClick: () => {
                     if (!isAuthenticated)
                         return;

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

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

package/dist/pages/checkout/components/billing-and-invoice-information.js

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

package/dist/pages/checkout/layouts/checkout-page-layout/checkout-page-layout.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
 import clsx from 'clsx';
@@ -11,7 +12,7 @@ function CheckoutPageLayout({ actions, children, mobileSummary, overview, }) {
     const isXXL = useIsBreakpoint('xxl');
     const topRef = useRef(null);
     const bottomRef = useRef(null);
-    const headerHeight = useWatchCssProperty('--header-height');
+    const headerHeight = useWatchCssProperty('--header-bottom');
     const isScrolledBeyond = useIsScrolledBeyondElement(bottomRef.current || undefined);
     const observables = useMemo(() => [
         {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PrintButton } from '../../../buttons/print-button/print-button.js';
 import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { LoadingPage } from '../../loading-page/loading-page.js';

package/dist/pages/checkout/payment-page/components/adyen-payment.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import AdyenCheckout from '@adyen/adyen-web';

package/dist/pages/checkout/payment-page/components/payment.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { Form } from 'react-aria-components';

package/dist/pages/checkout/payment-page/payment-page-content.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
 import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
@@ -27,7 +28,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                 label: t('Review and payment'),
             },
         ], "data-test-selector": "paymentPage", title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidatingVAT ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidatingVAT ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: cart.paymentMethod?.name === 'PBI' ? (jsx(FormattedMessage, { id: "Finalize order" })) : (jsx(FormattedMessage, { id: "Finalize payment" })) })),
             }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
                     cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, isProcessing: isProcessing, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidatingVAT: setIsValidatingVAT }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                                     fit: 'contain',

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect } from 'react';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';

package/dist/pages/checkout/shipping-page/components/currency-change-dialog.js

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

package/dist/pages/checkout/shipping-page/components/edit-address-form.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Form } from 'react-aria-components';

package/dist/pages/checkout/shipping-page/components/readonly-address.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Form } from 'react-aria-components';
 import { AddressInfoDisplay } from '../../../../address-info-display/address-info-display.js';

package/dist/pages/checkout/shipping-page/components/sonic-address.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import styles from './sonic-address.module.css.js';

package/dist/pages/checkout/shipping-page/shipping-page-content.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
@@ -31,7 +32,7 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
                 label: t('Shipping details'),
             },
         ], "data-test-selector": "shippingPage", title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Checkout order" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: cart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
                     ? cart.fulfillmentMethod
                     : undefined, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress && !isGuest ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { useCountries } from '../../../country-select/hooks/use-countries.js';

package/dist/pages/components/page-meta-data/page-meta-data.js

@@ -1,3 +1,5 @@
+import { environment } from '../../../shared/utils/environment.js';
+
 function addOrUpdateElement(selector, { attributes, tag, }) {
     const existingElement = document?.querySelector(selector);
     if (existingElement) {
@@ -19,6 +21,8 @@ function removeElements(selector) {
     document?.querySelectorAll(selector).forEach(element => element.remove());
 }
 function PageMetaData(props) {
+    if (environment === 'next')
+        return null;
     if (typeof document === 'undefined')
         return null;
     if (props.windowTitle) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ConnectedAddToCartButton } from '../../../../../buttons/add-to-cart-button/connected-add-to-cart-button.js';
 import { ConnectedFavoriteButton } from '../../../../../buttons/favorite/connected-favorite-button.js';

package/dist/shared/api/bff/hooks/use-fetch-navigation-links.d.ts

@@ -0,0 +1,2 @@
+import { FetchNavigationLinksArgs } from '../services/bff-service';
+export declare function useFetchNavigationLinks({ cultureCode, source, }: FetchNavigationLinksArgs): import("@tanstack/react-query").UseQueryResult<import("../model/bff.model").NavigationLinkResponse, Error>;

package/dist/shared/api/bff/hooks/use-fetch-navigation-links.js

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { TIME } from '../../../utils/time.js';
+import { fetchNavigationLinks } from '../services/bff-service.js';
+
+function useFetchNavigationLinks({ cultureCode, source, }) {
+    return useQuery({
+        gcTime: 1 * TIME.DAY,
+        queryFn: () => fetchNavigationLinks({ cultureCode, source }),
+        queryKey: ['navigation', source, cultureCode],
+        refetchInterval: 5 * TIME.MINUTE,
+        staleTime: 1 * TIME.DAY,
+    });
+}
+
+export { useFetchNavigationLinks };