@phillips/seldon 1.77.2 → 1.77.4

package/dist/components/Accordion/AccordionItem.js

@@ -1,112 +1,119 @@
-import { jsxs as $, jsx as t } from "react/jsx-runtime";
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
 import { getCommonProps as f } from "../../utils/index.js";
 import g from "../../assets/plus.svg.js";
 import v from "../../assets/minus.svg.js";
-import I from "../../assets/lock.svg.js";
-import a from "../../node_modules/classnames/index.js";
-import { Item as _, Trigger as x, Content as C } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-import { AccordionItemVariant as h } from "./types.js";
+import _ from "../../assets/lock.svg.js";
+import l from "../../node_modules/classnames/index.js";
+import { Item as I, Trigger as x, Content as A } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import { AccordionItemVariant as $ } from "./types.js";
 import { getIconClasses as u } from "./utils.js";
-const A = ({
+const k = ({
   children: n,
-  className: e,
+  className: r,
   baseClassName: o,
-  disable: s,
-  isLargeVariation: r,
-  id: c
+  disable: d,
+  isLargeVariation: c,
+  id: e
 }) => {
-  const i = s, l = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    I,
+  const s = d, a = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    _,
     {
-      className: u(o, r, "lock"),
-      "data-testid": `${c}-lockedIcon`,
+      className: u(o, c, "lock"),
+      "data-testid": `${e}-lockedIcon`,
       "aria-hidden": !0
     }
   ) }), p = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
     g,
     {
-      className: u(o, r, "plus"),
-      "data-testid": `${c}-plusIcon`,
+      className: u(o, c, "plus"),
+      "data-testid": `${e}-plusIcon`,
       "aria-hidden": !0
     }
