loon-bulma-react 2024.1.28 → 2025.0.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import React$1, { CSSProperties, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { CSSProperties, ReactNode } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Locale } from 'date-fns';
 import { JSONContent } from '@tiptap/react';
@@ -140,7 +140,7 @@ type AspectRatioProps = {
  *   <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ">
  * </AspectRatio>
  */
-declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): JSX.Element;
+declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): react_jsx_runtime.JSX.Element;
 
 /** Basis block component met een standaard margin & padding (bulma) */
 declare function Block({ id, children, className: cn, styles, }: {
@@ -148,7 +148,7 @@ declare function Block({ id, children, className: cn, styles, }: {
     children: React$1.ReactNode;
     className?: string;
     styles?: React$1.CSSProperties;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 
 type BoxProps = {
     id?: string;
@@ -158,7 +158,7 @@ type BoxProps = {
     className?: string;
     /** Style props direct op de box */
     styles?: CSSProperties;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
 };
 /**
  * Maak een witte box om andere elementen heen. Voor forms of modals. Heeft een beetje schaduw.
@@ -166,13 +166,13 @@ type BoxProps = {
  * @returns een witte box om elementen.
  * @example <Box>This is a box</Box>
  */
-declare function Box({ id, children, className: cn, styles, itemRef }: BoxProps): JSX.Element;
+declare function Box({ id, children, className: cn, styles, itemRef }: BoxProps): react_jsx_runtime.JSX.Element;
 
 type BorderBoxProps = {
     children: React$1.ReactNode;
     title?: string | undefined;
     style?: React$1.CSSProperties | undefined;
-    itemRef?: React$1.RefObject<HTMLDivElement> | undefined;
+    itemRef?: React$1.RefObject<HTMLDivElement> | undefined | null;
     className?: string | undefined;
     color?: ColorProp | 'default' | undefined;
     alignment?: AlignmentProp | undefined;
@@ -184,23 +184,15 @@ type BorderBoxProps = {
  * @example <BorderBox.Primary title="Title" alignment="c">Content</BorderBox.Primary>
  */
 declare const BorderBox: {
-    ({ children, title, style, itemRef, className: cn, color: colorProp, alignment, }: BorderBoxProps): JSX.Element;
-    /** Een Box met een Primary-colored title */
-    Primary(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Link-colored title */
-    Link(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Info-colored title */
-    Info(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Warning-colored title */
-    Warning(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Danger-colored title */
-    Danger(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Success-colored title */
-    Success(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Light-colored title */
-    Light(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
-    /** Een Box met een Dark-colored title (default) */
-    Dark(props: StrictOmit<BorderBoxProps, "color">): JSX.Element;
+    ({ children, title, style, itemRef, className: cn, color: colorProp, alignment, }: BorderBoxProps): react_jsx_runtime.JSX.Element;
+    Primary(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Link(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Info(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Warning(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Danger(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Success(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Light(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
+    Dark(props: StrictOmit<BorderBoxProps, "color">): react_jsx_runtime.JSX.Element;
 };
 
 type ColumnsProps = {
@@ -236,7 +228,7 @@ type ColumnsProps = {
  *   <Column narrow>This is a narrow column</Column>
  * </Columns>
  */
-declare function Columns({ children, id, gap, multiline, centered, vCentered, className: classes, styles, itemRef, }: ColumnsProps): JSX.Element;
+declare function Columns({ children, id, gap, multiline, centered, vCentered, className: classes, styles, itemRef, }: ColumnsProps): react_jsx_runtime.JSX.Element;
 
 type ColSize = '' | 'auto' | 'narrow' | '1/1' | '1/2' | '1/3' | '2/3' | '3/3' | '1/4' | '2/4' | '3/4' | '4/4' | '1/5' | '2/5' | '3/5' | '4/5' | '5/5' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12' | '12/12';
 type ColumnProps = {
@@ -273,19 +265,9 @@ type ExpandedColumnProps = ColumnProps & {
  * <Column narrow size="3/4">Narrow is more important, so this is a narrow column</Column
  */
 declare const Column: {
-    ({ narrow, size, className: propsClassName, styles, id, children, itemRef }: ExpandedColumnProps): JSX.Element;
-    /** Column full width of parent
-     * @returns een kolom met de maximale breedte van de parent 'Columns'
-     * @example </olumn size='1/1'>This is a full column</Column>
-     * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="1/1">...</Column>`
-     */
-    Full(props: ColumnProps): JSX.Element;
-    /** Column 1/2 width of parent
-     * @returns een kolom met de halve breedte van de parent 'Columns'
-     * @example Column size='1/2'>This is a half column</Column>
-     * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="1/2">...</Column>`
-     */
-    Half(props: ColumnProps): JSX.Element;
+    ({ narrow, size, className: propsClassName, styles, id, children, itemRef }: ExpandedColumnProps): react_jsx_runtime.JSX.Element;
+    Full(props: ColumnProps): react_jsx_runtime.JSX.Element;
+    Half(props: ColumnProps): react_jsx_runtime.JSX.Element;
     /** Spread columns based on thirds (1/3, 2/3)
      * @deprecated Gebruik de gewone Column-component met de `size`-prop zoals onderstaand voorbeeld om deze te vervangen
      * @example
@@ -298,13 +280,13 @@ declare const Column: {
          * @example <Column size="2/3">This is a first third column</Column>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="1/3">...</Column>`
          */
-        One: (props: ColumnProps) => JSX.Element;
+        One: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  2/3 width of parent
          * @returns een kolom met 2/3 breedte van de parent 'Columns'
          * @example <Column size="2/3">This is a second third column</Column>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="2/3">...</Column>`
          */
-        Two: (props: ColumnProps) => JSX.Element;
+        Two: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
     };
     /** Spread columns based on quarters (1/4, 2/4, 3/4)
      * @deprecated Gebruik de gewone Column-component met de `size`-prop zoals onderstaand voorbeeld om deze te vervangen
@@ -319,19 +301,19 @@ declare const Column: {
          * @example <Column.Quarters.One>This is a 1/4 column</Column.Quarters.One>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="1/4">...</Column>`
          */
-        One: (props: ColumnProps) => JSX.Element;
+        One: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  2/4 width of parent
          * @returns een kolom met 2/4 breedte van de parent 'Columns'
          * @example <Column.Quarters.Two>This is a 2/4 column</Column.Quarters.Two>
          * @deprecated Gebuik de `size`-prop om deze te vervangen: `<Column size="2/4">...</Column>`
          */
-        Two: (props: ColumnProps) => JSX.Element;
+        Two: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  3/4 width of parent
          * @returns een kolom met 3/4 breedte van de parent 'Columns'
          * @example <Column.Quarters.Three>This is a 3/4 column</Column.Quarters.Three>
          * @deprecated Gebuik de `size`-prop om deze te vervangen: `<Column size="3/4">...</Column>`
          */
-        Three: (props: ColumnProps) => JSX.Element;
+        Three: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
     };
     /** Spread columns based on fifths (1/5, 2/5, 3/5, 4/5)
      * @deprecated Gebuik de gewone Column-component met de `size`-prop zoals onderstaand voorbeeld om deze te vervangen
@@ -346,25 +328,25 @@ declare const Column: {
          * @example <Column.Fifths.One>This is a 1/5 column</Column.Fifths.One>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="1/5">...</Column>`
          */
-        One: (props: ColumnProps) => JSX.Element;
+        One: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  2/5 width of parent
          * @returns een kolom met 2/5 breedte van de parent 'Columns'
          * @example <Column.Fifths.Two>This is a 2/5 column</Column.Fifths.Two>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="2/5">...</Column>`
          */
-        Two: (props: ColumnProps) => JSX.Element;
+        Two: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  3/5 width of parent
          * @returns een kolom met 3/5 breedte van de parent 'Columns'
          * @example <Column.Fifths.Three>This is a 3/5 column</Column.Fifths.Three>
          * @deprecated Gebuik de `size`-prop om deze te vervangen: `<Column size="3/5">...</Column>`
          */
-        Three: (props: ColumnProps) => JSX.Element;
+        Three: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  4/5 width of parent
          * @returns een kolom met 4/5 breedte van de parent 'Columns'
          * @example <Column.Fifths.Four>This is a 4/5 column</Column.Fifths.Four>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="4/5">...</Column>`
          */
-        Four: (props: ColumnProps) => JSX.Element;
+        Four: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
     };
     /**
      * Spread columns based on twelfths (1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/12, 10/12, 11/12, 12/12)
@@ -382,73 +364,73 @@ declare const Column: {
          * @example <Column.Twelves.One>This is a 1/12 column</Column.Twelves.One>
          * @deprecated Gebuik de `size`-prop om deze te vervangen: `<Column size="1/12">...</Column>`
          */
-        One: (props: ColumnProps) => JSX.Element;
+        One: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  2/12 width of parent
          * @returns een kolom met 2/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Two>This is a 2/12 column</Column.Twelves.Two>
          * @deprecated Gebrui de `size`-prop om deze te vervangen: `<Column size="2/12">...</Column>`
          */
-        Two: (props: ColumnProps) => JSX.Element;
+        Two: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  3/12 width of parent
          * @returns een kolom met 3/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Three>This is a 3/12 column</Column.Twelves.Three>
          * @deprecated Gebuik de `size`-prop om deze te vervangen: `<Column size="3/12">...</Column>`
          */
-        Three: (props: ColumnProps) => JSX.Element;
+        Three: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  4/12 width of parent
          * @returns een kolom met 4/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Four>This is a 4/12 column</Column.Twelves.Four>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="4/12">...</Column>`
          */
-        Four: (props: ColumnProps) => JSX.Element;
+        Four: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  5/12 width of parent
          * @returns een kolom met 5/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Five>This is a 5/12 column</Column.Twelves.Five>
          * @deprecated Gebuik de `size`-prop om deze te vervangen: `<Column size="5/12">...</Column>`
          */
-        Five: (props: ColumnProps) => JSX.Element;
+        Five: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  6/12 width of parent
          * @returns een kolom met 6/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Six>This is a 6/12 column</Column.Twelves.Six>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="6/12">...</Column>`
          */
-        Six: (props: ColumnProps) => JSX.Element;
+        Six: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  7/12 width of parent
          * @returns een kolom met 7/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Seven>This is a 7/12 column</Column.Twelves.Seven>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="7/12">...</Column>`
          */
-        Seven: (props: ColumnProps) => JSX.Element;
+        Seven: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  8/12 width of parent
          * @returns een kolom met 8/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Eight>This is a 8/12 column</Column.Twelves.Eight>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="8/12">...</Column>`
          */
-        Eight: (props: ColumnProps) => JSX.Element;
+        Eight: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  9/12 width of parent
          * @returns een kolom met 9/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Nine>This is a 9/12 column</Column.Twelves.Nine>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="9/12">...</Column>`
          */
-        Nine: (props: ColumnProps) => JSX.Element;
+        Nine: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  10/12 width of parent
          * @returns een kolom met 10/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Ten>This is a 10/12 column</Column.Twelves.Ten>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="10/12">...</Column>`
          */
-        Ten: (props: ColumnProps) => JSX.Element;
+        Ten: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  11/12 width of parent
          * @returns een kolom met 11/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Eleven>This is a 11/12 column</Column.Twelves.Eleven>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="11/12">...</Column>`
          */
-        Eleven: (props: ColumnProps) => JSX.Element;
+        Eleven: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
         /** Column  12/12 width of parent
          * @returns een kolom met 12/12 breedte van de parent 'Columns'
          * @example <Column.Twelves.Twelve>This is a 12/12 column</Column.Twelves.Twelve>
          * @deprecated Gebruik de `size`-prop om deze te vervangen: `<Column size="12/12">...</Column>`
          */
-        Twelve: (props: ColumnProps) => JSX.Element;
+        Twelve: (props: ColumnProps) => react_jsx_runtime.JSX.Element;
     };
     displayName: string;
 };
@@ -487,74 +469,11 @@ type ContainerProps = {
  * @example <Container>This is a container</Container>
  */
 declare const Container: {
-    ({ className: cn, children, styles, size, id, itemRef }: ContainerProps): JSX.Element;
-    /**
-     * Een container om content horizontaal te centreren in default viewports.
-     * @param props
-     * @returns een iets bredere container
-     * @deprecated, gebruik de `size` prop van `<Container size='s'>` OF `<Container>` (`s` is default) in plaats van deze component
-     * @description De width van de container is afhankelijk van de maximale viewport width:
-     * |    | Component            | size | tot 1023px | tot 1216px | tot 1408px | groter    |
-     * |----|----------------------|------|------------|------------|------------|-----------|
-     * | >> | `<Container.Default>`| `s`  | max-width  | 960px      | 1152px     | 1344px    |
-     * |    | `<Container.Wide>`   | `m`  | max-width  | max-width  | 1152px     | 1344px    |
-     * |    | `<Container.Widest>` | `l`  | max-width  | max-width  | max-width  | 1344px    |
-     * |    | `<Container.Max>`    | `xl` | max-width  | max-width  | max-width  | max-width |
-     *
-     * @example <Container.Wide>This is a somewhat wider container</Container.Wide>
-     */
-    Default({ className, children, styles }: StrictOmit<ContainerProps, "size">): JSX.Element;
-    /**
-     * Een container om content horizontaal te centreren in grote viewports.
-     * @param props
-     * @returns een iets bredere container
-     * @deprecated, gebruik de `size` prop van `<Container size='m'>` in plaats van deze component
-     * @description De width van de container is afhankelijk van de maximale viewport width:
-     * |    | Component            | size | tot 1023px | tot 1216px | tot 1408px | groter    |
-     * |----|----------------------|------|------------|------------|------------|-----------|
-     * |    | `<Container.Default>`| `s`  | max-width  | 960px      | 1152px     | 1344px    |
-     * | >> | `<Container.Wide>`   | `m`  | max-width  | max-width  | 1152px     | 1344px    |
-     * |    | `<Container.Widest>` | `l`  | max-width  | max-width  | max-width  | 1344px    |
-     * |    | `<Container.Max>`    | `xl` | max-width  | max-width  | max-width  | max-width |
-     *
-     * @example <Container.Wide>This is a somewhat wider container</Container.Wide>
-     */
-    Wide({ className, children, styles }: StrictOmit<ContainerProps, "size">): JSX.Element;
-    /**
-     * Een container om content horizontaal te centreren in grote viewports.
-     * @param props
-     * @returns een hele brede container
-     * @deprecated, gebruik de `size` prop van `<Container size='l'>` in plaats van deze component
-     * @description De width van de container is afhankelijk van de maximale viewport width:
-     * |    | Component            |  size |tot 1023px | tot 1216px | tot 1408px | groter    |
-     * |----|----------------------|-------|-----------|------------|------------|-----------|
-     * |    | `<Container.Default>`|  `s`  |max-width  | 960px      | 1152px     | 1344px    |
-     * |    | `<Container.Wide>`   |  `m`  |max-width  | max-width  | 1152px     | 1344px    |
-     * | >> | `<Container.Widest>` |  `l`  |max-width  | max-width  | max-width  | 1344px    |
-     * |    | `<Container.Max>`    |  `xl` |max-width  | max-width  | max-width  | max-width |
-     *
-     * @example <Container.Widest>This is a wide container</Container.Widest>
-     */
-    Widest({ className, children, styles }: StrictOmit<ContainerProps, "size">): JSX.Element;
-    /**
-     * Een container om content horizontaal te centreren in grote viewports.
-     * De width van de container is afhankelijk van de maximale viewport width.
-     * Aan de linker- en rechter-zijde wordt een margin van 32px behouden.
-     * @deprecated, gebruik de `size` prop van `<Container size='xl'>` in plaats van deze component
-     * @param props
-     * @returns een container die de gehele breedte van de viewport gebruikt.
-     *
-     * @description De width van de container is afhankelijk van de maximale viewport width:
-     * |    | Component            |  size |tot 1023px | tot 1216px | tot 1408px | groter    |
-     * |----|----------------------|-------|-----------|------------|------------|-----------|
-     * |    | `<Container.Default>`|  `s`  |max-width  | 960px      | 1152px     | 1344px    |
-     * |    | `<Container.Wide>`   |  `m`  |max-width  | max-width  | 1152px     | 1344px    |
-     * |    | `<Container.Widest>` |  `l`  |max-width  | max-width  | max-width  | 1344px    |
-     * | >> | `<Container.Max>`    |  `xl` |max-width  | max-width  | max-width  | max-width |
-     *
-     * @example <Container.Max>This is an almost-fullwidth container </Container.Max>
-     */
-    Max({ className, children, styles }: StrictOmit<ContainerProps, "size">): JSX.Element;
+    ({ className: cn, children, styles, size, id, itemRef }: ContainerProps): react_jsx_runtime.JSX.Element;
+    Default({ className, children, styles }: StrictOmit<ContainerProps, "size">): react_jsx_runtime.JSX.Element;
+    Wide({ className, children, styles }: StrictOmit<ContainerProps, "size">): react_jsx_runtime.JSX.Element;
+    Widest({ className, children, styles }: StrictOmit<ContainerProps, "size">): react_jsx_runtime.JSX.Element;
+    Max({ className, children, styles }: StrictOmit<ContainerProps, "size">): react_jsx_runtime.JSX.Element;
 };
 
 type ContentPropsType = {
@@ -567,7 +486,7 @@ type ContentPropsType = {
     /** Extra inline styles */
     styles?: CSSProperties;
     id?: string;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
 };
 /**
  * Een Content component voor generated content. De meeste html tags kunnen hier worden gebruikt.
@@ -575,7 +494,7 @@ type ContentPropsType = {
  * @returns een div geschikt voor content. WYSIWYG ofzo.
  * @example <Content>This is a content which can contain lists, <strong>strong</strong>  and <em>italic</em> tags</Content>
  */
-declare function Content({ size, className: cn, styles, id, children, itemRef }: ContentPropsType): JSX.Element;
+declare function Content({ size, className: cn, styles, id, children, itemRef }: ContentPropsType): react_jsx_runtime.JSX.Element;
 
 type DividerProps = {
     color?: ColorProp | 'default' | undefined;
@@ -593,7 +512,7 @@ type FooterProps = {
     className?: string;
     /** Custom styles voor de footer */
     styles?: React$1.CSSProperties;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
     id?: string;
 };
 /**
@@ -603,10 +522,10 @@ type FooterProps = {
  * @returns een footer met daarin de content.
  * @example <Footer>This is a footer</Footer>
  */
-declare function Footer({ children, alignment, className: cn, styles, id, itemRef }: FooterProps): JSX.Element;
+declare function Footer({ children, alignment, className: cn, styles, id, itemRef }: FooterProps): react_jsx_runtime.JSX.Element;
 
 type HeroProps = {
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
     id?: string;
     children?: React$1.ReactNode;
     /**
@@ -625,17 +544,7 @@ type HeroProps = {
  * @example
  */
 declare const Hero: {
-    ({ children: nodes, heroColorFor, size, itemRef, id, forceScheme }: HeroProps): JSX.Element;
-    /**
-     * Body of the hero, which could contain a title and/or subtitle
-     * @param props props
-     * @returns hero body with content
-     * @example
-     * <Hero.Body>
-     *   <Title>Title</Title>
-     *   <Subtitle>Subtitle</Subtitle>
-     * </Hero.Body>
-     */
+    ({ children: nodes, heroColorFor, size, itemRef, id, forceScheme }: HeroProps): react_jsx_runtime.JSX.Element;
     Body({ children }: {
         children: React$1.ReactNode;
     }): react_jsx_runtime.JSX.Element;
@@ -660,15 +569,6 @@ declare const Hero: {
             children: React$1.ReactNode;
             narrow?: boolean;
         }): react_jsx_runtime.JSX.Element;
-        /** Navigation ItemList voor In een Hero Foot. Parent should be <Hero.Foot> and children should be <Hero.Foot.NavItem>
-         * @param props props
-         * @returns Navigation Item List for Hero's
-         * @example
-         * <Hero.Foot.NavList>
-         *   <Hero.Foot.NavItem to="/">URL </Hero.Foot.NavItem>
-         *   <Hero.Foot.NavItem to="/">URL </Hero.Foot.NavItem>
-         * </Hero.Foot.NavList>
-         */
         NavList({ children }: {
             children: React$1.ReactNode;
         }): react_jsx_runtime.JSX.Element;
@@ -696,22 +596,12 @@ declare const Hero: {
     Head: {
         ({ children }: {
             children: React$1.ReactNode;
-        }): JSX.Element;
-        /** Een button in de hero head
-         * @param props props
-         * @returns een button in de hero head
-         * @example <Hero.Head.Button onClick={handleClick}>Button</Hero.Head.Button>
-         */
+        }): react_jsx_runtime.JSX.Element;
         Button({ children, title, onClick }: {
             children: React$1.ReactNode;
             title?: string;
             onClick?: (e: any) => void;
         }): react_jsx_runtime.JSX.Element;
-        /** Een link in de hero head
-         * @param props props
-         * @returns een link in de hero head
-         * @example <Hero.Head.Link to="https://www.loon.be" title="Loon.be">Loon.be</Hero.Head.Link>
-         */
         Link({ children, title, to, target, rel, }: {
             children: React$1.ReactNode;
             title?: string;
@@ -760,11 +650,11 @@ type ImageProps = {
  * @returns an image with a fixed aspect ratio
  * @example <Image ratio="1by1" src="https://www.loon.be/images/logo.png" alt="Loon.be" />
  */
-declare function Image({ ratio, imgWidth, alt, figCaption, className, isRounded, src }: ImageProps): JSX.Element;
+declare function Image({ ratio, imgWidth, alt, figCaption, className, isRounded, src }: ImageProps): react_jsx_runtime.JSX.Element;
 
 type SectionPropsType = {
     id?: string;
-    itemRef?: React$1.RefObject<HTMLElement>;
+    itemRef?: React$1.RefObject<HTMLElement | HTMLDivElement | any> | null;
     children?: React$1.ReactNode | undefined;
     className?: string;
     /** extra styles voor dit object */
@@ -779,7 +669,7 @@ type SectionPropsType = {
  * @returns een sectie voor op de pagina, met ruimte eromheen
  * @example <Section>This is a section</Section>
  */
-declare function Section({ children, className: cn, styles, id, itemRef, size }: SectionPropsType): JSX.Element;
+declare function Section({ children, className: cn, styles, id, itemRef, size }: SectionPropsType): react_jsx_runtime.JSX.Element;
 
 /**
  * Maak een ScrollArea om in een bepaalde richting te kunnen scrollen. De scrollareas maken gebruik van flexbox.
@@ -792,7 +682,7 @@ declare const ScrollArea: {
      */
     Horizontal: (props: {
         id?: string;
-        itemRef?: React$1.RefObject<any>;
+        itemRef?: React$1.RefObject<any> | null;
         /** Wat moet er in de flexbox container komen */
         children: React$1.ReactNode;
         /** Moeten de items gewrapped worden (meerdere rijen/kolommen) (default = false) */
@@ -967,7 +857,7 @@ type DataTableProps<T extends unknown = unknown> = {
      * Deze content **MOET** een `<tr><td>...</td></tr>` bevatten!
      */
     footerContent?: React$1.ReactNode;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
     id?: string;
 };
 /**
@@ -1016,7 +906,7 @@ type DataTableProps<T extends unknown = unknown> = {
  * @param searchPlaceholder placeholder voor zoek-input (default = 'Zoek ...')
  * @returns
  */
-declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hidePagination, initialPage, hideSearch, headerContent, footerContent, size, maxRows: definedMaxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, onRowRightClick, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, }: DataTableProps<T>): JSX.Element;
+declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hidePagination, initialPage, hideSearch, headerContent, footerContent, size, maxRows: definedMaxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, onRowRightClick, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 type DropDownProps = {
     children?: React$1.ReactNode;
@@ -1030,7 +920,7 @@ type DropDownProps = {
     className?: string | undefined;
 };
 declare const Dropdown: {
-    ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, }: DropDownProps): JSX.Element;
+    ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, }: DropDownProps): react_jsx_runtime.JSX.Element;
     Divider(): react_jsx_runtime.JSX.Element;
     Item({ children, onClick, ...props }: {
         children: React$1.ReactNode;
@@ -1048,13 +938,13 @@ type HelpTxtProps = {
 };
 type HelpTxtPropsNoColor = StrictOmit<HelpTxtProps, 'color'>;
 declare const HelpTxt: {
-    ({ color, className: cn, children }: HelpTxtProps): JSX.Element;
-    Info(props: HelpTxtPropsNoColor): JSX.Element;
-    Link(props: HelpTxtPropsNoColor): JSX.Element;
-    Primary(props: HelpTxtPropsNoColor): JSX.Element;
-    Danger(props: HelpTxtPropsNoColor): JSX.Element;
-    Success(props: HelpTxtPropsNoColor): JSX.Element;
-    Warning(props: HelpTxtPropsNoColor): JSX.Element;
+    ({ color, className: cn, children }: HelpTxtProps): react_jsx_runtime.JSX.Element;
+    Info(props: HelpTxtPropsNoColor): react_jsx_runtime.JSX.Element;
+    Link(props: HelpTxtPropsNoColor): react_jsx_runtime.JSX.Element;
+    Primary(props: HelpTxtPropsNoColor): react_jsx_runtime.JSX.Element;
+    Danger(props: HelpTxtPropsNoColor): react_jsx_runtime.JSX.Element;
+    Success(props: HelpTxtPropsNoColor): react_jsx_runtime.JSX.Element;
+    Warning(props: HelpTxtPropsNoColor): react_jsx_runtime.JSX.Element;
 };
 
 type IconProps = {
@@ -1084,7 +974,7 @@ type IconProps = {
  * <Icon icon="fas fa-flag" />
  * <Icon icon={faFlag} /> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
  */
-declare function Icon({ color, size, rotation, icon, flip, animate, className: classNameProp, }: IconProps): JSX.Element;
+declare function Icon({ color, size, rotation, icon, flip, animate, className: classNameProp }: IconProps): react_jsx_runtime.JSX.Element;
 type IconTextProps = {
     /** React font-awesome icon
      * - `string`: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.
@@ -1117,7 +1007,7 @@ type IconTextProps = {
  * <IconText icon="fas fa-flag">Flag</IconText>
  * <IconText icon={faFlag}>Flag</IconText> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
  */
-declare function IconText({ icon, size, color, rotation, flip, animate, allowWrap, children, className: classNameProp, }: IconTextProps): JSX.Element;
+declare function IconText({ icon, size, color, rotation, flip, animate, allowWrap, children, className: classNameProp, }: IconTextProps): react_jsx_runtime.JSX.Element;
 type IconStackProps = {
     colors?: ColorProp[];
     icons: string[] | IconProp[];
@@ -1133,7 +1023,7 @@ type IconStackProps = {
  * @param icons: array van iconen. (default =  [faHorseHead, faSlash])
  * @returns
  */
-declare function IconStack({ colors: clrs, icons, sizes: szs }: IconStackProps): JSX.Element;
+declare function IconStack({ colors: clrs, icons, sizes: szs }: IconStackProps): react_jsx_runtime.JSX.Element;
 
 type IndicatorProps = {
     /** Positie van de indicator (default = 'tr' (top-right)) */
@@ -1155,34 +1045,36 @@ type IndicatorProps = {
  *   5
  * </Indicator>
  */
-declare function Indicator({ position, color, title, children }: IndicatorProps): JSX.Element;
+declare function Indicator({ position, color, title, children }: IndicatorProps): react_jsx_runtime.JSX.Element;
 
+type KbdProps = {
+    /** Optionele extra class */
+    className?: string;
+    /** Content van de key */
+    children: React$1.ReactNode;
+};
+type KbdsProps = {
+    /** Weer te geven keys als string */
+    keys: string[];
+    /** De separator van de keys, default '+' */
+    separator?: string;
+    /** Optionele className */
+    className?: string;
+};
 /**
  * Toon een Keyboard-Key als een 'key' op een keyboard.
  * @param params
  * @returns een element dat lijkt op een keyboard-key
  * @example <Kbd>A</Kbd>
  */
-declare function Kbd({ children, className: extraClasses, }: {
-    /** Optionele extra class */
-    className?: string;
-    /** Content van de key */
-    children: React$1.ReactNode;
-}): JSX.Element;
+declare function Kbd({ children, className: cn }: KbdProps): react_jsx_runtime.JSX.Element;
 /**
  * Toont meerdere keyboard-keys, gescheiden door een teken (deafult = '+')
  * @param props
  * @returns een rijtje keyboard-keys
  * @example <Kbds keys={['ctrl+S', 'shift+D']} />
  */
-declare function Kbds({ keys, separator, className, }: {
-    /** Weer te geven keys als string */
-    keys: string[];
-    /** De separator van de keys, default '+' */
-    separator?: string;
-    /** Optionele className */
-    className?: string;
-}): JSX.Element;
+declare function Kbds({ keys, separator, className }: KbdsProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     /** Welk item is het initiële geselecteerde item */
@@ -1193,7 +1085,7 @@ type MenuProps = {
     onMenuItemClicked: (item: string) => void;
     style?: React$1.CSSProperties;
     className?: string;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
 };
 type MenuItemProps = {
     /** (optional) Naam voor menu-item dat geselecteert wordt. Als niet opgegevens, wordt de string-content van het item gebruikt */
@@ -1236,53 +1128,14 @@ type ExpandableMenuItemProps = {
  * </Menu>
  */
 declare const Menu: {
-    ({ initialItem, children, className: classes, style, onMenuItemClicked, itemRef }: MenuProps): JSX.Element;
-    /**
-     * Een selecteerbaar menu-item in het Menu
-     * @param props
-     * @return een selecteerbaar menu-item
-     * @example <Menu.Item name="1">Item 1</Menu.Item>
-     */
-    Item({ name, children }: MenuItemProps & React$1.HTMLAttributes<HTMLSpanElement>): JSX.Element;
-    /**
-     * Groepeer Menu Items in een lijstje met een label om te laten weten dat ze bij elkaar horen
-     * @param props
-     * @returns een MenuItemGroup
-     * @example
-     * <Menu.ItemGroup label="Groep 1">
-     *   <Menu.Item name="1">Item 1</Menu.Item>
-     *   <Menu.Item name="2">Item 2</Menu.Item>
-     * </Menu.ItemGroup>
-     */
-    ItemGroup({ label, children }: MenuItemGroupProps & React$1.HTMLAttributes<HTMLSpanElement>): JSX.Element;
-    /**
-     * Een niet-selecteerbare, maar wel collapsable / expandable menu group met een lijstje children
-     * @param props
-     * @returns een collapsible menu item
-     * @example
-     * <Menu.ExpandableGroup label="Groep 1">
-     *   <Menu.Item name="1">Item 1</Menu.Item>
-     *   <Menu.Item name="2">Item 2</Menu.Item>
-     * </Menu.ExpandableGroup>
-     */
-    ExpandableGroup(props: ExpandableMenuItemProps): JSX.Element;
-    /**
-     * Een niet-selecteerbare, maar wel collapsable / expandable menu item met een lijstje children
-     * @param props
-     * @returns een collapsible menu item
-     * @example
-     * <Menu.ExpandableItem label="Groep 1">
-     *   <Menu.Item name="1">Item 1</Menu.Item>
-     *   <Menu.Item name="2">Item 2</Menu.Item>
-     * </Menu.ExpandableItem>
-     */
-    ExpandableItem(props: ExpandableMenuItemProps & React$1.HTMLAttributes<HTMLSpanElement>): JSX.Element;
-    /**
-     * Een label in het menu
-     */
+    ({ initialItem, children, className: classes, style, onMenuItemClicked, itemRef }: MenuProps): react_jsx_runtime.JSX.Element;
+    Item({ name, children }: MenuItemProps & React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    ItemGroup({ label, children }: MenuItemGroupProps & React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    ExpandableGroup(props: ExpandableMenuItemProps): react_jsx_runtime.JSX.Element;
+    ExpandableItem(props: ExpandableMenuItemProps & React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
     Label({ children }: {
         children: React$1.ReactNode;
-    }): JSX.Element;
+    }): react_jsx_runtime.JSX.Element;
 };
 
 type MessageProps = {
@@ -1311,7 +1164,7 @@ type MessageProps = {
      * Werkt natuurlijk alleen bij `collapsable = true`
      */
     startCollapsed?: boolean;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
 };
 /** Zelf regelbare message.
  * @returns een message
@@ -1321,43 +1174,13 @@ type MessageProps = {
  * @example <Message color="d" size="s" title="This is a title" startCollapsed>This is a message that could NOT be collapsed/expanded</Message>
  */
 declare const Message: {
-    ({ id, children, title, size, color, icon: customIcon, collapsable, startCollapsed, itemRef, onDismiss, }: MessageProps): JSX.Element;
-    /** Een primary-colored message
-     * @param props props
-     * @returns een primary-colored message
-     * @example <Message.Primary size="l" title="This is a title">This is a primary message</Message.Primary>
-     */
-    Primary(props: StrictOmit<MessageProps, "color">): JSX.Element;
-    /** Een success-colored message
-     * @param props props
-     * @returns een success-colored message
-     * @example <Message.Success size="l" title="This is a title">This is a success message</Message.Success>
-     */
-    Success(props: StrictOmit<MessageProps, "color">): JSX.Element;
-    /** Een danger-colored message
-     * @param props props
-     * @returns een danger-colored message
-     * @example <Message.Danger size="l" title="This is a title">This is a danger message</Message.Danger>
-     */
-    Danger(props: StrictOmit<MessageProps, "color">): JSX.Element;
-    /** Een warning-colored message
-     * @param props props
-     * @returns een warning-colored message
-     * @example <Message.Warning size="l" title="This is a title">This is a warning message</Message.Warning>
-     */
-    Warning(props: StrictOmit<MessageProps, "color">): JSX.Element;
-    /** Een info-colored message (OOK de default)
-     * @param props props
-     * @returns een info-colored message
-     * @example <Message.Info size="l" title="This is a title">This is a info message</Message.Info>
-     */
-    Info(props: StrictOmit<MessageProps, "color">): JSX.Element;
-    /** Een link-colored message
-     * @param props props
-     * @returns een link-colored message
-     * @example <Message.Link title="This is a title">This is a link message</Message.Link>
-     */
-    Link(props: StrictOmit<MessageProps, "color">): JSX.Element;
+    ({ id, children, title, size, color, icon: customIcon, collapsable, startCollapsed, itemRef, onDismiss, }: MessageProps): react_jsx_runtime.JSX.Element;
+    Primary(props: StrictOmit<MessageProps, "color">): react_jsx_runtime.JSX.Element;
+    Success(props: StrictOmit<MessageProps, "color">): react_jsx_runtime.JSX.Element;
+    Danger(props: StrictOmit<MessageProps, "color">): react_jsx_runtime.JSX.Element;
+    Warning(props: StrictOmit<MessageProps, "color">): react_jsx_runtime.JSX.Element;
+    Info(props: StrictOmit<MessageProps, "color">): react_jsx_runtime.JSX.Element;
+    Link(props: StrictOmit<MessageProps, "color">): react_jsx_runtime.JSX.Element;
 };
 
 type ModalProps = {
@@ -1397,17 +1220,11 @@ type ModalProps = {
  * </Modal>
  */
 declare const Modal: {
-    ({ id, size, children: nodeChildren, onOpened, onDismiss, helpTag, enableClickOutsideDismiss, }: ModalProps): JSX.Element;
-    /**
-     * Een niet-scrollende, altijd zichtbare head voor de modal
-     * @param props
-     * @returns modal head
-     * @example <Modal.Head>Optional Modal Head</Modal.Head>
-     */
+    ({ id, size, children: nodeChildren, onOpened, onDismiss, helpTag, enableClickOutsideDismiss, }: ModalProps): react_jsx_runtime.JSX.Element;
     Head({ children, id }: {
         id?: string | undefined;
         children: React$1.ReactNode;
-    }): JSX.Element;
+    }): react_jsx_runtime.JSX.Element;
     /**
      * Een scrollende body voor de modal
      * @param props
@@ -1447,7 +1264,7 @@ type NotificationProps = {
     /** kleur van de notificatie (default = 'i') */
     color?: ColorProp;
     icon?: string | IconProp;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
     id?: string;
 };
 /**
@@ -1457,43 +1274,13 @@ type NotificationProps = {
  * @example <Notification>Hello World</Notification>
  */
 declare const Notification: {
-    ({ children, onDismiss, onClick, autoDismissAfter, color, icon, id, itemRef, }: NotificationProps): JSX.Element;
-    /** Een primary-colored notificatie
-     * @param props
-     * @returns een primary-colored notificatie
-     * @example <Notification.Primary>Hello World</Notification.Primary>
-     */
-    Primary(props: StrictOmit<NotificationProps, "color">): JSX.Element;
-    /** Een danger-colored notificatie
-     * @param props
-     * @returns een danger-colored notificatie
-     * @example <Notification.Danger>Hello World</Notification.Danger>
-     */
-    Danger(props: StrictOmit<NotificationProps, "color">): JSX.Element;
-    /** Een warning-colored notificatie
-     * @param props
-     * @returns een warning-colored notificatie
-     * @example <Notification.Warning>Hello World</Notification.Warning>
-     */
-    Warning(props: StrictOmit<NotificationProps, "color">): JSX.Element;
-    /** Een success-colored notificatie
-     * @param props
-     * @returns een success-colored notificatie
-     * @example <Notification.Success>Hello World</Notification.Success>
-     */
-    Success(props: StrictOmit<NotificationProps, "color">): JSX.Element;
-    /** Een link-colored notificatie
-     * @param props
-     * @returns een link-colored notificatie
-     * @example <Notification.Link>Hello World</Notification.Link>
-     */
-    Link(props: StrictOmit<NotificationProps, "color">): JSX.Element;
-    /** Een info-colored notificatie (OOK DE DEFAULT)
-     * @param props
-     * @returns een info-colored notificatie
-     * @example <Notification.Info>Hello World</Notification.Info>
-     */
-    Info(props: StrictOmit<NotificationProps, "color">): JSX.Element;
+    ({ children, onDismiss, onClick, autoDismissAfter, color, icon, id, itemRef, }: NotificationProps): react_jsx_runtime.JSX.Element;
+    Primary(props: StrictOmit<NotificationProps, "color">): react_jsx_runtime.JSX.Element;
+    Danger(props: StrictOmit<NotificationProps, "color">): react_jsx_runtime.JSX.Element;
+    Warning(props: StrictOmit<NotificationProps, "color">): react_jsx_runtime.JSX.Element;
+    Success(props: StrictOmit<NotificationProps, "color">): react_jsx_runtime.JSX.Element;
+    Link(props: StrictOmit<NotificationProps, "color">): react_jsx_runtime.JSX.Element;
+    Info(props: StrictOmit<NotificationProps, "color">): react_jsx_runtime.JSX.Element;
 };
 
 type InputValueType = string | number | readonly string[] | undefined;
@@ -1634,7 +1421,7 @@ type InputPropsType<T = InputValueType> = {
  * | type           | `string`       | type voor deze input (default = `text`)|
  * | value          | `string`       | value voor deze input (default = `undefined`)|
  */
-declare function BaseInput<T extends InputValueType = string>({ alignment: alignmentProp, autoComplete, optionListId, autofocus, disabled, errorMessage, infoMessage, form, helpTag, id, inputRef: ref, keyboardType, max, min, name, pattern, placeholder, readonly, required, size: sizeProp, spellCheck, step, title, type, value, className: extraClasses, styles, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, }: StrictOmit<InputPropsType<T>, 'optionList'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'>): JSX.Element;
+declare function BaseInput<T extends InputValueType = string>({ alignment: alignmentProp, autoComplete, optionListId, autofocus, disabled, errorMessage, infoMessage, form, helpTag, id, inputRef: ref, keyboardType, max, min, name, pattern, placeholder, readonly, required, size: sizeProp, spellCheck, step, title, type, value, className: extraClasses, styles, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, }: StrictOmit<InputPropsType<T>, 'optionList'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'>): react_jsx_runtime.JSX.Element;
 /**
  * Input component. Deze component heeft dezelfde properties als de gewone `<input ... />`-tag en de `<BaseInput<T> ... />-tag`.
  * Het verschil met de `BaseInput`-tag is dat deze compionent **wel** direction, label, of icon heeft.
@@ -1676,7 +1463,7 @@ declare function BaseInput<T extends InputValueType = string>({ alignment: align
  * | type           | `string`       | type voor deze input (default = `text`)|
  * | value          | `string`       | value voor deze input (default = `undefined`)|
  */
-declare function Input<T extends InputValueType = string>({ direction: directionProp, errorMessage, showRequiredOnLabel, icon, id, label, labelHidden, name, required, loading, size: sizeProp, value, infoData, helpTag, optionList, onBlur, onFocus, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): JSX.Element;
+declare function Input<T extends InputValueType = string>({ direction: directionProp, errorMessage, showRequiredOnLabel, icon, id, label, labelHidden, name, required, loading, size: sizeProp, value, infoData, helpTag, optionList, onBlur, onFocus, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): react_jsx_runtime.JSX.Element;
 /** Een wrapper voor een input component, om te zorgen dat ze allemaal op dezelfde manier horizontaal of verticaal aligned worden. */
 declare function InputContainer({ children, controlClassName, direction, showRequiredOnLabel, inputId, label, labelHidden, required, size, loading, infoData, setHovered, }: {
     label: string;
@@ -1691,7 +1478,7 @@ declare function InputContainer({ children, controlClassName, direction, showReq
     controlClassName?: string;
     setHovered?: (hovered: boolean) => void;
     infoData?: React$1.ReactNode | undefined;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 
 type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'pattern' | 'placeholder'> & StrictOmit<InputStylingPropsType, 'icon'> & {
     /** is de input checked? */
@@ -1718,7 +1505,7 @@ type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' |
  * const [x, setX] = React.useState(false);
  * <CheckBox name="test" label="test" value={x} onValueChanged={setX} direction='v'/>
  */
-declare function CheckBox({ id, label, name, size: sizeProp, direction: directionProp, required, showRequiredOnLabel, value, errorMessage, labelHidden, helpTag, infoData, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): JSX.Element;
+declare function CheckBox({ id, label, name, size: sizeProp, direction: directionProp, required, showRequiredOnLabel, value, errorMessage, labelHidden, helpTag, infoData, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): react_jsx_runtime.JSX.Element;
 /**
  * Een checkbox input die nog helemaal zelf aan te passen is, dus zonder container eromheen. Om een checkbox in met wat meer styling te gebruiken, gebruik dan de `CheckBox` component.
  * Dat is een wrapper om deze component heen. De properties `type`, `step`, `min`, `max`, `icon`, `pattern`, `placeholder` en `direction` zijn niet van toepassing op deze component.
@@ -1735,7 +1522,7 @@ declare function CheckBox({ id, label, name, size: sizeProp, direction: directio
  */
 declare function CB({ helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, value, required, spellCheck, id, autoComplete, readonly, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, color, infoDataEl, }: StrictOmit<CheckBoxInputProps, 'direction' | 'labelHidden' | 'infoData'> & {
     infoDataEl?: React$1.ReactNode;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 
 type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'onBlur' | 'onFocus' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max' | 'readonly' | 'pattern' | 'placeholder'> & InputStylingPropsType & {
     /** De waarde van de select
@@ -1846,23 +1633,23 @@ type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPr
  * ..</Select.OptGroup>
  * </Select>
  */
-declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment: alignmentProp, size: sizeProp, direction: directionProp, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): JSX.Element;
+declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment: alignmentProp, size: sizeProp, direction: directionProp, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
     var Option: ({ value, disabled, id, children, }: {
         id?: string;
         value?: number | string;
         disabled?: boolean;
         children: React$1.ReactNode;
-    }) => JSX.Element;
+    }) => react_jsx_runtime.JSX.Element;
     var OptGroup: ({ label, children, disabled }: {
         label: string;
         disabled?: boolean;
         children: React$1.ReactNode;
-    }) => JSX.Element;
+    }) => react_jsx_runtime.JSX.Element;
     var Divider: ({ dividerChar, repeat }: {
         dividerChar?: string;
         repeat?: number;
-    }) => JSX.Element;
+    }) => react_jsx_runtime.JSX.Element;
 }
 
 type ComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'min' | 'max' | 'readonly' | 'pattern' | 'errorMessage' | 'infoMessage' | 'title' | 'form' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
@@ -1903,7 +1690,7 @@ type ComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number |
  *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
  * />
  */
-declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment: alignmentProp, size: sizeProp, direction: directionProp, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, }: ComboBoxProps<T>): JSX.Element;
+declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment: alignmentProp, size: sizeProp, direction: directionProp, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, }: ComboBoxProps<T>): react_jsx_runtime.JSX.Element;
 
 type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'min' | 'max' | 'readonly' | 'pattern' | 'errorMessage' | 'infoMessage' | 'title' | 'form' | 'autoComplete' | 'spellCheck' | 'keyboardType' | 'onChange'> & InputStylingPropsType & {
     /** De waarde van de combobox */ value: T[];
@@ -1946,7 +1733,7 @@ type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<numb
  *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
  * />
  */
-declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment: alignmentProp, size: sizeProp, direction: directionProp, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): JSX.Element;
+declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment: alignmentProp, size: sizeProp, direction: directionProp, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): react_jsx_runtime.JSX.Element;
 
 type ColorInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged' | 'step' | 'min' | 'max' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
     /** Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff` */
@@ -1999,7 +1786,7 @@ type ColorInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'on
  * <ColorInput hslValue={x} onHSLValueChange={setX} {...props} />
  *
  */
-declare function ColorInput({ hexValue, rgbValue, hslValue, icon, onHexValueChanged, onRGBValueChanged, onHSLValueChanged, ...props }: ColorInputProps): JSX.Element;
+declare function ColorInput({ hexValue, rgbValue, hslValue, icon, onHexValueChanged, onRGBValueChanged, onHSLValueChanged, ...props }: ColorInputProps): react_jsx_runtime.JSX.Element;
 
 type HiddenInputProps = {
     /** Start value voor deze input (optioneel) */
@@ -2027,7 +1814,7 @@ type HiddenInputProps = {
  * @param required moet dit verborgen field worden ingevoerd
  * @example <HiddenInput value={value} {...props} />
  */
-declare function HiddenInput({ value, name, id, required, title, tooltip }: HiddenInputProps): JSX.Element;
+declare function HiddenInput({ value, name, id, required, title, tooltip }: HiddenInputProps): react_jsx_runtime.JSX.Element;
 
 type RBValueType = InputValueType | {};
 type RadioGroupProps<T extends RBValueType = string> = StrictOmit<InputStylingPropsType, 'icon'> & {
@@ -2100,7 +1887,7 @@ type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType
  * ..</RB>
  * </div>
  */
-declare function RB<T extends RBValueType = string>({ helpTag, disabled, keyboardType, title, name, value, checked, required, spellCheck, id, autoComplete, readonly, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, itemsDirection: itemsDirectionProp, color, children, infoData, }: RadioInputProps<T>): JSX.Element;
+declare function RB<T extends RBValueType = string>({ helpTag, disabled, keyboardType, title, name, value, checked, required, spellCheck, id, autoComplete, readonly, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, itemsDirection: itemsDirectionProp, color, children, infoData, }: RadioInputProps<T>): react_jsx_runtime.JSX.Element;
 /** RadioGroup is een groep radio-buttons met direction, alignment, etc. Gebruik `RB` voor een losstaande radio-button, **dus niet `<RadioGroup.Item>` daarvoor**
  * De RadioGroup kan je vullen met `RadioGroup.Item`-componenten, of met `RB`-componenten.
  * @param value de geselecteerde waarde van de input
@@ -2114,13 +1901,13 @@ declare function RB<T extends RBValueType = string>({ helpTag, disabled, keyboar
  * ..<RB value="Z">set to Z</RB>
  * </RadioGroup>
  */
-declare function RadioGroup<T extends RBValueType = string>({ children: nodeChildren, id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size: sizeProp, direction: directionProp, itemsDirection: itemsDirectionProp, alignment: alignmentProp, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): JSX.Element;
+declare function RadioGroup<T extends RBValueType = string>({ children: nodeChildren, id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size: sizeProp, direction: directionProp, itemsDirection: itemsDirectionProp, alignment: alignmentProp, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace RadioGroup {
     var Item: typeof SpecialRadioItem;
 }
 declare function SpecialRadioItem<T extends RBValueType = string>({ checked, id, value, children, ...props }: {
     children?: React$1.ReactNode;
-} & StrictOmit<RadioInputProps<T>, 'name'>): JSX.Element;
+} & StrictOmit<RadioInputProps<T>, 'name'>): react_jsx_runtime.JSX.Element;
 
 type TagsInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'value' | 'onValueChanged' | 'max' | 'min' | 'inputRef'> & InputStylingPropsType & {
     /** de values (dus de tags) van het input field */
@@ -2170,7 +1957,7 @@ type EmailInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & Inp
  * @param pattern het pattern voor validatie, (default = `/^@ \t\r\n]+@[^@ \t\r\n]+.[^@ \t\r\n]+/`)
  * @param autoComplete de autocomplete type (password managers) (default = `email`)
  */
-declare function EmailInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: EmailInputProps): JSX.Element;
+declare function EmailInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: EmailInputProps): react_jsx_runtime.JSX.Element;
 
 type TelephoneInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
     pattern?: 'mobiel' | 'vast' | string;
@@ -2181,7 +1968,7 @@ type TelephoneInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' |
  * @param pattern het pattern voor validatie, (default = '')
  * @param autoComplete de autocomplete type (password managers) (default = `tel`)
  */
-declare function TelephoneInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: TelephoneInputProps): JSX.Element;
+declare function TelephoneInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: TelephoneInputProps): react_jsx_runtime.JSX.Element;
 
 type URLInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
     pattern?: string;
@@ -2192,7 +1979,7 @@ type URLInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'patte
  * @param pattern het pattern voor validatie, (default = '')
  * @param autoComplete de autocomplete type (password managers) (default = `url`)
  */
-declare function URLInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: URLInputProps): JSX.Element;
+declare function URLInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: URLInputProps): react_jsx_runtime.JSX.Element;
 
 type PasswordInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
     revealPasswordAllowed?: boolean;
@@ -2207,7 +1994,7 @@ type PasswordInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> &
  * @param revealPasswordMsg boodschap bij de checkbox. Default is `Toon wachtwoord`
  * @param iconRevealed icon voor ww revealed. Default is `faEye`
  */
-declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, showRequiredOnLabel, labelHidden, size: sizeProp, direction: directionProp, revealPasswordAllowed, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): JSX.Element;
+declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, showRequiredOnLabel, labelHidden, size: sizeProp, direction: directionProp, revealPasswordAllowed, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): react_jsx_runtime.JSX.Element;
 
 type TextEditorPropsType = {
     content?: string;
@@ -2240,7 +2027,7 @@ type TextEditorPropsType = {
  * | onChangeText | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als platte tekst meegegeven. |
  * | onChangeJson | `(c: JSONContent) => void` | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als JSON meegegeven. |
  */
-declare function TextEditor({ content, hideTagSelector, hideAlignment, hideLists, hideLines, hideFontColor, hideHighlightColor, hideUndoRedo, hideFontStyling, hideTables, autoUrlConversion, size, id: editorID, onChangeHtml, onChangeText, onChangeJson, }: TextEditorPropsType): JSX.Element;
+declare function TextEditor({ content, hideTagSelector, hideAlignment, hideLists, hideLines, hideFontColor, hideHighlightColor, hideUndoRedo, hideFontStyling, hideTables, autoUrlConversion, size, id: editorID, onChangeHtml, onChangeText, onChangeJson, }: TextEditorPropsType): react_jsx_runtime.JSX.Element;
 
 type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'keyboardType' | 'step' | 'pattern' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp'> & StrictOmit<InputStylingPropsType, 'icon'> & {
     /** (optionele) `ref` voor gebruik met `React.useRef<HTMLTextAreaElement>` */
@@ -2267,7 +2054,7 @@ type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'k
  * @param rows aantal rijen voor de textarea (default: 4)
  * @param cols aantal kolommen voor de textarea. **werkt niet in Bulma! de breedte is altijd maximaal!**
  */
-declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size: sizeProp, alignment: alignmentProp, direction: directionProp, cols, rows, labelHidden, loading, infoData, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): JSX.Element;
+declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size: sizeProp, alignment: alignmentProp, direction: directionProp, cols, rows, labelHidden, loading, infoData, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): react_jsx_runtime.JSX.Element;
 
 type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | (string & {}) | RegExp;
 type TextInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
@@ -2293,7 +2080,7 @@ type TextInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & Inpu
  * <TextInput characters="a-Z" /> // lowercase en uppercase letters
  * <TextInput characters="0-Z" /> // lowercase, uppercase & numeriek
  */
-declare function TextInput({ value, characters, icon, onValueChanged, ...props }: TextInputProps): JSX.Element;
+declare function TextInput({ value, characters, icon, onValueChanged, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 type NumberInputProps = StrictOmit<InputPropsType<number>, 'type' | 'spellCheck'> & InputStylingPropsType & {
     prefix?: string;
@@ -2304,7 +2091,7 @@ type NumberInputProps = StrictOmit<InputPropsType<number>, 'type' | 'spellCheck'
  * @param value De waarde van de input
  * @example <NumberInput value={1} step={3}/>
  */
-declare function NumberInput({ value, prefix, suffix, icon, name, id: idProp, label, direction: directionProp, size: sizeProp, alignment: alignmentProp, required, disabled, readonly, loading, labelHidden, showRequiredOnLabel, className: extraClasses, infoData, helpTag, errorMessage, infoMessage, onValueChanged, onBlur, onFocus, ...props }: NumberInputProps): JSX.Element;
+declare function NumberInput({ value, prefix, suffix, icon, name, id: idProp, label, direction: directionProp, size: sizeProp, alignment: alignmentProp, required, disabled, readonly, loading, labelHidden, showRequiredOnLabel, className: extraClasses, infoData, helpTag, errorMessage, infoMessage, onValueChanged, onBlur, onFocus, ...props }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoComplete' | 'type' | 'spellCheck' | 'placeholder'> & StrictOmit<InputStylingPropsType, 'alignment' | 'icon'> & {
     /** value-unit om __voor__ de geselecteerde waarde te zetten. (default = `''`) */
@@ -2322,7 +2109,7 @@ type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoCom
  * @param step De stapgrootte van de input (default = 1)
  * @example <RangeInput value={50} min={0} max={100} />
  */
-declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size: sizeProp, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction: directionProp, labelHidden, infoData, }: RangeInputProps): JSX.Element;
+declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size: sizeProp, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction: directionProp, labelHidden, infoData, }: RangeInputProps): react_jsx_runtime.JSX.Element;
 
 /** Type used for setting values in a JSDateTime */
 type JSDateSetterType = {
@@ -3333,7 +3120,7 @@ type DateInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onV
  * @example <DateInput value={new Date()} {...props} onDateValueChanged={(v) => console.log(v)}/>
  * @example <DateInput value={JSDateTime.now()} {...props} onJSDateTimeValueChanged={(v) => console.log(v)}/>
  */
-declare function DateInput({ value, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: DateInputProps): JSX.Element;
+declare function DateInput({ value, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: DateInputProps): react_jsx_runtime.JSX.Element;
 
 type DateTimeInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
     /** Moeten de secondes en de milliseconden ook getoond worden? (default = `'none'`)
@@ -3373,7 +3160,7 @@ type DateTimeInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' |
  * @example <DateTimeInput value={new Date()} onDateValueChanged={(val) => console.log(val)} />
  * @example <DateTimeInput value={JSDateTime.now()} onJSDateTimeValueChanged={(val) => console.log(val)} />
  */
-declare function DateTimeInput({ value, step, useSecAndMillis, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: DateTimeInputProps): JSX.Element;
+declare function DateTimeInput({ value, step, useSecAndMillis, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
 
 type TimeInputProps = StrictOmit<InputPropsType<string>, 'step' | 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
     /** Moeten de secondes ook getoont worden in de input? (Default = false) */
@@ -3411,7 +3198,7 @@ type TimeInputProps = StrictOmit<InputPropsType<string>, 'step' | 'type' | 'valu
  * @example <TimeInput value={new Date()} onDateValueChanged={(val) => console.log(val)} />
  * @example <TimeInput value={JSDateTime.now()} onJSDateTimeValueChanged={(val) => console.log(val)} />
  */
-declare function TimeInput({ value, useSeconds, useMillis, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: TimeInputProps): JSX.Element;
+declare function TimeInput({ value, useSeconds, useMillis, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: TimeInputProps): react_jsx_runtime.JSX.Element;
 
 type FileInputValue = {
     files: File[];
@@ -3476,7 +3263,7 @@ type FileInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'valu
  * **default:** toon de namen van alle geselecteerde bestanden, gescheiden door komma's. Als er geen bestanden zijn, dan de noFilesTxt tonen.
  * @param onValueChanged callback voor value changes. Bevat het path naar de file(s) en de files in een array.
  */
-declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, infoData, formatter, }: FileInputProps): JSX.Element;
+declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, infoData, formatter, }: FileInputProps): react_jsx_runtime.JSX.Element;
 
 type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'pattern' | 'value' | 'type' | 'onValueChanged' | 'errorMessage' | 'infoMessage'> & InputStylingPropsType & {
     /** waarde van de input. Als number of als number-string-tuple (zoals waarde uit `onValueChanged`) */
@@ -3518,7 +3305,7 @@ type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'p
  * const [x, setX] = React.useState<string>('0');
  * <CurrencyInput value={x} onValueChanged={([strVal, _numVal]) => setX(strVal)} />
  */
-declare function CurrencyInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, inputRef, readonly, step, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, }: CurrencyInputProps): JSX.Element;
+declare function CurrencyInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, inputRef, readonly, step, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, }: CurrencyInputProps): react_jsx_runtime.JSX.Element;
 
 /** WeekInput: input voor een weeknummer (format: yyyy-Www)
  * -1e getal: jaartal
@@ -3558,7 +3345,7 @@ type WeekInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'valu
  * @param max maximale waarde als WeekInputValue. MOET hoger zijn dan `min`-prop
  * @example <WeekInput value="2021-W01" min="2021-W01" max="2021-W53" />
  */
-declare function WeekInput({ value, min, max, icon, onValueChanged, ...props }: WeekInputProps): JSX.Element;
+declare function WeekInput({ value, min, max, icon, onValueChanged, ...props }: WeekInputProps): react_jsx_runtime.JSX.Element;
 
 /** WeekInput: input voor een weeknummer (format: yyyy-MM)
  * -1e getal: jaartal
@@ -3598,7 +3385,7 @@ type MonthInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'val
  * @param max maximale waarde als MonthInputValue. MOET hoger zijn dan `min`-prop
  * @example <MonthInput value="2021-06" min="2021-01" max="2021-12" />
  */
-declare function MonthInput({ value, min, max, icon, onValueChanged, ...props }: MonthInputProps): JSX.Element;
+declare function MonthInput({ value, min, max, icon, onValueChanged, ...props }: MonthInputProps): react_jsx_runtime.JSX.Element;
 
 type PanelProps = {
     /** de kleur van het Panel (default = `i`) */
@@ -3681,17 +3468,13 @@ type PanelInputProps<T extends InputValueType> = PrettierType<StrictOmit<InputPr
  *  </Panel>
  */
 declare const Panel: {
-    ({ color, className: cnProp, children }: PanelProps): JSX.Element;
-    /** weergeven van tabs op het panel */
+    ({ color, className: cnProp, children }: PanelProps): react_jsx_runtime.JSX.Element;
     Tabs({ tabs, activeTab, onTabChange, children }: PanelTabsProps): react_jsx_runtime.JSX.Element;
-    /** weergeven van een tab-item */
     TabItem({ active, disabled, onClick, children }: PanelTabItemProps): react_jsx_runtime.JSX.Element;
-    /** weergeven van een header van de tab. Kan ook middenin het panel gebruikt worden */
     Header({ children }: {
         children: React$1.ReactNode;
-    }): JSX.Element;
-    /** weergeven van een item in het panel */
-    Item({ icon, active, disabled, children, onClick }: PanelItemProps): JSX.Element;
+    }): react_jsx_runtime.JSX.Element;
+    Item({ icon, active, disabled, children, onClick }: PanelItemProps): react_jsx_runtime.JSX.Element;
     /** Een input op het panel */
     Input: typeof PanelInput;
 };
@@ -3721,7 +3504,7 @@ type ProgressBarProps = {
  * <ProgressBar value={50} extension="%" />
  * <ProgressBar size='xl' />
  */
-declare function ProgressBar({ color, size, prefix, suffix, max, value, title: titleProp, }: ProgressBarProps): JSX.Element;
+declare function ProgressBar({ color, size, prefix, suffix, max, value, title: titleProp }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
 type SimpleTableProps<T extends unknown = unknown> = {
     id?: string;
@@ -3787,7 +3570,7 @@ type SimpleTableColProps<T extends unknown = unknown> = {
  *   bordered={false}
  * />
  */
-declare function SimpleTable<T extends unknown = unknown>({ rowIdentifier: rowKey, columns: cols, data, onRowSelected, tableRef, containerRef, id, hasFooter, ...props }: SimpleTableProps<T>): JSX.Element;
+declare function SimpleTable<T extends unknown = unknown>({ rowIdentifier: rowKey, columns: cols, data, onRowSelected, tableRef, containerRef, id, hasFooter, ...props }: SimpleTableProps<T>): react_jsx_runtime.JSX.Element;
 type TableProps = {
     id?: string;
     containerRef?: React$1.RefObject<HTMLDivElement>;
@@ -3816,77 +3599,29 @@ type TablePartProps<T extends HTMLElement = HTMLElement> = {
  * - `Table.Col` is de `<col>` tag. Deze kan je gebruiken om een column in de tabel te maken en deze bijvoorbeeld met een achtergrondkleur te vullen.
  */
 declare const Table: {
-    ({ id, containerRef, tableRef, scrollX, striped, bordered, hoverable, fullwidth, narrow, children, className: extraClasses, }: TableProps): JSX.Element;
-    /** `<thead>`, table-head */
-    Head({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): JSX.Element;
-    /** `<tfoot>`, table-foot */
-    Foot({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): JSX.Element;
-    /** `<tbody>`, table-body */
-    Body({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): JSX.Element;
-    /** `<tr>`, table-row */
-    Row({ children, className, ...props }: TablePartProps<HTMLTableRowElement>): JSX.Element;
-    /** `<td>`-cell */
+    ({ id, containerRef, tableRef, scrollX, striped, bordered, hoverable, fullwidth, narrow, children, className: extraClasses, }: TableProps): react_jsx_runtime.JSX.Element;
+    Head({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
+    Foot({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
+    Body({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): react_jsx_runtime.JSX.Element;
+    Row({ children, className, ...props }: TablePartProps<HTMLTableRowElement>): react_jsx_runtime.JSX.Element;
     Cell({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
         children?: React$1.ReactNode;
-    }): JSX.Element;
-    /** `<th>`-cell */
+    }): react_jsx_runtime.JSX.Element;
     HCell({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
         children?: React$1.ReactNode;
-    }): JSX.Element;
-    /** Column-group in a table. Wrapper for `<Table.Col<` or `<col>`-elements
-     * @example
-     * <Table.ColGroup>
-     *  <Table.Col />
-     * <Table.Col />
-     *
-     */
-    ColGroup({ className, ...props }: StrictOmit<TablePartProps<HTMLTableColElement>, "span">): JSX.Element;
-    /** Column-group in a table. Add stuff to cells in those columns
-     * @example
-     * <Table.ColGroup>
-     *   <Table.Col />
-     *   <Table.Col className='flash' span='2' />
-     *   <Table.Col className='flash' span='2'/>
-     * </Table.ColGroup>
-     * <Table.Head>
-     *  // etc ...
-     *
-     * // becomes something like:
-     * <table>
-     * <caption>Superheros and sidekicks</caption>
-     *   <colgroup>
-     *     <col>
-     *     <col span="2" class="batman">
-     *     <col span="2" class="flash">
-     *   </colgroup>
-     *   <tr>
-     *     <td> </td>
-     *     <th scope="col">Batman</th>
-     *     <th scope="col">Robin</th>
-     *     <th scope="col">The Flash</th>
-     *     <th scope="col">Kid Flash</th>
-     *   </tr>
-     *   <tr>
-     *     <th scope="row">Skill</th>
-     *     <td>Smarts</td>
-     *     <td>Dex, acrobat</td>
-     *     <td>Super speed</td>
-     *     <td>Super speed</td>
-     *   </tr>
-     * </table>
-     *
-     */
-    Col(props: StrictOmit<TablePartProps<HTMLTableColElement>, "children">): JSX.Element;
+    }): react_jsx_runtime.JSX.Element;
+    ColGroup({ className, ...props }: StrictOmit<TablePartProps<HTMLTableColElement>, "span">): react_jsx_runtime.JSX.Element;
+    Col(props: StrictOmit<TablePartProps<HTMLTableColElement>, "children">): react_jsx_runtime.JSX.Element;
     /** `<tr>`, table-row */
-    TR: ({ children, className, ...props }: TablePartProps<HTMLTableRowElement>) => JSX.Element;
+    TR: ({ children, className, ...props }: TablePartProps<HTMLTableRowElement>) => react_jsx_runtime.JSX.Element;
     /** `<td>`-cell */
     TD: ({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
         children?: React$1.ReactNode;
-    }) => JSX.Element;
+    }) => react_jsx_runtime.JSX.Element;
     /** `<th>`-cell */
     TH: ({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
         children?: React$1.ReactNode;
-    }) => JSX.Element;
+    }) => react_jsx_runtime.JSX.Element;
 };
 
 type StatusType = 'active' | 'completed' | 'error' | 'pending';
@@ -3899,7 +3634,7 @@ type StepsProps = {
     /** Grootte van de steps (default = 'm') */
     size?: SizeProp;
     id?: string;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
     /** Wat is de actieve step */
     activeStepIndex?: number;
     /** Change-step callback */
@@ -3943,16 +3678,8 @@ type StepItemProps = {
  * </Steps>
  */
 declare const Steps: {
-    ({ size, id, itemRef, className: cn, activeStepIndex, onChangeStep, children, stepChoice, }: StepsProps): JSX.Element;
-    /**
-     * Een stap in een stappen-paneel.
-     * @param props
-     * @returns een stap voor de <Steps> component
-     * @example
-     * <Steps.Item title="Step 1" marker={1} >Step 1</Steps.Item>
-     * <Steps.Item title="Step 2" marker={2} title="step 2" status="error">Step 2</Steps.Item>
-     */
-    Item(props: StepItemProps): JSX.Element;
+    ({ size, id, itemRef, className: cn, activeStepIndex, onChangeStep, children, stepChoice }: StepsProps): react_jsx_runtime.JSX.Element;
+    Item(props: StepItemProps): react_jsx_runtime.JSX.Element;
 };
 
 type TabBarProps = {
@@ -3995,12 +3722,7 @@ type TabBarItemProps = {
  * </TabBar>
  */
 declare const TabBar: {
-    ({ id, activeTab: currentActiveTab, initialTab, size: sizeProp, alignment, fullwidth, children, onTabChange, }: TabBarProps): JSX.Element;
-    /** Een item in een <TabBar> component
-     * @param props
-     * @returns tab item component
-     * @example <TabBar.Item tabId={1}>Tab 1</TabBar.Item>
-     */
+    ({ id, activeTab: currentActiveTab, initialTab, size: sizeProp, alignment, fullwidth, children, onTabChange, }: TabBarProps): react_jsx_runtime.JSX.Element;
     Item(props: StrictOmit<TabBarItemProps, "onClick" | "isActive">): react_jsx_runtime.JSX.Element;
 };
 
@@ -4033,7 +3755,7 @@ type TagsProps = {
     className?: string;
     id?: string;
     styles?: React$1.CSSProperties;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
 };
 /**
  * Maak een tag
@@ -4043,7 +3765,7 @@ type TagsProps = {
  * <Tag>Hello</Tag>
  * <Tag color='d'>Danger</Tag>
  */
-declare function Tag({ children, color, size: sizeProp, light, dark, title, onDismiss }: TagProps): JSX.Element;
+declare function Tag({ children, color, size: sizeProp, light, dark, title, onDismiss }: TagProps): react_jsx_runtime.JSX.Element;
 /**
  * Maak een tag-container aan. De tags kunnen aan elkaar geplakt worden of niet.
  * De grootte van de tags kan ook ingesteld worden
@@ -4055,7 +3777,7 @@ declare function Tag({ children, color, size: sizeProp, light, dark, title, onDi
  *   <Tag color="i">Tag 2</Tag>
  * </Tags>
  */
-declare function Tags({ children: nodes, merged, size: sizeProp, alignment, className: extraClasses, styles, itemRef, id, }: TagsProps): JSX.Element;
+declare function Tags({ children: nodes, merged, size: sizeProp, alignment, className: cn, styles, itemRef, id, }: TagsProps): react_jsx_runtime.JSX.Element;
 
 type TimeLineProps = {
     id?: string;
@@ -4111,21 +3833,9 @@ type TimeLinePointProps = {
  * </TimeLine>
  */
 declare const TimeLine: {
-    ({ id, alignment, children, className: cn }: TimeLineProps): JSX.Element;
-    /**
-     * Een punt op de timeline, bijvoorbeeld een jaartal of een datum. Er wordt een <Tag> gebruikt
-     * @param props
-     * @returns een punt (Tag-component) op de timeline
-     * @example <TimeLine.Point color="l">2016</TimeLine.Point>
-     */
-    Point({ children, color, size, title, onClick }: TimeLinePointProps): JSX.Element;
-    /**
-     * Een item met een omschrijving, heading en icon op de timeline
-     * @param props
-     * @returns een Item op de timeline
-     * @example <TimeLine.Item heading="March 2016">nothing happened</TimeLine.Item>
-     */
-    Item({ marker, heading, children, title, onClick }: TimeLineItemProps): JSX.Element;
+    ({ id, alignment, children, className: cn }: TimeLineProps): react_jsx_runtime.JSX.Element;
+    Point({ children, color, size, title, onClick }: TimeLinePointProps): react_jsx_runtime.JSX.Element;
+    Item({ marker, heading, children, title, onClick }: TimeLineItemProps): react_jsx_runtime.JSX.Element;
 };
 
 /** De basis-props voor de nodes en de items */
@@ -4150,7 +3860,7 @@ type InternTreeViewProps<T extends unknown = string> = BaseProps<T> & {
     nodes?: Array<TreeViewNode<T>>;
     expanded: boolean;
 };
-declare function TreeViewRoot<T extends unknown = string>({ className: cnProp, style, initialPath, expanded, nodes: data, }: TreeViewProps<T>): JSX.Element;
+declare function TreeViewRoot<T extends unknown = string>({ className: cnProp, style, initialPath, expanded, nodes: data, }: TreeViewProps<T>): react_jsx_runtime.JSX.Element;
 type TreeViewNode<T extends unknown = string> = {
     /** de value van deze node (default een string, maar generic) */
     value: T;
@@ -4167,7 +3877,7 @@ type TreeViewNode<T extends unknown = string> = {
      */
     onClick?: (value: T, path: string) => void;
 };
-declare function TreeViewNode<T extends unknown = string>({ className: cnProp, style, path, expanded, hoveredPath, setHoveredPath, selectedPath, setSelectedPath, nodes, }: InternTreeViewProps<T>): JSX.Element;
+declare function TreeViewNode<T extends unknown = string>({ className: cnProp, style, path, expanded, hoveredPath, setHoveredPath, selectedPath, setSelectedPath, nodes, }: InternTreeViewProps<T>): react_jsx_runtime.JSX.Element;
 type TreeViewProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<T>, 'path' | 'hoveredPath' | 'setHoveredPath' | 'selectedPath' | 'setSelectedPath' | 'expanded'> & {
     initialPath?: string;
     expanded?: boolean;
@@ -4175,7 +3885,7 @@ type TreeViewProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<
 
 type HeadingProps = {
     children: React$1.ReactNode;
-    itemRef?: React$1.RefObject<any>;
+    itemRef?: React$1.RefObject<any> | null;
     size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | '1' | '2' | '3' | '4' | '5' | '6' | '7';
     subtitle?: boolean;
     id?: string;
@@ -4245,7 +3955,7 @@ declare const H6: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, clas
 
 type QuickViewProps = {
     /** ref naar de quickview. Bijvoorbeeld voor gebruik met de `useClickOutside()`-hook */
-    itemRef?: any;
+    itemRef?: any | null;
     /** ID van de quickview */
     id?: string;
     /** Content van de quickview, kunnen Quickview.Head,er, Quickview.Body of Quickview.Footer elementen zijn. Andere elementen worden gewrapped in Quickview.Body */
@@ -4283,20 +3993,23 @@ type QuickViewProps = {
  * </QuickView>
  */
 declare const QuickView: {
-    ({ children, id, itemRef, color, alignment, tag, onDismiss, onOpened }: QuickViewProps): JSX.Element;
+    ({ children, id, itemRef, color, alignment, tag, onDismiss, onOpened }: QuickViewProps): react_jsx_runtime.JSX.Element;
     Header: typeof InternHeader;
-    Body: ({ children }: {
-        children: React$1.ReactNode;
-    }) => JSX.Element;
-    Footer: ({ children }: {
-        children: React$1.ReactNode;
-    }) => JSX.Element;
+    Body: ({ children }: InternBodyProps) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children }: InternFooterProps) => react_jsx_runtime.JSX.Element;
 };
-declare function InternHeader({ children, color, onDismiss, }: {
+type InternHeaderProps = {
     children?: React$1.ReactNode;
     color?: ColorProp;
     onDismiss?: () => void;
-}): JSX.Element;
+};
+declare function InternHeader({ children, color, onDismiss }: InternHeaderProps): react_jsx_runtime.JSX.Element;
+type InternBodyProps = {
+    children: React$1.ReactNode;
+};
+type InternFooterProps = {
+    children: React$1.ReactNode;
+};
 
 type ToggleBarProps = {
     /** De beginwaarde (default = undefined)
@@ -4358,7 +4071,7 @@ type OnOffToggleItemProps = ToggleItemProps & {
  * </ToggleBar>
  */
 declare const ToggleBar: {
-    ({ size: sizeProp, rounded, alignment, value, initialValue, children: nodes, className: classes, onToggle, }: ToggleBarProps): JSX.Element;
+    ({ size: sizeProp, rounded, alignment, value, initialValue, children: nodes, className: classes, onToggle, }: ToggleBarProps): react_jsx_runtime.JSX.Element;
     /**
      * Item binnen de ToggleBar. Een van de ToggleItems in een ToggleBar kan maar actief zijn.
      * @param props
@@ -4396,9 +4109,9 @@ type ButtonGroupProps = {
  * @param className: Voeg  extra classes aan de buttons-container toe
  * @returns
  */
-declare function Buttons({ unevenSize, alignment, ...props }: ButtonGroupProps): JSX.Element;
+declare function Buttons({ unevenSize, alignment, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-type ButtonStyles = 'faded' | 'f' | 'inverted' | 'i' | 'static' | 's' | 'default' | 'd';
+type ButtonStyles = 'faded' | 'f' | 'inverted' | 'i' | 'static' | 's' | 'default' | 'd' | 'outlined' | 'o';
 type ButtonProps = {
     /** Is de button loading ? */
     loading?: boolean;
@@ -4458,45 +4171,17 @@ type ButtonProps = {
  * | type     | `button, reset, submit` | `button` | type 'button' voor de button            |
  */
 declare const Button: {
-    ({ color: colorProp, size: sizeProp, loading, disabled, fullwidth, styling, type, isStatic, helpTag, onClick, onFocus, children: nodes, value, ...props }: ButtonProps): JSX.Element;
-    /**
-     * Een Static Button
-     * Een static button is niet interactief, maar wordt bijvoorbeeld gebruikt als scheiding voor add-ons
-     * @example <Button.Static>Static Button</Button.Static>
-     */
-    Static(props: StrictOmit<ButtonProps, "color" | "isStatic" | "onClick" | "onFocus" | "disabled" | "loading">): JSX.Element;
-    /** Een Button in de primary kleur
-     * @example <Button.Primary>Primary Button</Button.Primary>
-     */
-    Primary(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de success kleur
-     * @example <Button.Success>Success Button</Button.Success>
-     */
-    Success(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de danger kleur
-     * @example <Button.Danger>Danger Button</Button.Danger>
-     */
-    Danger(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de warning kleur
-     * @example <Button.Warning>Warning Button</Button.Warning>
-     */
-    Warning(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de info kleur
-     * @example <Button.Info>Info Button</Button.Info>
-     */
-    Info(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de link kleur
-     * @example <Button.Link>Link Button</Button.Link>
-     */
-    Link(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de light kleur
-     * @example <Button.Light>Link Button</Button.Light>
-     */
-    Light(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
-    /** Een Button in de dark kleur
-     * @example <Button.Dark>Link Button</Button.Dark>
-     */
-    Dark(props: StrictOmit<ButtonProps, "color" | "isStatic">): JSX.Element;
+    ({ color: colorProp, size: sizeProp, loading, disabled, fullwidth, styling, type, isStatic, helpTag, onClick, onFocus, children: nodes, value, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+    Static(props: StrictOmit<ButtonProps, "color" | "isStatic" | "onClick" | "onFocus" | "disabled" | "loading">): react_jsx_runtime.JSX.Element;
+    Primary(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Success(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Danger(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Warning(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Info(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Link(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Light(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    Dark(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
+    None(props: StrictOmit<ButtonProps, "color" | "isStatic">): react_jsx_runtime.JSX.Element;
 };
 
 type LinkButtonProps = {
@@ -4513,7 +4198,7 @@ type LinkButtonProps = {
  * @returns een button die er uit ziet als een link
  * @example <LinkButton onClick={handleClick}>Click me!</LinkButton>
  */
-declare function LinkButton({ fullwidth, children, color, onClick, ...props }: LinkButtonProps): JSX.Element;
+declare function LinkButton({ fullwidth, children, color, onClick, ...props }: LinkButtonProps): react_jsx_runtime.JSX.Element;
 type LinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
     color?: ColorProp;
     /** link / URL */
@@ -4538,7 +4223,7 @@ type LinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
  * @returns een link
  * @example <Link href="https://www.google.com">Google</Link>
  */
-declare function Link({ color, href, target, id, rel, children, ...props }: LinkProps): JSX.Element;
+declare function Link({ color, href, target, id, rel, children, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
 
 type CalendarType = 'm' | 'v' | 'w' | 'p';
 type CalendarHours = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | (number & {});
@@ -4612,7 +4297,7 @@ type FourweekViewProps<T extends BaseEventProps> = {
  * @param props
  * @returns
  */
-declare function FourweeksView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: FourweekViewProps<T>): JSX.Element;
+declare function FourweeksView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: FourweekViewProps<T>): react_jsx_runtime.JSX.Element;
 
 type MonthViewProps<T extends BaseEventProps> = {
     /** Events voor deze view */
@@ -4631,7 +4316,7 @@ type MonthViewProps<T extends BaseEventProps> = {
  * @param props
  * @returns
  */
-declare function MonthView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: MonthViewProps<T>): JSX.Element;
+declare function MonthView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: MonthViewProps<T>): react_jsx_runtime.JSX.Element;
 
 type PlanningViewProps<R, E extends BaseEventProps = BaseEventProps> = {
     /** Datum van de view */
@@ -4668,7 +4353,7 @@ type PlanningViewProps<R, E extends BaseEventProps = BaseEventProps> = {
  * @param param0
  * @returns
  */
-declare function PlanningView<R, E extends BaseEventProps>({ viewDate, days: daysShown, alwaysStartOnMonday, options, rows, rowIdentifier, dayHeader, rowHeader, rowLabel, onDayClick, onEventClick, }: PlanningViewProps<R, E>): JSX.Element;
+declare function PlanningView<R, E extends BaseEventProps>({ viewDate, days: daysShown, alwaysStartOnMonday, options, rows, rowIdentifier, dayHeader, rowHeader, rowLabel, onDayClick, onEventClick, }: PlanningViewProps<R, E>): react_jsx_runtime.JSX.Element;
 
 type WeekViewProps<T extends BaseEventProps> = {
     /** Events voor deze view */
@@ -4688,7 +4373,7 @@ type WeekViewProps<T extends BaseEventProps> = {
  * @returns een weekview (grid) met de events
  * @ex
  */
-declare function WeekView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, events: orgEvents, onDayClick, }: WeekViewProps<T>): JSX.Element;
+declare function WeekView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, events: orgEvents, onDayClick }: WeekViewProps<T>): react_jsx_runtime.JSX.Element;
 
 type MiniViewProps = {
     /** de viewDate waarop de mini-view start (optioneel, default = vandaag) */
@@ -4710,7 +4395,7 @@ type MiniViewOptions = {
     dateFormat?: string;
     locale?: Locale;
 };
-declare function MiniView({ viewDate: vd, options: opts, onDateSelected, onJSDateTimeSelected, }: MiniViewProps): JSX.Element;
+declare function MiniView({ viewDate: vd, options: opts, onDateSelected, onJSDateTimeSelected }: MiniViewProps): react_jsx_runtime.JSX.Element;
 
 declare const Calendar: {
     Month: typeof MonthView;
@@ -4766,7 +4451,7 @@ type TooltipProps = {
  * @example <TT content={<>Tooltip content</>} placement="b">Hover me</TT>
  * @example <TT content="Tooltip content" triggers={['click', 'contextMenu']}>Click or RightClick me</TT>
  */
-declare function TT({ className, children, style, content, hideArrow, triggers, placement: plcmnt, display, delay, }: TooltipProps): JSX.Element;
+declare function TT({ className, children, style, content, hideArrow, triggers, placement: plcmnt, display, delay, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 type PaginationProps = {
     /** current selected page number */ currentPage: number;
@@ -4808,7 +4493,7 @@ type PaginationProps = {
  * @param prev - functie die wordt aangeroepen als er op de vorige-pagina knop wordt geklikt
  * @param next - functie die wordt aangeroepen als er op de volgende-pagina knop wordt geklikt
  */
-declare function Pagination({ range, currentPage, size, hideFirst, hideLast, hidePrev, hideNext, hideNumbers, set, first, last, prev, next, }: PaginationProps): JSX.Element;
+declare function Pagination({ range, currentPage, size, hideFirst, hideLast, hidePrev, hideNext, hideNumbers, set, first, last, prev, next, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 type NotifierProviderProps = {
     /** De child-components die de notifier mogen gebruiken */
@@ -4856,7 +4541,7 @@ type NotifierItemProps = {
  * @param props
  * @returns een Notificatie-component die (tijdelijke) berichtjes weergeeft aan de rechterkant van het scherm.
  */
-declare function Notifier({ next, clearTime, del, defaultDismissTime, location, width: containerWidth, }: NotifierProps): JSX.Element;
+declare function Notifier({ next, clearTime, del, defaultDismissTime, location, width: containerWidth }: NotifierProps): react_jsx_runtime.JSX.Element;
 
 type NotifierContextType = {
     /** Toon een notificatie
@@ -4914,7 +4599,7 @@ type State$2 = {
  */
 declare function ConfirmProvider({ children }: {
     children: React$1.ReactNode;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 /**
  * Hook voor de confirmation
  * @param ok tekst voor op de OK-button (default = 'Ok')
@@ -4972,7 +4657,7 @@ type State$1 = {
  */
 declare function PromptProvider({ children }: {
     children: React$1.ReactNode;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 type AllowedPromptTypes = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search';
 /**
  * Hook voor de prompt
@@ -5041,7 +4726,7 @@ type State<T extends unknown = {}> = {
  */
 declare function ActionSheetProvider({ children }: {
     children: React$1.ReactNode;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 /**
  * Hook voor de confirmation
  * @param buttons tekst voor op de OK-button (default = 'Ok')
@@ -5088,7 +4773,7 @@ declare function useActionSheet<T extends unknown = string>(): {
 /** DialogsProvider bevat provider contexts voor ConfirmContext, ActionSheetContext EN PromptContext */
 declare function DialogsProvider({ children }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 
 declare const ColorSchemeContext: React$1.Context<{
     scheme: ColorSchemeType;
@@ -5515,7 +5200,7 @@ declare function useSessionStoredState<T extends unknown = {}>({ key, initialVal
  * const ref = useClickOutside(() => console.log('clicked outside'), ['mousedown']);
  * return <QuickView itemRef={ref}>...</QuickView>
  */
-declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): React$1.RefObject<T>;
+declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): React$1.RefObject<T | null>;
 
 type Axis = 'x' | 'y';
 type Alignment = 'start' | 'end' | 'center';
@@ -5569,8 +5254,8 @@ type ScrollIntoViewParams = {
  * <button onClick={() => ScrollToSecondTarget()}>Scroll naar tweede element</button>
  */
 declare function useScrollIntoView<Target extends HTMLElement, Parent extends HTMLElement | null = null>({ duration, axis, onScrollFinish, offset, cancelable, isList, }?: ScrollIntoViewParams): {
-    scrollableRef: React$1.RefObject<Parent>;
-    targetRef: React$1.RefObject<Target>;
+    scrollableRef: React$1.RefObject<Parent | null>;
+    targetRef: React$1.RefObject<Target | null>;
     scrollIntoView: ({ alignment }?: ScrollIntoViewAnimation) => void;
     cancel: () => void;
 };
@@ -5664,7 +5349,7 @@ declare function useContextMenu<T extends HTMLElement = HTMLElement>(outerRef: R
  * @returns
  */
 declare function ContextMenu({ outerRef, children }: {
-    outerRef: React$1.RefObject<HTMLDivElement>;
+    outerRef: React$1.RefObject<HTMLElement | null> | null;
     children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;