@eccenca/gui-elements 23.1.0-rc.4 → 23.2.0-rc.0

package/dist/types/components/Button/Button.d.ts

@@ -1,51 +1,62 @@
 import React from "react";
-import { ButtonProps as BlueprintButtonProps, AnchorButtonProps as BlueprintAnchorButtonProps } from "@blueprintjs/core";
-import { TooltipProps } from "./../Tooltip/Tooltip";
+import { AnchorButtonProps as BlueprintAnchorButtonProps, ButtonProps as BlueprintButtonProps } from "@blueprintjs/core";
 import { ValidIconName } from "../Icon/canonicalIconNames";
+import { BadgeProps } from "./../Badge/Badge";
+import { TooltipProps } from "./../Tooltip/Tooltip";
 export declare type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
     /**
-    * Always use this when the button triggers an affirmative action, e.g. confirm a process.
-    * The button is displayed with primary color scheme.
-    */
+     * Always use this when the button triggers an affirmative action, e.g. confirm a process.
+     * The button is displayed with primary color scheme.
+     */
     affirmative?: boolean;
     /**
-    * Always use this when the button triggers an disruptive action, e.g. delete or remove.
-    * The button is displayed with primary color scheme.
-    */
+     * Always use this when the button triggers an disruptive action, e.g. delete or remove.
+     * The button is displayed with primary color scheme.
+     */
     disruptive?: boolean;
     /**
-    * Use this when a button is important enough to highlight it in a set of other buttons.
-    * The button is displayed with primary color scheme.
-    */
+     * Use this when a button is important enough to highlight it in a set of other buttons.
+     * The button is displayed with primary color scheme.
+     */
     elevated?: boolean;
     /**
-    * The button is displayed with primary color scheme.
-    */
+     * The button is displayed with primary color scheme.
+     */
     hasStatePrimary?: boolean;
     /**
-    * The button is displayed with success (some type of green) color scheme.
-    */
+     * The button is displayed with success (some type of green) color scheme.
+     */
     hasStateSuccess?: boolean;
     /**
-    * The button is displayed with warning (some type of orange) color scheme.
-    */
+     * The button is displayed with warning (some type of orange) color scheme.
+     */
     hasStateWarning?: boolean;
     /**
-    * The button is displayed with danger (some type of red) color scheme.
-    */
+     * The button is displayed with danger (some type of red) color scheme.
+     */
     hasStateDanger?: boolean;
     /**
-    * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
-    */
+     * Content displayed in a badge that is attached to the button.
+     * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
+     * Use `badgeProps` to change that default behaviour.
+     */
+    badge?: BadgeProps["children"];
+    /**
+     * Object with additional properties for the badge.
+     */
+    badgeProps?: Partial<Omit<BadgeProps, "children">>;
+    /**
+     * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
+     */
     tooltip?: string | JSX.Element | null;
     /**
-    * Object with additional properties for the tooltip.
-    */
+     * Object with additional properties for the tooltip.
+     */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
-    * If an URL is set then the button is included as HTML anchor element instead of a button form element.
-    */
+     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
+     */
     href?: string;
     icon?: ValidIconName | JSX.Element;
     rightIcon?: ValidIconName | JSX.Element;
@@ -55,5 +66,5 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
  * Display a button element to enable user interaction.
  * It normally should trigger action when clicked.
  */
-declare function Button({ children, className, affirmative, disruptive, elevated, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, icon, rightIcon, tooltip, tooltipProps, ...restProps }: ButtonProps & AnchorOrButtonProps): JSX.Element;
+export declare const Button: ({ children, className, affirmative, disruptive, elevated, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, icon, rightIcon, tooltip, tooltipProps, badge, badgeProps, ...restProps }: ButtonProps & AnchorOrButtonProps) => React.JSX.Element;
 export default Button;

