@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { MouseEvent } from 'react';
+import type { DialogHTMLAttributes, 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>>;
+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/Dialog/Dialog.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+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 })] })));
+DialogRoot.displayName = 'Dialog';
+export const Dialog = Object.assign(DialogRoot, {
+    close: closeDialog,
+    open: openDialog,
+});

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Dialog/Dialog.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Dialog } from './Dialog';
+import '@testing-library/jest-dom';
+describe('Dialog', () => {
+    it('renders', () => {
+        render(_jsx(Dialog, { heading: "Test heading", open: true }));
+        const component = screen.getByRole('dialog');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Dialog, { heading: "Test heading" }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(component).toHaveClass('ams-dialog');
+    });
+    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');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Dialog, { heading: "Test heading", ref: ref }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(ref.current).toBe(component);
+    });
+    it('is not visible when open attribute is not used', () => {
+        render(_jsx(Dialog, { heading: "Test heading" }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(component).toBeInTheDocument();
+        expect(component).not.toBeVisible();
+    });
+    it('renders a heading', () => {
+        render(_jsx(Dialog, { heading: "Test heading", open: true }));
+        const heading = screen.getByRole('heading', {
+            name: 'Test heading',
+        });
+        expect(heading).toBeInTheDocument();
+    });
+    it('renders children', () => {
+        const { getByText } = render(_jsx(Dialog, { heading: "Test heading", children: "Test content" }));
+        expect(getByText('Test content')).toBeInTheDocument();
+    });
+    it('renders footer when provided', () => {
+        render(_jsx(Dialog, { footer: _jsx("button", { children: "Click Me" }), heading: "Test heading", open: true }));
+        const footer = screen.getByRole('contentinfo');
+        const button = screen.getByRole('button', {
+            name: 'Click Me',
+        });
+        expect(footer).toBeInTheDocument();
+        expect(button).toBeInTheDocument();
+    });
+    it('does not render footer when not provided', () => {
+        const { container } = render(_jsx(Dialog, { heading: "Test heading" }));
+        const component = container.querySelector('footer');
+        expect(component).not.toBeInTheDocument();
+    });
+    it('renders DialogClose button', () => {
+        render(_jsx(Dialog, { heading: "Test heading", open: true }));
+        const closeButton = screen.getByRole('button', { name: 'Sluiten' });
+        expect(closeButton).toBeInTheDocument();
+    });
+    it('renders a custom close label', () => {
+        render(_jsx(Dialog, { closeButtonLabel: "Close", heading: "Test heading", open: true }));
+        const closeButton = screen.getByRole('button', { name: 'Close' });
+        expect(closeButton).toBeInTheDocument();
+    });
+    it.skip('can be closed with the Close button', () => {
+        // We currently can't test this because dialog isn't properly supported in jsdom
+        // https://github.com/jsdom/jsdom/issues/3294
+    });
+    it.skip('has no accessible content when it is closed', () => {
+        // We currently can't test this because dialog isn't properly supported in jsdom
+        // https://github.com/jsdom/jsdom/issues/3294
+    });
+});

package/dist/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';

package/dist/Dialog/index.js

@@ -0,0 +1 @@
+export { Dialog } from './Dialog';

