@amsterdam/design-system-react 3.1.0 → 3.2.1

package/dist/Accordion/Accordion.js

@@ -4,7 +4,7 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useKeyboardFocus } from '../common/useKeyboardFocus';
 import { AccordionContext } from './AccordionContext';
 import { AccordionSection } from './AccordionSection';
-const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs = 'section' }, ref) => {
+const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs = 'section', ...restProps }, ref) => {
     const innerRef = useRef(null);
     // use a passed ref if it's there, otherwise use innerRef
     useImperativeHandle(ref, () => innerRef.current);
@@ -12,7 +12,7 @@ const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs
         focusableElements: ['.ams-accordion__button:not([disabled])'],
         rotating: true,
     });
-    return (_jsx(AccordionContext.Provider, { value: { headingLevel: headingLevel, sectionAs: sectionAs }, children: _jsx("div", { className: clsx('ams-accordion', className), onKeyDown: keyDown, ref: innerRef, children: children }) }));
+    return (_jsx(AccordionContext.Provider, { value: { headingLevel: headingLevel, sectionAs: sectionAs }, children: _jsx("div", { ...restProps, className: clsx('ams-accordion', className), onKeyDown: keyDown, ref: innerRef, children: children }) }));
 });
 AccordionRoot.displayName = 'Accordion';
 /**

package/dist/ErrorMessage/ErrorMessage.js

@@ -6,5 +6,5 @@ import { Icon } from '../Icon';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
  */
-export const ErrorMessage = forwardRef(({ children, className, icon = WarningIcon, prefix = 'Invoerfout', ...restProps }, ref) => (_jsxs("p", { ...restProps, className: clsx('ams-error-message', className), ref: ref, children: [_jsx(Icon, { svg: icon }), _jsx("span", { className: "ams-visually-hidden", children: `${prefix}: ` }), children] })));
+export const ErrorMessage = forwardRef(({ children, className, icon = WarningIcon, prefix = 'Invoerfout', ...restProps }, ref) => (_jsxs("p", { ...restProps, className: clsx('ams-error-message', className), ref: ref, children: [_jsx(Icon, { svg: icon }), prefix && _jsx("span", { className: "ams-visually-hidden", children: `${prefix}: ` }), children] })));
 ErrorMessage.displayName = 'ErrorMessage';

package/dist/Heading/Heading.d.ts

@@ -4,13 +4,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const headingSizes: readonly [1, 2, 3, 4];
-type HeadingSize = (typeof headingSizes)[number];
+export declare const headingLevels: readonly [1, 2, 3, 4];
+type HeadingLevel = (typeof headingLevels)[number];
 export type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The hierarchical level within the document. */
-    level: HeadingSize;
+    level: HeadingLevel;
     /**
      * Uses larger or smaller text without changing its position in the heading hierarchy.
      * The value ‘level-6’ is deprecated. Use level 5 instead.
@@ -24,7 +24,7 @@ export declare const Heading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The hierarchical level within the document. */
-    level: HeadingSize;
+    level: HeadingLevel;
     /**
      * Uses larger or smaller text without changing its position in the heading hierarchy.
      * The value ‘level-6’ is deprecated. Use level 5 instead.

package/dist/Heading/Heading.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { getHeadingTag } from './getHeadingTag';
-export const headingSizes = [1, 2, 3, 4];
+export const headingLevels = [1, 2, 3, 4];
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
  */

package/dist/ImageSlider/ImageSlider.d.ts

@@ -4,13 +4,17 @@
  */
 import type { HTMLAttributes } from 'react';
 import type { ImageProps } from '../Image/Image';
+export type ImageSliderImageProps = {
+    /** An optional caption displayed below the image. */
+    caption?: string;
+} & 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: ImageProps[];
+    images: ImageSliderImageProps[];
     /** The label for the ‘next’ button */
     nextLabel?: string;
     /** The label for the ‘previous’ button */
@@ -25,7 +29,7 @@ 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: ImageProps[];
+    images: ImageSliderImageProps[];
     /** The label for the ‘next’ button */
     nextLabel?: string;
     /** The label for the ‘previous’ button */

package/dist/ImageSlider/ImageSlider.js

