@phillips/seldon 1.177.0 → 1.178.0

package/dist/components/Navigation/NavigationList/NavigationList.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as f } from "react/jsx-runtime";
+import o from "../../../node_modules/classnames/index.js";
 import * as a from "react";
 import { px as n } from "../../../utils/index.js";
-import o from "../../../node_modules/classnames/index.js";
 import { TextVariants as d } from "../../Text/types.js";
 import u from "../../Text/Text.js";
 const g = a.forwardRef(

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+export type NotificationBannerProps = ComponentProps<'div'> & {
+    /**
+     * The content to display inside the notification banner.
+     */
+    children: React.ReactNode;
+};
+/**
+ * ## Overview
+ *
+ * The `NotificationBanner` component displays a prominent message at the top of the page or section to inform users about important information, updates, or alerts. It is designed to be highly visible and can contain any custom content passed as children. Use this component to draw attention to critical messages that require user awareness.
+ *
+ * [Figma Link](https://www.figma.com/design/qEd5aXjQeiboeJ8GJMOJba/Global-Notification-Banner?node-id=1-1899&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-notificationbanner--overview)
+ */
+declare const NotificationBanner: import('react').ForwardRefExoticComponent<Omit<NotificationBannerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default NotificationBanner;

package/dist/components/NotificationBanner/NotificationBanner.js

@@ -0,0 +1,12 @@
+import { jsx as s } from "react/jsx-runtime";
+import e from "../../node_modules/classnames/index.js";
+import { forwardRef as c } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+const l = c(({ className: a, ...o }, i) => {
+  const { className: m, ...n } = f(o, "NotificationBanner"), { children: r, id: t } = o;
+  return /* @__PURE__ */ s("div", { ...n, ...o, className: e(m, a), ref: i, id: t, children: r });
+});
+l.displayName = "NotificationBanner";
+export {
+  l as default
+};

package/dist/components/NotificationBanner/NotificationBanner.stories.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { AuthState } from '../../patterns/UserManagement/types';
+import { HeaderProps } from '../../site-furniture/Header/Header';
+import { NotificationBannerProps } from './NotificationBanner';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<NotificationBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: NotificationBannerProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+    argTypes: {};
+};
+export declare const WithHeader: ({ authState, ...props }: HeaderProps & {
+    authState?: AuthState;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NotificationBanner/NotificationBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NotificationBanner/index.d.ts

@@ -0,0 +1 @@
+export { default as NotificationBanner, type NotificationBannerProps } from './NotificationBanner';

package/dist/index.d.ts

@@ -78,10 +78,13 @@ export * from './components/AddToCalendar';
 export * from './components/Article';
 export * from './components/Countdown';
 export * from './components/Countdown/types';
+export * from './components/DescriptiveRadioButton';
+export * from './components/DescriptiveRadioButtonGroup';
 export * from './components/Divider';
 export * from './components/FavoritingTileButton';
 export * from './components/Filter';
 export * from './components/Icon';
+export * from './components/NotificationBanner';
 export * from './components/Pictogram';
 export * from './components/TextArea';
 export * from './components/Toast';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as c, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
-import { SSRMediaQuery as P, ssrMediaQueryStyle as B } from "./providers/SeldonProvider/utils.js";
+import { SSRMediaQuery as B, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as A } from "./utils/hooks.js";
 import { AuctionStatus as V, LotStatus as b, SupportedLanguages as y } from "./types/commonTypes.js";
 import { default as v } from "./components/Button/Button.js";
@@ -27,7 +27,7 @@ import { default as ie } from "./components/Detail/Detail.js";
 import { default as ne } from "./components/Drawer/Drawer.js";
 import { default as ge } from "./components/Dropdown/Dropdown.js";
 import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as Pe } from "./components/Grid/Grid.js";
+import { default as Be } from "./components/Grid/Grid.js";
 import { default as Ie } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as Le } from "./components/GridItem/types.js";
 import { default as be } from "./components/Input/Input.js";
@@ -53,7 +53,7 @@ import { default as pt } from "./components/Tabs/TabsContent.js";
 import { Tag as it, default as xt } from "./components/Tags/Tags.js";
 import { TextAlignments as ct, TextVariants as gt } from "./components/Text/types.js";
 import { default as Ct } from "./components/Text/Text.js";
-import { TextSymbolVariants as Pt } from "./components/TextSymbol/types.js";
+import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.js";
 import { default as It } from "./components/TextSymbol/TextSymbol.js";
 import { default as Lt } from "./components/Video/Video.js";
 import { default as bt } from "./patterns/DetailList/DetailList.js";
