@amsterdam/design-system-react 2.0.2 → 2.1.0

package/dist/DescriptionList/DescriptionList.d.ts

@@ -5,20 +5,20 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
 type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
-export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
+export type DescriptionListProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     termsWidth?: DescriptionListTermsWidth;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-description-list--docs Description List docs at Amsterdam Design System}
  */
-export declare const DescriptionList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     termsWidth?: DescriptionListTermsWidth;
+} & HTMLAttributes<HTMLDListElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDListElement>> & {
     Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/Dialog/Dialog.d.ts

@@ -2,28 +2,27 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { DialogHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { MouseEvent } from 'react';
-export type DialogProps = PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> & {
+import type { DialogHTMLAttributes, MouseEvent, PropsWithChildren, ReactNode } from 'react';
+export type DialogProps = {
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
     /** Content for the footer, often one Button or an Action Group containing more of them. */
     footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
-};
+} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs Dialog docs at Amsterdam Design System}
  */
-export declare const Dialog: import("react").ForwardRefExoticComponent<DialogHTMLAttributes<HTMLDialogElement> & {
-    children?: ReactNode | undefined;
-} & {
+export declare const Dialog: import("react").ForwardRefExoticComponent<{
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
     /** Content for the footer, often one Button or an Action Group containing more of them. */
     footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
+} & DialogHTMLAttributes<HTMLDialogElement> & {
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDialogElement>> & {
     close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
     open: (id: string) => void;

package/dist/Field/Field.d.ts

@@ -3,16 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FieldProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export type FieldProps = {
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field--docs Field docs at Amsterdam Design System}
  */
-export declare const Field: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Field: import("react").ForwardRefExoticComponent<{
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/FieldSet/FieldSet.d.ts

@@ -3,24 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-import { HintProps } from '../Hint';
-export type FieldSetProps = HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
-    /** Whether the field set has an input with a validation error */
+import type { HintProps } from '../Hint';
+export type FieldSetProps = {
+    /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
-};
+    /**
+     * Render a level 1 heading in the legend.
+     * Set this if the Field Set is the only content of the page.
+     */
+    legendIsPageHeading?: boolean;
+} & HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>>;
 /**
  * @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 field set has an input with a validation error. */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+    /**
+     * Render a level 1 heading in the legend.
+     * Set this if the Field Set is the only content of the page.
+     */
+    legendIsPageHeading?: boolean;
+} & {
     hint?: string;
     optional?: boolean;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
-} & HTMLAttributes<HTMLFieldSetElement> & {
-    /** Whether the field set has an input with a validation error */
-    invalid?: boolean;
-    /** The text for the caption. */
-    legend: string;
-} & import("react").RefAttributes<HTMLFieldSetElement>>;
+} & HTMLAttributes<HTMLFieldSetElement> & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/FieldSet/FieldSet.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } 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';
 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, optional, ...restProps }, ref) => {
-    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsxs("legend", { className: "ams-field-set__legend", children: [legend, " ", _jsx(Hint, { hint: hint, optional: optional })] }), children] }));
+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] }));
 });
 FieldSet.displayName = 'FieldSet';

package/dist/FieldSet/FieldSet.test.js

@@ -60,4 +60,11 @@ describe('FieldSet', () => {
         const component = screen.getByRole('group', { name: 'Legend (required)' });
         expect(component).toBeInTheDocument();
     });
+    it('renders a heading in the legend', () => {
+        render(_jsx(FieldSet, { legend: "Legend", legendIsPageHeading: true }));
+        const heading = screen.getByRole('heading', {
+            name: 'Legend',
+        });
+        expect(heading).toBeInTheDocument();
+    });
 });

package/dist/Figure/Figure.d.ts

@@ -10,9 +10,9 @@ export type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const Figure: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
-    Caption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Caption: import("react").ForwardRefExoticComponent<{
         color?: "inverse";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLElement>>;
 };

package/dist/Figure/FigureCaption.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FigureCaptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type FigureCaptionProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-};
-export declare const FigureCaption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const FigureCaption: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/FileList/FileList.d.ts

@@ -13,8 +13,8 @@ export declare const FileListRoot: import("react").ForwardRefExoticComponent<HTM
 export declare const FileList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {
-    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    Item: import("react").ForwardRefExoticComponent<{
         file: File;
         onDelete?: () => void;
-    } & import("react").RefAttributes<HTMLLIElement>>;
+    } & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
 };

package/dist/FileList/FileListItem.d.ts

@@ -3,11 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
-export type FileListItemProps = HTMLAttributes<HTMLLIElement> & {
+export type FileListItemProps = {
     file: File;
     onDelete?: () => void;
-};
-export declare const FileListItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+} & HTMLAttributes<HTMLLIElement>;
+export declare const FileListItem: import("react").ForwardRefExoticComponent<{
     file: File;
     onDelete?: () => void;
-} & import("react").RefAttributes<HTMLLIElement>>;
+} & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/Grid/Grid.d.ts

@@ -28,12 +28,12 @@ type GridPaddingTopAndBottomProps = {
     paddingTop?: GridPadding;
     paddingVertical?: never;
 };
-export type GridProps = (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export type GridProps = {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
     gapVertical?: GridGap;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps);
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
  */

package/dist/Grid/GridCell.d.ts

@@ -17,9 +17,9 @@ type GridCellSpanAndStartProps = {
     /** The index of the grid column the cell starts at. */
     start?: GridColumnNumber | GridColumnNumbers;
 };
-export type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+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 {};

package/dist/Heading/Heading.d.ts

@@ -1,37 +1,36 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type HeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
+export declare const headingSizes: readonly [1, 2, 3, 4];
+type HeadingSize = (typeof headingSizes)[number];
+export type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The hierarchical level within the document. */
-    level: 1 | 2 | 3 | 4;
+    level: HeadingSize;
     /**
      * Uses larger or smaller text without changing its position in the heading hierarchy.
      * The value ‘level-6’ is deprecated. Use level 5 instead.
      */
     size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
-};
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
  */
-export declare const Heading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Heading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The hierarchical level within the document. */
-    level: 1 | 2 | 3 | 4;
+    level: HeadingSize;
     /**
      * Uses larger or smaller text without changing its position in the heading hierarchy.
      * The value ‘level-6’ is deprecated. Use level 5 instead.
      */
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;
+export {};

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/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/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,19 +1,27 @@
-/**
- * @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 = {
+    /**
+     * 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<{
+    /**
+     * Render a level 1 heading around the label.
+     * Set this if the Field is the only content of the page.
+     */
+    isPageHeading?: boolean;
+} & {
     hint?: string;
     optional?: boolean;
 } & import("react").HTMLAttributes<HTMLElement> & {

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, isPageHeading, optional, ...restProps }, ref) => {
+    const labelElement = (_jsxs("label", { ...restProps, className: clsx('ams-label', className), ref: ref, children: [children, " ", _jsx(Hint, { hint: hint, optional: optional })] }));
+    return isPageHeading ? _jsx("h1", { className: "ams-label__heading", children: labelElement }) : labelElement;
 });
 Label.displayName = 'Label';

package/dist/Label/Label.test.js

@@ -74,4 +74,9 @@ describe('Label', () => {
         const label = container.querySelector('label:only-child');
         expect(label).toHaveTextContent('Label (required)');
     });
+    it('renders a Heading component', () => {
+        render(_jsx(Label, { isPageHeading: true, children: "Label" }));
+        const heading = screen.getByRole('heading', { name: 'Label' });
+        expect(heading).toBeInTheDocument();
+    });
 });

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/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}
  */