@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/Checkbox/Checkbox.js

@@ -5,7 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react';
-export const Checkbox = forwardRef(({ children, className, indeterminate, invalid, ...restProps }, ref) => {
+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();
     const innerRef = useRef(null);
     // use a passed ref if it's there, otherwise use innerRef
@@ -19,6 +23,6 @@ export const Checkbox = forwardRef(({ children, className, indeterminate, invali
     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__checkmark" }), children] })] }));
+    _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] })] }));
 });
 Checkbox.displayName = 'Checkbox';

package/dist/Checkbox/Checkbox.test.d.ts

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

package/dist/Checkbox/Checkbox.test.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { StarIcon } from '@amsterdam/design-system-react-icons';
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Checkbox } from './Checkbox';
@@ -25,11 +30,10 @@ describe('Checkbox', () => {
         expect(input).toHaveClass('ams-checkbox__input');
         expect(label).toHaveClass('ams-checkbox__label');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Checkbox, { className: "extra" }));
         const wrapper = container.querySelector(':only-child');
-        expect(wrapper).toHaveClass('extra');
-        expect(wrapper).toHaveClass('ams-checkbox');
+        expect(wrapper).toHaveClass('ams-checkbox extra');
     });
     describe('Checked state', () => {
         it('is not checked by default', () => {
@@ -115,6 +119,11 @@ describe('Checkbox', () => {
         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');
+        expect(icon).toHaveClass('test-class');
+    });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
         render(_jsx(Checkbox, { ref: ref }));

package/dist/Checkbox/CheckboxIcon.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { SVGProps } from 'react';
+declare const SvgCheckbox: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgCheckbox;

package/dist/Checkbox/CheckboxIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgCheckbox = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("rect", { className: "ams-checkbox__rectangle", fill: "none", height: "22", stroke: "black", strokeWidth: "2", width: "22", x: "1", y: "1" }), _jsx("rect", { className: "ams-checkbox__hover-indicator", fill: "none", height: "20", stroke: "black", strokeWidth: "1", width: "20", x: "2", y: "2" }), _jsx("path", { className: "ams-checkbox__checked-indicator", d: "M3.251 13.017L8.554 18.761L20.749 5.239", fill: "none", stroke: "black", strokeWidth: "3" }), _jsx("line", { className: "ams-checkbox__indeterminate-indicator", fill: "none", stroke: "black", strokeWidth: "3", x1: "4", x2: "20", y1: "12", y2: "12" })] }));
+export default SvgCheckbox;

package/dist/Checkbox/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';

package/dist/Checkbox/index.js

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

package/dist/Column/Column.d.ts

