@phillips/seldon 1.260.0 → 1.262.0

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,79 +1,83 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as H } from "react";
-import { getCommonProps as R } from "../../utils/index.js";
-import D from "../../_virtual/index.js";
-import u from "../../components/Countdown/Countdown.js";
-import F from "../../components/SeldonImage/SeldonImage.js";
-import { AuctionStatus as O } from "../../types/commonTypes.js";
+import { forwardRef as R } from "react";
+import { getCommonProps as D } from "../../utils/index.js";
+import F from "../../_virtual/index.js";
+import p from "../../components/Countdown/Countdown.js";
+import O from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionStatus as V } from "../../types/commonTypes.js";
 import { TextVariants as r } from "../../components/Text/types.js";
-import l from "../../components/Text/Text.js";
+import t from "../../components/Text/Text.js";
 import q from "../../components/PageContentWrapper/PageContentWrapper.js";
 import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
-const z = H(
+import n from "../../components/Banner/Banner.js";
+import { Breakpoints as u } from "../../utils/constants.js";
+import { BannerVariants as I, BannerMediaSize as L } from "../../components/Banner/types.js";
+const Q = R(
   ({
-    auctionEndTime: t,
-    auctionTitle: s,
-    badgeText: o,
-    imageSrcUrl: N,
-    imageSrcSet: g,
-    imageSizes: v,
-    imageLoading: $,
-    imageFetchPriority: S,
+    auctionEndTime: l,
+    auctionTitle: o,
+    badgeText: s,
+    imageSrcUrl: v,
+    imageSrcSet: N,
+    imageSizes: g,
+    imageLoading: S,
+    imageFetchPriority: $,
     location: b,
-    countdownTimerLabel: M,
-    countdownFormatDuration: w,
-    auctionState: B,
-    occurrenceInformation: k,
-    onClick: I,
-    children: x,
-    className: C,
+    countdownTimerLabel: B,
+    countdownFormatDuration: M,
+    auctionState: w,
+    occurrenceInformation: C,
+    onClick: T,
+    children: k,
+    className: x,
     footerElement: P,
-    headerLabel: j,
-    showTimer: c,
-    getCurrentDateTime: y,
-    ...n
-  }, m) => {
-    const { className: a, ...d } = R(n, "SaleHeaderBanner"), _ = B === O.live, h = {
-      endDateTime: t,
-      label: M,
-      formatDurationStr: w,
-      getCurrentDateTime: y
+    headerLabel: y,
+    showTimer: m,
+    getCurrentDateTime: j,
+    ...c
+  }, z) => {
+    const { className: a, ...A } = D(c, "SaleHeaderBanner"), d = w === V.live, _ = {
+      endDateTime: l,
+      label: B,
+      formatDurationStr: M,
+      getCurrentDateTime: j
     };
-    return /* @__PURE__ */ i("div", { ...d, className: D(a, C), ...n, ref: m, children: [
-      _ && t && c ? /* @__PURE__ */ e(f.Media, { lessThan: "md", children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...h, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
-      /* @__PURE__ */ e(
-        F,
-        {
-          aspectRatio: "16/9",
-          src: N,
-          alt: String(s),
-          objectFit: "cover",
-          className: `${a}__image`,
-          srcSet: g,
-          sizes: v,
-          loading: $,
-          fetchPriority: S
-        }
-      ),
-      /* @__PURE__ */ e(q, { className: `${a}__stack-wrapper`, ...d, ...n, ref: m, children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
-        _ && t && c ? /* @__PURE__ */ e(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...h, centerAlign: !0 }) }) }) : null,
-        /* @__PURE__ */ e(l, { variant: r.labelMedium, className: `${a}__header-label`, children: j }),
-        /* @__PURE__ */ e(l, { className: `${a}__title`, variant: r.headingLarge, children: s }),
-        o && /* @__PURE__ */ e(l, { variant: r.badge, className: `${a}__badge`, children: o }),
-        /* @__PURE__ */ e(l, { variant: r.labelMedium, className: `${a}__location`, children: b }),
-        /* @__PURE__ */ i("div", { className: `${a}__occurrence-details`, children: [
-          k.map(({ date: p, occurrenceLabel: A }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
-            /* @__PURE__ */ e(l, { variant: r.labelMedium, children: A }),
-            /* @__PURE__ */ e(l, { variant: r.labelMedium, className: `${a}__date`, children: p })
-          ] }, String(p))),
-          x
-        ] }),
-        P
-      ] }) })
+    return /* @__PURE__ */ i("div", { ...A, className: F(a, x), ...c, ref: z, children: [
+      d && l && m ? /* @__PURE__ */ e(f.Media, { lessThan: u.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(p, { ..._, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
+      /* @__PURE__ */ i(n, { variant: I.top, children: [
+        /* @__PURE__ */ e(n.Content, { children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
+          d && l && m ? /* @__PURE__ */ e(f.Media, { greaterThanOrEqual: u.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(p, { ..._, centerAlign: !0 }) }) }) : null,
+          /* @__PURE__ */ e(n.Eyebrow, { variant: r.labelMedium, className: `${a}__header-label`, children: y }),
+          /* @__PURE__ */ e(n.Title, { variant: r.headingLarge, element: "h1", className: `${a}__title`, children: o }),
+          s && /* @__PURE__ */ e(t, { variant: r.badge, className: `${a}__badge`, children: s }),
+          /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__location`, children: b }),
+          /* @__PURE__ */ i("div", { className: `${a}__occurrence-details`, children: [
+            C.map(({ date: h, occurrenceLabel: H }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
+              /* @__PURE__ */ e(t, { variant: r.labelMedium, children: H }),
+              /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__date`, children: h })
+            ] }, String(h))),
+            k
+          ] }),
+          P
+        ] }) }) }),
+        /* @__PURE__ */ e(n.Media, { size: L.half, className: `${a}__image`, children: /* @__PURE__ */ e(
+          O,
+          {
+            aspectRatio: "16/9",
+            src: v,
+            alt: String(o),
+            objectFit: "cover",
+            srcSet: N,
+            sizes: g,
+            loading: S,
+            fetchPriority: $
+          }
+        ) })
+      ] })
     ] });
   }
 );
