@phillips/seldon 1.30.1 → 1.31.0

package/dist/assets/PhillipsLogo.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { "data-testid": "header-logo-svg", width: 131, height: 18, viewBox: "0 0 131 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Logo/ HP Button", clipPath: "url(#clip0_3288_4057)" }, /* @__PURE__ */ e.createElement("path", { id: "Phillips Logo", d: "M54.8166 0.274027H52.6224V13.726H63.7504V11.6083H54.8166V0.274027ZM41.3171 13.7273H43.5119V0.274027H41.3171V13.7273ZM21.276 0.274027H19.1214V13.726H21.2566V8.86215H30.0526V13.726H32.2079V0.274027H30.0526V6.80339H21.2566L21.276 0.274027ZM87.8477 13.7273H90.0425V0.274027H87.8477V13.7273ZM118.23 10.402L117.489 12.3843C119.214 13.3651 122.153 14 124.23 14C128.07 14 130.48 12.4912 130.48 9.84295C130.48 6.72565 127.521 6.17565 124.309 5.86211C122.252 5.66647 120.096 5.50969 120.096 4.01971C120.096 2.86206 121.135 2.11772 123.898 2.11772C125.543 2.11772 127.444 2.49021 129.031 3.15747L129.716 1.157C127.953 0.39193 125.817 0 123.936 0C120.058 0 117.863 1.52885 117.863 4.01971C117.863 7.1571 120.861 7.7058 124.034 7.99991C126.091 8.1962 128.227 8.37305 128.227 9.8436C128.227 11.0401 127.15 11.8829 124.25 11.8829C122.467 11.8823 120.004 11.3485 118.23 10.402ZM72.4298 0.274027H70.2357V13.726H81.3637V11.6083H72.4298V0.274027ZM106.676 0.274027H99.1724V13.726H101.367V9.27417H106.676C109.811 9.27417 111.614 7.39161 111.614 4.76406C111.614 2.15659 109.85 0.274027 106.676 0.274027ZM106.421 7.1571H101.367V2.39174H106.421C108.321 2.39174 109.379 3.27407 109.379 4.7647C109.38 6.25533 108.361 7.1571 106.421 7.1571ZM7.50343 0.274027H0V13.726H2.19414V9.27417H7.50343C10.638 9.27417 12.4399 7.39161 12.4399 4.76406C12.4406 2.15659 10.6775 0.274027 7.50343 0.274027ZM7.24907 7.1571H2.19414V2.39174H7.24907C9.14936 2.39174 10.2069 3.27407 10.2069 4.7647C10.2063 6.25533 9.18819 7.1571 7.24907 7.1571Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_3288_4057" }, /* @__PURE__ */ e.createElement("rect", { width: 130.667, height: 14, fill: "white" }))));
+export {
+  l as default
+};

package/dist/components/Button/Button.d.ts

@@ -23,6 +23,10 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
      * The type of the button.
      */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Should the button be disabled?
+     */
+    isDisabled?: boolean;
 }
 /**
  * ## Overview
@@ -33,5 +37,5 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-button--overview)
  */
