@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/Hint/Hint.test.d.ts

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

package/dist/Hint/Hint.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 { Hint } from '.';
@@ -15,7 +19,7 @@ describe('Hint', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-hint');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Hint, { className: "extra", optional: true }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-hint extra');

package/dist/Hint/index.d.ts

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

package/dist/Hint/index.js

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

package/dist/Icon/Icon.d.ts

@@ -1,11 +1,9 @@
 /**
  * @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: string[];
+export declare const iconSizes: readonly ["small", "large", "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. */
@@ -17,6 +15,10 @@ export type IconProps = {
     /** The component rendering the icon’s markup. */
     svg: Function | ReactNode;
 } & HTMLAttributes<HTMLSpanElement>;
+/**
+ * @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 declare const Icon: import("react").ForwardRefExoticComponent<{
     /** Changes the icon colour for readability on a dark background. */
     color?: "inverse";

package/dist/Icon/Icon.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Gemeente Utrecht
@@ -8,5 +12,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 export const iconSizes = ['small', 'large', 'heading-3', 'heading-4', 'heading-5', 'heading-6'];
+/**
+ * @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 })));
 Icon.displayName = 'Icon';

package/dist/Icon/Icon.test.d.ts

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

package/dist/Icon/Icon.test.js

@@ -1,51 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AlertIcon } from '@amsterdam/design-system-react-icons';
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { WarningIcon } from '@amsterdam/design-system-react-icons';
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { Icon, iconSizes } from './Icon';
 import '@testing-library/jest-dom';
 describe('Icon', () => {
     it('renders a span element', () => {
-        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const { container } = render(_jsx(Icon, { svg: 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: AlertIcon }));
+        const { container } = render(_jsx(Icon, { svg: WarningIcon }));
         const icon = container.querySelector(':only-child');
         expect(icon).toHaveClass('ams-icon');
     });
     it('renders an svg child', () => {
-        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const { container } = render(_jsx(Icon, { svg: WarningIcon }));
         const svg = container.querySelector(':only-child svg');
         expect(svg).toBeInTheDocument();
     });
     iconSizes.forEach((size) => {
         it(`renders the correct class name for a ‘${size}’ icon`, () => {
-            const { container } = render(_jsx(Icon, { size: size, svg: AlertIcon }));
+            const { container } = render(_jsx(Icon, { size: size, svg: WarningIcon }));
             const icon = container.querySelector(':only-child');
             expect(icon).toHaveClass(`ams-icon--${size}`);
         });
     });
     it('renders the right square class', () => {
-        const { container } = render(_jsx(Icon, { square: true, svg: AlertIcon }));
+        const { container } = render(_jsx(Icon, { square: true, svg: WarningIcon }));
         const icon = container.querySelector('span:only-child');
         expect(icon).toHaveClass('ams-icon--square');
     });
     it('renders the class name for inverse color', () => {
-        const { container } = render(_jsx(Icon, { color: "inverse", svg: AlertIcon }));
+        const { container } = render(_jsx(Icon, { color: "inverse", svg: WarningIcon }));
         const icon = container.querySelector('span:only-child');
         expect(icon).toHaveClass('ams-icon--inverse');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(Icon, { className: "large", svg: AlertIcon }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Icon, { className: "extra", svg: WarningIcon }));
         const icon = container.querySelector(':only-child');
-        expect(icon).toHaveClass('large');
-        expect(icon).toHaveClass('ams-icon');
+        expect(icon).toHaveClass('ams-icon extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(Icon, { ref: ref, svg: AlertIcon }));
+        const { container } = render(_jsx(Icon, { ref: ref, svg: WarningIcon }));
         const icon = container.querySelector(':only-child');
         expect(ref.current).toBe(icon);
     });

package/dist/Icon/index.d.ts

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

package/dist/Icon/index.js

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

package/dist/IconButton/IconButton.d.ts

@@ -9,17 +9,20 @@ export type IconButtonProps = {
     color?: 'contrast' | 'inverse';
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** The size of the icon. */
+    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
     size?: IconProps['size'];
     /** The component rendering the icon’s markup. */
     svg?: IconProps['svg'];
 } & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
