@amsterdam/design-system-react 2.2.0 → 3.0.0

package/README.md

@@ -3,7 +3,7 @@
 # Amsterdam Design System: React components
 
 This package provides all React components from the [Amsterdam Design System](https://designsystem.amsterdam).
-Use it to compose pages in your website or application.
+Use it to compose pages in your websites.
 
 ## Introduction
 

package/dist/Column/Column.d.ts

@@ -56,5 +56,5 @@ export declare const Column: import("react").ForwardRefExoticComponent<{
     gap?: ColumnGap;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<unknown>>;
+} & import("react").RefAttributes<any>>;
 export {};

package/dist/Grid/Grid.d.ts

@@ -38,6 +38,6 @@ export type GridProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
  */
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<any>> & {
-    Cell: import("react").ForwardRefExoticComponent<import("./GridCell").GridCellProps & import("react").RefAttributes<unknown>>;
+    Cell: import("react").ForwardRefExoticComponent<import("./GridCell").GridCellProps & import("react").RefAttributes<any>>;
 };
 export {};

package/dist/Grid/GridCell.d.ts

@@ -21,5 +21,5 @@ export type GridCellProps = {
     /** The HTML tag to use. */
     as?: GridCellTag;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>> & (GridCellSpanAllProp | GridCellSpanAndStartProps);
-export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<unknown>>;
+export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<any>>;
 export {};

package/dist/Logo/Logo.d.ts

@@ -2,13 +2,18 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
-export type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
+import type { ComponentType, SVGProps } from 'react';
+export declare const logoBrands: readonly ["amsterdam", "ggd-amsterdam", "museum-weesp", "stadsarchief", "stadsbank-van-lening", "vga-verzekeringen"];
+export type LogoBrand = (typeof logoBrands)[number];
 export type LogoProps = {
-    /** The name of the brand for which to display the logo. */
-    brand?: LogoBrand;
+    /** The name of the brand for which to display the logo, or configuration for a custom logo. */
+    brand?: LogoBrand | LogoBrandConfig;
 } & SVGProps<SVGSVGElement>;
+export type LogoBrandConfig = {
+    label: string;
+    svg: ComponentType<SVGProps<SVGSVGElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
  */
-export declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export declare const Logo: import("react").ForwardRefExoticComponent<Omit<LogoProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/Logo/Logo.js

@@ -2,38 +2,46 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { LogoAmsterdam, LogoGgdAmsterdam, LogoMuseumWeesp, LogoStadsarchief, LogoStadsbankVanLening, LogoVgaVerzekeringen, } from './brand';
+export const logoBrands = [
+    'amsterdam',
+    'ggd-amsterdam',
+    'museum-weesp',
+    'stadsarchief',
+    'stadsbank-van-lening',
+    'vga-verzekeringen',
+];
 const logoConfig = {
     amsterdam: {
         label: 'Gemeente Amsterdam logo',
-        logo: LogoAmsterdam,
+        svg: LogoAmsterdam,
     },
     'ggd-amsterdam': {
         label: 'GGD Amsterdam logo',
-        logo: LogoGgdAmsterdam,
+        svg: LogoGgdAmsterdam,
     },
     'museum-weesp': {
         label: 'Gemeente Amsterdam Museum Weesp logo',
-        logo: LogoMuseumWeesp,
+        svg: LogoMuseumWeesp,
     },
     stadsarchief: {
         label: 'Gemeente Amsterdam Stadsarchief logo',
-        logo: LogoStadsarchief,
+        svg: LogoStadsarchief,
     },
     'stadsbank-van-lening': {
         label: 'Gemeente Amsterdam Stadsbank van Lening logo',
-        logo: LogoStadsbankVanLening,
+        svg: LogoStadsbankVanLening,
     },
     'vga-verzekeringen': {
         label: 'Gemeente Amsterdam VGA Verzekeringen logo',
-        logo: LogoVgaVerzekeringen,
+        svg: LogoVgaVerzekeringen,
     },
 };
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
  */
 export const Logo = forwardRef(({ 'aria-label': ariaLabel, brand = 'amsterdam', className, ...restProps }, ref) => {
-    const LogoComponent = logoConfig[brand].logo;
-    const logoLabel = logoConfig[brand].label;
-    return (_jsx(LogoComponent, { ...restProps, "aria-label": ariaLabel || logoLabel, className: clsx('ams-logo', className), ref: ref }));
+    const config = typeof brand === 'string' ? logoConfig[brand] : brand;
+    const { label, svg: LogoComponent } = config;
+    return (_jsx(LogoComponent, { ...restProps, "aria-label": ariaLabel || label, className: clsx('ams-logo', className), ref: ref }));
 });
 Logo.displayName = 'Logo';

package/dist/PageFooter/PageFooter.d.ts

@@ -10,7 +10,10 @@ 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> & {
+    Menu: import("react").ForwardRefExoticComponent<{
+        heading?: string;
+        headingLevel?: import("..").HeadingProps["level"];
+    } & HTMLAttributes<HTMLUListElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLUListElement>>;
     MenuLink: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {

package/dist/PageFooter/PageFooterMenu.d.ts

@@ -3,7 +3,32 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageFooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-export declare const PageFooterMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+import type { HeadingProps } from '../Heading';
+export type PageFooterMenuProps = {
+    /**
+     * Describes the menu for users of assistive technology.
+     * The heading gets visually hidden – sighted users can infer the meaning of the menu from its appearance.
+     * @default Over deze website
+     */
+    heading?: string;
+    /**
+     * The hierarchical level of the Footer Menu’s Heading within the document.
+     * The default value is 2. This will almost always be correct – but verify this yourself.
+     */
+    headingLevel?: HeadingProps['level'];
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const PageFooterMenu: import("react").ForwardRefExoticComponent<{
+    /**
+     * Describes the menu for users of assistive technology.
+     * The heading gets visually hidden – sighted users can infer the meaning of the menu from its appearance.
+     * @default Over deze website
+     */
+    heading?: string;
+    /**
+     * The hierarchical level of the Footer Menu’s Heading within the document.
+     * The default value is 2. This will almost always be correct – but verify this yourself.
+     */
+    headingLevel?: HeadingProps["level"];
+} & HTMLAttributes<HTMLUListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLUListElement>>;

package/dist/PageFooter/PageFooterMenu.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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 })));
+import { getHeadingTag } from '../Heading/getHeadingTag';
+export const PageFooterMenu = forwardRef(({ children, className, heading = 'Over deze website', headingLevel = 2, ...restProps }, ref) => {
+    const HeadingTag = getHeadingTag(headingLevel);
+    return (_jsxs(_Fragment, { children: [_jsx(HeadingTag, { className: "ams-visually-hidden", children: heading }), _jsx("ul", { ...restProps, className: clsx('ams-page-footer__menu', className), ref: ref, children: children })] }));
+});
 PageFooterMenu.displayName = 'PageFooter.Menu';

package/dist/PageHeader/PageHeader.d.ts

@@ -4,21 +4,26 @@
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import type { LogoBrand } from '../Logo';
+import type { LogoBrandConfig } from '../Logo/Logo';
 export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
     logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
-    logoBrand?: LogoBrand;
+    logoBrand?: LogoBrand | LogoBrandConfig;
     /** The url for the link on the logo. */
     logoLink?: string;
     /** The React component to use for the logo link. */
     logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
-    /** The text for the menu button. */
+    /** The visible text for the menu button. */
     menuButtonText?: string;
+    /** The text for screen readers when the button hides the menu. */
+    menuButtonTextForHide?: string;
+    /** The text for screen readers when the button shows the menu. */
+    menuButtonTextForShow?: string;
     /** A slot for the menu items. Use PageHeader.MenuLink here. */
     menuItems?: ReactNode;
     /** The accessible label for the navigation section. */
@@ -35,15 +40,19 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The accessible name of the logo. */
     logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
-    logoBrand?: LogoBrand;
+    logoBrand?: LogoBrand | LogoBrandConfig;
     /** The url for the link on the logo. */
     logoLink?: string;
     /** The React component to use for the logo link. */
     logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
-    /** The text for the menu button. */
+    /** The visible text for the menu button. */
     menuButtonText?: string;
+    /** The text for screen readers when the button hides the menu. */
+    menuButtonTextForHide?: string;
+    /** The text for screen readers when the button shows the menu. */
+    menuButtonTextForShow?: string;
     /** A slot for the menu items. Use PageHeader.MenuLink here. */
     menuItems?: ReactNode;
     /** The accessible label for the navigation section. */

package/dist/PageHeader/PageHeader.js

@@ -8,7 +8,7 @@ import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWi
 import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
 import { PageHeaderMenuLink } from './PageHeaderMenuLink';
 const LogoLinkContent = ({ brandName, logoAccessibleName, logoBrand, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { "aria-label": logoAccessibleName, brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
-const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle = `Ga naar de homepage${brandName ? ` van ${brandName}` : ''}`, menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle = `Ga naar de homepage${brandName ? ` van ${brandName}` : ''}`, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
     const Link = logoLinkComponent;
     const hasMegaMenu = Boolean(children);
@@ -19,7 +19,8 @@ const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessi
             setOpen(false);
         }
     }, [isWideWindow]);
-    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(Link, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { brandName: brandName, logoAccessibleName: logoAccessibleName, logoBrand: logoBrand }), _jsx("span", { className: "ams-visually-hidden", children: ` ${logoLinkTitle}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, 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 }))] }))] }));
+    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(Link, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { brandName: brandName, logoAccessibleName: logoAccessibleName, logoBrand: logoBrand }), _jsx("span", { className: "ams-visually-hidden", children: ` ${logoLinkTitle}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
+                                : true, 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", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { className: "ams-visually-hidden", children: open ? menuButtonTextForHide : menuButtonTextForShow }), _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';
 /**

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

@@ -2,5 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Grid } from '../Grid';
-export const PageHeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-page-header__grid-cell-narrow-window-only', className), ref: ref, children: children })));
+export const PageHeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-page-header__grid-cell-narrow-window-only', className), hidden // Hide until its CSS loads; this cell duplicates the non-fixed links in the Page Header Menu.
+    : true, ref: ref, children: children })));
 PageHeaderGridCellNarrowWindowOnly.displayName = 'PageHeader.GridCellNarrowWindowOnly';

package/dist/Paragraph/Paragraph.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
-import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 export type ParagraphProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
@@ -19,5 +19,5 @@ export declare const Paragraph: import("react").ForwardRefExoticComponent<{
     /** The size of the text. */
     size?: "small" | "large";
 } & HTMLAttributes<HTMLParagraphElement> & {
-    children?: import("react").ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/Paragraph/Paragraph.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+const wrapChildren = (size, children) => {
+    if (size === 'large')
+        return _jsx("b", { className: "ams-paragraph__b", children: children });
+    if (size === 'small')
+        return _jsx("small", { className: "ams-paragraph__small", children: children });
+    return children;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
-export const Paragraph = forwardRef(({ children, className, color, size, ...restProps }, ref) => (_jsx("p", { className: clsx('ams-paragraph', color && `ams-paragraph--${color}`, size && `ams-paragraph--${size}`, className), ref: ref, ...restProps, children: children })));
+export const Paragraph = forwardRef(({ children, className, color, size, ...restProps }, ref) => (_jsx("p", { className: clsx('ams-paragraph', color && `ams-paragraph--${color}`, size && `ams-paragraph--${size}`, className), ref: ref, ...restProps, children: wrapChildren(size, children) })));
 Paragraph.displayName = 'Paragraph';

package/dist/Row/Row.d.ts

@@ -66,5 +66,5 @@ export declare const Row: import("react").ForwardRefExoticComponent<{
     wrap?: boolean;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<unknown>>;
+} & import("react").RefAttributes<any>>;
 export {};

package/dist/Spotlight/Spotlight.d.ts

@@ -23,5 +23,5 @@ export declare const Spotlight: import("react").ForwardRefExoticComponent<{
     color?: SpotlightColor;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<unknown>>;
+} & import("react").RefAttributes<any>>;
 export {};

package/dist/common/useIsAfterBreakpoint.d.ts

@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 export declare const BREAKPOINTS: {
-    medium: string;
-    wide: string;
+    readonly medium: "37.5rem";
+    readonly wide: "72.5rem";
 };
-type useIsAfterBreakpointProps = 'medium' | 'wide';
-declare const useIsAfterBreakpoint: (breakpoint: useIsAfterBreakpointProps) => boolean;
+type Breakpoint = keyof typeof BREAKPOINTS;
+declare const useIsAfterBreakpoint: (breakpoint: Breakpoint) => boolean;
 export default useIsAfterBreakpoint;

package/dist/common/useIsAfterBreakpoint.js

@@ -2,7 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 // TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
 export const BREAKPOINTS = {
     medium: '37.5rem',
@@ -10,19 +10,18 @@ export const BREAKPOINTS = {
 };
 const useIsAfterBreakpoint = (breakpoint) => {
     const [matches, setMatches] = useState(false);
-    useLayoutEffect(() => {
+    useEffect(() => {
         // Check for window object to avoid SSR issues
-        if (breakpoint && typeof window !== 'undefined') {
-            const media = window.matchMedia(`(min-width: ${BREAKPOINTS[breakpoint]})`);
-            if (media.matches !== matches) {
-                setMatches(media.matches);
-            }
-            const listener = () => setMatches(media.matches);
-            window.addEventListener('resize', listener);
-            return () => window.removeEventListener('resize', listener);
-        }
-        return undefined;
-    }, [matches, breakpoint]);
+        if (typeof window === 'undefined')
+            return undefined;
+        const query = `(min-width: ${BREAKPOINTS[breakpoint]})`;
+        const media = window.matchMedia(query);
+        const listener = () => setMatches(media.matches);
+        // Set initial state
+        setMatches(media.matches);
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, [breakpoint]);
     return matches;
 };
 export default useIsAfterBreakpoint;

package/dist/index.cjs.js

@@ -661,6 +661,17 @@ CardHeading.displayName = 'Card.Heading';
 var _excluded$1l = ["children", "className", "color", "size"];
 function ownKeys$1u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var wrapChildren = function wrapChildren(size, children) {
+  if (size === 'large') return jsxRuntime.jsx("b", {
+    className: "ams-paragraph__b",
+    children: children
+  });
+  if (size === 'small') return jsxRuntime.jsx("small", {
+    className: "ams-paragraph__small",
+    children: children
+  });
+  return children;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
@@ -674,7 +685,7 @@ var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className: clsx.clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
     ref: ref
   }, restProps), {}, {
-    children: children
+    children: wrapChildren(size, children)
   }));
 });
 Paragraph.displayName = 'Paragraph';
@@ -2107,27 +2118,27 @@ function _objectSpread$O(e) { for (var r = 1; r < arguments.length; r++) { var t
 var logoConfig = {
   amsterdam: {
     label: 'Gemeente Amsterdam logo',
-    logo: LogoAmsterdam
+    svg: LogoAmsterdam
   },
   'ggd-amsterdam': {
     label: 'GGD Amsterdam logo',
-    logo: LogoGgdAmsterdam
+    svg: LogoGgdAmsterdam
   },
   'museum-weesp': {
     label: 'Gemeente Amsterdam Museum Weesp logo',
-    logo: LogoMuseumWeesp
+    svg: LogoMuseumWeesp
   },
   stadsarchief: {
     label: 'Gemeente Amsterdam Stadsarchief logo',
-    logo: LogoStadsarchief
+    svg: LogoStadsarchief
   },
   'stadsbank-van-lening': {
     label: 'Gemeente Amsterdam Stadsbank van Lening logo',
-    logo: LogoStadsbankVanLening
+    svg: LogoStadsbankVanLening
   },
   'vga-verzekeringen': {
     label: 'Gemeente Amsterdam VGA Verzekeringen logo',
-    logo: LogoVgaVerzekeringen
+    svg: LogoVgaVerzekeringen
   }
 };
 /**
@@ -2139,10 +2150,11 @@ var Logo = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     brand = _ref$brand === void 0 ? 'amsterdam' : _ref$brand,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$M);
-  var LogoComponent = logoConfig[brand].logo;
-  var logoLabel = logoConfig[brand].label;
+  var config = typeof brand === 'string' ? logoConfig[brand] : brand;
+  var label = config.label,
+    LogoComponent = config.svg;
   return jsxRuntime.jsx(LogoComponent, _objectSpread$O(_objectSpread$O({}, restProps), {}, {
-    "aria-label": ariaLabel || logoLabel,
+    "aria-label": ariaLabel || label,
     className: clsx.clsx('ams-logo', className),
     ref: ref
   }));
@@ -2303,18 +2315,28 @@ var Page = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Page.displayName = 'Page';
 
-var _excluded$E = ["children", "className"];
+var _excluded$E = ["children", "className", "heading", "headingLevel"];
 function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PageFooterMenu = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 'Over deze website' : _ref$heading,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     restProps = _objectWithoutProperties(_ref, _excluded$E);
-  return jsxRuntime.jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
-    className: clsx.clsx('ams-page-footer__menu', className),
-    ref: ref,
-    children: children
-  }));
+  var HeadingTag = getHeadingTag(headingLevel);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(HeadingTag, {
+      className: "ams-visually-hidden",
+      children: heading
+    }), jsxRuntime.jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
+      className: clsx.clsx('ams-page-footer__menu', className),
+      ref: ref,
+      children: children
+    }))]
+  });
 });
 PageFooterMenu.displayName = 'PageFooter.Menu';
 
@@ -2384,23 +2406,21 @@ var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
     _useState2 = _slicedToArray(_useState, 2),
     matches = _useState2[0],
     setMatches = _useState2[1];
-  react.useLayoutEffect(function () {
+  react.useEffect(function () {
     // Check for window object to avoid SSR issues
-    if (typeof window !== 'undefined') {
-      var media = window.matchMedia("(min-width: ".concat(BREAKPOINTS[breakpoint], ")"));
-      if (media.matches !== matches) {
-        setMatches(media.matches);
-      }
-      var listener = function listener() {
-        return setMatches(media.matches);
-      };
-      window.addEventListener('resize', listener);
-      return function () {
-        return window.removeEventListener('resize', listener);
-      };
-    }
-    return undefined;
-  }, [matches, breakpoint]);
+    if (typeof window === 'undefined') return undefined;
+    var query = "(min-width: ".concat(BREAKPOINTS[breakpoint], ")");
+    var media = window.matchMedia(query);
+    var listener = function listener() {
+      return setMatches(media.matches);
+    };
+    // Set initial state
+    setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return function () {
+      return media.removeEventListener('change', listener);
+    };
+  }, [breakpoint]);
   return matches;
 };
 
@@ -2413,6 +2433,8 @@ var PageHeaderGridCellNarrowWindowOnly = /*#__PURE__*/react.forwardRef(function
     restProps = _objectWithoutProperties(_ref, _excluded$A);
   return jsxRuntime.jsx(Grid.Cell, _objectSpread$C(_objectSpread$C({}, restProps), {}, {
     className: clsx.clsx('ams-page-header__grid-cell-narrow-window-only', className),
+    hidden // Hide until its CSS loads; this cell duplicates the non-fixed links in the Page Header Menu.
+    : true,
     ref: ref,
     children: children
   }));
@@ -2463,7 +2485,7 @@ var PageHeaderMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';
 
-var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
+var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuButtonTextForHide", "menuButtonTextForShow", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
 function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoLinkContent = function LogoLinkContent(_ref) {
@@ -2501,6 +2523,10 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     logoLinkTitle = _ref2$logoLinkTitle === void 0 ? "Ga naar de homepage".concat(brandName ? " van ".concat(brandName) : '') : _ref2$logoLinkTitle,
     _ref2$menuButtonText = _ref2.menuButtonText,
     menuButtonText = _ref2$menuButtonText === void 0 ? 'Menu' : _ref2$menuButtonText,
+    _ref2$menuButtonTextF = _ref2.menuButtonTextForHide,
+    menuButtonTextForHide = _ref2$menuButtonTextF === void 0 ? 'Verberg navigatiemenu' : _ref2$menuButtonTextF,
+    _ref2$menuButtonTextF2 = _ref2.menuButtonTextForShow,
+    menuButtonTextForShow = _ref2$menuButtonTextF2 === void 0 ? 'Laat navigatiemenu zien' : _ref2$menuButtonTextF2,
     menuItems = _ref2.menuItems,
     _ref2$navigationLabel = _ref2.navigationLabel,
     navigationLabel = _ref2$navigationLabel === void 0 ? 'Hoofdnavigatie' : _ref2$navigationLabel,
@@ -2552,7 +2578,9 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
       }), jsxRuntime.jsxs("ul", {
         className: "ams-page-header__menu",
         children: [menuItems, hasMegaMenu && jsxRuntime.jsx("li", {
-          className: clsx.clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
+          className: clsx.clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
+          hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
+          : true,
           children: jsxRuntime.jsxs("button", {
             "aria-controls": "ams-page-header-mega-menu",
             "aria-expanded": open,
@@ -2562,8 +2590,12 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
             },
             type: "button",
             children: [jsxRuntime.jsx("span", {
+              "aria-hidden": "true",
               className: "ams-page-header__mega-menu-button-label",
               children: menuButtonText
+            }), jsxRuntime.jsx("span", {
+              className: "ams-visually-hidden",
+              children: open ? menuButtonTextForHide : menuButtonTextForShow
             }), jsxRuntime.jsx("span", {
               "aria-hidden": "true",
               className: "ams-page-header__mega-menu-button-hidden-label",

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}