@amsterdam/design-system-react 2.0.2 → 2.2.0

package/dist/Heading/Heading.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { getHeadingTag } from './getHeadingTag';
+export const headingSizes = [1, 2, 3, 4];
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
  */

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

@@ -1,7 +1,3 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Gemeente Utrecht

package/dist/IconButton/IconButton.d.ts

@@ -4,9 +4,11 @@
  */
 import type { ButtonHTMLAttributes } from 'react';
 import type { IconProps } from '../Icon';
+export declare const iconButtonColors: readonly ["contrast", "inverse"];
+export type IconButtonColor = (typeof iconButtonColors)[number];
 export type IconButtonProps = {
     /** Changes the text colour for readability on a light or dark background. */
-    color?: 'contrast' | 'inverse';
+    color?: IconButtonColor;
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
     /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
@@ -19,7 +21,7 @@ export type IconButtonProps = {
  */
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
-    color?: "contrast" | "inverse";
+    color?: IconButtonColor;
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
     /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */

package/dist/IconButton/IconButton.js

@@ -3,6 +3,7 @@ import { CloseIcon } from '@amsterdam/design-system-react-icons';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
+export const iconButtonColors = ['contrast', 'inverse'];
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
  */

package/dist/Image/Image.d.ts

@@ -3,15 +3,15 @@
  * Copyright Gemeente Amsterdam
  */
 import type { ImgHTMLAttributes } from 'react';
-import { AspectRatioProps } from '../common/types';
-export type ImageProps = AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
+import type { AspectRatioProps } from '../common/types';
+export type ImageProps = {
     /** A textual description of the content of the image. */
     alt: string;
-};
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
-export declare const Image: import("react").ForwardRefExoticComponent<AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & {
+export declare const Image: import("react").ForwardRefExoticComponent<{
     /** A textual description of the content of the image. */
     alt: string;
-} & import("react").RefAttributes<HTMLImageElement>>;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;

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

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
-import { ImageProps } from '../Image/Image';
+import type { ImageProps } from '../Image/Image';
 export type ImageSliderImageProps = ImageProps;
 export type ImageSliderProps = {
     /** Display buttons to navigate to the previous or next image. */
@@ -44,9 +44,9 @@ export declare const ImageSlider: import("react").ForwardRefExoticComponent<{
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Item: import("react").ForwardRefExoticComponent<{
         slideId: number;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/ImageSlider/ImageSliderItem.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type ImageSliderItemProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export type ImageSliderItemProps = {
     /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
     slideId: number;
-};
-export declare const ImageSliderItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const ImageSliderItem: import("react").ForwardRefExoticComponent<{
     /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
     slideId: number;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ImageSlider/ImageSliderThumbnails.d.ts

@@ -3,12 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
-import { ImageSliderImageProps } from './ImageSlider';
-export type ImageSliderThumbnailsProps = HTMLAttributes<HTMLElement> & {
+import type { ImageSliderImageProps } from './ImageSlider';
+export type ImageSliderThumbnailsProps = {
     imageLabel?: string;
     thumbnails: ImageSliderImageProps[];
-};
-export declare const ImageSliderThumbnails: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+} & HTMLAttributes<HTMLElement>;
+export declare const ImageSliderThumbnails: import("react").ForwardRefExoticComponent<{
     imageLabel?: string;
     thumbnails: ImageSliderImageProps[];
-} & import("react").RefAttributes<HTMLElement>>;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/InvalidFormAlert/InvalidFormAlertWithErrors.d.ts

@@ -4,9 +4,9 @@
  */
 import type { Dispatch, SetStateAction } from 'react';
 import type { InvalidFormAlertProps } from './InvalidFormAlert';
-export declare const InvalidFormAlertWithErrors: import("react").ForwardRefExoticComponent<Omit<InvalidFormAlertProps, "errorCountLabel"> & {
+export declare const InvalidFormAlertWithErrors: import("react").ForwardRefExoticComponent<{
     /** Whether the component has set focus once. */
     hasFocusedOnce: boolean;
     /** Callback to let parent component know whether focus has been set once. */
     setHasFocusedOnce: Dispatch<SetStateAction<boolean>>;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & Omit<InvalidFormAlertProps, "errorCountLabel"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Label/Label.d.ts

@@ -1,20 +1,39 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
 import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
-import { HintProps } from '../Hint';
-export type LabelProps = HintProps & PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>;
+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.
+     */
+    isPageHeading?: boolean;
+} & HintProps & PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>;
 /**
  * @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.
+     */
+    isPageHeading?: boolean;
+} & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & import("react").HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Label/Label.js

@@ -5,7 +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, optional, ...restProps }, ref) => {
-    return (_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/Link/Link.d.ts

@@ -3,14 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes } from 'react';
-export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
+export type LinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
-};
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs Link docs at Amsterdam Design System}
  */
-export declare const Link: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
+export declare const Link: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -4,9 +4,13 @@
  */
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 import type { IconProps } from '../Icon';
+export declare const linkListLinkColors: readonly ["contrast", "inverse"];
+type LinkListLinkColor = (typeof linkListLinkColors)[number];
+export declare const linkListLinkSizes: readonly ["small", "large"];
+type LinkListLinkSize = (typeof linkListLinkSizes)[number];
 export type LinkListLinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
-    color?: 'contrast' | 'inverse';
+    color?: LinkListLinkColor;
     /**
      * An icon to display instead of the default chevron.
      * Don’t mix custom icons with chevrons in one list.
@@ -14,12 +18,12 @@ export type LinkListLinkProps = {
      */
     icon?: IconProps['svg'];
     /** The size of the text. Use the same size for all items in the list. */
-    size?: 'small' | 'large';
+    size?: LinkListLinkSize;
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 /** One link with a Link List. */
 export declare const LinkListLink: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
-    color?: "contrast" | "inverse";
+    color?: LinkListLinkColor;
     /**
      * An icon to display instead of the default chevron.
      * Don’t mix custom icons with chevrons in one list.
@@ -27,7 +31,8 @@ export declare const LinkListLink: import("react").ForwardRefExoticComponent<{
      */
     icon?: IconProps["svg"];
     /** The size of the text. Use the same size for all items in the list. */
-    size?: "small" | "large";
+    size?: LinkListLinkSize;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/LinkList/LinkListLink.js

@@ -3,6 +3,8 @@ import { ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
+export const linkListLinkColors = ['contrast', 'inverse'];
+export const linkListLinkSizes = ['small', 'large'];
 /** One link with a Link List. */
 export const LinkListLink = forwardRef(({ children, className, color, icon = ChevronForwardIcon, size, ...restProps }, ref) => {
     return (_jsx("li", { children: _jsxs("a", { className: clsx('ams-link-list__link', color && `ams-link-list__link--${color}`, size && `ams-link-list__link--${size}`, className), ref: ref, ...restProps, children: [_jsx(Icon, { size: size, svg: icon }), children] }) }));

package/dist/Logo/Logo.d.ts

@@ -4,10 +4,10 @@
  */
 import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
 export type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
-export type LogoProps = SVGProps<SVGSVGElement> & {
+export type LogoProps = {
     /** The name of the brand for which to display the logo. */
     brand?: LogoBrand;
-};
+} & SVGProps<SVGSVGElement>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
  */

package/dist/Menu/Menu.d.ts

@@ -3,22 +3,43 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type MenuProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type MenuProps = {
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-};
-export declare const MenuRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const MenuRoot: import("react").ForwardRefExoticComponent<{
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-} & import("react").RefAttributes<HTMLElement>>;
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<any>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
  */
-export declare const Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Menu: import("react").ForwardRefExoticComponent<{
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-} & import("react").RefAttributes<HTMLElement>> & {
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<any>> & {
     Link: import("react").ForwardRefExoticComponent<{
         color?: "contrast" | "inverse";
         icon: import("..").IconProps["svg"];

package/dist/Menu/Menu.js

@@ -2,7 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { MenuLink } from './MenuLink';
-export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, ...restProps }, ref) => (_jsxs("nav", { ...restProps, "aria-labelledby": "primary-navigation", className: clsx('ams-menu', className), ref: ref, children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName }), _jsx("ul", { className: "ams-menu__list", children: children })] })));
+export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, inWideWindow, ...restProps }, ref) => {
+    // In a medium or narrow window, the Menu is a child of the `nav` of Page Header.
+    // In a wide window, we render a `nav` element and the related accessibility features.
+    const Tag = inWideWindow ? 'nav' : 'div';
+    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? 'primary-navigation' : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
+});
 MenuRoot.displayName = 'Menu';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}

