@amsterdam/design-system-react 2.1.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/Avatar/Avatar.d.ts

@@ -8,7 +8,7 @@ type AvatarColor = (typeof avatarColors)[number];
 export type AvatarProps = {
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
@@ -19,7 +19,7 @@ export type AvatarProps = {
 export declare const Avatar: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;

package/dist/Card/Card.d.ts

@@ -12,7 +12,7 @@ export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttribu
 } & import("react").RefAttributes<HTMLElement>> & {
     Heading: import("react").ForwardRefExoticComponent<{
         color?: "inverse";
-        level: 2 | 1 | 3 | 4;
+        level: 1 | 2 | 3 | 4;
         size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
     } & HTMLAttributes<HTMLHeadingElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/Card/CardHeading.d.ts

@@ -4,7 +4,7 @@
  */
 export declare const CardHeading: import("react").ForwardRefExoticComponent<{
     color?: "inverse";
-    level: 2 | 1 | 3 | 4;
+    level: 1 | 2 | 3 | 4;
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
 } & import("react").HTMLAttributes<HTMLHeadingElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Checkbox/Checkbox.d.ts

@@ -27,6 +27,6 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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/DateInput/DateInput.d.ts

@@ -19,5 +19,5 @@ export declare const DateInput: import("react").ForwardRefExoticComponent<{
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/FieldSet/FieldSet.d.ts

@@ -5,6 +5,11 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { HintProps } from '../Hint';
 export type FieldSetProps = {
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
     /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
@@ -19,6 +24,11 @@ export type FieldSetProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
 export declare const FieldSet: import("react").ForwardRefExoticComponent<{
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
     /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
@@ -30,6 +40,7 @@ export declare const FieldSet: import("react").ForwardRefExoticComponent<{
     legendIsPageHeading?: boolean;
 } & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/FieldSet/FieldSet.js

@@ -5,8 +5,8 @@ import { Hint } from '../Hint';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
-export const FieldSet = forwardRef(({ children, className, hint, invalid, legend, legendIsPageHeading, optional, ...restProps }, ref) => {
-    const legendContent = (_jsxs(_Fragment, { children: [legend, " ", _jsx(Hint, { hint: hint, optional: optional })] }));
-    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsx("legend", { className: "ams-field-set__legend", children: legendIsPageHeading ? _jsx("h1", { className: "ams-field-set__heading", children: legendContent }) : legendContent }), children] }));
+export const FieldSet = forwardRef(({ children, className, hint, inFieldSet, invalid, legend, legendIsPageHeading, optional, ...restProps }, ref) => {
+    const legendContent = (_jsxs(_Fragment, { children: [legend, " ", _jsx(Hint, { hint: hint, inFieldSet: inFieldSet, optional: optional })] }));
+    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsx("legend", { className: clsx('ams-field-set__legend', inFieldSet && 'ams-field-set__legend--in-fieldset'), children: legendIsPageHeading ? _jsx("h1", { className: "ams-field-set__heading", children: legendContent }) : legendContent }), children] }));
 });
 FieldSet.displayName = 'FieldSet';

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/Hint/Hint.d.ts

@@ -6,6 +6,7 @@ import type { HTMLAttributes, PropsWithChildren } from 'react';
 type HintAndOptionalProps = {
     /** Show a custom hint text. */
     hint?: string;
+    inFieldSet?: boolean;
     /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
     optional?: boolean;
 };

package/dist/Hint/Hint.js

@@ -10,8 +10,8 @@ const getHintText = ({ hint, optional }) => {
     }
     return null;
 };
-export const Hint = forwardRef(({ className, hint, optional, ...restProps }, ref) => {
+export const Hint = forwardRef(({ className, hint, inFieldSet, optional, ...restProps }, ref) => {
     const hintText = getHintText({ hint, optional });
-    return (hintText && (_jsxs("span", { ...restProps, className: clsx('ams-hint', className), ref: ref, children: ["(", hintText, ")"] })));
+    return (hintText && (_jsxs("span", { ...restProps, className: clsx('ams-hint', inFieldSet && 'ams-hint--in-fieldset', className), ref: ref, children: ["(", hintText, ")"] })));
 });
 Hint.displayName = 'Hint';

package/dist/Image/Image.js

@@ -5,5 +5,5 @@ import { generateAspectRatioClass } from './generateAspectRatioClass';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
-export const Image = forwardRef(({ aspectRatio, className, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref, width: 600 })));
+export const Image = forwardRef(({ aspectRatio, className, width, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref, width: width ?? 600 })));
 Image.displayName = 'Image';

package/dist/Label/Label.d.ts