package/dist/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ErrorMessageProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: Function;
+    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
+    prefix?: string;
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+export declare const ErrorMessage: import("react").ForwardRefExoticComponent<{
+    /** An icon to display instead of the default icon. */
+    icon?: Function;
+    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
+    prefix?: string;
+} & HTMLAttributes<HTMLParagraphElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,11 @@
+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 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] })));
+ErrorMessage.displayName = 'ErrorMessage';

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/ErrorMessage/ErrorMessage.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { ErrorMessage } from './ErrorMessage';
+import '@testing-library/jest-dom';
+describe('Error message', () => {
+    it('renders', () => {
+        render(_jsx(ErrorMessage, {}));
+        const component = screen.getByRole('paragraph');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(ErrorMessage, {}));
+        const component = screen.getByRole('paragraph');
+        expect(component).toHaveClass('ams-error-message');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(ErrorMessage, { className: "extra" }));
+        const component = screen.getByRole('paragraph');
+        expect(component).toHaveClass('ams-error-message extra');
+    });
+    it('renders a Dutch prefix by default', () => {
+        render(_jsx(ErrorMessage, {}));
+        const component = screen.getByText('Invoerfout', { exact: false });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a custom prefix', () => {
+        render(_jsx(ErrorMessage, { prefix: "Error" }));
+        const component = screen.getByText('Error', { exact: false });
+        expect(component).toBeInTheDocument();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(ErrorMessage, { ref: ref }));
+        const component = screen.getByRole('paragraph');
+        expect(ref.current).toBe(component);
+    });
+    it('shows an icon', () => {
+        const { container } = render(_jsx(ErrorMessage, {}));
+        const iconWrapper = container.querySelector('.ams-icon');
+        const icon = container.querySelector('svg');
+        expect(iconWrapper).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
+    });
+    // TODO: we can't currently test this, because we can't pass a class or anything to the SVG
+    // We plan on changing this, so we can test this in the future
+    it.skip('shows a custom icon', () => { });
+});

package/dist/ErrorMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorMessage } from './ErrorMessage';
+export type { ErrorMessageProps } from './ErrorMessage';

package/dist/ErrorMessage/index.js

@@ -0,0 +1 @@
+export { ErrorMessage } from './ErrorMessage';

package/dist/Field/Field.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FieldProps = {
+    /** Whether the field has an input with a validation error */
+    invalid?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+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/Field/Field.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Field/Field.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Field } from './Field';
+import '@testing-library/jest-dom';
+describe('Field', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Field, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Field, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field');
+    });
+    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');
+    });
+    it('renders with the error class', () => {
+        const { container } = render(_jsx(Field, { invalid: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field--invalid');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Field, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Field/index.d.ts

@@ -0,0 +1,2 @@
+export { Field } from './Field';
+export type { FieldProps } from './Field';

package/dist/Field/index.js

@@ -0,0 +1 @@
+export { Field } from './Field';

package/dist/FieldSet/FieldSet.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { HintProps } from '../Hint';
+export type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
+    /** Whether the field set has an input with a validation error */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+} & HintProps;
+export declare const FieldSet: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    /** Whether the field set has an input with a validation error */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+} & HTMLAttributes<HTMLElement> & {
+    hint?: string;
+    optional?: boolean;
+} & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/FieldSet/FieldSet.js

@@ -0,0 +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 { forwardRef } from 'react';
+import { Hint } from '../Hint';
+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] }));
+});
+FieldSet.displayName = 'FieldSet';