package/dist/Menu/MenuLink.d.ts

@@ -5,15 +5,21 @@
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 import type { IconProps } from '../Icon';
 export type MenuLinkProps = {
-    /** Changes the text colour for readability on a light or dark background. */
+    /**
+     * Changes the text colour for readability on a light or dark background.
+     * @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<{
-    /** Changes the text colour for readability on a light or dark background. */
+    /**
+     * Changes the text colour for readability on a light or dark background.
+     * @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/OrderedList/OrderedList.d.ts

@@ -3,26 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 import type { OlHTMLAttributes, PropsWithChildren } from 'react';
-export type OrderedListProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> & {
+export type OrderedListProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: 'small';
-};
+} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
  */
-export declare const OrderedList: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const OrderedList: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: "small";
+} & OlHTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {
     Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
         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/PageHeader/PageHeader.d.ts

@@ -4,7 +4,7 @@
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import type { LogoBrand } from '../Logo';
-export type PageHeaderProps = HTMLAttributes<HTMLElement> & {
+export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -25,11 +25,11 @@ export type PageHeaderProps = HTMLAttributes<HTMLElement> & {
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-};
+} & HTMLAttributes<HTMLElement>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
  */
-export declare const PageHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -50,11 +50,12 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<HTMLA
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & import("react").RefAttributes<HTMLElement>> & {
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
-    MenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: ReactNode | undefined;
-    } & {
+    MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
+        icon?: import("../Icon").IconProps["svg"];
+    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.d.ts

@@ -2,5 +2,5 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { GridCellProps } from '../Grid';
+import type { GridCellProps } from '../Grid';
 export declare const PageHeaderGridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLElement>>;

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Grid } from '../Grid';

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

@@ -2,12 +2,19 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
-export type PageHeaderMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> & {
+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;
-};
-export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+    /** 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,9 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
+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/PageHeading/PageHeading.d.ts

@@ -3,17 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageHeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
+export type PageHeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-};
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 /**
  * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
  */
-export declare const PageHeading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const PageHeading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;