package/dist/types/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CardProps as BlueprintCardProps } from "@blueprintjs/core";
 export interface CardProps extends BlueprintCardProps {
     /**
@@ -28,5 +28,5 @@ export interface CardProps extends BlueprintCardProps {
  * Element to separate content sections from each other.
  * Cards can include other cards but should not.
  */
-declare function Card({ children, className, elevation, isOnlyLayout, fullHeight, elevated, scrollinOnFocus, whitespaceAmount, interactive, ...otherProps }: CardProps): JSX.Element;
+export declare const Card: ({ children, className, elevation, isOnlyLayout, fullHeight, elevated, scrollinOnFocus, whitespaceAmount, interactive, ...otherProps }: CardProps) => React.JSX.Element;
 export default Card;

package/dist/types/components/Card/CardActions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set an inverse direction of how the elements are aligned.
      * Mainly used for cards used as modals (dialogs).
@@ -10,5 +10,5 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
  * Contains a footer with user-interaction elements like buttons for the `Card` element.
  * Content must be ordered by importance, so the main action comes before other actions.
  */
-declare function CardActions({ children, className, inverseDirection, ...otherProps }: OverviewItemProps): JSX.Element;
+export declare const CardActions: ({ children, className, inverseDirection, ...otherProps }: CardActionsProps) => React.JSX.Element;
 export default CardActions;

package/dist/types/components/Card/CardActionsAux.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardActionsAuxProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Additional side buttons inside `CardActions`.
  * Elements are aligned to the other side of the container.
  */
-declare function CardActionsAux({ children, className, ...otherProps }: OverviewItemProps): JSX.Element;
+export declare const CardActionsAux: ({ children, className, ...otherProps }: CardActionsAuxProps) => React.JSX.Element;
 export default CardActionsAux;

package/dist/types/components/Card/CardContent.d.ts

@@ -11,5 +11,5 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-declare function CardContent({ children, className, noFlexHeight, ...otherProps }: CardContentProps): JSX.Element;
+export declare const CardContent: ({ children, className, noFlexHeight, ...otherProps }: CardContentProps) => React.JSX.Element;
 export default CardContent;

package/dist/types/components/Card/CardHeader.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { OverviewItemProps } from "./../OverviewItem/OverviewItem";
-interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
+export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
     /**
      * @deprecated
@@ -11,5 +11,5 @@ interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSp
      */
     hasSpacing?: OverviewItemProps["hasSpacing"];
 }
-declare function CardHeader({ children, className, densityHigh, ...otherProps }: CardHeaderProps): JSX.Element;
+export declare const CardHeader: ({ children, className, densityHigh, ...otherProps }: CardHeaderProps) => React.JSX.Element;
 export default CardHeader;

