@phillips/seldon 1.279.2 → 1.280.0

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

@@ -1,227 +1,230 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-header {
-  align-items: center;
-  background-color: $white-100;
-  border-bottom: 1px solid $light-gray;
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: var(--banner-height);
-  width: 100%;
-  z-index: 10;
-
-  // Skip link: visually hidden until focused so keyboard users can skip to main content
-  &__skip-link {
-    left: -9999px;
-    position: absolute;
-    z-index: 100;
-
-    &:focus {
-      @include focus-ring($border-radius: $radius-xs);
-
-      background-color: $white-100;
-      box-shadow: 0 0 0 4px $white-100; // fills outline-offset gap so content behind doesn’t show through
-      left: $spacing-sm;
-      padding: $spacing-micro $spacing-sm;
-      top: $spacing-sm;
-    }
-  }
-
-  &__toggle-btn {
+@layer seldon.site {
+  .#{$px}-header {
     align-items: center;
-    background: none;
-    border: none;
-    cursor: pointer;
+    background-color: $white-100;
+    border-bottom: 1px solid $light-gray;
     display: flex;
-    height: $mobile-minimum-clickable-area;
-    justify-content: flex-start;
-    padding: 0;
-    width: $mobile-minimum-clickable-area;
+    flex-direction: column;
+    position: fixed;
+    top: var(--banner-height);
+    width: 100%;
+    z-index: 10;
 
-    @include isHeaderDesktop {
-      display: none;
+    // Skip link: visually hidden until focused so keyboard users can skip to main content
+    &__skip-link {
+      left: -9999px;
+      position: absolute;
+      z-index: 100;
+
+      &:focus {
+        @include focus-ring($border-radius: $radius-xs);
+
+        background-color: $white-100;
+        box-shadow: 0 0 0 4px $white-100; // fills outline-offset gap so content behind doesn’t show through
+        left: $spacing-sm;
+        padding: $spacing-micro $spacing-sm;
+        top: $spacing-sm;
+      }
     }
 
-    /* This is a pseudo icon shown within the button, so we can do fancy transitions */
-    span {
-      background-color: $pure-black;
-      color: transparent;
-      display: block;
-      height: 2px;
-      position: relative;
-      transition: background-color 0.25s ease 0.25s;
-      width: 1rem;
+    &__toggle-btn {
+      align-items: center;
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      height: $mobile-minimum-clickable-area;
+      justify-content: flex-start;
+      padding: 0;
+      width: $mobile-minimum-clickable-area;
+
+      @include isHeaderDesktop {
+        display: none;
+      }
 
-      &::before,
-      &::after {
+      /* This is a pseudo icon shown within the button, so we can do fancy transitions */
+      span {
         background-color: $pure-black;
-        content: '';
+        color: transparent;
         display: block;
         height: 2px;
-        left: 0;
-        position: absolute;
-        top: 0;
-        transition: transform 0.25s ease;
+        position: relative;
+        transition: background-color 0.25s ease 0.25s;
         width: 1rem;
-      }
 
-      &::before {
-        transform: translateY(-6px);
+        &::before,
+        &::after {
+          background-color: $pure-black;
+          content: '';
+          display: block;
+          height: 2px;
+          left: 0;
+          position: absolute;
+          top: 0;
+          transition: transform 0.25s ease;
+          width: 1rem;
+        }
+
+        &::before {
+          transform: translateY(-6px);
+        }
+
+        &::after {
+          transform: translateY(6px);
+        }
       }
 
-      &::after {
-        transform: translateY(6px);
-      }
-    }
+      &.#{$px}-header__toggle-btn--open span {
+        background: transparent;
+        transition: background-color 0.25s ease;
 
-    &.#{$px}-header__toggle-btn--open span {
-      background: transparent;
-      transition: background-color 0.25s ease;
+        &::before {
+          transform: rotate(45deg);
+        }
 
-      &::before {
-        transform: rotate(45deg);
-      }
-
-      &::after {
-        transform: rotate(-45deg);
+        &::after {
+          transform: rotate(-45deg);
+        }
       }
     }
-  }
 
-  &__logo {
-    align-self: center;
-    display: inline-block; // so focus ring has a clear box to wrap
-    margin: 0;
-    outline: none;
-    vertical-align: middle; // keep aligned with top-row flex items
+    &__logo {
+      align-self: center;
+      display: inline-block; // so focus ring has a clear box to wrap
+      margin: 0;
+      outline: none;
+      vertical-align: middle; // keep aligned with top-row flex items
 
-    &:focus,
-    &:focus-visible {
-      @include focus-ring($border-radius: $radius-xs);
-    }
-
-    img,
-    svg {
-      display: block; // avoid baseline gap so logo doesn’t slide up
-      height: 20.58px; // 20.58px is the height of the logo's container to make logo 16px
-      width: 100%;
-    }
-
-    @include isHeaderDesktop {
-      padding-top: 0;
+      &:focus,
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+      }
 
       img,
       svg {
-        height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
+        display: block; // avoid baseline gap so logo doesn’t slide up
+        height: 20.58px; // 20.58px is the height of the logo's container to make logo 16px
         width: 100%;
       }
-    }
-  }
 
-  &__top-row {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    padding: $spacing-micro $spacing-md;
-    width: 100%;
+      @include isHeaderDesktop {
+        padding-top: 0;
 
-    @include isHeaderDesktop {
-      padding: $padding-sm $spacing-md;
+        img,
+        svg {
+          height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
+          width: 100%;
+        }
+      }
     }
-  }
 
-  &__nav {
-    background-color: $pure-white;
-    height: calc(100dvh - $header-height - var(--banner-height, 0px));
-    overflow-y: auto;
-    position: relative;
-    width: 100%;
-    z-index: 10;
-
-    &--closed {
-      display: none;
-    }
-    .#{$px}-nav__list-container {
+    &__top-row {
+      align-items: center;
       display: flex;
-      padding: 0;
-
-      @include isHeaderMobile {
-        flex-direction: column;
-        height: calc(100dvh - var(--header-height) - var(--banner-height, 0px) - 1px);
-        justify-content: flex-start;
-      }
+      justify-content: space-between;
+      padding: $spacing-micro $spacing-md;
+      width: 100%;
 
       @include isHeaderDesktop {
-        padding-right: $search-size;
-      }
-
-      @media (min-width: $breakpoint-md) and (max-width: calc($breakpoint-md + 40px)) {
-        padding: 0 2rem 0 0;
+        padding: $padding-sm $spacing-md;
       }
     }
 
-    @include isHeaderMobile {
-      left: 0;
-      position: absolute;
-      top: var(--header-height);
-      transition: left 0.25s ease-in-out;
+    &__nav {
+      background-color: $pure-white;
+      height: calc(100dvh - $header-height - var(--banner-height, 0px));
+      overflow-y: auto;
+      position: relative;
+      width: 100%;
+      z-index: 10;
 
       &--closed {
-        display: unset;
-        left: -100%;
+        display: none;
+      }
+      .#{$px}-nav__list-container {
+        display: flex;
+        padding: 0;
+
+        @include isHeaderMobile {
+          flex-direction: column;
+          height: calc(100dvh - var(--header-height) - var(--banner-height, 0px) - 1px);
+          justify-content: flex-start;
+        }
+
+        @include isHeaderDesktop {
+          padding-right: $search-size;
+        }
+
+        @media (min-width: $breakpoint-md) and (max-width: calc($breakpoint-md + 40px)) {
+          padding: 0 2rem 0 0;
+        }
       }
-    }
 
-    @include isHeaderDesktop {
-      display: flex;
-      height: unset;
-      justify-content: center;
-      overflow: visible; // this is needed for the search results
-      position: relative;
-      top: 0;
-      width: 100%;
-    }
+      @include isHeaderMobile {
+        left: 0;
+        position: absolute;
+        top: var(--header-height);
+        transition: left 0.25s ease-in-out;
 
-    .#{$px}-nav__item {
-      .#{$px}-link--linkStylised {
-        align-content: center;
-        height: 100%;
+        &--closed {
+          display: unset;
+          left: -100%;
+        }
+      }
+
+      @include isHeaderDesktop {
+        display: flex;
+        height: unset;
+        justify-content: center;
+        overflow: visible; // this is needed for the search results
+        position: relative;
+        top: 0;
+        width: 100%;
+      }
+
+      .#{$px}-nav__item {
+        .#{$px}-link--linkStylised {
+          align-content: center;
+          height: 100%;
+        }
       }
     }
-  }
 
-  &__overlay {
-    display: none;
+    &__overlay {
+      display: none;
 
-    &--active {
-      background: $black-75;
-      display: block;
-      height: 100vh;
-      left: 0;
-      position: absolute;
-      top: calc($header-height - 10px);
-      width: 100%;
+      &--active {
+        background: $black-75;
+        display: block;
+        height: 100vh;
+        left: 0;
+        position: absolute;
+        top: calc($header-height - 10px);
+        width: 100%;
 
-      @include isHeaderMobile {
-        display: none;
+        @include isHeaderMobile {
+          display: none;
+        }
       }
     }
-  }
 
-  .#{$px}-accordion-item-label__icon {
-    // slightly larger in header mobile than default
-    height: 1rem;
-    width: 1.5rem;
-  }
-
-  @include isHeaderMobile {
-    .#{$px}-nav__list .#{$px}-nav__item:last-child .#{$px}-link--linkStylised {
-      border-bottom: none;
+    .#{$px}-accordion-item-label__icon {
+      // slightly larger in header mobile than default
+      height: 1rem;
+      width: 1.5rem;
     }
 
-    .#{$px}-language-selector {
-      padding: 0 $spacing-md;
+    @include isHeaderMobile {
+      .#{$px}-nav__list .#{$px}-nav__item:last-child .#{$px}-link--linkStylised {
+        border-bottom: none;
+      }
+
+      .#{$px}-language-selector {
+        padding: 0 $spacing-md;
+      }
     }
   }
 }

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

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../../_virtual/index2.cjs"),o=require("../../utils/index.cjs"),i=require("../../components/Icon/Icon.cjs"),u=require("../../components/Text/Text.cjs"),x=require("../../components/Text/types.cjs"),f=({children:l,className:a,copyright:n=`© ${o.defaultYear} Phillips Auctioneers, LLC`,id:t,logoHref:s="/",logoLinkComponent:c})=>{const r=c;return e.jsxs("footer",{"data-testid":t||"footer",id:t,className:d.default(`${o.px}-footer`,{className:a}),children:[e.jsx("div",{className:`${o.px}-footer__links`,children:l}),e.jsxs("div",{className:`${o.px}-footer__copyright`,children:[r?e.jsx(r,{href:s,"aria-label":"logoLink","data-testid":"footer-logo",className:`${o.px}-footer__logo`,children:e.jsx(i.default,{icon:"PhillipsLogo",width:"94px"})}):e.jsx("a",{href:s,"aria-label":"logo","data-testid":"footer-logo",className:`${o.px}-footer__logo`,children:e.jsx(i.default,{icon:"PhillipsLogo",width:"94px"})}),e.jsx(u.default,{variant:x.TextVariants.bodySmall,children:n})]})]})};exports.default=f;
+require('./_footer.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../../_virtual/index2.cjs"),o=require("../../utils/index.cjs");;const i=require("../../components/Icon/Icon.cjs"),u=require("../../components/Text/Text.cjs"),x=require("../../components/Text/types.cjs"),f=({children:l,className:a,copyright:n=`© ${o.defaultYear} Phillips Auctioneers, LLC`,id:t,logoHref:r="/",logoLinkComponent:c})=>{const s=c;return e.jsxs("footer",{"data-testid":t||"footer",id:t,className:d.default(`${o.px}-footer`,{className:a}),children:[e.jsx("div",{className:`${o.px}-footer__links`,children:l}),e.jsxs("div",{className:`${o.px}-footer__copyright`,children:[s?e.jsx(s,{href:r,"aria-label":"logoLink","data-testid":"footer-logo",className:`${o.px}-footer__logo`,children:e.jsx(i.default,{icon:"PhillipsLogo",width:"94px"})}):e.jsx("a",{href:r,"aria-label":"logo","data-testid":"footer-logo",className:`${o.px}-footer__logo`,children:e.jsx(i.default,{icon:"PhillipsLogo",width:"94px"})}),e.jsx(u.default,{variant:x.TextVariants.bodySmall,children:n})]})]})};exports.default=f;

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

@@ -1,10 +1,12 @@
+import './_footer.css';
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import n from "../../_virtual/index2.js";
 import { px as t, defaultYear as d } from "../../utils/index.js";
+
 import l from "../../components/Icon/Icon.js";
 import p from "../../components/Text/Text.js";
 import { TextVariants as h } from "../../components/Text/types.js";
-const u = ({
+const b = ({
   children: s,
   className: m,
   copyright: c = `© ${d} Phillips Auctioneers, LLC`,
@@ -22,5 +24,5 @@ const u = ({
   ] });
 };
 export {
-  u as default
+  b as default
 };

package/dist/site-furniture/Footer/_footer.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.site{.seldon-footer{align-items:center;background-color:#f9f8f7;display:flex;flex-direction:column;margin:var(--spacing-lg) 0 0;max-width:100%}.seldon-footer ul{display:flex;flex-direction:column;gap:var(--spacing-micro)}.seldon-footer .seldon-social ul{flex-direction:row;gap:0 2rem}.seldon-footer__links{display:flex;flex-direction:column;margin:0 auto;max-width:30rem;padding:var(--spacing-lg) var(--spacing-md) var(--spacing-md) var(--spacing-md);width:100%}@media(min-width:961px){.seldon-footer__links{flex-flow:row wrap;max-width:var(--desktop-max-width);padding:var(--spacing-lg) var(--spacing-md) var(--spacing-lg) var(--spacing-md)}.seldon-footer__links .seldon-social{flex-basis:100%}}@media(min-width:1401px){.seldon-footer__links .seldon-social{flex-basis:0}}@media(min-width:961px){.seldon-footer__links div{flex:1}}@media(min-width:361px){.seldon-footer__links h3.seldon-text{margin-bottom:var(--spacing-xsm)}}.seldon-footer__links div:not(.seldon-social) ul li a:hover{text-decoration:underline}.seldon-footer-desktop{display:none}@media(min-width:961px){.seldon-footer-desktop{display:block}}@media(min-width:961px){.seldon-footer-mobile{display:none}}.seldon-footer .seldon-accordion{border-bottom:1px solid #eae9e6;border-top:unset;margin-bottom:var(--spacing-md);width:100%}.seldon-footer .seldon-accordion-item--expanded{margin-top:0;padding:0}.seldon-footer .seldon-accordion-item-label{opacity:1;padding:var(--spacing-md) 0 var(--spacing-sm)}@media(min-width:961px){.seldon-footer .seldon-accordion-item-label{cursor:unset}}.seldon-footer .seldon-accordion-item-label__text{font-family:Montserrat,sans-serif;font-size:var(--font-size-link-stylised);font-style:unset;font-variation-settings:"wght" 400;letter-spacing:0;line-height:1.2;text-decoration:unset;text-transform:uppercase;font-family:DistinctDisplay,sans-serif;letter-spacing:1px;text-transform:none}.seldon-footer .seldon-accordion-item__border-bottom{border-bottom:1px solid #eae9e6}.seldon-footer__logo{margin-bottom:var(--spacing-sm);margin-top:var(--spacing-md)}.seldon-footer__logo:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-footer__copyright{align-items:center;background-color:#fff;display:flex;flex-direction:column;width:100%}.seldon-footer__copyright h3{margin-bottom:var(--spacing-sm);margin-top:var(--spacing-md)}}

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

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

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

@@ -1,3 +1,4 @@
+import './_header.css';
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import c from "../../_virtual/index2.js";
 import n, { forwardRef as K, useState as h, useEffect as N, createContext as W } from "react";
@@ -7,6 +8,7 @@ import { SSRMediaQuery as X } from "../../providers/SeldonProvider/utils.js";
 import { findChildrenOfType as u, findChildrenExcludingTypes as Y, px as t } from "../../utils/index.js";
 import { useMobileMenu as Z } from "./hooks.js";
 import { defaultHeaderContext as ee } from "./utils.js";
+
 import { Breakpoints as te } from "../../utils/constants.js";
 import ne from "../../components/Icon/Icon.js";
 import k from "../../patterns/LanguageSelector/LanguageSelector.js";

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

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.site{.seldon-header{align-items:center;background-color:#fff;border-bottom:1px solid #eae9e6;display:flex;flex-direction:column;position:fixed;top:var(--banner-height);width:100%;z-index:10}.seldon-header__skip-link{left:-9999px;position:absolute;z-index:100}.seldon-header__skip-link:focus{border-radius:4px;outline:2px solid #07c;outline-offset:4px;background-color:#fff;box-shadow:0 0 0 4px #fff;left:var(--spacing-sm);padding:var(--spacing-micro) var(--spacing-sm);top:var(--spacing-sm)}.seldon-header__toggle-btn{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:flex-start;padding:0;width:44px}@media(min-width:961px){.seldon-header__toggle-btn{display:none}}.seldon-header__toggle-btn span{background-color:#000;color:transparent;display:block;height:2px;position:relative;transition:background-color .25s ease .25s;width:1rem}.seldon-header__toggle-btn span:before,.seldon-header__toggle-btn span:after{background-color:#000;content:"";display:block;height:2px;left:0;position:absolute;top:0;transition:transform .25s ease;width:1rem}.seldon-header__toggle-btn span:before{transform:translateY(-6px)}.seldon-header__toggle-btn span:after{transform:translateY(6px)}.seldon-header__toggle-btn.seldon-header__toggle-btn--open span{background:transparent;transition:background-color .25s ease}.seldon-header__toggle-btn.seldon-header__toggle-btn--open span:before{transform:rotate(45deg)}.seldon-header__toggle-btn.seldon-header__toggle-btn--open span:after{transform:rotate(-45deg)}.seldon-header__logo{align-self:center;display:inline-block;margin:0;outline:none;vertical-align:middle}.seldon-header__logo:focus,.seldon-header__logo:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-header__logo img,.seldon-header__logo svg{display:block;height:20.58px;width:100%}@media(min-width:961px){.seldon-header__logo{padding-top:0}.seldon-header__logo img,.seldon-header__logo svg{height:25.73px;width:100%}}.seldon-header__top-row{align-items:center;display:flex;justify-content:space-between;padding:var(--spacing-micro) var(--spacing-md);width:100%}@media(min-width:961px){.seldon-header__top-row{padding:var(--spacing-sm) var(--spacing-md)}}.seldon-header__nav{background-color:#fff;height:calc(100dvh - var(--header-height) - var(--banner-height, 0px));overflow-y:auto;position:relative;width:100%;z-index:10}.seldon-header__nav--closed{display:none}.seldon-header__nav .seldon-nav__list-container{display:flex;padding:0}@media(max-width:960px){.seldon-header__nav .seldon-nav__list-container{flex-direction:column;height:calc(100dvh - var(--header-height) - var(--banner-height, 0px) - 1px);justify-content:flex-start}}@media(min-width:961px){.seldon-header__nav .seldon-nav__list-container{padding-right:var(--search-size)}}@media(min-width:961px)and (max-width:1001px){.seldon-header__nav .seldon-nav__list-container{padding:0 2rem 0 0}}@media(max-width:960px){.seldon-header__nav{left:0;position:absolute;top:var(--header-height);transition:left .25s ease-in-out}.seldon-header__nav--closed{display:unset;left:-100%}}@media(min-width:961px){.seldon-header__nav{display:flex;height:unset;justify-content:center;overflow:visible;position:relative;top:0;width:100%}}.seldon-header__nav .seldon-nav__item .seldon-link--linkStylised{align-content:center;height:100%}.seldon-header__overlay{display:none}.seldon-header__overlay--active{background:#000000bf;display:block;height:100vh;left:0;position:absolute;top:calc(var(--header-height) - 10px);width:100%}@media(max-width:960px){.seldon-header__overlay--active{display:none}}.seldon-header .seldon-accordion-item-label__icon{height:1rem;width:1.5rem}@media(max-width:960px){.seldon-header .seldon-nav__list .seldon-nav__item:last-child .seldon-link--linkStylised{border-bottom:none}.seldon-header .seldon-language-selector{padding:0 var(--spacing-md)}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.279.2",
+  "version": "1.280.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -37,7 +37,7 @@
     "coverage": "vitest run --project=unit --coverage",
     "test-storybook": "vitest run --project=storybook",
     "build": "npm run clean && tsc && vite build",
-    "chromatic": "STORYBOOK=1 chromatic",
+    "chromatic": "STORYBOOK=1 chromatic --build-script-name build:storybook",
     "build:storybook": "storybook build",
     "preview": "npx http-server storybook-static",
     "test:e2e": "playwright test e2e",
@@ -50,7 +50,8 @@
     "lint:js": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:styles": "stylelint \"src/**/*.scss\" --fix",
     "lint:md": "markdownlint \"src/**/*.{md,mdx}\" --fix",
-    "prepare": "husky install",
+    "prepare": "node ./scripts/prepare.mjs",
+    "prepack": "npm run build",
     "icons:format": "npx @svgr/cli --config-file svgr.config.cjs --out-dir src/assets/formatted --ignore-existing -- src/assets/*.svg",
     "pictograms:format": "npx @svgr/cli --config-file svgr.config.cjs --out-dir src/assets/pictograms/formatted --ignore-existing -- src/assets/pictograms/*.svg"
   },