-  ) }), d = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+  ) }), i = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
     v,
     {
-      className: u(o, r, "minus"),
-      "data-testid": `${c}-minusIcon`,
+      className: u(o, c, "minus"),
+      "data-testid": `${e}-minusIcon`,
       "aria-hidden": !0
     }
   ) });
   return /* @__PURE__ */ t(
     x,
     {
-      "data-disabled": s,
+      "data-disabled": d,
       asChild: !0,
-      className: a(o, { [`${o}--hoverable`]: !s }, e),
-      children: /* @__PURE__ */ $("div", { "data-testid": `${c}-trigger`, children: [
-        /* @__PURE__ */ t("div", { className: a(`${o}__text`, { [`${o}__text--lg`]: r }), children: n }),
-        i && l,
-        !i && p,
-        !i && d
+      className: l(
+        o,
+        { [`${o}--large`]: c },
+        { [`${o}--hoverable`]: !d },
+        r
+      ),
+      children: /* @__PURE__ */ h("div", { "data-testid": `${e}-trigger`, children: [
+        /* @__PURE__ */ t("div", { className: l(`${o}__text`, { [`${o}__text--lg`]: c }), children: n }),
+        s && a,
+        !s && p,
+        !s && i
       ] })
     }
   );
-}, N = ({
+}, C = ({
   children: n,
-  baseClassName: e,
+  baseClassName: r,
   disable: o,
-  hasTransition: s,
-  isLargeVariation: r,
-  className: c
-}) => o && n ? /* @__PURE__ */ t("div", { children: n }) : /* @__PURE__ */ t(
-  C,
+  hasTransition: d,
+  isLargeVariation: c,
+  className: e
+}) => o && n ? /* @__PURE__ */ t("div", { className: `${r}__content--locked`, children: n }) : /* @__PURE__ */ t(
+  A,
   {
     asChild: !0,
-    className: a(
-      `${e}__content`,
-      { [`${e}__content--lg`]: r },
-      { [`${e}--transition`]: s },
-      c
+    className: l(
+      `${r}__content`,
+      { [`${r}__content--lg`]: c },
+      { [`${r}--transition`]: d },
+      e
     ),
     children: n
   }
-), q = ({
+), y = ({
   isLocked: n = !1,
-  variant: e = h.sm,
+  variant: r = $.sm,
   id: o,
-  label: s,
-  isLastItem: r,
-  hasTransition: c = !1,
-  children: i,
-  ...l
+  label: d,
+  isLastItem: c,
+  hasTransition: e = !1,
+  children: s,
+  ...a
 }) => {
-  const { className: p } = f({ id: o }, "Accordion"), d = e === h.lg, m = `${p}-item`;
-  return /* @__PURE__ */ $(
-    _,
+  const { className: p } = f({ id: o }, "Accordion"), i = r === $.lg, m = `${p}-item`;
+  return /* @__PURE__ */ h(
+    I,
     {
       disabled: n,
       value: o,
-      className: a(m, { [`${m}__border-bottom`]: !r }),
-      ...l,
+      className: l(m, {
+        [`${m}__border-bottom`]: !c
+      }),
+      ...a,
       children: [
         /* @__PURE__ */ t(
-          A,
+          k,
           {
             disable: n,
-            isLargeVariation: d,
+            isLargeVariation: i,
             id: o,
             baseClassName: `${m}-label`,
-            children: s
+            children: d
           }
         ),
         /* @__PURE__ */ t(
-          N,
+          C,
           {
             disable: n,
-            hasTransition: c,
-            isLargeVariation: d,
+            hasTransition: e,
+            isLargeVariation: i,
             baseClassName: m,
-            children: /* @__PURE__ */ t("div", { className: "radix-accordion-content", children: i })
+            children: /* @__PURE__ */ t("div", { className: "radix-accordion-content", children: s })
           }
         )
       ]
@@ -114,5 +121,5 @@ const A = ({
   );
 };
 export {
-  q as default
+  y as default
 };

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

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

package/dist/patterns/LanguageSelector/LanguageSelector.js

@@ -6,69 +6,71 @@ import { SupportedLanguages as s } from "../../types/commonTypes.js";
 import C from "../../components/Dropdown/Dropdown.js";
 import k from "../../components/Accordion/Accordion.js";
 import w from "../../components/Accordion/AccordionItem.js";
-import y from "../../components/Navigation/NavigationItem/NavigationItem.js";
-import { LinkVariants as M } from "../../components/Link/types.js";
-import { TextVariants as E } from "../../components/Text/types.js";
-import P from "../../components/Text/Text.js";
-import V from "../../components/Navigation/NavigationList/NavigationList.js";
+import { AccordionItemVariant as y } from "../../components/Accordion/types.js";
+import M from "../../components/Navigation/NavigationItem/NavigationItem.js";
+import { LinkVariants as V } from "../../components/Link/types.js";
+import { TextVariants as A } from "../../components/Text/types.js";
+import E from "../../components/Text/Text.js";
+import I from "../../components/Navigation/NavigationList/NavigationList.js";
 import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
-const j = ({
+const P = ({
   id: a,
-  value: n,
+  value: l,
   // can't be passed to the accordion
-  onValueChange: r,
+  onValueChange: o,
   label: t,
-  options: l,
+  options: n,
   ...m
 }) => /* @__PURE__ */ e(k, { ...m, children: /* @__PURE__ */ e(
   w,
   {
     hasTransition: !0,
     id: a != null ? a : "language-selector-accordion",
-    label: /* @__PURE__ */ e(P, { variant: E.snwHeaderLink, children: t }),
-    children: /* @__PURE__ */ e(V, { id: `${a}-navlist`, children: l.map((o) => /* @__PURE__ */ e(
-      y,
+    label: /* @__PURE__ */ e(E, { variant: A.snwHeaderLink, children: t }),
+    variant: y.lg,
+    children: /* @__PURE__ */ e(I, { id: `${a}-navlist`, children: n.map((r) => /* @__PURE__ */ e(
+      M,
       {
-        label: o.label,
-        onClick: () => r(o.value),
-        navType: M.snwFlyoutLink
+        label: r.label,
+        onClick: () => o(r.value),
+        navType: V.snwFlyoutLink
       },
-      o.value
+      r.value
     )) })
   }
-) }), A = S(
+) }), j = S(
   ({
     className: a,
-    currentLanguage: n = s.en,
-    languageOptions: r = [
+    currentLanguage: l = s.en,
+    languageOptions: o = [
       { label: "English", value: s.en },
       { label: "中文", value: s.zh }
     ],
     onLanguageChange: t = T,
-    id: l,
+    id: n,
     isHidden: m,
-    ...o
+    ...r
   }, c) => {
-    var d, g;
-    const { className: p, ...h } = N({ id: l }, "LanguageSelector"), v = (g = (d = r.find((i) => i.value === n)) == null ? void 0 : d.label) != null ? g : "English", u = {
+    var u, g;
+    const { className: p, ...h } = N({ id: n }, "LanguageSelector"), v = (g = (u = o.find((i) => i.value === l)) == null ? void 0 : u.label) != null ? g : "English", d = {
       ...h,
-      ...o,
-      id: l,
+      ...r,
+      id: n,
       className: x(p, a, {
         [`${p}--hidden`]: m
       }),
-      options: r,
-      value: n,
+      options: o,
+      value: l,
       onValueChange: (i) => t(i),
       label: v
     };
     return /* @__PURE__ */ b(L, { children: [
-      /* @__PURE__ */ e(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ e(C, { ...u, ref: c }) }),
-      /* @__PURE__ */ e(f.Media, { lessThan: "md", children: /* @__PURE__ */ e(j, { ...u, ref: c }) })
+      /* @__PURE__ */ e(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ e(C, { ...d, ref: c }) }),
+      /* @__PURE__ */ e(f.Media, { lessThan: "md", children: /* @__PURE__ */ e(P, { ...d, ref: c }) })
     ] });
   }
 );
-A.displayName = "LanguageSelector";
+j.displayName = "LanguageSelector";
 export {
-  A as default
+  j as default
 };

package/dist/scss/components/Accordion/_accordion.scss

@@ -2,14 +2,16 @@
 
 .#{$px}-accordion {
   border-top: 1px solid $light-gray;
-  margin-bottom: 10px;
   width: 100%;
 }
 
 .#{$px}-accordion-item {
-  padding: $spacing-sm 0;
   width: 100%;
 
+  &--large {
+    padding: $spacing-md 0;
+  }
+
   svg {
     max-width: unset;
   }
@@ -24,7 +26,11 @@
   }
 
   &__content {
-    margin: $spacing-sm 0;
+    padding-bottom: $spacing-md;
+
+    &--locked {
+      padding-bottom: $spacing-sm;
+    }
   }
 
   &__content--lg {
@@ -84,6 +90,7 @@
     to {
       height: 0;
       opacity: 0;
+      padding: 0;
     }
   }
 }
@@ -93,6 +100,11 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  padding: $spacing-sm 0;
+
+  &--large {
+    padding: $spacing-md 0;
+  }
 
   &--hoverable {
     cursor: pointer;

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

@@ -34,15 +34,17 @@
     position: relative;
     text-align: center;
 
-    &:hover::after,
-    &:focus-visible::after {
-      background: $pure-black;
-      bottom: -1px;
-      content: '';
-      height: 1px;
-      left: 0;
-      position: absolute;
-      right: 0;
+    @include media($breakpoint-md) {
+      &:hover::after,
+      &:focus-visible::after {
+        background: $pure-black;
+        bottom: -1px;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        right: 0;
+      }
     }
   }
 

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

@@ -46,6 +46,7 @@
         max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
       width: 100%;
+
       .#{$px}-nav__list__section {
         opacity: 0;
         transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0.2s;
@@ -67,6 +68,10 @@
     }
   }
 
+  &__submenu--mobile.#{$px}-nav__list {
+    padding: 0;
+  }
+
   @include isHeaderDesktop {
     ul {
       background-color: $pure-white;

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

@@ -62,12 +62,6 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       margin-bottom: 0;
 
       &-item {
-        padding: $spacing-sm 0;
-
-        &__border-bottom {
-          border-bottom: 1px solid $light-gray;
-        }
-
         &-label {
           opacity: 1;
         }
@@ -76,7 +70,7 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     .#{$px}-link--snwHeaderLink {
       border-bottom: 1px solid $light-gray;
       flex-wrap: wrap;
-      padding: $spacing-sm 0;
+      padding: $spacing-md 0;
     }
     .#{$px}-link--snwFlyoutLink {
       padding: 0;

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

@@ -25,7 +25,9 @@
     }
     .#{$px}-accordion-item {
       border-top: 1px solid $light-gray;
-      padding: $spacing-sm 0;
+      .#{$px}-nav__list {
+        padding: 0;
+      }
 
       &-label {
         opacity: 1;

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

@@ -80,26 +80,19 @@
 
   .#{$px}-accordion {
     border-bottom: 1px solid #eae8e4;
-    border-top: 1px solid #eae8e4;
+    border-top: unset;
     margin-bottom: $spacing-md;
     width: 100%;
 
     &-item {
-      padding: 0;
-
-      ul {
-        padding-bottom: $spacing-md;
-      }
-
       &--expanded {
-        margin-bottom: $spacing-md;
         margin-top: 0;
         padding: 0;
       }
 
       &-label {
         opacity: 1;
-        padding: $spacing-sm 0;
+        padding: $spacing-md 0 $spacing-sm;
 
         @include media($size-md) {
           cursor: unset;

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

@@ -137,7 +137,11 @@
 
       &--closed {
         display: unset;
-        left: -100vw;
+        left: -100%;
+      }
+
+      .#{$px}-nav__list {
+        padding-top: $spacing-md;
       }
     }
 
@@ -157,13 +161,6 @@
         height: 100%;
       }
     }
-
-    .#{$px}-nav__item {
-      .#{$px}-link--snwHeaderLink {
-        align-content: center;
-        height: 100%;
-      }
-    }
   }
 
   &__overlay {
@@ -185,4 +182,10 @@
     height: 1rem;
     width: 1.5rem;
   }
+
+  @include isHeaderMobile {
+    .#{$px}-nav__list .#{$px}-nav__item:last-child .#{$px}-link--snwHeaderLink {
+      border-bottom: none;
+    }
+  }
 }

package/dist/site-furniture/Header/Header.d.ts

@@ -36,7 +36,7 @@ export declare const HeaderContext: React.Context<HeaderContextType>;
 /**
  * ## Overview
  *
- * This component allows navigation, search, login/logout, and language selection and supports desktop and mobile layouts.  It requires the <SeldonProvider> to be wrapped around it to support SSR Media Queries.
+ * This component allows navigation, search, login/logout, and language selection and supports desktop and mobile layouts.  It requires the `<SeldonProvider>` to be wrapped around it to support SSR Media Queries.
  *
  * [Figma Link Mobile](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10877-33417&node-type=INSTANCE&m=dev)
  *

package/package.json

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