@progress/kendo-react-layout 7.2.4-develop.3 → 7.3.0-develop.1

package/index.d.ts

@@ -1,103 +1,4593 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Menu as MenuClassComponent, type MenuState, type MenuHandle } from './menu/components/Menu';
-import { MenuProps } from './menu/MenuProps';
-import { TabStrip as TabStripClassComponent, type TabStripScrollableProps, type TabStripSelectEventArguments, type TabStripProps } from './tabstrip/TabStrip';
-import { MenuItemInternalsList } from './menu/components/MenuItemInternal';
-import { downArrowName, leftArrowName, rightArrowName } from './menu/components/MenuItemArrow';
-import { SplitterBar } from './splitter/SplitterBar';
-/** @hidden */
-declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<any>>;
-/** @hidden */
-declare const TabStrip: import("react").ForwardRefExoticComponent<TabStripProps & import("react").RefAttributes<any>>;
-export { TabStrip, TabStripClassComponent, TabStripScrollableProps, TabStripSelectEventArguments, TabStripProps, Menu, MenuState, MenuHandle, MenuClassComponent, MenuItemInternalsList, downArrowName, leftArrowName, rightArrowName, SplitterBar };
-export * from './tabstrip/TabStripContent';
-export * from './tabstrip/TabStripNavigation';
-export * from './tabstrip/TabStripNavigationItem';
-export * from './tabstrip/TabStripTab';
-export * from './panelbar/PanelBar';
-export * from './panelbar/PanelBarItem';
-export * from './panelbar/util';
-export * from './panelbar/interfaces/PanelBarProps';
-export * from './panelbar/interfaces/PanelBarItemProps';
-export * from './panelbar/interfaces/RenderPanelBarItem';
-export * from './panelbar/interfaces/PanelBarSelectEventArguments';
-export * from './menu/components/MenuItemLink';
-export * from './menu/components/MenuItem';
-export * from './menu/components/MenuItemArrow';
-export * from './menu/models/MenuItemModel';
-export * from './menu/events';
-export * from './splitter/Splitter';
-export * from './splitter/SplitterPane';
-export * from './card/Card';
-export * from './card/CardHeader';
-export * from './card/CardTitle';
-export * from './card/CardBody';
-export * from './card/CardActions';
-export * from './card/CardImage';
-export * from './card/CardSubtitle';
-export * from './card/CardFooter';
-export * from './card/interfaces/CardProps';
-export * from './card/interfaces/CardHandle';
-export * from './card/interfaces/AvatarProps';
-export * from './card/interfaces/CardActionsProps';
-export * from './card/Avatar';
-export * from './drawer/Drawer';
-export * from './drawer/interfaces/DrawerProps';
-export * from './drawer/DrawerNavigation';
-export * from './drawer/interfaces/DrawerNavigationProps';
-export * from './drawer/DrawerContent';
-export * from './drawer/interfaces/DrawerContentProps';
-export * from './drawer/DrawerItem';
-export * from './drawer/interfaces/DrawerItemHandle';
-export * from './drawer/interfaces/DrawerItemProps';
-export * from './drawer/interfaces/DrawerSelectEvent';
-export * from './drawer/interfaces/DrawerAnimation';
-export * from './stepper/Stepper';
-export * from './stepper/interfaces/StepperProps';
-export * from './stepper/interfaces/StepperHandle';
-export * from './stepper/interfaces/StepperChangeEvent';
-export * from './stepper/interfaces/StepperFocusEvent';
-export * from './stepper/Step';
-export * from './stepper/interfaces/StepProps';
-export * from './stepper/interfaces/StepHandle';
-export * from './stepper/interfaces/StepChangeEvent';
-export * from './stepper/interfaces/StepFocusEvent';
-export * from './appbar/AppBar';
-export * from './appbar/interfaces/AppBarProps';
-export * from './appbar/AppBarSection';
-export * from './appbar/interfaces/AppBarSectionProps';
-export * from './appbar/AppBarSpacer';
-export * from './appbar/interfaces/AppBarSpacerProps';
-export * from './tilelayout/TileLayout';
-export * from './tilelayout/interfaces/';
-export * from './bottomnavigation/BottomNavigation';
-export * from './bottomnavigation/BottomNavigationProps';
-export * from './bottomnavigation/BottomNavigationItem';
-export * from './bottomnavigation/BottomNavigationItemProps';
-export * from './bottomnavigation/models/events';
-export * from './stacklayout/StackLayout';
-export * from './stacklayout/StackLayoutProps';
-export * from './gridlayout/GridLayout';
-export * from './gridlayout/GridLayoutItem';
-export * from './gridlayout/interfaces/GridLayoutProps';
-export * from './gridlayout/interfaces/GridLayoutItemProps';
-export * from './gridlayout/interfaces/GridLayoutRowProps';
-export * from './gridlayout/interfaces/GridLayoutColumnProps';
-export * from './breadcrumb/Breadcrumb';
-export * from './breadcrumb/BreadcrumbOrderedList';
-export * from './breadcrumb/BreadcrumbListItem';
-export * from './breadcrumb/BreadcrumbDelimiter';
-export * from './breadcrumb/BreadcrumbLink';
-export * from './actionsheet/ActionSheet';
-export * from './actionsheet/ActionSheetItem';
-export * from './actionsheet/interfaces/ActionSheetItemProps';
-export * from './actionsheet/ActionSheetHeader';
-export * from './actionsheet/ActionSheetContent';
-export * from './actionsheet/ActionSheetFooter';
-export * from './timeline/Timeline';
-export * from './timeline/utils';
-export * from './contextmenu/ContextMenu';
-export * from './expansionpanel';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { ButtonProps } from '@progress/kendo-react-buttons';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { Navigation } from '@progress/kendo-react-common';
+import { Offset } from '@progress/kendo-react-popup';
+import PropTypes from 'prop-types';
+import * as React_2 from 'react';
+import { RefAttributes } from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
+
+/**
+ * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
+ */
+export declare class ActionSheet extends React_2.Component<ActionSheetProps, ActionSheetState> {
+    /** @hidden */
+    static displayName: string;
+    /** @hidden */
+    static propTypes: {
+        items: PropTypes.Requireable<any[]>;
+        subTitle: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        navigatable: PropTypes.Requireable<boolean>;
+        navigatableElements: PropTypes.Requireable<any[]>;
+    };
+    /** @hidden */
+    static defaultProps: {
+        navigatable: boolean;
+        navigatableElements: never[];
+    };
+    private actionSheetRef;
+    private actionSheetTitleClass;
+    private ariaLabeledBy;
+    private navigation?;
+    private animationDuration;
+    private bottomPosition;
+    /** @hidden */
+    constructor(props: ActionSheetProps);
+    /** @hidden */
+    componentDidMount(): void;
+    /** @hidden */
+    componentDidUpdate(_prevProps: Readonly<ActionSheetProps>, prevState: Readonly<ActionSheetState>): void;
+    /** @hidden */
+    render(): JSX_2.Element;
+    private handleKeyDown;
+    private onTab;
+    private handleOverlayClick;
+    private handleItemClick;
+    private onEnter;
+    private onEscape;
+    private hideActionSheet;
+    private children;
+}
+
+/**
+ * @hidden
+ */
+declare interface ActionSheetChildrenProps {
+    /**
+     * ClassName of the rendered element.
+     */
+    className?: any;
+    /**
+     * Represents the children that are passed to the ActionSheet.
+     */
+    children?: any;
+}
+
+/**
+ * The KendoReact ActionSheetContent component.
+ */
+export declare const ActionSheetContent: React_2.FunctionComponent<ActionSheetChildrenProps>;
+
+/**
+ * The KendoReact ActionSheetFooter component.
+ */
+export declare const ActionSheetFooter: React_2.FunctionComponent<ActionSheetChildrenProps>;
+
+/**
+ * The KendoReact ActionSheetHeader component.
+ */
+export declare const ActionSheetHeader: React_2.FunctionComponent<ActionSheetChildrenProps>;
+
+/**
+ * The KendoReact ActionSheetItem component.
+ */
+export declare const ActionSheetItem: React_2.FunctionComponent<ActionSheetItemProps>;
+
+/**
+ * Represents the props of the KendoReact ActionSheet component.
+ */
+export declare interface ActionSheetItemProps {
+    /**
+     * Sets additional CSS classes to the ActionSheet.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ActionSheet.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * **Deprecated**. Specifies the `tabIndex` of the ActionSheetItem.
+     *
+     * Set the tabIndex to the ActionSheet component instead.
+     *
+     * @deprecated
+     */
+    tabIndex?: number;
+    /**
+     * Specifies additional text rendered under the item's title.
+     */
+    description?: string;
+    /**
+     * Specifies if the ActionSheet item is initially disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the group of the item. Items can be segregated in two groups - `top` and `bottom`.
+     * Each specifying whether the ActionSheet item will be rendered over the separator or under it.
+     */
+    group?: 'top' | 'bottom';
+    /**
+     * Defines the icon rendered inside the ActionSheet item.
+     */
+    icon?: React_2.ReactElement;
+    /**
+     * Specifies the text content of the ActionSheet item.
+     */
+    title?: string;
+    /**
+     * Specifies the ActionSheet item.
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    onClick?: (event: {
+        syntheticEvent: React_2.SyntheticEvent;
+        title?: string;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown?: (event: React_2.SyntheticEvent, title: string | undefined, id: number | undefined) => void;
+    /**
+     * @hidden
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    id?: number;
+}
+
+/**
+ * The props of the ActionSheet component.
+ */
+export declare interface ActionSheetProps {
+    /**
+     * The collection of items that will be rendered in the ActionSheet.
+     */
+    items?: ActionSheetItemProps[];
+    /**
+     * Specifies the text that is rendered under the title.
+     */
+    subTitle?: string;
+    /**
+     * Specifies the text that is rendered as title.
+     */
+    title?: string;
+    /**
+     * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
+     *
+     * @deprecated
+     */
+    onOverlayClick?: (event: React_2.SyntheticEvent) => void;
+    /**
+     * Fires when the modal overlay is clicked.
+     */
+    onClose?: (event: React_2.SyntheticEvent) => void;
+    /**
+     * Fires when an ActionSheet item is clicked.
+     */
+    onItemSelect?: (event: {
+        syntheticEvent: React_2.SyntheticEvent;
+        title?: string;
+        item?: any;
+    }) => void;
+    /**
+     * **Deprecated**. Fires when an ActionSheet item is clicked. Use `onItemSelect` event instead.
+     *
+     * @deprecated
+     */
+    onItemClick?: (event: {
+        syntheticEvent: React_2.SyntheticEvent;
+        title?: string;
+        item?: any;
+    }) => void;
+    /**
+     * Represents the children that are passed to the ActionSheet.
+     */
+    children?: any;
+    /**
+     * Specifies the `tabIndex` of the ActionSheet.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies if the ActionSheet can be navigatable with keyboard.
+     * Defaults to `true`.
+     */
+    navigatable: boolean;
+    /**
+     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
+     */
+    navigatableElements: string[];
+    /**
+     * Controls the popup animation. By default, the open and close animations are disabled.
+     */
+    animation?: boolean;
+    /**
+     * @hidden
+     */
+    animationStyles?: React_2.CSSProperties;
+    /**
+     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
+     */
+    animationDuration?: number;
+    /**
+     * The CSS classes that will be rendered on the inner ActionSheet element.
+     */
+    className?: string;
+    /**
+     * Specifies the state of the ActionSheet.
+     */
+    expand?: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare interface ActionSheetState {
+    show?: boolean;
+    slide?: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare const addYearsFlags: (eventsData: TimelineEventProps[]) => (TimelineEventProps | yearFlagProps)[];
+
+/**
+ * Represents the [KendoReact AppBar component]({% slug overview_appbar %}).
+ * Used to display information, actions, branding titles and additional navigation on the current screen.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <AppBar>
+ *           <AppBarSection>
+ *               <span className="k-icon k-i-menu" />
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer style={{ width: 8 }} />
+ *
+ *           <AppBarSection>
+ *               <h1 className="title">{tc.text} AppBar</h1>
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer />
+ *
+ *           <AppBarSection>
+ *               <BadgeContainer>
+ *                   <span className="k-icon k-i-bell" />
+ *                   <Badge themeColor="info" shape="dot" />
+ *               </BadgeContainer>
+ *           </AppBarSection>
+ *      </AppBar>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const AppBar: React_2.ForwardRefExoticComponent<AppBarProps & React_2.RefAttributes<AppBarHandle | null>>;
+
+/**
+ * The AppBar ref.
+ */
+export declare interface AppBarHandle {
+    /**
+     * The AppBar element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the AppBar.
+     */
+    focus: () => void;
+}
+
+/**
+ * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
+ *
+ * * The possible values are:
+ * * 'top' (Default)
+ * * 'bottom'
+ *
+ */
+export declare type AppBarPosition = 'top' | 'bottom';
+
+/**
+ * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-positionmode)).
+ *
+ * * The possible values are:
+ * * 'static' (Default)
+ * * 'sticky'
+ * * 'fixed'
+ */
+export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
+
+/**
+ * Represents the props of the [KendoReact AppBar component]({% slug overview_appbar %}).
+ * Used to display information, actions, branding titles and additional navigation on the current screen.
+ */
+export declare interface AppBarProps {
+    /**
+     * Represents the children that are passed to the AppBar.
+     */
+    children?: any;
+    /**
+     * Sets additional CSS classes to the AppBar.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the AppBar.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `id` property of the root AppBar element.
+     */
+    id?: string;
+    /**
+     * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
+     *
+     * * The possible values are:
+     * * 'top' (Default)
+     * * 'bottom'
+     *
+     */
+    position?: AppBarPosition;
+    /**
+     * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-positionmode)).
+     *
+     * * The possible values are:
+     * * 'static' (Default)
+     * * 'sticky'
+     * * 'fixed'
+     */
+    positionMode?: AppBarPositionMode;
+    /**
+     * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
+     *
+     * * The possible values are:
+     * * `inherit`
+     * * `light` (Default)
+     * * `dark`
+     *
+     */
+    themeColor?: AppBarThemeColor;
+}
+
+/**
+ * Represents the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <AppBar>
+ *           <AppBarSection>
+ *               <span className="k-icon k-i-menu" />
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer style={{ width: 8 }} />
+ *
+ *           <AppBarSection>
+ *               <h1 className="title">{tc.text} AppBar</h1>
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer />
+ *
+ *           <AppBarSection>
+ *               <BadgeContainer>
+ *                   <span className="k-icon k-i-bell" />
+ *                   <Badge themeColor="info" shape="dot" />
+ *               </BadgeContainer>
+ *           </AppBarSection>
+ *      </AppBar>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const AppBarSection: React_2.ForwardRefExoticComponent<AppBarSectionProps & React_2.RefAttributes<AppBarSectionHandle | null>>;
+
+/**
+ * The AppBarSection ref.
+ */
+export declare interface AppBarSectionHandle {
+    /**
+     * The AppBarSection element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the AppBarSection.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the props of the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-defining-sections).
+ */
+export declare interface AppBarSectionProps {
+    /**
+     * Represents the children that are passed to the AppBarSection.
+     */
+    children?: any;
+    /**
+     * Sets additional CSS classes to the AppBarSection.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the AppBarSection.
+     */
+    style?: React_2.CSSProperties;
+}
+
+/**
+ * Represents the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <AppBar>
+ *           <AppBarSection>
+ *               <span className="k-icon k-i-menu" />
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer style={{ width: 8 }} />
+ *
+ *           <AppBarSection>
+ *               <h1 className="title">{tc.text} AppBar</h1>
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer />
+ *
+ *           <AppBarSection>
+ *               <BadgeContainer>
+ *                   <span className="k-icon k-i-bell" />
+ *                   <Badge themeColor="info" shape="dot" />
+ *               </BadgeContainer>
+ *           </AppBarSection>
+ *      </AppBar>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const AppBarSpacer: React_2.ForwardRefExoticComponent<AppBarSpacerProps & React_2.RefAttributes<AppBarSpacerHandle | null>>;
+
+/**
+ * The AppBarSpacer ref.
+ */
+export declare interface AppBarSpacerHandle {
+    /**
+     * The AppBarSpacer element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the AppBarSpacer.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the props of the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ */
+export declare interface AppBarSpacerProps {
+    /**
+     * Sets additional CSS classes to the AppBarSpacer.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the AppBarSpacer.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
+ *
+ * * The possible values are:
+ * * `inherit`
+ * * `light` (Default)
+ * * `dark`
+ *
+ */
+export declare type AppBarThemeColor = 'light' | 'dark' | 'inherit';
+
+export declare const Avatar: React_2.FunctionComponent<AvatarProps>;
+
+export declare interface AvatarProps {
+    /**
+     * Sets the Avatar children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the Avatar.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the Avatar.
+     */
+    className?: string;
+    /**
+     * Set the type of the Avatar.
+     *
+     * The supported values are:
+     * * `image`
+     * * `text`
+     * * `icon`
+     */
+    type?: avatarType | string;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets a border to the Avatar.
+     */
+    border?: boolean;
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline';
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - error
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
+}
+
+declare enum avatarType {
+    TEXT = "text",
+    IMAGE = "image",
+    ICON = "icon"
+}
+
+/**
+ * An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
+ */
+declare interface BaseMenuItem {
+    /**
+     * Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
+     */
+    text?: string;
+    /**
+     * Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
+     */
+    url?: string;
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     */
+    icon?: string;
+    /**
+     * Specifies the SVG icon that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
+     */
+    cssClass?: string;
+    /**
+     * The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
+     */
+    cssStyle?: React.CSSProperties;
+    /**
+     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     */
+    render?: any;
+    /**
+     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     */
+    linkRender?: any;
+    /**
+     * A React functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
+     */
+    contentRender?: any;
+    /**
+     * Represents any additional data that is associated with the Menu item.
+     */
+    data?: any;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+}
+
+/**
+ * @hidden
+ */
+declare interface BaseMenuItemInternalProps {
+    focusedItemId: string;
+    lastItemIdToBeOpened: string;
+    tabbableItemId: string;
+    itemRender?: any;
+    linkRender?: any;
+    isMenuVertical: boolean;
+    isDirectionRightToLeft?: boolean;
+    menuGuid: string;
+    onMouseOver: any;
+    onMouseLeave: any;
+    onMouseDown: any;
+    onFocus: any;
+    onClick: any;
+    onBlur: any;
+    onOriginalItemNeeded: any;
+}
+
+/**
+ * Represents the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
+ * Used to switch between primary destinations in an application.
+ *
+ * @example
+ * ```jsx
+ * const items = [
+ *    { text: 'Photos', icon: 'photo', selected: true },
+ *    { text: 'Albums', icon: 'folder' },
+ *    { text: 'Search', icon: 'search' },
+ *    { text: 'More', icon: 'more-horizontal' },
+ * ];
+ *
+ * const App = () => {
+ *   return (
+ *       <BottomNavigation items={items} />
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const BottomNavigation: React_2.ForwardRefExoticComponent<BottomNavigationProps & React_2.RefAttributes<BottomNavigationHandle | null>>;
+
+/**
+ * Represents the return type of the BottomNavigation events.
+ */
+export declare interface BottomNavigationEvent extends BaseEvent<BottomNavigationHandle> {
+}
+
+/**
+ * The fill style of the BottomNavigation
+ * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
+ *
+ * The possible values are:
+ * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
+ * * `solid` &mdash; Sets the theme color as a background color.
+ *
+ */
+export declare type BottomNavigationFill = 'solid' | 'flat';
+
+/**
+ * Represents the Object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html)
+ * callback of the BottomNavigation component.
+ */
+export declare interface BottomNavigationHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLElement | null;
+    /**
+     * Focus the BottomNavigation first item.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the [KendoReact BottomNavigationItem component]({% slug overview_bottomnavigation %}).
+ */
+export declare const BottomNavigationItem: React_2.ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & React_2.RefAttributes<BottomNavigationItemHandle | null>>;
+
+/**
+ * Specifies how the icon and text label are positioned in each item of the BottomNavigation
+ * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
+ *
+ * The possible values are:
+ * * `vertical`(Default) &mdash; Renders the text below the icon.
+ * * `horizontal` &mdash; Renders the text and the icon on the same line.
+ */
+export declare type BottomNavigationItemFlow = 'vertical' | 'horizontal';
+
+/**
+ * @hidden
+ */
+export declare interface BottomNavigationItemHandle {
+    element: HTMLElement | null;
+}
+
+/**
+ * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
+ */
+export declare interface BottomNavigationItemProps {
+    /**
+     * Sets additional CSS classes to the BottomNavigation item.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the BottomNavigation item.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Disables the BottomNavigation item.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the BottomNavigation item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
+     */
+    icon?: string;
+    /**
+     * Defines an SVG icon.
+     * The icon is rendered inside the BottomNavigation item.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies the text content of the BottomNavigation item.
+     */
+    text?: React.ReactNode;
+    /**
+     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    dataItem?: any;
+    /**
+     * @hidden
+     */
+    id?: string;
+}
+
+/**
+ * Specifies the position and behavior of the BottomNavigation when the page is scrolled
+ * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
+ *
+ * The possible values are:
+ * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+ * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
+ * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+ * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+ */
+export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';
+
+/**
+ * Represents the props of the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
+ */
+export declare interface BottomNavigationProps {
+    /**
+     * Sets additional CSS classes to the BottomNavigation.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the BottomNavigation.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root BottomNavigation element.
+     */
+    id?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the theme color of the BottomNavigation
+     * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
+     *
+     * The possible values are:
+     * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
+     * * `secondary` &mdash; Applies coloring based on the secondary theme color.
+     * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
+     * * `info` &mdash; Applies coloring based on the info theme color.
+     * * `success` &mdash; Applies coloring based on the success theme color.
+     * * `warning` &mdash; Applies coloring based on the warning theme color.
+     * * `error` &mdash; Applies coloring based on the error theme color.
+     * * `dark` &mdash; Applies coloring based on the dark theme color.
+     * * `light` &mdash; Applies coloring based on the light theme color.
+     * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+     */
+    themeColor?: BottomNavigationThemeColor;
+    /**
+     * **Deprecated**. Use `fillMode` prop instead.
+     *
+     * @deprecated
+     */
+    fill?: BottomNavigationFill;
+    /**
+     * The fill style of the BottomNavigation
+     * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
+     *
+     * The possible values are:
+     * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
+     * * `solid` &mdash; Sets the theme color as a background color.
+     */
+    fillMode?: BottomNavigationFill;
+    /**
+     * Specifies the position and behavior of the BottomNavigation when the page is scrolled
+     * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
+     *
+     * The possible values are:
+     * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+     * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
+     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+     */
+    positionMode?: BottomNavigationPositionMode;
+    /**
+     * Specifies how the icon and text label are positioned in each item of the BottomNavigation
+     * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
+     *
+     * The possible values are:
+     * * `vertical`(Default) &mdash; Renders the text below the icon.
+     * * `horizontal` &mdash; Renders the text and the icon on the same line.
+     */
+    itemFlow?: BottomNavigationItemFlow;
+    /**
+     * Sets a border to the BottomNavigation.
+     */
+    border?: boolean;
+    /**
+     * Disables the whole BottomNavigation.
+     */
+    disabled?: boolean;
+    /**
+     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
+     */
+    items?: Array<BottomNavigationItemProps>;
+    /**
+     * Overrides the default component's content responsible for visualizing a single item
+     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
+     */
+    item?: React.ComponentType<BottomNavigationItemProps>;
+    /**
+     * Fires when a BottomNavigation item is about to be rendered
+     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
+     * Used to override the default appearance of the items.
+     */
+    itemRender?: (span: React.ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => React.ReactNode;
+    /**
+     * Fires when a BottomNavigation item is selected.
+     */
+    onSelect?: (event: BottomNavigationSelectEvent) => void;
+    /**
+     * Triggered on `onKeyDown` event.
+     */
+    onKeyDown?: (event: BottomNavigationEvent) => void;
+}
+
+/**
+ * The arguments for the `onSelect` BottomNavigation event.
+ */
+export declare interface BottomNavigationSelectEvent extends BaseEvent<BottomNavigationHandle> {
+    /**
+     * A BottomNavigation item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected BottomNavigation item.
+     */
+    itemIndex: number;
+}
+
+/**
+ * Specifies the theme color of the BottomNavigationThemeColor.
+ * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
+ *
+ * The possible values are:
+ * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
+ * * `secondary` &mdash; Applies coloring based on the secondary theme color.
+ * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
+ * * `info` &mdash; Applies coloring based on the info theme color.
+ * * `success` &mdash; Applies coloring based on the success theme color.
+ * * `warning` &mdash; Applies coloring based on the warning theme color.
+ * * `error` &mdash; Applies coloring based on the error theme color.
+ * * `dark` &mdash; Applies coloring based on the dark theme color.
+ * * `light` &mdash; Applies coloring based on the light theme color.
+ * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+ */
+export declare type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+
+/**
+ * Represents the Breadcrumb component.
+ */
+export declare const Breadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<BreadcrumbHandle | null>>;
+
+/**
+ * Represents the BreadcrumbDelimiter component.
+ */
+export declare const BreadcrumbDelimiter: React_2.ForwardRefExoticComponent<BreadcrumbDelimiterProps & React_2.RefAttributes<BreadcrumbDelimiterHandle | null>>;
+
+/**
+ * Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
+ */
+export declare interface BreadcrumbDelimiterHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * The props values of the BreadcrumbDelimiter.
+     */
+    props: BreadcrumbDelimiterProps;
+}
+
+/**
+ * Represents the properties of [BreadcrumbDelimiter](% slug api_layout_breadcrumbdelimiter %) component.
+ */
+export declare interface BreadcrumbDelimiterProps {
+    /**
+     * Sets the `id` property of the BreadcrumbDelimiter component.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the BreadcrumbDelimiter component.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the BreadcrumbDelimiter component.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
+     */
+    tabIndex?: number;
+    /**
+     * @hidden
+     */
+    dir?: string;
+}
+
+/**
+ * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
+ */
+export declare interface BreadcrumbHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Breadcrumb.
+     */
+    props: BreadcrumbProps;
+    /**
+     * The `focus` method of the Breadcrumb component.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
+ * const items = [
+ *   {
+ *     id: 'home',
+ *     text: 'Home',
+ *     iconClass: 'k-i-home',
+ *   },
+ *   {
+ *     id: 'products',
+ *     text: 'Products',
+ *   },
+ *   {
+ *     id: 'computer',
+ *     text: 'Computer',
+ *   }
+ * ];
+ *
+ * const App = () => {
+ * const [data,setData] = React.useState(items);
+ * const handleItemSelect = (event, id) => {
+ *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
+ *   const newData = data.slice(0, itemIndex + 1);
+ *   setData(newData);
+ * };
+ *
+ * const CustomLink = (data) => {
+ *  return (
+ *     <BreadcrumbLink
+ *       id={data.id}
+ *       text={data.text}
+ *       onItemSelect={(event) => handleItemSelect(event, data.id)}
+ *     />
+ *   );
+ * };
+ *
+ * return (
+ *   <Breadcrumb
+ *     data={data}
+ *     breadcrumbLink={(items) => CustomLink(items)}
+ *   />
+ * )}
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const BreadcrumbLink: React_2.ForwardRefExoticComponent<BreadcrumbLinkProps & React_2.RefAttributes<BreadcrumbLinkHandle | null>>;
+
+/**
+ * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
+ */
+export declare interface BreadcrumbLinkHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * The props values of the BreadcrumbLink.
+     */
+    props: BreadcrumbLinkProps;
+    /**
+     * The `focus` method of the BreadcrumbLink component.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the `BreadcrumbLinkKeyDownEvent`.
+ */
+export declare interface BreadcrumbLinkKeyDownEvent extends BaseEvent<BreadcrumbLinkHandle> {
+    /**
+     * Represents the `id` of the `BreadcrumbLinkKeyDownEvent`.
+     */
+    id?: string;
+}
+
+/**
+ * Represents the `BreadcrumbLinkMouseEvent`.
+ */
+export declare interface BreadcrumbLinkMouseEvent extends BaseEvent<BreadcrumbLinkHandle> {
+    /**
+     * Represents the `id` of the `BreadcrumbLinkMouseEvent`.
+     */
+    id?: string;
+}
+
+/**
+ * Represents the properties of [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
+ */
+export declare interface BreadcrumbLinkProps {
+    /**
+     * Sets the `id` property of the top `div` element of the BreadcrumbLink.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the BreadcrumbLink.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets additional classes to the BreadcrumbLink.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute to the BreadcrumbLink.
+     */
+    tabIndex?: number;
+    /**
+     * The Breadcrumb direction `ltr` or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Determines the `disabled` mode of the BreadcrumbLink. If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `text` of the BreadcrumbLink component.
+     */
+    text?: string;
+    /**
+     * Represents the `icon` of the BreadcrumbLink component.
+     */
+    icon?: React_2.ReactNode;
+    /**
+     * Represents the `iconClass` of the BreadcrumbLink component.
+     */
+    iconClass?: string;
+    /**
+     * Represents the `onItemSelect` event. Triggered after click on the BreadcrumbLink item.
+     */
+    onItemSelect?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
+    /**
+     * Represents the `onKeyDown` event. Triggered after key down on the BreadcrumbLink item.
+     */
+    onKeyDown?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
+    /**
+     * Sets the `aria-current` value.
+     */
+    ariaCurrent?: boolean;
+    /**
+     * @hidden
+     */
+    isLast?: boolean;
+    /**
+     * @hidden
+     */
+    isFirst?: boolean;
+}
+
+/**
+ * Represents the BreadcrumbListItem component.
+ */
+export declare const BreadcrumbListItem: React_2.ForwardRefExoticComponent<BreadcrumbListItemProps & React_2.RefAttributes<BreadcrumbListItemHandle | null>>;
+
+/**
+ * Represents the target (element, props, and focus()) of the BreadcrumbListItem.
+ */
+export declare interface BreadcrumbListItemHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: any;
+    /**
+     * The props values of the Breadcrumb.
+     */
+    props: BreadcrumbListItemProps;
+    /**
+     * The `focus` method of the BreadcrumbListItem component.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the properties of [BreadcrumbListItem](% slug api_layout_breadcrumblistitem %) component.
+ */
+export declare interface BreadcrumbListItemProps {
+    /**
+     * Sets the `id` property of the top `div` element of the BreadcrumbListItem.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the BreadcrumbListItem.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets additional classes to the BreadcrumbListItem.
+     */
+    className?: string;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * @hidden
+     */
+    isFirstItem: any;
+    /**
+     * @hidden
+     */
+    isLastItem: any;
+}
+
+/**
+ * Represents the BreadcrumbOrderedList component.
+ */
+export declare const BreadcrumbOrderedList: React_2.ForwardRefExoticComponent<BreadcrumbOrderedListProps & React_2.RefAttributes<BreadcrumbOrderedListHandle | null>>;
+
+/**
+ * Represents the target (element, props, and focus()) of the BreadcrumbOrderedList.
+ */
+export declare interface BreadcrumbOrderedListHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLOListElement | null;
+    /**
+     * The props values of the BreadcrumbOrderedList.
+     */
+    props: BreadcrumbOrderedListProps;
+}
+
+/**
+ * Represents the properties of [BreadcrumbOrderedList](% slug api_layout_breadcrumborderedlist %) component.
+ */
+export declare interface BreadcrumbOrderedListProps {
+    /**
+     * Sets the `id` property of the top `div` element of the BreadcrumbOrderedList.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the BreadcrumbOrderedList.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets additional classes to the BreadcrumbOrderedList.
+     */
+    className?: string;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets the `tabIndex` attribute to the BreadcrumbOrderedList.
+     */
+    tabIndex?: number;
+    /**
+     * The BreadcrumbOrderedList direction `ltr` or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Determines the `disabled` mode of the BreadcrumbOrderedList. If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    rootItem?: boolean;
+}
+
+/**
+ * Represents the properties of [Breadcrumb](% slug api_layout_breadcrumb %) component.
+ */
+export declare interface BreadcrumbProps {
+    /**
+     * Sets the `id` property of the top `div` element of the Breadcrumb.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the Breadcrumb.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets additional classes to the Breadcrumb.
+     */
+    className?: string;
+    /**
+     * Represents the Breadcrumb ordered list component.
+     */
+    breadcrumbOrderedList?: React_2.ComponentType<BreadcrumbOrderedListProps>;
+    /**
+     * Represents the Breadcrumb list item component.
+     */
+    breadcrumbListItem?: React_2.ComponentType<BreadcrumbListItemProps>;
+    /**
+     * Represents the Breadcrumb delimiter component.
+     */
+    breadcrumbDelimiter?: React_2.ComponentType<BreadcrumbDelimiterProps>;
+    /**
+     * Represents the Breadcrumb link component.
+     */
+    breadcrumbLink?: React_2.ComponentType<BreadcrumbLinkProps>;
+    /**
+     * Represents the data of the Breadcrumb from type DataModel.
+     */
+    data: DataModel[];
+    /**
+     * Specifies the padding of all Breadcrumb elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     *
+     * @default `medium`
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The Breadcrumb direction `ltr` or `rtl`.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Sets the `tabIndex` attribute to the Breadcrumb.
+     */
+    tabIndex?: number;
+    /**
+     * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
+     */
+    valueField?: string;
+    /**
+     * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
+     */
+    textField?: string;
+    /**
+     * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
+     */
+    iconField?: string;
+    /**
+     * Represents the `iconClass` field. Used for setting the `iconClass` inside the BreadcrumbLink component.
+     */
+    iconClassField?: string;
+    /**
+     * Represents the `onItemSelect` event. Triggered after click on the Breadcrumb.
+     */
+    onItemSelect?: (event: BreadcrumbLinkMouseEvent) => void;
+    /**
+     * Represents the `onKeyDown` event. Triggered after keyboard click on the Breadcrumb.
+     */
+    onKeyDown?: (event: BreadcrumbLinkKeyDownEvent) => void;
+    /**
+     * Represents the label of the Breadcrumb component.
+     */
+    ariaLabel?: string;
+}
+
+export declare const Card: React_2.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React_2.RefAttributes<CardHandle | null>>;
+
+export declare const CardActions: React_2.FunctionComponent<CardActionsProps>;
+
+declare enum cardActionsLayout {
+    START = "start",
+    CENTER = "center",
+    END = "end",
+    STRETCHED = "stretched"
+}
+
+export declare interface CardActionsProps {
+    /**
+     * Sets the CardActions children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the CardActions.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardActions.
+     */
+    className?: string;
+    /**
+     * Set the layout of the actions.
+     *
+     * The supported values are:
+     * * (Default) `start`
+     * * `center`
+     * * `end`
+     * * `stretched`
+     */
+    layout?: cardActionsLayout | string;
+    /**
+     * Specifies the orientation of the Card action buttons.
+     *
+     * * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     *
+     */
+    orientation?: cardOrientation | string;
+}
+
+export declare const CardBody: React_2.FunctionComponent<CardBodyProps>;
+
+declare interface CardBodyProps {
+    /**
+     * Sets the CardBody children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the CardBody.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardBody.
+     */
+    className?: string;
+}
+
+export declare const CardFooter: React_2.FunctionComponent<CardFooterProps>;
+
+declare interface CardFooterProps {
+    /**
+     * Sets the CardFooter children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the CardFooter.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardFooter.
+     */
+    className?: string;
+}
+
+/**
+ * Represents the target(element and props) of the Card component.
+ */
+export declare interface CardHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Card.
+     */
+    props: CardProps;
+}
+
+export declare const CardHeader: React_2.FunctionComponent<CardHeaderProps>;
+
+declare interface CardHeaderProps {
+    /**
+     * Sets the CardHeader children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the CardHeader.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardHeader.
+     */
+    className?: string;
+}
+
+export declare const CardImage: React_2.FunctionComponent<CardImageProps>;
+
+declare interface CardImageProps {
+    /**
+     * Sets additional CSS styles to the CardImageProps.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardImageProps.
+     */
+    className?: string;
+    /**
+     * Set the source of the image.
+     */
+    src?: string;
+    /**
+     * Specifies an alternate text for the image.
+     */
+    alt?: string;
+}
+
+declare enum cardOrientation {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+
+export declare interface CardProps {
+    /**
+     * Sets the Card children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets the [dir](https://www.w3schools.com/tags/att_global_dir.asp) of the Card.
+     */
+    dir?: string;
+    /**
+     * Sets additional CSS styles to the Card.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the Card.
+     */
+    className?: string;
+    /**
+     * Set the type of the Card.
+     *
+     * The supported values are:
+     * * `default`
+     * * `primary`
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     */
+    type?: cardType | string;
+    /**
+     * Set the orientation of the Card.
+     *
+     * The supported values are:
+     * * `horizontal` - Default
+     * * `vertical`
+     */
+    orientation?: cardOrientation | string;
+    /**
+     * Sets a custom property to component DOM element.
+     */
+    [customProp: string]: any;
+}
+
+export declare const CardSubtitle: React_2.FunctionComponent<CardSubtitleProps>;
+
+declare interface CardSubtitleProps {
+    /**
+     * Sets the CardSubtitle children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the CardSubtitle.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardSubtitle.
+     */
+    className?: string;
+}
+
+export declare const CardTitle: React_2.FunctionComponent<CardTitleProps>;
+
+declare interface CardTitleProps {
+    /**
+     * Sets the CardTitle children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the CardTitle.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Add additional classes to the CardTitle.
+     */
+    className?: string;
+}
+
+declare enum cardType {
+    DEFAULT = "default",
+    primary = "primary",
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+
+/**
+ * @hidden
+ */
+export declare const contentDisplayName = "ActionSheetContent";
+
+/**
+ * Represents the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export declare const ContextMenu: {
+    (props: ContextMenuProps): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * The props of the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export declare interface ContextMenuProps extends Omit<MenuProps, 'onClose' | 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay'> {
+    /**
+     * Controls the Popup visibility of the ContextMenu.
+     */
+    show: boolean;
+    /**
+     * Specifies the absolute position of the ContextMenu. The Popover opens next to that point.
+     */
+    offset: Offset;
+    /**
+     * Triggers when the ContextMenu needs to hide.
+     */
+    onClose: (event: React_2.SyntheticEvent<HTMLElement>) => void;
+}
+
+/**
+ * Represents the DataModel object type.
+ */
+export declare interface DataModel {
+    /**
+     * Represents the `id` of the data object.
+     * Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
+     */
+    id?: string;
+    /**
+     * Represents the `text` used inside the BreadcrumbLink component.
+     */
+    text?: string;
+    /**
+     * Represents the `icon` used inside the BreadcrumbLink component.
+     */
+    icon?: React_2.ReactNode;
+    /**
+     * Represents the `iconClass` used inside the BreadcrumbLink component.
+     */
+    iconClass?: string;
+    /**
+     * @hidden
+     */
+    disabled?: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare const downArrowName = "caret-alt-down";
+
+/**
+ * Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   const items = [
+ *       { text: 'Inbox', icon: 'k-i-inbox', selected: true },
+ *       { separator: true },
+ *       { text: 'Notifications', icon: 'k-i-bell', disabled: true },
+ *       { text: 'Calendar', icon: 'k-i-calendar' },
+ *       { separator: true },
+ *       { text: 'Attachments', icon: 'k-i-hyperlink-email' },
+ *       { text: 'Favourites', icon: 'k-i-star-outline' }
+ *   ];
+ *
+ *   const [expanded, setExpanded] = React.useState(true);
+ *   const handleClick = () => setExpanded(prevState => !prevState);
+ *
+ *   return (
+ *       <Drawer expanded={expanded} position='start' mode='push' items={items}>
+ *           <DrawerContent>
+ *               <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
+ *           </DrawerContent>
+ *       </Drawer>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const Drawer: React_2.ForwardRefExoticComponent<DrawerProps & React_2.RefAttributes<DrawerHandle | null>>;
+
+/**
+ * Specifies the animation settings of the Drawer.
+ *
+ */
+export declare interface DrawerAnimation {
+    /**
+     * Specifies the type of the Drawer animation.
+     */
+    type?: 'slide';
+    /**
+     * Specifies the duration of the Drawer animation ([see example]({% slug display_modes_drawer %}#toc-expand-modes)) .
+     */
+    duration: number;
+}
+
+/**
+ * Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   const items = [
+ *       { text: 'Inbox', icon: 'k-i-inbox', selected: true },
+ *       { separator: true },
+ *       { text: 'Notifications', icon: 'k-i-bell', disabled: true },
+ *       { text: 'Calendar', icon: 'k-i-calendar' },
+ *       { separator: true },
+ *       { text: 'Attachments', icon: 'k-i-hyperlink-email' },
+ *       { text: 'Favourites', icon: 'k-i-star-outline' }
+ *   ];
+ *
+ *   const [expanded, setExpanded] = React.useState(true);
+ *   const handleClick = () => setExpanded(prevState => !prevState);
+ *
+ *   return (
+ *       <Drawer expanded={expanded} position='start' mode='push' items={items}>
+ *           <DrawerContent>
+ *               <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
+ *           </DrawerContent>
+ *       </Drawer>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const DrawerContent: React_2.ForwardRefExoticComponent<DrawerContentProps & React_2.RefAttributes<DrawerContentHandle | null>>;
+
+/**
+ * The DrawerContent ref.
+ */
+export declare interface DrawerContentHandle {
+    element: HTMLDivElement | null;
+}
+
+/**
+ * The properties of the [KendoReact DrawerContent component]({% slug overview_drawer %}).
+ */
+export declare interface DrawerContentProps {
+    /**
+     * Sets the DrawerContent items declaratively.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the DrawerContent element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the DrawerContent.
+     */
+    style?: React.CSSProperties;
+}
+
+/**
+ * The Drawer ref.
+ */
+export declare interface DrawerHandle {
+    element: HTMLDivElement | null;
+    focus: () => void;
+}
+
+/**
+ * Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
+ *
+ * @example
+ * ```jsx
+ *    const App = () => {
+ *      const [stateVisible, setStateVisible] = React.useState(true);
+ *      const handleClick = () => { setStateVisible(prevState => !prevState); };
+ *
+ *      return (
+ *        <Drawer expanded={stateVisible} mode={'push'}>
+ *            <DrawerNavigation>
+ *                <DrawerItem text="Inbox" icon="k-i-inbox" />
+ *                <DrawerItem separator={true} />
+ *                <DrawerItem text="Notifications" icon="k-i-bell" disabled={true}/>
+ *                <DrawerItem text="Calendar" icon="k-i-calendar"/>
+ *                <DrawerItem separator={true} />
+ *                <DrawerItem text="Attachments" icon="k-i-hyperlink-email" selected={true}/>
+ *                <DrawerItem text="Favourites" icon="k-i-star-outline"/>
+ *            </DrawerNavigation>
+ *            <DrawerContent><button className="k-button" onClick={handleClick}>Toggle the drawer state</button></DrawerContent>
+ *        </Drawer>
+ *      );
+ *    };
+ *
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const DrawerItem: React_2.ForwardRefExoticComponent<Omit<DrawerItemProps, "ref"> & React_2.RefAttributes<DrawerItemHandle | null>>;
+
+/**
+ * The DrawerItem ref.
+ */
+export declare interface DrawerItemHandle {
+    /**
+     * The DrawerItem element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the DrawerItem.
+     */
+    focus: () => void;
+    /**
+     * The props of the DrawerItem.
+     */
+    props: any;
+}
+
+/**
+ * An interface for the Drawer items.
+ */
+export declare interface DrawerItemProps {
+    /**
+     * Represents the children that are passed to the DrawerItem.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the DrawerItem element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the Drawer item.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies if the Drawer item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     * The icon is rendered inside the Drawer item by a `span.k-icon` element.
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon of the item.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies if the Drawer item is initially selected.
+     */
+    selected?: boolean;
+    /**
+     * Specifies if this is a separator item.
+     */
+    separator?: boolean;
+    /**
+     * Specifies the text content of the Drawer item.
+     */
+    text?: string;
+    /**
+     * Sets the index of the DrawerItem that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Sets the `tabIndex` property of the DrawerItem.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    onSelect?(target?: any, idx?: number, event?: React.SyntheticEvent<Element>): void;
+}
+
+/**
+ * Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
+ *
+ * @example
+ * ```jsx
+ *   const App = () => {
+ *       const [expanded, setExpanded] = React.useState(true);
+ *       const handleClick = () => setExpanded(prevState => !prevState);
+ *
+ *       return (
+ *           <Drawer expanded={expanded} position='start' mode='push'>
+ *               <DrawerNavigation>
+ *                   <ul className="k-drawer-items">
+ *                       <li className="k-drawer-item k-selected">
+ *                           <span className="k-item-text">Home</span>
+ *                       </li>
+ *                       <li className="k-drawer-item">
+ *                           <span className="k-item-text">Products</span>
+ *                       </li>
+ *                       <li className="k-drawer-item">
+ *                           <span className="k-item-text">About</span>
+ *                       </li>
+ *                   </ul>
+ *               </DrawerNavigation>
+ *               <DrawerContent>
+ *                   <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
+ *               </DrawerContent>
+ *           </Drawer>
+ *       );
+ *   };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const DrawerNavigation: React_2.ForwardRefExoticComponent<DrawerNavigationProps & React_2.RefAttributes<DrawerNavigationHandle | null>>;
+
+/**
+ * @hidden
+ */
+export declare interface DrawerNavigationHandle {
+    element: HTMLDivElement | null;
+    focus: () => void;
+}
+
+/**
+ * The properties of the [KendoReact DrawerNavigation component]({% slug overview_drawer %}).
+ */
+export declare interface DrawerNavigationProps {
+    /**
+     * Sets the DrawerNavigation items declaratively.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the DrawerNavigation element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the DrawerNavigation.
+     */
+    style?: React.CSSProperties;
+}
+
+/**
+ * The properties of the [KendoReact Drawer component]({% slug overview_drawer %}).
+ */
+export declare interface DrawerProps {
+    /**
+     * Specifies the animation settings of the Drawer.
+     * If boolean enables or disables the default animation.
+     * Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
+     */
+    animation?: boolean | DrawerAnimation;
+    /**
+     * Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
+     */
+    expanded?: boolean;
+    /**
+     * Sets the Drawer items declaratively.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the Drawer element.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the mode in which the Drawer will be displayed.
+     * The possible values are `overlay` and `push`.
+     * Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
+     */
+    mode?: 'overlay' | 'push';
+    /**
+     * Specifies the position of the Drawer.
+     * The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
+     */
+    position?: 'start' | 'end';
+    /**
+     * Sets additional CSS styles to the Drawer.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `tabIndex` property of the Drawer.
+     */
+    tabIndex?: number;
+    /**
+     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
+     */
+    mini?: boolean;
+    /**
+     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
+     */
+    miniWidth?: number;
+    /**
+     * Defines the width of the Drawer when it is expanded. Defaults to `240`.
+     */
+    width?: number;
+    /**
+     * The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
+     */
+    items?: Array<DrawerItemProps>;
+    /**
+     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
+     *
+     * The default Component is: [DrawerItem]({% slug api_layout_draweritem %}).
+     */
+    item?: React_2.ComponentType<DrawerItemProps>;
+    /**
+     * The event handler that will be fired when the overlay is clicked.
+     * Used in overlay mode only.
+     */
+    onOverlayClick?: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * Fires when a Drawer item is selected.
+     */
+    onSelect?: (event: DrawerSelectEvent) => void;
+}
+
+/**
+ * The arguments for the `onSelect` Drawer event.
+ */
+export declare interface DrawerSelectEvent extends BaseEvent<DrawerHandle> {
+    /**
+     * A Drawer item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected Drawer item.
+     */
+    itemIndex: number;
+}
+
+declare interface EventDataProps {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent?: React_2.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent?: any;
+    /**
+     * The selected card value.
+     */
+    eventData: TimelineEventProps;
+}
+
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+export declare const ExpansionPanel: React_2.ForwardRefExoticComponent<ExpansionPanelProps & React_2.RefAttributes<ExpansionPanelHandle | null>>;
+
+/**
+ * The arguments for the `onAction` ExpansionPanel event.
+ */
+export declare interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
+    /**
+     * Represents the `expanded` state of the ExpansionPanel.
+     */
+    expanded: boolean;
+}
+
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export declare const ExpansionPanelContent: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The ExpansionPanel ref.
+ */
+export declare interface ExpansionPanelHandle {
+    /**
+     * The ExpansionPanel element.
+     */
+    element: HTMLDivElement | null;
+}
+
+/**
+ * The props of the ExpansionPanel component.
+ */
+export declare interface ExpansionPanelProps {
+    /**
+     * The React elements that will be rendered inside the ExpansionPanel.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the ExpansionPanel.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ExpansionPanel.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root ExpansionPanel element.
+     */
+    id?: string;
+    /**
+     * Specifies the primary text in the header of the ExpansionPanel.
+     */
+    title?: React.ReactNode;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
+     */
+    expandIcon?: string;
+    /**
+     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
+     */
+    collapseIcon?: string;
+    /**
+     * Sets a custom SVG icon for the expanded state of the ExpansionPanel.
+     */
+    expandSVGIcon?: SVGIcon;
+    /**
+     * Sets a custom SVG icon for the collapsed state of the ExpansionPanel.
+     */
+    collapseSVGIcon?: SVGIcon;
+    /**
+     * Sets the `dir` property of the ExpansionPanel.
+     */
+    dir?: string;
+    /**
+     * Sets the `tabIndex` property of the ExpansionPanel.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `expanded` state of the ExpansionPanel.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the `disabled` state of the ExpansionPanel.
+     */
+    disabled?: boolean;
+    /**
+     * Sets `aria-controls`. The value should represent the `id` of the controlled content element.
+     */
+    ariaControls?: string;
+    /**
+     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
+     */
+    onAction?: (event: ExpansionPanelActionEvent) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
+
+/**
+ * @hidden
+ */
+export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
+
+/**
+ * @hidden
+ */
+export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
+
+/**
+ * @hidden
+ */
+export declare const footerDisplayName = "ActionSheetFooter";
+
+/**
+ * @hidden
+ */
+export declare const getFirstId: (props: any) => any;
+
+/**
+ * @hidden
+ */
+export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
+
+/**
+ * Represents the [KendoReact GridLayout component]({% slug overview_gridlayout %}).
+ * Arranges the contents of the component in rows and columns in a grid structure.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *     <GridLayout
+ *       rows={[{height: 50}, {height: 50}, {height: 50}]}
+ *       cols={[{width: 50}, {width: 50}, {width: 50}]}
+ *       gap={{rows: 5, cols: 5}}
+ *       align={{horizontal: 'stretch', vertical: 'stretch'}}
+ *     >
+ *       <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
+ *     </GridLayout>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const GridLayout: React_2.ForwardRefExoticComponent<GridLayoutProps & React_2.RefAttributes<GridLayoutHandle | null>>;
+
+/**
+ * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
+ */
+export declare interface GridLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner GridLayout elements.
+     *
+     * The available values are:
+     * - `start`&mdash;Uses the start point of the container.
+     * - `center`&mdash;Uses the center point of the container.
+     * - `end`&mdash;Uses the end point of the container.
+     * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Defines the possible vertical alignment of the inner GridLayout elements.
+     *
+     * The available values are:
+     * - `top`&mdash;Uses the top point of the container.
+     * - `middle`&mdash;Uses the middle point of the container.
+     * - `bottom`&mdash;Uses the bottom point of the container.
+     * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
+}
+
+/**
+ * Represents the props of the [KendoReact GridLayout column]({% slug overview_gridlayout %}).
+ */
+export declare interface GridLayoutColumnProps {
+    /**
+     * Specifies the width of the GridLayout column ([see example]({% slug overview_gridlayout %}#toc-react-gridlayout-demo-preview)).
+     */
+    width?: number | string;
+}
+
+/**
+ * Specifies the gaps between the elements.
+ */
+export declare interface GridLayoutGap {
+    /**
+     * Represents the row gap between the elements
+     */
+    rows?: number | string;
+    /**
+     * Represents the column gap between the elements
+     */
+    cols?: number | string;
+}
+
+/**
+ * Represents the Object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html)
+ * callback of the GridLayout component.
+ */
+export declare interface GridLayoutHandle {
+    /**
+     * Represents the current element. If no current element is present, `element` is `null`.
+     */
+    element: HTMLDivElement | null;
+}
+
+/**
+ * Represents the [KendoReact GridLayoutItem component]({% slug overview_gridlayout %}).
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *     <GridLayout
+ *       rows={[{height: 50}, {height: 50}, {height: 50}]}
+ *       cols={[{width: 50}, {width: 50}, {width: 50}]}
+ *       gap={{rows: 5, cols: 5}}
+ *       align={{horizontal: 'stretch', vertical: 'stretch'}}
+ *     >
+ *       <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
+ *     </GridLayout>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const GridLayoutItem: React_2.ForwardRefExoticComponent<GridLayoutItemProps & React_2.RefAttributes<GridLayoutItemHandle | null>>;
+
+/**
+ * Represents the Object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html)
+ * callback of the GridLayoutItem component.
+ */
+export declare interface GridLayoutItemHandle {
+    /**
+     * Represents the current element. If no current element is present, `element` is `null`.
+     */
+    element: HTMLDivElement | null;
+}
+
+/**
+ * Represents the props of the [KendoReact GridLayoutItem component]({% slug overview_gridlayout %}).
+ */
+export declare interface GridLayoutItemProps {
+    /**
+     * The React elements that will be rendered inside the GridLayoutItem.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets additional CSS classes to the GridLayoutItem.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the GridLayoutItem.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `id` property of the root GridLayoutItem element.
+     */
+    id?: string;
+    /**
+     * Defines the column line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
+     */
+    col?: number;
+    /**
+     * Specifies the number of columns over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
+     * Defaults to `1`.
+     */
+    colSpan?: number;
+    /**
+     * Defines the row line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
+     */
+    row?: number;
+    /**
+     * Specifies the number of rows over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
+     * Defaults to `1`.
+     */
+    rowSpan?: number;
+}
+
+/**
+ * Represents the props of the [KendoReact GridLayout component]({% slug overview_gridlayout %}).
+ */
+export declare interface GridLayoutProps {
+    /**
+     * The React elements that will be rendered inside the GridLayout.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets additional CSS classes to the GridLayout.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the GridLayout.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `id` property of the root GridLayout element.
+     */
+    id?: string;
+    /**
+     * Specifies the gaps between the elements ([see example]({% slug layout_gridlayout %}#toc-gaps)).
+     *
+     * * The possible keys are:
+     * * `rows`
+     * * `columns`
+     */
+    gap?: GridLayoutGap;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
+     * [here]({% slug layout_gridlayout %}#toc-horizontal-align) and [here]({% slug layout_gridlayout %}#toc-vertical-align)).
+     *
+     * The possible keys are:
+     * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner GridLayout elements.
+     *   * `start`&mdash;Uses the start point of the container.
+     *   * `center`&mdash;Uses the central point of the container.
+     *   * `end`&mdash;Uses the end point of the container.
+     *   * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
+     * * `vertical`&mdash; Defines the possible vertical alignment of the inner GridLayout elements.
+     *   * `top`&mdash;Uses the top point of the container.
+     *   * `middle`&mdash;Uses the middle point of the container.
+     *   * `bottom`&mdash;Uses the bottom point of the container.
+     *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     */
+    align?: GridLayoutAlign;
+    /**
+     * Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     */
+    cols?: GridLayoutColumnProps[];
+    /**
+     * Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     */
+    rows?: GridLayoutRowProps[];
+}
+
+/**
+ * Represents the props of the [KendoReact GridLayout row]({% slug overview_gridlayout %}).
+ */
+export declare interface GridLayoutRowProps {
+    /**
+     * Specifies the height of the GridLayout row ([see example]({% slug overview_gridlayout %}#toc-react-gridlayout-demo-preview)).
+     */
+    height?: number | string;
+}
+
+/**
+ * @hidden
+ */
+export declare const headerDisplayName = "ActionSheetHeader";
+
+/**
+ * @hidden
+ */
+export declare const isArrayEqual: (firstArray: any[], secondArray: any[]) => boolean;
+
+/**
+ * @hidden
+ */
+export declare const isPresent: Function;
+
+/**
+ * @hidden
+ */
+export declare const leftArrowName = "caret-alt-left";
+
+/** @hidden */
+export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<any>>;
+
+/**
+ * Represents the [KendoReact Menu component]({% slug overview_menu %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    render() {
+ *        return (
+ *            <Menu>
+ *                <MenuItem text="Item1" />
+ *                <MenuItem text="Item2">
+ *                    <MenuItem text="Item2.1" />
+ *                    <MenuItem text="Item2.2" />
+ *                </MenuItem>
+ *                <MenuItem text="Item3" />
+ *            </Menu>
+ *        );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare class MenuClassComponent extends React_2.Component<MenuProps, MenuState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        vertical: PropTypes.Requireable<boolean>;
+        items: PropTypes.Requireable<(object | null | undefined)[]>;
+        style: PropTypes.Requireable<object>;
+        dir: PropTypes.Requireable<string>;
+        hoverOpenDelay: PropTypes.Requireable<number>;
+        hoverCloseDelay: PropTypes.Requireable<number>;
+        openOnClick: PropTypes.Requireable<boolean>;
+        itemRender: PropTypes.Requireable<any>;
+        linkRender: PropTypes.Requireable<any>;
+        customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        role: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        vertical: boolean;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: MenuState;
+    private itemHoverRequest;
+    private itemLeaveRequest;
+    private menuWrapperEl;
+    private get menuItemId();
+    private directionHolder;
+    private inputItems;
+    private items;
+    private mouseOverHandler;
+    get element(): HTMLDivElement | null;
+    constructor(props: MenuProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: MenuProps): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * Resets the selection and opening of Menu items.
+     */
+    reset: () => void;
+    private onKeyDown;
+    private onItemMouseOver;
+    private onItemMouseLeave;
+    private onItemMouseDown;
+    private onItemFocus;
+    private onItemClick;
+    private onItemBlur;
+    private getInputItem;
+    private setFocusedItemId;
+    private setHoveredItemId;
+    private getMenuClassName;
+    private clearItemHoverAndLeaveRequestsIfApplicable;
+    private isItemWithDefaultClose;
+    private checkIsDirectionRightToLeft;
+    private prepareItems;
+    private dispatchSelectEventIfWired;
+}
+
+/**
+ * Represent the `ref` of the Menu component.
+ */
+export declare interface MenuHandle extends Pick<MenuClassComponent, keyof MenuClassComponent> {
+}
+
+export declare class MenuItem extends React_2.Component<MenuItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        text: PropTypes.Requireable<string>;
+        url: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        cssClass: PropTypes.Requireable<string>;
+        cssStyle: PropTypes.Requireable<object>;
+        render: PropTypes.Requireable<any>;
+        linkRender: PropTypes.Requireable<any>;
+        contentRender: PropTypes.Requireable<any>;
+        data: PropTypes.Requireable<any>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}
+
+export declare class MenuItemArrow extends React_2.Component<MenuItemArrowProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        itemId: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        verticalMenu: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private getIcon;
+}
+
+/**
+ * The properties of the KendoReact MenuItemArrow component.
+ */
+export declare interface MenuItemArrowProps {
+    /**
+     * Sets the item id of the MenuItemArrow component.
+     */
+    itemId: string;
+    /**
+     * Sets the direction of the MenuItemArrow component.
+     */
+    dir: 'ltr' | 'rtl';
+    /**
+     * Specifies whether the Menu which holds the MenuItemArrow component is vertical.
+     */
+    verticalMenu?: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare interface MenuItemInternalModel extends BaseMenuItem {
+    id: string;
+    items: MenuItemInternalModel[];
+    contentParentItemId?: string;
+    isLastFromSiblings: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare class MenuItemInternalsList extends React_2.Component<MenuItemInternalsListProps, {}> {
+    render(): JSX_2.Element;
+    private renderChildItems;
+    private onMouseOver;
+    private onMouseLeave;
+}
+
+/**
+ * @hidden
+ */
+declare interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
+    items: MenuItemInternalModel[];
+    parentItemId?: string;
+    className: string;
+    role?: string;
+    'aria-orientation'?: 'vertical';
+}
+
+export declare class MenuItemLink extends React_2.Component<MenuItemLinkProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        opened: PropTypes.Requireable<boolean>;
+        url: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private getMenuItemClassName;
+}
+
+/**
+ * The properties of the KendoReact MenuItemLink component.
+ */
+export declare interface MenuItemLinkProps extends KendoReactComponentBaseProps {
+    /**
+     * Specifies whether the MenuItemLink component is opened.
+     */
+    opened: boolean;
+    /**
+     * Sets the URL of the MenuItemLink component.
+     */
+    url?: string;
+}
+
+/**
+ * The interface for describing items that can be passed to the `items` property of the Menu as an alternative to passing them as children.
+ */
+export declare interface MenuItemModel extends BaseMenuItem {
+    /**
+     * Specifies the children of the item.
+     */
+    items?: MenuItemModel[];
+}
+
+/**
+ * The properties of the KendoReact MenuItem component ([more information and examples]({% slug items_menu %})).
+ */
+export declare interface MenuItemProps extends BaseMenuItem {
+}
+
+/**
+ * The properties of the [KendoReact Menu component]({% slug overview_menu %}).
+ */
+declare interface MenuProps {
+    /**
+     * Specifies whether the Menu will be vertical ([see example]({% slug vertical_menu %})).
+     */
+    vertical?: boolean;
+    /**
+     * Sets the Menu items.
+     */
+    items?: MenuItemModel[];
+    /**
+     * Sets the Menu items declaratively.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the Menu.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the ID of the Menu.
+     */
+    id?: string;
+    /**
+     * Sets the direction of the Menu.
+     */
+    dir?: string;
+    /**
+     * Specifies the delay in milliseconds before the Menu items are opened on item mouse-hover ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)). Defaults to `100`. If `openOnClick` is `true`, defaults to `0`.
+     */
+    hoverOpenDelay?: number;
+    /**
+     * Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)). Used to avoid accidental closure on leaving. Defaults to `100`.
+     */
+    hoverCloseDelay?: number;
+    /**
+     * If `openOnClick` is set to `true`, the items are opened on mouse hover only after an initial click.
+     */
+    openOnClick?: boolean;
+    /**
+     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     */
+    itemRender?: any;
+    /**
+     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     */
+    linkRender?: any;
+    /**
+     * Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child item acquires a `0_0` id and the second acquires a `0_1` id.
+     */
+    customCloseItemIds?: string[];
+    /**
+     * Adds a custom className to the Menu top element.
+     */
+    className?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * Fires when a Menu item is selected.
+     */
+    onSelect?: (event: MenuSelectEvent) => void;
+    /**
+     * @hidden
+     */
+    onClose?: (event: React.SyntheticEvent<HTMLElement>) => void;
+}
+
+/**
+ * The arguments for the `select` event of the Menu. If the item has a URL and the event is prevented, navigation to the URL does not occur.
+ */
+export declare interface MenuSelectEvent extends BaseEvent<MenuClassComponent> {
+    /**
+     * The id of selected item. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
+     */
+    itemId: string;
+    /**
+     * The selected item.
+     */
+    item: MenuItemModel;
+}
+
+/**
+ * @hidden
+ */
+export declare interface MenuState {
+    focusedItemId: string;
+    hoveredItemId: string;
+    tabbableItemId: string;
+    isFirstRender: boolean;
+}
+
+/**
+ * @hidden
+ */
+declare enum NavigationAction {
+    Toggle = 0,
+    Next = 1,
+    Previous = 2
+}
+
+export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        animation: PropTypes.Requireable<boolean>;
+        children: (props: PanelBarProps, propName: any) => Error | null;
+        dir: PropTypes.Requireable<string>;
+        selected: PropTypes.Requireable<string>;
+        expanded: PropTypes.Requireable<(string | null | undefined)[]>;
+        focused: PropTypes.Requireable<string>;
+        expandMode: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        keepItemsMounted: PropTypes.Requireable<boolean>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        expandMode: string;
+        animation: boolean;
+        keepItemsMounted: boolean;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: PanelBarState;
+    private activeDescendant?;
+    private _element;
+    private showLicenseWatermark;
+    private nextTickId;
+    private get expandMode();
+    private get selectedItem();
+    private get expandedItems();
+    private get children();
+    constructor(props: PanelBarProps);
+    /**
+     * @hidden
+     */
+    handleSelect: (event: PanelBarItemClickEventArguments) => void;
+    /**
+     * @hidden
+     */
+    onSelect: (event: any) => void;
+    /**
+     * @hidden
+     */
+    onFocus: (event: any, step?: number) => void;
+    /**
+     * @hidden
+     */
+    onNavigate: (event: any, action: NavigationAction) => void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    protected nextTick(f: () => any): void;
+    private handleWrapperFocus;
+    private handleWrapperBlur;
+    private handleKeyDown;
+}
+
+/**
+ * Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
+ */
+export declare type PanelBarExpandMode = 'single' | 'multiple';
+
+export declare class PanelBarItem extends React_2.PureComponent<PanelBarItemProps, PanelBarItemState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        animation: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        expanded: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        selected: PropTypes.Requireable<boolean>;
+        level: PropTypes.Requireable<number>;
+        title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
+        id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        focused: PropTypes.Requireable<boolean>;
+        keepItemsMounted: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        title: string;
+    };
+    constructor(props: PanelBarItemProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private handleItemClick;
+    private childFactory;
+}
+
+/**
+ * @hidden
+ */
+declare interface PanelBarItemClickEventArguments {
+    uniquePrivateKey: number;
+    target: PanelBarItem;
+}
+
+/**
+ * Represents the props of the PanelBarItem component.
+ */
+export declare interface PanelBarItemProps {
+    /**
+     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
+     */
+    animation?: boolean;
+    /**
+     * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The class name that is set to the PanelBarItem component.
+     */
+    className?: string;
+    /**
+     * The class name that is set to the PanelBarItem header.
+     */
+    headerClassName?: string;
+    /**
+     * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    onSelect?: Function;
+    /**
+     * @hidden
+     */
+    level?: number;
+    /**
+     * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines an SVG icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
+     */
+    imageUrl?: string;
+    /**
+     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
+     */
+    selected?: boolean;
+    /**
+     * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
+     */
+    title?: React.ReactNode;
+    /**
+     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
+     */
+    id?: string;
+    /**
+     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    parentExpanded?: boolean;
+    /**
+     * @hidden
+     */
+    content?: any;
+    /**
+     * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
+     */
+    uniquePrivateKey?: string;
+    /**
+     * @hidden
+     */
+    parentUniquePrivateKey?: string[];
+    /**
+     * @hidden
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
+     */
+    [customProp: string]: any;
+}
+
+/** @hidden */
+declare interface PanelBarItemState {
+    show: boolean;
+}
+
+/**
+ * Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
+ */
+export declare interface PanelBarProps {
+    /**
+     * The child can be either a single PanelBarItem or a PanelBarItem array.
+     */
+    children?: React.ReactNode;
+    /**
+     * The class name that is set to the PanelBar.
+     */
+    className?: string;
+    /**
+     * Sets the animation state of the PanelBar.
+     */
+    animation?: boolean;
+    /**
+     * Sets the expand mode of the PanelBar ([see example]({% slug expandmodes_panelbar %})).
+     *
+     * The available modes are:
+     * - `"single"`&mdash;Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
+     * - `"multiple"` (default)&mdash;Allows you to expand two or more items at a time. Items can also be toggled.
+     */
+    expandMode?: PanelBarExpandMode;
+    /**
+     * Sets the direction of the PanelBar component.
+     */
+    dir?: string;
+    /**
+     * If set, overrides the currently selected property in the PanelBar state.
+     */
+    selected?: string;
+    /**
+     * Sets the initial expanded state of the PanelBar.
+     */
+    expanded?: string[];
+    /**
+     * Sets the initial focused state of the PanelBar.
+     */
+    focused?: string;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Determines if the PanelBar is going to be used in controlled state.
+     */
+    isControlled?: boolean;
+    /**
+     * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
+     */
+    onSelect?: (event: PanelBarSelectEventArguments) => void;
+    /**
+     * Sets additional CSS styles to the PanelBar.
+     */
+    style?: React.CSSProperties;
+}
+
+/**
+ * The arguments that are passed to the `onSelect` callback function.
+ */
+export declare interface PanelBarSelectEventArguments {
+    /**
+     * The selected PanelBar item.
+     */
+    target: React.ReactElement<PanelBarItemProps>;
+    /**
+     * The new expanded PanelBar items state.
+     */
+    expandedItems: string[];
+}
+
+/**
+ * @hidden
+ */
+export declare interface PanelBarState {
+    focused?: string;
+    wrapperFocused?: boolean;
+    selected?: string;
+    expanded: string[];
+}
+
+/**
+ * Represents the PanelBarUtils functions.
+ */
+export declare namespace PanelBarUtils {
+    /**
+     * Maps a collection of PanelBarItemProps to PanelBarItem components
+     * ([see example]({% slug customization_panelbar %})).
+     * Contained in the `PanelBarUtils` object.
+     *
+     * @param items - A collection of PanelBarItemProps.
+     * @return {PanelBarItem[]} Returns an array of PanelBarItem components.
+     */
+    export function mapItemsToComponents(items: Array<PanelBarItemProps>): PanelBarItem[];
+}
+
+/**
+ * @hidden
+ */
+export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => React_2.ReactNode;
+
+/**
+ * @hidden
+ */
+export declare interface RenderPanelBarItem {
+    animation?: boolean;
+    keepItemsMounted?: boolean;
+    state: PanelBarState;
+    expanded: string[];
+    handleSelect: any;
+    children: React.ReactNode;
+    parentExpanded?: boolean;
+    level?: number;
+    parentPrivateKey?: string[];
+}
+
+/**
+ * @hidden
+ */
+export declare const rightArrowName = "caret-alt-right";
+
+/**
+ * Sort the events list based on event date.
+ */
+export declare const sortEventList: (eventList: TimelineEventProps[]) => TimelineEventProps[];
+
+/**
+ * Represents the [KendoReact Splitter component]({% slug overview_splitter %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    render() {
+ *        return (
+ *            <div>
+ *                <Splitter
+ *                    style={{height: 400}}
+ *                    orientation={'vertical'}
+ *                >
+ *                    <div>Pane 1</div>
+ *                    <div>Pane 2</div>
+ *                    <div>Pane 3</div>
+ *                </Splitter>
+ *            </div>
+ *        );
+ *    }
+ * }
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare class Splitter extends React_2.Component<SplitterProps, SplitterState> {
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    readonly state: SplitterState;
+    private panesDuringOnChange?;
+    private get isControlledState();
+    private get panes();
+    private _container;
+    private get orientation();
+    private get isRtl();
+    private get panesContent();
+    /**
+     * @hidden
+     */
+    constructor(props: SplitterProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private validatePanes;
+    private mapPaneOptions;
+    private mapSplitterPanes;
+    private onBarToggle;
+    private onBarDragResize;
+    private onBarKeyboardResize;
+    private surroudingPanes;
+    private containerSize;
+    private isPercent;
+    private toPixels;
+    private panesOptions;
+    private resetDragState;
+    private elementSize;
+    private clamp;
+    private fixedSize;
+    private resize;
+    private getPaneProps;
+}
+
+/**
+ * @hidden
+ */
+export declare class SplitterBar extends React_2.Component<SplitterBarProps, SplitterBarState> {
+    private draggable;
+    private get isStatic();
+    private get isDraggable();
+    private get isHorizontal();
+    constructor(props: SplitterBarProps);
+    render(): JSX_2.Element;
+    private onDrag;
+    private onFocus;
+    private onBlur;
+    private onToggle;
+    private onPrevToggle;
+    private onNextToggle;
+    private onKeyDown;
+}
+
+/**
+ * @hidden
+ */
+declare interface SplitterBarProps {
+    orientation: 'vertical' | 'horizontal';
+    index: number;
+    prev: SplitterPaneExtendedProps;
+    next: SplitterPaneExtendedProps;
+    ariaLabel?: string;
+    isRtl?: boolean;
+    onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
+    onToggle: (index: number, nativeEvent: React_2.MouseEvent<HTMLDivElement, MouseEvent> | React_2.KeyboardEvent<HTMLDivElement>) => void;
+    onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React_2.KeyboardEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * @hidden
+ */
+declare interface SplitterBarState {
+    focused: boolean;
+}
+
+/**
+ * Represents the onChange event of the Splitter.
+ */
+export declare interface SplitterOnChangeEvent {
+    /**
+     * The new panes state.
+     */
+    newState: SplitterPaneProps[];
+    /**
+     * Indicates if is the last event during drag. Can be used to optimize performance.
+     */
+    isLast: boolean;
+    /**
+     * The native DOM event.
+     */
+    nativeEvent: React_2.MouseEvent<HTMLDivElement, MouseEvent> | React_2.KeyboardEvent<HTMLDivElement> | any;
+}
+
+/**
+ * @hidden
+ */
+export declare class SplitterPane extends React_2.Component<SplitterPaneExtendedProps, {}> {
+    render(): JSX_2.Element;
+}
+
+/**
+ * @hidden
+ */
+export declare interface SplitterPaneExtendedProps extends SplitterPaneProps {
+    orientation: 'vertical' | 'horizontal';
+    overlay: boolean;
+    containsSplitter: boolean;
+}
+
+/**
+ * Represents the pane options of the Splitter.
+ */
+export declare interface SplitterPaneProps extends KendoReactComponentBaseProps {
+    /**
+     * Sets the size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)). Has to be between the `min` and `max` properties.
+     */
+    size?: string;
+    /**
+     * Sets the minimum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    min?: string;
+    /**
+     * Sets the maximum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
+     */
+    max?: string;
+    /**
+     * Specifies if the user is allowed to resize the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-resizing)). If `resizable` is not specified, the resizing of the pane will be enabled.
+     */
+    resizable?: boolean;
+    /**
+     * Specifies if the user is allowed to hide the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsible?: boolean;
+    /**
+     * Specifies the pane collapsed state ([see example]({% slug panes_splitter %}#toc-collapsing)).
+     */
+    collapsed?: boolean;
+    /**
+     * Specifies if overflowing content is scrollable or hidden ([see example]({% slug panes_splitter %}#toc-scrolling)). If `scrollable` is not specified, the content will be scrollable.
+     */
+    scrollable?: boolean;
+    /**
+     * Specifies if the children of the pane should be mounted when it's in collapsed state.
+     */
+    keepMounted?: boolean;
+}
+
+/**
+ * Represents the options of the Splitter.
+ */
+export declare interface SplitterProps {
+    /**
+     * Sets the options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for controlled state.
+     */
+    panes?: SplitterPaneProps[];
+    /**
+     * Sets the initial options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for uncontrolled state.
+     */
+    defaultPanes?: SplitterPaneProps[];
+    /**
+     * Specifies the orientation of the panes within the Splitter ([more information and examples]({% slug orientation_splitter %})). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Sets the styles of the Splitter.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
+     */
+    onChange?: (event: SplitterOnChangeEvent) => void;
+    /**
+     * The pane elements of the Splitter.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * The class name that is set to the Splitter.
+     */
+    className?: string;
+}
+
+/**
+ * @hidden
+ */
+export declare interface SplitterState {
+    isDragging: boolean;
+    dragIndex?: number;
+    startTime: number;
+    originalX: number;
+    originalY: number;
+    originalPrevSize: number;
+    originalNextSize: number;
+    panes: SplitterPaneProps[];
+}
+
+/**
+ * Represents the [KendoReact StackLayout component]({% slug overview_stacklayout %}).
+ * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *     <StackLayout
+ *       orientation="vertical"
+ *       align={{horizontal: 'stretch', vertical: 'stretch'}}
+ *       gap={10}
+ *     >
+ *       <div>Box</div>
+ *       <div>Box</div>
+ *       <div>Box</div>
+ *       <div>Box</div>
+ *     </StackLayout>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const StackLayout: React_2.ForwardRefExoticComponent<StackLayoutProps & React_2.RefAttributes<StackLayoutHandle | null>>;
+
+/**
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+ */
+export declare interface StackLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout %}#toc-horizontal-align)).
+     *
+     * The available values are:
+     * - `start`&mdash;Uses the start point of the container.
+     * - `center`&mdash;Uses the center point of the container.
+     * - `end`&mdash;Uses the end point of the container.
+     * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Defines the possible vertical alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout %}#toc-vertical-align)).
+     *
+     * The available values are:
+     * - `top`&mdash;Uses the top point of the container.
+     * - `middle`&mdash;Uses the middle point of the container.
+     * - `bottom`&mdash;Uses the bottom point of the container.
+     * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
+}
+
+/**
+ * Represents the Object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html)
+ * callback of the StackLayout component.
+ */
+export declare interface StackLayoutHandle {
+    /**
+     * Represents the current element. If no current element is present, `element` is `null`.
+     */
+    element: HTMLDivElement | null;
+}
+
+/**
+ * Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+ *
+ * The possible values are:
+ * * (Default)`horizontal`
+ * * `vertical`
+ *
+ */
+export declare type StackLayoutOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Represents the props of the [KendoReact StackLayout component]({% slug overview_stacklayout %}).
+ */
+export declare interface StackLayoutProps {
+    /**
+     * The React elements that will be rendered inside the StackLayout.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets additional CSS classes to the StackLayout.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the StackLayout.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `id` property of the root StackLayout element.
+     */
+    id?: string;
+    /**
+     * Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout %}#toc-gaps)).
+     */
+    gap?: number | string;
+    /**
+     * Specifies the orientation of the StackLayout.
+     * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+     *
+     * The possible values are:
+     * * (Default)`horizontal`
+     * * `vertical`
+     */
+    orientation?: StackLayoutOrientation;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+     * Demo ([here]({% slug layout_stacklayout %}#toc-horizontal-align)) and ([here]({% slug layout_stacklayout %}#toc-vertical-align)).
+     *
+     * The possible keys are:
+     * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner StackLayout elements.
+     *   * `start`&mdash;Uses the start point of the container.
+     *   * `center`&mdash;Uses the central point of the container.
+     *   * `end`&mdash;Uses the end point of the container.
+     *   * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
+     * * `vertical`&mdash;Defines the possible vertical alignment of the inner StackLayout elements.
+     *   * `top`&mdash;Uses the top point of the container.
+     *   * `middle`&mdash;Uses the middle point of the container.
+     *   * `bottom`&mdash;Uses the bottom point of the container.
+     *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     */
+    align?: StackLayoutAlign;
+}
+
+/**
+ * Represents the [KendoReact Step component]({% slug overview_stepper %}).
+ *
+ * @example
+ * ```jsx
+ * const steps = [
+ *    { label: 'Step 1' },
+ *    { label: 'Step 2' },
+ *    { label: 'Step 3', optional: true }
+ * ];
+ *
+ * const App = () => {
+ *   return (
+ *       <Stepper items={steps} value={1}/>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const Step: React_2.ForwardRefExoticComponent<Omit<StepProps, "ref"> & React_2.RefAttributes<StepHandle | null>>;
+
+/**
+ * The arguments for the `onChange` Step event.
+ */
+export declare interface StepChangeEvent extends BaseEvent<StepHandle> {
+    /**
+     * The index of the selected Step.
+     */
+    value: number;
+}
+
+/**
+ * The arguments for the `onFocus` Step event.
+ */
+export declare interface StepFocusEvent extends BaseEvent<StepHandle> {
+}
+
+/**
+ * The Step ref.
+ */
+export declare interface StepHandle {
+    /**
+     * The Step element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the Step.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the [KendoReact Stepper component]({% slug overview_stepper %}).
+ *
+ * @example
+ * ```jsx
+ * const steps = [
+ *    { label: 'Step 1' },
+ *    { label: 'Step 2' },
+ *    { label: 'Step 3', optional: true }
+ * ];
+ *
+ * const App = () => {
+ *   return (
+ *       <Stepper items={steps} value={1} />
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const Stepper: React_2.ForwardRefExoticComponent<StepperProps & React_2.RefAttributes<StepperHandle | null>>;
+
+/**
+ * The arguments for the `onChange` Stepper event.
+ */
+export declare interface StepperChangeEvent extends BaseEvent<StepperHandle> {
+    /**
+     * The index of the selected Step.
+     */
+    value: number;
+}
+
+/**
+ * The arguments for the `onFocus` Stepper event.
+ */
+export declare interface StepperFocusEvent extends BaseEvent<StepperHandle> {
+}
+
+/**
+ * The Stepper ref.
+ */
+export declare interface StepperHandle {
+    /**
+     * The Stepper element.
+     */
+    element: HTMLMenuElement | null;
+    /**
+     * Focus the Stepper's first focusable child.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the props of the [KendoReact Stepper component]({% slug overview_stepper %}).
+ */
+export declare interface StepperProps {
+    /**
+     * Sets the duration of the Stepper animation. Defaults to `400ms`.
+     */
+    animationDuration?: boolean | number;
+    /**
+     * Represents the children that are passed to the Stepper.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the Stepper.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Disables the whole Stepper.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies a custom icon that will be rendered inside the step for invalid steps.
+     */
+    errorIcon?: string;
+    /**
+     * Specifies a custom SVG icon that will be rendered inside the step for invalid steps.
+     */
+    errorSVGIcon?: SVGIcon;
+    /**
+     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
+     *
+     * The default Component is: [Step]({% slug api_layout_step %}).
+     */
+    item?: React_2.ComponentType<StepProps>;
+    /**
+     * The collection of steps that will be rendered in the Stepper ([see example]({% slug overview_stepper %})).
+     */
+    items: Array<StepProps>;
+    /**
+     * Specifies the linear flow of the Stepper.
+     * ([see example]({% slug linear_mode_stepper %})).
+     */
+    linear?: boolean;
+    /**
+     * Specifies the display mode of the Stepper
+     * ([see example]({% slug display_modes_stepper %})).
+     * * The possible values are:
+     * * (Default) `steps`. Render step indicator and optional label.
+     * * `labels`. Render labels only.
+     */
+    mode?: 'steps' | 'labels';
+    /**
+     * Specifies the orientation of the Stepper
+     * ([see example]({% slug orientation_stepper %})).
+     *
+     * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Sets additional CSS styles to the Stepper.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Specifies a custom icon that will be rendered inside the step for valid steps.
+     */
+    successIcon?: string;
+    /**
+     * Specifies a custom SVG icon that will be rendered inside the step for valid steps.
+     */
+    successSVGIcon?: SVGIcon;
+    /**
+     * Specifies the index of the selected Step.
+     */
+    value: number;
+    /**
+     * The event handler that will be fired when the value is changed.
+     */
+    onChange?: (event: StepperChangeEvent) => void;
+    /**
+     * The event handler that will be fired when a Step is focused.
+     */
+    onFocus?: (event: StepperFocusEvent) => void;
+}
+
+/**
+ * Represents the props of the [KendoReact Step component]({% slug overview_stepper %}).
+ */
+export declare interface StepProps {
+    /**
+     * Represents the children that are passed to the Step.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the Step element.
+     */
+    className?: string;
+    /**
+     * Represents the content that will be rendered inside each Step.
+     *
+     * @hidden
+     */
+    content?: any;
+    /**
+     * Specifies the current Step.
+     */
+    current?: boolean;
+    /**
+     * Sets a custom property.
+     */
+    [customProp: string]: any;
+    /**
+     * Specifies if the Step is disabled
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     * The icon is rendered inside the Step indicator by a `span.k-icon` element
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon.
+     * The icon is rendered inside the Step indicator
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets the index of the Step that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Specifies the validity of the step
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    isValid?: boolean;
+    /**
+     * Specifies the label of the Step
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    label?: string;
+    /**
+     * Specifies if the step is optional. The validation is not applied to these steps
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    optional?: boolean;
+    /**
+     * Sets additional CSS styles to the Step.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the `tabIndex` property of the Step.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the text content of the Step indicator
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    text?: string;
+}
+
+/** @hidden */
+export declare const TabStrip: ForwardRefExoticComponent<TabStripProps & RefAttributes<any>>;
+
+export declare class TabStripClassComponent extends React_2.Component<TabStripProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        animation: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        selected: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        tabContentStyle: PropTypes.Requireable<object>;
+        tabPosition: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        animation: boolean;
+        tabPosition: string;
+        keepTabsMounted: boolean;
+        buttonScrollSpeed: number;
+        mouseScrollSpeed: number;
+    };
+    private _element;
+    private get contentPanelId();
+    private get navItemId();
+    private showLicenseWatermark;
+    private keyBinding;
+    constructor(props: TabStripProps);
+    /**
+     * @hidden
+     */
+    onSelect: (index: any) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown: (event: any) => void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private renderContent;
+    private invertKeys;
+    private firstNavigatableTab;
+    private lastNavigatableTab;
+    private prevNavigatableTab;
+    private nextNavigatableTab;
+    private children;
+}
+
+export declare class TabStripContent extends React_2.Component<TabStripContentProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        animation: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
+        selected: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+    };
+    private contentId;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private renderContent;
+    private renderChild;
+    private childFactory;
+}
+
+/**
+ * The props that are passed to the TabStripContent by the TabStrip.
+ */
+export declare interface TabStripContentProps {
+    /**
+     * Defines whether the content appearance will be animated.
+     */
+    animation?: boolean;
+    /**
+     * The index of the selected tab. Used to indicate which child to render.
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    style?: any;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    children?: React_2.ReactNode;
+    /**
+     * @hidden
+     */
+    contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    navItemId?: string;
+}
+
+export declare class TabStripNavigation extends React_2.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        selected: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>;
+    };
+    private itemsNavRef;
+    constructor(props: TabStripNavigationProps);
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private scrollToSelected;
+    private horizontalScroll;
+    private isRtl;
+    private onWheel;
+    private arrowClickPrev;
+    private arrowClickNext;
+    private handleArrowClick;
+    private setNewScrollPosition;
+    private renderArrow;
+}
+
+export declare class TabStripNavigationItem extends React_2.Component<TabStripNavigationItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        index: PropTypes.Requireable<number>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
+        first: PropTypes.Requireable<boolean>;
+        last: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    private itemRef;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    blur: () => void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private onClick;
+}
+
+/**
+ * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
+ */
+export declare interface TabStripNavigationItemProps {
+    /**
+     * Sets the `id` property of the top element of the TabStripNavigationItem.
+     */
+    id?: string;
+    /**
+     * Defines whether the current TabStripNavigationItem is selected.
+     */
+    active?: boolean;
+    /**
+     * Defines whether the TabStripNavigationItem is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the index of the TabStripNavigationItem that is used to identify it.
+     */
+    index: number;
+    /**
+     * Sets the title of the TabStripNavigationItem.
+     */
+    title?: React_2.ReactNode;
+    /**
+     * @hidden
+     */
+    first?: boolean;
+    /**
+     * @hidden
+     */
+    last?: boolean;
+    /**
+     * @hidden
+     */
+    onSelect?(idx: number): void;
+    /**
+     * @hidden
+     */
+    contentPanelId?: string;
+}
+
+/**
+ * The props that are passed to the TabStripNavigation by the TabStrip.
+ */
+export declare interface TabStripNavigationProps {
+    /**
+     * Sets the index of the selected tab. Controlled by the TabStrip component.
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    tabIndex?: number;
+    /**
+     * @hidden
+     */
+    onKeyDown?: any;
+    /**
+     * @hidden
+     */
+    tabPosition?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * @hidden
+     */
+    onSelect?(idx: number): void;
+    /**
+     * @hidden
+     */
+    scrollable?: boolean;
+    /**
+     * @hidden
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * @hidden
+     */
+    mouseScrollSpeed?: number;
+    /**
+     * @hidden
+     */
+    prevButton?: React_2.ComponentType<ButtonProps>;
+    /**
+     * @hidden
+     */
+    nextButton?: React_2.ComponentType<ButtonProps>;
+    /**
+     * @hidden
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * @hidden
+     */
+    contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    navItemId?: string;
+}
+
+/**
+ * @hidden
+ */
+export declare interface TabStripNavigationStateProps {
+    disabledPrev: boolean;
+    disabledNext: boolean;
+}
+
+/**
+ * Represents the props of the [KendoReact TabStrip component]({% slug overview_tabstrip %}).
+ */
+export declare interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
+    /**
+     * Enables the tab animation.
+     */
+    animation?: boolean;
+    /**
+     * Sets the index of the selected TabStripTab component ([see example]({% slug tabs_tabstrip %}#toc-tabs-on-initial-loading)).
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    style?: any;
+    /**
+     * Sets the style of the TabStripContent component.
+     */
+    tabContentStyle?: any;
+    /**
+     * The position in which the TabStripNavigation components will be rendered.
+     *
+     * The available options are:
+     * - `"top"`&mdash;Renders the `TabStripNavigation` components to the top of the TabStrip.
+     * - `"bottom"`&mdash;Renders the `TabStripNavigation` components to the bottom of the TabStrip.
+     * - `"left"`&mdash;Renders the `TabStripNavigation` components to the left of the TabStrip.
+     * - `"right"`&mdash;Renders the `TabStripNavigation` components to the right of the TabStrip.
+     */
+    tabPosition?: string;
+    /**
+     * Sets the `tabIndex` of the TabStripNavigation.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the direction of the TabStrip component.
+     */
+    dir?: string;
+    /**
+     * Specifies the CSS class names of the TabStrip component.
+     */
+    className?: string;
+    /**
+     * Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
+     */
+    keepTabsMounted?: boolean;
+    /**
+     * Fires each time the user makes a selection.
+     */
+    onSelect?: (e: TabStripSelectEventArguments) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare interface TabStripScrollableProps {
+    /**
+     * Determines whether the TabStrip will be scrollable.
+     *
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
+     *
+     * @default 100
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * Sets the tab list scroll speed in pixels when scrolling via the mouse wheel. You can disable the mouse wheel scrolling by setting this prop to `0`.
+     *
+     * @default 10
+     */
+    mouseScrollSpeed?: number;
+    /**
+     * Defines the custom component that will be rendered as a previous button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    prevButton?: React_2.ComponentType<ButtonProps>;
+    /**
+     * Defines the custom component that will be rendered as a next button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    nextButton?: React_2.ComponentType<ButtonProps>;
+}
+
+/**
+ * The arguments that are passed to the `onSelect` callback function of the TabStrip.
+ */
+export declare interface TabStripSelectEventArguments {
+    /**
+     * The index of the selected TabStrip tab.
+     */
+    selected: number;
+}
+
+export declare class TabStripTab extends React_2.Component<TabStripTabProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        contentClassName: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}
+
+/**
+ * Represents the props of the TabStrip tabs.
+ */
+export declare interface TabStripTabProps {
+    /**
+     * Defines whether a tab is disabled ([see example]({% slug tabs_tabstrip %}#toc-disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets the title of the tab ([see example]({% slug tabs_tabstrip %}#toc-titles)).
+     */
+    title?: React_2.ReactNode;
+    /**
+     * Specifies the CSS class names of the TabStripTab content.
+     */
+    contentClassName?: string;
+}
+
+/**
+ * Represents the [KendoReact TileLayout component]({% slug overview_tilelayout %}).
+ */
+export declare class TileLayout extends React_2.Component<TileLayoutProps, TileLayoutState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        gap: PropTypes.Requireable<object>;
+        columns: PropTypes.Requireable<number>;
+        columnWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        rowHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        dataItemKey: PropTypes.Requireable<string>;
+        items: PropTypes.Requireable<any[]>;
+        positions: PropTypes.Requireable<any[]>;
+        autoFlow: PropTypes.Requireable<string>;
+        onReposition: PropTypes.Requireable<(...args: any[]) => any>;
+        ignoreDrag: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    _element: HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    state: {
+        positions: ({
+            order: number;
+            rowSpan: number;
+            colSpan: number;
+        } & TilePosition)[];
+    };
+    private showLicenseWatermark;
+    constructor(props: TileLayoutProps);
+    /**
+     * Gets the HTML element of the TileLayout component.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: TileLayoutProps, state: TileLayoutState): {
+        positions: ({
+            order: number;
+            rowSpan: number;
+            colSpan: number;
+        } & TilePosition)[];
+    } | null;
+    /**
+     * @hidden
+     */
+    update: (index: number, dOrder: number, dCol: number, dRowSpan?: number, dColSpan?: number) => void;
+    render(): JSX_2.Element;
+}
+
+/**
+ * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
+ * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
+ * Defaults to `column`.
+ */
+export declare type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';
+
+/**
+ * Specifies the gaps between the tiles.
+ */
+export declare interface TileLayoutGap {
+    /**
+     * The rows gap between tiles.
+     * Defaults to `16px`.
+     */
+    rows?: number | string;
+    /**
+     * The columns gap between tiles.
+     * Defaults to `16px`.
+     */
+    columns?: number | string;
+}
+
+/**
+ * The interface for describing items that can be passed to the `items` property of the TileLayout component.
+ */
+export declare interface TileLayoutItem {
+    /**
+     * The position which is used when the TileLayout is in uncontrolled mode
+     * ([see example]({% slug tiles_tilelayout %}#toc-position-and-dimensions)).
+     */
+    defaultPosition?: TilePosition;
+    /**
+     * Sets additional CSS styles to the TileLayoutItem.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the TileLayoutItem.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the TileLayoutItem hint element.
+     */
+    hintStyle?: React.CSSProperties;
+    /**
+     * Sets additional classes to the TileLayoutItem hint element.
+     */
+    hintClassName?: string;
+    /**
+     * Sets the title in the TileLayoutItem's header
+     * ([see example]({% slug tiles_tilelayout %})).
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the content in TileLayoutItem's body
+     * ([see example]({% slug tiles_tilelayout %})).
+     */
+    body?: React.ReactNode;
+    /**
+     * Overrides the default rendering of the TileLayoutItem
+     * ([see example]({% slug tiles_tilelayout %}#toc-custom-rendering)).
+     */
+    item?: React.ReactNode;
+    /**
+     * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
+     * ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
+     * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
+     */
+    resizable?: TileResizeMode;
+    /**
+     * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
+     * ([see example]({% slug tiles_tilelayout %}#toc-reordering)).
+     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
+     */
+    reorderable?: boolean;
+}
+
+/**
+ * Represents the properties of [TileLayout](% slug overview_tilelayout %) component.
+ */
+export declare interface TileLayoutProps {
+    /**
+     * Sets the `id` property of the root element.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the TileLayout.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets additional classes to the TileLayout.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the gaps between the tiles ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     *
+     * * The possible keys are:
+     * * `rows`
+     * * `columns`
+     */
+    gap?: TileLayoutGap;
+    /**
+     * Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     */
+    columns?: number;
+    /**
+     * Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     */
+    columnWidth?: number | string;
+    /**
+     * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     */
+    rowHeight?: number | string;
+    /**
+     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
+     */
+    dataItemKey?: string;
+    /**
+     * The collection of items that will be rendered in the TileLayout
+     * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     */
+    items?: TileLayoutItem[];
+    /**
+     * The list of tiles' positions which are used when the TileLayout is in controlled mode
+     * ([see example]({% slug tiles_tilelayout %}#toc-controlling-the-position)).
+     */
+    positions?: TilePosition[];
+    /**
+     * Fires when the user repositions the tile by either dragging or resizing
+     * ([see example]({% slug tiles_tilelayout %}#toc-controlling-the-position)).
+     */
+    onReposition?: (event: TileLayoutRepositionEvent) => void;
+    /**
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
+     * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
+     * Defaults to `column`
+     * ([see example]({% slug autoflows_tilelayout %})).
+     */
+    autoFlow?: TileLayoutAutoFlow;
+    /**
+     * Use this callback to prevent or allow dragging of the tiles based on specific dom event.
+     * Setting `ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }}` will make only the headers draggable.
+     * Setting `ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }}` will ignore dragging input elements.
+     */
+    ignoreDrag?: (event: any) => boolean;
+}
+
+/**
+ * The arguments for the `onReposition` TileLayout event.
+ */
+export declare interface TileLayoutRepositionEvent extends BaseEvent<TileLayout> {
+    /**
+     * The new positions of the TileLayout tiles.
+     */
+    value: Array<TileStrictPosition>;
+}
+
+/**
+ * @hidden
+ */
+export declare interface TileLayoutState {
+    positions: TileStrictPosition[];
+}
+
+/**
+ * Specifies the position of each tile.
+ */
+export declare interface TilePosition {
+    /**
+     * Defines the order index of the TileLayoutItem.
+     * If not set, items will receive a sequential order.
+     */
+    order?: number;
+    /**
+     * (Required) Defines on which column-line the TileLayoutItem will start.
+     * It is required in order reordering and resizing functionalities to work as expected as they rely on it.
+     */
+    col: number;
+    /**
+     * Specifies how many columns will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    colSpan?: number;
+    /**
+     * Defines on which row-line the TileLayoutItem will start.
+     */
+    row?: number;
+    /**
+     * Specifies how many rows will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    rowSpan?: number;
+}
+
+/**
+ * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
+ * ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
+ * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
+ */
+export declare type TileResizeMode = 'horizontal' | 'vertical' | boolean;
+
+/**
+ * Specifies the strict position of each tile.
+ * Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}).
+ */
+export declare interface TileStrictPosition extends TilePosition {
+    /**
+     * Defines the order index of the TileLayoutItem.
+     * If not set, items will receive a sequential order.
+     */
+    order: number;
+    /**
+     * Specifies how many rows will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    rowSpan: number;
+    /**
+     * Specifies how many columns will the TileLayoutItem spans.
+     * Defaults to `1`.
+     */
+    colSpan: number;
+}
+
+export declare const Timeline: React_2.FunctionComponent<TimelineProps>;
+
+/**
+ * @hidden
+ */
+export declare interface TimelineDirectionsProps {
+    eventsData: TimelineEventProps[];
+    dateFormat?: string;
+    transitionDuration?: number;
+    navigatable?: boolean;
+    navigation?: React_2.MutableRefObject<Navigation>;
+    onActionClick?: (event: EventDataProps) => void;
+}
+
+export declare interface TimelineEventProps {
+    /**
+     * Specifies if the event card is default collapsed.
+     */
+    opened?: boolean;
+    /**
+     * Specifies the text that is rendered as body of the event card.
+     */
+    description: string;
+    /**
+     * Represent event point on the axis.
+     */
+    date: Date;
+    /**
+     * Specifies the text that is rendered as title.
+     */
+    title: string;
+    /**
+     * Specifies the text that is rendered under the title.
+     */
+    subtitle?: string;
+    /**
+     * Specifies the images that are rendered under the description.
+     */
+    images?: {
+        src: string;
+        alt?: string;
+    }[];
+    /**
+     * Specifies the corresponding links that are rendered under the images.
+     */
+    actions?: {
+        text: string;
+        url: string;
+    }[];
+    /**
+     * @Hidden
+     */
+    yearFlag?: number;
+}
+
+export declare interface TimelineProps {
+    events: TimelineEventProps[];
+    /**
+     * Specifies the CSS class names which are set to the Timeline.
+     */
+    className?: string;
+    /**
+     * Specifies option for expanding and collapsing the event card.
+     */
+    collapsibleEvents?: boolean;
+    /**
+     * @hidden
+     */
+    horizontal?: boolean;
+    /**
+     * The date format for displaying the event date.
+     */
+    dateFormat?: string;
+    /**
+     * Render events alternatingly on both sides of the axis.
+     */
+    alterMode?: boolean;
+    /**
+     * Specifies the time for sliding to next event in horizontal mode and time for collapsing the event in vertical mode.
+     * The default value are:
+     * - `300ms` for horizontal
+     * - `400ms` for vertical
+     */
+    transitionDuration?: number;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
+    /**
+     * An event that is called when event card is toggled.
+     */
+    onChange?: (event: EventDataProps) => void;
+    /**
+     * An event that is called when card action is clicked.
+     */
+    onActionClick?: (event: EventDataProps) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare interface yearFlagProps {
+    yearFlag?: number;
+}
+
+export { }