package/dist/FieldSet/FieldSet.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FieldSet/FieldSet.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { FieldSet } from './FieldSet';
+import '@testing-library/jest-dom';
+describe('FieldSet', () => {
+    it('renders', () => {
+        render(_jsx(FieldSet, { legend: "Test" }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(FieldSet, { legend: "Test" }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(component).toHaveClass('ams-field-set');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(FieldSet, { className: "extra", legend: "Test" }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(component).toHaveClass('ams-field-set extra');
+    });
+    it('renders the correct legend class name', () => {
+        const { container } = render(_jsx(FieldSet, { legend: "Test" }));
+        const component = container.querySelector('legend');
+        expect(component).toHaveClass('ams-field-set__legend');
+    });
+    it('renders the error class', () => {
+        const { container } = render(_jsx(FieldSet, { invalid: true, legend: "Test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field-set--invalid');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(FieldSet, { legend: "Test", ref: ref }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(ref.current).toBe(component);
+    });
+    it('renders the provided hint text after the legend', () => {
+        render(_jsx(FieldSet, { hint: "hint text", legend: "Legend" }));
+        const component = screen.getByRole('group', { name: 'Legend (hint text)' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the default hint text after the legend', () => {
+        render(_jsx(FieldSet, { legend: "Legend", optional: true }));
+        const component = screen.getByRole('group', { name: 'Legend (niet verplicht)' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the provided hint text after the legend when both `optional` and `hint` props are used', () => {
+        render(_jsx(FieldSet, { hint: "not required", legend: "Legend", optional: true }));
+        const component = screen.getByRole('group', { name: 'Legend (not required)' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the provided hint text after the legend while `optional` is set to `false`', () => {
+        render(_jsx(FieldSet, { hint: "required", legend: "Legend", optional: false }));
+        const component = screen.getByRole('group', { name: 'Legend (required)' });
+        expect(component).toBeInTheDocument();
+    });
+});

package/dist/FieldSet/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldSet } from './FieldSet';
+export type { FieldSetProps } from './FieldSet';

package/dist/FieldSet/index.js

@@ -0,0 +1 @@
+export { FieldSet } from './FieldSet';

package/dist/Figure/Figure.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+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<{
+        color?: "inverse";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+};

package/dist/Figure/Figure.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { FigureCaption } from './FigureCaption';
+const FigureRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("figure", { ...restProps, className: clsx('ams-figure', className), ref: ref, children: children })));
+FigureRoot.displayName = 'Figure';
+export const Figure = Object.assign(FigureRoot, { Caption: FigureCaption });

package/dist/Figure/Figure.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Figure/Figure.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Figure } from './Figure';
+import '@testing-library/jest-dom';
+describe('Figure', () => {
+    it('renders', () => {
+        render(_jsx(Figure, {}));
+        const component = screen.getByRole('figure');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Figure, {}));
+        const component = screen.getByRole('figure');
+        expect(component).toHaveClass('ams-figure');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Figure, { className: "extra" }));
+        const component = screen.getByRole('figure');
+        expect(component).toHaveClass('ams-figure extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Figure, { ref: ref }));
+        const component = screen.getByRole('figure');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Figure/FigureCaption.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FigureCaptionProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+} & 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/Figure/FigureCaption.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const FigureCaption = forwardRef(({ children, className, color, ...restProps }, ref) => (_jsx("figcaption", { ...restProps, className: clsx('ams-figure__caption', color && `ams-figure__caption--${color}`, className), ref: ref, children: children })));
+FigureCaption.displayName = 'Figure.Caption';

package/dist/Figure/FigureCaption.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Figure/FigureCaption.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { FigureCaption } from './FigureCaption';
+import '@testing-library/jest-dom';
+describe('Figure Caption', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(FigureCaption, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(FigureCaption, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-figure__caption');
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(FigureCaption, { color: "inverse", children: "Caption" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-figure__caption--inverse');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(FigureCaption, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-figure__caption extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(FigureCaption, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Figure/index.d.ts

@@ -0,0 +1,2 @@
+export { Figure } from './Figure';
+export type { FigureProps } from './Figure';

package/dist/Figure/index.js

@@ -0,0 +1 @@
+export { Figure } from './Figure';

package/dist/FileInput/FileInput.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes } from 'react';
+export type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/FileInput/FileInput.js

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

package/dist/FileInput/FileInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FileInput/FileInput.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { FileInput } from './FileInput';
+import '@testing-library/jest-dom';
+describe('File input', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(FileInput, {}));
+        const component = container.querySelector('input[type="file"]');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(FileInput, {}));
+        const component = container.querySelector('input[type="file"]');
+        expect(component).toHaveClass('ams-file-input');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(FileInput, { className: "extra" }));
+        const component = container.querySelector('input[type="file"]');
+        expect(component).toHaveClass('ams-file-input extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(FileInput, { ref: ref }));
+        const component = container.querySelector('input[type="file"]');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/FileInput/index.d.ts

@@ -0,0 +1,2 @@
+export { FileInput } from './FileInput';
+export type { FileInputProps } from './FileInput';

package/dist/FileInput/index.js

@@ -0,0 +1 @@
+export { FileInput } from './FileInput';

package/dist/FileList/FileList.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const FileListRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>>;
+export declare const FileList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<{
+        file: File;
+        onDelete?: () => void;
+    } & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+};