package/dist/types/components/Card/CardOptions.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { OverviewItemActionsProps } from './../OverviewItem/OverviewItemActions';
-interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {
+export interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {
 }
 /**
  * Container for elements that allow user-interaction, e.g. buttons or context menus.
  * Can contain multiple of them.
  * Is displayed right-aligned in the `CardHeader`.
  */
-declare function CardOptions({ children, className, ...otherProps }: CardOptionsProps): JSX.Element;
+export declare const CardOptions: ({ children, className, ...otherProps }: CardOptionsProps) => React.JSX.Element;
 export default CardOptions;

package/dist/types/components/Card/CardTitle.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { OverviewItemLineProps } from './../OverviewItem/OverviewItemLine';
 export interface CardTitleProps extends Omit<OverviewItemLineProps, "small" | "large"> {
     /**
@@ -9,5 +9,5 @@ export interface CardTitleProps extends Omit<OverviewItemLineProps, "small" | "l
 /**
  * Display a card title, can include other markup like `h2`, `h3` and so on to define document structure.
  */
-declare function CardTitle({ children, className, narrowed, ...otherProps }: CardTitleProps): JSX.Element;
+export declare const CardTitle: ({ children, className, narrowed, ...otherProps }: CardTitleProps) => React.JSX.Element;
 export default CardTitle;

package/dist/types/components/Card/index.d.ts

@@ -1,8 +1,7 @@
-import Card from './Card';
-import CardHeader from './CardHeader';
-import CardTitle from './CardTitle';
-import CardOptions from './CardOptions';
-import CardContent from './CardContent';
-import CardActions from './CardActions';
-import CardActionsAux from './CardActionsAux';
-export { Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, };
+export * from './Card';
+export * from './CardHeader';
+export * from './CardTitle';
+export * from './CardOptions';
+export * from './CardContent';
+export * from './CardActions';
+export * from './CardActionsAux';

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { CheckboxProps as BlueprintCheckboxProps } from "@blueprintjs/core";
-interface CheckboxProps extends BlueprintCheckboxProps {
+export interface CheckboxProps extends BlueprintCheckboxProps {
 }
-declare function Checkbox({ children, className, ...restProps }: CheckboxProps): JSX.Element;
+export declare const Checkbox: ({ children, className, ...restProps }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/dist/types/components/ContextOverlay/ContextMenu.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { TestableComponent } from "../interfaces";
 import { ContextOverlayProps } from "./ContextOverlay";
 import { ValidIconName } from "../Icon/canonicalIconNames";
-interface ContextMenuProps extends TestableComponent {
+export interface ContextMenuProps extends TestableComponent {
     /**
      * Addional CSS class names.
      */
@@ -40,5 +40,5 @@ interface ContextMenuProps extends TestableComponent {
 /**
  * Element displays menu items after toggler is clicked.
  */
-declare function ContextMenu({ children, className, togglerElement, togglerText, contextOverlayProps, disabled, togglerLarge, tooltipAsTitle, ...restProps }: ContextMenuProps): JSX.Element;
+export declare const ContextMenu: ({ children, className, togglerElement, togglerText, contextOverlayProps, disabled, togglerLarge, tooltipAsTitle, ...restProps }: ContextMenuProps) => React.JSX.Element;
 export default ContextMenu;

package/dist/types/components/ContextOverlay/ContextOverlay.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Popover2Props as BlueprintPopoverProps } from "@blueprintjs/popover2";
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
@@ -10,5 +10,5 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
  * Element displays connected content by interacting with a target element.
  * Full list of available option can be seen at https://blueprintjs.com/docs/#popover2-package/popover2
  */
-declare function ContextOverlay({ children, className, ...restProps }: ContextOverlayProps): JSX.Element;
+export declare const ContextOverlay: ({ children, className, ...restProps }: ContextOverlayProps) => React.JSX.Element;
 export default ContextOverlay;

package/dist/types/components/ContextOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ContextOverlay";
+export * from "./ContextMenu";

package/dist/types/components/Depiction/Depiction.d.ts

@@ -68,4 +68,4 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * Display a graphical representation and attache a caption or a badge to it.
  */
-export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, badge, tooltipProps, ...otherFigureProps }: DepictionProps): JSX.Element;
+export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, badge, tooltipProps, ...otherFigureProps }: DepictionProps): React.JSX.Element;

package/dist/types/components/Dialog/AlertDialog.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { SimpleDialogProps } from './SimpleDialog';
-export interface IAlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
+export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
     /**
      * set to true if alert dialog displays a success message
      */
@@ -14,9 +14,10 @@ export interface IAlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
      */
     danger?: boolean;
 }
+export declare type IAlertDialogProps = AlertDialogProps;
 /**
  * Special element to display alert notification in modal dialogs.
  * Inherits all properties from `SimpleDialog`, except `intent`.
  */
-declare function AlertDialog({ children, success, warning, danger, ...otherProps }: IAlertDialogProps): JSX.Element;
+export declare const AlertDialog: ({ children, success, warning, danger, ...otherProps }: AlertDialogProps) => React.JSX.Element;
 export default AlertDialog;

package/dist/types/components/Dialog/Modal.d.ts

@@ -19,8 +19,9 @@ export interface ModalProps extends OverlayProps, IOverlayState {
 }
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * This element can be used to create own modal elements and edge cases for modal dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
+ * Then it is recommended to use the `Card` element inside.
  */
-declare function Modal({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, ...otherProps }: ModalProps): JSX.Element;
+export declare const Modal: ({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, ...otherProps }: ModalProps) => React.JSX.Element;
 export default Modal;

package/dist/types/components/Dialog/SimpleDialog.d.ts

@@ -43,5 +43,5 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
  * Inherits all properties from `Modal`.
  */
-declare function SimpleDialog({ children, canOutsideClickClose, canEscapeKeyClose, title, actions, notifications, hasBorder, preventSimpleClosing, intent, headerOptions, showFullScreenToggler, startInFullScreenMode, size, ...otherProps }: SimpleDialogProps): JSX.Element;
+export declare const SimpleDialog: ({ children, canOutsideClickClose, canEscapeKeyClose, title, actions, notifications, hasBorder, preventSimpleClosing, intent, headerOptions, showFullScreenToggler, startInFullScreenMode, size, ...otherProps }: SimpleDialogProps) => React.JSX.Element;
 export default SimpleDialog;

package/dist/types/components/Dialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Modal";
+export * from "./SimpleDialog";
+export * from "./AlertDialog";

package/dist/types/components/Form/FieldItem.d.ts

@@ -46,5 +46,5 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
 /**
  * Form element that manages the combination of label, helper texts, input element and feedback messages.
  */
-declare function FieldItem({ hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, children, className, disabled, labelProps, helperText, messageText, ...otherProps }: FieldItemProps): JSX.Element;
+export declare const FieldItem: ({ hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, children, className, disabled, labelProps, helperText, messageText, ...otherProps }: FieldItemProps) => React.JSX.Element;
 export default FieldItem;

package/dist/types/components/Form/FieldItemRow.d.ts

@@ -8,5 +8,5 @@ export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * Allows to display `FieldItem` children horizontally in one row.
  */
-declare function FieldItemRow({ children, className, justifyItemWidths, ...otherProps }: FieldItemRowProps): JSX.Element;
+export declare const FieldItemRow: ({ children, className, justifyItemWidths, ...otherProps }: FieldItemRowProps) => React.JSX.Element;
 export default FieldItemRow;

package/dist/types/components/Form/FieldSet.d.ts

@@ -1,3 +1,43 @@
-/// <reference types="react" />
-declare function FieldSet({ boxed, children, className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, helperText, messageText, title, ...otherProps }: any): JSX.Element;
+import React from "react";
+export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
+    /**
+    * Displays the fieldset inside a box.
+    * Background color of the box is set automatically regarding the set intent state.
+    */
+    boxed?: boolean;
+    /**
+    * The fieldsetsection is displayed with primary color scheme.
+    */
+    hasStatePrimary?: boolean;
+    /**
+    * The fieldset section is displayed with success (some type of green) color scheme.
+    */
+    hasStateSuccess?: boolean;
+    /**
+    * The fieldset section is displayed with warning (some type of orange) color scheme.
+    */
+    hasStateWarning?: boolean;
+    /**
+    * The fieldsetsection is displayed with danger (some type of red) color scheme.
+    */
+    hasStateDanger?: boolean;
+    /**
+    * Optional helper text. If given then it is displayed after the title.
+    */
+    helperText?: string | JSX.Element;
+    /**
+    * Optional notification text.
+    * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
+    */
+    messageText?: string | JSX.Element;
+    /**
+    * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
+    *
+    */
+    title?: string | JSX.Element;
+}
+/**
+ * Displays a group of input elements.
+ */
+export declare const FieldSet: ({ boxed, children, className, hasStatePrimary, hasStateSuccess, hasStateWarning, hasStateDanger, helperText, messageText, title, ...otherProps }: FieldSetProps) => React.JSX.Element;
 export default FieldSet;

