@amsterdam/design-system-react 1.1.0 → 2.0.0

package/dist/Accordion/Accordion.d.ts

@@ -8,8 +8,8 @@ export type AccordionProps = {
     /**
      * The hierarchical level of this Accordion’s Section Headings within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The value ‘1’ is deprecated.
+     */
     headingLevel: HeadingProps['level'];
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: 'div' | 'section';
@@ -21,18 +21,18 @@ export declare const Accordion: import("react").ForwardRefExoticComponent<{
     /**
      * The hierarchical level of this Accordion’s Section Headings within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The value ‘1’ is deprecated.
+     */
     headingLevel: HeadingProps["level"];
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: "div" | "section";
 } & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
-    Section: import("react").ForwardRefExoticComponent<{
+    Section: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & {
         expanded?: boolean;
         label: string;
-    } & HTMLAttributes<HTMLElement> & {
-        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/Accordion/Accordion.js

@@ -1,13 +1,9 @@
 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, useImperativeHandle, useRef } from 'react';
+import { useKeyboardFocus } from '../common/useKeyboardFocus';
 import AccordionContext from './AccordionContext';
 import { AccordionSection } from './AccordionSection';
-import { useKeyboardFocus } from '../common/useKeyboardFocus';
 const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs = 'section' }, ref) => {
     const innerRef = useRef(null);
     // use a passed ref if it's there, otherwise use innerRef

package/dist/Accordion/Accordion.test.js

@@ -10,19 +10,19 @@ import { Accordion } from './Accordion';
 import '@testing-library/jest-dom';
 describe('Accordion', () => {
     it('renders an accordion', () => {
-        const { container } = render(_jsx(Accordion, { headingLevel: 1 }));
+        const { container } = render(_jsx(Accordion, { headingLevel: 2 }));
         const accordion = container.querySelector('.ams-accordion');
         expect(accordion).toBeInTheDocument();
         expect(accordion).toBeVisible();
     });
     it('renders an extra class name', () => {
-        const { container } = render(_jsx(Accordion, { className: "test", headingLevel: 1 }));
+        const { container } = render(_jsx(Accordion, { className: "test", headingLevel: 2 }));
         const accordion = container.querySelector('.ams-accordion');
         expect(accordion).toHaveClass('test');
     });
     it('sets focus on Accordion buttons when using arrow keys', async () => {
         const user = userEvent.setup();
-        render(_jsxs(Accordion, { headingLevel: 1, children: [_jsx(Accordion.Section, { label: "one" }), _jsx(Accordion.Section, { label: "two" }), _jsx(Accordion.Section, { label: "three" })] }));
+        render(_jsxs(Accordion, { headingLevel: 2, children: [_jsx(Accordion.Section, { label: "one" }), _jsx(Accordion.Section, { label: "two" }), _jsx(Accordion.Section, { label: "three" })] }));
         const firstButton = screen.getByRole('button', { name: 'one' });
         const thirdButton = screen.getByRole('button', { name: 'three' });
         await user.click(firstButton);
@@ -37,7 +37,7 @@ describe('Accordion', () => {
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(Accordion, { headingLevel: 1, ref: ref }));
+        const { container } = render(_jsx(Accordion, { headingLevel: 2, ref: ref }));
         const accordion = container.querySelector('.ams-accordion');
         expect(ref.current).toBe(accordion);
     });

package/dist/Accordion/AccordionContext.d.ts

@@ -3,9 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AccordionProps } from './Accordion';
-import type { HeadingProps } from '../Heading/Heading';
 export type AccordionContextValue = {
-    headingLevel: HeadingProps['level'] | null;
+    headingLevel: AccordionProps['headingLevel'];
     sectionAs?: AccordionProps['sectionAs'];
 };
 declare const AccordionContext: import("react").Context<AccordionContextValue>;

package/dist/Accordion/AccordionContext.js

@@ -4,8 +4,9 @@
  */
 import { createContext } from 'react';
 const defaultValues = {
-    headingLevel: null,
-    sectionAs: 'section',
+    // Level 2 is set here, but it is never used.
+    // headingLevel is a required prop in Accordion, which always overwrites it.
+    headingLevel: 2,
 };
 const AccordionContext = createContext(defaultValues);
 export default AccordionContext;

package/dist/Accordion/AccordionSection.d.ts

@@ -3,17 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type AccordionSectionProps = {
+export type AccordionSectionProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** Whether the content is displayed initially. */
     expanded?: boolean;
     /** The heading text. */
     label: string;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export declare const AccordionSection: import("react").ForwardRefExoticComponent<{
+};
+export declare const AccordionSection: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** Whether the content is displayed initially. */
     expanded?: boolean;
     /** The heading text. */
     label: string;
-} & HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Accordion/AccordionSection.js

@@ -1,22 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { ChevronDownIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useContext, useId, useState } from 'react';
-import AccordionContext from './AccordionContext';
-import { getHeadingTag } from '../Heading/getHeadingTag';
+import { Heading } from '../Heading';
 import { Icon } from '../Icon/Icon';
+import AccordionContext from './AccordionContext';
+// The 'ams-accordion__header' class is @deprecated and will be removed in a future release.
 export const AccordionSection = forwardRef(({ children, className, expanded = false, label, ...restProps }, ref) => {
     const { headingLevel, sectionAs } = useContext(AccordionContext);
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const HeadingTag = getHeadingTag(headingLevel);
     const SectionTag = sectionAs || 'section';
     const id = useId();
+    const iconSize = `heading-${headingLevel}`;
     const buttonId = `button-${id}`;
     const panelId = `panel-${id}`;
-    return (_jsxs("div", { className: clsx('ams-accordion__section', className), ref: ref, ...restProps, children: [_jsx(HeadingTag, { className: "ams-accordion__header", children: _jsxs("button", { "aria-controls": panelId, "aria-expanded": isExpanded, className: "ams-accordion__button", id: buttonId, onClick: () => setIsExpanded(!isExpanded), type: "button", children: [_jsx(Icon, { className: "ams-accordion__icon", size: "heading-4", svg: ChevronDownIcon }), label] }) }), _jsx(SectionTag, { "aria-labelledby": buttonId, className: clsx('ams-accordion__panel', { 'ams-accordion__panel--expanded': isExpanded }), id: panelId, children: children })] }));
+    return (_jsxs("div", { className: clsx('ams-accordion__section', className), ref: ref, ...restProps, children: [_jsx(Heading, { className: "ams-accordion__header", level: headingLevel, children: _jsxs("button", { "aria-controls": panelId, "aria-expanded": isExpanded, className: "ams-accordion__button", id: buttonId, onClick: () => setIsExpanded(!isExpanded), type: "button", children: [_jsx(Icon, { className: "ams-accordion__icon", size: iconSize, svg: ChevronDownIcon }), label] }) }), _jsx(SectionTag, { "aria-labelledby": buttonId, className: clsx('ams-accordion__panel', { 'ams-accordion__panel--expanded': isExpanded }), id: panelId, children: children })] }));
 });
 AccordionSection.displayName = 'Accordion.Section';

package/dist/Accordion/AccordionSection.test.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
@@ -25,7 +25,7 @@ describe('Accordion section', () => {
             name: testLabel,
         });
         const section = container.querySelector('.ams-accordion__panel');
-        expect(heading).toHaveClass('ams-accordion__header');
+        expect(heading).toHaveClass('ams-heading ams-accordion__header');
         expect(button).toHaveClass('ams-accordion__button');
         expect(section).toBeInTheDocument();
     });
@@ -46,13 +46,13 @@ describe('Accordion section', () => {
         const sectionContent = getByText(testContent);
         expect(sectionContent).toHaveClass('ams-accordion__panel--expanded');
     });
-    it('renders a section HTML tag by defaultt', () => {
-        render(_jsx(Accordion, { headingLevel: 1, children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
+    it('renders a section HTML tag by default', () => {
+        render(_jsx(Accordion, { headingLevel: 2, children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
         const sectionQuery = screen.queryByRole('region');
         expect(sectionQuery).toBeInTheDocument();
     });
     it('does not render a section HTML tag when the sectionAs is "div"', () => {
-        render(_jsx(Accordion, { headingLevel: 1, sectionAs: "div", children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
+        render(_jsx(Accordion, { headingLevel: 2, sectionAs: "div", children: _jsx(Accordion.Section, { label: testLabel, children: testContent }) }));
         const sectionQuery = screen.queryByRole('region');
         expect(sectionQuery).not.toBeInTheDocument();
     });
@@ -65,6 +65,19 @@ describe('Accordion section', () => {
         expect(heading).toBeInTheDocument();
         expect(heading).toBeVisible();
     });
+    it('renders the allowed levels correctly', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Accordion, { headingLevel: 2, children: _jsx(Accordion.Section, { label: "Level 2", children: testContent }) }), _jsx(Accordion, { headingLevel: 4, children: _jsx(Accordion.Section, { label: "Level 4", children: testContent }) })] }));
+        const headingLevel2 = screen.getByRole('heading', {
+            level: 2,
+            name: 'Level 2',
+        });
+        const headingLevel4 = screen.getByRole('heading', {
+            level: 4,
+            name: 'Level 4',
+        });
+        expect(headingLevel2).toBeInTheDocument();
+        expect(headingLevel4).toBeInTheDocument();
+    });
     it('renders an icon', () => {
         render(_jsx(Accordion.Section, { label: testLabel, children: testContent }));
         const button = screen.getByRole('button', {

package/dist/ActionGroup/ActionGroup.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-layout-action-group--docs Action Group docs at Amsterdam Design System}

package/dist/Alert/Alert.d.ts

@@ -12,11 +12,17 @@ export type AlertProps = {
     closeButtonLabel?: string;
     /** The text for the Heading. */
     heading: string;
+    /**
+     * The id of the Heading element, which is used to label the Alert.
+     * Can be set to `null` to explicitly remove the label.
+     * Note: must be unique for the page.
+     */
+    headingId?: string | null;
     /**
      * The hierarchical level of the Alert’s Heading within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The size of the heading is fixed at level 3.
+     */
     headingLevel: HeadingProps['level'];
     /** A function to run when dismissing. */
     onClose?: () => void;
@@ -33,11 +39,17 @@ export declare const Alert: import("react").ForwardRefExoticComponent<{
     closeButtonLabel?: string;
     /** The text for the Heading. */
     heading: string;
+    /**
+     * The id of the Heading element, which is used to label the Alert.
+     * Can be set to `null` to explicitly remove the label.
+     * Note: must be unique for the page.
+     */
+    headingId?: string | null;
     /**
      * The hierarchical level of the Alert’s Heading within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The size of the heading is fixed at level 3.
+     */
     headingLevel: HeadingProps["level"];
     /** A function to run when dismissing. */
     onClose?: () => void;

package/dist/Alert/Alert.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { ErrorFillIcon, InfoFillIcon, SuccessFillIcon, WarningFillIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Heading } from '../Heading';
 import { Icon } from '../Icon';
@@ -18,8 +14,8 @@ const iconSvgBySeverity = {
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
  */
-export const Alert = forwardRef(({ children, className, closeable, closeButtonLabel = 'Sluiten', heading, headingLevel, onClose, severity, ...restProps }, ref) => {
+export const Alert = forwardRef(({ children, className, closeable, closeButtonLabel = 'Sluiten', heading, headingId = 'ams-alert-heading', headingLevel, onClose, severity, ...restProps }, ref) => {
     const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoFillIcon;
-    return (_jsxs("section", { ...restProps, className: clsx('ams-alert', severity && `ams-alert--${severity}`, className), ref: ref, children: [_jsx("div", { className: "ams-alert__severity-indicator", children: _jsx(Icon, { color: "inverse", size: "heading-4", svg: SeverityIcon }) }), _jsxs("div", { className: "ams-alert__content", children: [_jsxs(Row, { align: "between", alignVertical: "start", children: [_jsx(Heading, { level: headingLevel, size: "level-4", children: heading }), closeable && _jsx(IconButton, { label: closeButtonLabel, onClick: onClose, size: "heading-4" })] }), children] })] }));
+    return (_jsxs("section", { ...restProps, "aria-labelledby": headingId || undefined, className: clsx('ams-alert', severity && `ams-alert--${severity}`, className), ref: ref, children: [_jsx("div", { className: "ams-alert__severity-indicator", children: _jsx(Icon, { color: "inverse", size: "heading-3", svg: SeverityIcon }) }), _jsxs("div", { className: "ams-alert__content", children: [_jsxs(Row, { align: "between", alignVertical: "start", children: [_jsx(Heading, { id: headingId || undefined, level: headingLevel, size: "level-3", children: heading }), closeable && _jsx(IconButton, { label: closeButtonLabel, onClick: onClose, size: "heading-3" })] }), children] })] }));
 });
 Alert.displayName = 'Alert';

package/dist/Alert/Alert.test.js

@@ -9,28 +9,28 @@ import { Alert } from './Alert';
 import '@testing-library/jest-dom';
 describe('Alert', () => {
     it('renders', () => {
-        const { container } = render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
-        const component = container.querySelector(':only-child');
+        render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
         const icon = component?.querySelector('.ams-alert__severity-indicator > .ams-icon');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
         expect(icon).toBeInTheDocument();
-        expect(icon).toBeVisible();
+        expect(icon).not.toBeVisible(); // The icon is hidden by default, and only shown when the CSS loads.
     });
     it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
-        const component = container.querySelector(':only-child');
+        render(_jsx(Alert, { heading: "Let op!", headingLevel: 2 }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
         expect(component).toHaveClass('ams-alert');
     });
     it('renders an extra class name', () => {
-        const { container } = render(_jsx(Alert, { className: "extra", heading: "Let op!", headingLevel: 2 }));
-        const component = container.querySelector(':only-child');
+        render(_jsx(Alert, { className: "extra", heading: "Let op!", headingLevel: 2 }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
         expect(component).toHaveClass('ams-alert extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(Alert, { heading: "Let op!", headingLevel: 2, ref: ref }));
-        const component = container.querySelector(':only-child');
+        render(_jsx(Alert, { heading: "Let op!", headingLevel: 2, ref: ref }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
         expect(ref.current).toBe(component);
     });
     it('renders a heading', () => {
@@ -41,8 +41,8 @@ describe('Alert', () => {
         expect(heading).toBeInTheDocument();
     });
     it('renders the close button', () => {
-        const { container } = render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2 }));
-        const component = container.querySelector(':only-child');
+        render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2 }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
         const closeButton = component?.querySelector('.ams-icon-button');
         expect(closeButton).toBeInTheDocument();
         expect(closeButton).toBeVisible();
@@ -54,10 +54,21 @@ describe('Alert', () => {
     });
     it('fires the onClose event when the close button is clicked', () => {
         const onClose = jest.fn();
-        const { container } = render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2, onClose: onClose }));
-        const component = container.querySelector(':only-child');
+        render(_jsx(Alert, { closeable: true, heading: "Let op!", headingLevel: 2, onClose: onClose }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
         const closeButton = component?.querySelector('.ams-icon-button');
         fireEvent.click(closeButton);
         expect(onClose).toHaveBeenCalled();
     });
+    it('uses a custom headingId to label the Alert', () => {
+        render(_jsx(Alert, { heading: "Let op!", headingId: "custom-heading-id", headingLevel: 2 }));
+        const component = screen.getByRole('region', { name: 'Let op!' });
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('aria-labelledby', 'custom-heading-id');
+    });
+    it('does not label the Alert when headingId is set to null', () => {
+        const { container } = render(_jsx(Alert, { heading: "Let op!", headingId: null, headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).not.toHaveAttribute('aria-labelledby');
+    });
 });

package/dist/Avatar/Avatar.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { PersonFillIcon } from '@amsterdam/design-system-react-icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
 export const avatarColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'];

package/dist/Avatar/Avatar.test.js

@@ -34,7 +34,8 @@ describe('Avatar', () => {
         const component = screen.getByText('Gebruiker');
         const svg = container.querySelector('svg');
         expect(component).toBeVisible();
-        expect(svg).toBeVisible();
+        expect(svg).toBeInTheDocument();
+        expect(svg).not.toBeVisible(); // The icon is hidden by default, and only shown when the CSS loads.
     });
     it('renders with a profile picture', () => {
         const { container } = render(_jsx(Avatar, { imageSrc: "image-source", label: "RS" }));

package/dist/Badge/Badge.d.ts

@@ -5,19 +5,19 @@
 import type { HTMLAttributes } from 'react';
 export declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
 type BadgeColor = (typeof badgeColors)[number];
-export type BadgeProps = {
+export type BadgeProps = HTMLAttributes<HTMLElement> & {
     /** The background colour. */
     color?: BadgeColor;
     /** The text content. */
     label: string | number;
-} & HTMLAttributes<HTMLElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
  */
-export declare const Badge: import("react").ForwardRefExoticComponent<{
+export declare const Badge: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     /** The background colour. */
     color?: BadgeColor;
     /** The text content. */
     label: string | number;
-} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+} & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/Badge/Badge.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 badgeColors = ['azure', 'lime', 'magenta', 'orange', 'purple', 'red', 'yellow'];
 /**

package/dist/Blockquote/Blockquote.d.ts

@@ -3,16 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 import type { BlockquoteHTMLAttributes, PropsWithChildren } from 'react';
-export type BlockquoteProps = {
+export type BlockquoteProps = PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
  */
-export declare const Blockquote: import("react").ForwardRefExoticComponent<{
+export declare const Blockquote: import("react").ForwardRefExoticComponent<BlockquoteHTMLAttributes<HTMLQuoteElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
-} & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLQuoteElement>>;

package/dist/Blockquote/Blockquote.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-text-blockquote--docs Blockquote docs at Amsterdam Design System}

package/dist/Breadcrumb/Breadcrumb.js

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

package/dist/Breadcrumb/Breadcrumb.test.js

@@ -30,7 +30,7 @@ describe('Breadcrumb', () => {
             { href: '/link-2', label: 'Link 2' },
             { href: '/link-3', label: 'Link 3' },
         ];
-        const { container } = render(_jsx(Breadcrumb, { children: breadcrumbLinks.map((link, index) => (_jsx(Breadcrumb.Link, { href: link.href, children: link.label }, index))) }));
+        const { container } = render(_jsx(Breadcrumb, { children: breadcrumbLinks.map((link) => (_jsx(Breadcrumb.Link, { href: link.href, children: link.label }, link.label))) }));
         const breadcrumb = screen.getByRole('navigation');
         const breadcrumbs = container.querySelectorAll('.ams-breadcrumb__item');
         expect(breadcrumb).toBeInTheDocument();

package/dist/Breadcrumb/BreadcrumbLink.js

@@ -1,8 +1,4 @@
 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 BreadcrumbLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: "ams-breadcrumb__item", children: _jsx("a", { ...restProps, className: clsx('ams-breadcrumb__link', className), ref: ref, children: children }) })));

package/dist/Breakout/Breakout.js

@@ -1,12 +1,8 @@
 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 { BreakoutCell } from './BreakoutCell';
 import { paddingClasses } from '../Grid/paddingClasses';
+import { BreakoutCell } from './BreakoutCell';
 const BreakoutRoot = forwardRef(({ children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-breakout', gapVertical && `ams-breakout--gap-vertical--${gapVertical}`, paddingClasses('breakout', paddingBottom, paddingTop, paddingVertical), className), ref: ref, children: children })));
 BreakoutRoot.displayName = 'Breakout';
 /**

package/dist/Breakout/Breakout.test.js

@@ -5,8 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { Breakout } from './Breakout';
 import { gridGaps, gridPaddings } from '../Grid/Grid';
+import { Breakout } from './Breakout';
 import '@testing-library/jest-dom';
 describe('Breakout', () => {
     it('renders', () => {

package/dist/Breakout/BreakoutCell.d.ts

@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout';
 import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid';
+import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout';
 export declare const breakoutCellTags: readonly ["article", "div", "section"];
 type BreakoutCellTag = (typeof breakoutCellTags)[number];
 type BreakoutCellSpanAllProp = {
@@ -29,9 +29,9 @@ type BreakoutCellRowSpanAndStartProps = {
     /** The index of the grid row the cell starts at. */
     rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
 };
-export type BreakoutCellProps = {
+export type BreakoutCellProps = BreakoutCellRowSpanAndStartProps & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The HTML element to use. */
     as?: BreakoutCellTag;
-} & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 export declare const BreakoutCell: import("react").ForwardRefExoticComponent<BreakoutCellProps & import("react").RefAttributes<any>>;
 export {};

package/dist/Breakout/BreakoutCell.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 { breakoutCellClasses } from './breakoutCellClasses';
 export const breakoutCellTags = ['article', 'div', 'section'];

package/dist/Breakout/BreakoutCell.test.js

@@ -5,10 +5,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Breakout } from './Breakout';
+import { ariaRoleForTag } from '../common/accessibility';
 import '@testing-library/jest-dom';
+import { Breakout } from './Breakout';
 import { breakoutCellTags } from './BreakoutCell';
-import { ariaRoleForTag } from '../common/accessibility';
 describe('Breakout cell', () => {
     it('renders', () => {
         const { container } = render(_jsx(Breakout.Cell, {}));

package/dist/Button/Button.d.ts

@@ -14,19 +14,19 @@ type IconOnlyProp = {
     /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
     iconOnly?: boolean;
 };
-type IconButtonProps = {
+type IconButtonProps = (IconBeforeProp | IconOnlyProp) & {
     /** Adds an icon to the button, showing it after the label. */
     icon: IconProps['svg'];
-} & (IconBeforeProp | IconOnlyProp);
+};
 type TextButtonProps = {
     icon?: never;
     iconBefore?: never;
     iconOnly?: never;
 };
-export type ButtonProps = {
+export type ButtonProps = (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
     /** The level of prominence. Use a primary button only once per page or section. */
     variant?: 'primary' | 'secondary' | 'tertiary';
-} & (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
  */

package/dist/Button/Button.js

@@ -1,9 +1,5 @@
 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 } from 'react';
 import { Icon } from '../Icon';
 /**

package/dist/CallToActionLink/CallToActionLink.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export type CallToActionLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs CallToActionLink docs at Amsterdam Design System}
+ */
+export declare const CallToActionLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;