-declare const Button: ({ buttonType, size, children, className, isIconLast: iconLast, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ buttonType, size, children, className, isIconLast: iconLast, type, isDisabled, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,35 +1,37 @@
-import { jsx as l } from "react/jsx-runtime";
-import i from "../../node_modules/classnames/index.js";
+import { jsx as i } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
 import { getCommonProps as u } from "../../utils/index.js";
-const b = ({
+const d = ({
   buttonType: t = "primary",
-  size: m = "md",
-  children: a,
-  className: n,
-  isIconLast: r = !1,
-  type: e = "button",
-  ...s
+  size: a = "md",
+  children: m,
+  className: e,
+  isIconLast: n = !1,
+  type: r = "button",
+  isDisabled: l = !1,
+  ...o
 }) => {
-  const { className: o, ...c } = u(s, "Button");
-  return /* @__PURE__ */ l(
+  const { className: s, ...c } = u(o, "Button");
+  return /* @__PURE__ */ i(
     "button",
     {
       ...c,
-      type: e,
-      className: i(
-        `${o}`,
-        `${o}--${m}`,
-        `${o}--${t}`,
+      type: r,
+      className: f(
+        `${s}`,
+        `${s}--${a}`,
+        `${s}--${t}`,
         {
-          [`${o}--icon-last`]: r
+          [`${s}--icon-last`]: n
         },
-        n
+        e
       ),
-      ...s,
-      children: a
+      disabled: l,
+      ...o,
+      children: m
     }
   );
 };
 export {
-  b as default
+  d as default
 };

package/dist/components/Header/Header.d.ts

@@ -16,6 +16,10 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      * Toggle close text
      */
     toggleCloseText?: string;
+    /**
+     * label for the Logo link
+     */
+    logoText?: string;
 }
 export declare const HeaderContext: React.Context<{
     defaultMobileMenuLabel: string;
@@ -24,5 +28,5 @@ export declare const HeaderContext: React.Context<{
     isExpanded: boolean;
     onSelect: (_label: string) => void;
 }>;
-declare const Header: ({ defaultMobileMenuLabel, logo, className, children, toggleOpenText, toggleCloseText, ...props }: React.PropsWithChildren<HeaderProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ defaultMobileMenuLabel, logo, className, children, toggleOpenText, toggleCloseText, logoText, ...props }: React.PropsWithChildren<HeaderProps>) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/components/Header/Header.js

@@ -1,72 +1,74 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import o from "../../node_modules/classnames/index.js";
-import * as i from "react";
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import r from "../../node_modules/classnames/index.js";
+import * as c from "react";
 import { px as a } from "../../utils/index.js";
-import I from "../Search/Search.js";
-const y = i.createContext({
+import y from "../Search/Search.js";
+import E from "../../assets/PhillipsLogo.svg.js";
+const N = c.createContext({
   defaultMobileMenuLabel: "",
   expandedItem: "",
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-  setExpandedItem: (e) => {
+  setExpandedItem: (t) => {
   },
   isExpanded: !1,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-  onSelect: (e) => {
+  onSelect: (t) => {
   }
 }), k = ({
-  defaultMobileMenuLabel: e = "Main Menu",
-  logo: s,
-  className: _,
-  children: g,
-  toggleOpenText: m = "Open Menu",
-  toggleCloseText: l = "Close Menu",
-  ...x
+  defaultMobileMenuLabel: t = "Main Menu",
+  logo: d = /* @__PURE__ */ e(E, {}),
+  className: g,
+  children: _,
+  toggleOpenText: l = "Open Menu",
+  toggleCloseText: m = "Close Menu",
+  logoText: x = "Home Page",
+  ...v
 }) => {
-  const [r, v] = i.useState(!1), [h, c] = i.useState(e), d = r ? l : m, S = h !== e, p = function() {
-    v((n) => !n), c(e);
+  const [s, f] = c.useState(!1), [h, i] = c.useState(t), o = s ? m : l, S = h !== t, p = function() {
+    f((n) => !n), i(t);
   }, $ = function(n) {
-    c((f) => f === e ? n : e);
+    i((u) => u === t ? n : t);
   };
-  return /* @__PURE__ */ u("header", { ...x, className: o(`${a}-header`, _), children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ I("header", { ...v, className: r(`${a}-header`, g), children: [
+    /* @__PURE__ */ e(
       "div",
       {
-        className: o(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: r }),
+        className: r(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: s }),
         "data-testid": "header-overlay",
         onClick: p
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ e(
       "button",
       {
-        "aria-label": d,
+        "aria-label": o,
         "data-testid": "mobile-menu-toggle",
         type: "button",
         onClick: p,
-        className: o(`${a}-header__toggle-btn`, {
-          [`${a}-header__toggle-btn--open`]: d === l
+        className: r(`${a}-header__toggle-btn`, {
+          [`${a}-header__toggle-btn--open`]: o === m
         }),
-        children: /* @__PURE__ */ t("span", { children: d })
+        children: /* @__PURE__ */ e("span", { children: o })
       }
     ),
-    /* @__PURE__ */ t("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, tabIndex: d === m ? 0 : -1, children: typeof s == "object" ? s : /* @__PURE__ */ t("img", { "data-testid": "header-logo-img", src: s, height: "14" }) }),
-    /* @__PURE__ */ t("div", { className: o(`${a}-header__nav`, { [`${a}-header__nav--open`]: r }), children: /* @__PURE__ */ t(
-      y.Provider,
+    /* @__PURE__ */ e("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, tabIndex: o === l ? 0 : -1, children: /* @__PURE__ */ e("a", { href: "/", "aria-label": x, children: typeof d == "object" ? d : /* @__PURE__ */ e("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d, height: "14" }) }) }),
+    /* @__PURE__ */ e("div", { className: r(`${a}-header__nav`, { [`${a}-header__nav--open`]: s }), children: /* @__PURE__ */ e(
+      N.Provider,
       {
         value: {
-          defaultMobileMenuLabel: e,
+          defaultMobileMenuLabel: t,
           expandedItem: h,
-          setExpandedItem: (n) => c(n),
+          setExpandedItem: (n) => i(n),
           isExpanded: S,
           onSelect: (n) => $(n)
         },
-        children: g
+        children: _
       }
     ) }),
-    /* @__PURE__ */ t(I, {})
+    /* @__PURE__ */ e(y, {})
   ] });
 };
 export {
-  y as HeaderContext,
+  N as HeaderContext,
   k as default
 };

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

@@ -1,9 +1,9 @@
-import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { jsxs as p, jsx as _ } from "react/jsx-runtime";
 import * as r from "react";
 import { px as a } from "../../../utils/index.js";
 import l from "../../../node_modules/classnames/index.js";
 import { HeaderContext as v } from "../../Header/Header.js";
-const x = ({ id: o, children: n, className: _ }) => {
+const x = ({ id: o, children: n, className: m }) => {
   const { isExpanded: i } = r.useContext(v), s = r.Children.toArray(n).filter((t) => {
     if (t && t.props.navGroup === "nav-link-lg")
       return t;
@@ -18,10 +18,10 @@ const x = ({ id: o, children: n, className: _ }) => {
       "data-testid": o,
       role: "list",
       "aria-expanded": i,
-      className: l(_, `${a}-nav__list`, { [`${a}-nav__list--expanded`]: i }),
+      className: l(m, `${a}-nav__list`, { [`${a}-nav__list--expanded`]: i }),
       children: [
-        s.length > 0 ? /* @__PURE__ */ m("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: s.map((t) => t) }) : null,
-        e.length > 0 ? /* @__PURE__ */ m("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: e.map((t) => t) }) : null,
+        s.length > 0 ? /* @__PURE__ */ _("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: s }) : null,
+        e.length > 0 ? /* @__PURE__ */ _("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: e }) : null,
         !s.length && !e.length ? n : null
       ]
     }

package/dist/components/UserManagement/UserManagement.js

@@ -1,4 +1,4 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
 import { getCommonProps as x, px as j, noOp as s } from "../../utils/index.js";
 import A from "../Input/Input.js";
 import E from "../../assets/account_circle.svg.js";
@@ -19,19 +19,26 @@ const H = ({
   onLanguageChange: d = s,
   isLoggedIn: r = !1,
   onLogin: f = s,
-  onLogout: h = s,
-  loginLabel: N = "Login",
-  logoutLabel: _ = "Logout",
-  ...t
+  onLogout: _ = s,
+  loginLabel: h = "Login",
+  logoutLabel: N = "Logout",
+  ...c
 }) => {
-  var c, u;
-  const { className: l, ...b } = x(t, "UserManagement"), C = (u = (c = i.find((e) => e.value === n)) == null ? void 0 : c.label) != null ? u : "English", $ = m != null ? m : "a";
-  return /* @__PURE__ */ g("div", { ...b, className: T(l, v), ...t, children: [
-    /* @__PURE__ */ g("ul", { className: `${l}__account-wrapper`, children: [
-      r && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(E, { className: `${l}__account-icon` }) }),
-      /* @__PURE__ */ a(S, { onClick: r ? h : f, label: r ? _ : N })
+  var t, g;
+  const { className: l, ...b } = x(c, "UserManagement"), $ = (g = (t = i.find((e) => e.value === n)) == null ? void 0 : t.label) != null ? g : "English", C = m != null ? m : "a";
+  return /* @__PURE__ */ u("div", { ...b, className: T(l, v), ...c, children: [
+    /* @__PURE__ */ u("ul", { className: `${l}__account-wrapper`, children: [
+      r && /* @__PURE__ */ a(C, { children: /* @__PURE__ */ a(E, { className: `${l}__account-icon` }) }),
+      /* @__PURE__ */ a(
+        S,
+        {
+          className: `${l}__login`,
+          onClick: r ? _ : f,
+          label: r ? N : h
+        }
+      )
     ] }),
-    /* @__PURE__ */ a(M, { className: `${l}__language`, label: C, children: /* @__PURE__ */ a(P, { id: `${j}-langauge-selection-list`, className: `${l}__language__selections`, children: i.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(M, { className: `${l}__language`, label: $, children: /* @__PURE__ */ a(P, { id: `${j}-langauge-selection-list`, className: `${l}__language__selections`, children: i.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
       A,
       {
         type: "radio",

package/dist/scss/_utils.scss

@@ -161,3 +161,15 @@
     }
   }
 }
+
+@mixin isHeaderMobile() {
+  @media (max-width: #{$breakpoint-md - 1}) {
+    @content;
+  }
+}
+
+@mixin isHeaderDesktop() {
+  @media (min-width: $breakpoint-md) {
+    @content;
+  }
+}

package/dist/scss/_vars.scss

@@ -229,6 +229,12 @@ $breakpoint-xl: 1801px;
 ///////////////////////
 $max-site-width: 1560px;
 
+////////////////////////
+/// height Tokens
+///////////////////////
+$header-height: 60px;
+$user-management-height: 30px;
+
 ////////////////////////
 /// Our tokens usually support at least 4 sizes.
 ///////////////////////

package/dist/scss/components/Button/_button.scss

@@ -78,6 +78,17 @@
     padding: 0.75em 1.75em;
   }
 
+  &:disabled {
+    background-color: $white;
+    border: 1px solid $medium-gray;
+    color: $medium-gray;
+    cursor: default;
+
+    svg {
+      fill: $medium-gray;
+    }
+  }
+
   * {
     margin: 0;
   }

package/dist/scss/components/Header/_header.scss

@@ -1,17 +1,17 @@
 @import '../../vars';
+@import '../../utils';
 
 .#{$px}-header {
   align-items: center;
   background-color: $white;
   border-bottom: 1px solid rgba(0, 0, 0, 10%);
   display: flex;
-  height: 60px;
-  padding: 0 $spacing-md;
-  position: fixed;
-  top: 30px;
-  width: 100vw;
+  padding: $user-management-height $spacing-md 0; // save space for the user management
+  position: sticky;
+  top: 0;
 
-  @media (max-width: #{$breakpoint-md - 1}) {
+  @include isHeaderMobile {
+    padding: 0;
     top: 0;
   }
 
@@ -22,7 +22,7 @@
     border: none;
     cursor: pointer;
     display: flex;
-    height: 60px;
+    height: $header-height;
     justify-content: center;
     left: 0;
     overflow: hidden;
@@ -32,7 +32,7 @@
     width: 60px;
     z-index: 1;
 
-    @media (min-width: $breakpoint-md) {
+    @include isHeaderDesktop {
       display: none;
     }
 
@@ -88,7 +88,7 @@
   &__logo {
     margin: auto;
 
-    @media (min-width: $breakpoint-md) {
+    @include isHeaderDesktop {
       margin: unset;
     }
   }
@@ -108,7 +108,7 @@
       height: 100%;
       opacity: 1;
 
-      @media (min-width: #{$breakpoint-md - 1}) {
+      @include isHeaderDesktop {
         display: none;
       }
 
@@ -134,8 +134,8 @@
     top: 0;
     transform: translateX(-100%);
 
-    @media (min-width: $breakpoint-md) {
-      height: 60px;
+    @include isHeaderDesktop {
+      height: $header-height;
       position: relative;
       transform: unset;
       width: 100%;
@@ -144,7 +144,7 @@
     &.#{$px}-header__nav--open {
       transform: translateX(0);
 
-      @media (min-width: $breakpoint-md) {
+      @include isHeaderDesktop {
         transform: unset;
       }
     }

package/dist/scss/components/Input/_input.scss

@@ -130,10 +130,16 @@ $lg: #{$px}-input--lg;
   }
 }
 
+.#{$px}-input__label:has(+ input[type='radio']),
+.#{$px}-input__label:has(+ input[type='checkbox']) {
+  cursor: pointer;
+}
+
 .#{$px}-radio-input,
 .#{$px}-checkbox-input {
   .#{$px}-input__input {
     align-self: flex-start;
+    cursor: pointer;
   }
 
   &.#{$px}-input--inline {

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -1,14 +1,15 @@
 @import '../../../vars';
+@import '../../../utils';
 @import '../../../typography';
 
 .#{$px}-nav__item {
-  @media (max-width: #{$breakpoint-md - 1}) {
+  @include isHeaderMobile {
     border-bottom: 1px solid #ccc;
     max-width: 320px;
     width: 100%;
   }
 
-  @media (min-width: $breakpoint-md) {
+  @include isHeaderDesktop {
     align-items: center;
     display: flex;
     max-width: unset;
@@ -38,16 +39,14 @@
     text-transform: uppercase;
     width: 100%;
 
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       position: relative;
     }
   }
 
   &--expanded ~ & &--label,
   &--expanded ~ & > button {
-    @media (max-width: #{$breakpoint-md - 1}) {
-      display: none;
-
+    @include isHeaderMobile {
       & > span::after {
         content: '';
       }
@@ -55,8 +54,7 @@
   }
 
   ul {
-    background: $pure-white;
-    opacity: 0;
+    background: $off-white;
     overflow: hidden scroll;
     position: absolute;
     right: 0;
@@ -65,7 +63,7 @@
     z-index: -10;
   }
 
-  @media (min-width: $breakpoint-md) {
+  @include isHeaderDesktop {
     ul {
       align-content: start;
       background: #f4f4f4;
@@ -73,7 +71,6 @@
       left: 0;
       max-height: 0;
       min-height: 0;
-      opacity: 0;
       overflow: hidden;
       position: fixed;
       top: 90px;
@@ -83,12 +80,11 @@
       li {
         display: flex;
         justify-content: end;
-        opacity: 0;
 
         button,
         a,
         p {
-          @media (min-width: $breakpoint-md) {
+          @include isHeaderDesktop {
             border: none;
           }
         }
@@ -110,22 +106,13 @@
     &--expanded:focus-within ul {
       max-height: 100vh;
       min-height: 227px;
-      opacity: 1;
-      padding: 3.75rem;
+      padding: 2rem 3.75rem;
       z-index: 1;
-
-      li {
-        opacity: 1;
-
-        ul li::after {
-          opacity: 0;
-        }
-      }
     }
   }
 
   .#{$px}-nav__item-trigger > label::after {
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       content: '\203A';
       display: inline-block;
       font-size: 1.75rem;
@@ -136,13 +123,12 @@
       transform: translateY(-50%);
     }
 
-    @media (min-width: $breakpoint-md) {
+    @include isHeaderDesktop {
       content: '';
     }
   }
 
   &.#{$px}-nav__item--expanded ul {
-    opacity: 1;
     z-index: 0;
   }
 
@@ -150,11 +136,12 @@
   & > button,
   & > p {
     background-color: transparent;
+    border: 0;
     display: flex;
     padding: 0.625rem;
   }
 
-  @media (max-width: #{$breakpoint-md - 1}) {
+  @include isHeaderMobile {
     & > a:focus,
     & > button:focus,
     & > p:focus {
@@ -170,7 +157,7 @@
     }
   }
 
-  @media (min-width: $breakpoint-md) {
+  @include isHeaderDesktop {
     position: relative;
 
     &:not(ul ul li) a:focus,
@@ -186,7 +173,6 @@
       content: '';
       height: 2px;
       left: 50%;
-      opacity: 0;
       position: absolute;
       top: 70%;
       transform: translateX(-50%);
@@ -197,7 +183,6 @@
     &:not(ul ul li) a:focus::after,
     &:not(ul ul li) button:focus::after,
     &:not(ul ul li) p:focus::after {
-      opacity: 1;
       width: 85%;
     }
 
@@ -211,16 +196,10 @@
       content: '';
       height: 2px;
       left: 0;
-      opacity: 0;
       position: absolute;
       top: 100%;
       width: 100%;
     }
-
-    &:hover > .#{$px}-nav__item-trigger::before,
-    &:focus > .#{$px}-nav__item-trigger::before {
-      opacity: 1;
-    }
   }
 }
 
@@ -228,7 +207,7 @@
   &--large-cta {
     margin-right: 1rem;
 
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       margin-right: 0;
     }
     .#{$px}-nav__item {
@@ -251,7 +230,7 @@
           color: $keyline-gray;
         }
 
-        @media (max-width: #{$breakpoint-md - 1}) {
+        @include isHeaderMobile {
           /* TODO: Create token to handle these styles dynamically */
           align-items: flex-start;
           font-size: 0.6rem;

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -1,4 +1,5 @@
 @import '../../../vars';
+@import '../../../utils';
 
 .#{$px}-nav__list {
   display: flex;
@@ -8,19 +9,19 @@
   padding: 0;
   width: 100%;
 
-  @media (max-width: #{$breakpoint-md - 1}) {
+  @include isHeaderMobile {
     flex-direction: column;
     height: calc(100vh - 102px);
     justify-content: left;
     min-width: 330px;
-    overflow: scroll;
+    overflow: auto;
     padding: 0.5rem;
     transform: translateX(0%);
     transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
   }
 
   &--expanded {
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       &:not(li ul) {
         transform: translateX(-50%);
         width: 200%;
@@ -32,7 +33,7 @@
     display: grid;
     grid-template-columns: 20% 20% 20% 20% 20%;
 
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       display: none;
 
       &--expanded {
@@ -72,7 +73,7 @@
       grid-column: 4 / span 2;
       height: fit-content;
 
-      @media (max-width: #{$breakpoint-md - 1}) {
+      @include isHeaderMobile {
         margin-top: 2rem;
       }
     }
@@ -85,12 +86,8 @@
   }
 
   > li:not(.#{$px}-user-management) {
-    @media (min-width: $breakpoint-md) {
+    @include isHeaderDesktop {
       height: 60px;
     }
   }
-
-  * {
-    cursor: pointer;
-  }
 }

package/dist/scss/components/Navigation/_navigation.scss

@@ -1,7 +1,8 @@
 @import '../../vars';
+@import '../../utils';
 
 .#{$px}-nav {
-  background: $pure-white;
+  background: $off-white;
   color: $soft-black;
   height: 100%;
   overflow: hidden;
@@ -9,7 +10,8 @@
   position: relative;
   width: 100%;
 
-  @media (min-width: $breakpoint-md) {
+  @include isHeaderDesktop {
+    background: $pure-white;
     display: flex;
     flex-wrap: wrap;
     overflow: visible;
@@ -53,7 +55,7 @@
       background-color 0.5s;
   }
 
-  @media (min-width: $breakpoint-md) {
+  @include isHeaderDesktop {
     // Remove label and mobile buttons on larger screens
     .#{$px}-nav__back-btn,
     .#{$px}-nav__close-btn,

package/dist/scss/components/Search/_search.scss

@@ -1,10 +1,11 @@
 @import '../../vars';
 @import '../../typography';
+@import '../../utils';
 
 .#{$px}-search {
   align-items: center;
   display: flex;
-  height: 60px;
+  height: $header-height;
   justify-content: center;
   padding: 0.47rem;
 
@@ -33,7 +34,7 @@
     padding: 0;
     width: 18px;
 
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       border: 2px solid black;
       border-radius: 50%;
       height: 35px;
@@ -57,20 +58,20 @@
     overflow: hidden;
     position: absolute;
     right: 0;
-    top: 60px;
+    top: calc($header-height + $user-management-height);
     transition: 0.5s ease;
     width: 0;
     z-index: 3;
 
-    @media (max-width: #{$breakpoint-md - 1}) {
-      top: 60px;
+    @include isHeaderMobile {
+      top: $header-height;
     }
 
     &--active {
       width: 50%;
 
-      @media (max-width: #{$breakpoint-md - 1}) {
-        top: 60px;
+      @include isHeaderMobile {
+        top: $header-height;
         width: 100%;
       }
     }

package/dist/scss/components/UserManagement/_userManagement.scss

@@ -1,10 +1,11 @@
 @import '../../_vars';
+@import '../../_utils';
 
 .#{$px}-user-management {
   align-items: center;
   background-color: #f4f4f4;
   display: flex;
-  height: 30px;
+  height: $user-management-height;
   justify-content: flex-end;
   left: 0;
   padding: 0 $spacing-md;
@@ -13,7 +14,7 @@
   top: 0;
   width: 100%;
 
-  @media (max-width: #{$breakpoint-md - 1}) {
+  @include isHeaderMobile {
     align-items: flex-start;
     background: transparent;
     flex-direction: column;
@@ -33,14 +34,13 @@
   &__account-wrapper {
     align-items: center;
     display: flex;
-    gap: 1rem;
 
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       width: 100%;
     }
 
     .#{$px}-link {
-      @media (max-width: #{$breakpoint-md - 1}) {
+      @include isHeaderMobile {
         width: 100%;
       }
 
@@ -53,7 +53,13 @@
     }
   }
 
+  &__login {
+    cursor: pointer;
+  }
+
   &__account-icon {
+    cursor: pointer;
+
     &:hover,
     &:focus,
     &:focus-within {
@@ -62,7 +68,7 @@
       }
     }
 
-    @media (max-width: #{$breakpoint-md - 1}) {
+    @include isHeaderMobile {
       display: none;
     }
   }
@@ -82,7 +88,7 @@
     }
     .#{$px}-user-management__language {
       &__selections {
-        @media (min-width: $breakpoint-md) {
+        @include isHeaderDesktop {
           background: $off-white;
           box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 85%);
           display: block;
@@ -92,7 +98,7 @@
           padding: 0;
           position: absolute;
           right: 0;
-          top: 30px;
+          top: $user-management-height;
           width: 100%;
 
           > li {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.30.1",
+  "version": "1.31.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -52,14 +52,14 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.1.0",
-    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-essentials": "^8.2.4",
     "@storybook/addon-interactions": "^8.1.4",
     "@storybook/addon-links": "^8.1.4",
-    "@storybook/addon-mdx-gfm": "^8.1.11",
+    "@storybook/addon-mdx-gfm": "^8.2.4",
     "@storybook/blocks": "^8.1.4",
     "@storybook/react": "^8.1.4",
     "@storybook/react-vite": "^8.1.4",
-    "@storybook/theming": "^8.2.3",
+    "@storybook/theming": "^8.2.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -86,7 +86,7 @@
     "rimraf": "^5.0.8",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
     "semantic-release": "^23.1.1",
     "storybook": "^8.1.4",
     "stylelint": "^16.6.1",