package/dist/types/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./FieldItem";
+export * from "./FieldItemRow";
+export * from "./FieldSet";

package/dist/types/components/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { GridDefaultProps } from "carbon-components-react";
-interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow"> {
+export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow" | "as"> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.
@@ -12,6 +12,10 @@ interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "na
      * This parent element must be displayed using a fixed, relative or absolute position.
      */
     useAbsoluteSpace?: boolean;
+    /**
+     * Provide a HTML element name to render instead of the default `div`.
+     */
+    as?: "article" | "section" | "div";
     /**
      * @deprecated
      * This is set always by default.
@@ -23,5 +27,5 @@ interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "na
  * Grids can also be stacked into other grids for more complex layouts.
  * A very complex level of stacked grids is a sign that something should be designed differently.
  */
-declare function Grid({ children, verticalStretchable, useAbsoluteSpace, className, ...restProps }: GridProps): JSX.Element;
+export declare const Grid: ({ children, verticalStretchable, useAbsoluteSpace, className, ...restProps }: GridProps) => React.JSX.Element;
 export default Grid;

package/dist/types/components/Grid/GridColumn.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { ColumnDefaultProps } from "carbon-components-react";
-interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
+export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
     /**
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
@@ -15,6 +15,10 @@ interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg"
      * Alignment of column content.
      */
     verticalAlign?: "top" | "center";
