@phillips/seldon 1.55.1 → 1.57.0

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

@@ -1,5 +1,6 @@
 export declare enum ButtonVariants {
     primary = "primary",
     secondary = "secondary",
-    ghost = "ghost"
+    ghost = "ghost",
+    tertiary = "tertiary"
 }

package/dist/components/Button/types.js

@@ -1,4 +1,4 @@
-var e = /* @__PURE__ */ ((r) => (r.primary = "primary", r.secondary = "secondary", r.ghost = "ghost", r))(e || {});
+var e = /* @__PURE__ */ ((r) => (r.primary = "primary", r.secondary = "secondary", r.ghost = "ghost", r.tertiary = "tertiary", r))(e || {});
 export {
   e as ButtonVariants
 };

package/dist/components/IconButton/IconButton.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariants } from '../Button/types';
 export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> {
     /**
      * Button contents
@@ -7,6 +8,14 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      * How large should the button be?
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Mainly used for styling
+     */
+    variant?: ButtonVariants;
+    /**
+     * Should the button be disabled?
+     */
+    isDisabled?: boolean;
 }
-declare const IconButton: ({ children, size, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ children, size, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/dist/components/IconButton/IconButton.js

@@ -1,21 +1,29 @@
-import { jsx as n } from "react/jsx-runtime";
-import c from "../../node_modules/classnames/index.js";
-import e from "../Button/Button.js";
+import { jsx as c } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
+import p from "../Button/Button.js";
 import { getCommonProps as i } from "../../utils/index.js";
-import { ButtonVariants as p } from "../Button/types.js";
-const x = ({ children: m, size: r = "md", className: s, ...o }) => {
-  const { className: t, ...a } = i(o, "IconButton");
-  return /* @__PURE__ */ n(
-    e,
+import { ButtonVariants as l } from "../Button/types.js";
+const C = ({
+  children: s,
+  size: r = "md",
+  variant: m = l.primary,
+  isDisabled: a = !1,
+  className: n,
+  ...t
+}) => {
+  const { className: o, ...e } = i(t, "IconButton");
+  return /* @__PURE__ */ c(
+    p,
     {
-      ...a,
-      variant: p.primary,
-      className: c(t, `${t}--${r}`, s),
-      ...o,
-      children: m
+      ...e,
+      variant: m,
+      className: f(o, `${o}--${r}`, `${o}--${m}`, n),
+      isDisabled: a,
+      ...t,
+      children: s
     }
   );
 };
 export {
-  x as default
+  C as default
 };

package/dist/components/Navigation/NavigationItem/NavigationItem.d.ts

@@ -17,7 +17,7 @@ export interface NavigationItemProps extends ComponentProps<'li'> {
     /**
      * Optional group for navigation items
      */
-    navGroup?: 'nav-link-lg' | 'nav-link-sm';
+    navGroup?: 'nav-link-start' | 'nav-link-end';
     /**
      * Optional type for navigation item
      */

package/dist/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js

@@ -1,35 +1,51 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { getCommonProps as g, findChildrenOfType as v, px as s } from "../../../utils/index.js";
-import N from "../../../node_modules/classnames/index.js";
-import _, { forwardRef as x, useState as b } from "react";
-import { TextVariants as T } from "../../Text/types.js";
-import h from "../../Text/Text.js";
+import { jsxs as c, Fragment as _, jsx as e } from "react/jsx-runtime";
+import { getCommonProps as T, findChildrenOfType as b, px as l } from "../../../utils/index.js";
+import x from "../../../node_modules/classnames/index.js";
+import d, { forwardRef as I, useState as M } from "react";
+import { TextVariants as u } from "../../Text/types.js";
+import f from "../../Text/Text.js";
 import O from "../NavigationList/NavigationList.js";
-const I = x(
-  ({ id: n, label: i, children: m, className: l, onClick: p, ...d }, u) => {
-    const { className: e, ...c } = g({ id: n }, "NavigationItemTrigger"), [t, a] = b(!1), r = v(m, O);
-    return /* @__PURE__ */ f(
-      "li",
-      {
-        ...c,
-        ref: u,
-        "aria-expanded": t,
-        className: N(l, e, `${s}-nav__item`, {
-          [`${e}--hovered`]: t
-        }),
-        onClick: p,
-        onMouseOver: () => a(!0),
-        onMouseOut: () => a(!1),
-        ...d,
-        children: [
-          /* @__PURE__ */ o("button", { className: `${s}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ o(h, { variant: T.snwHeaderLink, children: i }) }),
-          r ? _.cloneElement(r[0], { className: `${e}__submenu` }) : void 0
-        ]
-      }
-    );
+import $ from "../../Accordion/Accordion.js";
+import S from "../../Accordion/AccordionItem.js";
+import { SSRMediaQuery as p } from "../../../providers/utils.js";
+const y = ({ id: r, label: n, children: t }) => /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
+  S,
+  {
+    variation: "sm",
+    id: r != null ? r : `${n}-accordion`,
+    label: /* @__PURE__ */ e(f, { variant: u.snwHeaderLink, children: n }),
+    children: t
+  }
+) }), C = I(
+  ({ id: r, label: n, children: t, className: g, onClick: v, ...h }, N) => {
+    const { className: o, ...i } = T({ id: r }, "NavigationItemTrigger"), [m, s] = M(!1), a = b(t, O);
+    return /* @__PURE__ */ c(_, { children: [
+      /* @__PURE__ */ e(p.Media, { lessThan: "md", children: /* @__PURE__ */ e(y, { id: r, label: n, ...i, children: a ? d.cloneElement(a[0], {
+        className: `${o}__submenu--mobile`
+      }) : void 0 }) }),
+      /* @__PURE__ */ e(p.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ c(
+        "li",
+        {
+          ...i,
+          ref: N,
+          "aria-expanded": m,
+          className: x(g, o, `${l}-nav__item`, {
+            [`${o}--hovered`]: m
+          }),
+          onClick: v,
+          onMouseOver: () => s(!0),
+          onMouseOut: () => s(!1),
+          ...h,
+          children: [
+            /* @__PURE__ */ e("button", { className: `${l}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ e(f, { variant: u.snwHeaderLink, children: n }) }),
+            a ? d.cloneElement(a[0], { className: `${o}__submenu` }) : void 0
+          ]
+        }
+      ) })
+    ] });
   }
 );