@@ -6,6 +6,11 @@
 import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
 import type { HintProps } from '../Hint';
 export type LabelProps = {
+    /**
+     * Whether the label is nested inside a fieldset.
+     * This will show the label in a lighter style.
+     */
+    inFieldSet?: boolean;
     /**
      * Render a level 1 heading around the label.
      * Set this if the Field is the only content of the page.
@@ -16,6 +21,11 @@ export type LabelProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
 export declare const Label: import("react").ForwardRefExoticComponent<{
+    /**
+     * Whether the label is nested inside a fieldset.
+     * This will show the label in a lighter style.
+     */
+    inFieldSet?: boolean;
     /**
      * Render a level 1 heading around the label.
      * Set this if the Field is the only content of the page.
@@ -23,6 +33,7 @@ export declare const Label: import("react").ForwardRefExoticComponent<{
     isPageHeading?: boolean;
 } & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & import("react").HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Label/Label.js

@@ -5,8 +5,8 @@ import { Hint } from '../Hint';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
-export const Label = forwardRef(({ children, className, hint, isPageHeading, optional, ...restProps }, ref) => {
-    const labelElement = (_jsxs("label", { ...restProps, className: clsx('ams-label', className), ref: ref, children: [children, " ", _jsx(Hint, { hint: hint, optional: optional })] }));
+export const Label = forwardRef(({ children, className, hint, inFieldSet, isPageHeading, optional, ...restProps }, ref) => {
+    const labelElement = (_jsxs("label", { ...restProps, className: clsx('ams-label', inFieldSet && 'ams-label--in-fieldset', className), ref: ref, children: [children, " ", _jsx(Hint, { hint: hint, inFieldSet: inFieldSet, optional: optional })] }));
     return isPageHeading ? _jsx("h1", { className: "ams-label__heading", children: labelElement }) : labelElement;
 });
 Label.displayName = 'Label';

package/dist/LinkList/LinkList.d.ts

@@ -11,7 +11,7 @@ export declare const LinkList: import("react").ForwardRefExoticComponent<HTMLAtt
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLUListElement>> & {
     Link: import("react").ForwardRefExoticComponent<{
-        color?: "contrast" | "inverse";
+        color?: "inverse" | "contrast";
         icon?: import("..").IconProps["svg"];
         size?: "small" | "large";
     } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {

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/Menu/MenuLink.d.ts

@@ -10,7 +10,7 @@ export type MenuLinkProps = {
      * @deprecated The menu has a dark background now, so this is no longer needed.
      */
     color?: 'contrast' | 'inverse';
-    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    /** The icon to display for the menu icon. Use the filled variant. */
     icon: IconProps['svg'];
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export declare const MenuLink: import("react").ForwardRefExoticComponent<{
@@ -19,7 +19,7 @@ export declare const MenuLink: import("react").ForwardRefExoticComponent<{
      * @deprecated The menu has a dark background now, so this is no longer needed.
      */
     color?: "contrast" | "inverse";
-    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    /** The icon to display for the menu icon. Use the filled variant. */
     icon: IconProps["svg"];
 } & AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Page/Page.d.ts

@@ -3,10 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export type PageProps = {
+    withMenu?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
  */
-export declare const Page: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+export declare const Page: import("react").ForwardRefExoticComponent<{
+    withMenu?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Page/Page.js

@@ -4,5 +4,5 @@ import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
  */
-export const Page = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page', className), ref: ref, children: children })));
+export const Page = forwardRef(({ children, className, withMenu, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page', withMenu && 'ams-page--with-menu', className), ref: ref, children: children })));
 Page.displayName = 'Page';

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. */
@@ -54,6 +63,7 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
     MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
+        icon?: import("../Icon").IconProps["svg"];
     } & AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

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/PageHeader/PageHeaderMenuIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PageHeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("line", { className: "ams-page-header__menu-icon-top", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-middle", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-bottom", x1: "0", x2: "100%", y1: "50%", y2: "50%" })] }));
+export const PageHeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { className: "ams-page-header__menu-icon-top", d: "M1 5h22v2H1z" }), _jsx("path", { className: "ams-page-header__menu-icon-middle", d: "M1 11h22v2H1z" }), _jsx("path", { className: "ams-page-header__menu-icon-bottom", d: "M1 17h22v2H1z" })] }));

package/dist/PageHeader/PageHeaderMenuLink.d.ts

@@ -3,11 +3,18 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
 export type PageHeaderMenuLinkProps = {
+    /** Whether the link appears in the Page Header on narrow windows. */
     fixed?: boolean;
+    /** An icon to display at the end of the label. */
+    icon?: IconProps['svg'];
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<{
+    /** Whether the link appears in the Page Header on narrow windows. */
     fixed?: boolean;
+    /** An icon to display at the end of the label. */
+    icon?: IconProps["svg"];
 } & AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));
+import { Icon } from '../Icon';
+export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, icon, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsxs("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: [children, icon && _jsx(Icon, { svg: icon })] }) })));
 PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';

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/PasswordInput/PasswordInput.d.ts

@@ -13,4 +13,4 @@ export type PasswordInputProps = {
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid" | "autoCapitalize" | "spellCheck" | "autoCorrect"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio/Radio.d.ts

@@ -23,6 +23,6 @@ export declare const Radio: import("react").ForwardRefExoticComponent<{
     icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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 {};