@amsterdam/design-system-react 0.16.0 → 1.1.0

package/dist/Card/CardHeading.test.d.ts

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

package/dist/Card/CardHeading.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 { CardHeading } from './CardHeading';

package/dist/Card/CardHeadingGroup.test.d.ts

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

package/dist/Card/CardHeadingGroup.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 { CardHeadingGroup } from './CardHeadingGroup';

package/dist/Card/CardImage.test.d.ts

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

package/dist/Card/CardImage.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 { CardImage } from './CardImage';

package/dist/Card/CardLink.test.d.ts

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

package/dist/Card/CardLink.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 { CardLink } from './CardLink';

package/dist/Card/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Card } from './Card';
 export type { CardProps } from './Card';
 export type { CardHeadingGroupProps } from './CardHeadingGroup';

package/dist/Card/index.js

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

package/dist/CharacterCount/CharacterCount.d.ts

@@ -9,6 +9,9 @@ export type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
     /** The maximum length of the field’s value. */
     maxLength: number;
 };
+/**
+ * @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> & {
     /** The current length of the field’s value. */
     length: number;

package/dist/CharacterCount/CharacterCount.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-character-count--docs Character Count docs at Amsterdam Design System}
+ */
 export const CharacterCount = forwardRef(({ className, length, maxLength, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className), ref: ref, role: "status", children: `${length} van ${maxLength} tekens` })));
 CharacterCount.displayName = 'CharacterCount';

package/dist/CharacterCount/CharacterCount.test.d.ts

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

package/dist/CharacterCount/CharacterCount.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 { CharacterCount } from './CharacterCount';

package/dist/CharacterCount/index.d.ts

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

package/dist/CharacterCount/index.js

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

package/dist/Checkbox/Checkbox.d.ts

@@ -2,18 +2,25 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { InputHTMLAttributes, PropsWithChildren } from 'react';
+import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 export type CheckboxProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: 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;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: import("react").ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

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';
@@ -114,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

@@ -30,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

@@ -7,5 +7,8 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 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,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 { Column, columnGapSizes, columnTags } from './Column';

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';

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';

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';

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';

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';

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';

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';

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';