@amsterdam/design-system-react 1.1.0 → 2.0.0

package/dist/Pagination/Pagination.d.ts

@@ -3,60 +3,102 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes } from 'react';
-export type PaginationProps = {
+export type PaginationProps = HTMLAttributes<HTMLElement> & {
+    /** The accessible name for the Pagination component. */
+    accessibleName?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    accessibleNameId?: string;
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The template used to construct the link hrefs. */
     linkTemplate: (page: number) => string;
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
+    /** The accessible name for the link to the next page. */
+    nextAccessibleName?: string;
     /** The visible label for the link to the next page. */
     nextLabel?: string;
-    /** The accessible name for the link to the next page. */
+    /**
+     * @deprecated Use `nextAccessibleName` instead.
+     * The accessible name for the link to the next page.
+     */
     nextVisuallyHiddenLabel?: string;
     /** The current page number. */
     page?: number;
+    /** The accessible name for the link to the previous page. */
+    previousAccessibleName?: string;
     /** The visible label for the link to the previous page. */
     previousLabel?: string;
-    /** The accessible name for the link to the previous page. */
+    /**
+     * @deprecated Use `previousAccessibleName` instead.
+     * The accessible name for the link to the previous page.
+     */
     previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
-    /** The accessible name for the Pagination component. */
+    /**
+     * @deprecated Use `accessibleName` instead.
+     * The accessible name for the Pagination component.
+     */
     visuallyHiddenLabel?: string;
     /**
+     * @deprecated Use `accessibleNameId` instead.
      * Connects the component with an internal element that defines its accessible name.
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-} & HTMLAttributes<HTMLElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
  */
-export declare const Pagination: import("react").ForwardRefExoticComponent<{
+export declare const Pagination: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** The accessible name for the Pagination component. */
+    accessibleName?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    accessibleNameId?: string;
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The template used to construct the link hrefs. */
     linkTemplate: (page: number) => string;
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
+    /** The accessible name for the link to the next page. */
+    nextAccessibleName?: string;
     /** The visible label for the link to the next page. */
     nextLabel?: string;
-    /** The accessible name for the link to the next page. */
+    /**
+     * @deprecated Use `nextAccessibleName` instead.
+     * The accessible name for the link to the next page.
+     */
     nextVisuallyHiddenLabel?: string;
     /** The current page number. */
     page?: number;
+    /** The accessible name for the link to the previous page. */
+    previousAccessibleName?: string;
     /** The visible label for the link to the previous page. */
     previousLabel?: string;
-    /** The accessible name for the link to the previous page. */
+    /**
+     * @deprecated Use `previousAccessibleName` instead.
+     * The accessible name for the link to the previous page.
+     */
     previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
-    /** The accessible name for the Pagination component. */
+    /**
+     * @deprecated Use `accessibleName` instead.
+     * The accessible name for the Pagination component.
+     */
     visuallyHiddenLabel?: string;
     /**
+     * @deprecated Use `accessibleNameId` instead.
      * Connects the component with an internal element that defines its accessible name.
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/Pagination/Pagination.js

@@ -1,19 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { Icon } from '../Icon/Icon';
+import { getRange } from './getRange';
 import { LinkItem } from './LinkItem';
 import { Spacer } from './Spacer';
-import { getRange } from './getRange';
-import { Icon } from '../Icon/Icon';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
  */
-export const Pagination = forwardRef(({ className, linkComponent = (props) => _jsx("a", { ...props }), linkTemplate, maxVisiblePages = 7, nextLabel = 'volgende', nextVisuallyHiddenLabel = 'Volgende pagina', page = 1, previousLabel = 'vorige', previousVisuallyHiddenLabel = 'Vorige pagina', totalPages, visuallyHiddenLabel = 'Paginering', visuallyHiddenLabelId = 'ams-pagination-a11y-label', ...restProps }, ref) => {
+export const Pagination = forwardRef(({ accessibleName, accessibleNameId, className, linkComponent = (props) => _jsx("a", { ...props }), linkTemplate, maxVisiblePages = 7, nextAccessibleName, nextLabel = 'volgende', nextVisuallyHiddenLabel, page = 1, previousAccessibleName, previousLabel = 'vorige', previousVisuallyHiddenLabel, totalPages, visuallyHiddenLabel, visuallyHiddenLabelId, ...restProps }, ref) => {
     // Don't show pagination if you only have one page
     if (totalPages <= 1) {
         return null;
@@ -21,6 +17,6 @@ export const Pagination = forwardRef(({ className, linkComponent = (props) => _j
     const Link = linkComponent;
     // Get array of page numbers and / or spacers
     const range = getRange(page, totalPages, maxVisiblePages);
-    return (_jsxs("nav", { ...restProps, "aria-labelledby": visuallyHiddenLabelId, className: clsx('ams-pagination', className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", id: visuallyHiddenLabelId, children: visuallyHiddenLabel }), page !== 1 && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page - 1), rel: "prev", children: [_jsx(Icon, { svg: ChevronBackwardIcon }), _jsx("span", { className: "ams-visually-hidden", children: previousVisuallyHiddenLabel }), _jsx("span", { "aria-hidden": true, children: previousLabel })] })), _jsx("ol", { className: "ams-pagination__list", children: range.map((pageNumberOrSpacer) => typeof pageNumberOrSpacer === 'number' ? (_jsx(LinkItem, { currentPage: page, linkComponent: linkComponent, linkTemplate: linkTemplate, pageNumber: pageNumberOrSpacer }, pageNumberOrSpacer)) : (_jsx(Spacer, {}, pageNumberOrSpacer))) }), page !== totalPages && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page + 1), rel: "next", children: [_jsx("span", { className: "ams-visually-hidden", children: nextVisuallyHiddenLabel }), _jsx("span", { "aria-hidden": true, children: nextLabel }), _jsx(Icon, { svg: ChevronForwardIcon })] }))] }));
+    return (_jsxs("nav", { ...restProps, "aria-labelledby": accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label', className: clsx('ams-pagination', className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", id: accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label', children: accessibleName || visuallyHiddenLabel || 'Paginering' }), page !== 1 && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page - 1), rel: "prev", children: [_jsx(Icon, { svg: ChevronBackwardIcon }), _jsx("span", { className: "ams-visually-hidden", children: previousAccessibleName || previousVisuallyHiddenLabel || 'Vorige pagina' }), _jsx("span", { "aria-hidden": true, children: previousLabel })] })), _jsx("ol", { className: "ams-pagination__list", children: range.map((pageNumberOrSpacer) => typeof pageNumberOrSpacer === 'number' ? (_jsx(LinkItem, { currentPage: page, linkComponent: linkComponent, linkTemplate: linkTemplate, pageNumber: pageNumberOrSpacer }, pageNumberOrSpacer)) : (_jsx(Spacer, {}, pageNumberOrSpacer))) }), page !== totalPages && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page + 1), rel: "next", children: [_jsx("span", { className: "ams-visually-hidden", children: nextAccessibleName || nextVisuallyHiddenLabel || 'Volgende pagina' }), _jsx("span", { "aria-hidden": true, children: nextLabel }), _jsx(Icon, { svg: ChevronForwardIcon })] }))] }));
 });
 Pagination.displayName = 'Pagination';

package/dist/Pagination/Pagination.test.js

@@ -1,8 +1,4 @@
 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 { Pagination } from './Pagination';
@@ -25,8 +21,8 @@ describe('Pagination', () => {
         const component = screen.getByRole('navigation', { name: 'Paginering' });
         expect(component).toHaveClass('ams-pagination extra');
     });
-    it('should render all the pages when totalPages < maxVisiblePages', () => {
-        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, totalPages: 6 }));
+    it('should render all the pages when totalPages <= maxVisiblePages', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 6, totalPages: 6 }));
         const listItem = screen.getAllByRole('listitem', { hidden: true });
         const range = ['1', '2', '3', '4', '5', '6'];
         range.forEach((item, index) => {
@@ -50,7 +46,7 @@ describe('Pagination', () => {
         });
     });
     it('should render the pages including one (first) spacer in the correct location when totalPages > maxVisiblePages and page > maxVisiblePages', () => {
-        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, page: 8, totalPages: 10 }));
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, maxVisiblePages: 7, page: 7, totalPages: 10 }));
         const listItem = screen.getAllByRole('listitem', { hidden: true });
         const range = ['1', '…', '6', '7', '8', '9', '10'];
         range.forEach((item, index) => {
@@ -71,11 +67,16 @@ describe('Pagination', () => {
         expect(currentPageLink).toHaveAttribute('href', '#?pagina=4');
         expect(nextPageLink).toHaveAttribute('href', '#?pagina=5');
     });
-    it('sets a custom id for the accessible label', () => {
+    it('sets a custom id for the accessible label - deprecated', () => {
         render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 10, visuallyHiddenLabelId: "custom-id" }));
         const component = screen.getByRole('navigation', { name: 'Paginering' });
         expect(component).toHaveAttribute('aria-labelledby', 'custom-id');
     });
+    it('sets a custom id for the accessible name', () => {
+        render(_jsx(Pagination, { accessibleNameId: "custom-id", linkTemplate: linkTemplate, totalPages: 10 }));
+        const component = screen.getByRole('navigation', { name: 'Paginering' });
+        expect(component).toHaveAttribute('aria-labelledby', 'custom-id');
+    });
     it('should not render when totalPages is 1 or less', () => {
         render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 1 }));
         expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
@@ -97,18 +98,30 @@ describe('Pagination', () => {
         expect(nextLink).toHaveTextContent('next');
         expect(nextLink).toHaveAttribute('rel', 'next');
     });
-    it('renders an accessible label for the navigation', () => {
+    it('renders an accessible label for the navigation - deprecated', () => {
         render(_jsx(Pagination, { linkTemplate: linkTemplate, totalPages: 10, visuallyHiddenLabel: "Pagination" }));
         const component = screen.getByRole('navigation', { name: 'Pagination' });
         expect(component).toBeInTheDocument();
     });
-    it('renders accessible labels for the ‘previous’ and ‘next’ links', () => {
+    it('renders an accessible name for the navigation', () => {
+        render(_jsx(Pagination, { accessibleName: "Pagination", linkTemplate: linkTemplate, totalPages: 10 }));
+        const component = screen.getByRole('navigation', { name: 'Pagination' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders accessible labels for the ‘previous’ and ‘next’ links - deprecated', () => {
         render(_jsx(Pagination, { linkTemplate: linkTemplate, nextVisuallyHiddenLabel: "Next page", page: 4, previousVisuallyHiddenLabel: "Previous page", totalPages: 10 }));
         const previousLink = screen.getByRole('link', { name: 'Previous page' });
         const nextLink = screen.getByRole('link', { name: 'Next page' });
         expect(previousLink).toBeInTheDocument();
         expect(nextLink).toBeInTheDocument();
     });
+    it('renders accessible names for the ‘previous’ and ‘next’ links', () => {
+        render(_jsx(Pagination, { linkTemplate: linkTemplate, nextAccessibleName: "Next page", page: 4, previousAccessibleName: "Previous page", totalPages: 10 }));
+        const previousLink = screen.getByRole('link', { name: 'Previous page' });
+        const nextLink = screen.getByRole('link', { name: 'Next page' });
+        expect(previousLink).toBeInTheDocument();
+        expect(nextLink).toBeInTheDocument();
+    });
     it('renders a custom link component', () => {
         const CustomLink = (props) => _jsx("a", { "data-test": true, ...props });
         render(_jsx(Pagination, { linkComponent: CustomLink, linkTemplate: linkTemplate, totalPages: 10 }));

package/dist/Pagination/getRange.js

@@ -32,11 +32,13 @@ export function getRange(currentPage, totalPages, maxVisiblePages) {
         if (index === 0 && pageNr !== 1) {
             return [1, 'firstSpacer'];
         }
-        if (totalPages > visiblePages && index === visiblePages - 2 && currentPage < totalPages - 2) {
+        if (totalPages > visiblePages &&
+            index === visiblePages - 2 &&
+            currentPage < totalPages - Math.floor(visiblePages / 2)) {
             return [...acc, 'lastSpacer', totalPages];
         }
         // Skip a number when spacer is already added
-        if ((acc.includes('firstSpacer') && index === 1) || (acc.includes('lastSpacer') && index === visiblePages - 1)) {
+        if (acc[index] === 'firstSpacer' || acc[index - 1] === 'lastSpacer') {
             return acc;
         }
         return [...acc, pageNr];

package/dist/Paragraph/Paragraph.d.ts

@@ -2,21 +2,26 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type ParagraphProps = {
+export type ParagraphProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The size of the text. */
     size?: 'small' | 'large';
-} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
-export declare const Paragraph: import("react").ForwardRefExoticComponent<{
+export declare const Paragraph: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The size of the text. */
     size?: "small" | "large";
-} & HTMLAttributes<HTMLParagraphElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/Paragraph/Paragraph.js

@@ -1,14 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2021 Robbert Broersma
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}

package/dist/PasswordInput/PasswordInput.d.ts

@@ -3,14 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes } from 'react';
-export type PasswordInputProps = {
+export type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-password-input--docs Password Input docs at Amsterdam Design System}
  */
-export declare const PasswordInput: import("react").ForwardRefExoticComponent<{
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/PasswordInput/PasswordInput.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-password-input--docs Password Input docs at Amsterdam Design System}

package/dist/PasswordInput/PasswordInput.test.js

@@ -6,8 +6,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef, useState } from 'react';
-import { PasswordInput } from './PasswordInput';
 import { Label } from '../Label';
+import { PasswordInput } from './PasswordInput';
 import '@testing-library/jest-dom';
 describe('Password input', () => {
     it('renders', () => {

package/dist/Radio/Radio.d.ts

@@ -3,20 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export type RadioProps = {
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+export type RadioProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default RadioIcon
+     */
+    icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-radio--docs Radio docs at Amsterdam Design System}
  */
-export declare const Radio: import("react").ForwardRefExoticComponent<{
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+    children?: ReactNode | undefined;
+} & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default RadioIcon
+     */
+    icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio/Radio.js

@@ -1,19 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useId } from 'react';
 import RadioIcon from './RadioIcon';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-radio--docs Radio docs at Amsterdam Design System}
  */
-export const Radio = forwardRef(({ children, className, icon, invalid, ...restProps }, ref) => {
-    const id = useId();
+export const Radio = forwardRef(({ children, className, icon = RadioIcon, id, invalid, ...restProps }, ref) => {
+    const inputId = id || useId();
     return (
     // This div is here because NVDA doesn't match the input to the label
     // without a containing element
-    _jsxs("div", { className: clsx('ams-radio', className), children: [_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: "ams-radio__input", id: id, ref: ref, type: "radio" }), _jsxs("label", { className: "ams-radio__label", htmlFor: id, children: [_jsx("span", { className: "ams-radio__icon-container", children: icon ?? _jsx(RadioIcon, {}) }), children] })] }));
+    _jsxs("div", { className: clsx('ams-radio', className), children: [_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: "ams-radio__input", id: inputId, ref: ref, type: "radio" }), _jsxs("label", { className: "ams-radio__label", htmlFor: inputId, children: [_jsx("span", { className: "ams-radio__icon-container", hidden: true, children: typeof icon === 'function' ? icon() : icon }), children] })] }));
 });
 Radio.displayName = 'Radio';

package/dist/Radio/Radio.test.js

@@ -111,6 +111,15 @@ describe('Radio', () => {
         label?.click();
         expect(handleChange).toHaveBeenCalled();
     });
+    it('can use a custom id', () => {
+        const handleChange = jest.fn();
+        const { container } = render(_jsx(Radio, { id: "test-id", onChange: handleChange }));
+        const input = screen.getByRole('radio');
+        expect(input).toHaveAttribute('id', 'test-id');
+        const label = container.querySelector('label');
+        label?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
     it('shows a custom icon', () => {
         const { container } = render(_jsx(Radio, { icon: _jsx(StarIcon, { className: "test-class" }) }));
         const icon = container.querySelector('svg');

package/dist/Row/Row.d.ts

@@ -8,7 +8,7 @@ export declare const rowTags: readonly ["article", "div", "section"];
 type RowTag = (typeof rowTags)[number];
 export declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type RowGap = (typeof rowGapSizes)[number];
-export type RowProps = {
+export type RowProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -34,11 +34,13 @@ export type RowProps = {
      * @default false
      */
     wrap?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
  */
-export declare const Row: import("react").ForwardRefExoticComponent<{
+export declare const Row: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -64,7 +66,5 @@ export declare const Row: import("react").ForwardRefExoticComponent<{
      * @default false
      */
     wrap?: boolean;
-} & HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<unknown>>;
 export {};

package/dist/Row/Row.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const rowTags = ['article', 'div', 'section'];
 export const rowGapSizes = ['none', 'x-small', 'small', 'large', 'x-large'];

package/dist/Row/Row.test.js

@@ -5,9 +5,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Row, rowGapSizes, rowTags } from './Row';
 import { ariaRoleForTag } from '../common/accessibility';
 import { crossAlignOptions, mainAlignOptions } from '../common/types';
+import { Row, rowGapSizes, rowTags } from './Row';
 import '@testing-library/jest-dom';
 describe('Row', () => {
     it('renders', () => {

package/dist/SearchField/SearchField.d.ts

@@ -137,7 +137,7 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onInput?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
@@ -187,8 +187,6 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
@@ -290,8 +288,8 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         formTarget?: string | undefined | undefined;
         name?: string | undefined | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
-    Input: import("react").ForwardRefExoticComponent<{
+    Input: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
         invalid?: boolean;
         label?: string;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    } & import("react").RefAttributes<HTMLInputElement>>;
 };

package/dist/SearchField/SearchField.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { SearchFieldButton } from './SearchFieldButton';
 import { SearchFieldInput } from './SearchFieldInput';

package/dist/SearchField/SearchFieldButton.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { SearchIcon } from '@amsterdam/design-system-react-icons';
 import { forwardRef } from 'react';
 import { Button } from '../Button';

package/dist/SearchField/SearchFieldInput.d.ts

@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes } from 'react';
-export declare const SearchFieldInput: import("react").ForwardRefExoticComponent<{
+export declare const SearchFieldInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** Describes the field for screen readers. */
     label?: string;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/SearchField/SearchFieldInput.js

@@ -1,9 +1,5 @@
 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 { clsx } from 'clsx';
 import { forwardRef, useId } from 'react';
 export const SearchFieldInput = forwardRef(({ className, dir, invalid, label = 'Zoeken', ...restProps }, ref) => {
     const id = useId();

package/dist/Select/Select.d.ts

@@ -3,18 +3,18 @@
  * Copyright Gemeente Amsterdam
  */
 import type { PropsWithChildren, SelectHTMLAttributes } from 'react';
-export type SelectProps = {
+export type SelectProps = PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-select--docs Select docs at Amsterdam Design System}
  */
-export declare const Select: import("react").ForwardRefExoticComponent<{
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLSelectElement>> & {
     Group: import("react").ForwardRefExoticComponent<import("./SelectOptionGroup").SelectOptionGroupProps & {
         children?: import("react").ReactNode | undefined;

package/dist/Select/Select.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { SelectOption } from './SelectOption';
 import { SelectOptionGroup } from './SelectOptionGroup';

package/dist/Select/SelectOption.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const SelectOption = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("option", { ...restProps, className: clsx('ams-select__option', className), ref: ref, children: children })));
 SelectOption.displayName = 'Select.Option';

package/dist/Select/SelectOptionGroup.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const SelectOptionGroup = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("optgroup", { ...restProps, className: clsx('ams-select__group', className), ref: ref, children: children })));
 SelectOptionGroup.displayName = 'Select.Group';

package/dist/SkipLink/SkipLink.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-skip-link--docs Skip Link docs at Amsterdam Design System}