@amsterdam/design-system-react 3.0.0 → 3.1.0

package/dist/Accordion/Accordion.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useKeyboardFocus } from '../common/useKeyboardFocus';
-import AccordionContext from './AccordionContext';
+import { AccordionContext } from './AccordionContext';
 import { AccordionSection } from './AccordionSection';
 const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs = 'section' }, ref) => {
     const innerRef = useRef(null);

package/dist/Accordion/AccordionContext.d.ts

@@ -7,5 +7,4 @@ export type AccordionContextValue = {
     headingLevel: AccordionProps['headingLevel'];
     sectionAs?: AccordionProps['sectionAs'];
 };
-declare const AccordionContext: import("react").Context<AccordionContextValue>;
-export default AccordionContext;
+export declare const AccordionContext: import("react").Context<AccordionContextValue>;

package/dist/Accordion/AccordionContext.js

@@ -4,9 +4,8 @@
  */
 import { createContext } from 'react';
 const defaultValues = {
-    // Level 2 is set here, but it is never used.
-    // headingLevel is a required prop in Accordion, which always overwrites it.
+    // Default value for type safety.
+    // The actual value is always provided via Accordion’s required headingLevel prop.
     headingLevel: 2,
 };
-const AccordionContext = createContext(defaultValues);
-export default AccordionContext;
+export const AccordionContext = createContext(defaultValues);

package/dist/Accordion/AccordionSection.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { forwardRef, useContext, useId, useState } from 'react';
 import { Heading } from '../Heading';
 import { Icon } from '../Icon/Icon';
-import AccordionContext from './AccordionContext';
+import { AccordionContext } from './AccordionContext';
 // The 'ams-accordion__header' class is @deprecated and will be removed in a future release.
 export const AccordionSection = forwardRef(({ children, className, expanded = false, label, ...restProps }, ref) => {
     const { headingLevel, sectionAs } = useContext(AccordionContext);

package/dist/Badge/Badge.d.ts

@@ -3,11 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
+import type { IconProps } from '../Icon';
 export declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
 type BadgeColor = (typeof badgeColors)[number];
 export type BadgeProps = {
     /** The background colour. */
     color?: BadgeColor;
+    /** The icon to show before the badge text. */
+    icon?: IconProps['svg'];
     /** The text content. */
     label: string | number;
 } & HTMLAttributes<HTMLElement>;
@@ -17,6 +20,8 @@ export type BadgeProps = {
 export declare const Badge: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: BadgeColor;
+    /** The icon to show before the badge text. */
+    icon?: IconProps["svg"];
     /** The text content. */
     label: string | number;
 } & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/Badge/Badge.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { Icon } from '../Icon';
 export const badgeColors = ['azure', 'lime', 'magenta', 'orange', 'purple', 'red', 'yellow'];
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
  */
-export const Badge = forwardRef(({ className, color, label, ...restProps }, ref) => (_jsx("span", { ...restProps, className: clsx('ams-badge', color && `ams-badge--${color}`, className), ref: ref, children: label })));
+export const Badge = forwardRef(({ className, color, icon, label, ...restProps }, ref) => (_jsxs("span", { ...restProps, className: clsx('ams-badge', color && `ams-badge--${color}`, className), ref: ref, children: [icon && _jsx(Icon, { svg: icon }), label] })));
 Badge.displayName = 'Badge';

package/dist/Checkbox/Checkbox.d.ts

@@ -2,13 +2,14 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import type { InputHTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
 export type CheckboxProps = {
     /**
      * An icon to display instead of the default icon.
      * @default CheckboxIcon
      */
-    icon?: Function | ReactNode;
+    icon?: IconProps['svg'];
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
@@ -22,11 +23,11 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
      * An icon to display instead of the default icon.
      * @default CheckboxIcon
      */
-    icon?: Function | ReactNode;
+    icon?: IconProps["svg"];
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/ImageSlider/ImageSlider.d.ts

@@ -4,31 +4,18 @@
  */
 import type { HTMLAttributes } from 'react';
 import type { ImageProps } from '../Image/Image';
-export type ImageSliderImageProps = ImageProps;
 export type ImageSliderProps = {
     /** Display buttons to navigate to the previous or next image. */
     controls?: boolean;
     /** Label for the image if you need to translate the alt text. */
     imageLabel?: string;
     /** The set of images to display. */
-    images: ImageSliderImageProps[];
+    images: ImageProps[];
     /** The label for the ‘next’ button */
     nextLabel?: string;
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement>;
-export declare const ImageSliderRoot: import("react").ForwardRefExoticComponent<{
-    /** Display buttons to navigate to the previous or next image. */
-    controls?: boolean;
-    /** Label for the image if you need to translate the alt text. */
-    imageLabel?: string;
-    /** The set of images to display. */
-    images: ImageSliderImageProps[];
-    /** The label for the ‘next’ button */
-    nextLabel?: string;
-    /** 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}
  */
@@ -38,15 +25,9 @@ export declare const ImageSlider: import("react").ForwardRefExoticComponent<{
     /** Label for the image if you need to translate the alt text. */
     imageLabel?: string;
     /** The set of images to display. */
-    images: ImageSliderImageProps[];
+    images: ImageProps[];
     /** The label for the ‘next’ button */
     nextLabel?: string;
     /** The label for the ‘previous’ button */
     previousLabel?: string;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<{
-        slideId: number;
-    } & HTMLAttributes<HTMLDivElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-};
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ImageSlider/ImageSlider.js

@@ -1,97 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
 import { clsx } from 'clsx';
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, 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 { ImageSliderControl } from './ImageSliderControl';
 import { ImageSliderThumbnails } from './ImageSliderThumbnails';
-export const ImageSliderRoot = forwardRef(({ className, controls, imageLabel = 'Afbeelding', images, nextLabel = 'Volgende', previousLabel = 'Vorige', ...restProps }, ref) => {
+import { debounce, scrollToCurrentSlideOnResize, scrollToSlide, setCurrentSlideIdToVisibleSlide } from './utils';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs Image Slider docs at Amsterdam Design System}
+ */
+export const ImageSlider = forwardRef(({ className, controls, imageLabel = 'Afbeelding', images, nextLabel = 'Volgende', previousLabel = 'Vorige', ...restProps }, ref) => {
+    if (images.length === 0)
+        return null;
     const [currentSlideId, setCurrentSlideId] = useState(0);
-    const [isAtStart, setIsAtStart] = useState(true);
-    const [isAtEnd, setIsAtEnd] = useState(false);
-    const targetRef = useRef(null);
-    const observerRef = useRef(null);
-    const inView = useCallback((observations) => {
-        const images = Array.from(targetRef.current?.children || []);
-        observations.forEach((observation) => {
-            if (observation.isIntersecting) {
-                setCurrentSlideId(images.indexOf(observation.target));
-            }
-        });
-    }, []);
-    const observerOptions = useMemo(() => ({
-        root: targetRef.current,
-        threshold: 0.6,
-    }), []);
-    const updateControls = useCallback(() => {
-        const sliderScrollerElement = targetRef.current;
-        if (!sliderScrollerElement)
-            return;
-        const { firstElementChild: firstElement, lastElementChild: lastElement } = sliderScrollerElement;
-        setIsAtStart(firstElement === sliderScrollerElement?.children[currentSlideId]);
-        setIsAtEnd(lastElement === sliderScrollerElement?.children[currentSlideId]);
-    }, [currentSlideId]);
+    const scrollerRef = useRef(null);
+    const isAtStart = currentSlideId === 0;
+    const isAtEnd = currentSlideId === images.length - 1;
     useEffect(() => {
-        if (targetRef.current) {
-            observerRef.current = new IntersectionObserver(inView, observerOptions);
-            const observer = observerRef.current;
-            const slides = Array.from(targetRef.current.children);
-            slides.forEach((slide) => observer.observe(slide));
-            targetRef.current.addEventListener('scrollend', synchronise);
-            updateControls();
-            return () => {
-                slides.forEach((slide) => observer.unobserve(slide));
-                targetRef.current?.removeEventListener('scrollend', synchronise);
-            };
-        }
-        return undefined;
-    }, [inView, observerOptions, updateControls]);
-    const synchronise = useCallback(() => updateControls(), [updateControls]);
-    const goToSlide = useCallback((element) => {
-        const sliderScrollerElement = targetRef.current;
-        if (!sliderScrollerElement || !element)
-            return;
-        sliderScrollerElement.scrollTo({
-            left: element.offsetLeft,
-        });
+        if (!scrollerRef.current)
+            return undefined;
+        const observerOptions = {
+            root: scrollerRef.current,
+            threshold: 0.6,
+        };
+        const observer = new IntersectionObserver((observations) => setCurrentSlideIdToVisibleSlide({ observations, ref: scrollerRef, setCurrentSlideId }), observerOptions);
+        const slides = Array.from(scrollerRef.current.children);
+        slides.forEach((slide) => observer.observe(slide));
+        return () => observer.disconnect();
     }, []);
-    const goToSlideId = useCallback((id) => {
-        const element = targetRef.current?.children[id];
-        if (element)
-            goToSlide(element);
-    }, [goToSlide]);
-    const goToNextSlide = useCallback(() => {
-        const element = targetRef.current?.children[currentSlideId];
-        const nextElement = element?.nextElementSibling;
-        if (nextElement)
-            goToSlide(nextElement);
-    }, [currentSlideId, goToSlide]);
-    const goToPreviousSlide = useCallback(() => {
-        const element = targetRef.current?.children[currentSlideId];
-        const previousElement = element?.previousElementSibling;
-        if (previousElement)
-            goToSlide(previousElement);
-    }, [currentSlideId, goToSlide]);
     useEffect(() => {
-        const handleResize = () => {
-            const sliderScrollerElement = targetRef.current;
-            const currentSlideElement = targetRef.current?.children[currentSlideId];
-            if (!sliderScrollerElement || !currentSlideElement)
-                return;
-            const expectedScrollLeft = currentSlideElement.offsetLeft;
-            if (Math.abs(sliderScrollerElement.scrollLeft - expectedScrollLeft) < 1)
-                return;
-            goToSlide(currentSlideElement);
-        };
+        const handleResize = debounce(() => scrollToCurrentSlideOnResize({ currentSlideId, ref: scrollerRef }), 100);
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
-    }, [currentSlideId, goToSlide]);
-    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 })] }) }));
+    }, [currentSlideId]);
+    return (_jsxs("div", { ...restProps, "aria-roledescription": "carousel", className: clsx('ams-image-slider', 
+        // The 'ams-image-slider--controls' class is @deprecated and will be removed in a future release.
+        controls && 'ams-image-slider--controls', className), ref: ref, children: [controls && (_jsxs("div", { className: "ams-image-slider__controls", children: [_jsx(ImageSliderControl, { disabled: isAtStart, icon: ChevronBackwardIcon, iconOnly: true, onClick: () => scrollToSlide(currentSlideId - 1, scrollerRef), children: previousLabel }), _jsx(ImageSliderControl, { disabled: isAtEnd, icon: ChevronForwardIcon, iconOnly: true, onClick: () => scrollToSlide(currentSlideId + 1, scrollerRef), children: nextLabel })] })), _jsx("div", { "aria-live": "polite", className: "ams-image-slider__scroller", ref: scrollerRef, role: "group", tabIndex: 0, children: images.map(({ alt, aspectRatio, sizes, src, srcSet }, index) => (_jsx(Image, { alt: alt, "aria-hidden": index !== currentSlideId ? true : undefined, aspectRatio: aspectRatio, className: clsx('ams-image-slider__item', 
+                    // The 'ams-image-slider__item--in-view' class is @deprecated and will be removed in a future release.
+                    index === currentSlideId && 'ams-image-slider__item--in-view'), sizes: sizes, src: src, srcSet: srcSet }, `${index}-${src}`))) }), _jsx(ImageSliderThumbnails, { currentSlideId: currentSlideId, imageLabel: imageLabel, scrollToSlide: (id) => scrollToSlide(id, scrollerRef), 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 });
+ImageSlider.displayName = 'ImageSlider';

package/dist/ImageSlider/ImageSliderControl.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from '../Button';
+export declare const ImageSliderControl: ({ icon, ...restProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageSlider/ImageSliderControl.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../Button';
+export const ImageSliderControl = ({ icon, ...restProps }) => {
+    return _jsx(Button, { className: "ams-image-slider__control", color: "inverse", icon: icon, ...restProps });
+};

package/dist/ImageSlider/ImageSliderThumbnails.d.ts

@@ -3,12 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
-import type { ImageSliderImageProps } from './ImageSlider';
+import type { ImageSliderProps } from './ImageSlider';
 export type ImageSliderThumbnailsProps = {
+    currentSlideId: number;
     imageLabel?: string;
-    thumbnails: ImageSliderImageProps[];
+    scrollToSlide: (id: number) => void;
+    thumbnails: ImageSliderProps['images'];
 } & HTMLAttributes<HTMLElement>;
-export declare const ImageSliderThumbnails: import("react").ForwardRefExoticComponent<{
-    imageLabel?: string;
-    thumbnails: ImageSliderImageProps[];
-} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export declare const ImageSliderThumbnails: ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, }: ImageSliderThumbnailsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageSlider/ImageSliderThumbnails.js

@@ -1,28 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-import { forwardRef, useCallback, useContext, useMemo } from 'react';
 import { generateAspectRatioClass } from '../Image/generateAspectRatioClass';
-import { ImageSliderContext } from './ImageSliderContext';
-export const ImageSliderThumbnails = forwardRef(({ className, imageLabel, thumbnails, ...restProps }, ref) => {
-    const { currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId } = useContext(ImageSliderContext);
-    const handleKeyDown = useCallback((event) => {
+export const ImageSliderThumbnails = ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, }) => {
+    const handleKeyDown = (event) => {
         const element = event.currentTarget.children[currentSlideId];
         if (event.key === 'ArrowRight') {
             const nextElement = element?.nextElementSibling;
             if (nextElement) {
                 nextElement.focus();
-                goToNextSlide();
+                scrollToSlide(currentSlideId + 1);
             }
         }
         if (event.key === 'ArrowLeft') {
             const previousElement = element?.previousElementSibling;
             if (previousElement) {
                 previousElement.focus();
-                goToPreviousSlide();
+                scrollToSlide(currentSlideId - 1);
             }
         }
-    }, [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, 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';
+    };
+    return (_jsx("nav", { className: "ams-image-slider__thumbnails", onKeyDown: handleKeyDown, role: "tablist", children: 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: () => scrollToSlide(index), role: "tab", style: { backgroundImage: `url(${src})` }, tabIndex: currentSlideId === index ? 0 : -1, type: "button" }, `${index}-${src}`))) }));
+};

package/dist/ImageSlider/index.d.ts

@@ -4,4 +4,3 @@
  */
 export { ImageSlider } from './ImageSlider';
 export type { ImageSliderProps } from './ImageSlider';
-export type { ImageSliderItemProps } from './ImageSliderItem';

package/dist/ImageSlider/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<F extends (...args: unknown[]) => void>(fn: F, delay: number): (...args: Parameters<F>) => void;

package/dist/ImageSlider/utils/debounce.js

@@ -0,0 +1,8 @@
+export function debounce(fn, delay) {
+    let timer = null;
+    return function (...args) {
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(() => fn.apply(this, args), delay);
+    };
+}

package/dist/ImageSlider/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { debounce } from './debounce';
+export { scrollToCurrentSlideOnResize } from './scrollToCurrentSlideOnResize';
+export { scrollToSlide } from './scrollToSlide';
+export { setCurrentSlideIdToVisibleSlide } from './setCurrentSlideIdToVisibleSlide';

package/dist/ImageSlider/utils/index.js

@@ -0,0 +1,4 @@
+export { debounce } from './debounce';
+export { scrollToCurrentSlideOnResize } from './scrollToCurrentSlideOnResize';
+export { scrollToSlide } from './scrollToSlide';
+export { setCurrentSlideIdToVisibleSlide } from './setCurrentSlideIdToVisibleSlide';

package/dist/ImageSlider/utils/scrollToCurrentSlideOnResize.d.ts

@@ -0,0 +1,7 @@
+import type { RefObject } from 'react';
+type Args = {
+    currentSlideId: number;
+    ref: RefObject<HTMLDivElement>;
+};
+export declare const scrollToCurrentSlideOnResize: ({ currentSlideId, ref }: Args) => void;
+export {};

package/dist/ImageSlider/utils/scrollToCurrentSlideOnResize.js

@@ -0,0 +1,11 @@
+import { scrollToSlide } from './scrollToSlide';
+export const scrollToCurrentSlideOnResize = ({ currentSlideId, ref }) => {
+    const scrollerElement = ref.current;
+    const currentSlideElement = ref.current?.children[currentSlideId];
+    if (!scrollerElement || !currentSlideElement)
+        return;
+    const expectedScrollLeft = currentSlideElement.offsetLeft;
+    if (Math.abs(scrollerElement.scrollLeft - expectedScrollLeft) < 1)
+        return;
+    scrollToSlide(currentSlideId, ref);
+};

package/dist/ImageSlider/utils/scrollToSlide.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const scrollToSlide: (id: number, ref: RefObject<HTMLDivElement>) => void;

package/dist/ImageSlider/utils/scrollToSlide.js

@@ -0,0 +1,9 @@
+export const scrollToSlide = (id, ref) => {
+    const element = ref.current?.children[id];
+    const scrollerElement = ref.current;
+    if (!element || !scrollerElement)
+        return;
+    scrollerElement.scrollTo({
+        left: element.offsetLeft,
+    });
+};

package/dist/ImageSlider/utils/setCurrentSlideIdToVisibleSlide.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+type Args = {
+    observations: IntersectionObserverEntry[];
+    ref: RefObject<HTMLDivElement>;
+    setCurrentSlideId: (id: number) => void;
+};
+export declare const setCurrentSlideIdToVisibleSlide: ({ observations, ref, setCurrentSlideId }: Args) => void;
+export {};

package/dist/ImageSlider/utils/setCurrentSlideIdToVisibleSlide.js

@@ -0,0 +1,10 @@
+export const setCurrentSlideIdToVisibleSlide = ({ observations, ref, setCurrentSlideId }) => {
+    const images = Array.from(ref.current?.children || []);
+    if (images.length === 0)
+        return;
+    observations.forEach((observation) => {
+        if (observation.isIntersecting) {
+            setCurrentSlideId(images.indexOf(observation.target));
+        }
+    });
+};

package/dist/PageHeader/PageHeader.d.ts

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import type { IconProps } from '../Icon';
 import type { LogoBrand } from '../Logo';
 import type { LogoBrandConfig } from '../Logo/Logo';
 export type PageHeaderProps = {
@@ -18,6 +19,8 @@ export type PageHeaderProps = {
     logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
+    /** An icon to display instead of the default icon. */
+    menuButtonIcon?: IconProps['svg'];
     /** The visible text for the menu button. */
     menuButtonText?: string;
     /** The text for screen readers when the button hides the menu. */
@@ -47,6 +50,8 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
+    /** An icon to display instead of the default icon. */
+    menuButtonIcon?: IconProps["svg"];
     /** The visible text for the menu button. */
     menuButtonText?: string;
     /** The text for screen readers when the button hides the menu. */
@@ -63,7 +68,7 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
     MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
-        icon?: import("../Icon").IconProps["svg"];
+        icon?: IconProps["svg"];
     } & AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeader.js

@@ -8,7 +8,7 @@ import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWi
 import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
 import { PageHeaderMenuLink } from './PageHeaderMenuLink';
 const LogoLinkContent = ({ brandName, logoAccessibleName, logoBrand, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { "aria-label": logoAccessibleName, brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
-const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle = `Ga naar de homepage${brandName ? ` van ${brandName}` : ''}`, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle = `Ga naar de homepage${brandName ? ` van ${brandName}` : ''}`, menuButtonIcon, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
     const Link = logoLinkComponent;
     const hasMegaMenu = Boolean(children);
@@ -20,7 +20,7 @@ const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessi
         }
     }, [isWideWindow]);
     return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(Link, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { brandName: brandName, logoAccessibleName: logoAccessibleName, logoBrand: logoBrand }), _jsx("span", { className: "ams-visually-hidden", children: ` ${logoLinkTitle}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
-                                : true, children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { className: "ams-visually-hidden", children: open ? menuButtonTextForHide : menuButtonTextForShow }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
+                                : true, children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { className: "ams-visually-hidden", children: open ? menuButtonTextForHide : menuButtonTextForShow }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: menuButtonIcon ?? (_jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') })) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
 });
 PageHeaderRoot.displayName = 'PageHeader';
 /**

package/dist/ProgressList/ProgressList.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const progressListHeadingSizes: (2 | 3 | 4)[];
+type ProgressListHeadingSize = (typeof progressListHeadingSizes)[number];
+export type ProgressListProps = {
+    /**
+     * The hierarchical level of this Progress List’s Headings within the document.
+     * There is no default value; determine the correct level for this instance.
+     */
+    headingLevel: ProgressListHeadingSize;
+} & PropsWithChildren<HTMLAttributes<HTMLOListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-progress-list--docs Progress List docs at Amsterdam Design System}
+ */
+export declare const ProgressList: import("react").ForwardRefExoticComponent<{
+    /**
+     * The hierarchical level of this Progress List’s Headings within the document.
+     * There is no default value; determine the correct level for this instance.
+     */
+    headingLevel: ProgressListHeadingSize;
+} & HTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>> & {
+    Step: import("react").ForwardRefExoticComponent<{
+        hasSubsteps?: boolean;
+        heading: string;
+        status?: "current" | "completed";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+    Substep: import("react").ForwardRefExoticComponent<{
+        status?: import("./ProgressListStep").ProgressListStepProps["status"];
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+    Substeps: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLOListElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLOListElement>>;
+};
+export {};

package/dist/ProgressList/ProgressList.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { headingSizes } from '../Heading/Heading';
+import { ProgressListContext } from './ProgressListContext';
+import { ProgressListStep } from './ProgressListStep';
+import { ProgressListSubstep } from './ProgressListSubstep';
+import { ProgressListSubsteps } from './ProgressListSubsteps';
+export const progressListHeadingSizes = headingSizes.filter((size) => size !== 1);
+const ProgressListRoot = forwardRef(({ children, className, headingLevel, ...restProps }, ref) => (_jsx(ProgressListContext.Provider, { value: { headingLevel: headingLevel }, children: _jsx("ol", { ...restProps, className: clsx('ams-progress-list', `ams-progress-list--heading-${headingLevel}`, className), ref: ref, children: children }) })));
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-progress-list--docs Progress List docs at Amsterdam Design System}
+ */
+export const ProgressList = Object.assign(ProgressListRoot, {
+    Step: ProgressListStep,
+    Substep: ProgressListSubstep,
+    Substeps: ProgressListSubsteps,
+});
+ProgressListRoot.displayName = 'ProgressList';

package/dist/ProgressList/ProgressListContext.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ProgressListProps } from './ProgressList';
+type ProgressListContextValue = {
+    headingLevel: ProgressListProps['headingLevel'];
+};
+export declare const ProgressListContext: import("react").Context<ProgressListContextValue>;
+export {};

package/dist/ProgressList/ProgressListContext.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { createContext } from 'react';
+const defaultValues = {
+    // Default value for type safety.
+    // The actual value is always provided via ProgressList’s required headingLevel prop.
+    headingLevel: 2,
+};
+export const ProgressListContext = createContext(defaultValues);