@phillips/seldon 1.176.1 → 1.178.0

package/dist/components/ComboBox/ComboBox.d.ts

@@ -80,6 +80,11 @@ export interface ComboBoxProps {
      * Handler called when the combobox loses focus
      */
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    /**
+     * Number of characters required in the input before the dropdown options are shown.
+     * @default 0
+     */
+    countOfCharsBeforeDropdown?: number;
 }
 /**
  * ## Overview

package/dist/components/ComboBox/ComboBox.js

@@ -1,9 +1,9 @@
-import { jsxs as T, jsx as o } from "react/jsx-runtime";
-import { Root as dt, Trigger as ht, Portal as _t, Content as vt } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { Root as ht, Trigger as _t, Portal as vt, Content as $t } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
 import d from "../../node_modules/classnames/index.js";
-import { Command as $t, CommandInput as yt, CommandList as wt, CommandGroup as Ct, CommandItem as bt } from "../../node_modules/cmdk/dist/index.js";
-import gt, { useState as S, useCallback as b, useRef as k, useMemo as x } from "react";
-import { useOnClickOutside as Nt } from "../../node_modules/usehooks-ts/dist/index.js";
+import { Command as yt, CommandInput as Ct, CommandList as bt, CommandGroup as wt, CommandItem as gt } from "../../node_modules/cmdk/dist/index.js";
+import Nt, { useState as S, useCallback as g, useRef as O, useMemo as V } from "react";
+import { useOnClickOutside as It } from "../../node_modules/usehooks-ts/dist/index.js";
 import "../../assets/formatted/AccountActive.js";
 import "../../assets/formatted/Account.js";
 import "../../assets/formatted/Add.js";
@@ -29,11 +29,11 @@ import "../../assets/formatted/ArrowRight.js";
 import "../../assets/formatted/ArrowUp.js";
 import "../../assets/formatted/Bag.js";
 import "../../assets/formatted/Calendar.js";
-import It from "../../assets/formatted/ChevronDown.js";
+import Tt from "../../assets/formatted/ChevronDown.js";
 import "../../assets/formatted/ChevronLeft.js";
 import "../../assets/formatted/ChevronRight.js";
 import "../../assets/formatted/ChevronUp.js";
-import Ot from "../../assets/formatted/CloseX.js";
+import kt from "../../assets/formatted/CloseX.js";
 import "../../assets/formatted/ConditionReport.js";
 import "../../assets/formatted/Delete.js";
 import "../../assets/formatted/Download.js";
@@ -83,133 +83,135 @@ import "../../assets/formatted/VolumeMaximum.js";
 import "../../assets/formatted/VolumeMid.js";
 import "../../assets/formatted/VolumeMinimum.js";
 import "../../assets/formatted/WeChat.js";
-import { getCommonProps as Tt, useNormalizedInputProps as kt } from "../../utils/index.js";
-import X from "../IconButton/IconButton.js";
-import { ButtonVariants as H } from "../Button/types.js";
-import { usePrevious as xt } from "../../utils/usePrevious.js";
-const Vt = gt.forwardRef(function({
+import { getCommonProps as xt, useNormalizedInputProps as Ot } from "../../utils/index.js";
+import H from "../IconButton/IconButton.js";
+import { ButtonVariants as J } from "../Button/types.js";
+import { usePrevious as Vt } from "../../utils/usePrevious.js";
+const Dt = Nt.forwardRef(function({
   options: a = [],
-  className: J,
-  id: i,
-  labelText: Q,
-  placeholder: Y,
-  name: V,
+  className: Q,
+  id: l,
+  labelText: Y,
+  placeholder: Z,
+  name: D,
   value: p,
   onChange: u,
-  onBlur: Z,
+  onBlur: tt,
   renderOption: j,
-  ariaLabelDropdown: g,
+  ariaLabelDropdown: N,
   ariaLabelInput: q,
-  ariaLabelClear: N,
+  ariaLabelClear: I,
   ariaLabelContent: z,
-  hideLabel: tt = !1,
-  popoverContainerRef: et,
-  noOptionsMessage: rt = "No Options.",
-  invalid: I = !1,
-  invalidText: ot,
-  ...it
-}, D) {
-  const { className: e, ...st } = Tt({ id: i }, "ComboBox"), lt = It, nt = Ot, G = kt({
-    id: i,
-    invalid: I,
-    invalidText: ot,
+  hideLabel: et = !1,
+  popoverContainerRef: rt,
+  noOptionsMessage: ot = "No Options.",
+  invalid: T = !1,
+  invalidText: it,
+  countOfCharsBeforeDropdown: G = 0,
+  ...lt
+}, M) {
+  const { className: e, ...st } = xt({ id: l }, "ComboBox"), nt = Tt, at = kt, K = Ot({
+    id: l,
+    invalid: T,
+    invalidText: it,
     type: "text"
-  }), [f, K] = S(!1), [at, mt] = S(""), U = xt(p), R = b((t) => t.label || t.value, []), [s, $] = S(() => {
+  }), [f, U] = S(!1), [mt, ct] = S(""), W = Vt(p), R = g((t) => t.label || t.value, []), [o, $] = S(() => {
     if (p !== void 0) {
       const t = a.find((r) => r.value === p);
       return t ? t.displayValue || R(t) : "";
     }
     return "";
-  }), y = k(null), w = k(null), C = k(!1), E = k(null), m = b((t) => R(t), [R]), h = p !== void 0, F = h ? p : at, l = x(() => a.find((t) => t.value === F) || null, [a, F]), _ = x(() => l ? l.displayValue || m(l) : "", [l, m]), c = x(() => {
-    if (!s || l && s === _)
+  }), y = O(null), C = O(null), b = O(!1), E = O(null), m = g((t) => R(t), [R]), h = p !== void 0, F = h ? p : mt, s = V(() => a.find((t) => t.value === F) || null, [a, F]), _ = V(() => s ? s.displayValue || m(s) : "", [s, m]), c = V(() => {
+    if (!o || s && o === _)
       return a;
-    const t = s.toLowerCase().trim();
+    const t = o.toLowerCase().trim();
     return a.filter((r) => {
-      const B = m(r).toLowerCase().includes(t), L = r.value.toLowerCase().includes(t), A = r.displayValue?.toLowerCase().includes(t) || !1;
+      const w = m(r).toLowerCase().includes(t), A = r.value.toLowerCase().includes(t), B = r.displayValue?.toLowerCase().includes(t) || !1;
       let v = !1;
-      return r.filterTerms && r.filterTerms.length > 0 && (v = r.filterTerms.some((ft) => ft.toLowerCase().includes(t))), B || L || A || v;
+      return r.filterTerms && r.filterTerms.length > 0 && (v = r.filterTerms.some((dt) => dt.toLowerCase().includes(t))), w || A || B || v;
     });
-  }, [s, _, l, m, a]), n = b(
-    (t) => {
-      K(t), t && l && c.length > 5 && requestAnimationFrame(() => {
+  }, [o, _, s, m, a]), n = g(
+    (t, r) => {
+      const w = (r?.length || o.length) >= G;
+      (!t || t && w) && U(t), t && s && c.length > 5 && requestAnimationFrame(() => {
         E.current && E.current.scrollIntoView({
           block: "nearest",
           behavior: "auto"
         });
       });
     },
-    [l, c.length]
-  ), O = b(
+    [G, o.length, s, c.length]
+  ), k = g(
     (t) => {
-      h || mt(t.value);
+      h || ct(t.value);
       const r = t.displayValue || m(t);
-      $(r), u && u(t.value, t), n(!1), C.current = !0, requestAnimationFrame(() => {
-        C.current = !1;
+      $(r), u && u(t.value, t), n(!1), b.current = !0, requestAnimationFrame(() => {
+        b.current = !1;
       });
     },
     [h, u, n, m]
-  ), ct = (t) => {
-    n(!1), C.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), $(""), w.current?.focus(), requestAnimationFrame(() => {
-      C.current = !1;
+  ), pt = (t) => {
+    n(!1), b.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), $(""), C.current?.focus(), requestAnimationFrame(() => {
+      b.current = !1;
     });
-  }, pt = () => {
-    K(!f), w.current?.focus();
-  }, ut = (t) => {
-    $(t), t !== "" && c.length > 0 && n(!0);
-  }, W = x(() => {
+  }, ut = () => {
+    U(!f), C.current?.focus();
+  }, ft = (t) => {
+    $(t), t !== "" && c.length > 0 && n(!0, t);
+  }, X = V(() => {
     if (h) {
-      if (p !== U)
-        return l ? _ : s;
-      if (l) {
+      if (p !== W)
+        return s ? _ : o;
+      if (s) {
         const t = _;
-        return t !== s ? s : t;
+        return t !== o ? o : t;
       } else
-        return s;
+        return o;
     }
-    return s;
-  }, [h, s, p, U, l, _]), M = (t) => {
-    if (l) {
+    return o;
+  }, [h, o, p, W, s, _]), P = (t) => {
+    if (s) {
       const r = _;
-      r !== W && !t && $(r);
+      r !== X && !t && $(r);
     } else
       $("");
-  }, P = b(() => {
+  }, L = g(() => {
     const t = a.filter((r) => {
-      const B = m(r).toLowerCase(), L = r.value.toLowerCase(), A = r.displayValue?.toLowerCase(), v = s.toLowerCase();
-      return B === v || L === v || A === v;
+      const w = m(r).toLowerCase(), A = r.value.toLowerCase(), B = r.displayValue?.toLowerCase(), v = o.toLowerCase();
+      return w === v || A === v || B === v;
     });
-    t.length === 1 && O(t[0]);
-  }, [s, a, O, m]);
-  return Nt(y, (t) => {
-    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || y.current?.contains(t.target) || t.target === y.current || (P(), M(), n(!1));
-  }), /* @__PURE__ */ T("div", { ref: D, className: d(e, J), id: i, ...st, ...it, children: [
-    V && /* @__PURE__ */ o(
+    t.length === 1 && k(t[0]);
+  }, [o, a, k, m]);
+  return It(y, (t) => {
+    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || y.current?.contains(t.target) || t.target === y.current || (L(), P(), n(!1));
+  }), /* @__PURE__ */ x("div", { ref: M, className: d(e, Q), id: l, ...st, ...lt, children: [
+    D && /* @__PURE__ */ i(
       "input",
       {
         type: "hidden",
-        name: V,
-        id: V,
+        name: D,
+        id: D,
         value: F || "",
         ref: (t) => {
-          typeof D == "function" && t && D(t);
+          typeof M == "function" && t && M(t);
         }
       }
     ),
-    /* @__PURE__ */ T("div", { ref: y, className: `${e}__wrapper`, children: [
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ x("div", { ref: y, className: `${e}__wrapper`, children: [
+      /* @__PURE__ */ i(
         "label",
         {
-          htmlFor: `${i}-input`,
+          htmlFor: `${l}-input`,
           className: d(`${e}__label`, {
-            [`${e}__label--hidden`]: tt,
-            [`${e}__label--invalid`]: I
+            [`${e}__label--hidden`]: et,
+            [`${e}__label--invalid`]: T
           }),
-          "data-testid": `${i}-label`,
-          children: Q
+          "data-testid": `${l}-label`,
+          children: Y
         }
       ),
-      /* @__PURE__ */ o(
-        $t,
+      /* @__PURE__ */ i(
+        yt,
         {
           loop: !0,
           onKeyDown: (t) => {
@@ -219,80 +221,80 @@ const Vt = gt.forwardRef(function({
           },
           shouldFilter: !1,
           className: `${e}__command-wrapper`,
-          children: /* @__PURE__ */ T(dt, { open: f, modal: !1, children: [
-            /* @__PURE__ */ o(ht, { asChild: !0, children: /* @__PURE__ */ T(
+          children: /* @__PURE__ */ x(ht, { open: f, modal: !1, children: [
+            /* @__PURE__ */ i(_t, { asChild: !0, children: /* @__PURE__ */ x(
               "div",
               {
                 className: d(`${e}__input-wrapper`, {
-                  [`${e}__input-wrapper--invalid`]: I
+                  [`${e}__input-wrapper--invalid`]: T
                 }),
                 children: [
-                  /* @__PURE__ */ o(
-                    yt,
+                  /* @__PURE__ */ i(
+                    Ct,
                     {
-                      id: `${i}-input`,
-                      placeholder: Y,
-                      value: W,
-                      onValueChange: ut,
+                      id: `${l}-input`,
+                      placeholder: Z,
+                      value: X,
+                      onValueChange: ft,
                       tabIndex: 0,
                       onFocus: () => {
-                        c.length > 0 && !C.current && !f && n(!0);
+                        c.length > 0 && !b.current && !f && n(!0);
                       },
                       onClick: (t) => {
                         n(!0), t.preventDefault(), t.currentTarget.focus();
                       },
                       onKeyDown: (t) => {
-                        t.key === "Tab" ? (n(!1), P(), M()) : t.key === "Enter" && !f ? (u && u(s, null), c.length === 1 && O(c[0])) : t.key === "Escape" ? (n(!1), t.preventDefault(), P(), M()) : (t.key === "ArrowDown" || t.key === "ArrowUp") && !f && c.length > 0 && (n(!0), t.preventDefault());
+                        t.key === "Tab" ? (n(!1), L(), P()) : t.key === "Enter" && !f ? (u && u(o, null), c.length === 1 && k(c[0])) : t.key === "Escape" ? (n(!1), t.preventDefault(), L(), P()) : (t.key === "ArrowDown" || t.key === "ArrowUp") && !f && c.length > 0 && (n(!0), t.preventDefault());
                       },
-                      onBlur: Z,
+                      onBlur: tt,
                       className: d(`${e}__input`, {
-                        [`${e}__input--invalid`]: I
+                        [`${e}__input--invalid`]: T
                       }),
-                      "aria-label": q || `${i}-input`,
-                      "data-testid": `${i}-input`,
-                      ref: w
+                      "aria-label": q || `${l}-input`,
+                      "data-testid": `${l}-input`,
+                      ref: C
                     }
                   ),
-                  s && /* @__PURE__ */ o(
-                    X,
+                  o && /* @__PURE__ */ i(
+                    H,
                     {
                       className: `${e}__close-button`,
-                      "data-testid": `${i}-clear-button`,
-                      onClick: ct,
-                      "aria-label": N || `${i}-clear`,
+                      "data-testid": `${l}-clear-button`,
+                      onClick: pt,
+                      "aria-label": I || `${l}-clear`,
                       tabIndex: -1,
-                      variant: H.tertiary,
-                      children: /* @__PURE__ */ o(
-                        nt,
+                      variant: J.tertiary,
+                      children: /* @__PURE__ */ i(
+                        at,
                         {
                           color: "currentColor",
                           height: 18,
                           width: 18,
                           className: `${e}__icon-button`,
-                          title: N || `${i}-clear`
+                          title: I || `${l}-clear`
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ o(
-                    X,
+                  /* @__PURE__ */ i(
+                    H,
                     {
-                      "aria-label": g || `${i}-dropdown`,
+                      "aria-label": N || `${l}-dropdown`,
                       className: d(`${e}__dropdown-button`, {
                         [`${e}__dropdown-button--open`]: f
                       }),
-                      onClick: pt,
-                      "data-testid": `${i}-dropdown`,
+                      onClick: ut,
+                      "data-testid": `${l}-dropdown`,
                       tabIndex: -1,
-                      variant: H.tertiary,
-                      children: /* @__PURE__ */ o(
-                        lt,
+                      variant: J.tertiary,
+                      children: /* @__PURE__ */ i(
+                        nt,
                         {
                           color: "currentColor",
                           height: 18,
                           width: 18,
                           className: `${e}__icon-button`,
-                          title: g || `${i}-dropdown`
+                          title: N || `${l}-dropdown`
                         }
                       )
                     }
@@ -300,44 +302,44 @@ const Vt = gt.forwardRef(function({
                 ]
               }
             ) }),
-            f && /* @__PURE__ */ o(_t, { container: et?.current || document.body, children: /* @__PURE__ */ o(
-              vt,
+            f && /* @__PURE__ */ i(vt, { container: rt?.current || document.body, children: /* @__PURE__ */ i(
+              $t,
               {
                 className: `${e}__content`,
-                "aria-label": z || `${i}-content`,
+                "aria-label": z || `${l}-content`,
                 side: "bottom",
                 sideOffset: -5,
                 align: "start",
                 alignOffset: 0,
                 onFocus: () => {
-                  document.activeElement !== w.current && w.current?.focus();
+                  document.activeElement !== C.current && C.current?.focus();
                 },
                 style: {
                   width: y.current?.offsetWidth || "100%"
                 },
-                children: /* @__PURE__ */ o(wt, { className: `${e}__list`, children: c.length > 0 ? /* @__PURE__ */ o(Ct, { className: `${e}__group`, children: c.map((t) => /* @__PURE__ */ o(
-                  bt,
+                children: /* @__PURE__ */ i(bt, { className: `${e}__list`, children: c.length > 0 ? /* @__PURE__ */ i(wt, { className: `${e}__group`, children: c.map((t) => /* @__PURE__ */ i(
+                  gt,
                   {
                     className: d(`${e}__item`, {
-                      [`${e}__item--selected`]: l?.value === t.value
+                      [`${e}__item--selected`]: s?.value === t.value
                     }),
                     value: t.value,
-                    onSelect: () => O(t),
-                    ...l?.value === t.value ? { ref: E } : {},
+                    onSelect: () => k(t),
+                    ...s?.value === t.value ? { ref: E } : {},
                     children: j ? j(t) : m(t)
                   },
                   t.value
-                )) }) : /* @__PURE__ */ o("div", { className: `${e}__no-options`, children: rt }) })
+                )) }) : /* @__PURE__ */ i("div", { className: `${e}__no-options`, children: ot }) })
               }
             ) })
           ] })
         }
       ),
-      G.validation ? G.validation : /* @__PURE__ */ o("p", { className: d(`${e}__validation`), children: " " })
+      K.validation ? K.validation : /* @__PURE__ */ i("p", { className: d(`${e}__validation`), children: " " })
     ] })
   ] });
 });
-Vt.displayName = "ComboBox";
+Dt.displayName = "ComboBox";
 export {
-  Vt as default
+  Dt as default
 };

package/dist/components/ComboBox/ComboBox.stories.d.ts

@@ -12,6 +12,7 @@ export declare const Playground: {
         options: ComboBoxOption[];
         id: string;
         labelText: string;
+        noOptionsMessage: string;
     };
     argTypes: {
         options: {
@@ -53,6 +54,12 @@ export declare const Playground: {
         value: {
             control: boolean;
         };
+        countOfCharsBeforeDropdown: {
+            control: string;
+        };
+        noOptionsMessage: {
+            control: string;
+        };
     };
 };
 export declare const ComboBoxInDrawer: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as f } from "react/jsx-runtime";
+import o from "../../../node_modules/classnames/index.js";
 import * as a from "react";
 import { px as n } from "../../../utils/index.js";
-import o from "../../../node_modules/classnames/index.js";
 import { TextVariants as d } from "../../Text/types.js";
 import u from "../../Text/Text.js";
 const g = a.forwardRef(

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+export type NotificationBannerProps = ComponentProps<'div'> & {
+    /**
+     * The content to display inside the notification banner.
+     */
+    children: React.ReactNode;
+};
+/**
+ * ## Overview
+ *
+ * The `NotificationBanner` component displays a prominent message at the top of the page or section to inform users about important information, updates, or alerts. It is designed to be highly visible and can contain any custom content passed as children. Use this component to draw attention to critical messages that require user awareness.
+ *
+ * [Figma Link](https://www.figma.com/design/qEd5aXjQeiboeJ8GJMOJba/Global-Notification-Banner?node-id=1-1899&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-notificationbanner--overview)
+ */
+declare const NotificationBanner: import('react').ForwardRefExoticComponent<Omit<NotificationBannerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default NotificationBanner;

package/dist/components/NotificationBanner/NotificationBanner.js

@@ -0,0 +1,12 @@
+import { jsx as s } from "react/jsx-runtime";
+import e from "../../node_modules/classnames/index.js";
+import { forwardRef as c } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+const l = c(({ className: a, ...o }, i) => {
+  const { className: m, ...n } = f(o, "NotificationBanner"), { children: r, id: t } = o;
+  return /* @__PURE__ */ s("div", { ...n, ...o, className: e(m, a), ref: i, id: t, children: r });
+});
+l.displayName = "NotificationBanner";
+export {
+  l as default
+};

package/dist/components/NotificationBanner/NotificationBanner.stories.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { AuthState } from '../../patterns/UserManagement/types';
+import { HeaderProps } from '../../site-furniture/Header/Header';
+import { NotificationBannerProps } from './NotificationBanner';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<NotificationBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: NotificationBannerProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+    argTypes: {};
+};
+export declare const WithHeader: ({ authState, ...props }: HeaderProps & {
+    authState?: AuthState;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NotificationBanner/NotificationBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NotificationBanner/index.d.ts

@@ -0,0 +1 @@
+export { default as NotificationBanner, type NotificationBannerProps } from './NotificationBanner';

package/dist/components/Toast/useToast.js

@@ -1,10 +1,14 @@
-import { useToastContext as s } from "./useToastContext.js";
-const l = () => {
-  const { addToast: e } = s();
-  return (t) => {
-    typeof t == "object" && t !== null && "title" in t ? e(t) : e({ title: t });
-  };
+import { useToastContext as a } from "./useToastContext.js";
+import { useCallback as o } from "react";
+const c = () => {
+  const { addToast: e } = a();
+  return o(
+    (t) => {
+      typeof t == "object" && t !== null && "title" in t ? e(t) : e({ title: t });
+    },
+    [e]
+  );
 };
 export {
-  l as useToast
+  c as useToast
 };

package/dist/index.d.ts

@@ -78,10 +78,13 @@ export * from './components/AddToCalendar';
 export * from './components/Article';
 export * from './components/Countdown';
 export * from './components/Countdown/types';
+export * from './components/DescriptiveRadioButton';
+export * from './components/DescriptiveRadioButtonGroup';
 export * from './components/Divider';
 export * from './components/FavoritingTileButton';
 export * from './components/Filter';
 export * from './components/Icon';
+export * from './components/NotificationBanner';
 export * from './components/Pictogram';
 export * from './components/TextArea';
 export * from './components/Toast';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as c, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
-import { SSRMediaQuery as P, ssrMediaQueryStyle as B } from "./providers/SeldonProvider/utils.js";
+import { SSRMediaQuery as B, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as A } from "./utils/hooks.js";
 import { AuctionStatus as V, LotStatus as b, SupportedLanguages as y } from "./types/commonTypes.js";
 import { default as v } from "./components/Button/Button.js";
@@ -27,7 +27,7 @@ import { default as ie } from "./components/Detail/Detail.js";
 import { default as ne } from "./components/Drawer/Drawer.js";
 import { default as ge } from "./components/Dropdown/Dropdown.js";
 import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as Pe } from "./components/Grid/Grid.js";
+import { default as Be } from "./components/Grid/Grid.js";
 import { default as Ie } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as Le } from "./components/GridItem/types.js";
 import { default as be } from "./components/Input/Input.js";
@@ -53,7 +53,7 @@ import { default as pt } from "./components/Tabs/TabsContent.js";
 import { Tag as it, default as xt } from "./components/Tags/Tags.js";
 import { TextAlignments as ct, TextVariants as gt } from "./components/Text/types.js";
 import { default as Ct } from "./components/Text/Text.js";
-import { TextSymbolVariants as Pt } from "./components/TextSymbol/types.js";
+import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.js";
 import { default as It } from "./components/TextSymbol/TextSymbol.js";
 import { default as Lt } from "./components/Video/Video.js";
 import { default as bt } from "./patterns/DetailList/DetailList.js";
@@ -79,7 +79,7 @@ import { default as uo } from "./components/PageContentWrapper/PageContentWrappe
 import { default as xo } from "./components/PhoneNumberPicker/PhoneNumberPicker.js";
 import { default as co } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as So, FilterButtonType as Co } from "./patterns/FiltersInline/types.js";
-import { default as Po } from "./patterns/SaleCard/SaleCard.js";
+import { default as Bo } from "./patterns/SaleCard/SaleCard.js";
 import { SaleCardActions as Io } from "./patterns/SaleCard/SaleCardActions.js";
 import { SaleCardVariants as Lo } from "./patterns/SaleCard/types.js";
 import { default as bo } from "./patterns/ViewingDetails/ViewingDetails.js";
@@ -90,39 +90,40 @@ import { default as Ho } from "./components/AddToCalendar/AddToCalendar.js";
 import { default as No } from "./components/Article/Article.js";
 import { default as Go } from "./components/Countdown/Countdown.js";
 import { CountdownVariants as Uo } from "./components/Countdown/types.js";
-import { default as Qo } from "./components/Divider/Divider.js";
-import { default as zo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
-import { default as Yo } from "./components/Filter/Filter.js";
-import { default as qo } from "./components/Filter/FilterInput.js";
-import { default as Ko } from "./components/Filter/FilterHeader.js";
-import { default as _o } from "./components/Pictogram/Pictogram.js";
-import { default as er } from "./components/TextArea/TextArea.js";
-import { default as or } from "./components/Toast/Toast.js";
-import { ToastProvider as ar } from "./components/Toast/ToastContextProvider.js";
-import { useToast as sr } from "./components/Toast/useToast.js";
-import { default as dr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
-import { default as pr } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as ir } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as nr, BidStatusEnum as cr } from "./patterns/BidSnapshot/types.js";
-import { default as Sr } from "./patterns/FilterMenu/FilterMenu.js";
-import { default as Tr } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as Br } from "./patterns/CountryPicker/CountryPicker.js";
-import { default as Ar } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
-import { default as Vr } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as Qo } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
+import { default as zo } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
+import { default as Yo } from "./components/Divider/Divider.js";
+import { default as qo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
+import { default as Ko } from "./components/Filter/Filter.js";
+import { default as _o } from "./components/Filter/FilterInput.js";
+import { default as er } from "./components/Filter/FilterHeader.js";
+import { default as or } from "./components/NotificationBanner/NotificationBanner.js";
+import { default as ar } from "./components/Pictogram/Pictogram.js";
+import { default as sr } from "./components/TextArea/TextArea.js";
+import { default as dr } from "./components/Toast/Toast.js";
+import { ToastProvider as pr } from "./components/Toast/ToastContextProvider.js";
+import { useToast as ir } from "./components/Toast/useToast.js";
+import { default as nr } from "./patterns/AccountPageHeader/AccountPageHeader.js";
+import { default as gr } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as Cr } from "./patterns/BidSnapshot/BidMessage.js";
+import { BidMessageVariants as Br, BidStatusEnum as Pr } from "./patterns/BidSnapshot/types.js";
+import { default as Ar } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as Vr } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as yr } from "./patterns/CountryPicker/CountryPicker.js";
 export {
   M as Accordion,
   E as AccordionItem,
   R as AccordionItemVariant,
   U as AccordionVariants,
-  dr as AccountPageHeader,
+  nr as AccountPageHeader,
   Ho as AddToCalendar,
   No as Article,
   V as AuctionStatus,
   Yt as AuthState,
-  ir as BidMessage,
-  nr as BidMessageVariants,
-  pr as BidSnapshot,
-  cr as BidStatusEnum,
+  Cr as BidMessage,
+  Br as BidMessageVariants,
+  gr as BidSnapshot,
+  Pr as BidStatusEnum,
   Q as Breadcrumb,
   v as Button,
   w as ButtonVariants,
@@ -140,28 +141,28 @@ export {
   pe as ContentPeekHeightUnits,
   Go as Countdown,
   Uo as CountdownVariants,
-  Br as CountryPicker,
-  Ar as DescriptiveRadioButton,
-  Vr as DescriptiveRadioButtonGroup,
+  yr as CountryPicker,
+  Qo as DescriptiveRadioButton,
+  zo as DescriptiveRadioButtonGroup,
   ie as Detail,
   bt as DetailList,
   kt as DetailListAlignment,
-  Qo as Divider,
+  Yo as Divider,
   ne as Drawer,
   ge as Dropdown,
   Ce as ErrorBoundary,
   so as ExitGateCard,
   ht as FavoritesCollectionTile,
-  zo as FavoritingTileButton,
-  Yo as Filter,
+  qo as FavoritingTileButton,
+  Ko as Filter,
   So as FilterButtonIconType,
   Co as FilterButtonType,
-  Ko as FilterHeader,
-  qo as FilterInput,
-  Sr as FilterMenu,
+  er as FilterHeader,
+  _o as FilterInput,
+  Ar as FilterMenu,
   co as FiltersInline,
   ho as Footer,
-  Pe as Grid,
+  Be as Grid,
   Ie as GridItem,
   Le as GridItemAlign,
   Do as Header,
@@ -181,18 +182,19 @@ export {
   Ue as NavigationItem,
   Qe as NavigationItemTrigger,
   ze as NavigationList,
-  Tr as ObjectTile,
+  or as NotificationBanner,
+  Vr as ObjectTile,
   a as PaddingTokens,
   C as Page,
   uo as PageContentWrapper,
   Ye as Pagination,
   xo as PhoneNumberPicker,
-  _o as Pictogram,
+  ar as Pictogram,
   qe as PinchZoom,
   ko as ProgressIndicator,
   Ke as Row,
-  P as SSRMediaQuery,
-  Po as SaleCard,
+  B as SSRMediaQuery,
+  Bo as SaleCard,
   Io as SaleCardActions,
   Lo as SaleCardVariants,
   Nt as SaleHeaderBanner,
@@ -215,12 +217,12 @@ export {
   xt as TagsList,
   Ct as Text,
   ct as TextAlignments,
-  er as TextArea,
-  Pt as TextSymbolVariants,
+  sr as TextArea,
+  Bt as TextSymbolVariants,
   It as TextSymbols,
   gt as TextVariants,
-  or as Toast,
-  ar as ToastProvider,
+  dr as Toast,
+  pr as ToastProvider,
   qt as UserManagement,
   Lt as Video,
   bo as ViewingDetails,
@@ -235,8 +237,8 @@ export {
   x as getCommonProps,
   n as noOp,
   c as px,
-  B as ssrMediaQueryStyle,
+  P as ssrMediaQueryStyle,
   g as useNormalizedInputProps,
   A as usePendingState,
-  sr as useToast
+  ir as useToast
 };

package/dist/scss/_vars.scss

@@ -397,6 +397,7 @@ $margin-xxl: var(--spacing-xxl);
 :root {
   --header-height: 56px; // 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
+  --banner-height: 0px;
 
   @media (min-width: $breakpoint-md) {
     --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
@@ -418,6 +419,7 @@ $desktop-max-width: var(--desktop-max-width);
 /// z-index TOKENS:
 ///////////////////////
 $modal-z-index: 30;
+$z-index-notification-banner: 1000;
 
 ////////////////////////
 /// Our tokens usually support at least 4 sizes.

package/dist/scss/_vars.scss.js

@@ -397,6 +397,7 @@ $margin-xxl: var(--spacing-xxl);
 :root {
   --header-height: 56px; // 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
+  --banner-height: 0px;
 
   @media (min-width: $breakpoint-md) {
     --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
@@ -418,6 +419,7 @@ $desktop-max-width: var(--desktop-max-width);
 /// z-index TOKENS:
 ///////////////////////
 $modal-z-index: 30;
+$z-index-notification-banner: 1000;
 
 ////////////////////////
 /// Our tokens usually support at least 4 sizes.

package/dist/scss/componentStyles.scss

@@ -88,3 +88,4 @@
 @use 'components/Divider/divider';
 @use 'components/TextArea/textArea';
 @use 'components/AddToCalendar/addToCalendar';
+@use 'components/NotificationBanner/notificationBanner';

package/dist/scss/components/ComboBox/_combobox.scss

@@ -176,6 +176,10 @@
     margin-top: $spacing-xsm;
   }
 
+  &__no-options {
+    padding-left: $padding-xsm;
+  }
+
   @keyframes fade-in {
     from {
       opacity: 0;

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

@@ -41,7 +41,10 @@
       pointer-events: none;
       position: fixed; // has to bust out of the box containing it on desktop
       right: 0;
-      top: calc($header-height + 1px);
+      top: calc(
+        var(--banner-height) + #{$header-height} + 1px
+      ); // will be dynamically set again when notification banner is shown
+
       transition:
         max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
@@ -56,7 +59,7 @@
     &--hovered &__submenu {
       cursor: default;
       left: 0;
-      max-height: calc(90vh - #{$header-height});
+      max-height: calc(90vh - #{$header-height} + var(--banner-height));
       opacity: 1;
       -ms-overflow-style: none; /* Internet Explorer 10+ */
       overflow-y: scroll;

package/dist/scss/components/NotificationBanner/_notificationBanner.scss

@@ -0,0 +1,11 @@
+@use '../../allPartials' as *;
+
+.#{$px}-notification-banner {
+  background: $light-gray;
+  left: 0;
+  padding: $spacing-sm $spacing-md;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: $z-index-notification-banner;
+}

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

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   position: fixed;
-  top: 0;
+  top: var(--banner-height);
   width: 100%;
   z-index: 10;
 

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

@@ -24,6 +24,10 @@ export interface HeaderProps extends ComponentProps<'header'> {
      * Is the header disabled
      */
     disabled?: boolean;
+    /**
+     * Reference to the notification banner
+     */
+    bannerRef?: React.MutableRefObject<HTMLDivElement | null>;
 }
 export type HeaderContextType = {
     /**

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

@@ -1,88 +1,108 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import e, { createContext as w, forwardRef as A, useState as g } from "react";
-import l from "../../node_modules/classnames/index.js";
-import { findChildrenOfType as d, findChildrenExcludingTypes as L, px as a } from "../../utils/index.js";
-import f from "../../patterns/UserManagement/UserManagement.js";
-import _ from "../../patterns/LanguageSelector/LanguageSelector.js";
-import v from "../../components/Navigation/Navigation.js";
-import { defaultHeaderContext as k } from "./utils.js";
-import { SSRMediaQuery as q } from "../../providers/SeldonProvider/utils.js";
-import { useMobileMenu as Q } from "./hooks.js";
-import U from "../../components/Icon/Icon.js";
-const z = w(k), B = A(
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import i from "../../node_modules/classnames/index.js";
+import t, { createContext as k, forwardRef as q, useState as c, useEffect as B } from "react";
+import Q from "../../components/Icon/Icon.js";
+import b from "../../components/Navigation/Navigation.js";
+import x from "../../patterns/LanguageSelector/LanguageSelector.js";
+import C from "../../patterns/UserManagement/UserManagement.js";
+import { SSRMediaQuery as U } from "../../providers/SeldonProvider/utils.js";
+import { findChildrenOfType as m, findChildrenExcludingTypes as D, px as n } from "../../utils/index.js";
+import { useMobileMenu as F } from "./hooks.js";
+import { defaultHeaderContext as G } from "./utils.js";
+const J = k(G), K = q(
   ({
-    logo: i = /* @__PURE__ */ t(U, { icon: "PhillipsLogo" }),
-    logoHref: E = "/",
-    className: C,
-    children: n,
-    toggleOpenText: M = "Open Menu",
-    toggleCloseText: x = "Close Menu",
-    logoText: b = "Home Page",
-    disabled: m,
-    ...S
-  }, y) => {
-    const c = d(n, f), $ = e.isValidElement(c?.[0]) ? e.cloneElement(c[0], { disabled: m }) : "", h = d(n, _), u = e.isValidElement(h?.[0]) ? e.cloneElement(h[0], { disabled: m }) : "", [p, N] = g(!1), T = d(n, v), H = L(n, [v, f, _]), { closeMenu: R, handleMenuToggle: I, isMenuOpen: s, toggleText: O } = Q({ toggleOpenText: M, toggleCloseText: x }), [P, j] = g(null), V = e.useRef(null);
-    return /* @__PURE__ */ o("header", { ...S, className: l(`${a}-header`, C), ref: y, children: [
-      /* @__PURE__ */ o("div", { className: `${a}-header__top-row`, children: [
-        /* @__PURE__ */ t(q.Media, { greaterThanOrEqual: "md", children: u }),
-        /* @__PURE__ */ o(
-          "button",
-          {
-            "aria-label": O,
-            "data-testid": "mobile-menu-toggle",
-            type: "button",
-            onClick: I,
-            className: l(`${a}-header__toggle-btn`, {
-              [`${a}-header__toggle-btn--open`]: s
-            }),
-            children: [
-              /* @__PURE__ */ t("span", {}),
-              " "
-            ]
-          }
-        ),
-        /* @__PURE__ */ t("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, children: /* @__PURE__ */ t("a", { href: E, "aria-label": b, children: typeof i == "object" ? i : /* @__PURE__ */ t("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i }) }) }),
-        $
-      ] }),
-      /* @__PURE__ */ t("div", { className: l(`${a}-header__nav`, { [`${a}-header__nav--closed`]: !s }), children: /* @__PURE__ */ o(
-        z.Provider,
-        {
-          value: {
-            activeSubmenuId: P,
-            setActiveSubmenuId: j,
-            closeTimeoutRef: V,
-            isMenuOpen: s,
-            isSearchExpanded: p,
-            setIsSearchExpanded: N,
-            closeMenu: R
-          },
-          children: [
-            e.Children.map(
-              T,
-              (r) => e.isValidElement(r) ? e.cloneElement(r, {
+    logo: s = /* @__PURE__ */ r(Q, { icon: "PhillipsLogo" }),
+    logoHref: M = "/",
+    className: y,
+    children: a,
+    toggleOpenText: H = "Open Menu",
+    toggleCloseText: S = "Close Menu",
+    logoText: $ = "Home Page",
+    disabled: h,
+    bannerRef: o,
+    ...N
+  }, O) => {
+    const u = m(a, C), T = t.isValidElement(u?.[0]) ? t.cloneElement(u[0], { disabled: h }) : "", g = m(a, x), p = t.isValidElement(g?.[0]) ? t.cloneElement(g[0], { disabled: h }) : "", [f, w] = c(!1), I = m(a, b), P = D(a, [b, C, x]), { closeMenu: j, handleMenuToggle: R, isMenuOpen: d, toggleText: V } = F({ toggleOpenText: H, toggleCloseText: S }), [z, A] = c(null), L = t.useRef(null), [_, v] = c(o?.current ? o.current.clientHeight : 0);
+    return B(() => {
+      const e = o?.current;
+      if (!e) return;
+      v(e.clientHeight);
+      const E = new window.ResizeObserver(() => {
+        v(e.clientHeight);
+      });
+      return E.observe(e), () => {
+        E.disconnect();
+      };
+    }, [o, _]), /* @__PURE__ */ l(
+      "header",
+      {
+        ...N,
+        className: i(`${n}-header`, y),
+        ref: O,
+        style: { "--banner-height": `${_}px` },
+        children: [
+          /* @__PURE__ */ l("div", { className: `${n}-header__top-row`, children: [
+            /* @__PURE__ */ r(U.Media, { greaterThanOrEqual: "md", children: p }),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                "aria-label": V,
+                "data-testid": "mobile-menu-toggle",
+                type: "button",
+                onClick: R,
+                className: i(`${n}-header__toggle-btn`, {
+                  [`${n}-header__toggle-btn--open`]: d
+                }),
                 children: [
-                  ...e.Children.toArray(r.props.children),
-                  u
+                  /* @__PURE__ */ r("span", {}),
+                  " "
                 ]
-              }) : r
+              }
             ),
-            H
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: l(`${a}-header__overlay`, {
-            [`${a}-header__overlay--active`]: p
-          })
-        }
-      )
-    ] });
+            /* @__PURE__ */ r("h1", { "data-testid": "header-logo", className: `${n}-header__logo`, children: /* @__PURE__ */ r("a", { href: M, "aria-label": $, children: typeof s == "object" ? s : /* @__PURE__ */ r("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s }) }) }),
+            T
+          ] }),
+          /* @__PURE__ */ r("div", { className: i(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !d }), children: /* @__PURE__ */ l(
+            J.Provider,
+            {
+              value: {
+                activeSubmenuId: z,
+                setActiveSubmenuId: A,
+                closeTimeoutRef: L,
+                isMenuOpen: d,
+                isSearchExpanded: f,
+                setIsSearchExpanded: w,
+                closeMenu: j
+              },
+              children: [
+                t.Children.map(
+                  I,
+                  (e) => t.isValidElement(e) ? t.cloneElement(e, {
+                    children: [
+                      ...t.Children.toArray(e.props.children),
+                      p
+                    ]
+                  }) : e
+                ),
+                P
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: i(`${n}-header__overlay`, {
+                [`${n}-header__overlay--active`]: f
+              })
+            }
+          )
+        ]
+      }
+    );
   }
 );
-B.displayName = "Header";
+K.displayName = "Header";
 export {
-  z as HeaderContext,
-  B as default
+  J as HeaderContext,
+  K as default
 };

package/package.json

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