@amsterdam/design-system-react 1.1.0 → 2.0.1

package/dist/Field/Field.d.ts

@@ -3,16 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FieldProps = {
+export type FieldProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** 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<{
+export declare const Field: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** 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

@@ -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-field--docs Field docs at Amsterdam Design System}

package/dist/FieldSet/FieldSet.d.ts

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

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

package/dist/Figure/Figure.d.ts

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

package/dist/Figure/Figure.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 { FigureCaption } from './FigureCaption';
 const FigureRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("figure", { ...restProps, className: clsx('ams-figure', className), ref: ref, children: children })));

package/dist/Figure/FigureCaption.d.ts

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

@@ -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 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/FileInput/FileInput.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-file-input--docs File Input docs at Amsterdam Design System}

package/dist/FileList/FileList.d.ts

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

package/dist/FileList/FileList.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 { FileListItem } from './FileListItem';
 export const FileListRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-file-list', className), ref: ref, children: children })));

package/dist/FileList/FileListItem.d.ts

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

package/dist/FileList/FileListItem.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { DocumentIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
 import { formatFileSize } from '../common/formatFileSize';
 import { formatFileType } from '../common/formatFileType';
+import { Icon } from '../Icon';
 export const FileListItem = forwardRef(({ className, file, onDelete, ...restProps }, ref) => (_jsxs("li", { ...restProps, className: clsx('ams-file-list__item', className), ref: ref, children: [_jsx("div", { className: "ams-file-list__item-preview", children: file.type.startsWith('image/') ? (_jsx("img", { alt: file.name, src: URL.createObjectURL(file) })) : (_jsx(Icon, { size: "heading-3", square: true, svg: DocumentIcon })) }), _jsxs("div", { className: "ams-file-list__item-info", children: [file.name, _jsxs("div", { className: "ams-file-input__item-details", children: ["(", formatFileType(file.type), ", ", formatFileSize(file.size), ")"] })] }), onDelete && (_jsx("div", { children: _jsx(Button, { onClick: () => onDelete(), variant: "tertiary", children: "Verwijder" }) }))] })));
 FileListItem.displayName = 'FileList.Item';

package/dist/Grid/Grid.d.ts

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

package/dist/Grid/Grid.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 { GridCell } from './GridCell';
 import { paddingClasses } from './paddingClasses';

package/dist/Grid/Grid.test.js

@@ -5,8 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Grid, gridGaps, gridPaddings, gridTags } from './Grid';
 import { ariaRoleForTag } from '../common/accessibility';