-z.displayName = "SaleHeaderBanner";
+Q.displayName = "SaleHeaderBanner";
 export {
-  z as default
+  Q as default
 };

package/dist/providers/SeldonProvider/utils.d.ts

@@ -1,5 +1,5 @@
 /**
  * Used to hide or show components based on the current breakpoint in a SSR friendly way
  */
-export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"sm" | "md" | "lg" | "xsm" | "snw-mobile", never>;
+export declare const SSRMediaQuery: import('@artsy/fresnel/dist/Media').CreateMediaResults<"snw-mobile" | "xsm" | "sm" | "md" | "lg", never>;
 export declare const ssrMediaQueryStyle: string;

package/dist/scss/_type.scss

@@ -334,6 +334,12 @@
     @include label-styles($font-size: $font-size-badge-medium);
   }
 
+  @if $token == $stringSmall {
+    @include label-styles($font-size: $string-size3, $font-weight: 600);
+
+    line-height: $string-line-height-size3;
+  }
+
   @if $token == $linkStylised {
     @include link-styles($font-size: $font-size-link-stylised, $text-transform: uppercase, $text-decoration: unset);
     @include DistinctDisplay;

package/dist/scss/_vars.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // prefix
 $px: seldon;
 
@@ -108,6 +110,8 @@ $bg-soft: #f9f8f7;
 $bg-border: #eae9e6;
 $bg-inverted: #000;
 $bg-overlay: rgba(0, 0, 0, 50%);
+$bg-progress-bar: color.adjust(#0065fc, $alpha: -0.8);
+$bg-progress-bar-mobile: #ebf3ff;
 
 // Status
 $success-default: #00cc39;
@@ -240,11 +244,12 @@ $linkMedium: 'linkMedium';
 $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
+$stringSmall: 'stringSmall';
 $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
   $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
   $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium;
+  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/_vars.scss.cjs

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=`// prefix
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=`@use 'sass:color';
+
+// prefix
 $px: seldon;
 
 // TODO: make design team to follow something like https://tailwindcss.com/docs/font-size
@@ -108,6 +110,8 @@ $bg-soft: #f9f8f7;
 $bg-border: #eae9e6;
 $bg-inverted: #000;
 $bg-overlay: rgba(0, 0, 0, 50%);
+$bg-progress-bar: color.adjust(#0065fc, $alpha: -0.8);
+$bg-progress-bar-mobile: #ebf3ff;
 
 // Status
 $success-default: #00cc39;
@@ -240,11 +244,12 @@ $linkMedium: 'linkMedium';
 $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
+$stringSmall: 'stringSmall';
 $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
   $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
   $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium;
+  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/_vars.scss.js

@@ -1,4 +1,6 @@
-const n = `// prefix
+const n = `@use 'sass:color';
+
+// prefix
 $px: seldon;
 
 // TODO: make design team to follow something like https://tailwindcss.com/docs/font-size
@@ -108,6 +110,8 @@ $bg-soft: #f9f8f7;
 $bg-border: #eae9e6;
 $bg-inverted: #000;
 $bg-overlay: rgba(0, 0, 0, 50%);
+$bg-progress-bar: color.adjust(#0065fc, $alpha: -0.8);
+$bg-progress-bar-mobile: #ebf3ff;
 
 // Status
 $success-default: #00cc39;
@@ -240,11 +244,12 @@ $linkMedium: 'linkMedium';
 $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
+$stringSmall: 'stringSmall';
 $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
   $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
   $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium;
+  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/componentStyles.scss

@@ -7,6 +7,7 @@
 @use './vars' as *;
 
 // ⚛️ Components
+@use 'components/Banner/banner';
 @use 'components/Button/button';
 @use 'components/Card/card';
 @use 'components/IconButton/iconButton';
@@ -63,6 +64,7 @@
 @use 'components/ProgressIndicator/progressIndicator';
 @use 'components/DescriptiveRadioButton/descriptiveRadioButton';
 @use 'components/DescriptiveRadioButtonGroup/descriptiveRadioButtonGroup';
+@use 'components/ProgressBar/progressBar';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';

package/dist/scss/components/Banner/_banner.scss

@@ -0,0 +1,185 @@
+@use '../../allPartials' as *;
+
+.#{$px}-banner {
+  min-width: 0;
+  width: 100%;
+
+  &__inner {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    // Stacked: always show media above copy; at snw-mobile+ DOM order controls left/right in the row.
+    > .#{$px}-banner__media {
+      order: 0;
+    }
+
+    > .#{$px}-banner__column-gap {
+      order: 1;
+    }
+
+    > .#{$px}-banner__body {
+      order: 2;
+    }
+
+    @include media($breakpoint-snw-mobile) {
+      flex-direction: row;
+
+      > .#{$px}-banner__media,
+      > .#{$px}-banner__column-gap,
+      > .#{$px}-banner__body {
+        order: unset;
+      }
+    }
+  }
+
+  &__media {
+    flex-shrink: 0;
+    position: relative;
+    width: 100%;
+
+    @include media($breakpoint-snw-mobile) {
+      width: auto;
+
+      &--1-3 {
+        flex-basis: 33.333%;
+      }
+
+      &--1-2 {
+        flex-basis: 50%;
+      }
+    }
+  }
+
+  &__column-gap {
+    align-self: stretch;
+    background: $grey-50;
+    flex-shrink: 0;
+    margin: 0 $spacing-xsm;
+    width: 1px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xsm;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__description {
+    -webkit-box-orient: vertical;
+    color: $text-supporting;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+
+    @include media($breakpoint-snw-mobile) {
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+    }
+  }
+
+  &__cta {
+    text-decoration: underline;
+  }
+
+  &__media-frame {
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  &__media-img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  &--inline {
+    border-bottom: 1px solid $grey-50;
+    border-top: 1px solid $grey-50;
+    padding: 16px;
+  }
+
+  &--top {
+    // Top-of-page banners: uses default `&__inner` gap ($spacing-sm). Full-width Fresnel slices (e.g. countdown).
+    .#{$px}-banner__body .fresnel-container {
+      width: 100%;
+    }
+    .#{$px}-banner__body {
+      justify-content: center;
+      padding-left: 0;
+
+      @include media($breakpoint-md) {
+        padding: $spacing-md 0;
+        padding-left: $spacing-lg;
+      }
+    }
+
+    .#{$px}-banner__inner {
+      align-items: stretch;
+      column-gap: 0;
+
+      @include media($breakpoint-snw-mobile) {
+        flex-direction: column;
+
+        > .#{$px}-banner__media {
+          order: 0;
+        }
+
+        > .#{$px}-banner__column-gap {
+          order: 1;
+        }
+
+        > .#{$px}-banner__body {
+          order: 2;
+        }
+      }
+
+      @include media($breakpoint-md) {
+        flex-direction: row;
+
+        > .#{$px}-banner__media,
+        > .#{$px}-banner__column-gap,
+        > .#{$px}-banner__body {
+          order: unset;
+        }
+      }
+    }
+
+    .#{$px}-banner__media {
+      @include media($breakpoint-snw-mobile) {
+        width: 100%;
+
+        &--1-3,
+        &--1-2 {
+          flex-basis: unset;
+        }
+      }
+
+      @include media($breakpoint-md) {
+        width: auto;
+
+        &--1-3 {
+          flex-basis: 33.333%;
+        }
+
+        &--1-2 {
+          flex-basis: 50%;
+        }
+      }
+    }
+
+    // Row layout: page margins inset copy from the media seam; remove inline-start padding
+    // so the stack aligns with the image edge (SaleHeaderBanner and similar).
+    @include media($breakpoint-md) {
+      .#{$px}-banner__body > .#{$px}-page-content-wrapper {
+        padding-inline-start: 0;
+      }
+    }
+  }
+}

