@amsterdam/design-system-react 0.15.0 → 0.16.0

package/dist/LinkList/LinkList.test.js

@@ -15,7 +15,7 @@ describe('Link list', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-link-list');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(LinkList, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-link-list extra');

package/dist/LinkList/LinkListLink.test.js

@@ -21,7 +21,7 @@ describe('Link list link', () => {
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-link-list__link');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(LinkList.Link, { className: "extra", href: "#" }));
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-link-list__link extra');

package/dist/Logo/Logo.test.js

@@ -15,11 +15,10 @@ describe('Logo', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-logo');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Logo, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-logo');
+        expect(component).toHaveClass('ams-logo extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/Mark/Mark.test.js

@@ -15,7 +15,7 @@ describe('Mark', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-mark');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Mark, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-mark extra');

package/dist/OrderedList/OrderedList.test.js

@@ -24,7 +24,7 @@ describe('Ordered list', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-ordered-list--inverse');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(OrderedList, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-ordered-list extra');

package/dist/OrderedList/OrderedListItem.test.js

@@ -14,7 +14,7 @@ describe('Ordered list item', () => {
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-ordered-list__item');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(OrderedListItem, { className: "extra" }));
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-ordered-list__item extra');

package/dist/Overlap/Overlap.test.js

@@ -15,7 +15,7 @@ describe('Overlap', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-overlap');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Overlap, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-overlap extra');

package/dist/{Footer/FooterSpotlight.d.ts → Page/Page.d.ts}

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-export declare const FooterSpotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+export type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const Page: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Page/Page.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const Page = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page', className), ref: ref, children: children })));
+Page.displayName = 'Page';

package/dist/{MegaMenu/MegaMenu.test.js → Page/Page.test.js}

@@ -1,28 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { MegaMenu } from './MegaMenu';
+import { Page } from './Page';
 import '@testing-library/jest-dom';
-describe('Mega menu', () => {
+describe('Page', () => {
     it('renders', () => {
-        const { container } = render(_jsx(MegaMenu, {}));
+        const { container } = render(_jsx(Page, {}));
         const component = container.querySelector(':only-child');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
     it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(MegaMenu, {}));
+        const { container } = render(_jsx(Page, {}));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu');
+        expect(component).toHaveClass('ams-page');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(MegaMenu, { className: "extra" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Page, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu extra');
+        expect(component).toHaveClass('ams-page extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(MegaMenu, { ref: ref }));
+        const { container } = render(_jsx(Page, { ref: ref }));
         const component = container.querySelector(':only-child');
         expect(ref.current).toBe(component);
     });

package/dist/Page/index.d.ts

@@ -0,0 +1,2 @@
+export { Page } from './Page';
+export type { PageProps } from './Page';

package/dist/Page/index.js

@@ -0,0 +1 @@
+export { Page } from './Page';

package/dist/{Footer/Footer.d.ts → PageFooter/PageFooter.d.ts}

@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export declare const Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const PageFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
     Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {

package/dist/PageFooter/PageFooter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { PageFooterMenu } from './PageFooterMenu';
+import { PageFooterMenuLink } from './PageFooterMenuLink';
+import { PageFooterSpotlight } from './PageFooterSpotlight';
+const PageFooterRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("footer", { ...restProps, className: clsx('ams-page-footer', className), ref: ref, children: children })));
+PageFooterRoot.displayName = 'PageFooter';
+export const PageFooter = Object.assign(PageFooterRoot, {
+    Menu: PageFooterMenu,
+    MenuLink: PageFooterMenuLink,
+    Spotlight: PageFooterSpotlight,
+});

package/dist/{Footer/Footer.test.js → PageFooter/PageFooter.test.js}

@@ -1,28 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Footer } from './Footer';
+import { PageFooter } from './PageFooter';
 import '@testing-library/jest-dom';
-describe('Footer', () => {
+describe('Page Footer', () => {
     it('renders an HTML footer element', () => {
-        render(_jsx(Footer, {}));
+        render(_jsx(PageFooter, {}));
         const component = screen.getByRole('contentinfo');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(Footer, {}));
+        render(_jsx(PageFooter, {}));
         const component = screen.getByRole('contentinfo');
-        expect(component).toHaveClass('ams-footer');
+        expect(component).toHaveClass('ams-page-footer');
     });
-    it('renders an additional class name', () => {
-        render(_jsx(Footer, { className: "extra" }));
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter, { className: "extra" }));
         const component = screen.getByRole('contentinfo');
-        expect(component).toHaveClass('ams-footer extra');
+        expect(component).toHaveClass('ams-page-footer extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsx(Footer, { ref: ref }));
+        render(_jsx(PageFooter, { ref: ref }));
         const component = screen.getByRole('contentinfo');
         expect(ref.current).toBe(component);
     });

package/dist/{Footer/FooterMenu.d.ts → PageFooter/PageFooterMenu.d.ts}

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-export declare const FooterMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+export type PageFooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const PageFooterMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLUListElement>>;

package/dist/PageFooter/PageFooterMenu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const PageFooterMenu = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-page-footer__menu', className), ref: ref, children: children })));
+PageFooterMenu.displayName = 'PageFooter.Menu';

package/dist/{Footer/FooterMenu.test.js → PageFooter/PageFooterMenu.test.js}

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Footer } from './Footer';
+import { PageFooter } from './PageFooter';
 import '@testing-library/jest-dom';
-describe('Footer menu', () => {
+describe('Page Footer Menu', () => {
     it('renders a footer menu with children', () => {
-        render(_jsxs(Footer.Menu, { children: [_jsx(Footer.MenuLink, { href: "#", lang: "en", children: "English" }), _jsx(Footer.MenuLink, { href: "#", children: "Mijn Amsterdam" })] }));
+        render(_jsxs(PageFooter.Menu, { children: [_jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }), _jsx(PageFooter.MenuLink, { href: "#", children: "Mijn Amsterdam" })] }));
         const component = screen.getByRole('list');
         const children = screen.getAllByRole('listitem');
         expect(component).toBeInTheDocument();
@@ -13,19 +13,19 @@ describe('Footer menu', () => {
         expect(children).toHaveLength(2);
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(Footer.Menu, {}));
+        render(_jsx(PageFooter.Menu, {}));
         const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-footer__menu');
+        expect(component).toHaveClass('ams-page-footer__menu');
     });
     it('is able to pass a React ref', () => {
         const ref = createRef();
-        render(_jsx(Footer.Menu, { ref: ref, children: _jsx(Footer.MenuLink, { href: "#", lang: "en", children: "English" }) }));
+        render(_jsx(PageFooter.Menu, { ref: ref, children: _jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }) }));
         const component = screen.getByRole('list');
         expect(ref.current).toBe(component);
     });
-    it('renders an additional class name', () => {
-        render(_jsx(Footer.Menu, { className: "intro" }));
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter.Menu, { className: "intro" }));
         const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-footer__menu intro');
+        expect(component).toHaveClass('ams-page-footer__menu intro');
     });
 });

package/dist/{Footer/FooterMenuLink.d.ts → PageFooter/PageFooterMenuLink.d.ts}

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
-export type FooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export declare const FooterMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export declare const PageFooterMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageFooter/PageFooterMenuLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const PageFooterMenuLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: "ams-page-footer__menu-item", children: _jsx("a", { ...restProps, className: clsx('ams-page-footer__menu-link', className), ref: ref, children: children }) })));
+PageFooterMenuLink.displayName = 'PageFooter.MenuLink';

package/dist/{Footer/FooterMenuLink.test.js → PageFooter/PageFooterMenuLink.test.js}

@@ -1,28 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Footer } from './Footer';
+import { PageFooter } from './PageFooter';
 import '@testing-library/jest-dom';
-describe('Page menu link', () => {
+describe('Page Footer Menu Link', () => {
     it('renders with href attribute', () => {
-        render(_jsx(Footer.MenuLink, { href: "#", children: "Link" }));
+        render(_jsx(PageFooter.MenuLink, { href: "#", children: "Link" }));
         const component = screen.getByRole('link');
         expect(component).toBeInTheDocument();
         expect(component).toHaveAttribute('href', '#');
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(Footer.MenuLink, { href: "#", children: "Link" }));
+        render(_jsx(PageFooter.MenuLink, { href: "#", children: "Link" }));
         const component = screen.getByRole('link');
-        expect(component).toHaveClass('ams-footer__menu-link');
+        expect(component).toHaveClass('ams-page-footer__menu-link');
     });
-    it('renders an additional class name', () => {
-        render(_jsx(Footer.MenuLink, { className: "extra", href: "#", children: "Link" }));
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter.MenuLink, { className: "extra", href: "#", children: "Link" }));
         const component = screen.getByRole('link');
-        expect(component).toHaveClass('ams-footer__menu-link extra');
+        expect(component).toHaveClass('ams-page-footer__menu-link extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsx(Footer.MenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
+        render(_jsx(PageFooter.MenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
         const component = screen.getByRole('link');
         expect(ref.current).toBe(component);
     });

package/dist/PageFooter/PageFooterSpotlight.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const PageFooterSpotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/PageFooter/PageFooterSpotlight.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const PageFooterSpotlight = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page-footer__spotlight', className), ref: ref, children: children })));
+PageFooterSpotlight.displayName = 'PageFooter.Spotlight';

package/dist/{MegaMenu/MegaMenuListCategory.test.js → PageFooter/PageFooterSpotlight.test.js}

@@ -1,28 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { MegaMenuListCategory } from './MegaMenuListCategory';
+import { PageFooter } from './PageFooter';
 import '@testing-library/jest-dom';
-describe('Mega menu category', () => {
+describe('Page Footer Spotlight', () => {
     it('renders', () => {
-        const { container } = render(_jsx(MegaMenuListCategory, {}));
+        const { container } = render(_jsx(PageFooter.Spotlight, {}));
         const component = container.querySelector(':only-child');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
     it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(MegaMenuListCategory, {}));
+        const { container } = render(_jsx(PageFooter.Spotlight, {}));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu__list-category');
+        expect(component).toHaveClass('ams-page-footer__spotlight');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(MegaMenuListCategory, { className: "extra" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(PageFooter.Spotlight, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu__list-category extra');
+        expect(component).toHaveClass('ams-page-footer__spotlight extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(MegaMenuListCategory, { ref: ref }));
+        const { container } = render(_jsx(PageFooter.Spotlight, { ref: ref }));
         const component = container.querySelector(':only-child');
         expect(ref.current).toBe(component);
     });

package/dist/PageFooter/index.d.ts

@@ -0,0 +1,5 @@
+export { PageFooter } from './PageFooter';
+export type { PageFooterProps } from './PageFooter';
+export type { PageFooterMenuProps } from './PageFooterMenu';
+export type { PageFooterMenuLinkProps } from './PageFooterMenuLink';
+export type { PageFooterSpotlightProps } from './PageFooterSpotlight';

package/dist/PageFooter/index.js

@@ -0,0 +1 @@
+export { PageFooter } from './PageFooter';

package/dist/{Header/Header.d.ts → PageHeader/PageHeader.d.ts}

@@ -4,7 +4,7 @@
  */
 import type { HTMLAttributes, ReactNode } from 'react';
 import type { LogoBrand } from '../Logo';
-export type HeaderProps = {
+export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
     /** The name of the brand for which to display the logo. */
@@ -15,14 +15,14 @@ export type HeaderProps = {
     logoLinkTitle?: string;
     /** The text for the menu button. */
     menuButtonText?: string;
-    /** A slot for the menu items. Use Header.MenuLink here. */
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
     menuItems?: ReactNode;
     /** The accessible label for the navigation section. */
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
 } & HTMLAttributes<HTMLElement>;
-export declare const Header: import("react").ForwardRefExoticComponent<{
+export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
     /** The name of the brand for which to display the logo. */
@@ -33,7 +33,7 @@ export declare const Header: import("react").ForwardRefExoticComponent<{
     logoLinkTitle?: string;
     /** The text for the menu button. */
     menuButtonText?: string;
-    /** A slot for the menu items. Use Header.MenuLink here. */
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
     menuItems?: ReactNode;
     /** The accessible label for the navigation section. */
     navigationLabel?: string;

package/dist/PageHeader/PageHeader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { Icon } from '../Icon';
+import { Logo } from '../Logo';
+import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
+import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
+import { PageHeaderMenuLink } from './PageHeaderMenuLink';
+import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
+const LogoLinkContent = ({ brandName, logoBrand }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
+const PageHeaderRoot = forwardRef(({ brandName, children, className, logoBrand = 'amsterdam', logoLink = '/', logoLinkTitle = 'Ga naar de homepage', menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+    const [open, setOpen] = useState(false);
+    const hasMegaMenu = Boolean(children);
+    const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
+    useEffect(() => {
+        // Close the menu when the menu button disappears
+        if (noMenuButtonOnWideWindow && isWideWindow) {
+            setOpen(false);
+        }
+    }, [isWideWindow]);
+    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs("a", { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle }), _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
+});
+PageHeaderRoot.displayName = 'PageHeader';
+export const PageHeader = Object.assign(PageHeaderRoot, {
+    GridCellNarrowWindowOnly: PageHeaderGridCellNarrowWindowOnly,
+    MenuLink: PageHeaderMenuLink,
+});