@phillips/seldon 1.46.0 → 1.48.0

package/dist/_virtual/_commonjsHelpers.js

@@ -1,26 +1,28 @@
-function n(e) {
+var u = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : {};
+function f(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-function c(e) {
+function l(e) {
   if (e.__esModule) return e;
-  var o = e.default;
-  if (typeof o == "function") {
-    var t = function r() {
-      return this instanceof r ? Reflect.construct(o, arguments, this.constructor) : o.apply(this, arguments);
+  var r = e.default;
+  if (typeof r == "function") {
+    var t = function o() {
+      return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
     };
-    t.prototype = o.prototype;
+    t.prototype = r.prototype;
   } else t = {};
-  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) {
-    var u = Object.getOwnPropertyDescriptor(e, r);
-    Object.defineProperty(t, r, u.get ? u : {
+  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
+    var n = Object.getOwnPropertyDescriptor(e, o);
+    Object.defineProperty(t, o, n.get ? n : {
       enumerable: !0,
       get: function() {
-        return e[r];
+        return e[o];
       }
     });
   }), t;
 }
 export {
-  c as getAugmentedNamespace,
-  n as getDefaultExportFromCjs
+  u as commonjsGlobal,
+  l as getAugmentedNamespace,
+  f as getDefaultExportFromCjs
 };

package/dist/assets/PhillipsLogo.svg.js

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

package/dist/components/Footer/Footer.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import l from "../../node_modules/classnames/index.js";
 import { px as r, defaultYear as m } from "../../utils/index.js";
-import d from "../../assets/PhillipsLogo.svg.js";
-import { TextVariants as f } from "../Text/types.js";
-import c from "../Text/Text.js";
+import f from "../../assets/PhillipsLogo.svg.js";
+import { TextVariants as c } from "../Text/types.js";
+import d from "../Text/Text.js";
 const $ = ({
   children: a,
   className: i,
@@ -12,8 +12,8 @@ const $ = ({
 }) => /* @__PURE__ */ t("footer", { "data-testid": e || "footer", id: e, className: l(`${r}-footer`, { className: i }), children: [
   /* @__PURE__ */ o("div", { className: `${r}-footer__links`, children: a }),
   /* @__PURE__ */ t("div", { className: `${r}-footer__copyright`, children: [
-    /* @__PURE__ */ o("h3", { "data-testid": "header-logo", className: `${r}-header__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(d, {}) }) }),
-    /* @__PURE__ */ o(c, { variant: f.body3, children: s })
+    /* @__PURE__ */ o("h3", { "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(f, {}) }) }),
+    /* @__PURE__ */ o(d, { variant: c.body3, children: s })
   ] })
 ] });
 export {

package/dist/components/Grid/Grid.d.ts

@@ -1,4 +1,5 @@
-export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+import { SpacingTokens } from '../../utils';
+export interface GridProps<ElementType = HTMLElement> extends React.HTMLAttributes<ElementType> {
     /**
      * A Grid must have children
      */
@@ -6,7 +7,15 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to 'section'.
      */
-    element?: React.ElementType<GridProps>;
+    element?: React.ElementType<GridProps<ElementType>>;
+    /**
+     * The gap between the rows in the grid.  Defaults to 'md'.
+     */
+    columnGap?: SpacingTokens;
+    /**
+     * The gap between the columns in the grid.  Defaults to 'lg'.
+     */
+    rowGap?: SpacingTokens;
 }
 /**
  * ## Overview
@@ -17,5 +26,5 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-layouts-grid--overview)
  */
-export declare function Grid({ children, className, element: Element, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, className, element: Element, columnGap, rowGap, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,11 +1,27 @@
-import { jsx as t } from "react/jsx-runtime";
-import n from "../../node_modules/classnames/index.js";
-import { getCommonProps as c } from "../../utils/index.js";
-function p({ children: o, className: s, element: e = "section", ...m }) {
-  const { className: r, ...a } = c(m, "Grid");
-  return /* @__PURE__ */ t(e, { ...a, className: n(r, s), ...m, children: o });
+import { jsx as c } from "react/jsx-runtime";
+import l from "../../node_modules/classnames/index.js";
+import { getCommonProps as d, SpacingTokens as e } from "../../utils/index.js";
+import { determineGridClassName as f } from "./utils.js";
+function C({
+  children: o,
+  className: s,
+  element: r = "section",
+  columnGap: a = e.md,
+  rowGap: t = e.lg,
+  ...m
+}) {
+  const { className: n, ...i } = d(m, "Grid");
+  return /* @__PURE__ */ c(
+    r,
+    {
+      ...i,
+      className: l(f(n, a, t), s),
+      ...m,
+      children: o
+    }
+  );
 }
 export {
-  p as Grid,
-  p as default
+  C as Grid,
+  C as default
 };

package/dist/components/Grid/utils.d.ts

@@ -0,0 +1,2 @@
+import { SpacingTokens } from '../../utils';
+export declare const determineGridClassName: (baseClassName: string, columnGap: SpacingTokens, rowGap: SpacingTokens) => string;

package/dist/components/Grid/utils.js

@@ -0,0 +1,8 @@
+import t from "../../node_modules/classnames/index.js";
+const m = (r, o, n) => t(
+  `${r} ${r}--column-gap-${o}`,
+  `${r}--row-gap-${n}`
+);
+export {
+  m as determineGridClassName
+};

package/dist/components/GridItem/GridItem.js

@@ -7,8 +7,8 @@ import { GridItemAlign as N } from "./types.js";
 const A = ({
   children: p,
   xs: m = 2,
-  sm: r = 4,
-  md: t = 12,
+  sm: r = 2,
+  md: t = 6,
   lg: o = 12,
   align: s = N.center,
   element: c = "div",

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

@@ -21,12 +21,21 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      */
     logoText?: string;
 }
-export declare const HeaderContext: React.Context<{
+export type HeaderContextType = {
     defaultMobileMenuLabel: string;
     expandedItem: string;
-    setExpandedItem: (_item: string) => void;
+    setExpandedItem: (item: string) => void;
     isExpanded: boolean;
-    onSelect: (_label: string) => void;
-}>;
+    onSelect: (label: string) => void;
+    /**
+     * Is the user within the search input and searching
+     */
+    isSearchExpanded: boolean;
+    /**
+     * Set the search expanded state
+     */
+    setIsSearchExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const HeaderContext: React.Context<HeaderContextType>;
 declare const Header: ({ defaultMobileMenuLabel, logo, className, children, toggleOpenText, toggleCloseText, logoText, ...props }: React.PropsWithChildren<HeaderProps>) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/components/Header/Header.js

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

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

@@ -0,0 +1,9 @@
+export declare const defaultHeaderContext: {
+    defaultMobileMenuLabel: string;
+    expandedItem: string;
+    setExpandedItem: () => void;
+    isExpanded: boolean;
+    onSelect: () => void;
+    isSearchExpanded: boolean;
+    setIsSearchExpanded: () => void;
+};

package/dist/components/Header/utils.js

@@ -0,0 +1,13 @@
+import { noOp as e } from "../../utils/index.js";
+const d = {
+  defaultMobileMenuLabel: "",
+  expandedItem: "",
+  setExpandedItem: e,
+  isExpanded: !1,
+  onSelect: e,
+  isSearchExpanded: !1,
+  setIsSearchExpanded: e
+};
+export {
+  d as defaultHeaderContext
+};

package/dist/components/LinkList/LinkList.d.ts

@@ -1,6 +1,7 @@
 import LinkBlock, { type LinkBlockProps } from '../LinkBlock/LinkBlock';
 import React from 'react';
-export interface LinkListProps extends React.HTMLAttributes<HTMLUListElement> {
+import { GridProps } from '../Grid/Grid';
+export interface LinkListProps extends GridProps<HTMLUListElement> {
     /** These children should be an array of LinkBlock components */
     children: React.ReactElement<LinkBlockProps, typeof LinkBlock>[];
 }

package/dist/components/Navigation/Navigation.js

@@ -1,50 +1,54 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import * as x from "react";
-import { px as e } from "../../utils/index.js";
-import d from "../../node_modules/classnames/index.js";
-import { HeaderContext as v } from "../Header/Header.js";
-const _ = ({
-  backBtnLabel: i,
-  children: r,
-  className: b,
-  id: a,
-  visible: n = !0
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import * as l from "react";
+import { findChildrenOfType as m, px as a } from "../../utils/index.js";
+import b from "../../node_modules/classnames/index.js";
+import { HeaderContext as _ } from "../Header/Header.js";
+import p from "./NavigationList/NavigationList.js";
+const g = ({
+  backBtnLabel: f,
+  children: i,
+  className: v,
+  id: e,
+  visible: s = !0
 }) => {
-  const { defaultMobileMenuLabel: l, isExpanded: s, expandedItem: t, setExpandedItem: m } = x.useContext(v), c = () => m(t === l ? t : l);
-  return /* @__PURE__ */ p(
+  const { defaultMobileMenuLabel: o, isExpanded: d, expandedItem: n, setExpandedItem: x, isSearchExpanded: $ } = l.useContext(_), h = () => x(n === o ? n : o), t = m(i, p), u = m(i, p, !0);
+  return /* @__PURE__ */ r(
     "nav",
     {
       role: "navigation",
-      "aria-labelledby": `${a}-label`,
-      "data-testid": a,
-      id: a,
-      className: d(`${e}-nav`, b, { [`${e}-nav--expanded`]: s }),
+      "aria-labelledby": `${e}-label`,
+      "data-testid": e,
+      id: e,
+      className: b(`${a}-nav`, v, { [`${a}-nav--expanded`]: d }),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ c(
           "button",
           {
-            "data-testid": `${a}-back-btn`,
-            tabIndex: s ? 0 : -1,
-            className: `${e}-nav__back-btn`,
-            onClick: c,
-            children: i
+            "data-testid": `${e}-back-btn`,
+            tabIndex: d ? 0 : -1,
+            className: `${a}-nav__back-btn`,
+            onClick: h,
+            children: f
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ c(
           "h2",
           {
-            id: `${a}-label`,
-            "data-testid": `${a}-label`,
-            className: d(`${e}-nav__label`, { [`${e}-nav__label--hidden`]: !n }),
-            style: { "--visible": n ? "visible" : "hidden" },
-            children: t || "Main Menu"
+            id: `${e}-label`,
+            "data-testid": `${e}-label`,
+            className: b(`${a}-nav__label`, { [`${a}-nav__label--hidden`]: !s }),
+            style: { "--visible": s ? "visible" : "hidden" },
+            children: n || "Main Menu"
           }
         ),
-        r
+        /* @__PURE__ */ r("div", { className: `${a}-nav__list-container`, children: [
+          l.isValidElement(t == null ? void 0 : t[0]) ? l.cloneElement(t[0], { isOffScreen: $ }) : void 0,
+          u
+        ] })
       ]
     }
   );
 };
 export {
-  _ as default
+  g as default
 };

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

@@ -4,6 +4,10 @@ export interface NavigationListProps extends React.HTMLAttributes<HTMLElement> {
      * id for the navigation list
      */
     id: string;
+    /**
+     * Is the nav list offscreen?
+     */
+    isOffScreen?: boolean;
 }
-declare const NavigationList: ({ id, children, className }: React.PropsWithChildren<NavigationListProps>) => import("react/jsx-runtime").JSX.Element;
+declare const NavigationList: React.FC<NavigationListProps>;
 export default NavigationList;

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

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