package/dist/scss/components/ProgressBar/_progressBar.scss

@@ -0,0 +1,94 @@
+@use '../../allPartials' as *;
+@use 'sass:color';
+
+.#{$px}-progress-bar {
+  position: relative;
+  width: 100%;
+
+  &__track {
+    align-items: center;
+    background: $bg-progress-bar;
+    cursor: pointer;
+    display: flex;
+    height: 1rem;
+    overflow: visible;
+    position: relative;
+    width: 100%;
+  }
+
+  &__fill {
+    align-items: center;
+    background: $status-info;
+    bottom: 0;
+    color: $white;
+    display: flex;
+    justify-content: flex-end;
+    left: 0;
+    min-width: 0;
+    overflow: hidden;
+    padding-inline: $spacing-xsm;
+    position: absolute;
+    top: 0;
+    transition: width 250ms ease;
+    width: 0;
+    z-index: 1;
+  }
+
+  &__label {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    height: 100%;
+    white-space: nowrap;
+  }
+
+  &__hover-tooltip {
+    background: $pure-white;
+    border-radius: $radius-sm;
+    box-shadow: 0 0.25rem 1rem color.adjust($pure-black, $alpha: -0.84);
+    left: 0;
+    max-width: calc(100% - #{$spacing-md});
+    padding: $spacing-sm;
+    pointer-events: none;
+    position: absolute;
+    top: calc(100%);
+    transform: translateX(-50%);
+    z-index: 4;
+  }
+
+  &__hover-tooltip-caret {
+    border-bottom: 0.5rem solid $pure-white;
+    border-left: 0.375rem solid transparent;
+    border-right: 0.375rem solid transparent;
+    display: block;
+    height: 0;
+    left: 50%;
+    position: absolute;
+    top: -0.5rem;
+    transform: translateX(-50%);
+    width: 0;
+  }
+
+  &__live-region {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  @media (max-width: calc($breakpoint-md - 1px)) {
+    &__track {
+      background: $bg-progress-bar-mobile;
+      height: 0.25rem;
+    }
+
+    &__label,
+    &__hover-tooltip {
+      display: none;
+    }
+  }
+}

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -2,10 +2,18 @@
 
 .#{$px}-sale-header-banner {
   border-bottom: 1px solid $light-gray;
-  display: flex;
-  flex-direction: column;
   margin-bottom: $spacing-md;
 
+  @include media($breakpoint-md, $type: 'max') {
+    .#{$px}-banner__inner {
+      gap: 0;
+    }
+
+    &__stack {
+      padding: $spacing-md 0;
+    }
+  }
+
   &__header-label {
     margin-bottom: $spacing-xsm;
   }
@@ -16,30 +24,16 @@
     }
   }
 
-  .fresnel-container {
-    width: 100%;
-  }
-
   .#{$px}-countdown {
     padding-top: var(--spacing-sm);
   }
 
-  @include media($size-md, $type: 'min') {
-    flex-direction: row-reverse;
-
-    &__image,
-    &__stack-wrapper {
-      flex: 0 50%;
-    }
-  }
-
   &__stack {
     align-items: start;
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: center;
-    padding: $spacing-md 0;
 
     &__countdown {
       display: flex;

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

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