@amsterdam/design-system-react 2.0.2 → 2.1.0

package/dist/Accordion/Accordion.d.ts

@@ -29,10 +29,10 @@ export declare const Accordion: import("react").ForwardRefExoticComponent<{
 } & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
-    Section: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Section: import("react").ForwardRefExoticComponent<{
         expanded?: boolean;
         label: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/Accordion/AccordionSection.d.ts

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

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type AppProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-TODO-ADD-GROUP-app--docs App docs at Amsterdam Design System}
+ */
+export declare const App: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/App/App.js

@@ -0,0 +1,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-TODO-ADD-GROUP-app--docs App docs at Amsterdam Design System}
+ */
+export const App = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-app', className), ref: ref, children: children })));
+App.displayName = 'App';

package/dist/App/App.test.d.ts

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

package/dist/App/App.test.js

@@ -0,0 +1,33 @@
+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 { App } from './App';
+import '@testing-library/jest-dom';
+describe('App', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(App, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(App, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-app');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(App, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-app extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(App, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/App/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { App } from './App';
+export type { AppProps } from './App';

package/dist/App/index.js

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

package/dist/AppNavigation/AppNavigation.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type AppNavigationProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+    expandable?: boolean;
+    expanded?: boolean;
+    onToggle?: () => void;
+};
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-TODO-ADD-GROUP-app-navigation--docs AppNavigation docs at Amsterdam Design System}
+ */
+export declare const AppNavigationRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    expandable?: boolean;
+    expanded?: boolean;
+    onToggle?: () => void;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const AppNavigation: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    expandable?: boolean;
+    expanded?: boolean;
+    onToggle?: () => void;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Button: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & {
+        active?: boolean;
+        icon?: import("..").IconProps["svg"];
+        label: string;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & {
+        active?: boolean;
+        icon?: import("..").IconProps["svg"];
+        label: string;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    Menu: import("react").ForwardRefExoticComponent<import("react").OlHTMLAttributes<HTMLOListElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLOListElement>>;
+};

package/dist/AppNavigation/AppNavigation.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { IconButton } from '../IconButton';
+import { AppNavigationMenuButton } from './AppNavigationButton';
+import { AppNavigationMenuLink } from './AppNavigationLink';
+import { AppNavigationMenu } from './AppNavigationMenu';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-TODO-ADD-GROUP-app-navigation--docs AppNavigation docs at Amsterdam Design System}
+ */
+export const AppNavigationRoot = forwardRef(({ children, className, expandable, expanded, onToggle, ...restProps }, ref) => (_jsxs("nav", { ...restProps, className: clsx('ams-app-navigation', expanded && 'ams-app-navigation--expanded', className), ref: ref, children: [expandable && (_jsx(IconButton, { className: "ams-app-navigation__toggle", color: "inverse", label: "Toggle navigation", onClick: onToggle, size: "large", svg: ChevronForwardIcon })), _jsx("ol", { className: "ams-app-navigation__menu", children: children })] })));
+AppNavigationRoot.displayName = 'AppNavigation';
+export const AppNavigation = Object.assign(AppNavigationRoot, {
+    Button: AppNavigationMenuButton,
+    Link: AppNavigationMenuLink,
+    Menu: AppNavigationMenu,
+});

package/dist/AppNavigation/AppNavigation.test.d.ts

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

package/dist/AppNavigation/AppNavigation.test.js

@@ -0,0 +1,33 @@
+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 { AppNavigation } from './AppNavigation';
+import '@testing-library/jest-dom';
+describe('AppNavigation', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(AppNavigation, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(AppNavigation, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-app-navigation');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(AppNavigation, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-app-navigation extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(AppNavigation, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/AppNavigation/AppNavigationButton.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
+export type AppNavigationMenuButtonProps = PropsWithChildren<HTMLAttributes<HTMLButtonElement>> & {
+    active?: boolean;
+    icon?: IconProps['svg'];
+    label: string;
+};
+export declare const AppNavigationMenuButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    active?: boolean;
+    icon?: IconProps["svg"];
+    label: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/AppNavigation/AppNavigationButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from '@amsterdam/design-system-react-icons';
+import { clsx } from 'clsx';
+import { Children, isValidElement } from 'react';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const AppNavigationMenuButton = forwardRef(({ active, children, className, icon, label, ...restProps }, ref) => {
+    // const [submenuOpen, setSubmenuOpen] = useState(false)
+    // Check if children contain an element with type 'AppNavigation.Menu'
+    const hasSubMenu = Children.toArray(children).some((child) => isValidElement(child) && child.type?.displayName === 'AppNavigation.Menu');
+    return (_jsxs("li", { className: clsx('ams-app-navigation__menu-item'), children: [_jsxs("button", { ...restProps, 
+                //   aria-expanded={hasSubMenu ? submenuOpen : undefined}
+                className: clsx('ams-app-navigation__menu-link', active && 'ams-app-navigation__menu-link--active', className), 
+                //   onClick={handleClick}
+                ref: ref, children: [icon && _jsx(Icon, { size: "large", svg: icon }), _jsx("span", { className: "ams-app-navigation__menu-link-label", children: label }), hasSubMenu && _jsx(Icon, { className: "ams-app-navigation__menu-link-chevron", size: "small", svg: ChevronDownIcon })] }), children] }));
+});
+AppNavigationMenuButton.displayName = 'AppNavigation.MenuButton';

package/dist/AppNavigation/AppNavigationLink.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
+import type { IconProps } from '../Icon';
+export type AppNavigationMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    active?: boolean;
+    icon?: IconProps['svg'];
+    label: string;
+};
+export declare const AppNavigationMenuLink: React.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: React.ReactNode | undefined;
+} & {
+    active?: boolean;
+    icon?: IconProps["svg"];
+    label: string;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/AppNavigation/AppNavigationLink.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from '@amsterdam/design-system-react-icons';
+import { clsx } from 'clsx';
+import { Children, isValidElement, useState } from 'react';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const AppNavigationMenuLink = forwardRef(({ active, children, className, icon, label, ...restProps }, ref) => {
+    const [submenuOpen, setSubmenuOpen] = useState(false);
+    // Check if children contain an element with type 'AppNavigation.Menu'
+    const hasSubMenu = Children.toArray(children).some((child) => isValidElement(child) && child.type?.displayName === 'AppNavigation.Menu');
+    const handleClick = (e) => {
+        if (hasSubMenu) {
+            e.preventDefault();
+            setSubmenuOpen((open) => !open);
+        }
+    };
+    return (_jsxs("li", { className: clsx('ams-app-navigation__menu-item', submenuOpen && 'ams-app-navigation__menu-item--open'), children: [_jsxs("a", { ...restProps, "aria-expanded": hasSubMenu ? submenuOpen : undefined, className: clsx('ams-app-navigation__menu-link', active && 'ams-app-navigation__menu-link--active', className), onClick: handleClick, ref: ref, children: [icon && _jsx(Icon, { size: "large", svg: icon }), _jsx("span", { className: "ams-app-navigation__menu-link-label", children: label }), hasSubMenu && _jsx(Icon, { className: "ams-app-navigation__menu-link-chevron", size: "small", svg: ChevronDownIcon })] }), children] }));
+});
+AppNavigationMenuLink.displayName = 'AppNavigation.MenuLink';

package/dist/AppNavigation/AppNavigationMenu.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { OlHTMLAttributes, PropsWithChildren } from 'react';
+export type AppNavigationMenuProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+export declare const AppNavigationMenu: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>>;

package/dist/AppNavigation/AppNavigationMenu.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+export const AppNavigationMenu = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ol", { className: clsx('ams-app-navigation__menu', className), ref: ref, ...restProps, children: children })));
+AppNavigationMenu.displayName = 'AppNavigation.Menu';

package/dist/AppNavigation/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { AppNavigation } from './AppNavigation';
+export type { AppNavigationProps } from './AppNavigation';

package/dist/AppNavigation/index.js

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

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 = HTMLAttributes<HTMLElement> & {
+export type BadgeProps = {
     /** 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<HTMLAttributes<HTMLElement> & {
+export declare const Badge: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: BadgeColor;
     /** The text content. */
     label: string | number;
-} & import("react").RefAttributes<HTMLElement>>;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/Blockquote/Blockquote.d.ts

@@ -3,16 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 import type { BlockquoteHTMLAttributes, PropsWithChildren } from 'react';
-export type BlockquoteProps = PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> & {
+export type BlockquoteProps = {
     /** 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<BlockquoteHTMLAttributes<HTMLQuoteElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Blockquote: import("react").ForwardRefExoticComponent<{
     /** 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/Breakout/BreakoutCell.d.ts

@@ -29,9 +29,9 @@ type BreakoutCellRowSpanAndStartProps = {
     /** The index of the grid row the cell starts at. */
     rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
 };
-export type BreakoutCellProps = BreakoutCellRowSpanAndStartProps & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type BreakoutCellProps = {
     /** The HTML element to use. */
     as?: BreakoutCellTag;
-};
+} & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>> & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps);
 export declare const BreakoutCell: import("react").ForwardRefExoticComponent<BreakoutCellProps & import("react").RefAttributes<any>>;
 export {};

package/dist/Button/Button.d.ts

@@ -14,19 +14,21 @@ type IconOnlyProp = {
     /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
     iconOnly?: boolean;
 };
-type IconButtonProps = (IconBeforeProp | IconOnlyProp) & {
+type IconButtonProps = {
     /** 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 = (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
+export declare const buttonVariants: readonly ["primary", "secondary", "tertiary"];
+type ButtonVariant = (typeof buttonVariants)[number];
+export type ButtonProps = {
     /** The level of prominence. Use a primary button only once per page or section. */
-    variant?: 'primary' | 'secondary' | 'tertiary';
-};
+    variant?: ButtonVariant;
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & (IconButtonProps | TextButtonProps);
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
  */

package/dist/Button/Button.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
+export const buttonVariants = ['primary', 'secondary', 'tertiary'];
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
  */

package/dist/Card/Card.d.ts

@@ -10,21 +10,21 @@ export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
-    Heading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Heading: import("react").ForwardRefExoticComponent<{
         color?: "inverse";
-        level: 1 | 2 | 3 | 4;
+        level: 2 | 1 | 3 | 4;
         size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
-    } & import("react").RefAttributes<HTMLHeadingElement>>;
-    HeadingGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    } & HTMLAttributes<HTMLHeadingElement> & {
         children?: import("react").ReactNode | undefined;
-    } & {
+    } & import("react").RefAttributes<HTMLHeadingElement>>;
+    HeadingGroup: import("react").ForwardRefExoticComponent<{
         tagline: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLElement>>;
-    Image: import("react").ForwardRefExoticComponent<import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & {
+    Image: import("react").ForwardRefExoticComponent<{
         alt: string;
-    } & import("react").RefAttributes<HTMLImageElement>>;
+    } & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;
     Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Card/CardHeading.d.ts

@@ -2,10 +2,10 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export declare const CardHeading: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLHeadingElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const CardHeading: import("react").ForwardRefExoticComponent<{
     color?: "inverse";
-    level: 1 | 2 | 3 | 4;
+    level: 2 | 1 | 3 | 4;
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & import("react").HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Card/CardHeadingGroup.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type CardHeadingGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type CardHeadingGroupProps = {
     /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
     tagline: string;
-};
-export declare const CardHeadingGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const CardHeadingGroup: import("react").ForwardRefExoticComponent<{
     /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
     tagline: string;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/Card/CardImage.d.ts

@@ -2,6 +2,6 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export declare const CardImage: import("react").ForwardRefExoticComponent<import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & {
+export declare const CardImage: import("react").ForwardRefExoticComponent<{
     alt: string;
-} & import("react").RefAttributes<HTMLImageElement>>;
+} & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Checkbox/Checkbox.d.ts

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+export type CheckboxProps = {
     /**
      * An icon to display instead of the default icon.
      * @default CheckboxIcon
@@ -13,13 +13,11 @@ export type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInput
     indeterminate?: boolean;
     /** 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-checkbox--docs Checkbox docs at Amsterdam Design System}
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
-} & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     /**
      * An icon to display instead of the default icon.
      * @default CheckboxIcon
@@ -29,4 +27,6 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<In
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & {
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Column/Column.d.ts

@@ -8,7 +8,7 @@ export declare const columnTags: readonly ["article", "div", "section"];
 type ColumnTag = (typeof columnTags)[number];
 export declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type ColumnGap = (typeof columnGapSizes)[number];
-export type ColumnProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type ColumnProps = {
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -29,13 +29,11 @@ export type ColumnProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      * @default medium
      */
     gap?: ColumnGap;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
  */
-export declare const Column: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Column: import("react").ForwardRefExoticComponent<{
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -56,5 +54,7 @@ export declare const Column: import("react").ForwardRefExoticComponent<HTMLAttri
      * @default medium
      */
     gap?: ColumnGap;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<unknown>>;
 export {};

package/dist/DateInput/DateInput.d.ts

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