@sonic-equipment/ui 166.0.0 → 168.0.0

package/dist/algolia/algolia-sonic-searchclient.d.ts

@@ -1,5 +1,6 @@
-export declare const createSonicSearchClient: ({ apiKey, appId, host, }: {
+export declare const createSonicSearchClient: ({ apiKey, appId, host, protocol, }: {
     apiKey: string;
     appId: string;
     host: string | undefined;
+    protocol?: string;
 }) => import("algoliasearch").SearchClient;

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

@@ -1,7 +1,7 @@
 "use client";
 import algoliasearch from 'algoliasearch';
 
-const createSonicSearchClient = ({ apiKey, appId, host, }) => {
+const createSonicSearchClient = ({ apiKey, appId, host, protocol = 'https', }) => {
     const searchClient = algoliasearch(appId, apiKey);
     if (!host) {
         return searchClient;
@@ -9,7 +9,7 @@ const createSonicSearchClient = ({ apiKey, appId, host, }) => {
     const read = searchClient.transporter.read;
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    searchClient.transporter.hosts = [{ accept: 1, protocol: 'https', url: host }];
+    searchClient.transporter.hosts = [{ accept: 1, protocol, url: host }];
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     searchClient.transporter.timeouts = { connect: 3000, read: 3000, write: 3000 };

package/dist/background-overlay/background-overlay-manager.js

@@ -45,6 +45,9 @@ class BackgroundOverlayManager {
      * @private
      */
     static _removeElement() {
+        if (document) {
+            document.documentElement.style.overflow = 'unset';
+        }
         BackgroundOverlayManager._element?.classList.remove('visible');
     }
     /**
@@ -93,6 +96,9 @@ class BackgroundOverlayManager {
             return this._removeElement();
         BackgroundOverlayManager._getElement().style.zIndex =
             String(currentOverlayZindex);
+        if (document) {
+            document.documentElement.style.overflow = 'hidden';
+        }
         BackgroundOverlayManager._getElement().classList.add('visible');
     }
     /**

package/dist/background-overlay/background-overlay.d.ts

@@ -1,5 +1,5 @@
 import './background-overlay.module.css';
-type Position = 'in-front' | 'behind-header';
+type Position = 'in-front' | 'behind-header' | 'behind-announcement';
 interface BackgroundOverlayProps {
     /** Whether the overlay is open or not. */
     isOpen: boolean;

package/dist/base.css

@@ -1,4 +1,62 @@
-@import url('./spire-styles.css');
+/*  Spire default CSS below that needs to be countered in components for the timebeing 
+    This CSS can be removed when Spire is dropped. This CSS is not included within Spire context
+    and only serves as a simulation of Spire styling in Storybook.
+    shared/reset.module.css contains reset styles that overwrite this Spire CSS */
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  background: #fff;
+  color: #000;
+  font-size: 16px;
+  font-weight: 400;
+  -webkit-hyphens: auto;
+          hyphens: auto;
+  line-height: 1.5;
+}
+
+* {
+  font-weight: normal;
+}
+
+span,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+button:focus {
+  outline: none !important;
+  outline-width: 0 !important;
+}
+
+a:focus {
+  outline: none !important;
+  outline-width: 0 !important;
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  opacity: 1;
+}
+
+input[type='password'] {
+  font-family: 'Verdana', sans-serif !important;
+  font-size: 20px !important;
+}
 
 /*********************************************************
   *

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

@@ -14,4 +14,4 @@ export interface LinkProps {
     target?: string;
     title?: string;
 }
-export declare function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;

package/dist/buttons/link/link.js

@@ -1,19 +1,21 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 import styles from './link.module.css.js';
 
-function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }) {
+const Link = forwardRef(({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }, ref) => {
     if (href) {
-        return (jsx("a", { className: clsx({
+        return (jsx("a", { ref: ref, className: clsx({
                 [styles.hover]: Boolean(href || onClick),
                 [styles['has-underline']]: hasUnderline,
             }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
     }
-    return (jsx("button", { className: clsx({
+    return (jsx("button", { ref: ref, className: clsx({
             [styles.hover]: Boolean(href || onClick),
             [styles['has-underline']]: hasUnderline,
         }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
-}
+});
+Link.displayName = 'Link';
 
 export { Link };

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

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

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

@@ -21,11 +21,12 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
     const panelId = `panel-${id}`;
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
             [styles['is-open']]: isOpen,
-            [styles['allow-toggle']]: allowToggle,
+            [styles['allow-collapse']]: allowCollapse,
+            [styles['allow-toggle']]: allowCollapse && allowToggle,
         }), "data-test-selector": dataTestSelector, 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("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("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/collapsables/cascading-component/cascading-component-container-context.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 
 const CascadingComponentContainerContext = createContext(null);

package/dist/collapsables/cascading-component/cascading-component-container-provider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
 import { voidFunction } from '../../shared/model/defaults.js';

package/dist/collapsables/cascading-component/cascading-component-container.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
 

package/dist/collapsables/cascading-component/cascading-component.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect, useCallback } from 'react';
 import { CSSTransition } from 'react-transition-group';

package/dist/collapsables/unmounter/unmounter.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useEffect, useMemo, useContext } from 'react';
 

package/dist/config.js

@@ -4,11 +4,6 @@ import main from './shared/utils/merge.js';
 const env = (typeof process === 'undefined'
     ? { VITE_SHOP_API_URL: ""}
     : main({ ...process.env }, { VITE_SHOP_API_URL: ""}));
-const validateEnvVariable = (name, value) => {
-    if (value)
-        return value;
-    throw new Error(`${name} is not defined`);
-};
 const configPerEnvironment = {
     local: () => ({
         ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
@@ -31,12 +26,18 @@ const configPerEnvironment = {
         env?.VITE_SHOP_API_URL || 'https://localhost:8000',
     }),
     next: () => ({
-        ALGOLIA_API_KEY: validateEnvVariable('ALGOLIA_API_KEY', env.ALGOLIA_API_KEY),
-        ALGOLIA_APP_ID: validateEnvVariable('ALGOLIA_APP_ID', env.ALGOLIA_APP_ID),
-        ALGOLIA_HOST: validateEnvVariable('ALGOLIA_HOST', env.ALGOLIA_HOST),
-        BFF_API_URL: validateEnvVariable('BFF_API_URL', env.BFF_API_URL),
-        COOKIE_DOMAIN: validateEnvVariable('COOKIE_DOMAIN', env.COOKIE_DOMAIN),
-        SHOP_API_URL: validateEnvVariable('SHOP_API_URL', env.SHOP_API_URL),
+        // @ts-expect-error: process is not defined in the browser
+        ALGOLIA_API_KEY: process.env.ALGOLIA_API_KEY || '',
+        // @ts-expect-error: process is not defined in the browser
+        ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
+        // @ts-expect-error: process is not defined in the browser
+        ALGOLIA_HOST: process.env.ALGOLIA_HOST || '',
+        // @ts-expect-error: process is not defined in the browser
+        BFF_API_URL: process.env.BFF_API_URL || '',
+        // @ts-expect-error: process is not defined in the browser
+        COOKIE_DOMAIN: process.env.COOKIE_DOMAIN || '',
+        // @ts-expect-error: process is not defined in the browser
+        SHOP_API_URL: process.env.SHOP_API_URL || '',
     }),
     production: () => ({
         ALGOLIA_API_KEY: 'e31a3a53449eceb4d0f9273b9bcd9759',

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { SelectField } from '../forms/select-field/select-field.js';

package/dist/display/price/price.js

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

package/dist/drawer/drawer.d.ts

@@ -18,9 +18,10 @@ export interface DrawerProps {
     isInitialOpen?: boolean;
     isOpen?: boolean;
     onClose?: VoidFunction;
+    onClosed?: VoidFunction;
     position: 'top' | 'bottom' | 'left' | 'right';
     showBackgroundOverlay?: boolean;
-    showUnderHeader?: boolean;
+    showUnder?: 'header' | 'announcement';
     timeout?: number;
 }
-export declare function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen, isOpen: isOpenControlled, onClose, position, showBackgroundOverlay, showUnderHeader, timeout, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen, isOpen: isOpenControlled, onClose, onClosed, position, showBackgroundOverlay, showUnder, timeout, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/drawer/drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -7,7 +8,7 @@ import { createAddEndListener } from '../collapsables/unmounter/utils.js';
 import { useDrawer } from './use-drawer.js';
 import styles from './drawer.module.css.js';
 
-function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen = false, isOpen: isOpenControlled, onClose, position, showBackgroundOverlay, showUnderHeader = false, timeout, }) {
+function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, instanceId, isInitialOpen = false, isOpen: isOpenControlled, onClose, onClosed, position, showBackgroundOverlay, showUnder, timeout, }) {
     const wasOpenRef = useRef(isInitialOpen);
     const asideRef = useRef(null);
     const useDrawerResult = useDrawer({
@@ -22,7 +23,14 @@ function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, ins
             onClose?.();
         wasOpenRef.current = isOpen;
     }, [instanceId, isOpen, onClose]);
-    return (jsxs(Fragment, { children: [jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, addEndListener: createAddEndListener(asideRef), in: isOpen, nodeRef: asideRef, timeout: timeout, children: jsx("aside", { ref: asideRef, className: clsx(styles.drawer, styles[position], showUnderHeader && styles['under-header'], className), children: children instanceof Function ? children(useDrawerResult) : children }, `${groupId}-${instanceId}`) }, groupId), showBackgroundOverlay && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: () => {
+    useEffect(() => {
+        return close;
+    }, [close]);
+    useEffect(() => {
+        return onClosed;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxs(Fragment, { children: [jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, addEndListener: createAddEndListener(asideRef), in: isOpen, nodeRef: asideRef, onExited: onClosed, timeout: timeout, children: jsx("aside", { ref: asideRef, className: clsx(styles.drawer, styles[position], showUnder === 'header' && styles['under-header'], showUnder === 'announcement' && styles['under-announcement'], className), children: children instanceof Function ? children(useDrawerResult) : children }, `${groupId}-${instanceId}`) }, groupId), showBackgroundOverlay && (jsx(BackgroundOverlay, { isOpen: isOpen, onClick: () => {
                     if (!allowCloseOnBackgroundClick)
                         return;
                     if (isControlled) {
@@ -31,7 +39,11 @@ function Drawer({ allowCloseOnBackgroundClick, children, className, groupId, ins
                     else {
                         close();
                     }
-                }, position: showUnderHeader ? 'behind-header' : 'in-front' }))] }));
+                }, position: showUnder === 'header'
+                    ? 'behind-header'
+                    : showUnder === 'announcement'
+                        ? 'behind-announcement'
+                        : 'in-front' }))] }));
 }
 
 export { Drawer };

package/dist/drawer/drawer.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"drawer":"drawer-module-5ARuA","left":"drawer-module-yjFdX","right":"drawer-module-bZLBV","top":"drawer-module-KiviE","bottom":"drawer-module-p-PYu","under-header":"drawer-module-0jRBQ"};
+var styles = {"drawer":"drawer-module-5ARuA","left":"drawer-module-yjFdX","right":"drawer-module-bZLBV","top":"drawer-module-KiviE","bottom":"drawer-module-p-PYu","under-announcement":"drawer-module-0ZHVw","under-header":"drawer-module-0jRBQ"};
 
 export { styles as default };

package/dist/drawer/use-drawer.js

@@ -12,18 +12,13 @@ function useDrawer({ groupId: _groupId, instanceId: _instanceId, isInitialOpen,
     useEffect(() => {
         if (isInitialOpen || isOpen)
             setOpenInstanceId(instanceId);
-        return () => {
-            if (isOpen) {
-                setOpenInstanceId(undefined);
-            }
-        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
         if (isOpenControlled) {
             setOpenInstanceId(instanceId);
         }
-        else if (openInstanceId === instanceId) {
+        else if (isOpenControlled === false && openInstanceId === instanceId) {
             setOpenInstanceId(undefined);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/exports.d.ts

@@ -86,6 +86,7 @@ export * from './drawer/use-drawer';
 export * from './filters/active-filters/active-filters';
 export * from './filters/multi-select/multi-select';
 export * from './filters/pagination/pagination';
+export * from './footer/connected-footer';
 export * from './footer/footer';
 export * from './forms/checkbox-field/checkbox-field';
 export * from './forms/checkbox/checkbox';
@@ -129,8 +130,15 @@ export * from './global-search/search-section/search-list';
 export * from './global-search/search-section/search-list-item';
 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/buttons/account/connected-account-button';
+export * from './header/buttons/cart/connected-cart-button';
+export * from './header/buttons/favorites/connected-favorites-button';
+export * from './header/buttons/hamburger/hamburger-button';
+export * from './header/buttons/search/search-button';
+export * from './header/connected-header';
+export * from './header/drawers/desktop-navigation-drawer';
+export * from './header/drawers/mobile-navigation-drawer';
+export * from './header/drawers/search-drawer';
 export * from './header/header';
 export * from './header/header-layout/header-layout';
 export * from './header/link-list/navigation-link-list';
@@ -181,8 +189,9 @@ export * from './navigation/favorite-icon/favorite-icon';
 export * from './navigation/mobile-navigation/mobile-navigation';
 export * from './navigation/panel-navigation/panel-navigation';
 export * from './notifications/announcements/announcement';
-export * from './notifications/announcements/announcement-provider';
-export * from './notifications/announcements/connected-announcement';
+export * from './notifications/announcements/announcement-list';
+export * from './notifications/announcements/connected-announcement-list';
+export * from './notifications/announcements/use-filter-announcements';
 export * from './observers/intersection-observer';
 export * from './pages/account/components/create-account-form/create-account-form';
 export * from './pages/account/components/sign-in-form/sign-in-form';
@@ -242,6 +251,7 @@ export * from './promos/promo-banner/promo-banner';
 export * from './promos/promo-banners/promo-banners';
 export * from './promos/promo-card/promo-card';
 export * from './shared/api/bff/hooks/use-fetch-announcements';
+export * from './shared/api/bff/hooks/use-fetch-navigation-links';
 export * from './shared/api/bff/hooks/use-fetch-product-details-page-data';
 export * from './shared/api/bff/hooks/use-fetch-product-listing-page-data';
 export * from './shared/api/bff/services/bff-service';
@@ -318,6 +328,7 @@ export * from './shared/hooks/use-global-disclosure';
 export * from './shared/hooks/use-intersection-observer';
 export * from './shared/hooks/use-is-breakpoint';
 export * from './shared/hooks/use-is-scrolled-beyond-element';
+export * from './shared/hooks/use-mutation-observer';
 export * from './shared/hooks/use-resize-observer';
 export * from './shared/hooks/use-script';
 export * from './shared/hooks/use-scroll-lock';
@@ -333,7 +344,6 @@ export * from './shared/model/currency';
 export * from './shared/model/defaults';
 export * from './shared/model/hit';
 export * from './shared/model/image';
-export * from './shared/model/link';
 export * from './shared/model/price';
 export * from './shared/providers/cart-provider';
 export * from './shared/providers/favorite-provider';

package/dist/footer/connected-footer.d.ts

@@ -0,0 +1,4 @@
+import { NavigationLinkSource } from '../shared/api/bff/services/bff-service';
+export declare function ConnectedFooter({ source }: {
+    source: NavigationLinkSource;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/footer/connected-footer.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { ConnectedCountrySelector } from '../country-selector/connected-country-selector.js';
+import { useCultureCode } from '../intl/use-culture-code.js';
+import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
+import { Footer } from './footer.js';
+
+function ConnectedFooter({ source }) {
+    const cultureCode = useCultureCode();
+    const { data } = useFetchNavigationLinks({ cultureCode, source });
+    return (jsx(Footer, { bottomLinks: data?.footer.bottomLinks || [], copyright: data?.footer.copyright || '', countrySelector: jsx(ConnectedCountrySelector, { defaultCountryCode: "NL", defaultLanguageCode: "EN" }), linkBlocks: data?.footer.linkBlocks || [] }));
+}
+
+export { ConnectedFooter };

package/dist/footer/footer.d.ts

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

package/dist/footer/footer.js

@@ -2,13 +2,34 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Accordion } from '../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
+import { logger } from '../logging/logger.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, }) {
+function BottomSection({ bottomLinks, copyright, countrySelector, }) {
+    return (jsxs("div", { className: styles['bottom-section'], children: [copyright && jsx("p", { className: styles.copyright, children: copyright }), bottomLinks.length > 0 && (jsx("div", { className: styles['bottom-links'], children: bottomLinks.map(link => (jsx(RouteLink, { className: styles['bottom-link'], href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) })), countrySelector] }));
+}
+function LinkSection({ link }) {
     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, { 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'], href: link.externalLink || link.internalLink, target: link.openInNewTab ? '_blank' : undefined, children: link.title }, link.key))) }), countrySelector] })] }));
+    return (jsx("div", { className: styles['link-block'], children: jsx(Accordion, { color: "white", hasLineSeparator: false, size: "lg", children: jsx(AccordionItem, { allowCollapse: !isXl, id: `link-block-${link.key}`, initialIsOpen: isXl, title: link.title, children: jsx("ul", { className: styles['list'], children: link.links?.map(link => jsx(Link, { link: link }, link.key)) }) }) }) }, link.key));
+}
+function Link({ link }) {
+    const type = link.type;
+    if (type === 'link' || type === 'category') {
+        return (jsx(RouteLink, { href: link.url, target: link.openInNewTab ? '_blank' : undefined, children: link.title }));
+    }
+    if (type === 'section') {
+        return jsx(LinkSection, { link: link });
+    }
+    logger.warn(`Unknown link type '${type}' in footer with key '${link.key}'`);
+    return null;
+}
+function FooterLinkBlock({ linkBlocks }) {
+    return (jsx("div", { className: styles['main-links'], children: linkBlocks.map(link => (jsx(Link, { link: link }, link.key))) }));
+}
+function Footer({ bottomLinks, copyright, countrySelector, linkBlocks, }) {
+    return (jsxs("footer", { className: styles.footer, children: [jsx(FooterLinkBlock, { linkBlocks: linkBlocks }), jsx(BottomSection, { bottomLinks: bottomLinks, copyright: copyright, countrySelector: countrySelector })] }));
 }
 
 export { Footer };

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

@@ -1,18 +1,6 @@
-export interface FooterLink {
-    externalLink?: string;
-    internalLink?: string;
-    isButton: boolean;
-    key: string;
-    openInNewTab: boolean;
-    title?: string;
-}
-export interface LinkBlock {
-    header: string;
-    key: string;
-    links: FooterLink[];
-}
+import { NavigationLink } from '../shared/api/bff/model/bff.model';
 export interface FooterModel {
-    bottomLinks: FooterLink[];
+    bottomLinks: NavigationLink[];
     copyright: string;
-    linkBlocks: LinkBlock[];
+    linkBlocks: NavigationLink[];
 }

package/dist/forms/form/form.js

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

package/dist/forms/text-field/password-reveal-toggle/password-reveal-toggle.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Checkbox } from 'react-aria-components';
 import { StrokeDehashedIcon } from '../../../icons/stroke/stroke-dehashed-icon.js';

package/dist/global-search/global-search-provider/global-search-provider.d.ts

@@ -1,10 +1,4 @@
 import { SearchClient } from 'algoliasearch';
-export declare const GlobalSearchDisclosureContext: React.Context<{
-    close: VoidFunction;
-    isOpen: boolean;
-    open: VoidFunction;
-    toggle: VoidFunction;
-} | null>;
 export declare function GlobalSearchProvider({ children, searchClient, }: {
     children: React.ReactNode;
     searchClient: SearchClient;

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

@@ -1,15 +1,9 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { AlgoliaSearchProvider } from '../../algolia/algolia-search-provider.js';
-import { BackgroundOverlay } from '../../background-overlay/background-overlay.js';
-import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 
-const GlobalSearchDisclosureContext = createContext(null);
 function GlobalSearchProvider({ children, searchClient, }) {
-    const { close, isOpen, open, toggle } = useDisclosure(false);
-    const value = useMemo(() => ({ close, isOpen, open, toggle }), [close, isOpen, open, toggle]);
-    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: value, children: [children, jsx(BackgroundOverlay, { isOpen: isOpen, onClick: close, position: "behind-header" })] }) }));
+    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: children }));
 }
 
-export { GlobalSearchDisclosureContext, GlobalSearchProvider };
+export { GlobalSearchProvider };

package/dist/global-search/global-search-provider/use-search-disclosure.d.ts

@@ -1,6 +1 @@
-export declare const useGlobalSearchDisclosure: () => {
-    close: VoidFunction;
-    isOpen: boolean;
-    open: VoidFunction;
-    toggle: VoidFunction;
-};
+export declare const useGlobalSearchDisclosure: () => import("../../drawer/use-drawer").UseDrawerReturnType;

package/dist/global-search/global-search-provider/use-search-disclosure.js

@@ -1,13 +1,9 @@
 "use client";
-import { useContext } from 'react';
-import { GlobalSearchDisclosureContext } from './global-search-provider.js';
+import { useDrawer } from '../../drawer/use-drawer.js';
 
-const useGlobalSearchDisclosure = () => {
-    const context = useContext(GlobalSearchDisclosureContext);
-    if (!context) {
-        throw new Error('useGlobalSearchDisclosure must be used within a GlobalSearchDisclosureProvider');
-    }
-    return context;
-};
+const useGlobalSearchDisclosure = () => useDrawer({
+    groupId: 'drawers-header',
+    instanceId: 'global-search',
+});
 
 export { useGlobalSearchDisclosure };

package/dist/global-search/global-search.d.ts

@@ -7,4 +7,6 @@ export declare function SearchRoot(): import("react/jsx-runtime").JSX.Element;
  * uses the autocomplete widgets
  * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
  */
-export declare function GlobalSearch(): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalSearch({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect, useRef } from 'react';
-import { Transition, TransitionGroup } from 'react-transition-group';
+import { useEffect } from 'react';
+import { Transition } from 'react-transition-group';
 import clsx from 'clsx';
 import { useAlgoliaSearch } from '../algolia/use-algolia-search.js';
+import { Drawer } from '../drawer/drawer.js';
 import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
 import { useGlobalSearchDisclosure } from './global-search-provider/use-search-disclosure.js';
 import { ConnectedSearchInput } from './search-input/connected-search-input.js';
@@ -33,11 +34,11 @@ function SearchRoot() {
  * uses the autocomplete widgets
  * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
  */
-function GlobalSearch() {
-    const panelRef = useRef(null);
-    const { close, isOpen } = useGlobalSearchDisclosure();
+// TODO: this is used in Header V1; header V2 only embeds a SearchRoot instance (perhaps use a more descriptive name)
+function GlobalSearch({ className }) {
+    const { close, groupId, instanceId } = useGlobalSearchDisclosure();
     useOnNavigate(close);
-    return (jsx(TransitionGroup, { children: jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: jsx("div", { className: styles['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: (className), groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
 }
 
 export { GlobalSearch, SearchRoot };