@amsterdam/design-system-react 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,32 +1,673 @@
+import * as react from 'react';
+import { PropsWithChildren, AnchorHTMLAttributes, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, TableHTMLAttributes, ButtonHTMLAttributes, SVGProps, ReactNode, InputHTMLAttributes, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+type BackgroundName = 'default' | 'light' | 'dark';
+type LinkListLinkProps = {
+    /** The target url for the link. */
+    href: string;
+    /**
+     * An icon to display instead of the default chevron.
+     * Don’t mix custom icons with chevrons in one list.
+     */
+    icon?: Function;
+    /** Whether the link sits on a dark background. */
+    onBackground?: BackgroundName;
+    /**
+     * The text size for the link.
+     * Use the same size for all items in the list.
+     */
+    size?: 'small' | 'large';
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+type LinkListLinkComponent = ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>>;
+/** One link with a Link List. */
+declare const LinkListLink: LinkListLinkComponent;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+type LinkListComponent = {
+    Link: typeof LinkListLink;
+} & ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>>;
+/** A collection of related links. */
+declare const LinkList: LinkListComponent;
+
+declare const badgeColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
+type BadgeColor = (typeof badgeColors)[number];
+type BadgeProps = {
+    color?: BadgeColor;
+    label: string | number;
+} & HTMLAttributes<HTMLElement>;
+declare const Badge: react.ForwardRefExoticComponent<{
+    color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
+    label: string | number;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableSectionElement>>;
+
+declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableCaptionElement>>;
+
+declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableCellElement>>;
+
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableSectionElement>>;
+
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableSectionElement>>;
+
+declare const TableHeaderCell: react.ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableCellElement>>;
+
+declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLTableRowElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
+type TableComponent = {
+    Body: typeof TableBody;
+    Caption: typeof TableCaption;
+    Cell: typeof TableCell;
+    Footer: typeof TableFooter;
+    Header: typeof TableHeader;
+    HeaderCell: typeof TableHeaderCell;
+    Row: typeof TableRow;
+} & ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>;
+declare const Table: TableComponent;
+
+type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type MegaMenuComponent = {
+    ListCategory: typeof MegaMenuListCategory;
+} & ForwardRefExoticComponent<MegaMenuProps & RefAttributes<HTMLDivElement>>;
+declare const MegaMenu: MegaMenuComponent;
+declare const MegaMenuListCategory: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & RefAttributes<HTMLDivElement>>;
+
+type IconButtonProps = {
+    label: string;
+    onBackground?: 'light' | 'dark';
+    size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
+    svg?: Function;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+declare const IconButton: react.ForwardRefExoticComponent<{
+    label: string;
+    onBackground?: "light" | "dark" | undefined;
+    size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
+    svg?: Function | undefined;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLAnchorElement>>;
+
+type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
+type LogoProps = {
+    brand?: LogoBrand;
+} & SVGProps<SVGSVGElement>;
+declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+
+type HeaderProps = {
+    logoBrand?: LogoBrand;
+    logoLink?: string;
+    logoLinkTitle?: string;
+    title?: string;
+    links?: ReactNode;
+    menu?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+declare const Header: react.ForwardRefExoticComponent<{
+    logoBrand?: LogoBrand | undefined;
+    logoLink?: string | undefined;
+    logoLinkTitle?: string | undefined;
+    title?: string | undefined;
+    links?: ReactNode;
+    menu?: ReactNode;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+
+type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLElement>>;
+
+type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type SearchFieldButtonProps = HTMLAttributes<HTMLButtonElement>;
+declare const SearchFieldButton: react.ForwardRefExoticComponent<SearchFieldButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const SearchFieldInput: react.ForwardRefExoticComponent<{
+    label?: string | undefined;
+} & InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
+type SearchFieldComponent = {
+    Input: typeof SearchFieldInput;
+    Button: typeof SearchFieldButton;
+} & ForwardRefExoticComponent<SearchFieldProps & RefAttributes<HTMLFormElement>>;
+declare const SearchField: SearchFieldComponent;
+
+type DialogProps = {
+    actions?: ReactNode;
+} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
+declare const Dialog: react.ForwardRefExoticComponent<{
+    actions?: ReactNode;
+} & DialogHTMLAttributes<HTMLDialogElement> & {
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDialogElement>>;
+
+type ImageProps = {
+    cover?: Boolean;
+} & ImgHTMLAttributes<HTMLImageElement>;
+declare const Image: react.ForwardRefExoticComponent<{
+    cover?: Boolean | undefined;
+} & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
+
+type PaginationProps = {
+    /**
+     * The maximum amount of pages shown. This has a lower limit of 5
+     */
+    maxVisiblePages?: number;
+    /**
+     * Callback triggered when interaction changes the page number.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * The current page number.
+     */
+    page?: number;
+    /**
+     * The total amount of pages.
+     */
+    totalPages: number;
+} & HTMLAttributes<HTMLElement>;
+declare const Pagination: react.ForwardRefExoticComponent<{
+    /**
+     * The maximum amount of pages shown. This has a lower limit of 5
+     */
+    maxVisiblePages?: number | undefined;
+    /**
+     * Callback triggered when interaction changes the page number.
+     */
+    onPageChange?: ((page: number) => void) | undefined;
+    /**
+     * The current page number.
+     */
+    page?: number | undefined;
+    /**
+     * The total amount of pages.
+     */
+    totalPages: number;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+
+type ScreenMaxWidth = 'wide' | 'x-wide';
+type ScreenProps = {
+    maxWidth?: ScreenMaxWidth;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Screen: react.ForwardRefExoticComponent<{
+    maxWidth?: ScreenMaxWidth | undefined;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+declare const spotlightColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
+type SpotlightColor = (typeof spotlightColors)[number];
+type SpotlightProps = {
+    as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    color?: SpotlightColor;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const Spotlight: react.ForwardRefExoticComponent<{
+    as?: "article" | "aside" | "div" | "footer" | "section" | undefined;
+    color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type CardHeadingGroupProps = {
+    tagline: string;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const CardHeadingGroup: react.ForwardRefExoticComponent<{
+    tagline: string;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLElement>>;
+
+type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+declare const CardLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+type CardComponent = {
+    HeadingGroup: typeof CardHeadingGroup;
+    Link: typeof CardLink;
+} & ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>>;
+declare const Card: CardComponent;
+
+type HeadingLevel = 1 | 2 | 3 | 4;
+type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
+type HeadingProps = {
+    /**
+     * Het hiërarchische niveau van de titel.
+     */
+    level?: HeadingLevel;
+    /**
+     * De visuele grootte van de titel.
+     * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
+     */
+    size?: HeadingSize;
+    /**
+     * De kleur van de titel
+     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+declare const Heading: react.ForwardRefExoticComponent<{
+    /**
+     * Het hiërarchische niveau van de titel.
+     */
+    level?: HeadingLevel | undefined;
+    /**
+     * De visuele grootte van de titel.
+     * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
+     */
+    size?: HeadingSize | undefined;
+    /**
+     * De kleur van de titel
+     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean | undefined;
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLHeadingElement>>;
+
+type AlertProps = {
+    /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
+    closeable?: boolean;
+    /**
+     * The hierarchical level of the alert title within the document.
+     * @default 2
+     */
+    headingLevel?: HeadingProps['level'];
+    /** Allows a callback when dismissing the alert. */
+    onClose?: () => void;
+    /** Highlights the meaning or tone of the message. */
+    severity?: 'error' | 'info' | 'success' | 'warning';
+    /** The title for the alert. */
+    title?: string;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Alert: react.ForwardRefExoticComponent<{
+    /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
+    closeable?: boolean | undefined;
+    /**
+     * The hierarchical level of the alert title within the document.
+     * @default 2
+     */
+    headingLevel?: HeadingProps['level'];
+    /** Allows a callback when dismissing the alert. */
+    onClose?: (() => void) | undefined;
+    /** Highlights the meaning or tone of the message. */
+    severity?: "error" | "info" | "success" | "warning" | undefined;
+    /** The title for the alert. */
+    title?: string | undefined;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
+type AspectRatioProps = {
+    ratio?: Ratio;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const AspectRatio: react.ForwardRefExoticComponent<{
+    ratio?: Ratio | undefined;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const VisuallyHidden: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const FooterBottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const FooterTop: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+type FooterComponent = {
+    Top: typeof FooterTop;
+    Bottom: typeof FooterBottom;
+} & ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>;
+declare const Footer: FooterComponent;
+
+type PageMenuLinkProps = {
+    icon?: Function;
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+declare const PageMenuLink: react.ForwardRefExoticComponent<{
+    icon?: Function | undefined;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type PageMenuProps = {
+    /**
+     * Whether the page menu’s items align to its end.
+     * If the menu itself aligns to the end of its container, you should set this to `true`.
+     */
+    alignEnd?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+type PageMenuComponent = {
+    Link: typeof PageMenuLink;
+} & ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLUListElement>>;
+declare const PageMenu: PageMenuComponent;
+
+declare const TopTaskLink: react.ForwardRefExoticComponent<{
+    label: string;
+    description: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+
+type BlockquoteProps = {
+    /**
+     * De kleur van het citaat.
+     * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
+} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
+declare const Blockquote: react.ForwardRefExoticComponent<{
+    /**
+     * De kleur van het citaat.
+     * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean | undefined;
+} & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLQuoteElement>>;
+
+type CheckboxProps = {
+    invalid?: boolean;
+    indeterminate?: boolean;
+} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+declare const Checkbox: react.ForwardRefExoticComponent<{
+    invalid?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+} & InputHTMLAttributes<HTMLInputElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type PageHeadingProps = {
+    /**
+     * De kleur van de titel
+     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+declare const PageHeading: react.ForwardRefExoticComponent<{
+    /**
+     * De kleur van de titel
+     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean | undefined;
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLHeadingElement>>;
+
+type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
+declare const OrderedListItem: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type OrderedListProps = {
+    markers?: boolean;
+} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+type OrderedListComponent = {
+    Item: typeof OrderedListItem;
+} & ForwardRefExoticComponent<OrderedListProps & RefAttributes<HTMLOListElement>>;
+declare const OrderedList: OrderedListComponent;
+
+type BreadcrumbItemProps = {
+    href: string;
+} & PropsWithChildren<HTMLAttributes<HTMLLIElement>>;
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<{
+    href: string;
+} & HTMLAttributes<HTMLLIElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+type BreadcrumbComponent = {
+    Item: typeof BreadcrumbItem;
+} & ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>;
+declare const Breadcrumb: BreadcrumbComponent;
+
+type LinkOnBackground = 'default' | 'light' | 'dark';
+/** @deprecated Use `LinkList` instead. */
+type DeprecatedLinkVariantInList = 'inList';
+type LinkVariant = 'standalone' | 'inline' | DeprecatedLinkVariantInList;
+type CommonProps = {
+    variant?: LinkVariant;
+    onBackground?: LinkOnBackground;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+type ConditionalProps = {
+    variant?: 'standalone' | 'inline';
+    icon?: never;
+} | {
+    variant?: 'inList';
+    icon?: Function;
+};
+type LinkProps = PropsWithChildren<CommonProps & ConditionalProps>;
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+type ButtonProps = {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<{
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+} & ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type ParagraphProps = {
+    size?: 'small' | 'large';
+    /**
+     * De kleur van de paragraaf
+     * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+declare const Paragraph: react.ForwardRefExoticComponent<{
+    size?: "small" | "large" | undefined;
+    /**
+     * De kleur van de paragraaf
+     * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
+     */
+    inverseColor?: boolean | undefined;
+} & HTMLAttributes<HTMLParagraphElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLParagraphElement>>;
+
+declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLLabelElement>>;
+
+type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
+declare const UnorderedListItem: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type UnorderedListProps = {
+    markers?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+type UnorderedListComponent = {
+    Item: typeof UnorderedListItem;
+} & ForwardRefExoticComponent<UnorderedListProps & RefAttributes<HTMLUListElement>>;
+declare const UnorderedList: UnorderedListComponent;
+
+type IconProps = {
+    size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
+    square?: boolean;
+    svg: Function;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const Icon: react.ForwardRefExoticComponent<{
+    size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
+    square?: boolean | undefined;
+    svg: Function;
+} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
+
+type AccordionSectionProps = {
+    label: string;
+    expanded?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const AccordionSection: react.ForwardRefExoticComponent<{
+    label: string;
+    expanded?: boolean | undefined;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+type AccordionProps = {
+    headingLevel: HeadingLevel;
+    section?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type AccordionComponent = {
+    Section: typeof AccordionSection;
+} & ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
+declare const Accordion: AccordionComponent;
+
+type GridCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    span: 'all';
+    start?: never;
+};
+type GridCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    span?: GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    start?: GridColumnNumber | GridColumnNumbers;
+};
+type GridCellProps = {
+    as?: 'article' | 'div' | 'section';
+} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const GridCell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2023 Gemeente Amsterdam
  */
-export * from './Logo';
-export * from './Dialog';
-export * from './Image';
-export * from './Pagination';
-export * from './Screen';
-export * from './Switch';
-export * from './Highlight';
-export * from './Card';
-export * from './Alert';
-export * from './AspectRatio';
-export * from './VisuallyHidden';
-export * from './Footer';
-export * from './PageMenu';
-export * from './TopTaskLink';
-export * from './Blockquote';
-export * from './Checkbox';
-export * from './PageHeading';
-export * from './OrderedList';
-export * from './Heading';
-export * from './Breadcrumb';
-export * from './Link';
-export * from './Button/';
-export * from './Paragraph';
-export * from './FormLabel';
-export * from './UnorderedList';
-export * from './Icon';
-export * from './Accordion';
-export * from './Grid';
+
+type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridColumnNumbers = {
+    narrow: GridColumnNumber;
+    medium: GridColumnNumber;
+    wide: GridColumnNumber;
+};
+type GridPaddingSize = 'small' | 'medium' | 'large';
+type GridPaddingVerticalProp = {
+    paddingBottom?: never;
+    paddingTop?: never;
+    /** The amount of vertical whitespace above and below the grid. */
+    paddingVertical?: GridPaddingSize;
+};
+type GridPaddingTopAndBottomProps = {
+    /** The amount of vertical whitespace below the grid. */
+    paddingBottom?: GridPaddingSize;
+    /** The amount of vertical whitespace above the grid. */
+    paddingTop?: GridPaddingSize;
+    paddingVertical?: never;
+};
+type GridProps = {
+    /**
+     * Opts in to a less spacious layout.
+     * Decreases whitespace between columns and to the sides of the grid.
+     * This usually works well for applications.
+     * @todo Implement more generally – it will be moved into a theme soon.
+     */
+    compact?: boolean;
+    /** The amount of vertical whitespace between rows of the grid. */
+    gapVertical?: 'none' | 'small' | 'large';
+} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type GridComponent = {
+    Cell: typeof GridCell;
+} & ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
+declare const Grid: GridComponent;
+
+export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormLabel, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, type Ratio, Screen, type ScreenProps, SearchField, type SearchFieldProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, TextInput, type TextInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };