@amsterdam/design-system-react 2.0.2 → 2.2.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/Avatar/Avatar.d.ts

@@ -8,7 +8,7 @@ type AvatarColor = (typeof avatarColors)[number];
 export type AvatarProps = {
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
@@ -19,7 +19,7 @@ export type AvatarProps = {
 export declare const Avatar: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;

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;
         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;
     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>, "aria-invalid" | "type"> & {
+    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>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/DescriptionList/DescriptionList.d.ts

@@ -5,20 +5,20 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
 type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
-export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
+export type DescriptionListProps = {
     /** Changes the text colour for readability on a dark background. */
     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}
  */
-export declare const DescriptionList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     termsWidth?: DescriptionListTermsWidth;
+} & HTMLAttributes<HTMLDListElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDListElement>> & {
     Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/Dialog/Dialog.d.ts

@@ -2,28 +2,27 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { DialogHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { MouseEvent } from 'react';
-export type DialogProps = PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> & {
+import type { DialogHTMLAttributes, MouseEvent, PropsWithChildren, ReactNode } from 'react';
+export type DialogProps = {
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
     /** Content for the footer, often one Button or an Action Group containing more of them. */
     footer?: ReactNode;
     /** 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}
  */
-export declare const Dialog: import("react").ForwardRefExoticComponent<DialogHTMLAttributes<HTMLDialogElement> & {
-    children?: ReactNode | undefined;
-} & {
+export declare const Dialog: import("react").ForwardRefExoticComponent<{
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
     /** Content for the footer, often one Button or an Action Group containing more of them. */
     footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
+} & DialogHTMLAttributes<HTMLDialogElement> & {
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDialogElement>> & {
     close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
     open: (id: string) => void;

package/dist/Field/Field.d.ts

@@ -3,16 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FieldProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export 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}
  */
-export declare const Field: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Field: import("react").ForwardRefExoticComponent<{
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/FieldSet/FieldSet.d.ts

@@ -3,24 +3,45 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-import { HintProps } from '../Hint';
-export type FieldSetProps = HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
-    /** Whether the field set has an input with a validation error */
+import type { HintProps } from '../Hint';
+export type FieldSetProps = {
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
+    /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
-};
+    /**
+     * Render a level 1 heading in the legend.
+     * Set this if the Field Set is the only content of the page.
+     */
+    legendIsPageHeading?: boolean;
+} & HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
 export declare const FieldSet: import("react").ForwardRefExoticComponent<{
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
+    /** Whether the field set has an input with a validation error. */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+    /**
+     * Render a level 1 heading in the legend.
+     * Set this if the Field Set is the only content of the page.
+     */
+    legendIsPageHeading?: boolean;
+} & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
-} & HTMLAttributes<HTMLFieldSetElement> & {
-    /** Whether the field set has an input with a validation error */
-    invalid?: boolean;
-    /** The text for the caption. */
-    legend: string;
-} & import("react").RefAttributes<HTMLFieldSetElement>>;
+} & HTMLAttributes<HTMLFieldSetElement> & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/FieldSet/FieldSet.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Hint } from '../Hint';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
-export const FieldSet = forwardRef(({ children, className, hint, invalid, legend, optional, ...restProps }, ref) => {
-    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsxs("legend", { className: "ams-field-set__legend", children: [legend, " ", _jsx(Hint, { hint: hint, optional: optional })] }), children] }));
+export const FieldSet = forwardRef(({ children, className, hint, inFieldSet, invalid, legend, legendIsPageHeading, optional, ...restProps }, ref) => {
+    const legendContent = (_jsxs(_Fragment, { children: [legend, " ", _jsx(Hint, { hint: hint, inFieldSet: inFieldSet, optional: optional })] }));
+    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsx("legend", { className: clsx('ams-field-set__legend', inFieldSet && 'ams-field-set__legend--in-fieldset'), children: legendIsPageHeading ? _jsx("h1", { className: "ams-field-set__heading", children: legendContent }) : legendContent }), children] }));
 });
 FieldSet.displayName = 'FieldSet';

package/dist/Figure/Figure.d.ts

@@ -10,9 +10,9 @@ export type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const Figure: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
-    Caption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Caption: import("react").ForwardRefExoticComponent<{
         color?: "inverse";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLElement>>;
 };

package/dist/Figure/FigureCaption.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FigureCaptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type FigureCaptionProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-};
-export declare const FigureCaption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const FigureCaption: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/FileList/FileList.d.ts

@@ -13,8 +13,8 @@ export declare const FileListRoot: import("react").ForwardRefExoticComponent<HTM
 export declare const FileList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {
-    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    Item: import("react").ForwardRefExoticComponent<{
         file: File;
         onDelete?: () => void;
-    } & import("react").RefAttributes<HTMLLIElement>>;
+    } & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
 };

package/dist/FileList/FileListItem.d.ts

@@ -3,11 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes } from 'react';
-export type FileListItemProps = HTMLAttributes<HTMLLIElement> & {
+export type FileListItemProps = {
     file: File;
     onDelete?: () => void;
-};
-export declare const FileListItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+} & HTMLAttributes<HTMLLIElement>;
+export declare const FileListItem: import("react").ForwardRefExoticComponent<{
     file: File;
     onDelete?: () => void;
-} & import("react").RefAttributes<HTMLLIElement>>;
+} & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/Grid/Grid.d.ts

@@ -28,12 +28,12 @@ type GridPaddingTopAndBottomProps = {
     paddingTop?: GridPadding;
     paddingVertical?: never;
 };
-export type GridProps = (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export type GridProps = {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
     gapVertical?: GridGap;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps);
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
  */

package/dist/Grid/GridCell.d.ts

@@ -17,9 +17,9 @@ type GridCellSpanAndStartProps = {
     /** The index of the grid column the cell starts at. */
     start?: GridColumnNumber | GridColumnNumbers;
 };
-export type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type GridCellProps = {
     /** The HTML tag to use. */
     as?: GridCellTag;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>> & (GridCellSpanAllProp | GridCellSpanAndStartProps);
 export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<unknown>>;
 export {};

package/dist/Heading/Heading.d.ts

@@ -1,37 +1,36 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type HeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
+export declare const headingSizes: readonly [1, 2, 3, 4];
+type HeadingSize = (typeof headingSizes)[number];
+export type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The hierarchical level within the document. */
-    level: 1 | 2 | 3 | 4;
+    level: HeadingSize;
     /**
      * Uses larger or smaller text without changing its position in the heading hierarchy.
      * The value ‘level-6’ is deprecated. Use level 5 instead.
      */
     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}
  */
-export declare const Heading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Heading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The hierarchical level within the document. */
-    level: 1 | 2 | 3 | 4;
+    level: HeadingSize;
     /**
      * Uses larger or smaller text without changing its position in the heading hierarchy.
      * The value ‘level-6’ is deprecated. Use level 5 instead.
      */
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;
+export {};