@@ -79,7 +79,7 @@ import { default as uo } from "./components/PageContentWrapper/PageContentWrappe
 import { default as xo } from "./components/PhoneNumberPicker/PhoneNumberPicker.js";
 import { default as co } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as So, FilterButtonType as Co } from "./patterns/FiltersInline/types.js";
-import { default as Po } from "./patterns/SaleCard/SaleCard.js";
+import { default as Bo } from "./patterns/SaleCard/SaleCard.js";
 import { SaleCardActions as Io } from "./patterns/SaleCard/SaleCardActions.js";
 import { SaleCardVariants as Lo } from "./patterns/SaleCard/types.js";
 import { default as bo } from "./patterns/ViewingDetails/ViewingDetails.js";
@@ -90,39 +90,40 @@ import { default as Ho } from "./components/AddToCalendar/AddToCalendar.js";
 import { default as No } from "./components/Article/Article.js";
 import { default as Go } from "./components/Countdown/Countdown.js";
 import { CountdownVariants as Uo } from "./components/Countdown/types.js";
-import { default as Qo } from "./components/Divider/Divider.js";
-import { default as zo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
-import { default as Yo } from "./components/Filter/Filter.js";
-import { default as qo } from "./components/Filter/FilterInput.js";
-import { default as Ko } from "./components/Filter/FilterHeader.js";
-import { default as _o } from "./components/Pictogram/Pictogram.js";
-import { default as er } from "./components/TextArea/TextArea.js";
-import { default as or } from "./components/Toast/Toast.js";
-import { ToastProvider as ar } from "./components/Toast/ToastContextProvider.js";
-import { useToast as sr } from "./components/Toast/useToast.js";
-import { default as dr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
-import { default as pr } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as ir } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as nr, BidStatusEnum as cr } from "./patterns/BidSnapshot/types.js";
-import { default as Sr } from "./patterns/FilterMenu/FilterMenu.js";
-import { default as Tr } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as Br } from "./patterns/CountryPicker/CountryPicker.js";
-import { default as Ar } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
-import { default as Vr } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as Qo } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
+import { default as zo } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as Yo } from "./components/Divider/Divider.js";
+import { default as qo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
+import { default as Ko } from "./components/Filter/Filter.js";
+import { default as _o } from "./components/Filter/FilterInput.js";
+import { default as er } from "./components/Filter/FilterHeader.js";
+import { default as or } from "./components/NotificationBanner/NotificationBanner.js";
+import { default as ar } from "./components/Pictogram/Pictogram.js";
+import { default as sr } from "./components/TextArea/TextArea.js";
+import { default as dr } from "./components/Toast/Toast.js";
+import { ToastProvider as pr } from "./components/Toast/ToastContextProvider.js";
+import { useToast as ir } from "./components/Toast/useToast.js";
+import { default as nr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
+import { default as gr } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as Cr } from "./patterns/BidSnapshot/BidMessage.js";
+import { BidMessageVariants as Br, BidStatusEnum as Pr } from "./patterns/BidSnapshot/types.js";
+import { default as Ar } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as Vr } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as yr } from "./patterns/CountryPicker/CountryPicker.js";
 export {
   M as Accordion,
   E as AccordionItem,
   R as AccordionItemVariant,
   U as AccordionVariants,
-  dr as AccountPageHeader,
+  nr as AccountPageHeader,
   Ho as AddToCalendar,
   No as Article,
   V as AuctionStatus,
   Yt as AuthState,
-  ir as BidMessage,
-  nr as BidMessageVariants,
-  pr as BidSnapshot,
-  cr as BidStatusEnum,
+  Cr as BidMessage,
+  Br as BidMessageVariants,
+  gr as BidSnapshot,
+  Pr as BidStatusEnum,
   Q as Breadcrumb,
   v as Button,
   w as ButtonVariants,
@@ -140,28 +141,28 @@ export {
   pe as ContentPeekHeightUnits,
   Go as Countdown,
   Uo as CountdownVariants,
-  Br as CountryPicker,
-  Ar as DescriptiveRadioButton,
-  Vr as DescriptiveRadioButtonGroup,
+  yr as CountryPicker,
+  Qo as DescriptiveRadioButton,
+  zo as DescriptiveRadioButtonGroup,
   ie as Detail,
   bt as DetailList,
   kt as DetailListAlignment,
-  Qo as Divider,
+  Yo as Divider,
   ne as Drawer,
   ge as Dropdown,
   Ce as ErrorBoundary,
   so as ExitGateCard,
   ht as FavoritesCollectionTile,
-  zo as FavoritingTileButton,
-  Yo as Filter,
+  qo as FavoritingTileButton,
+  Ko as Filter,
   So as FilterButtonIconType,
   Co as FilterButtonType,
-  Ko as FilterHeader,
-  qo as FilterInput,
-  Sr as FilterMenu,
+  er as FilterHeader,
+  _o as FilterInput,
+  Ar as FilterMenu,
   co as FiltersInline,
   ho as Footer,
-  Pe as Grid,
+  Be as Grid,
   Ie as GridItem,
   Le as GridItemAlign,
   Do as Header,
@@ -181,18 +182,19 @@ export {
   Ue as NavigationItem,
   Qe as NavigationItemTrigger,
   ze as NavigationList,
-  Tr as ObjectTile,
+  or as NotificationBanner,
+  Vr as ObjectTile,
   a as PaddingTokens,
   C as Page,
   uo as PageContentWrapper,
   Ye as Pagination,
   xo as PhoneNumberPicker,
-  _o as Pictogram,
+  ar as Pictogram,
   qe as PinchZoom,
   ko as ProgressIndicator,
   Ke as Row,
-  P as SSRMediaQuery,
-  Po as SaleCard,
+  B as SSRMediaQuery,
+  Bo as SaleCard,
   Io as SaleCardActions,
   Lo as SaleCardVariants,
   Nt as SaleHeaderBanner,
@@ -215,12 +217,12 @@ export {
   xt as TagsList,
   Ct as Text,
   ct as TextAlignments,
-  er as TextArea,
-  Pt as TextSymbolVariants,
+  sr as TextArea,
+  Bt as TextSymbolVariants,
   It as TextSymbols,
   gt as TextVariants,
-  or as Toast,
-  ar as ToastProvider,
+  dr as Toast,
+  pr as ToastProvider,
   qt as UserManagement,
   Lt as Video,
   bo as ViewingDetails,
@@ -235,8 +237,8 @@ export {
   x as getCommonProps,
   n as noOp,
   c as px,
-  B as ssrMediaQueryStyle,
+  P as ssrMediaQueryStyle,
   g as useNormalizedInputProps,
   A as usePendingState,
-  sr as useToast
+  ir as useToast
 };

package/dist/scss/_vars.scss

@@ -397,6 +397,7 @@ $margin-xxl: var(--spacing-xxl);
 :root {
   --header-height: 56px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
   --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+  --banner-height: 0px;
 
   @media (min-width: $breakpoint-md) {
     --header-height: 123px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
@@ -418,6 +419,7 @@ $desktop-max-width: var(--desktop-max-width);
 /// z-index TOKENS:
 ///////////////////////
 $modal-z-index: 30;
+$z-index-notification-banner: 1000;
 
 ////////////////////////
 /// Our tokens usually support at least 4 sizes.

package/dist/scss/_vars.scss.js

@@ -397,6 +397,7 @@ $margin-xxl: var(--spacing-xxl);
 :root {
   --header-height: 56px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
   --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+  --banner-height: 0px;
 
   @media (min-width: $breakpoint-md) {
     --header-height: 123px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
@@ -418,6 +419,7 @@ $desktop-max-width: var(--desktop-max-width);
 /// z-index TOKENS:
 ///////////////////////
 $modal-z-index: 30;
+$z-index-notification-banner: 1000;
 
 ////////////////////////
 /// Our tokens usually support at least 4 sizes.

package/dist/scss/componentStyles.scss

@@ -88,3 +88,4 @@
 @use 'components/Divider/divider';
 @use 'components/TextArea/textArea';
 @use 'components/AddToCalendar/addToCalendar';
+@use 'components/NotificationBanner/notificationBanner';

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -41,7 +41,10 @@
       pointer-events: none;
       position: fixed; // has to bust out of the box containing it on desktop
       right: 0;
-      top: calc($header-height + 1px);
+      top: calc(
+        var(--banner-height) + #{$header-height} + 1px
+      ); // will be dynamically set again when notification banner is shown
+
       transition:
         max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
@@ -56,7 +59,7 @@
     &--hovered &__submenu {
       cursor: default;
       left: 0;
-      max-height: calc(90vh - #{$header-height});
+      max-height: calc(90vh - #{$header-height} + var(--banner-height));
       opacity: 1;
       -ms-overflow-style: none; /* Internet Explorer 10+ */
       overflow-y: scroll;

package/dist/scss/components/NotificationBanner/_notificationBanner.scss

@@ -0,0 +1,11 @@
+@use '../../allPartials' as *;
+
+.#{$px}-notification-banner {
+  background: $light-gray;
+  left: 0;
+  padding: $spacing-sm $spacing-md;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: $z-index-notification-banner;
+}

package/dist/scss/site-furniture/Header/_header.scss

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   position: fixed;
-  top: 0;
+  top: var(--banner-height);
   width: 100%;
   z-index: 10;
 

package/dist/site-furniture/Header/Header.d.ts

@@ -24,6 +24,10 @@ export interface HeaderProps extends ComponentProps<'header'> {
      * Is the header disabled
      */
     disabled?: boolean;
+    /**
+     * Reference to the notification banner
+     */
+    bannerRef?: React.MutableRefObject<HTMLDivElement | null>;
 }
 export type HeaderContextType = {
     /**

package/dist/site-furniture/Header/Header.js

@@ -1,88 +1,108 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import e, { createContext as w, forwardRef as A, useState as g } from "react";
-import l from "../../node_modules/classnames/index.js";
-import { findChildrenOfType as d, findChildrenExcludingTypes as L, px as a } from "../../utils/index.js";
-import f from "../../patterns/UserManagement/UserManagement.js";
-import _ from "../../patterns/LanguageSelector/LanguageSelector.js";
-import v from "../../components/Navigation/Navigation.js";
-import { defaultHeaderContext as k } from "./utils.js";
-import { SSRMediaQuery as q } from "../../providers/SeldonProvider/utils.js";
-import { useMobileMenu as Q } from "./hooks.js";
-import U from "../../components/Icon/Icon.js";
-const z = w(k), B = A(
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import i from "../../node_modules/classnames/index.js";
+import t, { createContext as k, forwardRef as q, useState as c, useEffect as B } from "react";
+import Q from "../../components/Icon/Icon.js";
+import b from "../../components/Navigation/Navigation.js";
+import x from "../../patterns/LanguageSelector/LanguageSelector.js";
+import C from "../../patterns/UserManagement/UserManagement.js";
+import { SSRMediaQuery as U } from "../../providers/SeldonProvider/utils.js";
+import { findChildrenOfType as m, findChildrenExcludingTypes as D, px as n } from "../../utils/index.js";
+import { useMobileMenu as F } from "./hooks.js";
+import { defaultHeaderContext as G } from "./utils.js";
+const J = k(G), K = q(
   ({
-    logo: i = /* @__PURE__ */ t(U, { icon: "PhillipsLogo" }),
-    logoHref: E = "/",
-    className: C,
-    children: n,
-    toggleOpenText: M = "Open Menu",
-    toggleCloseText: x = "Close Menu",
-    logoText: b = "Home Page",
-    disabled: m,
-    ...S
-  }, y) => {
-    const c = d(n, f), $ = e.isValidElement(c?.[0]) ? e.cloneElement(c[0], { disabled: m }) : "", h = d(n, _), u = e.isValidElement(h?.[0]) ? e.cloneElement(h[0], { disabled: m }) : "", [p, N] = g(!1), T = d(n, v), H = L(n, [v, f, _]), { closeMenu: R, handleMenuToggle: I, isMenuOpen: s, toggleText: O } = Q({ toggleOpenText: M, toggleCloseText: x }), [P, j] = g(null), V = e.useRef(null);
-    return /* @__PURE__ */ o("header", { ...S, className: l(`${a}-header`, C), ref: y, children: [
-      /* @__PURE__ */ o("div", { className: `${a}-header__top-row`, children: [
-        /* @__PURE__ */ t(q.Media, { greaterThanOrEqual: "md", children: u }),
-        /* @__PURE__ */ o(
-          "button",
-          {
-            "aria-label": O,
-            "data-testid": "mobile-menu-toggle",
-            type: "button",
-            onClick: I,
-            className: l(`${a}-header__toggle-btn`, {
-              [`${a}-header__toggle-btn--open`]: s
-            }),
-            children: [
-              /* @__PURE__ */ t("span", {}),
-              " "
-            ]
-          }
-        ),
-        /* @__PURE__ */ t("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, children: /* @__PURE__ */ t("a", { href: E, "aria-label": b, children: typeof i == "object" ? i : /* @__PURE__ */ t("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i }) }) }),
-        $
-      ] }),
-      /* @__PURE__ */ t("div", { className: l(`${a}-header__nav`, { [`${a}-header__nav--closed`]: !s }), children: /* @__PURE__ */ o(
-        z.Provider,
-        {
-          value: {
-            activeSubmenuId: P,
-            setActiveSubmenuId: j,
-            closeTimeoutRef: V,
-            isMenuOpen: s,
-            isSearchExpanded: p,
-            setIsSearchExpanded: N,
-            closeMenu: R
-          },
-          children: [
-            e.Children.map(
-              T,
-              (r) => e.isValidElement(r) ? e.cloneElement(r, {
+    logo: s = /* @__PURE__ */ r(Q, { icon: "PhillipsLogo" }),
+    logoHref: M = "/",
+    className: y,
+    children: a,
+    toggleOpenText: H = "Open Menu",
+    toggleCloseText: S = "Close Menu",
+    logoText: $ = "Home Page",
+    disabled: h,
+    bannerRef: o,
+    ...N
+  }, O) => {
+    const u = m(a, C), T = t.isValidElement(u?.[0]) ? t.cloneElement(u[0], { disabled: h }) : "", g = m(a, x), p = t.isValidElement(g?.[0]) ? t.cloneElement(g[0], { disabled: h }) : "", [f, w] = c(!1), I = m(a, b), P = D(a, [b, C, x]), { closeMenu: j, handleMenuToggle: R, isMenuOpen: d, toggleText: V } = F({ toggleOpenText: H, toggleCloseText: S }), [z, A] = c(null), L = t.useRef(null), [_, v] = c(o?.current ? o.current.clientHeight : 0);
+    return B(() => {
+      const e = o?.current;
+      if (!e) return;
+      v(e.clientHeight);
+      const E = new window.ResizeObserver(() => {
+        v(e.clientHeight);
+      });
+      return E.observe(e), () => {
+        E.disconnect();
+      };
+    }, [o, _]), /* @__PURE__ */ l(
+      "header",
+      {
+        ...N,
+        className: i(`${n}-header`, y),
+        ref: O,
+        style: { "--banner-height": `${_}px` },
+        children: [
+          /* @__PURE__ */ l("div", { className: `${n}-header__top-row`, children: [
+            /* @__PURE__ */ r(U.Media, { greaterThanOrEqual: "md", children: p }),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                "aria-label": V,
+                "data-testid": "mobile-menu-toggle",
+                type: "button",
+                onClick: R,
+                className: i(`${n}-header__toggle-btn`, {
+                  [`${n}-header__toggle-btn--open`]: d
+                }),
                 children: [
-                  ...e.Children.toArray(r.props.children),
-                  u
+                  /* @__PURE__ */ r("span", {}),
+                  " "
                 ]
-              }) : r
+              }
             ),
-            H
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: l(`${a}-header__overlay`, {
-            [`${a}-header__overlay--active`]: p
-          })
-        }
-      )
-    ] });
+            /* @__PURE__ */ r("h1", { "data-testid": "header-logo", className: `${n}-header__logo`, children: /* @__PURE__ */ r("a", { href: M, "aria-label": $, children: typeof s == "object" ? s : /* @__PURE__ */ r("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s }) }) }),
+            T
+          ] }),
+          /* @__PURE__ */ r("div", { className: i(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !d }), children: /* @__PURE__ */ l(
+            J.Provider,
+            {
+              value: {
+                activeSubmenuId: z,
+                setActiveSubmenuId: A,
+                closeTimeoutRef: L,
+                isMenuOpen: d,
+                isSearchExpanded: f,
+                setIsSearchExpanded: w,
+                closeMenu: j
+              },
+              children: [
+                t.Children.map(
+                  I,
+                  (e) => t.isValidElement(e) ? t.cloneElement(e, {
+                    children: [
+                      ...t.Children.toArray(e.props.children),
+                      p
+                    ]
+                  }) : e
+                ),
+                P
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: i(`${n}-header__overlay`, {
+                [`${n}-header__overlay--active`]: f
+              })
+            }
+          )
+        ]
+      }
+    );
   }
 );
-B.displayName = "Header";
+K.displayName = "Header";
 export {
-  z as HeaderContext,
-  B as default
+  J as HeaderContext,
+  K as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.177.0",
+  "version": "1.178.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"