@amsterdam/design-system-react 1.1.0 → 2.0.1

package/dist/Spotlight/Spotlight.d.ts

@@ -7,21 +7,21 @@ export declare const spotlightTags: readonly ["article", "aside", "div", "footer
 type SpotlightTag = (typeof spotlightTags)[number];
 export declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
 type SpotlightColor = (typeof spotlightColors)[number];
-export type SpotlightProps = {
+export type SpotlightProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs Spotlight docs at Amsterdam Design System}
  */
-export declare const Spotlight: import("react").ForwardRefExoticComponent<{
+export declare const Spotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
-} & HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<unknown>>;
 export {};

package/dist/Spotlight/Spotlight.js

@@ -3,7 +3,7 @@ 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 spotlightTags = ['article', 'aside', 'div', 'footer', 'section'];
 export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'];

package/dist/Spotlight/Spotlight.test.js

@@ -5,8 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Spotlight, spotlightColors, spotlightTags } from './Spotlight';
 import { ariaRoleForTag } from '../common/accessibility';
+import { Spotlight, spotlightColors, spotlightTags } from './Spotlight';
 import '@testing-library/jest-dom';
 describe('Spotlight', () => {
     it('renders', () => {

package/dist/StandaloneLink/StandaloneLink.d.ts

@@ -3,18 +3,25 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes } from 'react';
-export type StandaloneLinkProps = {
+import type { IconProps } from '../Icon';
+export type StandaloneLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
-    /** Adds an icon to the link, showing it before the link text. */
-    icon?: Function;
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+    /**
+     * The icon to show before the link text.
+     * @default ChevronForwardIcon
+     */
+    icon?: IconProps['svg'];
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
  */
-export declare const StandaloneLink: import("react").ForwardRefExoticComponent<{
+export declare const StandaloneLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
-    /** Adds an icon to the link, showing it before the link text. */
-    icon?: Function;
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    /**
+     * The icon to show before the link text.
+     * @default ChevronForwardIcon
+     */
+    icon?: IconProps["svg"];
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/StandaloneLink/StandaloneLink.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
+// The `ams-standalone-link--with-icon` class is @deprecated and will be removed in a future release.
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
  */
-export const StandaloneLink = forwardRef(({ children, className, color, icon, ...restProps }, ref) => (_jsxs("a", { ...restProps, className: clsx('ams-standalone-link', color && `ams-standalone-link--${color}`, icon && 'ams-standalone-link--with-icon', className), ref: ref, children: [icon && _jsx(Icon, { svg: icon }), children] })));
+export const StandaloneLink = forwardRef(({ children, className, color, icon = ChevronForwardIcon, ...restProps }, ref) => (_jsxs("a", { ...restProps, className: clsx('ams-standalone-link ams-standalone-link--with-icon', color && `ams-standalone-link--${color}`, className), ref: ref, children: [_jsx(Icon, { svg: icon }), children] })));
 StandaloneLink.displayName = 'StandaloneLink';

package/dist/StandaloneLink/StandaloneLink.test.js

@@ -1,12 +1,9 @@
 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 { StandaloneLink } from './StandaloneLink';
 import '@testing-library/jest-dom';
+const TestIcon = (props) => _jsx("svg", { ...props, className: "test-class" });
 describe('Standalone Link', () => {
     it('renders with href attribute', () => {
         render(_jsx(StandaloneLink, { href: "#" }));
@@ -25,6 +22,11 @@ describe('Standalone Link', () => {
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-standalone-link extra');
     });
+    it('renders a custom icon', () => {
+        const { container } = render(_jsx(StandaloneLink, { icon: TestIcon }));
+        const icon = container.querySelector('svg');
+        expect(icon).toHaveClass('test-class');
+    });
     it('renders the class name for contrast color', () => {
         render(_jsx(StandaloneLink, { color: "contrast", href: "#" }));
         const component = screen.getByRole('link');

package/dist/Switch/Switch.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, useId } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs Switch docs at Amsterdam Design System}

package/dist/Table/Table.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 { TableBody } from './TableBody';
 import { TableCaption } from './TableCaption';

package/dist/Table/TableBody.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 TableBody = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("tbody", { ...restProps, className: clsx('ams-table__body', className), ref: ref, children: children })));
 TableBody.displayName = 'Table.Body';

package/dist/Table/TableCaption.d.ts

@@ -2,6 +2,11 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type TableCaptionProps = PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>>;
 export declare const TableCaption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & {

package/dist/Table/TableCaption.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) 2022 Robbert Broersma
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const TableCaption = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("caption", { ...restProps, className: clsx('ams-table__caption', className), ref: ref, children: children })));
 TableCaption.displayName = 'Table.Caption';

package/dist/Table/TableCell.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 TableCell = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("td", { ...restProps, className: clsx('ams-table__cell', className), ref: ref, children: children })));
 TableCell.displayName = 'Table.Cell';

package/dist/Table/TableFooter.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 TableFooter = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("tfoot", { ...restProps, className: clsx('ams-table__footer', className), ref: ref, children: children })));
 TableFooter.displayName = 'Table.Footer';

package/dist/Table/TableHeader.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 TableHeader = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("thead", { ...restProps, className: clsx('ams-table__header', className), ref: ref, children: children })));
 TableHeader.displayName = 'Table.Header';