@@ -2,8 +2,8 @@ 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, useEffect, useRef, useState } from 'react';
-import { Image } from '../Image/Image';
 import { ImageSliderControl } from './ImageSliderControl';
+import { ImageSliderSlide } from './ImageSliderSlide';
 import { ImageSliderThumbnails } from './ImageSliderThumbnails';
 import { debounce, scrollToCurrentSlideOnResize, scrollToSlide, setCurrentSlideIdToVisibleSlide } from './utils';
 /**
@@ -35,8 +35,6 @@ export const ImageSlider = forwardRef(({ className, controls, imageLabel = 'Afbe
     }, [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 })] }));
+        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((image, index) => (_jsx(ImageSliderSlide, { ...image, currentSlideId: currentSlideId, index: index }, `${index}-${image.src}`))) }), _jsx(ImageSliderThumbnails, { currentSlideId: currentSlideId, imageLabel: imageLabel, scrollToSlide: (id) => scrollToSlide(id, scrollerRef), thumbnails: images })] }));
 });
 ImageSlider.displayName = 'ImageSlider';

package/dist/ImageSlider/ImageSliderSlide.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ImageSliderImageProps } from './ImageSlider';
+type ImageSliderSlideProps = {
+    currentSlideId: number;
+    index: number;
+} & ImageSliderImageProps;
+export declare const ImageSliderSlide: {
+    ({ alt, aspectRatio, caption, className, currentSlideId, index, sizes, src, srcSet, ...restProps }: ImageSliderSlideProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ImageSlider/ImageSliderSlide.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { clsx } from 'clsx';
+import { Figure } from '../Figure/Figure';
+import { Image } from '../Image/Image';
+export const ImageSliderSlide = ({ alt, aspectRatio, caption, className, currentSlideId, index, sizes, src, srcSet, ...restProps }) => {
+    const isCurrentSlide = index === currentSlideId;
+    const slideProps = {
+        'aria-hidden': isCurrentSlide ? undefined : true,
+        // The `ams-image-slider__item` and `ams-image-slider__item--in-view` classes are @deprecated and will be removed in a future release.
+        className: clsx('ams-image-slider__slide ams-image-slider__item', isCurrentSlide && 'ams-image-slider__item--in-view', className),
+    };
+    const imageProps = { alt, aspectRatio, sizes, src, srcSet };
+    return caption ? (_jsxs(Figure, { ...restProps, ...slideProps, className: clsx(slideProps.className, 'ams-image-slider__figure'), children: [_jsx(Image, { ...imageProps }), _jsx(Figure.Caption, { className: "ams-image-slider__caption", children: caption })] })) : (_jsx(Image, { ...restProps, ...imageProps, ...slideProps }));
+};
+ImageSliderSlide.displayName = 'ImageSliderSlide';

package/dist/ImageSlider/ImageSliderThumbnails.d.ts

@@ -10,4 +10,4 @@ export type ImageSliderThumbnailsProps = {
     scrollToSlide: (id: number) => void;
     thumbnails: ImageSliderProps['images'];
 } & HTMLAttributes<HTMLElement>;
-export declare const ImageSliderThumbnails: ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, }: ImageSliderThumbnailsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageSliderThumbnails: ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, ...restProps }: ImageSliderThumbnailsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageSlider/ImageSliderThumbnails.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { generateAspectRatioClass } from '../Image/generateAspectRatioClass';
-export const ImageSliderThumbnails = ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, }) => {
+export const ImageSliderThumbnails = ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, ...restProps }) => {
     const handleKeyDown = (event) => {
         const element = event.currentTarget.children[currentSlideId];
         if (event.key === 'ArrowRight') {
@@ -19,5 +19,5 @@ export const ImageSliderThumbnails = ({ currentSlideId, imageLabel, scrollToSlid
             }
         }
     };
-    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}`))) }));
+    return (_jsx("nav", { ...restProps, 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/Logo/Logo.d.ts

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { ComponentType, SVGProps } from 'react';
-export declare const logoBrands: readonly ["amsterdam", "ggd-amsterdam", "museum-weesp", "stadsarchief", "stadsbank-van-lening", "vga-verzekeringen"];
+export declare const logoBrands: readonly ["amsterdam", "amsterdam-english", "ggd-amsterdam", "museum-weesp", "stadsarchief", "stadsbank-van-lening", "vga-verzekeringen"];
 export type LogoBrand = (typeof logoBrands)[number];
 export type LogoProps = {
     /** The name of the brand for which to display the logo, or configuration for a custom logo. */

