@phillips/seldon 1.55.0 → 1.56.0

package/dist/assets/chevronRight.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.2524 16.1313L11.9644 24.4194C11.6715 24.7123 11.6191 25.4883 12.0654 25.9346C12.5117 26.3809 13.2877 26.3285 13.5806 26.0356L22.773 16.8432C22.9215 16.6948 23.0081 16.4222 22.9994 16.1313C23.0081 15.8404 22.9215 15.5678 22.773 15.4194L13.5806 6.227C13.2877 5.9341 12.5117 5.8817 12.0654 6.32801C11.6191 6.77432 11.6715 7.55035 11.9644 7.84324L20.2524 16.1313Z", fill: "black" }));
+export {
+  l 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/Pagination/Pagination.d.ts

@@ -0,0 +1,50 @@
+import React, { ComponentProps } from 'react';
+export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * Unique id for component testing
+     */
+    id: string;
+    /**
+     * Base class for Pagination component.
+     */
+    className?: string;
+    /**
+     * Options Array of string
+     */
+    options?: string[];
+    /**
+     * Boolean to specify whether the `<Pagination>` should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Current value of the `<Pagination>` component
+     */
+    value: string | number;
+    /**
+     * `onChange` handler that is called whenever the `<Pagination>` value is changed
+     */
+    onChange: (selectedValue: string, event?: React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Specify the variant style of the `<Pagination>`
+     */
+    variant?: 'inline';
+    /**
+     * Option previous label
+     */
+    previousLabel?: string;
+    /**
+     * Option next label
+     */
+    nextLabel?: string;
+}
+/**
+ * ## Overview
+ *
+ * A controlled component that supports selecting a new page and moving next and previous through pages. It expects consumers to keep track of the current value and update it by listening to the `onChange` event.
+ *
+ * [Figma Link](https://www.figma.com/design/hxqgsE26wM7hII0WaUaDfF/RW---TIMED-Lot-Details-(PDP)?node-id=1-2&node-type=CANVAS&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-pagination--overview)
+ */
+declare const Pagination: ({ className, onChange, variant, options, value, isDisabled, previousLabel, nextLabel, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,66 @@
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import c from "../../node_modules/classnames/index.js";
+import { getCommonProps as N, px as n } from "../../utils/index.js";
+import _ from "../Select/Select.js";
+import d from "../Button/Button.js";
+import u from "../../assets/chevronRight.svg.js";
+const S = ({
+  className: f,
+  onChange: e,
+  variant: g = "inline",
+  options: t = [],
+  value: r,
+  isDisabled: l,
+  previousLabel: $ = "Previous",
+  nextLabel: p = "Next",
+  ...o
+}) => {
+  const b = "pagination", { className: s, ...h } = N(o, "Pagination"), { id: m } = o;
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: c(`${n}-${b}`, { [`${s}__wrapper`]: s }, f),
+      ...h,
+      ...o,
+      children: [
+        /* @__PURE__ */ i(
+          d,
+          {
+            className: c(`${n}__pagination-button`, `${n}-left-arrow`),
+            onClick: () => e(t.at(t.findIndex((a) => a === r) - 1) || ""),
+            "data-testid": `${m}-previous-button`,
+            isDisabled: l,
+            "aria-label": $,
+            children: /* @__PURE__ */ i(u, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          _,
+          {
+            className: g === "inline" && `${n}--inline-pagination`,
+            value: r,
+            onChange: (a) => e(a == null ? void 0 : a.currentTarget.value, a),
+            "data-testid": `${m}-select-button`,
+            hideLabel: !0,
+            disabled: l,
+            children: t.map((a) => /* @__PURE__ */ i("option", { value: a, children: a }, a))
+          }
+        ),
+        /* @__PURE__ */ i(
+          d,
+          {
+            className: `${n}__pagination-button`,
+            onClick: () => e(t[(t.findIndex((a) => a === r) + 1) % t.length] || ""),
+            "data-testid": `${m}-next-button`,
+            isDisabled: l,
+            "aria-label": p,
+            children: /* @__PURE__ */ i(u, {})
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  S 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/index.d.ts

@@ -29,6 +29,7 @@ export { default as Social, type SocialProps } from './patterns/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './patterns/ViewingsList/ViewingsList';
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as Drawer } from './components/Drawer/Drawer';
+export { default as Pagination, type PaginationProps } from './components/Pagination/Pagination';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
 export * from './components/Accordion';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as p, emailValidation as d, encodeURLSearchParams as l, findChildrenExcludingTypes as m, findChildrenOfType as s, generatePaddingClassName as i, getCommonProps as u, noOp as n, px as x, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as S } from "./pages/Page.js";
-import { default as C } from "./components/Button/Button.js";
+import { default as P } from "./components/Button/Button.js";
 import { ButtonVariants as k } from "./components/Button/types.js";
 import { default as T } from "./components/IconButton/IconButton.js";
 import { default as B } from "./components/ErrorBoundary/ErrorBoundary.js";
@@ -27,40 +27,41 @@ import { default as ie } from "./patterns/Subscribe/Subscribe.js";
 import { SubscriptionState as ne } from "./patterns/Subscribe/types.js";
 import { default as ge } from "./patterns/Social/Social.js";
 import { default as Se } from "./patterns/ViewingsList/ViewingsList.js";
-import { default as Ce } from "./components/Modal/Modal.js";
+import { default as Pe } from "./components/Modal/Modal.js";
 import { default as ke } from "./components/Drawer/Drawer.js";
-import { default as Te } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Be } from "./components/Text/types.js";
-import { default as Ne } from "./components/Text/Text.js";
-import { default as ve } from "./components/Accordion/Accordion.js";
-import { default as Ae } from "./components/Accordion/AccordionItem.js";
-import { default as Ge } from "./patterns/UserManagement/UserManagement.js";
-import { AuthState as Ee } from "./patterns/UserManagement/types.js";
-import { SupportedLanguages as Me } from "./types/commonTypes.js";
-import { default as Re } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as Te } from "./components/Pagination/Pagination.js";
+import { default as Be } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as Ne } from "./components/Text/types.js";
+import { default as ve } from "./components/Text/Text.js";
+import { default as Ae } from "./components/Accordion/Accordion.js";
+import { default as Ge } from "./components/Accordion/AccordionItem.js";
+import { default as Ee } from "./patterns/UserManagement/UserManagement.js";
+import { AuthState as Me } from "./patterns/UserManagement/types.js";
+import { SupportedLanguages as Re } from "./types/commonTypes.js";
+import { default as ze } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as ze } from "./components/Dropdown/Dropdown.js";
-import { default as Ye } from "./components/Video/Video.js";
-import { default as qe } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as Ke } from "./components/ContentPeek/ContentPeek.js";
-import { default as We } from "./components/Collapsible/Collapsible.js";
-import { default as Ze } from "./components/Collapsible/CollapsibleContent.js";
-import { default as $e } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as oo } from "./providers/SeldonProvider.js";
+import { default as Ye } from "./components/Dropdown/Dropdown.js";
+import { default as qe } from "./components/Video/Video.js";
+import { default as Ke } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as We } from "./components/ContentPeek/ContentPeek.js";
+import { default as Ze } from "./components/Collapsible/Collapsible.js";
+import { default as $e } from "./components/Collapsible/CollapsibleContent.js";
+import { default as oo } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as to } from "./providers/SeldonProvider.js";
 export {
-  ve as Accordion,
-  Ae as AccordionItem,
-  Ee as AuthState,
-  Re as Breadcrumb,
-  C as Button,
+  Ae as Accordion,
+  Ge as AccordionItem,
+  Me as AuthState,
+  ze as Breadcrumb,
+  P as Button,
   k as ButtonVariants,
-  We as Collapsible,
-  Ze as CollapsibleContent,
-  $e as CollapsibleTrigger,
-  Ke as ContentPeek,
+  Ze as Collapsible,
+  $e as CollapsibleContent,
+  oo as CollapsibleTrigger,
+  We as ContentPeek,
   ke as Drawer,
-  ze as Dropdown,
+  Ye as Dropdown,
   B as ErrorBoundary,
   N as Footer,
   v as Grid,
@@ -70,33 +71,34 @@ export {
   z as HeroBanner,
   T as IconButton,
   Y as Input,
-  qe as LanguageSelector,
+  Ke as LanguageSelector,
   q as Link,
   W as LinkBlock,
   Z as LinkList,
   K as LinkVariants,
-  Ce as Modal,
+  Pe as Modal,
   G as Navigation,
   E as NavigationItem,
   M as NavigationItemTrigger,
   R as NavigationList,
   a as PaddingTokens,
   S as Page,
+  Te as Pagination,
   $ as Row,
   fe as Search,
-  oo as SeldonProvider,
+  to as SeldonProvider,
   de as Select,
   ge as Social,
   f as SpacingTokens,
   me as SplitPanel,
-  Te as StatefulViewingsList,
+  Be as StatefulViewingsList,
   ie as Subscribe,
   ne as SubscriptionState,
-  Me as SupportedLanguages,
-  Ne as Text,
-  Be as TextVariants,
-  Ge as UserManagement,
-  Ye as Video,
+  Re as SupportedLanguages,
+  ve as Text,
+  Ne as TextVariants,
+  Ee as UserManagement,
+  qe as Video,
   Se as ViewingsList,
   p as defaultYear,
   d as emailValidation,

package/dist/scss/_vars.scss

@@ -348,15 +348,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/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.0",
+  "version": "1.56.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -112,7 +112,7 @@
     "stylelint-scss": "^6.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
+    "vite": "^5.4.6",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",