@@ -4,9 +4,10 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { CrossAlignForColumn, MainAlign } from '../common/types';
-export declare const columnGaps: readonly ["none", "x-small", "small", "large", "x-large"];
-type ColumnGap = (typeof columnGaps)[number];
-type ColumnTag = 'article' | 'div' | 'section';
+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 = {
     /**
      * The vertical alignment of the items in the column.
@@ -29,6 +30,9 @@ export type ColumnProps = {
      */
     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<{
     /**
      * The vertical alignment of the items in the column.

package/dist/Column/Column.js

@@ -5,6 +5,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-export const columnGaps = ['none', 'x-small', 'small', 'large', 'x-large'];
+export const columnTags = ['article', 'div', 'section'];
+export const columnGapSizes = ['none', 'x-small', 'small', 'large', 'x-large'];
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
+ */
 export const Column = forwardRef(({ align, alignHorizontal, as: Tag = 'div', children, className, gap, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-column', align && `ams-column--align-${align}`, alignHorizontal && `ams-column--align-horizontal-${alignHorizontal}`, gap && `ams-column--gap-${gap}`, className), ref: ref, children: children })));
 Column.displayName = 'Column';

package/dist/Column/Column.test.d.ts

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

package/dist/Column/Column.test.js

@@ -1,7 +1,12 @@
 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 { Column, columnGaps } from './Column';
+import { Column, columnGapSizes, columnTags } from './Column';
+import { ariaRoleForTag } from '../common/accessibility';
 import { crossAlignOptionsForColumn, mainAlignOptions } from '../common/types';
 import '@testing-library/jest-dom';
 describe('Column', () => {
@@ -16,25 +21,22 @@ describe('Column', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-column');
     });
-    columnGaps.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
+    columnGapSizes.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
         const { container } = render(_jsx(Column, { gap: gap }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass(`ams-column--gap-${gap}`);
     }));
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Column, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-column extra');
     });
-    it('renders with an article tag', () => {
-        render(_jsx(Column, { as: "article" }));
-        const component = screen.getByRole('article');
-        expect(component).toBeInTheDocument();
-    });
-    it('renders with a section tag', () => {
-        const { container } = render(_jsx(Column, { as: "section" }));
-        const component = container.querySelector('section');
-        expect(component).toBeInTheDocument();
+    columnTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Column, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/Column/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Column } from './Column';
 export type { ColumnProps } from './Column';

package/dist/Column/index.js

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

package/dist/DateInput/DateInput.d.ts

@@ -11,6 +11,9 @@ export type DateInputProps = {
     /** 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<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;

package/dist/DateInput/DateInput.js

@@ -6,5 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 export const dateInputTypes = ['date', 'datetime-local'];
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-date-input--docs Date Input docs at Amsterdam Design System}
+ */
 export const DateInput = forwardRef(({ className, invalid, type = 'date', ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-date-input', className), ref: ref, type: type })));
 DateInput.displayName = 'DateInput';

package/dist/DateInput/DateInput.test.d.ts

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

package/dist/DateInput/DateInput.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { DateInput, dateInputTypes } from './DateInput';
@@ -15,7 +19,7 @@ describe('Date input', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-date-input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(DateInput, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-date-input extra');

package/dist/DateInput/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { DateInput } from './DateInput';
 export type { DateInputProps } from './DateInput';

package/dist/DateInput/index.js

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

package/dist/DescriptionList/DescriptionList.d.ts

@@ -10,6 +10,9 @@ export type DescriptionListProps = {
     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<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/DescriptionList/DescriptionList.js

@@ -11,6 +11,9 @@ import { DescriptionListTerm } from './DescriptionListTerm';
 export const descriptionListTermsWidths = ['narrow', 'medium', 'wide'];
 const DescriptionListRoot = forwardRef(({ children, className, color, termsWidth, ...restProps }, ref) => (_jsx("dl", { ...restProps, className: clsx('ams-description-list', color && `ams-description-list--${color}`, termsWidth && `ams-description-list--${termsWidth}`, className), ref: ref, children: children })));
 DescriptionListRoot.displayName = 'DescriptionList';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-description-list--docs Description List docs at Amsterdam Design System}
+ */
 export const DescriptionList = Object.assign(DescriptionListRoot, {
     Description: DescriptionListDescription,
     Section: DescriptionListSection,

package/dist/DescriptionList/DescriptionList.test.d.ts

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

package/dist/DescriptionList/DescriptionList.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { DescriptionList, descriptionListTermsWidths } from './DescriptionList';
@@ -15,7 +19,7 @@ describe('Description List', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(DescriptionList, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list extra');

package/dist/DescriptionList/DescriptionListDescription.test.d.ts

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

package/dist/DescriptionList/DescriptionListDescription.test.js

@@ -1,4 +1,8 @@
 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 { DescriptionList } from './DescriptionList';
@@ -15,7 +19,7 @@ describe('Description List Description', () => {
         const component = screen.getByRole('definition');
         expect(component).toHaveClass('ams-description-list__description');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(DescriptionList.Description, { className: "extra", children: "Test" }));
         const component = screen.getByRole('definition');
         expect(component).toHaveClass('ams-description-list__description extra');

package/dist/DescriptionList/DescriptionListSection.test.d.ts

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

package/dist/DescriptionList/DescriptionListSection.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { DescriptionList } from './DescriptionList';
@@ -15,7 +19,7 @@ describe('Description List Section', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list__section');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(DescriptionList.Section, { className: "extra", children: "Test" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list__section extra');

package/dist/DescriptionList/DescriptionListTerm.test.d.ts

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

package/dist/DescriptionList/DescriptionListTerm.test.js

@@ -1,4 +1,8 @@
 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 { DescriptionList } from './DescriptionList';
@@ -15,7 +19,7 @@ describe('Description List Term', () => {
         const component = screen.getByRole('term');
         expect(component).toHaveClass('ams-description-list__term');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(DescriptionList.Term, { className: "extra", children: "Test" }));
         const component = screen.getByRole('term');
         expect(component).toHaveClass('ams-description-list__term extra');

package/dist/DescriptionList/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { DescriptionList } from './DescriptionList';
 export type { DescriptionListProps } from './DescriptionList';
 export type { DescriptionListTermProps } from './DescriptionListTerm';

package/dist/DescriptionList/index.js

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

package/dist/Dialog/Dialog.d.ts

@@ -12,6 +12,9 @@ export type DialogProps = {
     /** 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<{
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;

package/dist/Dialog/Dialog.js

@@ -11,6 +11,9 @@ 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 })] })));
 DialogRoot.displayName = 'Dialog';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs Dialog docs at Amsterdam Design System}
+ */
 export const Dialog = Object.assign(DialogRoot, {
     close: closeDialog,
     open: openDialog,

package/dist/Dialog/Dialog.test.d.ts

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

package/dist/Dialog/Dialog.test.js

@@ -1,4 +1,8 @@
 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 { Dialog } from './Dialog';
@@ -15,7 +19,7 @@ describe('Dialog', () => {
         const component = screen.getByRole('dialog', { hidden: true });
         expect(component).toHaveClass('ams-dialog');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Dialog, { className: "extra", heading: "Test heading" }));
         const component = screen.getByRole('dialog', { hidden: true });
         expect(component).toHaveClass('ams-dialog extra');

package/dist/Dialog/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Dialog } from './Dialog';
 export type { DialogProps } from './Dialog';

package/dist/Dialog/index.js

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

package/dist/ErrorMessage/ErrorMessage.d.ts

@@ -9,6 +9,9 @@ export type ErrorMessageProps = {
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
     prefix?: string;
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+/**
+ * @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;

package/dist/ErrorMessage/ErrorMessage.js

@@ -3,9 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { AlertIcon } from '@amsterdam/design-system-react-icons';
+import { WarningIcon } from '@amsterdam/design-system-react-icons';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
-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 : AlertIcon }), _jsxs("span", { className: "ams-visually-hidden", children: [prefix, ': '] }), children] })));
+/**
+ * @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] })));
 ErrorMessage.displayName = 'ErrorMessage';

package/dist/ErrorMessage/ErrorMessage.test.d.ts

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

package/dist/ErrorMessage/ErrorMessage.test.js

@@ -1,4 +1,8 @@
 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 { ErrorMessage } from './ErrorMessage';
@@ -15,7 +19,7 @@ describe('Error message', () => {
         const component = screen.getByRole('paragraph');
         expect(component).toHaveClass('ams-error-message');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(ErrorMessage, { className: "extra" }));
         const component = screen.getByRole('paragraph');
         expect(component).toHaveClass('ams-error-message extra');

package/dist/ErrorMessage/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { ErrorMessage } from './ErrorMessage';
 export type { ErrorMessageProps } from './ErrorMessage';

package/dist/ErrorMessage/index.js

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

package/dist/Field/Field.d.ts

@@ -7,6 +7,9 @@ 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<{
     /** Whether the field has an input with a validation error */
     invalid?: boolean;

package/dist/Field/Field.js

@@ -5,5 +5,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-forms-field--docs Field docs at Amsterdam Design System}
+ */
 export const Field = forwardRef(({ children, className, invalid, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-field', invalid && 'ams-field--invalid', className), ref: ref, children: children })));
 Field.displayName = 'Field';

package/dist/Field/Field.test.d.ts

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

package/dist/Field/Field.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { Field } from './Field';
@@ -15,7 +19,7 @@ describe('Field', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-field');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Field, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-field extra');

package/dist/Field/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Field } from './Field';
 export type { FieldProps } from './Field';

package/dist/Field/index.js

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

package/dist/FieldSet/FieldSet.d.ts

@@ -10,6 +10,9 @@ export type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement
     /** The text for the caption. */
     legend: string;
 } & HintProps;
+/**
+ * @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<HTMLAttributes<HTMLFieldSetElement> & {
     children?: import("react").ReactNode | undefined;
 } & {

package/dist/FieldSet/FieldSet.js

@@ -6,6 +6,9 @@ import { jsx as _jsx, 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] }));
 });