+ */
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** The size of the icon. */
+    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
     size?: IconProps["size"];
     /** The component rendering the icon’s markup. */
     svg?: IconProps["svg"];

package/dist/IconButton/IconButton.js

@@ -7,5 +7,8 @@ import { CloseIcon } from '@amsterdam/design-system-react-icons';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
-export const IconButton = forwardRef(({ className, color, label, size, svg = CloseIcon, ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-icon-button', color && `ams-icon-button--${color}`, className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", children: label }), _jsx(Icon, { size: size, square: true, svg: svg })] })));
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
+ */
+export const IconButton = forwardRef(({ className, color, label, size, svg = CloseIcon, type, ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-icon-button', color && `ams-icon-button--${color}`, className), ref: ref, type: type || 'button', children: [_jsx("span", { className: "ams-visually-hidden", children: label }), _jsx(Icon, { size: size, square: true, svg: svg })] })));
 IconButton.displayName = 'IconButton';

package/dist/IconButton/IconButton.test.d.ts

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

package/dist/IconButton/IconButton.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 { IconButton } from './IconButton';
@@ -15,7 +19,7 @@ describe('Icon button', () => {
         const component = screen.getByRole('button');
         expect(component).toHaveClass('ams-icon-button');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(IconButton, { className: "extra", label: "Test" }));
         const component = screen.getByRole('button');
         expect(component).toHaveClass('ams-icon-button extra');

package/dist/IconButton/index.d.ts

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

package/dist/IconButton/index.js

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

package/dist/Image/Image.d.ts

@@ -5,14 +5,13 @@
 import type { ImgHTMLAttributes } from 'react';
 import { AspectRatioProps } from '../common/types';
 export type ImageProps = {
-    /**
-     * A textual description of the content of the image.
-     */
+    /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement>;
+} & 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<{
-    /**
-     * A textual description of the content of the image.
-     */
+    /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Image/Image.js

@@ -6,5 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 })));
 Image.displayName = 'Image';

package/dist/Image/Image.test.d.ts

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

package/dist/Image/Image.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 { Image } from './Image';
@@ -17,7 +21,7 @@ describe('Image', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Image, { alt: "", className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image extra');

package/dist/Image/generateAspectRatioClass.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;

package/dist/Image/generateAspectRatioClass.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export const generateAspectRatioClass = (aspectRatio) => aspectRatio && `ams-aspect-ratio-${aspectRatio.replace(':', '-')}`;

package/dist/Image/index.d.ts

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

package/dist/Image/index.js

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

package/dist/ImageSlider/ImageSlider.d.ts

@@ -29,6 +29,9 @@ export declare const ImageSliderRoot: import("react").ForwardRefExoticComponent<
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs Image Slider docs at Amsterdam Design System}
+ */
 export declare const ImageSlider: import("react").ForwardRefExoticComponent<{
     /** Display buttons to navigate to the previous or next image. */
     controls?: boolean;

package/dist/ImageSlider/ImageSlider.js

@@ -95,4 +95,7 @@ export const ImageSliderRoot = forwardRef(({ className, controls, imageLabel = '
     return (_jsx(ImageSliderContext.Provider, { value: { currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId, isAtEnd, isAtStart }, children: _jsxs("div", { ...restProps, "aria-roledescription": "carousel", className: clsx('ams-image-slider', controls && 'ams-image-slider--controls', className), ref: ref, tabIndex: -1, children: [controls && _jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel }), _jsx(ImageSliderScroller, { "aria-live": "polite", ref: targetRef, role: "group", tabIndex: 0, children: images.map(({ alt, aspectRatio, sizes, src, srcSet }, index) => (_jsx(ImageSliderItem, { slideId: index, children: _jsx(Image, { alt: alt, aspectRatio: aspectRatio, sizes: sizes, src: src, srcSet: srcSet }) }, index))) }), _jsx(ImageSliderThumbnails, { imageLabel: imageLabel, thumbnails: images })] }) }));
 });
 ImageSliderRoot.displayName = 'ImageSlider';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs Image Slider docs at Amsterdam Design System}
+ */
 export const ImageSlider = Object.assign(ImageSliderRoot, { Item: ImageSliderItem });

package/dist/ImageSlider/ImageSlider.test.d.ts

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

package/dist/ImageSlider/ImageSlider.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 { ImageSlider } from './ImageSlider';
@@ -48,7 +52,7 @@ describe('Image Slider', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(ImageSlider, { className: "extra", images: images }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider extra');

package/dist/ImageSlider/ImageSliderControls.js

@@ -3,15 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons';
+import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useContext } from 'react';
 import { ImageSliderContext } from './ImageSliderContext';
-import { IconButton } from '../IconButton';
+import { Button } from '../Button';
 export const ImageSliderControls = forwardRef(({ className, nextLabel, previousLabel, ...restProps }, ref) => {
     const { goToNextSlide, goToPreviousSlide, isAtEnd, isAtStart } = useContext(ImageSliderContext);
     const handleClickPrevious = useCallback(() => goToPreviousSlide(), [goToPreviousSlide]);
     const handleClickNext = useCallback(() => goToNextSlide(), [goToNextSlide]);
-    return (_jsxs("div", { ...restProps, className: clsx('ams-image-slider__controls', className), ref: ref, children: [_jsx(IconButton, { className: "ams-image-slider__control ams-image-slider__control--previous", color: "inverse", disabled: isAtStart, label: previousLabel, onClick: handleClickPrevious, svg: ChevronLeftIcon }), _jsx(IconButton, { className: "ams-image-slider__control ams-image-slider__control--next", color: "inverse", disabled: isAtEnd, label: nextLabel, onClick: handleClickNext, svg: ChevronRightIcon })] }));
+    return (_jsxs("div", { ...restProps, className: clsx('ams-image-slider__controls', className), ref: ref, children: [_jsx(Button, { className: "ams-image-slider__control ams-image-slider__control--previous", color: "inverse", disabled: isAtStart, icon: ChevronBackwardIcon, iconOnly: true, onClick: handleClickPrevious, children: previousLabel }), _jsx(Button, { className: "ams-image-slider__control ams-image-slider__control--next", color: "inverse", disabled: isAtEnd, icon: ChevronForwardIcon, iconOnly: true, onClick: handleClickNext, children: nextLabel })] }));
 });
 ImageSliderControls.displayName = 'ImageSliderControls';

package/dist/ImageSlider/ImageSliderControls.test.d.ts

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

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

package/dist/ImageSlider/ImageSliderItem.test.d.ts

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

package/dist/ImageSlider/ImageSliderItem.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 { ImageSliderItem } from './ImageSliderItem';
@@ -19,7 +23,7 @@ describe('Image Slider Item', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__item');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(ImageSliderItem, { className: "extra", slideId: 0 }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__item extra');

package/dist/ImageSlider/ImageSliderScroller.test.d.ts

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

package/dist/ImageSlider/ImageSliderScroller.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 { ImageSliderScroller } from './ImageSliderScroller';
@@ -19,7 +23,7 @@ describe('Image Slider Scroller', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__scroller');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(ImageSliderScroller, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__scroller extra');

package/dist/ImageSlider/ImageSliderThumbnails.js

@@ -26,7 +26,7 @@ export const ImageSliderThumbnails = forwardRef(({ className, imageLabel, thumbn
             }
         }
     }, [currentSlideId, goToNextSlide, goToPreviousSlide]);
-    const renderThumbnails = useMemo(() => thumbnails.map(({ alt, aspectRatio, src }, index) => (_jsx("button", { "aria-label": `${imageLabel} ${index + 1}: ${alt}`, "aria-posinset": index + 1, "aria-selected": currentSlideId === index ? 'true' : 'false', "aria-setsize": thumbnails.length, className: clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)), onClick: () => goToSlideId(index), role: "tab", style: { backgroundImage: `url(${src})` }, tabIndex: currentSlideId === index ? 0 : -1 }, index))), [currentSlideId, goToSlideId, imageLabel, thumbnails]);
+    const renderThumbnails = useMemo(() => thumbnails.map(({ alt, aspectRatio, src }, index) => (_jsx("button", { "aria-label": `${imageLabel} ${index + 1}: ${alt}`, "aria-posinset": index + 1, "aria-selected": currentSlideId === index ? 'true' : 'false', "aria-setsize": thumbnails.length, className: clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)), onClick: () => goToSlideId(index), role: "tab", style: { backgroundImage: `url(${src})` }, tabIndex: currentSlideId === index ? 0 : -1, type: "button" }, index))), [currentSlideId, goToSlideId, imageLabel, thumbnails]);
     return (_jsx("nav", { ...restProps, className: clsx('ams-image-slider__thumbnails', className), onKeyDown: handleKeyDown, ref: ref, role: "tablist", children: renderThumbnails }));
 });
 ImageSliderThumbnails.displayName = 'ImageSlider.Thumbnails';