package/dist/Table/TableHeaderCell.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 TableHeaderCell = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("th", { ...restProps, className: clsx('ams-table__header-cell', className), ref: ref, children: children })));
 TableHeaderCell.displayName = 'Table.HeaderCell';

package/dist/Table/TableRow.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 TableRow = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("tr", { ...restProps, className: clsx('ams-table__row', className), ref: ref, children: children })));
 TableRow.displayName = 'Table.Row';

package/dist/TableOfContents/TableOfContents.d.ts

@@ -4,32 +4,32 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { HeadingProps } from '../Heading';
-export type TableOfContentsProps = {
+export type TableOfContentsProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The text for the Heading. */
     heading?: string;
     /**
      * The hierarchical level of the Heading within the document.
-     * Note: this intentionally does not change the font size.
+     * Visually, it always has the size of a level 3 Heading.
      */
     headingLevel?: HeadingProps['level'];
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-table-of-contents--docs Table Of Contents docs at Amsterdam Design System}
  */
-export declare const TableOfContents: import("react").ForwardRefExoticComponent<{
+export declare const TableOfContents: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** The text for the Heading. */
     heading?: string;
     /**
      * The hierarchical level of the Heading within the document.
-     * Note: this intentionally does not change the font size.
+     * Visually, it always has the size of a level 3 Heading.
      */
     headingLevel?: HeadingProps["level"];
-} & HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
-    Link: import("react").ForwardRefExoticComponent<{
+    Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
         label: string;
-    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
     List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLUListElement>>;

package/dist/TableOfContents/TableOfContents.js

@@ -1,15 +1,12 @@
 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 { Heading } from '../Heading';
 import { TableOfContentsLink } from './TableOfContentsLink';
 import { TableOfContentsList } from './TableOfContentsList';
-import { Heading } from '../Heading';
+// The 'ams-table-of-contents__heading' class is @deprecated and will be removed in a future release.
 const TableOfContentsRoot = forwardRef(({ children, className, heading, headingLevel = 2, ...restProps }, ref) => {
-    return (_jsxs("nav", { ...restProps, className: clsx('ams-table-of-contents', className), ref: ref, children: [heading && (_jsx(Heading, { className: "ams-table-of-contents__heading", level: headingLevel, size: "level-4", children: heading })), children] }));
+    return (_jsxs("nav", { ...restProps, className: clsx('ams-table-of-contents', className), ref: ref, children: [heading && (_jsx(Heading, { className: "ams-table-of-contents__heading", level: headingLevel, size: "level-3", children: heading })), children] }));
 });
 TableOfContentsRoot.displayName = 'TableOfContents';
 /**

package/dist/TableOfContents/TableOfContentsLink.d.ts

@@ -3,11 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes } from 'react';
-export type TableOfContentsLinkProps = {
+export type TableOfContentsLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /** The text for the link. */
     label: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const TableOfContentsLink: import("react").ForwardRefExoticComponent<{
+};
+export declare const TableOfContentsLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
     /** The text for the link. */
     label: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/TableOfContents/TableOfContentsLink.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const TableOfContentsLink = forwardRef(({ children, className, label, ...restProps }, ref) => (_jsxs("li", { className: "ams-table-of-contents__item", children: [_jsx("a", { ...restProps, className: clsx('ams-table-of-contents__link', className), ref: ref, children: label }), children] })));

package/dist/TableOfContents/TableOfContentsList.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 TableOfContentsList = forwardRef(({ children, className, ...restProps }, ref) => {
     return (_jsx("ul", { ...restProps, className: clsx('ams-table-of-contents__list', className), ref: ref, children: children }));

package/dist/TableOfContents/TableOfContentsList.test.js

@@ -25,7 +25,7 @@ describe('Table of Contents list', () => {
     });
     it('renders its subcomponent', () => {
         const listItems = ['Item 1', 'Item 2', 'Item 3'];
-        const { container } = render(_jsx(TableOfContents.List, { children: listItems.map((item, index) => (_jsx(TableOfContents.Link, { label: `Link ${item}` }, index))) }));
+        const { container } = render(_jsx(TableOfContents.List, { children: listItems.map((item) => (_jsx(TableOfContents.Link, { label: `Link ${item}` }, item))) }));
         const list = screen.getByRole('list');
         const items = container.querySelectorAll('.ams-table-of-contents__item');
         expect(list).toBeInTheDocument();

package/dist/Tabs/Tabs.d.ts

@@ -3,32 +3,32 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type TabsProps = {
+export type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
     onTabChange?: (panelId: string) => void;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs Tabs docs at Amsterdam Design System}
  */
-export declare const Tabs: import("react").ForwardRefExoticComponent<{
+export declare const Tabs: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
     onTabChange?: (panelId: string) => void;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
-    Button: import("react").ForwardRefExoticComponent<{
-        'aria-controls': string;
-    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    Button: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
         children?: import("react").ReactNode | undefined;
+    } & {
+        'aria-controls': string;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
-    Panel: import("react").ForwardRefExoticComponent<{
-        id: string;
-    } & HTMLAttributes<HTMLDivElement> & {
+    Panel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: import("react").ReactNode | undefined;
+    } & {
+        id: string;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/Tabs/Tabs.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, useEffect, useMemo, useState } from 'react';
 import { TabsButton } from './TabsButton';
 import { TabsContext } from './TabsContext';

package/dist/Tabs/TabsButton.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
-export type TabsButtonProps = {
+export type TabsButtonProps = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
     /** The identifier of the corresponding tab panel. */
     'aria-controls': string;
-} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
-export declare const TabsButton: import("react").ForwardRefExoticComponent<{
+};
+export declare const TabsButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** The identifier of the corresponding tab panel. */
     'aria-controls': string;
-} & ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Tabs/TabsButton.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, startTransition, useContext } from 'react';
 import { TabsContext } from './TabsContext';
 export const TabsButton = forwardRef(({ 'aria-controls': ariaControls, children, className, onClick, ...restProps }, ref) => {

package/dist/Tabs/TabsList.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, useImperativeHandle, useRef } from 'react';
 import { useKeyboardFocus } from '../common/useKeyboardFocus';
 export const TabsList = forwardRef(({ children, className, ...restProps }, ref) => {

package/dist/Tabs/TabsPanel.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type TabsPanelProps = {
+export type TabsPanelProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** The identifier of the Tab Panel. */
     id: string;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-export declare const TabsPanel: import("react").ForwardRefExoticComponent<{
+};
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** The identifier of the Tab Panel. */
     id: string;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Tabs/TabsPanel.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, useContext } from 'react';
 import { TabsContext } from './TabsContext';
 export const TabsPanel = forwardRef(({ children, className, id, ...restProps }, ref) => {

package/dist/Tabs/index.d.ts

@@ -4,6 +4,6 @@
  */
 export { Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
-export type { TabsPanelProps } from './TabsPanel';
-export type { TabsListProps } from './TabsList';
 export type { TabsButtonProps } from './TabsButton';
+export type { TabsListProps } from './TabsList';
+export type { TabsPanelProps } from './TabsPanel';

package/dist/TextArea/TextArea.d.ts

@@ -3,18 +3,18 @@
  * Copyright Gemeente Amsterdam
  */
 import type { TextareaHTMLAttributes } from 'react';
-export type TextAreaProps = {
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: 'none' | 'horizontal' | 'vertical';
-} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-area--docs Text Area docs at Amsterdam Design System}
  */
-export declare const TextArea: import("react").ForwardRefExoticComponent<{
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: "none" | "horizontal" | "vertical";
-} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/TextArea/TextArea.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-text-area--docs Text Area docs at Amsterdam Design System}

package/dist/TextInput/TextInput.d.ts

@@ -5,19 +5,19 @@
 import type { InputHTMLAttributes } from 'react';
 export declare const textInputTypes: readonly ["email", "tel", "text", "url"];
 type TextInputType = (typeof textInputTypes)[number];
-export type TextInputProps = {
+export type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-input--docs Text Input docs at Amsterdam Design System}
  */
-export declare const TextInput: import("react").ForwardRefExoticComponent<{
+export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/TextInput/TextInput.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 textInputTypes = ['email', 'tel', 'text', 'url'];
 /**

package/dist/TimeInput/TimeInput.d.ts

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

package/dist/TimeInput/TimeInput.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-time-input--docs Time Input docs at Amsterdam Design System}