@amsterdam/design-system-react 1.1.0 → 2.0.0

package/dist/CallToActionLink/CallToActionLink.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs CallToActionLink docs at Amsterdam Design System}
+ */
+export const CallToActionLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("a", { ...restProps, className: clsx('ams-call-to-action-link', className), ref: ref, children: children })));
+CallToActionLink.displayName = 'CallToActionLink';

package/dist/CallToActionLink/CallToActionLink.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/CallToActionLink/CallToActionLink.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { CallToActionLink } from './CallToActionLink';
+import '@testing-library/jest-dom';
+describe('Call to Action Link', () => {
+    it('renders with href attribute', () => {
+        render(_jsx(CallToActionLink, { href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('href', '#');
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(CallToActionLink, { href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-call-to-action-link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(CallToActionLink, { className: "extra", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-call-to-action-link extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(CallToActionLink, { href: "#", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/CallToActionLink/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { CallToActionLink } from './CallToActionLink';
+export type { CallToActionLinkProps } from './CallToActionLink';

package/dist/CallToActionLink/index.js

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { CallToActionLink } from './CallToActionLink';

package/dist/Card/Card.d.ts

@@ -10,21 +10,21 @@ export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
-    Heading: import("react").ForwardRefExoticComponent<{
+    Heading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & {
         color?: "inverse";
         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;
     } & import("react").RefAttributes<HTMLHeadingElement>>;
-    HeadingGroup: import("react").ForwardRefExoticComponent<{
-        tagline: string;
-    } & HTMLAttributes<HTMLElement> & {
+    HeadingGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
         children?: import("react").ReactNode | undefined;
+    } & {
+        tagline: string;
     } & import("react").RefAttributes<HTMLElement>>;
-    Image: import("react").ForwardRefExoticComponent<{
+    Image: import("react").ForwardRefExoticComponent<import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & {
         alt: string;
-    } & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;
+    } & import("react").RefAttributes<HTMLImageElement>>;
     Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Card/Card.js

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

package/dist/Card/CardHeading.d.ts

@@ -2,10 +2,10 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export declare const CardHeading: import("react").ForwardRefExoticComponent<{
+export declare const CardHeading: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     color?: "inverse";
     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;
 } & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Card/CardHeading.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Heading } from '../Heading';
-export const CardHeading = forwardRef(({ children, className, size = 'level-4', ...restProps }, ref) => (_jsx(Heading, { ...restProps, className: clsx('ams-card__heading', className), ref: ref, size: size, children: children })));
+export const CardHeading = forwardRef(({ children, className, size = 'level-3', ...restProps }, ref) => (_jsx(Heading, { ...restProps, className: clsx('ams-card__heading', className), ref: ref, size: size, children: children })));
 CardHeading.displayName = 'Card.Heading';

package/dist/Card/CardHeading.test.js

@@ -25,7 +25,7 @@ describe('Card Heading', () => {
         expect(component).toHaveClass('ams-card__heading extra');
     });
     it('renders the correct size level class', () => {
-        render(_jsx(CardHeading, { level: 4, size: "level-1", children: "Size level 1" }));
+        render(_jsx(CardHeading, { level: 3, size: "level-1", children: "Size level 1" }));
         const component = screen.getByRole('heading');
         expect(component).toHaveClass('ams-heading--1');
     });

package/dist/Card/CardHeadingGroup.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type CardHeadingGroupProps = {
+export type CardHeadingGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
     tagline: string;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export declare const CardHeadingGroup: import("react").ForwardRefExoticComponent<{
+};
+export declare const CardHeadingGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
     tagline: string;
-} & HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/Card/CardHeadingGroup.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Paragraph';
 export const CardHeadingGroup = forwardRef(({ children, className, tagline, ...restProps }, ref) => (_jsxs("hgroup", { ...restProps, className: clsx('ams-card__heading-group', className), ref: ref, children: [children, _jsx(Paragraph, { size: "small", children: tagline })] })));

package/dist/Card/CardImage.d.ts

@@ -2,6 +2,6 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export declare const CardImage: import("react").ForwardRefExoticComponent<{
+export declare const CardImage: import("react").ForwardRefExoticComponent<import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & {
     alt: string;
-} & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;
+} & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Card/CardImage.js

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

package/dist/Card/CardLink.js

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

package/dist/CharacterCount/CharacterCount.d.ts

@@ -3,18 +3,18 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
-export type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
+export type CharacterCountProps = {
     /** The current length of the field’s value. */
     length: number;
     /** The maximum length of the field’s value. */
     maxLength: number;
-};
+} & HTMLAttributes<HTMLDivElement>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
  */
-export declare const CharacterCount: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+export declare const CharacterCount: import("react").ForwardRefExoticComponent<{
     /** The current length of the field’s value. */
     length: number;
     /** The maximum length of the field’s value. */
     maxLength: number;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/CharacterCount/CharacterCount.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}

package/dist/Checkbox/Checkbox.d.ts

@@ -3,24 +3,30 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export type CheckboxProps = {
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+export type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default CheckboxIcon
+     */
+    icon?: Function | ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+    children?: ReactNode | undefined;
+} & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default CheckboxIcon
+     */
+    icon?: Function | ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Checkbox/Checkbox.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react';
 import CheckboxIcon from './CheckboxIcon';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
  */
-export const Checkbox = forwardRef(({ children, className, icon, indeterminate, invalid, ...restProps }, ref) => {
-    const id = useId();
+export const Checkbox = forwardRef(({ children, className, icon = CheckboxIcon, id, indeterminate, invalid, ...restProps }, ref) => {
+    const inputId = id || useId();
     const innerRef = useRef(null);
     // use a passed ref if it's there, otherwise use innerRef
     useImperativeHandle(ref, () => innerRef.current);
@@ -23,6 +19,6 @@ export const Checkbox = forwardRef(({ children, className, icon, indeterminate,
     return (
     // This div is here because NVDA doesn't match the input to the label
     // without a containing element
-    _jsxs("div", { className: clsx('ams-checkbox', className), children: [_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: "ams-checkbox__input", id: id, ref: innerRef, type: "checkbox" }), _jsxs("label", { className: "ams-checkbox__label", htmlFor: id, children: [_jsx("span", { className: "ams-checkbox__icon-container", children: icon ?? _jsx(CheckboxIcon, {}) }), children] })] }));
+    _jsxs("div", { className: clsx('ams-checkbox', className), children: [_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: "ams-checkbox__input", id: inputId, ref: innerRef, type: "checkbox" }), _jsxs("label", { className: "ams-checkbox__label", htmlFor: inputId, children: [_jsx("span", { className: "ams-checkbox__icon-container", hidden: true, children: typeof icon === 'function' ? icon() : icon }), children] })] }));
 });
 Checkbox.displayName = 'Checkbox';

package/dist/Checkbox/Checkbox.test.js

@@ -119,6 +119,15 @@ describe('Checkbox', () => {
         label?.click();
         expect(handleChange).toHaveBeenCalled();
     });
+    it('can use a custom id', () => {
+        const handleChange = jest.fn();
+        const { container } = render(_jsx(Checkbox, { id: "test-id", onChange: handleChange }));
+        const input = screen.getByRole('checkbox');
+        expect(input).toHaveAttribute('id', 'test-id');
+        const label = container.querySelector('label');
+        label?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
     it('shows a custom icon', () => {
         const { container } = render(_jsx(Checkbox, { icon: _jsx(StarIcon, { className: "test-class" }) }));
         const icon = container.querySelector('svg');

package/dist/Column/Column.d.ts

@@ -8,7 +8,7 @@ export declare const columnTags: readonly ["article", "div", "section"];
 type ColumnTag = (typeof columnTags)[number];
 export declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type ColumnGap = (typeof columnGapSizes)[number];
-export type ColumnProps = {
+export type ColumnProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -29,11 +29,13 @@ export type ColumnProps = {
      * @default medium
      */
     gap?: ColumnGap;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
  */
-export declare const Column: import("react").ForwardRefExoticComponent<{
+export declare const Column: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -54,7 +56,5 @@ export declare const Column: import("react").ForwardRefExoticComponent<{
      * @default medium
      */
     gap?: ColumnGap;
-} & HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<unknown>>;
 export {};

package/dist/Column/Column.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const columnTags = ['article', 'div', 'section'];
 export const columnGapSizes = ['none', 'x-small', 'small', 'large', 'x-large'];

package/dist/Column/Column.test.js

@@ -5,9 +5,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Column, columnGapSizes, columnTags } from './Column';
 import { ariaRoleForTag } from '../common/accessibility';
 import { crossAlignOptionsForColumn, mainAlignOptions } from '../common/types';
+import { Column, columnGapSizes, columnTags } from './Column';
 import '@testing-library/jest-dom';
 describe('Column', () => {
     it('renders', () => {

package/dist/DateInput/DateInput.d.ts

@@ -5,19 +5,19 @@
 import type { InputHTMLAttributes } from 'react';
 export declare const dateInputTypes: readonly ["date", "datetime-local"];
 type DateInputType = (typeof dateInputTypes)[number];
-export type DateInputProps = {
+export type DateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-date-input--docs Date Input docs at Amsterdam Design System}
  */
-export declare const DateInput: import("react").ForwardRefExoticComponent<{
+export declare const DateInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/DateInput/DateInput.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const dateInputTypes = ['date', 'datetime-local'];
 /**

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 = {
+export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
     /** 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<{
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** 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/DescriptionList/DescriptionList.js

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

package/dist/DescriptionList/DescriptionListDescription.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const DescriptionListDescription = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("dd", { ...restProps, className: clsx('ams-description-list__description', className), ref: ref, children: children })));
 DescriptionListDescription.displayName = 'DescriptionList.Description';

package/dist/DescriptionList/DescriptionListSection.js

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

package/dist/DescriptionList/DescriptionListTerm.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const DescriptionListTerm = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("dt", { ...restProps, className: clsx('ams-description-list__term', className), ref: ref, children: children })));
 DescriptionListTerm.displayName = 'DescriptionList.Term';

package/dist/DescriptionList/index.d.ts

@@ -4,5 +4,5 @@
  */
 export { DescriptionList } from './DescriptionList';
 export type { DescriptionListProps } from './DescriptionList';
-export type { DescriptionListTermProps } from './DescriptionListTerm';
 export type { DescriptionListDescriptionProps } from './DescriptionListDescription';
+export type { DescriptionListTermProps } from './DescriptionListTerm';

package/dist/Dialog/Dialog.d.ts

@@ -2,28 +2,28 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { MouseEvent } from 'react';
 import type { DialogHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export type DialogProps = {
+import { MouseEvent } from 'react';
+export type DialogProps = PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> & {
     /** 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<{
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogHTMLAttributes<HTMLDialogElement> & {
+    children?: ReactNode | undefined;
+} & {
     /** 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/Dialog/Dialog.js

@@ -1,15 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Heading } from '../Heading';
 import { IconButton } from '../IconButton';
 const closeDialog = (event) => event.currentTarget.closest('dialog')?.close();
 const openDialog = (id) => document.querySelector(id)?.showModal();
-const DialogRoot = forwardRef(({ children, className, closeButtonLabel = 'Sluiten', footer, heading, ...restProps }, ref) => (_jsxs("dialog", { ...restProps, className: clsx('ams-dialog', className), ref: ref, children: [_jsxs("header", { className: "ams-dialog__header", children: [_jsx(Heading, { level: 1, size: "level-4", children: heading }), _jsx(IconButton, { label: closeButtonLabel, onClick: closeDialog, size: "heading-4", type: "button" })] }), _jsx("div", { className: "ams-dialog__body", children: children }), footer && _jsx("footer", { className: "ams-dialog__footer", children: footer })] })));
+const DialogRoot = forwardRef(({ children, className, closeButtonLabel = 'Sluiten', footer, heading, ...restProps }, ref) => (_jsxs("dialog", { ...restProps, className: clsx('ams-dialog', className), ref: ref, children: [_jsxs("header", { className: "ams-dialog__header", children: [_jsx(Heading, { level: 1, size: "level-3", children: heading }), _jsx(IconButton, { label: closeButtonLabel, onClick: closeDialog, size: "heading-3", type: "button" })] }), _jsx("div", { className: "ams-dialog__body", children: children }), footer && _jsx("footer", { className: "ams-dialog__footer", children: footer })] })));
 DialogRoot.displayName = 'Dialog';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs Dialog docs at Amsterdam Design System}

package/dist/ErrorMessage/ErrorMessage.d.ts

@@ -3,9 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
 export type ErrorMessageProps = {
-    /** An icon to display instead of the default icon. */
-    icon?: Function;
+    /**
+     * An icon to display instead of the default icon.
+     * @default WarningIcon
+     */
+    icon?: IconProps['svg'];
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
     prefix?: string;
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
@@ -13,8 +17,11 @@ export type ErrorMessageProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
  */
 export declare const ErrorMessage: import("react").ForwardRefExoticComponent<{
-    /** An icon to display instead of the default icon. */
-    icon?: Function;
+    /**
+     * An icon to display instead of the default icon.
+     * @default WarningIcon
+     */
+    icon?: IconProps["svg"];
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
     prefix?: string;
 } & HTMLAttributes<HTMLParagraphElement> & {

package/dist/ErrorMessage/ErrorMessage.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { WarningIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
  */
-export const ErrorMessage = forwardRef(({ children, className, icon, prefix = 'Invoerfout', ...restProps }, ref) => (_jsxs("p", { ...restProps, className: clsx('ams-error-message', className), ref: ref, children: [_jsx(Icon, { size: "small", svg: icon ? icon : WarningIcon }), _jsxs("span", { className: "ams-visually-hidden", children: [prefix, ': '] }), children] })));
+export const ErrorMessage = forwardRef(({ children, className, icon = WarningIcon, prefix = 'Invoerfout', ...restProps }, ref) => (_jsxs("p", { ...restProps, className: clsx('ams-error-message', className), ref: ref, children: [_jsx(Icon, { svg: icon }), _jsx("span", { className: "ams-visually-hidden", children: `${prefix}: ` }), children] })));
 ErrorMessage.displayName = 'ErrorMessage';