@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, ForwardRefExoticComponent, SVGProps, RefAttributes, ImgHTMLAttributes, LabelHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, ComponentType, OptionHTMLAttributes, OptgroupHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, ImgHTMLAttributes, LabelHTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, OlHTMLAttributes, LiHTMLAttributes, ComponentType, OptionHTMLAttributes, OptgroupHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
@@ -9,6 +9,9 @@ type HeadingProps = {
     /** Uses larger or smaller text without changing its position in the heading hierarchy. */
     size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
+ */
 declare const Heading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -30,6 +33,9 @@ type AccordionProps = {
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: 'div' | 'section';
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
+ */
 declare const Accordion: react.ForwardRefExoticComponent<{
     /**
      * The hierarchical level of this Accordion’s Section Headings within the document.
@@ -58,6 +64,9 @@ type AccordionSectionProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
+ */
 declare const ActionGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -81,6 +90,9 @@ type AlertProps = {
     /** The significance of the message conveyed. */
     severity?: Severity;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
+ */
 declare const Alert: react.ForwardRefExoticComponent<{
     /** Whether the user can dismiss the Alert. Adds a button to its top right. */
     closeable?: boolean;
@@ -112,6 +124,9 @@ type AvatarProps = {
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
 } & HTMLAttributes<HTMLSpanElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-avatar--docs Avatar docs at Amsterdam Design System}
+ */
 declare const Avatar: react.ForwardRefExoticComponent<{
     /** The background colour. */
     color?: AvatarColor;
@@ -129,6 +144,9 @@ type BadgeProps = {
     /** 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}
+ */
 declare const Badge: react.ForwardRefExoticComponent<{
     /** The background colour. */
     color?: BadgeColor;
@@ -140,6 +158,9 @@ 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}
+ */
 declare const Blockquote: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -150,6 +171,9 @@ declare const Blockquote: react.ForwardRefExoticComponent<{
 type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
 type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-breadcrumb--docs Breadcrumb docs at Amsterdam Design System}
+ */
 declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
@@ -180,32 +204,40 @@ type GridColumnNumbers = {
     medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
     wide: GridColumnNumber;
 };
-type GridPaddingSize = 'small' | 'medium' | 'large';
+declare const gridGaps: readonly ["none", "large", "2x-large"];
+type GridGap = (typeof gridGaps)[number];
+declare const gridPaddings: readonly ["large", "x-large", "2x-large"];
+type GridPadding = (typeof gridPaddings)[number];
 declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
 type GridTag = (typeof gridTags)[number];
 type GridPaddingVerticalProp = {
     paddingBottom?: never;
     paddingTop?: never;
     /** The amount of space above and below. */
-    paddingVertical?: GridPaddingSize;
+    paddingVertical?: GridPadding;
 };
 type GridPaddingTopAndBottomProps = {
     /** The amount of space below. */
-    paddingBottom?: GridPaddingSize;
+    paddingBottom?: GridPadding;
     /** The amount of space above. */
-    paddingTop?: GridPaddingSize;
+    paddingTop?: GridPadding;
     paddingVertical?: never;
 };
 type GridProps = {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
-    gapVertical?: 'none' | 'small' | 'large';
+    gapVertical?: GridGap;
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
+ */
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<any>> & {
     Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
 };
 
+declare const breakoutCellTags: readonly ["article", "div", "section"];
+type BreakoutCellTag = (typeof breakoutCellTags)[number];
 type BreakoutCellSpanAllProp = {
     /** Lets the cell span the full width of all grid variants. */
     colSpan: 'all';
@@ -230,7 +262,7 @@ type BreakoutCellRowSpanAndStartProps = {
 };
 type BreakoutCellProps = {
     /** The HTML element to use. */
-    as?: 'article' | 'div' | 'section';
+    as?: BreakoutCellTag;
 } & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type BreakoutRowNumber = 1 | 2 | 3 | 4;
@@ -240,11 +272,14 @@ type BreakoutRowNumbers = {
     wide: BreakoutRowNumber;
 };
 type BreakoutProps = GridProps;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
+ */
 declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
     Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
 };
 
-declare const iconSizes: string[];
+declare const iconSizes: readonly ["small", "large", "heading-3", "heading-4", "heading-5", "heading-6"];
 type IconSize = (typeof iconSizes)[number];
 type IconProps = {
     /** Changes the icon colour for readability on a dark background. */
@@ -256,6 +291,10 @@ type IconProps = {
     /** The component rendering the icon’s markup. */
     svg: Function | ReactNode;
 } & HTMLAttributes<HTMLSpanElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
+ * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
+ */
 declare const Icon: react.ForwardRefExoticComponent<{
     /** Changes the icon colour for readability on a dark background. */
     color?: "inverse";
@@ -290,17 +329,49 @@ type ButtonProps = {
     /** The level of prominence. Use a primary button only once per page or section. */
     variant?: 'primary' | 'secondary' | 'tertiary';
 } & (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
+ */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+declare const aspectRatioOptions: readonly ["9:16", "3:4", "1:1", "4:3", "16:9", "16:5"];
+type AspectRatioProps = {
+    /** The aspect ratio to display media content in. */
+    aspectRatio?: (typeof aspectRatioOptions)[number];
+};
+declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
+type CrossAlign = (typeof crossAlignOptions)[number];
+declare const crossAlignOptionsForColumn: ("center" | "start" | "end")[];
+type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
+declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
+type MainAlign = (typeof mainAlignOptions)[number];
+
 type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-card--docs Card docs at Amsterdam Design System}
+ */
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
+    Heading: react.ForwardRefExoticComponent<{
+        color?: "inverse";
+        level: 1 | 2 | 3 | 4;
+        size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+    } & HTMLAttributes<HTMLHeadingElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLHeadingElement>>;
     HeadingGroup: react.ForwardRefExoticComponent<{
         tagline: string;
     } & HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
+    Image: react.ForwardRefExoticComponent<{
+        alt: string;
+    } & AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
     Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
@@ -319,6 +390,9 @@ type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
     /** The maximum length of the field’s value. */
     maxLength: number;
 };
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
+ */
 declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /** The current length of the field’s value. */
     length: number;
@@ -327,35 +401,31 @@ declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTM
 } & react.RefAttributes<HTMLDivElement>>;
 
 type CheckboxProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
     /** Allows being neither checked nor unchecked. */
     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}
+ */
 declare const Checkbox: react.ForwardRefExoticComponent<{
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: react.ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-declare const aspectRatioOptions: readonly ["9:16", "3:4", "1:1", "4:3", "16:9", "16:5"];
-type AspectRatioProps = {
-    /** The aspect ratio to display media content in. */
-    aspectRatio?: (typeof aspectRatioOptions)[number];
-};
-declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
-type CrossAlign = (typeof crossAlignOptions)[number];
-declare const crossAlignOptionsForColumn: ("center" | "start" | "end")[];
-type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
-declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
-type MainAlign = (typeof mainAlignOptions)[number];
-
-declare const columnGaps: readonly ["none", "x-small", "small", "large", "x-large"];
-type ColumnGap = (typeof columnGaps)[number];
-type ColumnTag = 'article' | 'div' | 'section';
+declare const columnTags: readonly ["article", "div", "section"];
+type ColumnTag = (typeof columnTags)[number];
+declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
+type ColumnGap = (typeof columnGapSizes)[number];
 type ColumnProps = {
     /**
      * The vertical alignment of the items in the column.
@@ -378,6 +448,9 @@ type ColumnProps = {
      */
     gap?: ColumnGap;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
+ */
 declare const Column: react.ForwardRefExoticComponent<{
     /**
      * The vertical alignment of the items in the column.
@@ -411,6 +484,9 @@ type DateInputProps = {
     /** 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}
+ */
 declare const DateInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
@@ -425,6 +501,9 @@ type DescriptionListProps = {
     color?: 'inverse';
     termsWidth?: DescriptionListTermsWidth;
 } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-description-list--docs Description List docs at Amsterdam Design System}
+ */
 declare const DescriptionList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -455,6 +534,9 @@ type DialogProps = {
     /** The text for the Heading. */
     heading: string;
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs Dialog docs at Amsterdam Design System}
+ */
 declare const Dialog: react.ForwardRefExoticComponent<{
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
@@ -475,6 +557,9 @@ type ErrorMessageProps = {
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
     prefix?: string;
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
+ */
 declare const ErrorMessage: react.ForwardRefExoticComponent<{
     /** An icon to display instead of the default icon. */
     icon?: Function;
@@ -488,6 +573,9 @@ type FieldProps = {
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field--docs Field docs at Amsterdam Design System}
+ */
 declare const Field: react.ForwardRefExoticComponent<{
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
@@ -512,6 +600,9 @@ type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
     /** The text for the caption. */
     legend: string;
 } & HintProps;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
+ */
 declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
     children?: react.ReactNode | undefined;
 } & {
@@ -525,6 +616,9 @@ declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLField
 } & react.RefAttributes<HTMLFieldSetElement>>;
 
 type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-figure--docs Figure docs at Amsterdam Design System}
+ */
 declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
@@ -536,9 +630,15 @@ declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement
 };
 
 type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-input--docs File Input docs at Amsterdam Design System}
+ */
 declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
 
 type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-list--docs File List docs at Amsterdam Design System}
+ */
 declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLOListElement>> & {
@@ -548,121 +648,46 @@ declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
     } & HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
 };
 
-type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLElement>> & {
-    Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLUListElement>>;
-    MenuLink: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLAnchorElement>>;
-    Spotlight: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLDivElement>>;
-};
-
-type FooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-
-type FooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-
-type FooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
-type LogoProps = {
-    /** The name of the brand for which to display the logo. */
-    brand?: LogoBrand;
-} & SVGProps<SVGSVGElement>;
-declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
-
-type HeaderProps = {
-    /** The name of the application. */
-    brandName?: string;
-    /** The name of the brand for which to display the logo. */
-    logoBrand?: LogoBrand;
-    /** The url for the link on the logo. */
-    logoLink?: string;
-    /** The accessible text for the link on the logo. */
-    logoLinkTitle?: string;
-    /** The text for the menu button. */
-    menuButtonText?: string;
-    /** A slot for the menu items. Use Header.MenuLink here. */
-    menuItems?: ReactNode;
-    /** The accessible label for the navigation section. */
-    navigationLabel?: string;
-    /** Whether the menu button is visible on wide screens.  */
-    noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement>;
-declare const Header: react.ForwardRefExoticComponent<{
-    /** The name of the application. */
-    brandName?: string;
-    /** The name of the brand for which to display the logo. */
-    logoBrand?: LogoBrand;
-    /** The url for the link on the logo. */
-    logoLink?: string;
-    /** The accessible text for the link on the logo. */
-    logoLinkTitle?: string;
-    /** The text for the menu button. */
-    menuButtonText?: string;
-    /** A slot for the menu items. Use Header.MenuLink here. */
-    menuItems?: ReactNode;
-    /** The accessible label for the navigation section. */
-    navigationLabel?: string;
-    /** Whether the menu button is visible on wide screens.  */
-    noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
-    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
-    MenuLink: react.ForwardRefExoticComponent<{
-        fixed?: boolean;
-    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: ReactNode | undefined;
-    } & react.RefAttributes<HTMLAnchorElement>>;
-};
-
-type HeaderMenuLinkProps = {
-    fixed?: boolean;
-} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-
 type IconButtonProps = {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** The size of the icon. */
+    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
     size?: IconProps['size'];
     /** The component rendering the icon’s markup. */
     svg?: IconProps['svg'];
 } & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
+ */
 declare const IconButton: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** The size of the icon. */
+    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
     size?: IconProps["size"];
     /** The component rendering the icon’s markup. */
     svg?: IconProps["svg"];
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
 type ImageProps = {
-    /**
-     * A textual description of the content of the image.
-     */
+    /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement>;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
+ */
 declare const Image: react.ForwardRefExoticComponent<{
-    /**
-     * A textual description of the content of the image.
-     */
+    /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
 
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;
 
 type ImageSliderImageProps = ImageProps;
@@ -678,6 +703,9 @@ type ImageSliderProps = {
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs Image Slider docs at Amsterdam Design System}
+ */
 declare const ImageSlider: react.ForwardRefExoticComponent<{
     /** Display buttons to navigate to the previous or next image. */
     controls?: boolean;
@@ -735,6 +763,9 @@ type InvalidFormAlertProps = {
      **/
     headingLevel: HeadingProps['level'];
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-invalid-form-alert--docs Invalid Form Alert docs at Amsterdam Design System}
+ */
 declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
     /**
      * The text following the error count.
@@ -765,6 +796,9 @@ declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
     headingLevel: HeadingProps["level"];
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
+ */
 declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
     children?: react.ReactNode | undefined;
 } & react.HTMLAttributes<HTMLElement> & {
@@ -772,21 +806,22 @@ declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLab
     optional?: boolean;
 } & react.RefAttributes<HTMLLabelElement>>;
 
-type LinkVariant = 'standalone' | 'inline';
 type LinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
-    /** Whether the link is inline or stands alone. */
-    variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs Link docs at Amsterdam Design System}
+ */
 declare const Link: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
-    /** Whether the link is inline or stands alone. */
-    variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
 type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link-list--docs Link List docs at Amsterdam Design System}
+ */
 declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
@@ -808,23 +843,29 @@ type LinkListLinkProps = {
     size?: 'small' | 'large';
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
+type LogoProps = {
+    /** The name of the brand for which to display the logo. */
+    brand?: LogoBrand;
+} & SVGProps<SVGSVGElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
+ */
+declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+
 type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-mark--docs Mark docs at Amsterdam Design System}
+ */
 declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>>;
 
-type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-/** @deprecated Use child components in Header instead. */
-declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLDivElement>> & {
-    ListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLDivElement>>;
-};
-
-type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-
 type OrderedListProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
@@ -833,6 +874,9 @@ type OrderedListProps = {
     /** The size of the text. */
     size?: 'small';
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
+ */
 declare const OrderedList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -851,14 +895,107 @@ declare const OrderedList: react.ForwardRefExoticComponent<{
 type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
 type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-overlap--docs Overlap docs at Amsterdam Design System}
+ */
 declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
+ */
+declare const Page: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
+ */
+declare const PageFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>> & {
+    Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLUListElement>>;
+    MenuLink: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+    Spotlight: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type PageFooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+
+type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+
+type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+type PageHeaderProps = {
+    /** The name of the application. */
+    brandName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The React component to use for the logo link. */
+    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
+ */
+declare const PageHeader: react.ForwardRefExoticComponent<{
+    /** The name of the application. */
+    brandName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The React component to use for the logo link. */
+    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
+    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
+    MenuLink: react.ForwardRefExoticComponent<{
+        fixed?: boolean;
+    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+type PageHeaderMenuLinkProps = {
+    fixed?: boolean;
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+
 type PageHeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
+ */
 declare const PageHeading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -866,31 +1003,6 @@ declare const PageHeading: react.ForwardRefExoticComponent<{
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
-type PageMenuProps = {
-    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
-    alignEnd?: boolean;
-    /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-declare const PageMenu: react.ForwardRefExoticComponent<{
-    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
-    alignEnd?: boolean;
-    /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean;
-} & HTMLAttributes<HTMLUListElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLUListElement>> & {
-    Link: react.ForwardRefExoticComponent<{
-        icon?: Function;
-    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLAnchorElement>>;
-};
-
-type PageMenuLinkProps = {
-    icon?: Function;
-} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-
 type PaginationProps = {
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
@@ -918,6 +1030,9 @@ type PaginationProps = {
      */
     visuallyHiddenLabelId?: string;
 } & HTMLAttributes<HTMLElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
+ */
 declare const Pagination: react.ForwardRefExoticComponent<{
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
@@ -952,6 +1067,9 @@ type ParagraphProps = {
     /** The size of the text. */
     size?: 'small' | 'large';
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
+ */
 declare const Paragraph: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -965,6 +1083,9 @@ type PasswordInputProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-password-input--docs Password Input docs at Amsterdam Design System}
+ */
 declare const PasswordInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
@@ -976,6 +1097,9 @@ type RadioProps = {
     /** 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-radio--docs Radio docs at Amsterdam Design System}
+ */
 declare const Radio: react.ForwardRefExoticComponent<{
     /** An icon to display instead of the default icon. */
     icon?: ReactNode;
@@ -985,9 +1109,10 @@ declare const Radio: react.ForwardRefExoticComponent<{
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-declare const rowGaps: readonly ["none", "x-small", "small", "large", "x-large"];
-type RowGap = (typeof rowGaps)[number];
-type RowTag = 'article' | 'div' | 'section';
+declare const rowTags: readonly ["article", "div", "section"];
+type RowTag = (typeof rowTags)[number];
+declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
+type RowGap = (typeof rowGapSizes)[number];
 type RowProps = {
     /**
      * The horizontal alignment of the items in the row.
@@ -1015,6 +1140,9 @@ type RowProps = {
      */
     wrap?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
+ */
 declare const Row: react.ForwardRefExoticComponent<{
     /**
      * The horizontal alignment of the items in the row.
@@ -1045,23 +1173,10 @@ declare const Row: react.ForwardRefExoticComponent<{
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
-type ScreenMaxWidth = 'wide' | 'x-wide';
-type ScreenProps = {
-    /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean;
-    /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-declare const Screen: react.ForwardRefExoticComponent<{
-    /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean;
-    /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLDivElement>>;
-
 type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-search-field--docs Search Field docs at Amsterdam Design System}
+ */
 declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLFormElement>> & {
@@ -1116,6 +1231,8 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -1357,6 +1474,9 @@ type SelectProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-select--docs Select docs at Amsterdam Design System}
+ */
 declare const Select: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
@@ -1372,33 +1492,63 @@ declare const Select: react.ForwardRefExoticComponent<{
 };
 
 type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-skip-link--docs Skip Link docs at Amsterdam Design System}
+ */
 declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLAnchorElement>>;
 
+declare const spotlightTags: readonly ["article", "aside", "div", "footer", "section"];
+type SpotlightTag = (typeof spotlightTags)[number];
 declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
 type SpotlightColor = (typeof spotlightColors)[number];
 type SpotlightProps = {
     /** The HTML element to use. */
-    as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    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}
+ */
 declare const Spotlight: react.ForwardRefExoticComponent<{
     /** The HTML element to use. */
-    as?: "article" | "aside" | "div" | "footer" | "section";
+    as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
 } & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
+type StandaloneLinkProps = {
+    /** 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'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
+ */
+declare const StandaloneLink: react.ForwardRefExoticComponent<{
+    /** 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"> & react.RefAttributes<HTMLAnchorElement>>;
+
 type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs Switch docs at Amsterdam Design System}
+ */
 declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-table--docs Table docs at Amsterdam Design System}
+ */
 declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLTableElement>> & {
@@ -1434,6 +1584,9 @@ type TableOfContentsProps = {
      */
     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}
+ */
 declare const TableOfContents: react.ForwardRefExoticComponent<{
     /** The text for the Heading. */
     heading?: string;
@@ -1461,19 +1614,22 @@ type TableOfContentsLinkProps = {
 type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
 type TabsProps = {
-    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
-    onTabChange?: (tabId: string) => void;
+    onTabChange?: (panelId: string) => void;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs Tabs docs at Amsterdam Design System}
+ */
 declare const Tabs: react.ForwardRefExoticComponent<{
-    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
-    onTabChange?: (tabId: string) => void;
+    onTabChange?: (panelId: string) => void;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     Button: react.ForwardRefExoticComponent<{
-        tab: string;
+        'aria-controls': string;
     } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
@@ -1481,22 +1637,22 @@ declare const Tabs: react.ForwardRefExoticComponent<{
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
     Panel: react.ForwardRefExoticComponent<{
-        tab: string;
+        id: string;
     } & HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
 type TabsPanelProps = {
-    /** The identifier of the corresponding Tab. */
-    tab: string;
+    /** The identifier of the Tab Panel. */
+    id: string;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsButtonProps = {
-    /** An identifier. */
-    tab: string;
+    /** The identifier of the corresponding tab panel. */
+    'aria-controls': string;
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
@@ -1505,6 +1661,9 @@ type TextAreaProps = {
     /** 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}
+ */
 declare const TextArea: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
@@ -1520,6 +1679,9 @@ type TextInputProps = {
     /** 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}
+ */
 declare const TextInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
@@ -1531,18 +1693,14 @@ type TimeInputProps = {
     /** 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}
+ */
 declare const TimeInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-declare const TopTaskLink: react.ForwardRefExoticComponent<{
-    /** The text content. */
-    description: string;
-    /** The title. */
-    label: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
-
 type UnorderedListProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
@@ -1551,6 +1709,9 @@ type UnorderedListProps = {
     /** The size of the text. */
     size?: 'small';
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-unordered-list--docs Unordered List docs at Amsterdam Design System}
+ */
 declare const UnorderedList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
@@ -1568,5 +1729,5 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
 
 type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
-export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Footer, Grid, Header, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, MegaMenu, OrderedList, Overlap, PageHeading, PageMenu, Pagination, Paragraph, PasswordInput, Radio, Row, Screen, SearchField, Select, SkipLink, Spotlight, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, TopTaskLink, UnorderedList, generateAspectRatioClass };
-export type { AccordionProps, AccordionSectionProps, ActionGroupProps, AlertProps, AvatarProps, BadgeProps, BlockquoteProps, BreadcrumbLinkProps, BreadcrumbProps, BreakoutCellProps, BreakoutProps, ButtonProps, CardHeadingGroupProps, CardLinkProps, CardProps, CharacterCountProps, CheckboxProps, ColumnProps, DateInputProps, DescriptionListDescriptionProps, DescriptionListProps, DescriptionListTermProps, DialogProps, ErrorLink, ErrorMessageProps, FieldProps, FieldSetProps, FigureProps, FileInputProps, FileListProps, FooterMenuLinkProps, FooterMenuProps, FooterProps, FooterSpotlightProps, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, HeaderMenuLinkProps, HeaderProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderItemProps, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, MegaMenuListCategoryProps, MegaMenuProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageHeadingProps, PageMenuLinkProps, PageMenuProps, PaginationProps, ParagraphProps, PasswordInputProps, RadioProps, RowProps, ScreenProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, SwitchProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };
+export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, OrderedList, Overlap, Page, PageFooter, PageHeader, PageHeading, Pagination, Paragraph, PasswordInput, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, UnorderedList, generateAspectRatioClass };
+export type { AccordionProps, AccordionSectionProps, ActionGroupProps, AlertProps, AvatarProps, BadgeProps, BlockquoteProps, BreadcrumbLinkProps, BreadcrumbProps, BreakoutCellProps, BreakoutProps, ButtonProps, CardHeadingGroupProps, CardLinkProps, CardProps, CharacterCountProps, CheckboxProps, ColumnProps, DateInputProps, DescriptionListDescriptionProps, DescriptionListProps, DescriptionListTermProps, DialogProps, ErrorLink, ErrorMessageProps, FieldProps, FieldSetProps, FigureProps, FileInputProps, FileListProps, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderItemProps, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageFooterMenuLinkProps, PageFooterMenuProps, PageFooterProps, PageFooterSpotlightProps, PageHeaderMenuLinkProps, PageHeaderProps, PageHeadingProps, PageProps, PaginationProps, ParagraphProps, PasswordInputProps, RadioProps, RowProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, StandaloneLinkProps, SwitchProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };