@amsterdam/design-system-react 0.16.0 → 1.1.0

package/dist/PageFooter/PageFooter.d.ts

@@ -4,6 +4,9 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
+ */
 export declare const PageFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {

package/dist/PageFooter/PageFooter.js

@@ -10,6 +10,9 @@ import { PageFooterMenuLink } from './PageFooterMenuLink';
 import { PageFooterSpotlight } from './PageFooterSpotlight';
 const PageFooterRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("footer", { ...restProps, className: clsx('ams-page-footer', className), ref: ref, children: children })));
 PageFooterRoot.displayName = 'PageFooter';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
+ */
 export const PageFooter = Object.assign(PageFooterRoot, {
     Menu: PageFooterMenu,
     MenuLink: PageFooterMenuLink,

package/dist/PageFooter/PageFooter.test.d.ts

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

package/dist/PageFooter/PageFooter.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageFooter } from './PageFooter';

package/dist/PageFooter/PageFooterMenu.test.d.ts

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

package/dist/PageFooter/PageFooterMenu.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageFooter } from './PageFooter';

package/dist/PageFooter/PageFooterMenuLink.test.d.ts

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

package/dist/PageFooter/PageFooterMenuLink.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageFooter } from './PageFooter';

package/dist/PageFooter/PageFooterSpotlight.test.d.ts

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

package/dist/PageFooter/PageFooterSpotlight.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageFooter } from './PageFooter';

package/dist/PageFooter/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { PageFooter } from './PageFooter';
 export type { PageFooterProps } from './PageFooter';
 export type { PageFooterMenuProps } from './PageFooterMenu';

package/dist/PageFooter/index.js

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

package/dist/PageHeader/PageHeader.d.ts

@@ -2,15 +2,19 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import type { LogoBrand } from '../Logo';
 export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
+    /** The accessible name of the logo. */
+    logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
     logoBrand?: LogoBrand;
     /** The url for the link on the logo. */
     logoLink?: string;
+    /** The React component to use for the logo link. */
+    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
     /** The text for the menu button. */
@@ -22,13 +26,20 @@ export type PageHeaderProps = {
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
 } & HTMLAttributes<HTMLElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
+ */
 export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
+    /** The accessible name of the logo. */
+    logoAccessibleName?: string;
     /** The name of the brand for which to display the logo. */
     logoBrand?: LogoBrand;
     /** The url for the link on the logo. */
     logoLink?: string;
+    /** The React component to use for the logo link. */
+    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
     /** The text for the menu button. */
@@ -43,7 +54,7 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
     MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
-    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };

package/dist/PageHeader/PageHeader.js

@@ -11,9 +11,10 @@ import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWi
 import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
 import { PageHeaderMenuLink } from './PageHeaderMenuLink';
 import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
-const LogoLinkContent = ({ brandName, logoBrand }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
-const PageHeaderRoot = forwardRef(({ brandName, children, className, logoBrand = 'amsterdam', logoLink = '/', logoLinkTitle = 'Ga naar de homepage', menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+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', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
+    const Link = logoLinkComponent;
     const hasMegaMenu = Boolean(children);
     const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
     useEffect(() => {
@@ -22,9 +23,12 @@ const PageHeaderRoot = forwardRef(({ brandName, children, className, logoBrand =
             setOpen(false);
         }
     }, [isWideWindow]);
-    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs("a", { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle }), _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), 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", { className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _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 }))] }))] }));
+    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", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), 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", { className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _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 }))] }))] }));
 });
 PageHeaderRoot.displayName = 'PageHeader';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
+ */
 export const PageHeader = Object.assign(PageHeaderRoot, {
     GridCellNarrowWindowOnly: PageHeaderGridCellNarrowWindowOnly,
     MenuLink: PageHeaderMenuLink,

package/dist/PageHeader/PageHeader.test.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import './matchMedia.mock';
 import '@testing-library/jest-dom';

package/dist/PageHeader/PageHeader.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
@@ -45,7 +49,12 @@ describe('Page Header', () => {
     });
     it('renders a custom logo link title', () => {
         render(_jsx(PageHeader, { logoLinkTitle: "Go to homepage" }));
-        const logoLinkTitle = screen.getByRole('link', { name: 'Go to homepage' });
+        const logoLinkTitle = screen.getByRole('link', { name: 'Gemeente Amsterdam logo Go to homepage' });
+        expect(logoLinkTitle).toBeInTheDocument();
+    });
+    it('renders a custom accessible name for the logo', () => {
+        render(_jsx(PageHeader, { logoAccessibleName: "Custom accessible name" }));
+        const logoLinkTitle = screen.getByRole('link', { name: 'Custom accessible name Ga naar de homepage' });
         expect(logoLinkTitle).toBeInTheDocument();
     });
     it('renders an application name', () => {
@@ -117,4 +126,10 @@ describe('Page Header', () => {
     it.skip('it closes the mega menu when it is open and the screen width passes the breakpoint', () => {
         // TODO: Add this test
     });
+    it('renders a custom logo link component', () => {
+        const CustomLink = (props) => _jsx("a", { "data-test": true, ...props });
+        render(_jsx(PageHeader, { logoLinkComponent: CustomLink }));
+        const customLink = screen.getByRole('link', { name: 'Gemeente Amsterdam logo Ga naar de homepage' });
+        expect(customLink).toHaveAttribute('data-test');
+    });
 });

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { GridCellProps } from '../Grid';
 export declare const PageHeaderGridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLElement>>;

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

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

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.d.ts

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

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';

package/dist/PageHeader/PageHeaderMenuIcon.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import type { SVGProps } from 'react';
 export declare const PageHeaderMenuIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/PageHeader/PageHeaderMenuLink.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 export type PageHeaderMenuLinkProps = {
     fixed?: boolean;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));

package/dist/PageHeader/PageHeaderMenuLink.test.d.ts

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

package/dist/PageHeader/PageHeaderMenuLink.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageHeaderMenuLink } from './PageHeaderMenuLink';

package/dist/PageHeader/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 export type { PageHeaderMenuLinkProps } from './PageHeaderMenuLink';

package/dist/PageHeader/index.js

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

package/dist/PageHeader/matchMedia.mock.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */

package/dist/PageHeader/matchMedia.mock.js

@@ -1,4 +1,8 @@
 "use strict";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 // Sourced from https://jestjs.io/docs/29.4/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(window, 'matchMedia', {
     value: jest.fn().mockImplementation((query) => ({

package/dist/PageHeading/PageHeading.d.ts

@@ -7,6 +7,9 @@ export type PageHeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
+ */
 export declare const PageHeading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/PageHeading/PageHeading.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
+ */
 export const PageHeading = forwardRef(({ children, className, color, ...restProps }, ref) => (_jsx("h1", { ...restProps, className: clsx('ams-page-heading', color && `ams-page-heading--${color}`, className), ref: ref, children: children })));
 PageHeading.displayName = 'PageHeading';

package/dist/PageHeading/PageHeading.test.d.ts

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

package/dist/PageHeading/PageHeading.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { PageHeading } from './PageHeading';

package/dist/PageHeading/index.d.ts

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

package/dist/PageHeading/index.js

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

package/dist/Pagination/LinkItem.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { PaginationProps } from './Pagination';
 type LinkItemProps = Pick<PaginationProps, 'linkComponent' | 'linkTemplate'> & {
     currentPage: PaginationProps['page'];

package/dist/Pagination/Pagination.d.ts

@@ -30,6 +30,9 @@ export type PaginationProps = {
      */
     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<{
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;

package/dist/Pagination/Pagination.js

@@ -3,13 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons';
+import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 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) => {
     // Don't show pagination if you only have one page
     if (totalPages <= 1) {
@@ -18,6 +21,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: ChevronLeftIcon }), _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: ChevronRightIcon })] }))] }));
+    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 })] }))] }));
 });
 Pagination.displayName = 'Pagination';

package/dist/Pagination/Pagination.test.d.ts

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

package/dist/Pagination/Pagination.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Pagination } from './Pagination';

package/dist/Pagination/Spacer.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export declare const Spacer: () => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/Spacer.js

@@ -1,2 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export const Spacer = () => _jsx("li", { "aria-hidden": true, children: '\u2026' });

package/dist/Pagination/getRange.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 /**
  * This returns an array of the range, including spacers
  *

package/dist/Pagination/getRange.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 /**
  * This returns an array of the range, including spacers
  *

package/dist/Pagination/index.d.ts

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

package/dist/Pagination/index.js

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

package/dist/Paragraph/Paragraph.d.ts

@@ -1,6 +1,5 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
@@ -10,6 +9,9 @@ export type ParagraphProps = {
     /** 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<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/Paragraph/Paragraph.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Robbert Broersma
@@ -6,5 +10,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 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}
+ */
 export const Paragraph = forwardRef(({ children, className, color, size, ...restProps }, ref) => (_jsx("p", { className: clsx('ams-paragraph', color && `ams-paragraph--${color}`, size && `ams-paragraph--${size}`, className), ref: ref, ...restProps, children: children })));
 Paragraph.displayName = 'Paragraph';

package/dist/Paragraph/Paragraph.test.d.ts

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

package/dist/Paragraph/Paragraph.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Paragraph } from './Paragraph';

package/dist/Paragraph/index.d.ts

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

package/dist/Paragraph/index.js

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

package/dist/PasswordInput/PasswordInput.d.ts

@@ -7,6 +7,9 @@ export type PasswordInputProps = {
     /** 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<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;

package/dist/PasswordInput/PasswordInput.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 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}
+ */
 export const PasswordInput = forwardRef(({ className, dir, invalid, ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, autoCorrect: "off", className: clsx('ams-password-input', className), dir: dir ?? 'auto', ref: ref, spellCheck: "false", type: "password" })));
 PasswordInput.displayName = 'PasswordInput';

package/dist/PasswordInput/PasswordInput.test.d.ts

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

package/dist/PasswordInput/PasswordInput.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef, useState } from 'react';