@phillips/seldon 1.260.0 → 1.261.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/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';

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/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;

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

@@ -9,7 +9,8 @@ import { SSRMediaQuery as K } from "../../providers/SeldonProvider/utils.js";
 import { findChildrenOfType as u, findChildrenExcludingTypes as W, px as n } from "../../utils/index.js";
 import { useMobileMenu as X } from "./hooks.js";
 import { defaultHeaderContext as Y } from "./utils.js";
-const Z = F(Y), ee = G(
+import { Breakpoints as Z } from "../../utils/constants.js";
+const ee = F(Y), te = G(
   ({
     logo: d = /* @__PURE__ */ r(J, { icon: "PhillipsLogo" }),
     logoHref: N = "/",
@@ -18,16 +19,16 @@ const Z = F(Y), ee = G(
     toggleOpenText: O = "Open Menu",
     toggleCloseText: k = "Close Menu",
     logoText: P = "Home Page",
-    disabled: g,
+    disabled: p,
     bannerRef: s,
-    skipToContentId: p = "main",
+    skipToContentId: g = "main",
     skipLinkLabel: R = "Skip to main content",
     ...z
   }, a) => {
-    const f = u(i, S), T = t.isValidElement(f?.[0]) ? t.cloneElement(f[0], { disabled: g }) : "", v = u(i, M), _ = t.isValidElement(v?.[0]) ? t.cloneElement(v[0], { disabled: g }) : "", [b, j] = h(!1), I = u(i, C), V = W(i, [C, S, M]), { closeMenu: A, handleMenuToggle: L, isMenuOpen: m, toggleText: q } = X({
+    const f = u(i, S), T = t.isValidElement(f?.[0]) ? t.cloneElement(f[0], { disabled: p }) : "", v = u(i, M), _ = t.isValidElement(v?.[0]) ? t.cloneElement(v[0], { disabled: p }) : "", [b, j] = h(!1), I = u(i, C), V = W(i, [C, S, M]), { closeMenu: A, handleMenuToggle: B, isMenuOpen: m, toggleText: L } = X({
       toggleOpenText: O,
       toggleCloseText: k
-    }), [B, Q] = h(null), [E, x] = h(s?.current ? s.current.clientHeight : 0), y = t.useRef(null);
+    }), [q, Q] = h(null), [E, x] = h(s?.current ? s.current.clientHeight : 0), y = t.useRef(null);
     $(() => {
       const e = s?.current;
       if (!e) return;
@@ -65,16 +66,16 @@ const Z = F(Y), ee = G(
         ref: U,
         style: { "--banner-height": `${E}px` },
         children: [
-          p && /* @__PURE__ */ r("a", { href: `#${p}`, className: `${n}-header__skip-link`, "data-testid": "skip-to-content", children: R }),
+          g && /* @__PURE__ */ r("a", { href: `#${g}`, className: `${n}-header__skip-link`, "data-testid": "skip-to-content", children: R }),
           /* @__PURE__ */ l("div", { className: `${n}-header__top-row`, children: [
-            /* @__PURE__ */ r(K.Media, { greaterThanOrEqual: "md", children: _ }),
+            /* @__PURE__ */ r(K.Media, { greaterThanOrEqual: Z.md, children: _ }),
             /* @__PURE__ */ l(
               "button",
               {
-                "aria-label": q,
+                "aria-label": L,
                 "data-testid": "mobile-menu-toggle",
                 type: "button",
-                onClick: L,
+                onClick: B,
                 className: c(`${n}-header__toggle-btn`, {
                   [`${n}-header__toggle-btn--open`]: m
                 }),
@@ -88,10 +89,10 @@ const Z = F(Y), ee = G(
             T
           ] }),
           /* @__PURE__ */ r("div", { className: c(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !m }), children: /* @__PURE__ */ l(
-            Z.Provider,
+            ee.Provider,
             {
               value: {
-                activeSubmenuId: B,
+                activeSubmenuId: q,
                 setActiveSubmenuId: Q,
                 isMenuOpen: m,
                 isSearchExpanded: b,
@@ -125,8 +126,8 @@ const Z = F(Y), ee = G(
     );
   }
 );
-ee.displayName = "Header";
+te.displayName = "Header";
 export {
-  Z as HeaderContext,
-  ee as default
+  ee as HeaderContext,
+  te as default
 };

package/dist/utils/constants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={xsm:0,sm:361,md:961,lg:1401,"snw-mobile":768},t=16;exports.BREAKPOINTS=e;exports.DEFAULT_REM_SIZE=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l={xsm:0,sm:361,md:961,lg:1401,"snw-mobile":768};var s=(m=>(m.xsm="xsm",m.sm="sm",m.md="md",m.lg="lg",m.snwMobile="snw-mobile",m))(s||{});const e=16;exports.BREAKPOINTS=l;exports.Breakpoints=s;exports.DEFAULT_REM_SIZE=e;

package/dist/utils/constants.d.ts

@@ -6,4 +6,11 @@ export declare const BREAKPOINTS: {
     lg: number;
     "snw-mobile": number;
 };
+export declare enum Breakpoints {
+    xsm = "xsm",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    snwMobile = "snw-mobile"
+}
 export declare const DEFAULT_REM_SIZE = 16;

package/dist/utils/constants.js

@@ -1,12 +1,15 @@
-const s = {
+const l = {
   xsm: 0,
   sm: 361,
   md: 961,
   lg: 1401,
   // Temporary token for mobile breakpoint added to support [L3-7681](https://phillipsauctions.atlassian.net/browse/L3-7681)
   "snw-mobile": 768
-}, m = 16;
+};
+var s = /* @__PURE__ */ ((m) => (m.xsm = "xsm", m.sm = "sm", m.md = "md", m.lg = "lg", m.snwMobile = "snw-mobile", m))(s || {});
+const x = 16;
 export {
-  s as BREAKPOINTS,
-  m as DEFAULT_REM_SIZE
+  l as BREAKPOINTS,
+  s as Breakpoints,
+  x as DEFAULT_REM_SIZE
 };

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { Breakpoints } from './constants';
 import * as React from 'react';
 export declare const px = "seldon";
 /**
@@ -103,4 +104,3 @@ export declare const findChildrenOfType: <ComponentProps>(children: React.ReactN
 export declare const findChildrenExcludingTypes: <ComponentProps>(children: React.ReactNode, excludedTypes: React.ElementType[]) => React.ReactElement<ComponentProps, string | React.JSXElementConstructor<any>>[] | null;
 export declare const encodeURLSearchParams: (url: string) => string;
 export declare const focusElementById: (elementId: string, focus: boolean) => void;
-export {};

package/package.json

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