loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/components/Calendar/Week/AlldayContainer.d.ts

@@ -0,0 +1,19 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+type AlldayContainerProps<T extends BaseEventProps> = {
+    events: T[];
+    /** Wat te doen als een event aangeklikt wordt */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    onDayClick?: (date: JSDateTime, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** Wat te doen als een dag aangeklikt wordt */
+    options?: CalendarOptions<T>;
+    date: JSDateTime;
+};
+/**
+ * Component voor allday objects in de calendar
+ * @param props
+ * @returns
+ */
+export declare function AlldayContainer<T extends BaseEventProps>({ options, events, date, onEventClick, onDayClick }: AlldayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Calendar/Week/HourRow.d.ts

@@ -0,0 +1,30 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions, CalendarHours } from '../Props';
+/**
+ * Component om een uur-nummer weer te geven.
+ * @param param0
+ * @returns
+ */
+export declare function HourNumber({ hour }: {
+    hour: number;
+}): import("react/jsx-runtime").JSX.Element;
+type HourSlotProps<T extends BaseEventProps> = {
+    /** De events voor deze HourProp */
+    events: T[];
+    hour: number;
+    date: JSDateTime;
+    /** Event-selected callback Fn */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    onCellClick?: (dt: JSDateTime, e: React.MouseEvent<HTMLElement>) => void;
+    /** Options bij de calendar */
+    options?: CalendarOptions<T>;
+    lastVisibleHour?: CalendarHours;
+};
+/**
+ * Component voor een uur-slot.
+ * @param param0
+ * @returns
+ */
+export declare function HourSlot<T extends BaseEventProps>({ events, hour, date, onEventClick, onCellClick, options, lastVisibleHour }: HourSlotProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Calendar/Week/WeekView.d.ts

@@ -0,0 +1,24 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+type WeekViewProps<T extends BaseEventProps> = {
+    /** Events voor deze view */
+    events: T[];
+    /** Opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** Event aangeklikt */
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React.MouseEvent<HTMLElement>) => void;
+    /** Huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * Maak een week-view (grid) met events
+ * @param props
+ * @returns een weekview (grid) met de events
+ * @ex
+ */
+declare function WeekView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, events: orgEvents, onDayClick }: WeekViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export { WeekView };
+export type { WeekViewProps };

package/dist/lib/components/Calendar/calendar.functions.d.ts

@@ -0,0 +1,10 @@
+import { JSDateTime } from "./../../utils/JSDateTime.class";
+import { BaseEventProps, CalendarOptions } from "./Props";
+/** Controleer of een event zichtbaar moet zijn tussen twee datu,s:
+ * - startDt tussen start en eind
+ * - eindDt tussen start en eind
+ * - startDt voor start en eindDt na eind
+ */
+export declare function eventIsZichtbaar<T extends BaseEventProps>(start: JSDateTime, end: JSDateTime, event: T): boolean;
+/** zorg dat de datum / tijd die we nodig hebben in de calkendar zijn ingevuld */
+export declare function datumTijdRegelaar<T extends BaseEventProps>(event: T, options: CalendarOptions<T>): T;

package/dist/lib/components/Calendar/index.d.ts

@@ -0,0 +1,15 @@
+import { FourweeksView } from "./Fourweeks/FourweeksView";
+import { MonthView, MonthViewProps } from "./Month/MonthView";
+import { PlanningView, PlanningViewProps } from "./Planning/PlanningView";
+import { WeekView, WeekViewProps } from "./Week/WeekView";
+import { CalendarType } from "./Props";
+import { MiniView } from "./Mini/MiniView";
+declare const Calendar: {
+    Month: typeof MonthView;
+    Week: typeof WeekView;
+    Fourweeks: typeof FourweeksView;
+    Planning: typeof PlanningView;
+    Mini: typeof MiniView;
+};
+export { Calendar };
+export type { WeekViewProps, MonthViewProps, PlanningViewProps, CalendarType };

package/dist/lib/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,49 @@
+type CodeLanguage = 'bash' | 'c#' | 'C#' | 'css' | 'csharp' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'markup' | 'sass' | 'scss' | 'sql' | 'ts' | 'tsx' | 'typescript' | 'vbnet' | 'vb' | 'xml' | 'xmlDoc';
+type CodeBlockProps = {
+    /** De code voor in het blok */
+    code: string;
+    /** de gewenste taal, default = `tsx` */
+    language?: CodeLanguage;
+    /** De className voor de container van het blok */
+    className?: string;
+    /** Gebruiken we de donkere variant? default = false */
+    dark?: boolean;
+    /** Moeten we lijnnummers tonen? default = false */
+    showLineNumbers?: boolean;
+};
+/**
+ * Maak een opgemaakt blokje met code. Zie `CodeLanguage` voor de ondersteunde talen.
+ * @param code De code voor in het blok
+ * @param language De gewenste taal, default = `tsx`
+ * @param className De className voor de container van het blok
+ * @param dark Gebruiken we de donkere variant? default = false
+ * @param showLineNumbers Moeten we lijnnummers tonen? default = false
+ * @example
+ * <CodeBlock code="const x = 1;" language="js" />
+ * @example
+ * <CodeBlock code="const x: number = 1;" language="ts" dark={false} />
+ * @example
+ * <CodeBlock code={`
+ *   <Input
+ *     label="Default Input"
+ *     name="input-default"
+ *     id="input-default"
+ *     value={value}
+ *     onChange={onChange}
+ *     onValueChanged={setValue} />
+ * `} />
+ * @description Ondersteunde talen:
+ * - `C#`, `csharp` of `c#`
+ * - `css`, `scss` of `sass`
+ * - `html` of `markup`
+ * - `javascript` of `js`
+ * - `json`
+ * - `jsx` of `tsx`
+ * - `sql`
+ * - `typescript` of `ts`
+ * - `vbnet` of `vb`
+ * - `xml` of `xmlDoc`
+ */
+declare function CodeBlock({ code, dark, language, className, showLineNumbers }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export { CodeBlock };
+export type { CodeBlockProps, CodeLanguage };

package/dist/lib/components/Columns/Column.d.ts

@@ -0,0 +1,207 @@
+import React from 'react';
+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 = {
+    /** De inhoud van de column */
+    children?: React.ReactNode;
+    /** Extra classes op deze kolom */
+    className?: string;
+    /** Zet de styling voor de children-container, niet van de column-div zelf */
+    styles?: React.CSSProperties;
+    id?: string;
+    itemRef?: React.RefObject<HTMLDivElement> | null;
+};
+type ExpandedColumnProps = ColumnProps & {
+    /** Is deze kolom zo smal mogelijk of vanaf welke schermmaat */
+    narrow?: boolean | undefined;
+    size?: ColSize | undefined;
+};
+/**
+ * Standaard kolom voor gebruik in {@link Columns}.
+ * Als voor narrow een waarde is meegegeven, wordt de minimale ruimte voor deze kolom aangehouden: https://bulma.io/documentation/columns/sizes/
+ * @return Een kolom
+ * @example
+ * <Column>This is a column</Column>
+ * <Column narrow>This is a narrow column</Column>
+ * <Column size="1/2">This is a half column</Column>
+ * <Column size="1/3">This is a third column</Column>
+ * <Column size="2/3">This is a two-thirds column</Column>
+ * <Column size="1/4">This is a quarter column</Column>
+ * <Column size="3/4">This is a three-quarters column</Column>
+ * <Column size="1/5">This is a fifth column</Column>
+ * <Column size="4/5">This is a four-fifths column</Column>
+ * <Column size="1/12">This is a twelfth column</Column>
+ * <Column size="11/12">This is a eleven-twelfths column</Column>
+ * <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): import("react/jsx-runtime").JSX.Element;
+    Full(props: ColumnProps): import("react/jsx-runtime").JSX.Element;
+    Half(props: ColumnProps): import("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
+     * <Column size="1/3">...</Column>
+     * <Column size="2/3">...</Column>
+     */
+    Thirds: {
+        /** Column  1/3 width of parent
+         * @returns een kolom met 1/3 breedte van de parent 'Columns'
+         * @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) => import("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) => import("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
+     * @example
+     * <Column size="1/4">...</Column>
+     * <Column size="2/4">...</Column>
+     * <Column size="3/4">...</Column>
+     */
+    Quarters: {
+        /** Column  1/4 width of parent
+         * @returns een kolom met 1/4 breedte van de parent 'Columns'
+         * @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) => import("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) => import("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) => import("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
+     * @example <Column size="1/5">...</Column>
+     *  <Column size="2/5">...</Column>
+     *  // ...
+     *  <Column size="5/5">...</Column>
+     */
+    Fifths: {
+        /** Column  1/5 width of parent
+         * @returns een kolom met 1/5 breedte van de parent 'Columns'
+         * @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) => import("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) => import("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) => import("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) => import("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)
+     * @deprecated Gebruik de gewone Column-component met de `size`-prop zoals onderstaand voorbeeld om deze te vervangen
+     * @example
+     * <Column size="1/12">...</Column>
+     * <Column size="2/12">...</Column>
+     * // ...
+     * <Column size="11/12">...</Column>
+     * <Column size="12/12">...</Column>
+     */
+    Twelves: {
+        /** Column  1/12 width of parent
+         * @returns een kolom met 1/12 breedte van de parent 'Columns'
+         * @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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("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) => import("react/jsx-runtime").JSX.Element;
+    };
+    displayName: string;
+};
+export { Column };
+export type { ColumnProps, ExpandedColumnProps, ColSize };

package/dist/lib/components/Columns/Columns.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export type ColumnsProps = {
+    /** Children van de Columns. Moeten van het type @see Column zijn */
+    children: React.ReactNode;
+    /** De gap-grootte (stappen van .25rem), een margin tussen kolommen (default = 3, 0.75rem),
+     * 's' = 1, 'm' = 3, 'l' = 5, 'xl' = 7
+     */
+    gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | undefined;
+    /** Mogen de kolommen over meerdere rijen verdeeld worden */
+    multiline?: boolean;
+    /** Moeten de kolom centraal aligned worden */
+    centered?: boolean;
+    /** Moeten de kolommen verticaal gealigneerd worden */
+    vCentered?: boolean;
+    /** Extra classes voor dit element */
+    className?: string;
+    /** Set de styling direct */
+    styles?: React.CSSProperties;
+    id?: string;
+    itemRef?: React.RefObject<any>;
+};
+/**
+ * Verdeel een pagina in kolommen, children zijn van het type {@link Column } voor het maken van de kolommen.
+ *
+ * Kijk op {@link https://bulma.io/documentation/columns/sizes/} voor de bulma-uitleg.
+ * @param {ColumnProps} props
+ * @returns Columns component which can be used to create a column layout.
+ * @example
+ * <Columns>
+ *   <Column>This is a column</Column>
+ *   <Column>This is a column</Column>
+ *   <Column narrow>This is a narrow column</Column>
+ * </Columns>
+ */
+export declare function Columns({ children, id, gap, multiline, centered, vCentered, className: classes, styles, itemRef, }: ColumnsProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Container/Container.d.ts

@@ -0,0 +1,45 @@
+import { SizeProp, StrictOmit } from './../..';
+import React from 'react';
+type ContainerProps = {
+    /** Container content */
+    children?: React.ReactNode | undefined;
+    /** Extra classes */
+    className?: string;
+    /** Set styling directly on container */
+    styles?: React.CSSProperties;
+    /** Set the size of the container
+     * - 's' = default container
+     * - 'm' = slightly wider container
+     * - 'l' = very wide container
+     * - 'xl' = max width container
+     * - 'fluid' = full width container, met een margin van 32px aan beide kanten
+     */
+    size?: SizeProp | 'fluid' | 'default';
+    id?: string;
+    itemRef?: React.RefObject<any>;
+};
+/**
+ * Een container om content horizontaal te centreren in grote viewports.
+ * @param props
+ * @return een default container
+ *
+ * @description De width van de container is afhankelijk van de maximale viewport width:
+ * | Component                  | size    | tot 1023px | tot 1216px | tot 1408px | groter    |
+ * |----------------------------|---------|------------|------------|------------|-----------|
+ * | `<Container>`              | `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.Widest>`       | `xl     | max-width  | max-width  | max-width  | 1344px    |
+ * | `<Container size='fluid'>` | `fluid` | 100%       | 100%       | 100%       | 100%      |
+ *
+ * @example <Container>This is a container</Container>
+ */
+declare const Container: {
+    ({ className: cn, children, styles, size, id, itemRef }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+    Default({ className, children, styles }: StrictOmit<ContainerProps, "size">): import("react/jsx-runtime").JSX.Element;
+    Wide({ className, children, styles }: StrictOmit<ContainerProps, "size">): import("react/jsx-runtime").JSX.Element;
+    Widest({ className, children, styles }: StrictOmit<ContainerProps, "size">): import("react/jsx-runtime").JSX.Element;
+    Max({ className, children, styles }: StrictOmit<ContainerProps, "size">): import("react/jsx-runtime").JSX.Element;
+};
+export { Container };
+export type { ContainerProps };

package/dist/lib/components/Content/Content.d.ts

@@ -0,0 +1,22 @@
+import { SizeProp } from './../../types';
+import React from 'react';
+type ContentPropsType = {
+    /** Size van de content (default = 'm') */
+    size?: SizeProp;
+    /** Content voor het content-element */
+    children: React.ReactNode;
+    /** Extra classes */
+    className?: string;
+    /** Extra inline styles */
+    styles?: React.CSSProperties;
+    id?: string;
+    itemRef?: React.RefObject<any> | null;
+};
+/**
+ * Een Content component voor generated content. De meeste html tags kunnen hier worden gebruikt.
+ * @param props size: de tekstgrootte, children: de content van de content
+ * @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>
+ */
+export declare function Content({ size, className: cn, styles, id, children, itemRef }: ContentPropsType): import("react/jsx-runtime").JSX.Element;
+export {};