+import { Grid, gridGaps, gridPaddings, gridTags } from './Grid';
 import '@testing-library/jest-dom';
 describe('Grid', () => {
     it('renders', () => {

package/dist/Grid/GridCell.d.ts

@@ -17,9 +17,9 @@ type GridCellSpanAndStartProps = {
     /** The index of the grid column the cell starts at. */
     start?: GridColumnNumber | GridColumnNumbers;
 };
-export type GridCellProps = {
+export type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The HTML tag to use. */
     as?: GridCellTag;
-} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<unknown>>;
 export {};

package/dist/Grid/GridCell.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 { gridCellClasses } from './gridCellClasses';
 export const gridCellTags = ['article', 'aside', 'div', 'footer', 'header', 'main', 'nav', 'section'];

package/dist/Grid/GridCell.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 { ariaRoleForTag } from '../common/accessibility';
 import { Grid } from './Grid';
 import { gridCellTags } from './GridCell';
-import { ariaRoleForTag } from '../common/accessibility';
 import '@testing-library/jest-dom';
 describe('Grid cell', () => {
     it('renders', () => {

package/dist/Heading/Heading.d.ts

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

package/dist/Heading/Heading.js

@@ -1,14 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2021 Robbert Broersma
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { getHeadingTag } from './getHeadingTag';
 /**

package/dist/Heading/Heading.test.js

@@ -38,19 +38,17 @@ describe('Heading', () => {
         expect(h4).toBeInTheDocument();
     });
     it('renders the correct size level class', () => {
-        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, size: "level-1", children: "Size level 1" }), _jsx(Heading, { level: 1, size: "level-2", children: "Size level 2" }), _jsx(Heading, { level: 1, size: "level-3", children: "Size level 3" }), _jsx(Heading, { level: 1, size: "level-4", children: "Size level 4" }), _jsx(Heading, { level: 1, size: "level-5", children: "Size level 5" }), _jsx(Heading, { level: 1, size: "level-6", children: "Size level 6" })] }));
+        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, size: "level-1", children: "Size level 1" }), _jsx(Heading, { level: 1, size: "level-2", children: "Size level 2" }), _jsx(Heading, { level: 1, size: "level-3", children: "Size level 3" }), _jsx(Heading, { level: 1, size: "level-4", children: "Size level 4" }), _jsx(Heading, { level: 1, size: "level-5", children: "Size level 5" })] }));
         const sizeLevel1 = screen.getByRole('heading', { level: 1, name: 'Size level 1' });
         const sizeLevel2 = screen.getByRole('heading', { level: 1, name: 'Size level 2' });
         const sizeLevel3 = screen.getByRole('heading', { level: 1, name: 'Size level 3' });
         const sizeLevel4 = screen.getByRole('heading', { level: 1, name: 'Size level 4' });
         const sizeLevel5 = screen.getByRole('heading', { level: 1, name: 'Size level 5' });
-        const sizeLevel6 = screen.getByRole('heading', { level: 1, name: 'Size level 6' });
         expect(sizeLevel1).toHaveClass('ams-heading--1');
         expect(sizeLevel2).toHaveClass('ams-heading--2');
         expect(sizeLevel3).toHaveClass('ams-heading--3');
         expect(sizeLevel4).toHaveClass('ams-heading--4');
         expect(sizeLevel5).toHaveClass('ams-heading--5');
-        expect(sizeLevel6).toHaveClass('ams-heading--6');
     });
     it('renders the class name for inverse color', () => {
         render(_jsx(Heading, { color: "inverse", level: 1, children: "Heading" }));

package/dist/Hint/Hint.d.ts

@@ -9,8 +9,8 @@ type HintAndOptionalProps = {
     /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
     optional?: boolean;
 };
-export type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
-export declare const Hint: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export type HintProps = HintAndOptionalProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Hint: import("react").ForwardRefExoticComponent<HintAndOptionalProps & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
-} & HintAndOptionalProps & import("react").RefAttributes<HTMLElement>>;
+} & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/Hint/Hint.js

@@ -1,9 +1,5 @@
 import { 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';
 const getHintText = ({ hint, optional }) => {
     if (hint) {

package/dist/Icon/Icon.d.ts

@@ -2,13 +2,22 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
 import type { HTMLAttributes, ReactNode } from 'react';
-export declare const iconSizes: readonly ["small", "large", "heading-3", "heading-4", "heading-5", "heading-6"];
+export declare const iconSizes: readonly ["small", "large", "heading-0", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5", "heading-6"];
 type IconSize = (typeof iconSizes)[number];
 export type IconProps = {
     /** Changes the icon colour for readability on a dark background. */
     color?: 'inverse';
-    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    /**
+     * The size of the icon. Choose the size of the corresponding body text or heading.
+     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
+     */
     size?: IconSize;
     /** Whether the icon container should be made square. */
     square?: boolean;
@@ -22,7 +31,10 @@ export type IconProps = {
 export declare const Icon: import("react").ForwardRefExoticComponent<{
     /** Changes the icon colour for readability on a dark background. */
     color?: "inverse";
-    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    /**
+     * The size of the icon. Choose the size of the corresponding body text or heading.
+     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
+     */
     size?: IconSize;
     /** Whether the icon container should be made square. */
     square?: boolean;

package/dist/Icon/Icon.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-export const iconSizes = ['small', 'large', 'heading-3', 'heading-4', 'heading-5', 'heading-6'];
+export const iconSizes = [
+    'small',
+    'large',
+    'heading-0', // Deprecated
+    'heading-1',
+    'heading-2',
+    'heading-3',
+    'heading-4',
+    'heading-5',
+    'heading-6', // Deprecated
+];
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
  * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
  */
-export const Icon = forwardRef(({ className, color, size, square, svg, ...restProps }, ref) => (_jsx("span", { className: clsx('ams-icon', color && `ams-icon--${color}`, size && `ams-icon--${size}`, square && 'ams-icon--square', className), ref: ref, ...restProps, children: typeof svg === 'function' ? svg() : svg })));
+export const Icon = forwardRef(({ className, color, size, square, svg, ...restProps }, ref) => (_jsx("span", { className: clsx('ams-icon', color && `ams-icon--${color}`, size && `ams-icon--${size}`, square && 'ams-icon--square', className), hidden // The icon is only shown when the CSS loads, so we hide it by default.
+    : true, ref: ref, ...restProps, children: typeof svg === 'function' ? svg() : svg })));
 Icon.displayName = 'Icon';

package/dist/Icon/Icon.test.js

@@ -14,6 +14,11 @@ describe('Icon', () => {
         const icon = container.querySelector('span:only-child');
         expect(icon).toBeInTheDocument();
     });
+    it('renders with a React node for the svg prop', () => {
+        const { container } = render(_jsx(Icon, { svg: _jsx(WarningIcon, {}) }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toBeInTheDocument();
+    });
     it('renders a design system BEM class name', () => {
         const { container } = render(_jsx(Icon, { svg: WarningIcon }));
         const icon = container.querySelector(':only-child');

package/dist/IconButton/IconButton.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { CloseIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
 /**

package/dist/Image/Image.d.ts

@@ -4,14 +4,14 @@
  */
 import type { ImgHTMLAttributes } from 'react';
 import { AspectRatioProps } from '../common/types';
-export type ImageProps = {
+export type ImageProps = AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
     /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
-export declare const Image: import("react").ForwardRefExoticComponent<{
+export declare const Image: import("react").ForwardRefExoticComponent<AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & {
     /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;
+} & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Image/Image.js

@@ -1,13 +1,9 @@
 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 { generateAspectRatioClass } from './generateAspectRatioClass';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
-export const Image = forwardRef(({ aspectRatio, className, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref })));
+export const Image = forwardRef(({ aspectRatio, className, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref, width: 600 })));
 Image.displayName = 'Image';

package/dist/Image/Image.test.js

@@ -5,9 +5,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { Image } from './Image';
-import { generateAspectRatioClass } from './generateAspectRatioClass';
 import { aspectRatioOptions } from '../common/types';
+import { generateAspectRatioClass } from './generateAspectRatioClass';
+import { Image } from './Image';
 import '@testing-library/jest-dom';
 describe('Image', () => {
     it('renders', () => {

package/dist/Image/index.d.ts

@@ -2,6 +2,6 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export { Image } from './Image';
 export { generateAspectRatioClass } from './generateAspectRatioClass';
+export { Image } from './Image';
 export type { ImageProps } from './Image';

package/dist/Image/index.js

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

package/dist/ImageSlider/ImageSlider.d.ts

@@ -44,9 +44,9 @@ export declare const ImageSlider: import("react").ForwardRefExoticComponent<{
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<{
-        slideId: number;
-    } & HTMLAttributes<HTMLDivElement> & {
+    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: import("react").ReactNode | undefined;
+    } & {
+        slideId: number;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/ImageSlider/ImageSlider.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, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Image } from '../Image/Image';
 import { ImageSliderContext } from './ImageSliderContext';
 import { ImageSliderControls } from './ImageSliderControls';
 import { ImageSliderItem } from './ImageSliderItem';
 import { ImageSliderScroller } from './ImageSliderScroller';
 import { ImageSliderThumbnails } from './ImageSliderThumbnails';
-import { Image } from '../Image/Image';
 export const ImageSliderRoot = forwardRef(({ className, controls, imageLabel = 'Afbeelding', images, nextLabel = 'Volgende', previousLabel = 'Vorige', ...restProps }, ref) => {
     const [currentSlideId, setCurrentSlideId] = useState(0);
     const [isAtStart, setIsAtStart] = useState(true);

package/dist/ImageSlider/ImageSliderControls.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useCallback, useContext } from 'react';
-import { ImageSliderContext } from './ImageSliderContext';
 import { Button } from '../Button';
+import { ImageSliderContext } from './ImageSliderContext';
 export const ImageSliderControls = forwardRef(({ className, nextLabel, previousLabel, ...restProps }, ref) => {
     const { goToNextSlide, goToPreviousSlide, isAtEnd, isAtStart } = useContext(ImageSliderContext);
     const handleClickPrevious = useCallback(() => goToPreviousSlide(), [goToPreviousSlide]);