package/dist/Logo/Logo.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { LogoAmsterdam, LogoGgdAmsterdam, LogoMuseumWeesp, LogoStadsarchief, LogoStadsbankVanLening, LogoVgaVerzekeringen, } from './brand';
+import { LogoAmsterdam, LogoAmsterdamEnglish, LogoGgdAmsterdam, LogoMuseumWeesp, LogoStadsarchief, LogoStadsbankVanLening, LogoVgaVerzekeringen, } from './brand';
 export const logoBrands = [
     'amsterdam',
+    'amsterdam-english',
     'ggd-amsterdam',
     'museum-weesp',
     'stadsarchief',
@@ -15,6 +16,10 @@ const logoConfig = {
         label: 'Gemeente Amsterdam logo',
         svg: LogoAmsterdam,
     },
+    'amsterdam-english': {
+        label: 'City of Amsterdam logo',
+        svg: LogoAmsterdamEnglish,
+    },
     'ggd-amsterdam': {
         label: 'GGD Amsterdam logo',
         svg: LogoGgdAmsterdam,

package/dist/Logo/brand/LogoAmsterdamEnglish.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { SVGProps } from 'react';
+declare const LogoAmsterdamEnglish: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default LogoAmsterdamEnglish;

package/dist/Logo/brand/LogoAmsterdamEnglish.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const LogoAmsterdamEnglish = forwardRef((props, ref) => (_jsxs("svg", { className: "ams-logo", focusable: "false", height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    , ref: ref, role: "img", viewBox: "0 0 115 40", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { className: "ams-logo__emblem", d: "m0 37.683 3.532-3.532L0 30.62l2.355-2.355 3.532 3.532 3.532-3.532 2.355 2.355-3.532 3.532 3.532 3.532L9.419 40l-3.532-3.532-3.532 3.532zM0 9.406l3.532-3.532-3.532-3.532L2.355-0.013l3.532 3.532 3.532-3.532 2.355 2.354-3.532 3.532 3.532 3.532-2.355 2.355-3.532-3.532L2.355 11.76zM0 23.557l3.532-3.532L0 16.493l2.355-2.355 3.532 3.532 3.532-3.532 2.355 2.355-3.532 3.532 3.532 3.532-2.355 2.355-3.532-3.532L2.355 25.911z", fill: "#EC0000" }), _jsx("path", { className: "ams-logo__text-primary", d: "M16.456 8.579c0-3.795 2.613-6.408 6.389-6.408 1.812 0 3.376 0.648 4.558 1.869l-1.659 1.602c-0.706-0.801-1.717-1.24-2.88-1.24-2.251 0-3.815 1.717-3.815 4.196 0 2.46 1.583 4.196 3.834 4.196 1.183 0 2.27-0.458 2.956-1.24l1.64 1.583c-1.125 1.221-2.746 1.888-4.616 1.888-3.776 0-6.408-2.632-6.408-6.447M30.455 4.174c-0.82 0-1.411-0.572-1.411-1.373s0.591-1.373 1.411-1.373c0.82 0 1.411 0.572 1.411 1.373s-0.591 1.373-1.411 1.373m-1.183 1.202h2.365V14.797h-2.365zM34.803 11.421V7.34h-1.621v-1.965h0.858c0.782 0 1.087-0.305 1.087-1.087V2.819h2.022v2.556h2.289v1.965h-2.289v4.082c0 0.915 0.477 1.43 1.354 1.43 0.267 0 0.591-0.038 0.782-0.095v1.984c-0.286 0.076-0.82 0.133-1.24 0.133-2.136 0-3.242-1.182-3.242-3.452M40.983 17.048l1.488-1.488c0.534 0.629 1.335 0.954 2.346 0.954 1.392 0 2.213-0.801 2.213-2.155v-1.411h-0.038c-0.42 0.935-1.278 1.507-2.327 1.507-2.308 0-3.49-1.335-3.49-3.948V5.375h2.365v4.692c0 1.583 0.553 2.327 1.698 2.327 1.163 0 1.812-0.858 1.812-2.384V5.375h2.365V14.454c0 2.518-1.774 4.101-4.558 4.101-1.717 0-3.033-0.515-3.872-1.507M56.126 10.086c0-2.88 2.098-4.94 5.016-4.94 2.918 0 5.016 2.06 5.016 4.94S64.06 15.026 61.142 15.026c-2.918 0-5.016-2.06-5.016-4.94m5.016 2.88c1.526 0 2.594-1.182 2.594-2.88s-1.068-2.88-2.594-2.88c-1.526 0-2.594 1.183-2.594 2.88s1.068 2.88 2.594 2.88M68.676 7.34h-1.602v-1.965h1.602v-1.221c0-2.155 1.278-3.414 3.471-3.414 0.267 0 0.668 0.038 0.877 0.076v2.041c-0.229-0.057-0.553-0.095-0.82-0.095-0.744 0-1.163 0.496-1.163 1.392v1.221h2.289v1.965h-2.289v7.457h-2.365zM20.9 25.287h2.861l4.959 12.397h-2.651l-1.03-2.727H19.527l-1.03 2.727h-2.556zm-0.629 7.61h4.005l-1.984-5.226h-0.038zM30.284 28.262h2.212v1.278h0.038c0.477-0.973 1.316-1.507 2.403-1.507 1.221 0 2.136 0.534 2.708 1.602 0.572-1.03 1.621-1.602 2.956-1.602 2.327 0 3.452 1.297 3.452 3.948v5.703h-2.365v-5.302c0-1.545-0.534-2.289-1.64-2.289-1.106 0-1.697 0.82-1.697 2.365v5.226h-2.365v-5.302c0-1.564-0.515-2.289-1.64-2.289-1.087 0-1.697 0.839-1.697 2.365v5.226h-2.365zM48.402 33.736c-1.278-0.381-2.518-1.068-2.518-2.785 0-1.736 1.45-2.918 3.605-2.918 1.449 0 2.575 0.515 3.204 1.469l-1.354 1.354c-0.477-0.591-1.125-0.916-1.831-0.916-0.801 0-1.297 0.362-1.297 0.935 0 0.763 0.801 0.896 1.965 1.259 1.278 0.381 2.518 1.068 2.518 2.785 0 1.774-1.526 2.994-3.776 2.994-1.469 0-2.651-0.515-3.338-1.488l1.354-1.354c0.515 0.61 1.202 0.935 1.965 0.935 0.916 0 1.469-0.382 1.469-1.011 0-0.763-0.801-0.896-1.965-1.259M55.192 34.308v-4.082h-1.621v-1.965h0.858c0.782 0 1.087-0.305 1.087-1.087v-1.469h2.022v2.556h2.289v1.965h-2.289v4.082c0 0.916 0.477 1.43 1.354 1.43 0.267 0 0.591-0.038 0.782-0.095v1.984c-0.286 0.076-0.82 0.134-1.24 0.134-2.136 0-3.242-1.183-3.242-3.452M60.99 32.973c0-2.918 1.964-4.94 4.768-4.94s4.749 2.003 4.749 4.883c0 0.229-0.038 0.591-0.076 0.839h-7.057c0.172 1.278 1.259 2.136 2.651 2.136 1.03 0 1.926-0.381 2.518-1.068l1.43 1.392c-0.858 1.106-2.346 1.698-4.063 1.698-2.899 0-4.921-2.041-4.921-4.94m2.384-0.954h4.749c-0.153-1.24-1.106-2.079-2.384-2.079-1.278 0-2.231 0.839-2.365 2.079M72.472 28.262h2.231v1.564h0.038c0.458-1.068 1.297-1.64 2.403-1.64 0.286 0 0.687 0.038 0.839 0.095v2.251c-0.267-0.076-0.782-0.133-1.163-0.133-1.202 0-1.984 0.916-1.984 2.327v4.959h-2.365zM78.651 33.011c0-2.918 1.926-4.978 4.654-4.978 1.259 0 2.289 0.553 2.937 1.564h0.038V23.856h2.365v13.828h-2.232v-1.469h-0.038c-0.61 1.068-1.755 1.698-3.071 1.698-2.727 0-4.654-2.041-4.654-4.902m7.629-0.038c0-1.697-1.049-2.823-2.594-2.823-1.564 0-2.613 1.144-2.613 2.823s1.049 2.823 2.613 2.823c1.545 0 2.594-1.125 2.594-2.823M90.457 34.995c0-1.812 1.507-2.899 4.024-2.918l1.831-0.019v-0.305c0-1.106-0.706-1.678-1.984-1.678-0.839 0-1.583 0.324-2.098 0.915l-1.43-1.392c0.82-1.011 2.136-1.564 3.757-1.564 2.518 0 4.12 1.373 4.12 3.567v3.738c0 0.343 0.153 0.496 0.534 0.496h0.172v1.85h-1.106c-0.896 0-1.507-0.42-1.697-1.106h-0.038c-0.591 0.858-1.564 1.335-2.746 1.335-1.984 0-3.338-1.183-3.338-2.918m5.855-0.82v-0.534l-1.564 0.019c-1.24 0.019-1.907 0.458-1.907 1.278 0 0.725 0.572 1.24 1.373 1.24 1.24 0 2.098-0.82 2.098-2.003M101.233 28.262h2.212v1.278h0.038c0.477-0.973 1.316-1.507 2.403-1.507 1.221 0 2.136 0.534 2.708 1.602 0.572-1.03 1.621-1.602 2.956-1.602 2.327 0 3.452 1.297 3.452 3.948v5.703h-2.365v-5.302c0-1.545-0.534-2.289-1.64-2.289-1.106 0-1.698 0.82-1.698 2.365v5.226h-2.365v-5.302c0-1.564-0.515-2.289-1.64-2.289-1.087 0-1.697 0.839-1.697 2.365v5.226h-2.365z", fill: "#EC0000" })] })));
+LogoAmsterdamEnglish.displayName = 'LogoAmsterdamEnglish';
+export default LogoAmsterdamEnglish;