package/dist/ImageSlider/ImageSliderThumbnails.test.d.ts

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

package/dist/ImageSlider/ImageSliderThumbnails.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 { ImageSliderThumbnails } from './ImageSliderThumbnails';
@@ -34,7 +38,7 @@ describe('Image Slider Thumbnails', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__thumbnails');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(ImageSliderThumbnails, { className: "extra", thumbnails: thumbnails }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__thumbnails extra');

package/dist/ImageSlider/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { ImageSlider } from './ImageSlider';
 export type { ImageSliderProps } from './ImageSlider';
 export type { ImageSliderItemProps } from './ImageSliderItem';

package/dist/ImageSlider/index.js

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

package/dist/InvalidFormAlert/InvalidFormAlert.d.ts

@@ -37,6 +37,9 @@ export type InvalidFormAlertProps = {
      **/
     headingLevel: HeadingProps['level'];
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-invalid-form-alert--docs Invalid Form Alert docs at Amsterdam Design System}
+ */
 export declare const InvalidFormAlert: import("react").ForwardRefExoticComponent<{
     /**
      * The text following the error count.

package/dist/InvalidFormAlert/InvalidFormAlert.js

@@ -6,6 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { InvalidFormAlertWithErrors } from './InvalidFormAlertWithErrors';
 import { useAddErrorCountToDocumentTitle } from './useAddErrorCountToDocumentTitle';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-invalid-form-alert--docs Invalid Form Alert docs at Amsterdam Design System}
+ */
 export const InvalidFormAlert = forwardRef(({ errorCountLabel, errors, ...restProps }, ref) => {
     // An Invalid Form Alert without errors only resets the document title.
     // With errors, it renders the InvalidFormAlertWithErrors component.

package/dist/InvalidFormAlert/InvalidFormAlert.test.d.ts

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

package/dist/InvalidFormAlert/InvalidFormAlert.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen, waitFor } from '@testing-library/react';
 import { createRef } from 'react';
 import { InvalidFormAlert } from './InvalidFormAlert';
@@ -24,7 +28,7 @@ describe('Invalid Form Alert', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-invalid-form-alert');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(InvalidFormAlert, { className: "extra", errors: testErrors, headingLevel: 2 }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-invalid-form-alert extra');

package/dist/InvalidFormAlert/index.d.ts

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

package/dist/InvalidFormAlert/index.js

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

package/dist/InvalidFormAlert/useAddErrorCountToDocumentTitle.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export declare const useAddErrorCountToDocumentTitle: (
 /** The list of error messages used to calculate the error count. */
 errors: {

package/dist/InvalidFormAlert/useAddErrorCountToDocumentTitle.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { useEffect, useState } from 'react';
 export const useAddErrorCountToDocumentTitle = (
 /** The list of error messages used to calculate the error count. */