-I.displayName = "NavigationItemTrigger";
+C.displayName = "NavigationItemTrigger";
 export {
-  I as default
+  C as default
 };

package/dist/components/Navigation/NavigationList/NavigationList.d.ts

@@ -8,6 +8,14 @@ export interface NavigationListProps extends React.ComponentProps<'ul'> {
      * Is the nav list offscreen?
      */
     isOffScreen?: boolean;
+    /**
+     * Optional left section heading
+     */
+    leftSectionHeading?: string;
+    /**
+     * Optional right section heading
+     */
+    rightSectionHeading?: string;
 }
 declare const NavigationList: React.ForwardRefExoticComponent<Omit<NavigationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default NavigationList;

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

@@ -1,35 +1,43 @@
-import { jsxs as p, jsx as _ } from "react/jsx-runtime";
-import * as r from "react";
-import { px as a } from "../../../utils/index.js";
-import e from "../../../node_modules/classnames/index.js";
-const c = r.forwardRef(
-  ({ id: i, children: s, className: m, isOffScreen: o }, v) => {
-    const n = r.Children.toArray(s).filter((t) => {
-      if (t && t.props.navGroup === "nav-link-lg")
-        return t;
-    }), l = r.Children.toArray(s).filter((t) => {
-      if (t && t.props.navGroup === "nav-link-sm")
-        return t;
+import { jsxs as e, jsx as c } from "react/jsx-runtime";
+import * as i from "react";
+import { px as t } from "../../../utils/index.js";
+import l from "../../../node_modules/classnames/index.js";
+import { TextVariants as p } from "../../Text/types.js";
+import f from "../../Text/Text.js";
+const h = i.forwardRef(
+  ({ id: o, children: n, className: d, isOffScreen: _, leftSectionHeading: m, rightSectionHeading: v }, u) => {
+    const s = i.Children.toArray(n).filter((a) => {
+      if (a && a.props.navGroup === "nav-link-start")
+        return a;
+    }), r = i.Children.toArray(n).filter((a) => {
+      if (a && a.props.navGroup === "nav-link-end")
+        return a;
     });
-    return /* @__PURE__ */ p(
+    return /* @__PURE__ */ e(
       "ul",
       {
-        "aria-hidden": o,
-        id: i,
-        "data-testid": i,
+        "aria-hidden": _,
+        id: o,
+        "data-testid": o,
         role: "list",
-        className: e(m, `${a}-nav__list`, { [`${a}-nav__list--offscreen`]: o }),
-        ref: v,
+        className: l(d, `${t}-nav__list`, { [`${t}-nav__list--offscreen`]: _ }),
+        ref: u,
         children: [
-          n.length > 0 ? /* @__PURE__ */ _("div", { className: e(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: n }) : null,
-          l.length > 0 ? /* @__PURE__ */ _("div", { className: e(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: l }) : null,
-          !n.length && !l.length ? s : null
+          s.length > 0 ? /* @__PURE__ */ e("div", { className: l(`${t}-nav__list__section`, `${t}-nav__list__section--start`), children: [
+            m ? /* @__PURE__ */ c(f, { variant: p.heading4, className: `${t}-nav__list__section--start__title`, children: m }) : null,
+            s
+          ] }) : null,
+          r.length > 0 ? /* @__PURE__ */ e("div", { className: l(`${t}-nav__list__section`, `${t}-nav__list__section--end`), children: [
+            v ? /* @__PURE__ */ c(f, { variant: p.heading4, className: `${t}-nav__list__section--end__title`, children: v }) : null,
+            r
+          ] }) : null,
+          !s.length && !r.length ? n : null
         ]
       }
     );
   }
 );
-c.displayName = "NavigationList";
+h.displayName = "NavigationList";
 export {
-  c as default
+  h as default
 };

package/dist/components/Search/Search.js

@@ -1,23 +1,23 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import c, { useEffect as P } from "react";
-import { getCommonProps as y, px as j, encodeURLSearchParams as C } from "../../utils/index.js";
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import i, { useEffect as y } from "react";
+import { getCommonProps as j, px as D, encodeURLSearchParams as C } from "../../utils/index.js";
 import p from "../../node_modules/classnames/index.js";
-import D from "../Input/Input.js";
-import H from "../Link/Link.js";
-import O from "./SearchResults/SearchResults.js";
-import { TextVariants as V } from "../Text/types.js";
-import A from "../Text/Text.js";
-import { useOnClickOutside as F } from "../../node_modules/usehooks-ts/dist/index.js";
-import { HeaderContext as K } from "../../site-furniture/Header/Header.js";
-import { SearchButton as M } from "./SearchButton.js";
-import U from "../../node_modules/react-transition-group/esm/CSSTransition.js";
-const te = ({
+import H from "../Input/Input.js";
+import O from "../Link/Link.js";
+import V from "./SearchResults/SearchResults.js";
+import { TextVariants as A } from "../Text/types.js";
+import F from "../Text/Text.js";
+import { useOnClickOutside as K } from "../../node_modules/usehooks-ts/dist/index.js";
+import { HeaderContext as M } from "../../site-furniture/Header/Header.js";
+import { SearchButton as U } from "./SearchButton.js";
+import q from "../../node_modules/react-transition-group/esm/CSSTransition.js";
+const ne = ({
   onSearch: u,
-  searchResults: E = [],
-  state: i = "idle",
-  defaultValue: N = "",
-  className: R,
-  placeholder: I = "",
+  searchResults: N = [],
+  state: c = "idle",
+  defaultValue: E = "",
+  className: I,
+  placeholder: R = "",
   searchButtonText: l = "Search",
   loadingText: b = "Search In Progress...",
   invalidText: w = "Invalid search",
@@ -26,119 +26,119 @@ const te = ({
   ...S
 }) => {
   var g;
-  const { className: e, "data-testid": d, ...L } = y(S, "Search"), o = c.useContext(K), m = c.useRef(null), f = c.useRef(null), x = c.useRef(null), a = o.isSearchExpanded, s = (g = m.current) == null ? void 0 : g.value;
-  F(x, () => $(!1));
-  const v = (r) => {
-    var n;
+  const { className: e, "data-testid": d, ...L } = j(S, "Search"), o = i.useContext(M), m = i.useRef(null), h = i.useRef(null), v = i.useRef(null), t = o.isSearchExpanded, n = (g = m.current) == null ? void 0 : g.value, T = u ? (r) => {
+    u(r.target.value);
+  } : void 0;
+  K(v, () => $(!1));
+  const x = (r) => {
+    var s;
     if (r.stopPropagation(), r.key === "Enter") {
-      if (r.preventDefault(), s && s.length > 2) {
-        const T = C(_(s));
-        window.location.href = T;
+      if (r.preventDefault(), n && n.length > 2) {
+        const P = C(_(n));
+        window.location.href = P;
       }
       r.currentTarget instanceof HTMLAnchorElement && r.currentTarget.click();
     }
-    r.key === "Escape" && (o.setIsSearchExpanded(!1), (n = f.current) == null || n.reset());
+    r.key === "Escape" && (o.setIsSearchExpanded(!1), (s = h.current) == null || s.reset());
   };
-  P(() => {
+  y(() => {
     var r;
-    if (a) {
+    if (t) {
       (r = m.current) == null || r.focus();
       return;
     }
-  }, [a]);
+  }, [t]);
   const $ = (r) => {
-    var n;
-    o.setIsSearchExpanded(r), (n = f.current) == null || n.reset();
+    var s;
+    o.setIsSearchExpanded(r), (s = h.current) == null || s.reset();
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ a("div", { className: `${e}__container`, children: /* @__PURE__ */ f(
     "div",
     {
       onClick: () => o.setIsSearchExpanded(!0),
-      className: `${e}__container`,
-      ref: x,
+      className: `${e}__container__inner`,
+      ref: v,
       children: [
-        /* @__PURE__ */ t(A, { variant: V.heading4, className: `${e}__container__label`, children: l }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(F, { variant: A.heading4, className: `${e}__container__inner__label`, children: l }),
+        /* @__PURE__ */ a(
           "div",
           {
             ...L,
-            className: p(e, R, { [`${e}--active`]: a }),
+            className: p(e, I, { [`${e}--active`]: t }),
             "data-testid": d,
             role: "search",
             ...S,
-            children: /* @__PURE__ */ h(
+            children: /* @__PURE__ */ f(
               "form",
               {
                 "data-testid": `${d}-form`,
                 className: p(`${e}__form`, {
-                  [`${e}__form--active`]: a
+                  [`${e}__form--active`]: t
                 }),
-                ref: f,
+                ref: h,
                 children: [
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ f(
                     "div",
                     {
                       className: p(`${e}__content-wrapper`, {
-                        [`${e}__content-wrapper--active`]: a
+                        [`${e}__content-wrapper--active`]: t
                       }),
                       role: "combobox",
                       "aria-haspopup": "listbox",
                       children: [
-                        /* @__PURE__ */ t(
-                          U,
+                        /* @__PURE__ */ a(
+                          q,
                           {
-                            in: a,
-                            classNames: `${j}-input`,
+                            in: t,
+                            classNames: `${D}-input`,
                             addEndListener: () => {
                             },
-                            children: /* @__PURE__ */ t(
-                              D,
+                            children: /* @__PURE__ */ a(
+                              H,
                               {
-                                "aria-hidden": !a,
+                                "aria-hidden": !t,
                                 className: `${e}__input`,
                                 id: "search-input",
                                 hideLabel: !0,
                                 labelText: l,
-                                placeholder: a ? I : "",
+                                placeholder: t ? R : "",
                                 type: "text",
-                                defaultValue: N,
-                                invalid: i === "invalid",
+                                defaultValue: E,
+                                invalid: c === "invalid",
                                 invalidText: w,
-                                onKeyDown: v,
-                                onChange: u ? (r) => {
-                                  u(r.target.value);
-                                } : void 0,
+                                onKeyDown: x,
+                                onChange: T,
                                 ref: m
                               }
                             )
                           }
                         ),
-                        /* @__PURE__ */ t(
-                          M,
+                        /* @__PURE__ */ a(
+                          U,
                           {
                             className: e,
                             searchButtonText: l,
-                            state: i,
+                            state: c,
                             testId: d,
-                            isSearchExpanded: a,
+                            isSearchExpanded: t,
                             setIsSearchExpanded: $
                           }
                         )
                       ]
                     }
                   ),
-                  s && s.length > 2 ? /* @__PURE__ */ t(
-                    O,
+                  n && n.length > 2 ? /* @__PURE__ */ a(
+                    V,
                     {
-                      autoCompleteResults: E,
-                      isLoading: i === "loading",
+                      autoCompleteResults: N,
+                      isLoading: c === "loading",
                       loadingText: b,
-                      onKeyDown: v,
-                      children: /* @__PURE__ */ t("li", { className: `${e}__result`, children: /* @__PURE__ */ t(
-                        H,
+                      onKeyDown: x,
+                      children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
+                        O,
                         {
-                          href: ((r) => C(_(r)))(s),
-                          children: /* @__PURE__ */ t("p", { children: k(s) })
+                          href: ((r) => C(_(r)))(n),
+                          children: /* @__PURE__ */ a("p", { children: k(n) })
                         }
                       ) }, "viewAllSearchResults")
                     }
@@ -150,8 +150,8 @@ const te = ({
         )
       ]
     }
-  );
+  ) });
 };
 export {
-  te as default
+  ne as default
 };

package/dist/scss/_vars.scss

@@ -52,6 +52,9 @@ $post-sale-magenta: $post-sale-pink;
 $header-color: $pure-black;
 $text-color: $soft-black;
 
+// Interactive Colors
+$button-hover: #75716f;
+
 ////////////////////////
 /// FONTS:
 ///////////////////////
@@ -348,15 +351,15 @@ $margin-xxl: var(--spacing-xxl);
 ///////////////////////
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
-  --header-height: 75px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  --header-height: 73px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
   --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
 
   @media (min-width: $breakpoint-md) {
-    --header-height: 109px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+    --header-height: 123px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
   }
 
   @media (min-width: $breakpoint-xl) {
-    --header-height: 121px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+    --header-height: 135px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
     --search-size: 2.875rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
   }
 }

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

@@ -5,52 +5,123 @@
 
   align-items: center;
   background-color: $pure-black;
-  border: 0;
-  border-radius: 3em;
-  color: white;
+  border: 1px solid transparent;
+  border-radius: 100px;
+  color: $pure-white;
   cursor: pointer;
   display: inline-flex;
+  font-weight: 600;
+  gap: $margin-xsm;
   justify-content: center;
-  min-width: 3rem;
-  padding: 0.5em $spacing-md;
+  padding: 0 $padding-md;
+  position: relative;
   transition:
     color 0.25s,
-    background-color 0.25s,
-    font-weight 0.25s;
+    background-color 0.25s;
+
+  svg {
+    fill: $pure-white;
+
+    path {
+      fill: $pure-white;
+      transition: 0.25s;
+    }
+  }
+
+  &:hover {
+    background-color: $button-hover;
+
+    svg {
+      fill: $pure-white;
+    }
+  }
 
-  &:hover,
   &:focus-visible {
-    background-color: $primary-black;
+    outline: 0.5px solid $pure-white;
+    outline-offset: -4.5px;
 
     svg {
       fill: $pure-white;
     }
   }
 
-  svg {
-    fill: $pure-white;
-    margin-inline-end: 0.5rem;
-    transition: fill 0.25s;
-    width: 1em;
+  &--sm {
+    font-size: 0.75rem;
+    height: 44px;
+
+    svg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+
+  &--md,
+  &--lg {
+    font-size: 1rem;
+    height: 48px;
+
+    svg {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
   }
 
   &--secondary,
   &--ghost {
-    background-color: transparent;
-    border: 1px solid;
-    color: $text-color;
+    background-color: $pure-white;
+    border: 1px solid $pure-black;
+    color: $pure-black;
+    mix-blend-mode: difference;
+    position: relative;
+    transition: border 0.3s ease-out;
+
+    &::before {
+      border-radius: 100px;
+      box-sizing: border-box;
+      content: '';
+      display: inline-block;
+      height: 0;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transition: all 0.25s ease;
+      width: 0;
+      z-index: -2;
+    }
 
-    &:hover,
-    &:focus-visible {
+    &:hover {
+      background-color: transparent;
+      border: 1px solid transparent;
       color: $pure-white;
 
       svg {
         fill: $pure-white;
+
+        path {
+          fill: $pure-white;
+        }
+      }
+
+      &::before {
+        background: $button-hover;
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
       }
     }
 
+    &:focus-visible {
+      background-color: $pure-white;
+      outline-color: $soft-black;
+    }
+
     svg {
-      fill: $text-color;
+      fill: $pure-black;
+
+      path {
+        fill: $pure-black;
+      }
     }
   }
 
@@ -58,35 +129,69 @@
     border-color: transparent;
   }
 
-  &.#{$px}-button--icon-last svg {
-    margin-inline-end: unset;
-    margin-inline-start: 0.5rem;
-  }
+  &--tertiary {
+    background-color: transparent;
+    border: 0;
+    color: $pure-black;
+    height: 28px;
+    padding: 0;
 
-  &--sm {
-    font-size: 0.75rem;
-  }
+    svg {
+      fill: $pure-black;
 
-  &--md {
-    font-size: 1rem;
-  }
+      path {
+        fill: $pure-black;
+      }
+    }
 
-  &--lg {
-    font-size: 1.05rem;
-    padding: 0.75em 1.75em;
+    &:hover {
+      background-color: transparent;
+      color: $button-hover;
+
+      svg {
+        fill: $button-hover;
+
+        path {
+          fill: $button-hover;
+        }
+      }
+    }
+
+    &:focus-visible {
+      background-color: $pure-white;
+      border-radius: 0;
+      outline-color: $soft-black;
+      outline-offset: 4.5px;
+      padding: 0 4px;
+    }
   }
 
   &:disabled {
     background-color: $white;
-    border: 1px solid $medium-gray;
-    color: $medium-gray;
+    border: 1px solid $light-gray;
+    color: $light-gray;
     cursor: default;
 
+    &:hover {
+      &::before {
+        all: unset;
+      }
+    }
+
     svg {
-      fill: $medium-gray;
+      fill: $light-gray;
+
+      path {
+        fill: $light-gray;
+      }
     }
   }
 
+  &--ghost:disabled,
+  &--tertiary:disabled {
+    border-color: transparent;
+  }
+
   * {
     margin: 0;
   }

package/dist/scss/components/IconButton/_iconButton.scss

@@ -1,49 +1,103 @@
 @use '../../allPartials' as *;
 
 .#{$px}-icon-button {
-  background-color: unset;
-  border: unset;
-  color: $text-color;
-  min-width: unset;
-  padding: unset;
+  padding: 0;
 
   & > svg {
-    fill: $pure-black;
-    height: 100%;
-    margin-inline-end: unset;
-    width: 100%;
+    position: absolute;
   }
 
-  &:hover {
-    background-color: unset;
-    opacity: 0.75;
+  &:focus {
+    &:focus {
+      outline: 0.5px solid $soft-black;
+      outline-offset: -4.5px;
+
+      svg {
+        fill: $pure-white;
+      }
+    }
+  }
+
+  &--primary,
+  &--ghost {
+    background: $pure-white;
+    color: $pure-black;
+    height: 44px;
+    width: 44px;
 
     & > svg {
       fill: $pure-black;
+      height: 100%;
+      height: 1.5rem;
+      margin-inline-end: unset;
+      position: absolute;
+      width: 100%;
+      width: 1.5rem;
+
+      path {
+        fill: $pure-black;
+      }
+    }
+
+    &:hover {
+      svg {
+        fill: $pure-white;
+
+        path {
+          fill: $pure-white;
+        }
+      }
     }
   }
 
-  &:focus {
-    background-color: unset;
-    fill: $pure-black;
+  &--ghost {
+    border-color: transparent;
+
+    svg {
+      fill: $keyline-gray;
+
+      path {
+        fill: $keyline-gray;
+      }
+    }
+  }
+
+  &--secondary,
+  &--tertiary {
+    height: 28px;
+    width: 28px;
 
     & > svg {
       fill: $pure-black;
+      height: 100%;
+      height: 1rem;
+      margin-inline-end: unset;
+      position: absolute;
+      width: 100%;
+      width: 1rem;
+
+      path {
+        fill: $pure-black;
+      }
     }
   }
 
-  &--sm {
-    height: 1rem;
-    width: 1rem;
+  &--tertiary {
+    &:focus {
+      border-radius: 100px;
+    }
   }
 
-  &--md {
-    height: 1.5rem;
-    width: 1.5rem;
-  }
+  &:disabled {
+    background-color: $white;
+    border: 1px solid $light-gray;
 
-  &--lg {
-    height: 2rem;
-    width: 2rem;
+    svg {
+      fill: $light-gray;
+
+      path {
+        fill: $light-gray;
+      }
+    }
   }
 }

package/dist/scss/components/Link/_link.scss

@@ -3,7 +3,6 @@
 .#{$px}-link {
   color: $pure-black;
   text-decoration: none;
-  white-space: nowrap;
 
   &--email,
   &--link {

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

@@ -65,9 +65,41 @@
   flex-direction: column;
   gap: $spacing-sm;
 
-  &--large-cta {
+  .#{$px}-text {
+    margin-bottom: 0;
+  }
+
+  &--start,
+  &--end {
+    &__title {
+      @include isHeaderMobile {
+        border-bottom: 1px solid $light-gray;
+        padding-bottom: 0.625rem;
+      }
+    }
+  }
+
+  &--end {
+    @include isHeaderMobile {
+      margin-top: $spacing-md;
+    }
+  }
+
+  &--start {
     margin-right: 1rem;
 
+    & li:last-child {
+      a {
+        border-bottom: 0;
+        padding: $spacing-sm 0;
+        text-decoration: underline;
+
+        span {
+          text-transform: uppercase;
+        }
+      }
+    }
+
     @include isHeaderMobile {
       margin-right: 0;
     }

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

@@ -4,12 +4,15 @@
   flex-direction: column;
   justify-content: center;
 
+  @include isHeaderMobile {
+    display: none;
+  }
+
   & > button {
     color: $pure-black;
     display: flex;
     justify-content: flex-start;
     position: relative;
-    white-space: nowrap;
     width: 100%;
 
     @include isHeaderDesktop {
@@ -30,12 +33,14 @@
     }
 
     & > &__submenu {
+      border-top: 1px solid $light-gray;
       pointer-events: none;
       transform: translateY(-100%);
       transition: none; // remove this when implementing submenu transitions
     }
 
     &--hovered &__submenu {
+      align-items: flex-start;
       height: fit-content;
       left: 0;
       max-height: unset;
@@ -44,7 +49,7 @@
       pointer-events: all;
       position: fixed; // has to bust out of the box containing it on desktop
       right: 0;
-      top: calc($header-height);
+      top: $header-height;
       transform: translateY(0);
     }
   }
@@ -61,7 +66,6 @@
 
       li {
         display: inline;
-        white-space: nowrap;
 
         button,
         a,

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

@@ -37,8 +37,49 @@ $top-transition: top 0.25s ease-in 0.1s;
       z-index: 5;
     }
 
+    &__section {
+      display: grid;
+      gap: $spacing-sm;
+      width: 50%;
+
+      &:only-child {
+        width: 100%;
+      }
+    }
+
+    .#{$px}-accordion {
+      display: none;
+    }
+  }
+
+  @include isHeaderMobile {
     &__section {
       width: 100%;
     }
+    .#{$px}-accordion {
+      border-bottom: 0;
+      border-top: 0;
+      margin-bottom: 0;
+
+      &-item {
+        padding: $spacing-sm 0;
+
+        &__border-bottom {
+          border-bottom: 1px solid $light-gray;
+        }
+
+        &-label {
+          opacity: 1;
+        }
+      }
+    }
+    .#{$px}-link--snwHeaderLink {
+      border-bottom: 1px solid $light-gray;
+      flex-wrap: wrap;
+      padding: $spacing-sm 0;
+    }
+    .#{$px}-link--snwFlyoutLink {
+      padding: 0;
+    }
   }
 }

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

@@ -13,13 +13,18 @@
     justify-content: center;
     padding: 0 $spacing-sm;
     position: relative;
+    width: 100%;
 
     > .#{$px}-nav__list {
-      border-top: 1px solid $light-gray;
+      padding-top: 0;
 
       @include isHeaderDesktop {
         border-top: unset;
       }
+
+      .#{$px}-nav__item + .#{$px}-accordion {
+        border-top: 0;
+      }
     }
 
     @include isHeaderDesktop {

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -11,6 +11,10 @@
   top: $search-size;
   width: 100%;
 
+  @include isHeaderMobile {
+    padding: $spacing-sm 0;
+  }
+
   &-container {
     background: $white;
     display: flex;

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

@@ -15,8 +15,13 @@
     top: 0;
   }
 
+  @include isHeaderMobile {
+    left: calc(100% - $search-size - $spacing-md);
+    right: $spacing-md;
+  }
+
   &--active {
-    left: 0;
+    left: $spacing-md;
     transition: left 0.25s ease-in 0.2s;
   }
 
@@ -85,6 +90,14 @@
         margin: 0;
         padding: $spacing-sm 0 $spacing-sm $spacing-sm;
 
+        @include isHeaderMobile {
+          height: calc(var(--spacing-md) + var(--search-size));
+          line-height: calc(var(--spacing-md) + var(--search-size));
+          padding: $spacing-md 0;
+          position: relative;
+          top: calc($spacing-md * -1);
+        }
+
         @include media($size-xl) {
           height: 2.875rem;
         }
@@ -102,34 +115,50 @@
 }
 
 .#{$px}-search__container {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  padding: $padding-md 0;
-  pointer-events: all;
-
-  @include isHeaderDesktop {
-    cursor: default;
-    padding: 0;
-  }
-
   @include isHeaderMobile {
+    border-bottom: 1px solid $light-gray;
+    left: 50%;
+    margin-left: -50vw;
     position: relative;
+    width: 100vw;
   }
 
-  &__label {
-    display: none;
-    margin: 0;
+  &__inner {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 $padding-md;
+    pointer-events: all;
+
+    @include isHeaderDesktop {
+      cursor: default;
+      padding: 0;
+    }
 
     @include isHeaderMobile {
       align-items: center;
-      cursor: pointer;
-      display: flex;
-      flex-wrap: wrap;
-      height: $search-size;
-      margin: 0;
-      padding: 0 $spacing-sm;
-      pointer-events: all;
+      height: calc(var(--spacing-md) + var(--search-size));
+      position: relative;
+    }
+
+    .#{$px}-text {
+      margin-bottom: 0;
+      padding-left: 0;
+    }
+
+    &__label {
+      display: none;
+
+      @include isHeaderMobile {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        flex-wrap: wrap;
+        height: $search-size;
+        margin: 0;
+        padding: 0 $spacing-sm;
+        pointer-events: all;
+      }
     }
   }
 }

package/dist/scss/components/Search/_searchButton.scss

@@ -16,6 +16,12 @@
   top: 0;
   width: $search-size;
 
+  @include isHeaderMobile {
+    height: calc($spacing-md + $search-size);
+    justify-content: flex-end;
+    top: calc($spacing-md * -1);
+  }
+
   @include media($size-xl) {
     padding: 0 0 0.125rem;
   }

package/dist/scss/patterns/LanguageSelector/_languageSelector.scss

@@ -5,7 +5,6 @@
   display: flex;
   min-width: 87px; // needed to handle English vs Chinese option.  Arguably this should be determined by the Dropdown component the longest element in the dropdown
   opacity: 1;
-  padding-bottom: 10rem; // needed for bottom accordion
   transition: opacity 0.25s ease-in;
 
   &--hidden {
@@ -13,6 +12,31 @@
     pointer-events: none;
   }
 
+  @include isHeaderDesktop {
+    &.#{$px}-accordion {
+      display: none;
+    }
+  }
+
+  @include isHeaderMobile {
+    border-top: 0;
+    &.#{$px}-accordion {
+      border-bottom: 0;
+    }
+    .#{$px}-accordion-item {
+      border-top: 1px solid $light-gray;
+      padding: $spacing-sm 0;
+
+      &-label {
+        opacity: 1;
+      }
+
+      &__border-bottom {
+        border-bottom: 0;
+      }
+    }
+  }
+
   &.#{$px}-dropdown {
     display: flex;
     padding: 0;

package/dist/scss/patterns/UserManagement/_userManagement.scss

@@ -15,7 +15,6 @@
   }
 
   @include isHeaderMobile {
-    justify-content: center;
     min-width: 44px; // matching the size of mobile menu icon to allow for equal spacing and centering of logo
   }
 
@@ -36,6 +35,10 @@
       @include underline($padding-xsm);
     }
 
+    @include isHeaderMobile {
+      padding-right: 0;
+    }
+
     > p.#{$px}-text {
       margin: 0;
 

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

@@ -17,7 +17,7 @@
     cursor: pointer;
     display: flex;
     height: $mobile-minimum-clickable-area;
-    justify-content: center;
+    justify-content: flex-start;
     padding: 0;
     width: $mobile-minimum-clickable-area;
 
@@ -27,7 +27,7 @@
 
     /* This is a pseudo icon shown within the button, so we can do fancy transitions */
     span {
-      background-color: $dark-gray;
+      background-color: $pure-black;
       color: transparent;
       display: block;
       height: 2px;
@@ -37,7 +37,7 @@
 
       &::before,
       &::after {
-        background-color: $dark-gray;
+        background-color: $pure-black;
         content: '';
         display: block;
         height: 2px;
@@ -112,9 +112,19 @@
       display: flex;
       padding: 0 $spacing-md;
 
+      @include isHeaderMobile {
+        flex-direction: column;
+        height: calc(100vh - var(--header-height) - 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 {

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

@@ -65,7 +65,14 @@ const I = O(R), L = T(
           ]
         }
       ) }),
-      /* @__PURE__ */ a("div", { className: d(`${e}-header__overlay`, { [`${e}-header__overlay--active`]: c }) })
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: d(`${e}-header__overlay`, {
+            [`${e}-header__overlay--active`]: c
+          })
+        }
+      )
     ] });
   }
 );

package/package.json

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