package/dist/Logo/brand/index.d.ts

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 export { default as LogoAmsterdam } from './LogoAmsterdam';
+export { default as LogoAmsterdamEnglish } from './LogoAmsterdamEnglish';
 export { default as LogoGgdAmsterdam } from './LogoGgdAmsterdam';
 export { default as LogoMuseumWeesp } from './LogoMuseumWeesp';
 export { default as LogoStadsarchief } from './LogoStadsarchief';

package/dist/Logo/brand/index.js

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 export { default as LogoAmsterdam } from './LogoAmsterdam';
+export { default as LogoAmsterdamEnglish } from './LogoAmsterdamEnglish';
 export { default as LogoGgdAmsterdam } from './LogoGgdAmsterdam';
 export { default as LogoMuseumWeesp } from './LogoMuseumWeesp';
 export { default as LogoStadsarchief } from './LogoStadsarchief';

package/dist/Menu/Menu.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import { MenuLink } from './MenuLink';
 export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, inWideWindow, ...restProps }, ref) => {
     // In a medium or narrow window, the Menu is a child of the `nav` of Page Header.
     // In a wide window, we render a `nav` element and the related accessibility features.
     const Tag = inWideWindow ? 'nav' : 'div';
-    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? 'primary-navigation' : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
+    const accessibleLabelId = useId();
+    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? accessibleLabelId : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: accessibleLabelId, children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
 });
 MenuRoot.displayName = 'Menu';
 /**

package/dist/PageHeader/LogoLinkContent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { PageHeaderProps } from './PageHeader';
+type LogoLinkContentProps = {
+    brandNameFullOrShort?: PageHeaderProps['brandName'] | PageHeaderProps['brandNameShort'];
+    brandNameShort?: PageHeaderProps['brandNameShort'];
+    logoAccessibleName?: PageHeaderProps['logoAccessibleName'];
+    logoBrand: PageHeaderProps['logoBrand'];
+};
+export declare const LogoLinkContent: ({ brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand, }: LogoLinkContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/PageHeader/LogoLinkContent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { clsx } from 'clsx';
+import { Logo } from '../Logo';
+export const LogoLinkContent = ({ brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && brandNameFullOrShort && 'ams-page-header__logo-container'), children: _jsx(Logo, { "aria-label": logoAccessibleName, brand: logoBrand }) }), brandNameShort && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name-short", children: brandNameShort })), brandNameFullOrShort && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandNameFullOrShort }))] }));

package/dist/PageHeader/PageHeader.d.ts

@@ -9,6 +9,11 @@ import type { LogoBrandConfig } from '../Logo/Logo';
 export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
+    /**
+     * A shorter form of the name of the application.
+     * Provide this only together with a `brandName`.
+     */
+    brandNameShort?: string;
     /** The accessible name of the logo. */
     logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