+    /**
+     * Overwrite column sizes by using the original size config of the Carbon grid column.
+     */
+    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">;
     /**
      * @deprecated
      */
@@ -24,5 +28,5 @@ interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg"
  * Grid columns can be used in grid rows.
  * They can contain other grids if this is necessary for more complex layouts.
  */
-declare function GridColumn({ children, className, small, medium, full, verticalAlign, ...otherProps }: GridColumnProps): JSX.Element;
+export declare const GridColumn: ({ children, className, small, medium, full, verticalAlign, carbonSizeConfig, ...otherProps }: GridColumnProps) => React.JSX.Element;
 export default GridColumn;

package/dist/types/components/Grid/GridRow.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { RowDefaultProps } from "carbon-components-react";
-interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
+export interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
     /**
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.
@@ -21,5 +21,5 @@ interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
 /**
  * Grid rows exists as children in a grid and can contain columns.
  */
-declare function GridRow({ children, className, dontWrapColumns, fullHeight, verticalStretched, ...otherProps }: GridRowProps): JSX.Element;
+export declare const GridRow: ({ children, className, dontWrapColumns, fullHeight, verticalStretched, ...otherProps }: GridRowProps) => React.JSX.Element;
 export default GridRow;

package/dist/types/components/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Grid";
+export * from "./GridRow";
+export * from "./GridColumn";

package/dist/types/components/HoverToggler/HoverToggler.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Additional CSS class name.
      */
@@ -20,5 +20,5 @@ interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     inline?: boolean;
 }
 /** Displays a specific element. Displays another element when hovered. */
-export declare const HoverToggler: ({ className, baseContent, baseContentProps, hoverContent, hoverContentProps, inline, style, ...otherProps }: HoverTogglerProps) => JSX.Element;
-export {};
+export declare const HoverToggler: ({ className, baseContent, baseContentProps, hoverContent, hoverContentProps, inline, style, ...otherProps }: HoverTogglerProps) => React.JSX.Element;
+export default HoverToggler;

package/dist/types/components/Icon/BaseIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconProps as CarbonIconProps } from "carbon-components-react";
 import { IntentTypes } from "../../common/Intent";
 import { TooltipProps } from "./../Tooltip/Tooltip";
@@ -41,5 +41,5 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
 /**
  * The base icon provides the basic functionality that is necessary to wrap the Carbon icon component.
  */
-declare function BaseIcon({ iconComponent, className, large, small, tooltipText, tooltipProps, intent, description, tabIndex, ...restProps }: BaseIconProps): JSX.Element;
+declare function BaseIcon({ iconComponent, className, large, small, tooltipText, tooltipProps, intent, description, tabIndex, ...restProps }: BaseIconProps): React.JSX.Element;
 export default BaseIcon;

package/dist/types/components/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { BaseIconProps } from "./BaseIcon";
 import { ValidIconName } from "./canonicalIconNames";
 export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
@@ -8,11 +8,17 @@ export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
      */
     name: ValidIconName | string[];
 }
-/** Returns the first icon name that exists or the fallback icon name. */
+/**
+ * Returns the first icon name that exists or the fallback icon name.
+ * @deprecated use `iconUtils.findExistingIconName`
+ */
 export declare const findExistingIconName: (iconNames: string[], fallbackIconName?: ValidIconName) => ValidIconName;