@@ -40,6 +45,11 @@ export type PageHeaderProps = {
 export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
+    /**
+     * A shorter form of the name of the application.
+     * Provide this only together with a `brandName`.
+     */
+    brandNameShort?: string;
     /** The accessible name of the logo. */
     logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */

package/dist/PageHeader/PageHeader.js

@@ -1,26 +1,30 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-import { forwardRef, useEffect, useState } from 'react';
-import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
+import { forwardRef, useEffect, useId, useState } from 'react';
+import useViewportHasMinWidth from '../common/useViewportHasMinWidth';
 import { Icon } from '../Icon';
-import { Logo } from '../Logo';
+import { LogoLinkContent } from './LogoLinkContent';
 import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
 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}` : ''}`, menuButtonIcon, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+const PageHeaderRoot = forwardRef(({ brandName, brandNameShort, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle, 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 viewportHasMinWidth = useViewportHasMinWidth('wide');
+    const accessibleLabelId = useId();
     const hasMegaMenu = Boolean(children);
-    const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
+    const hasMegaMenuOnWideWindow = hasMegaMenu && viewportHasMinWidth;
+    const LogoLink = logoLinkComponent;
+    // Use short brand name if no full brand name is (invalidly) provided
+    const brandNameFullOrShort = brandName || brandNameShort;
+    const logoLinkContentProps = { brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand };
     useEffect(() => {
         // Close the menu when the menu button disappears
-        if (noMenuButtonOnWideWindow && isWideWindow) {
+        if (noMenuButtonOnWideWindow && hasMegaMenuOnWideWindow) {
             setOpen(false);
         }
-    }, [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: 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 }))] }))] }));
+    }, [hasMegaMenuOnWideWindow, noMenuButtonOnWideWindow]);
+    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(LogoLink, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { ...logoLinkContentProps }), _jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle ?? `Ga naar de homepage${brandNameFullOrShort ? ' van ' + brandNameFullOrShort : ''}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": accessibleLabelId, className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: accessibleLabelId, children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { ...logoLinkContentProps, logoAccessibleName: undefined }) }), _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(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/AccessibleStatusText.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ProgressListStepProps } from './ProgressListStep';
+type AccessibleStatusTextProps = {
+    status?: ProgressListStepProps['status'];
+};
+export declare const AccessibleStatusText: ({ status }: AccessibleStatusTextProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/ProgressList/AccessibleStatusText.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { useContext } from 'react';
+import { ProgressListContext } from './ProgressListContext';
+export const AccessibleStatusText = ({ status }) => {
+    const { completedAccessibleText, currentAccessibleText } = useContext(ProgressListContext);
+    if (!status)
+        return null;
+    return (_jsxs("span", { className: "ams-visually-hidden", children: [status === 'completed' && completedAccessibleText && `${completedAccessibleText}: `, status === 'current' && currentAccessibleText && `${currentAccessibleText}: `] }));
+};

package/dist/ProgressList/ProgressList.d.ts

@@ -3,24 +3,44 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const progressListHeadingSizes: (2 | 3 | 4)[];
-type ProgressListHeadingSize = (typeof progressListHeadingSizes)[number];
+export declare const progressListHeadingLevels: (2 | 3 | 4)[];
+type ProgressListHeadingLevel = (typeof progressListHeadingLevels)[number];
 export type ProgressListProps = {
+    /**
+     * An accessible phrase that screen readers announce before a completed step heading.
+     * @default Klaar
+     */
+    completedAccessibleText?: string;
+    /**
+     * An accessible phrase that screen readers announce before a current step heading.
+     * @default Bezig
+     */
+    currentAccessibleText?: string;
     /**
      * 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;
+    headingLevel: ProgressListHeadingLevel;
 } & 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<{
+    /**
+     * An accessible phrase that screen readers announce before a completed step heading.
+     * @default Klaar
+     */
+    completedAccessibleText?: string;
+    /**
+     * An accessible phrase that screen readers announce before a current step heading.
+     * @default Bezig
+     */
+    currentAccessibleText?: string;
     /**
      * 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;
+    headingLevel: ProgressListHeadingLevel;
 } & HTMLAttributes<HTMLOListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {

package/dist/ProgressList/ProgressList.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { headingSizes } from '../Heading/Heading';
+import { headingLevels } 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 }) })));
+export const progressListHeadingLevels = headingLevels.filter((level) => level !== 1);
+const ProgressListRoot = forwardRef(({ children, className, completedAccessibleText, currentAccessibleText, headingLevel, ...restProps }, ref) => (_jsx(ProgressListContext.Provider, { value: {
+        completedAccessibleText: completedAccessibleText ?? 'Klaar',
+        currentAccessibleText: currentAccessibleText ?? 'Bezig',
+        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}
  */

package/dist/ProgressList/ProgressListContext.d.ts

@@ -4,6 +4,8 @@
  */
 import type { ProgressListProps } from './ProgressList';
 type ProgressListContextValue = {
+    completedAccessibleText?: ProgressListProps['completedAccessibleText'];
+    currentAccessibleText?: ProgressListProps['currentAccessibleText'];
     headingLevel: ProgressListProps['headingLevel'];
 };
 export declare const ProgressListContext: import("react").Context<ProgressListContextValue>;

package/dist/ProgressList/ProgressListStep.js

@@ -4,9 +4,10 @@ import { clsx } from 'clsx';
 import { forwardRef, useContext } from 'react';
 import { Heading } from '../Heading';
 import { Icon } from '../Icon';
+import { AccessibleStatusText } from './AccessibleStatusText';
 import { ProgressListContext } from './ProgressListContext';
 export const ProgressListStep = forwardRef(({ children, className, hasSubsteps, heading, status, ...restProps }, ref) => {
     const { headingLevel } = useContext(ProgressListContext);
-    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx(className, 'ams-progress-list__step', hasSubsteps && 'ams-progress-list__step--has-substeps', status && `ams-progress-list__step--${status}`), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list__indicator", children: [_jsx("div", { className: "ams-progress-list__marker", children: _jsx("span", { className: "ams-progress-list__marker-shape", children: status === 'current' && _jsx(Icon, { color: "inverse", svg: ArrowForwardIcon }) }) }), _jsx("span", { className: "ams-progress-list__connector" })] }), _jsxs("div", { className: "ams-progress-list__content", children: [_jsx(Heading, { className: "ams-progress-list__heading", level: headingLevel, children: heading }), children] })] }));
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx(className, 'ams-progress-list__step', hasSubsteps && 'ams-progress-list__step--has-substeps', status && `ams-progress-list__step--${status}`), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list__indicator", children: [_jsx("div", { className: "ams-progress-list__marker", children: _jsx("span", { className: "ams-progress-list__marker-shape", children: status === 'current' && _jsx(Icon, { color: "inverse", svg: ArrowForwardIcon }) }) }), _jsx("span", { className: "ams-progress-list__connector" })] }), _jsxs("div", { className: "ams-progress-list__content", children: [_jsxs(Heading, { className: "ams-progress-list__heading", level: headingLevel, children: [_jsx(AccessibleStatusText, { status: status }), heading] }), children] })] }));
 });
 ProgressListStep.displayName = 'ProgressList.Step';

package/dist/ProgressList/ProgressListSubstep.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { AccessibleStatusText } from './AccessibleStatusText';
 export const ProgressListSubstep = forwardRef(({ children, className, status, ...restProps }, ref) => {
-    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx('ams-progress-list-substeps__step', status && `ams-progress-list-substeps__step--${status}`, className), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list-substeps__indicator", children: [_jsx("div", { className: "ams-progress-list-substeps__marker", children: _jsx("span", { className: "ams-progress-list-substeps__marker-shape" }) }), _jsx("span", { className: "ams-progress-list-substeps__connector" })] }), _jsx("div", { className: "ams-progress-list-substeps__content", children: children })] }));
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: clsx('ams-progress-list-substeps__step', status && `ams-progress-list-substeps__step--${status}`, className), ref: ref, ...restProps, children: [_jsxs("div", { className: "ams-progress-list-substeps__indicator", children: [_jsx("div", { className: "ams-progress-list-substeps__marker", children: _jsx("span", { className: "ams-progress-list-substeps__marker-shape" }) }), _jsx("span", { className: "ams-progress-list-substeps__connector" })] }), _jsxs("div", { className: "ams-progress-list-substeps__content", children: [_jsx(AccessibleStatusText, { status: status }), children] })] }));
 });
 ProgressListSubstep.displayName = 'ProgressList.Substep';

package/dist/SearchField/SearchFieldInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef, useId } from 'react';
-export const SearchFieldInput = forwardRef(({ className, dir, invalid, label = 'Zoeken', ...restProps }, ref) => {
-    const id = useId();
-    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "ams-visually-hidden", htmlFor: id, children: label }), _jsx("input", { ...restProps, "aria-invalid": invalid || undefined, autoComplete: "off", className: clsx('ams-search-field__input', className), dir: dir ?? 'auto', enterKeyHint: "search", id: id, ref: ref, spellCheck: "false", type: "search" })] }));
+export const SearchFieldInput = forwardRef(({ className, dir, id, invalid, label = 'Zoeken', ...restProps }, ref) => {
+    const inputId = id ?? useId();
+    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "ams-visually-hidden", htmlFor: inputId, children: label }), _jsx("input", { ...restProps, "aria-invalid": invalid || undefined, autoComplete: "off", className: clsx('ams-search-field__input', className), dir: dir ?? 'auto', enterKeyHint: "search", id: inputId, ref: ref, spellCheck: "false", type: "search" })] }));
 });
 SearchFieldInput.displayName = 'SearchField.Input';

package/dist/common/useViewportHasMinWidth.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const BREAKPOINTS: {
+    readonly medium: "37.5rem";
+    readonly wide: "72.5rem";
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Hook to determine if the viewport width is at or beyond a given breakpoint.
+ *
+ * **Prefer CSS media queries over this hook.** Use this only when viewport-dependent
+ * logic must run in JavaScript, e.g. for interactions or dynamic behaviour that cannot
+ * be expressed in CSS. CSS media queries are more performant, better supported across
+ * stacks, and easier to maintain.
+ *
+ * @param breakpoint - The breakpoint to match against: `'medium'` or `'wide'`.
+ * @returns `true` if the viewport width meets or exceeds the breakpoint, `false` otherwise.
+ */
+declare const useViewportHasMinWidth: (breakpoint: Breakpoint) => boolean;
+export default useViewportHasMinWidth;

package/dist/common/{useIsAfterBreakpoint.js → useViewportHasMinWidth.js}

@@ -8,7 +8,18 @@ export const BREAKPOINTS = {
     medium: '37.5rem',
     wide: '72.5rem',
 };
-const useIsAfterBreakpoint = (breakpoint) => {
+/**
+ * Hook to determine if the viewport width is at or beyond a given breakpoint.
+ *
+ * **Prefer CSS media queries over this hook.** Use this only when viewport-dependent
+ * logic must run in JavaScript, e.g. for interactions or dynamic behaviour that cannot
+ * be expressed in CSS. CSS media queries are more performant, better supported across
+ * stacks, and easier to maintain.
+ *
+ * @param breakpoint - The breakpoint to match against: `'medium'` or `'wide'`.
+ * @returns `true` if the viewport width meets or exceeds the breakpoint, `false` otherwise.
+ */
+const useViewportHasMinWidth = (breakpoint) => {
     const [matches, setMatches] = useState(false);
     useEffect(() => {
         // Check for window object to avoid SSR issues
@@ -24,4 +35,4 @@ const useIsAfterBreakpoint = (breakpoint) => {
     }, [breakpoint]);
     return matches;
 };
-export default useIsAfterBreakpoint;
+export default useViewportHasMinWidth;