+export declare const iconUtils: {
+    findExistingIconName: (iconNames: string[], fallbackIconName?: ValidIconName) => ValidIconName;
+};
 /**
  * The icon provides a graphical symbol that is specified by a canonical name.
  * This name is hard-coded to force a homegenous usage of the [Carbon icon library](https://carbondesignsystem.com/guidelines/icons/library).
  */
-declare function Icon({ name, ...otherBaseIconProps }: IconProps): JSX.Element;
+export declare const Icon: ({ name, ...otherBaseIconProps }: IconProps) => React.JSX.Element;
 export default Icon;

package/dist/types/components/Icon/IconButton.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
 import { TestIconProps } from "./TestIcon";
 import { ValidIconName } from "./canonicalIconNames";
-export interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+interface ExtendedButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
@@ -27,6 +27,7 @@ export interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon"
      */
     minimal?: boolean;
 }
+export declare type IconButtonProps = ExtendedButtonProps & AnchorOrButtonProps;
 /** A button with an icon instead of text. */
-declare function IconButton({ className, name, text, tooltipProps, description, tooltipAsTitle, minimal, ...restProps }: IconButtonProps & AnchorOrButtonProps): JSX.Element;
+export declare const IconButton: ({ className, name, text, tooltipProps, description, tooltipAsTitle, minimal, ...restProps }: IconButtonProps) => React.JSX.Element;
 export default IconButton;

package/dist/types/components/Icon/TestIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { BaseIconProps } from "./BaseIcon";
 import { CarbonIconType } from "./canonicalIconNames";
 export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
@@ -16,5 +16,5 @@ export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
  * const testIcon = <TestIcon tryout={LogoReact} />
  * ```
  */
-declare function TestIcon({ className, tryout, ...otherBaseIconProps }: TestIconProps): JSX.Element;
+export declare const TestIcon: ({ className, tryout, ...otherBaseIconProps }: TestIconProps) => React.JSX.Element;
 export default TestIcon;

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IconProps as CarbonIconProps } from "carbon-components-react";
 /** Valid icon names. */
-export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-skip-forward" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "item-hidedetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-next" | "navigation-previous" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-caretright" | "toggler-caretdown" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-rowexpand" | "toggler-rowcollapse" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "form-template" | "undefined";
+export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-skip-forward" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "item-hidedetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-down" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-left" | "navigation-next" | "navigation-previous" | "navigation-right" | "navigation-up" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-erase" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-merge" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-translate" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-caretright" | "toggler-caretdown" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-rowexpand" | "toggler-rowcollapse" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "form-template" | "undefined";
 export declare type CarbonIconType = React.ComponentType<CarbonIconProps>;
 /**
  * @deprecated

package/dist/types/components/Icon/index.d.ts

@@ -1,4 +1,3 @@
-import Icon, { IconProps } from "./Icon";
-import TestIcon, { TestIconProps } from "./TestIcon";
-export { Icon, TestIcon };
-export type { IconProps, TestIconProps };
+export * from "./Icon";
+export * from "./TestIcon";
+export * from "./IconButton";

package/dist/types/components/Iframe/Iframe.d.ts

@@ -15,4 +15,8 @@ export interface IframeProps extends TestableComponent {
     backgroundColor?: string;
     htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">;
 }
+/**
+ * Display iframe but shows a spinner as long as it is not loaded.
+ */
 export declare const Iframe: React.ForwardRefExoticComponent<IframeProps & React.RefAttributes<HTMLIFrameElement>>;
+export default Iframe;

package/dist/types/components/Iframe/IframeModal.d.ts

@@ -9,4 +9,5 @@ export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
     htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">;
 }
 /** Modal that contains an iframe and supports full screen mode. */
-export declare function IframeModal({ title, src, className, startFullscreen, compIframeProps, htmlIframeProps, headerOptions, size, ...otherSimpleDialogProps }: IframeModalProps): JSX.Element;
+export declare const IframeModal: ({ title, src, className, startFullscreen, compIframeProps, htmlIframeProps, headerOptions, size, ...otherSimpleDialogProps }: IframeModalProps) => React.JSX.Element;
+export default IframeModal;

package/dist/types/components/Iframe/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Iframe";
+export * from "./IframeModal";