@ckbox/components 1.1.1 → 1.2.0-dev.1

package/dist/index.d.ts

@@ -2,29 +2,33 @@
 /**
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  */
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { useEffect } from 'react';
 import { Placement } from '@popperjs/core';
 import { TransitionProps } from 'react-transition-group/Transition';
 import * as react_dnd from 'react-dnd';
 
-declare const Bottombar: React.ForwardRefExoticComponent<Props$17 & React.RefAttributes<HTMLDivElement>>;
-interface Props$17 {
+declare const Bottombar: React$1.ForwardRefExoticComponent<Props$1Q & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1Q {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Content rendered on the right side of the bar.
      */
-    sideContent: React.ReactNode;
+    sideContent: React$1.ReactNode;
     /**
      * Content rendered as status summary in a absolute left-positioned container
      */
-    statusContent?: React.ReactNode;
+    statusContent?: React$1.ReactNode;
 }
 
-interface Props$16 {
+declare type ButtonSize = 'small' | 'medium' | 'large';
+declare type ButtonType = 'fill' | 'outline' | 'plain';
+declare type ButtonColor = 'action' | 'danger' | 'neutral';
+
+interface Props$1P {
     /**
      * Sets root class.
      */
@@ -35,65 +39,73 @@ interface Props$16 {
     onClick?: () => void;
 }
 
-declare const ArrowLeftEnd: React.FC<Props$16>;
+declare const ArrowLeftEnd: React$1.FC<Props$1P>;
+
+declare const ArrowRightEnd: React$1.FC<Props$1P>;
+
+declare const ArrowLeft: React$1.FC<Props$1P>;
+
+declare const ArrowRight: React$1.FC<Props$1P>;
+
+declare const Cabinet: React$1.FC<Props$1P>;
 
-declare const ArrowRightEnd: React.FC<Props$16>;
+declare const Check: React$1.FC<Props$1P>;
 
-declare const ArrowLeft: React.FC<Props$16>;
+declare const ChevronDown: React$1.FC<Props$1P>;
 
-declare const ArrowRight: React.FC<Props$16>;
+declare const ChevronLeft: React$1.FC<Props$1P>;
 
-declare const Cabinet: React.FC<Props$16>;
+declare const ChevronRight: React$1.FC<Props$1P>;
 
-declare const Check: React.FC<Props$16>;
+declare const ClockTwo: React$1.FC<Props$1P>;
 
-declare const ChevronDown: React.FC<Props$16>;
+declare const Close: React$1.FC<Props$1P>;
 
-declare const ChevronLeft: React.FC<Props$16>;
+declare const Cog: React$1.FC<Props$1P>;
 
-declare const ChevronRight: React.FC<Props$16>;
+declare const Copy: React$1.FC<Props$1P>;
 
-declare const ClockTwo: React.FC<Props$16>;
+declare const Docs: React$1.FC<Props$1P>;
 
-declare const Close: React.FC<Props$16>;
+declare const DotsVertical: React$1.FC<Props$1P>;
 
-declare const Cog: React.FC<Props$16>;
+declare const Download: React$1.FC<Props$1P>;
 
-declare const Copy: React.FC<Props$16>;
+declare const DragHandle: React$1.FC<Props$1P>;
 
-declare const Docs: React.FC<Props$16>;
+declare const Filter: React$1.FC<Props$1P>;
 
-declare const DotsVertical: React.FC<Props$16>;
+declare const Folder: React$1.FC<Props$1P>;
 
-declare const Download: React.FC<Props$16>;
+declare const Image: React$1.FC<Props$1P>;
 
-declare const DragHandle: React.FC<Props$16>;
+declare const Info: React$1.FC<Props$1P>;
 
-declare const Folder: React.FC<Props$16>;
+declare const InfoSquare: React$1.FC<Props$1P>;
 
-declare const Image: React.FC<Props$16>;
+declare const Pencil: React$1.FC<Props$1P>;
 
-declare const Info: React.FC<Props$16>;
+declare const Plus: React$1.FC<Props$1P>;
 
-declare const Pencil: React.FC<Props$16>;
+declare const Settings: React$1.FC<Props$1P>;
 
-declare const Plus: React.FC<Props$16>;
+declare const Sort: React$1.FC<Props$1P>;
 
-declare const Settings: React.FC<Props$16>;
+declare const Spinner: React$1.FC<Props$1P>;
 
-declare const Sort: React.FC<Props$16>;
+declare const Trash: React$1.FC<Props$1P>;
 
-declare const Trash: React.FC<Props$16>;
+declare const Upload: React$1.FC<Props$1P>;
 
-declare const Upload: React.FC<Props$16>;
+declare const Warning: React$1.FC<Props$1P>;
 
-declare const Warning: React.FC<Props$16>;
+declare const WarningFill: React$1.FC<Props$1P>;
 
-declare const WarningFill: React.FC<Props$16>;
+declare const Search: React$1.FC<Props$1P>;
 
-declare const Search: React.FC<Props$16>;
+declare const SearchMissingResults: React$1.FC<Props$1P>;
 
-declare const XCircle: React.FC<Props$16>;
+declare const XCircle: React$1.FC<Props$1P>;
 
 declare const icons$1_ArrowLeftEnd: typeof ArrowLeftEnd;
 declare const icons$1_ArrowRightEnd: typeof ArrowRightEnd;
@@ -111,18 +123,22 @@ declare const icons$1_Docs: typeof Docs;
 declare const icons$1_DotsVertical: typeof DotsVertical;
 declare const icons$1_Download: typeof Download;
 declare const icons$1_DragHandle: typeof DragHandle;
+declare const icons$1_Filter: typeof Filter;
 declare const icons$1_Folder: typeof Folder;
 declare const icons$1_Image: typeof Image;
 declare const icons$1_Info: typeof Info;
+declare const icons$1_InfoSquare: typeof InfoSquare;
 declare const icons$1_Pencil: typeof Pencil;
 declare const icons$1_Plus: typeof Plus;
 declare const icons$1_Settings: typeof Settings;
 declare const icons$1_Sort: typeof Sort;
+declare const icons$1_Spinner: typeof Spinner;
 declare const icons$1_Trash: typeof Trash;
 declare const icons$1_Upload: typeof Upload;
 declare const icons$1_Warning: typeof Warning;
 declare const icons$1_WarningFill: typeof WarningFill;
 declare const icons$1_Search: typeof Search;
+declare const icons$1_SearchMissingResults: typeof SearchMissingResults;
 declare const icons$1_XCircle: typeof XCircle;
 declare namespace icons$1 {
   export {
@@ -143,18 +159,22 @@ declare namespace icons$1 {
     icons$1_DotsVertical as DotsVertical,
     icons$1_Download as Download,
     icons$1_DragHandle as DragHandle,
+    icons$1_Filter as Filter,
     icons$1_Folder as Folder,
     icons$1_Image as Image,
     icons$1_Info as Info,
+    icons$1_InfoSquare as InfoSquare,
     icons$1_Pencil as Pencil,
     icons$1_Plus as Plus,
     icons$1_Settings as Settings,
     icons$1_Sort as Sort,
+    icons$1_Spinner as Spinner,
     icons$1_Trash as Trash,
     icons$1_Upload as Upload,
     icons$1_Warning as Warning,
     icons$1_WarningFill as WarningFill,
     icons$1_Search as Search,
+    icons$1_SearchMissingResults as SearchMissingResults,
     icons$1_XCircle as XCircle,
   };
 }
@@ -167,8 +187,8 @@ declare type IconName = keyof typeof icons$1;
 declare type IconSize = 'small' | 'base' | 'medium' | 'big' | 'bigger' | 'humongous';
 declare type IconColor = 'accent' | 'disabled' | 'danger' | 'warning';
 
-declare const Icon: React.FC<Props$15>;
-interface Props$15 {
+declare const Icon: React$1.FC<Props$1O>;
+interface Props$1O {
     /**
      * Sets root class.
      */
@@ -194,8 +214,12 @@ interface Props$15 {
     size?: IconSize;
 }
 
-declare const Button: React.ForwardRefExoticComponent<Props$14 & React.RefAttributes<HTMLButtonElement>>;
-interface Props$14 {
+declare const Button: React$1.ForwardRefExoticComponent<Props$1N & React$1.RefAttributes<HTMLButtonElement>>;
+interface Props$1N {
+    /**
+     * Applies active styling.
+     */
+    active?: boolean;
     /**
      * Sets root class.
      */
@@ -203,11 +227,11 @@ interface Props$14 {
     /**
      * Sets color type. Use in combination with `type` to achieve desired styling.
      */
-    color?: 'action' | 'danger' | 'neutral';
+    color?: ButtonColor;
     /**
      * Main content of the component.
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Displays as disabled.
      */
@@ -229,9 +253,13 @@ interface Props$14 {
      */
     label?: string;
     /**
-     * Sets left-side icon.
+     * Icon to show next to content.
      */
     icon?: IconName;
+    /**
+     * Allows to pass custom content.
+     */
+    content?: React$1.ReactNode;
     /**
      * Icon placement.
      */
@@ -239,23 +267,35 @@ interface Props$14 {
     /**
      * Sets `click` event handler.
      */
-    onClick?: React.MouseEventHandler;
+    onClick?: React$1.MouseEventHandler;
     /**
      * Sets `mouseleave` event handler.
      */
-    onMouseLeave?: React.MouseEventHandler;
+    onMouseLeave?: React$1.MouseEventHandler;
+    /**
+     * Allows to make text color transparent.
+     */
+    textColor?: 'default' | 'transparent';
     /**
      * Sets styling type. Use in combination with `color` to achieve desired styling.
      */
-    type?: 'fill' | 'outline' | 'plain';
+    type?: ButtonType;
+    /**
+     * Specifies tab index for the button.
+     */
+    tabIndex?: number;
     /**
      * Sets sizing of the button.
      */
-    sizing?: 'small';
+    sizing?: ButtonSize;
+    /**
+     * Disables line wrapping for label text
+     */
+    disabledLabelWrapping?: boolean;
 }
 
-declare const CircularLoader: React.FC<Props$13>;
-interface Props$13 {
+declare const CircularLoader: React$1.ForwardRefExoticComponent<Props$1M & React$1.RefAttributes<HTMLButtonElement>>;
+interface Props$1M {
     /**
      * Component's label.
      */
@@ -274,45 +314,45 @@ interface Props$13 {
     onClick?: () => void;
 }
 
-declare const DialogActions: React.FC<Props$12>;
-interface Props$12 {
+declare const DialogActions: React$1.FC<Props$1L>;
+interface Props$1L {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 
-declare const DialogColumn: React.ForwardRefExoticComponent<Props$11 & React.RefAttributes<HTMLDivElement>>;
-interface Props$11 extends React.HTMLAttributes<HTMLDivElement> {
+declare const DialogColumn: React$1.ForwardRefExoticComponent<Props$1K & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1K extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Allows its content to overflow.
      */
     overflow?: boolean;
 }
 
-declare const DialogFooter: React.FC<Props$10>;
-interface Props$10 {
+declare const DialogFooter: React$1.FC<Props$1J>;
+interface Props$1J {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Content placed on a right-side of the footer.
      */
     sideContent?: {
-        label: React.ReactNode;
+        label: React$1.ReactNode;
         error?: boolean;
         warning?: boolean;
         onClick?: () => void;
     }[];
 }
 
-declare const DialogHeader: React.FC<Props$$>;
-interface Props$$ {
+declare const DialogHeader: React$1.FC<Props$1I>;
+interface Props$1I {
     /**
      * Sets focus on close button on mount.
      */
@@ -336,7 +376,7 @@ interface Props$$ {
     /**
      * Secondary title.
      */
-    subTitle?: React.ReactNode;
+    subTitle?: React$1.ReactNode;
     /**
      * Dialog title.
      */
@@ -345,6 +385,10 @@ interface Props$$ {
      * Dialog title size.
      */
     titleSize?: 'sm' | 'md';
+    /**
+     * Sets ID of dialog header description element.
+     */
+    descriptionId?: string;
     /**
      * Causes header height to be based on font size, even if title is not provided.
      */
@@ -355,20 +399,20 @@ interface Props$$ {
     type?: 'success' | 'error' | 'info';
 }
 
-declare const DialogRow: React.FC<Props$_>;
-interface Props$_ extends React.HTMLAttributes<HTMLDivElement> {
+declare const DialogRow: React$1.FC<Props$1H>;
+interface Props$1H extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 
-declare const DialogSection: React.FC<Props$Z>;
-interface Props$Z {
+declare const DialogSection: React$1.FC<Props$1G>;
+interface Props$1G {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Removes top spacing.
      */
@@ -377,6 +421,10 @@ interface Props$Z {
      * Makes component full height of its container.
      */
     fullHeight?: boolean;
+    /**
+     * Sets dialog section height.
+     */
+    height?: 'md';
     /**
      * Turns on accent background color.
      */
@@ -388,7 +436,7 @@ interface Props$Z {
     /**
      * Accepts ref.
      */
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: React$1.Ref<HTMLDivElement>;
     /**
      * Shows content as an error.
      */
@@ -397,67 +445,121 @@ interface Props$Z {
      * Shows content as a header.
      */
     header?: boolean;
+    /**
+     * Sets the dialog section ID.
+     */
+    id?: string;
 }
 
-declare const Dialog: React.FC<Props$Y>;
-interface Props$Y {
+interface DialogRootProps {
     /**
      * Main content of the component.
      */
     children: React.ReactNode;
     /**
-     * Sets dialog as draggable.
+     * Sets dialog height.
      */
-    draggable?: boolean;
+    height?: 'md' | 'lg';
+    /**
+     * Shows dialog as a modal.
+     */
+    modal?: boolean;
+    /**
+     * Marks dialog as an alert.
+     */
+    alert?: boolean;
     /**
      * Callback invoked when dialog is closed.
      */
     onClose?: () => void;
     /**
-     * Callback invoked on dragging the dialog (if it's `draggable`).
-     * Consider throttling the callback invocation.
+     * Callback invoked on `keydown` event.
      */
-    onDrag?: () => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
     /**
-     * Sets dialog size.
+     * Sets dialog width.
      */
-    size?: 'sm' | 'md' | 'lg';
+    width?: 'sm' | 'md' | 'lg' | 'xl';
     /**
-     * Sets dialog height.
+     * Sets the dialog label.
      */
-    height?: 'md';
+    label?: string;
+    /**
+     * Sets the ID of label element.
+     */
+    labelledBy?: string;
+    /**
+     * Sets the ID of description element.
+     */
+    describedBy?: string;
+}
+interface DialogSwitchProps extends DialogRootProps {
+    /**
+     * Dialog's minimize / maximize action will be animated if set to `true`.
+     * Dialogs in `modal` mode cannot be animated.
+     */
+    animated?: boolean;
+    /**
+     * Element associated with dialog's minimize / maximize action. Use in combination with `animated` prop.
+     */
+    animationAnchor?: HTMLElement | null;
     /**
-     * Enables dialog `modal` mode.
+     * Shows dialog as a modal.
      */
     modal?: boolean;
+    /**
+     * Callback invoked when dialog is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Opens dialog. Use in combination with `onClose`.
+     */
+    open?: boolean;
+}
+interface DialogProps extends DialogSwitchProps {
+    /**
+     * Makes dialog draggable. Dialogs in `modal` mode cannot be draggable.
+     */
+    draggable?: boolean;
+    /**
+     * Callback invoked on dragging the dialog. Use in combination with `draggable`.
+     */
+    onDrag?: () => void;
 }
 
-interface Props$X {
+/**
+ * Entry component for the dialog.
+ * Initializes selected dialog mode and optionally adds common options and draggability if needed.
+ */
+declare const Dialog: React$1.FC<Props$1F>;
+declare type Props$1F = DialogProps;
+
+interface Props$1E {
     /**
      * Sets root class.
      */
     className: string;
 }
 
-declare const Zip: React.FC<Props$X>;
+declare const Zip: React$1.FC<Props$1E>;
 
-declare const Empty: React.FC<Props$X>;
+declare const Empty: React$1.FC<Props$1E>;
 
-declare const Excel: React.FC<Props$X>;
+declare const Excel: React$1.FC<Props$1E>;
 
-declare const Img: React.FC<Props$X>;
+declare const Img: React$1.FC<Props$1E>;
 
-declare const Movie: React.FC<Props$X>;
+declare const Movie: React$1.FC<Props$1E>;
 
-declare const Music: React.FC<Props$X>;
+declare const Music: React$1.FC<Props$1E>;
 
-declare const Pdf: React.FC<Props$X>;
+declare const Pdf: React$1.FC<Props$1E>;
 
-declare const Ppt: React.FC<Props$X>;
+declare const Ppt: React$1.FC<Props$1E>;
 
-declare const Txt: React.FC<Props$X>;
+declare const Txt: React$1.FC<Props$1E>;
 
-declare const Word: React.FC<Props$X>;
+declare const Word: React$1.FC<Props$1E>;
 
 declare const icons_Empty: typeof Empty;
 declare const icons_Excel: typeof Excel;
@@ -483,29 +585,29 @@ declare namespace icons {
   };
 }
 
-declare const DocIcon: React.FC<Props$W>;
+declare const DocIcon: React$1.FC<Props$1D>;
 declare type DocIconName = keyof typeof icons;
-interface Props$W {
+interface Props$1D {
     /**
      * Name of selected icon.
      */
     name: DocIconName;
 }
 
-declare const GalleryFigure: React.FC<Props$V>;
-interface Props$V {
+declare const GalleryFigure: React$1.FC<Props$1C>;
+interface Props$1C {
     /**
      * Main content of the component.
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Figure caption.
      */
     caption: string;
 }
 
-declare const GalleryItem: React.ForwardRefExoticComponent<Props$U & React.RefAttributes<HTMLDivElement>>;
-interface Props$U {
+declare const GalleryItem: React$1.ForwardRefExoticComponent<Props$1B & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1B {
     /**
      * Sets item as active.
      */
@@ -517,31 +619,35 @@ interface Props$U {
     /**
      * Main content of the component.
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Item name.
      */
     name: string;
     /**
-     * Sets `mousedown` event handler.
+     * Sets `click` event handler.
      */
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
     /**
      * Sets `keydown` event handler.
      */
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyDown?: React$1.KeyboardEventHandler<HTMLDivElement>;
     /**
      * Sets `dblclick` event handler.
      */
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: React$1.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Sets `click` event handler for checkbox.
+     */
+    onCheckboxClick?: React$1.MouseEventHandler<HTMLButtonElement>;
 }
 
-declare const Gallery: React.FC<Props$T>;
-interface Props$T {
+declare const Gallery: React$1.FC<Props$1A>;
+interface Props$1A {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Represents zoom value. Pass value in range 0 .. 1.
      */
@@ -556,8 +662,8 @@ interface Props$T {
  * Polymorphism for `ref` is tricky. Let's type it as `any` for now.
  */
 
-declare const Input: React.ForwardRefExoticComponent<Pick<Props$S, "max" | "type" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "size" | "min" | "placeholder" | "readOnly" | "onFocus" | "onBlur" | "onChange" | "onClick" | "variant" | "multiline"> & React.RefAttributes<any>>;
-interface Props$S {
+declare const Input: React$1.ForwardRefExoticComponent<Pick<Props$1z, "label" | "className" | "type" | "value" | "error" | "id" | "disabled" | "name" | "size" | "onClick" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "max" | "variant" | "readOnly" | "multiline" | "min"> & React$1.RefAttributes<any>>;
+interface Props$1z {
     /**
      * Input's class name.
      */
@@ -585,19 +691,19 @@ interface Props$S {
     /**
      * Callback invoked when the blur event is fired.
      */
-    onBlur?: (evt: React.ChangeEvent<any>) => void;
+    onBlur?: (evt: React$1.ChangeEvent<any>) => void;
     /**
      * Callback invoked when the value is changed.
      */
-    onChange?: (evt: React.ChangeEvent<any>) => void;
+    onChange?: (evt: React$1.ChangeEvent<any>) => void;
     /**
      * Callback invoked when the element receives focus.
      */
-    onFocus?: (evt: React.ChangeEvent<any>) => void;
+    onFocus?: (evt: React$1.ChangeEvent<any>) => void;
     /**
      * Callback invoked when the element is clicked.
      */
-    onClick?: (evt: React.ChangeEvent<any>) => void;
+    onClick?: (evt: React$1.ChangeEvent<any>) => void;
     /**
      * Input's type.
      */
@@ -613,7 +719,7 @@ interface Props$S {
     /**
      * Input's ref object.
      */
-    ref?: React.Ref<any>;
+    ref?: React$1.Ref<any>;
     /**
      * Sizing variant.
      */
@@ -640,8 +746,8 @@ interface Props$S {
     variant?: 'default' | 'underline';
 }
 
-declare const MenuItem: React.FC<Props$R>;
-interface Props$R {
+declare const MenuItem: React$1.FC<Props$1y>;
+interface Props$1y {
     /**
      * Associated icon.
      */
@@ -664,12 +770,12 @@ interface Props$R {
     disabled?: boolean;
 }
 
-declare const MenuSubSection: React.FC<Props$Q>;
-interface Props$Q {
+declare const MenuSubSection: React$1.FC<Props$1x>;
+interface Props$1x {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Indicates how content and title should be aligned.
      */
@@ -692,12 +798,12 @@ interface Props$Q {
     title: string;
 }
 
-declare const MenuSection: React.FC<Props$P>;
-interface Props$P {
+declare const MenuSection: React$1.FC<Props$1w>;
+interface Props$1w {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Adds bottom border.
      */
@@ -708,21 +814,33 @@ interface Props$P {
     title: string;
 }
 
+interface PopperContext {
+    /**
+     * Forces synchronous popper position update.
+     */
+    forceUpdate?: () => void;
+}
+/**
+ * Defines React context for `Popper` component.
+ */
+declare const PopperContext: React$1.Context<PopperContext>;
+declare const usePopperCtx: () => PopperContext;
+
 declare type PopperPlacement = Placement;
 declare type PopperAnchorRef = HTMLElement | null | undefined;
 declare type PopperOffsetValue = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 declare type PopperOffset = [PopperOffsetValue, PopperOffsetValue];
 
-declare const PopperArrow: React__default.FC<Props$O>;
-interface Props$O {
+declare const PopperArrow: React__default.FC<Props$1v>;
+interface Props$1v {
     /**
      * Sets arrow size.
      */
     size?: 'sm' | 'md';
 }
 
-declare const Popper: React__default.ForwardRefExoticComponent<Props$N & React__default.RefAttributes<HTMLDivElement>>;
-interface Props$N {
+declare const Popper: React__default.ForwardRefExoticComponent<Props$1u & React__default.RefAttributes<HTMLElement>>;
+interface Props$1u {
     /**
      * Anchor element. Popper will be mounted to this element.
      */
@@ -757,8 +875,8 @@ interface Props$N {
     sameWidth?: boolean;
 }
 
-declare const Menu: React.FC<Props$M>;
-interface Props$M {
+declare const Menu: React$1.ForwardRefExoticComponent<Props$1t & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1t {
     /**
      * Anchor element.
      */
@@ -770,7 +888,7 @@ interface Props$M {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Offsets popper element.
      */
@@ -793,8 +911,8 @@ interface Props$M {
     spacing?: boolean;
 }
 
-declare const NavbarItem: React.FC<Props$L>;
-interface Props$L {
+declare const NavbarItem: React$1.FC<Props$1s>;
+interface Props$1s {
     /**
      * Applies active styling.
      */
@@ -811,10 +929,6 @@ interface Props$L {
      * Separator for the special element.
      */
     separated?: boolean;
-    /**
-     * Fixing the element to bottom of the navbar.
-     */
-    bottomFixed?: boolean;
     /**
      * Displayed icon.
      */
@@ -837,11 +951,59 @@ interface Props$L {
     /**
      * Optional click handler.
      */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Optional buttons to be shown inside the navbar item.
+     */
+    buttons?: React$1.ReactNode;
 }
 
-declare const Navbar: React.FC<Props$K>;
-interface Props$K {
+declare const NavbarItemFixed: React$1.FC<Props$1r>;
+interface Props$1r {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const NavbarButton: React$1.FC<Props$1q>;
+interface Props$1q {
+    /**
+     * Button's aria label.
+     */
+    label?: string;
+    /**
+     * Icon to show.
+     */
+    icon?: IconName;
+    /**
+     * Sets `click` event handler.
+     */
+    onClick?: React$1.MouseEventHandler;
+}
+
+declare const NavbarCreditLink: React$1.FC<Props$1p>;
+interface Props$1p {
+    /**
+     * Renders the content of the credit link.
+     */
+    content: React$1.ReactNode;
+    /**
+     * Flag indicating if the link is collapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * The URL that the hyperlink points to.
+     */
+    href?: string;
+    /**
+     * Describes the purpose of a link.
+     */
+    ariaLabel?: string;
+}
+
+declare const Navbar: React$1.FC<Props$1o>;
+interface Props$1o {
     /**
      * Labels navigation element.
      */
@@ -849,19 +1011,19 @@ interface Props$K {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 
-declare const Overlay: React.FC<Props$J>;
-interface Props$J {
+declare const Overlay: React$1.FC<Props$1n>;
+interface Props$1n {
     /**
      * Optional children.
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Callback invoked upon clicking on the overlay.
      */
-    onClick?: React.MouseEventHandler;
+    onClick?: React$1.MouseEventHandler;
     /**
      * Color variant.
      */
@@ -872,48 +1034,36 @@ interface Props$J {
     className?: string;
 }
 
-declare const PanelList: React.FC<Props$I>;
-interface Props$I {
-    /**
-     * Main content.
-     */
-    children: React.ReactNode;
-    /**
-     * Optional toolbar rendered on top of the list.
-     */
-    toolbar?: React.ReactNode;
+declare const PanelActions: React$1.FC<Props$1m>;
+interface Props$1m {
     /**
-     * Toggles loading effect for the toolbar.
+     * Main content of the component.
      */
-    toolbarLoading?: boolean;
+    children?: React$1.ReactNode;
 }
 
-declare const PanelActions: React.FC<Props$H>;
-interface Props$H {
+declare const PanelColumn: React$1.FC<Props$1l>;
+interface Props$1l {
     /**
      * Main content of the component.
      */
-    children?: React.ReactNode;
+    children: React$1.ReactNode;
 }
 
-declare const PanelContent: React.ForwardRefExoticComponent<Props$G & React.RefAttributes<HTMLDivElement>>;
-interface Props$G {
+declare const PanelContent: React$1.ForwardRefExoticComponent<Props$1k & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1k {
     /**
      * Main content of the component.
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Optional panel content's class name in non-edit mode.
      */
     className?: string;
-    /**
-     * Optional panel content's class name in edit mode.
-     */
-    editClassName?: string;
     /**
      * Component shown in edit mode. By default, regular input field is shown in edit mode.
      */
-    editComponent?: React.ReactNode;
+    editComponent?: React$1.ReactNode;
     /**
      * Optional header in edit mode.
      */
@@ -924,8 +1074,8 @@ interface Props$G {
     header?: string;
 }
 
-declare const PanelContentProp: React.FC<Props$F>;
-interface Props$F {
+declare const PanelContentProp: React$1.FC<Props$1j>;
+interface Props$1j {
     /**
      * Property label.
      */
@@ -936,10 +1086,49 @@ interface Props$F {
     value: string;
 }
 
-declare const PanelDragHandle: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
+declare const PanelDragHandle: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
-declare const PanelSkeleton: React.FC<Props$E>;
-interface Props$E {
+declare const PanelList: React$1.FC<Props$1i>;
+interface Props$1i {
+    /**
+     * Main content.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Optional toolbar rendered on top of the list.
+     */
+    toolbar?: React$1.ReactNode;
+    /**
+     * Toggles loading effect for the toolbar.
+     */
+    toolbarLoading?: boolean;
+}
+
+declare const PanelListDivider: React$1.FC<Props$1h>;
+interface Props$1h {
+    /**
+     * Toggles component opacity.
+     */
+    opaque?: boolean;
+}
+
+declare const PanelSide: React$1.FC<Props$1g>;
+interface Props$1g {
+    /**
+     * Icon to display.
+     */
+    icon?: IconName;
+    /**
+     * Renders custom icon.
+     *
+     * Pass either a React component or raw markup as string.
+     * Passed string must be sanitized beforehand so that it's safe to use.
+     */
+    iconRender?: IconRenderProp;
+}
+
+declare const PanelSkeleton: React$1.FC<Props$1f>;
+interface Props$1f {
     /**
      * Number of loading blocks.
      */
@@ -950,8 +1139,8 @@ interface Props$E {
     size?: 'sm' | 'md' | 'lg';
 }
 
-declare const PanelTitle: React.ForwardRefExoticComponent<Props$D & React.RefAttributes<HTMLDivElement>>;
-interface Props$D extends Omit<Props$G, 'children'> {
+declare const PanelTitle: React$1.ForwardRefExoticComponent<Props$1e & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1e extends Omit<Props$1k, 'children'> {
     /**
      * Panel's title.
      */
@@ -1037,12 +1226,12 @@ interface ListDndChildProps {
 declare const useListDnd: (initItems: ListDndItem[]) => {
     items: ListDndItem[];
     moveItem: ListDndMoveItem;
-    setItems: React.Dispatch<React.SetStateAction<ListDndItem[]>>;
+    setItems: React$1.Dispatch<React$1.SetStateAction<ListDndItem[]>>;
     setDraggable: ListDndSetDraggable;
 };
 
-declare const SortableDndListItem: React.FC<Props$C>;
-interface Props$C {
+declare const SortableDndListItem: React$1.FC<Props$1d>;
+interface Props$1d {
     /**
      * Current item's index in a list.
      */
@@ -1062,7 +1251,7 @@ interface Props$C {
     /**
      * Accepts a single child.
      */
-    children: React.ReactChild;
+    children: React$1.ReactElement | null;
 }
 
 interface SortableDndListContextShape {
@@ -1084,12 +1273,12 @@ interface SortableDndListContextShape {
     onDragEnd?: ListDndOnDragEnd;
 }
 
-declare const SortableDndList: React.FC<Props$B>;
-interface Props$B extends SortableDndListContextShape {
+declare const SortableDndList: React$1.FC<Props$1c>;
+interface Props$1c extends SortableDndListContextShape {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Container element to scroll while dragging.
      */
@@ -1103,34 +1292,12 @@ interface PanelContextShape extends Partial<ListDndChildProps> {
     edit?: boolean;
 }
 
-/**
- * Polymorphism for `ref` is tricky. Let's type it as `any` for now.
- */
-declare const Panel: React.ForwardRefExoticComponent<Props$A & React.RefAttributes<any>>;
-interface Props$A extends PanelContextShape {
-    /**
-     * Adds border to the bottom of the panel.
-     */
-    border?: boolean;
+declare const Panel: React$1.ForwardRefExoticComponent<Props$1b & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$1b extends PanelContextShape {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
-    /**
-     * Icon to display.
-     */
-    icon?: IconName;
-    /**
-     * Renders custom icon.
-     *
-     * Pass either a React component or raw markup as string.
-     * Passed string must be sanitized beforehand so that it's safe to use.
-     */
-    iconRender?: IconRenderProp;
-    /**
-     * Callback invoked when panel changes are submitted. Use with `edit`.
-     */
-    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    children: React$1.ReactNode;
     /**
      * Toggles component opacity.
      */
@@ -1141,52 +1308,8 @@ interface Props$A extends PanelContextShape {
     elevated?: boolean;
 }
 
-declare type PaginationClickCallback = () => void;
-declare type PaginationChangeCallback = (page: number) => void;
-declare type PageChangeCallback = (page: number) => void;
-interface PaginationState {
-    /**
-     * Indicates if current `page` is the first one.
-     */
-    isFirstPage: boolean;
-    /**
-     * Indicates if current `page` is the last one.
-     */
-    isLastPage: boolean;
-    /**
-     * Callback invoked upon selecting the first page.
-     */
-    onFirstPageClick: PaginationClickCallback;
-    /**
-     * Callback invoked upon selecting the last page.
-     */
-    onLastPageClick: PaginationClickCallback;
-    /**
-     * Callback invoked upon selecting the next page.
-     */
-    onNextPageClick: PaginationClickCallback;
-    /**
-     * Callback invoked upon changing page to a provided page number.
-     */
-    onPageChange: PaginationChangeCallback;
-    /**
-     * Callback invoked upon selecting the previous page.
-     */
-    onPrevPageClick: PaginationClickCallback;
-}
-/**
- * Manages state of pagination using passed current page number and a callback to change it.
- * Minimum page number value is 1.
- *
- * @param page current page number
- * @param setPage callback executed to set the current page number
- * @param totalPagesCount total number of pages
- * @returns state of pagination
- */
-declare const usePagination: (page: number, setPage: PageChangeCallback, totalPagesCount: number) => PaginationState;
-
-declare const Pagination: React.FC<Props$z>;
-interface Props$z extends PaginationState {
+declare const Pagination: React$1.FC<Props$1a>;
+interface Props$1a {
     /**
      * Disables interaction with pagination.
      */
@@ -1203,18 +1326,22 @@ interface Props$z extends PaginationState {
      * Label indicating total number of pages.
      */
     totalPagesLabel: string;
+    /**
+     * Callback invoked when page is changed.
+     */
+    onPageChange: (page: number) => void;
     /**
      * Currently selected page.
      */
     page: number;
 }
 
-declare const ProgressPanel: React.ForwardRefExoticComponent<Props$y & React.RefAttributes<HTMLDivElement>>;
-interface Props$y {
+declare const ProgressPanel: React$1.ForwardRefExoticComponent<Props$19 & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$19 {
     /**
      * Additional info rendered close to a title.
      */
-    additionalInfo?: React.ReactNode;
+    additionalInfo?: React$1.ReactNode;
     /**
      * Applies error styling.
      */
@@ -1230,7 +1357,7 @@ interface Props$y {
     /**
      * Help text displayed below the bar.
      */
-    helpText?: React.ReactNode;
+    helpText?: React$1.ReactNode;
     /**
      * Unique identifier of a panel.
      */
@@ -1245,8 +1372,8 @@ interface Props$y {
     value: number;
 }
 
-declare const PropertiesTableRow: React.FC<Props$x>;
-interface Props$x {
+declare const PropertiesTableRow: React$1.FC<Props$18>;
+interface Props$18 {
     /**
      * Item's label.
      */
@@ -1254,15 +1381,15 @@ interface Props$x {
     /**
      * Item's value.
      */
-    value: React.ReactNode;
+    value: React$1.ReactNode;
 }
 
-declare const PropertiesTable: React.FC<Props$w>;
-interface Props$w {
+declare const PropertiesTable: React$1.FC<Props$17>;
+interface Props$17 {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 
 /**
@@ -1290,8 +1417,8 @@ interface Props$w {
  * As a loader, a blurred version of the image can be shown if `blurHash` value is passed.
  */
 
-declare const ResponsiveImage: React.FC<Props$v>;
-interface Props$v {
+declare const ResponsiveImage: React$1.FC<Props$16>;
+interface Props$16 {
     /**
      * Image's description.
      *
@@ -1346,11 +1473,11 @@ interface Props$v {
     /**
      * Callback invoked when a resource failed to load, or can't be used.
      */
-    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+    onError?: (event: React$1.SyntheticEvent<HTMLImageElement>) => void;
 }
 
-declare const Skeleton: React.FC<Props$u>;
-interface Props$u {
+declare const Skeleton: React$1.FC<Props$15>;
+interface Props$15 {
     /**
      * Optional class name. It overrides class responsible for background color.
      */
@@ -1365,8 +1492,8 @@ interface Props$u {
     width?: string;
 }
 
-declare const SortButton: React.FC<Props$t>;
-interface Props$t {
+declare const SortButton: React$1.FC<Props$14>;
+interface Props$14 {
     /**
      * Button's aria label.
      */
@@ -1385,32 +1512,32 @@ interface Props$t {
     onClick?: () => void;
 }
 
-declare const SwitchView: React.FC<Props$s>;
-interface Props$s {
+declare const SwitchView: React$1.FC<Props$13>;
+interface Props$13 {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * View id.
      */
     id: string;
 }
 
-declare const Switch: React.FC<Props$r>;
-interface Props$r {
+declare const Switch: React$1.FC<Props$12>;
+interface Props$12 {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * View id to match.
      */
     match?: string;
 }
 
-declare const SwitchInput: React.FC<Props$q>;
-interface Props$q {
+declare const SwitchInput: React$1.FC<Props$11>;
+interface Props$11 {
     /**
      * Sets current input's value.
      */
@@ -1429,32 +1556,52 @@ interface Props$q {
     onChange: (checked: boolean) => void;
 }
 
-declare const TagList: React.FC<Props$p>;
-interface Props$p {
+declare const TagList: React$1.FC<Props$10>;
+interface Props$10 {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Optional root class name.
      */
     className?: string;
+    /**
+     * Indicates whether tag list should hide overflown items.
+     */
+    itemOverflow?: boolean;
 }
 
-declare const Tag: React.ForwardRefExoticComponent<Props$o & React.RefAttributes<HTMLDivElement>>;
-interface Props$o {
+declare const TagLabel: React$1.FC<Props$$>;
+interface Props$$ {
     /**
      * Emphasizes tag content.
      */
     bold?: boolean;
     /**
-     * Tag's label.
+     * Sets component's children.
      */
-    label: string;
+    children: React$1.ReactNode;
+}
+
+declare const Tag: React$1.ForwardRefExoticComponent<Props$_ & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$_ {
     /**
-     * Callback invoked upon clicking on remove icon.
+     * Sets component's children.
      */
-    onRemove?: () => void;
+    children?: React$1.ReactNode;
+    /**
+     * Disables focusability of any focusable element.
+     */
+    disableFocusability?: boolean;
+    /**
+     * Callback invoked upon clicking on remove icon.
+     */
+    onRemove?: React$1.MouseEventHandler;
+    /**
+     * Sets tag radius.
+     */
+    radius?: 'md' | 'lg' | 'xl';
     /**
      * Sets tag as removable.
      */
@@ -1465,8 +1612,8 @@ interface Props$o {
     removeLabel?: string;
 }
 
-declare const TagInput: React.FC<Props$n>;
-interface Props$n {
+declare const TagInput: React$1.FC<Props$Z>;
+interface Props$Z {
     /**
      * Input's class name.
      */
@@ -1474,11 +1621,11 @@ interface Props$n {
     /**
      * Label displayed in the popup when hovering over copy button.
      */
-    copyBtnLabel: string;
+    copyBtnLabel?: string;
     /**
      * Label displayed in the popup upon clicking on the copy button.
      */
-    copyBtnLabelCopied: string;
+    copyBtnLabelCopied?: string;
     /**
      * Input field id.
      */
@@ -1514,12 +1661,12 @@ interface Props$n {
     }[];
 }
 
-declare const Tab: React.FC<Props$m>;
-interface Props$m {
+declare const Tab: React$1.FC<Props$Y>;
+interface Props$Y {
     /**
      * Main content.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Tab id.
      */
@@ -1530,8 +1677,8 @@ interface Props$m {
     label: string;
 }
 
-declare const Tabs: React.FC<Props$l>;
-interface Props$l {
+declare const Tabs: React$1.FC<Props$X>;
+interface Props$X {
     /**
      * Currently selected tab.
      */
@@ -1539,20 +1686,40 @@ interface Props$l {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Callback invoked upon selecting a tab.
      */
     onTabSelect?: (tab: string) => void;
 }
 
-declare const Tooltip: React.FC<Props$k>;
-interface Props$k {
+declare const TooltipIcon: React$1.FC<Props$W>;
+interface Props$W {
+    /**
+     * Icon to display.
+     */
+    iconName: IconName;
+    /**
+     * Delay before displaying the tooltip.
+     */
+    delay?: number;
+    /**
+     * Tooltip placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Tooltip helper text.
+     */
+    title: string;
+}
+
+declare const Tooltip: React$1.FC<Props$V>;
+interface Props$V {
     /**
      * Main content of the component.
      * It must be a single child that accepts `ref`.
      */
-    children: React.ReactChild;
+    children: React$1.ReactNode;
     /**
      * Delay before displaying the tooltip.
      */
@@ -1570,8 +1737,12 @@ interface Props$k {
 /**
  * `TopbarAction` component acts as a props carrier only.
  */
-declare const TopbarAction: React.FC<Props$j>;
-interface Props$j {
+declare const TopbarAction: React$1.FC<Props$U>;
+interface Props$U {
+    /**
+     * Applies active styling.
+     */
+    active?: boolean;
     /**
      * Associated icon.
      */
@@ -1584,6 +1755,10 @@ interface Props$j {
      * Action label.
      */
     label: string;
+    /**
+     * Indicates if loading is in progress.
+     */
+    loading?: boolean;
     /**
      * Displays as disabled.
      */
@@ -1598,16 +1773,16 @@ interface Props$j {
     downloadUrl?: string;
 }
 
-declare const Topbar: React.FC<Props$i>;
-interface Props$i {
+declare const Topbar: React$1.FC<Props$T>;
+interface Props$T {
     /**
      * Main content of the component.
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Content rendered on the right side of the bar.
      */
-    sideContent: React.ReactNode;
+    sideContent: React$1.ReactNode;
 }
 
 interface UIContext {
@@ -1645,7 +1820,7 @@ interface UIContext {
 /**
  * Defines React context for i18n and sets defaults.
  */
-declare const UIContext: React.Context<UIContext>;
+declare const UIContext: React$1.Context<UIContext>;
 declare const useUIContext: () => UIContext;
 
 /**
@@ -1681,6 +1856,19 @@ declare const copyToClipboard: (text: string) => Promise<void>;
  */
 declare const clsx: (...classes: (string | undefined | null | number | boolean)[]) => string;
 
+/**
+ * Values representing mouse button.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+ */
+declare enum MouseEventButton {
+    Main = 0,
+    Auxiliary = 1,
+    Secondary = 2,
+    Fourth = 3,
+    Fifth = 4
+}
+
 /**
  * Given time distance in s, formats it by rounding to nearest time unit in accordance with predefined buckets.
  *
@@ -1692,7 +1880,24 @@ declare const formatTimeDistance: (t: number) => {
     s: number;
 };
 
-declare const getValidChildren: <ChildProps>(children: React.ReactNode) => React.ReactElement<ChildProps, string | React.JSXElementConstructor<any>>[];
+/**
+ * Retrieves amount of pixels in a blob if it's an image.
+ * If given blob is an invalid image, returns undefined.
+ *
+ * @param data blob data to measure
+ * @returns amount of pixels
+ */
+declare const getPixelCountFromImageBlob: (data: Blob) => Promise<number | undefined>;
+
+/**
+ * Calculates standard deviation based on provided list of numbers.
+ *
+ * @param array list of numbers
+ * @returns standard deviation
+ */
+declare const getStandardDeviation: (array: number[]) => number | undefined;
+
+declare const getValidChildren: <ChildProps>(children: React$1.ReactNode) => React$1.ReactElement<ChildProps, string | React$1.JSXElementConstructor<any>>[];
 
 /**
  * Shorthand for recommended use of hasOwnProperty (see https://eslint.org/docs/rules/no-prototype-builtins).
@@ -1702,6 +1907,55 @@ declare const getValidChildren: <ChildProps>(children: React.ReactNode) => React
  */
 declare const hasOwnProperty: (object: Record<string, unknown>, propertyKey: string) => boolean;
 
+declare type KeyModifier = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';
+declare type KeyAction = () => void;
+interface KeyCombination {
+    value: string;
+    mod?: KeyModifier;
+}
+/**
+ * `KeyboardEvent`-like interface that will allow to use generated handlers as React's synthetic event handlers.
+ * Only a subset of event properties are used.
+ */
+declare type KeyEventLike = Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'code' | 'key' | 'preventDefault' | 'stopPropagation'>;
+interface KeyProps {
+    /**
+     * Defines which code will invoke the `onKeyDown` callback.
+     * `code.value` corresponds to `evt.code`.
+     *
+     * Provide either `code` or `key`.
+     */
+    code?: KeyCombination;
+    /**
+     * Defines which key will invoke the `onKeyDown` callback.
+     * `key.value` corresponds to `evt.key`.
+     *
+     * Provide either `code` or `key`.
+     */
+    key?: KeyCombination;
+    /**
+     * Callback to invoke when proper key code is detected.
+     */
+    action?: KeyAction;
+}
+
+/**
+ * Checks if event matches a single key combination.
+ *
+ * @param evt keyboard event
+ * @param currentValue event key or code value
+ * @param combination key combination
+ * @returns flag indicating if combination is matched
+ */
+declare const matchesCombination: (evt: KeyEventLike, currentValue: string, { value, mod }: KeyCombination) => boolean;
+/**
+ * Creates `keydown` event listener for configured key combination(s).
+ *
+ * @param props key props
+ * @returns event listener
+ */
+declare const getKeyHandler: (props: KeyProps[] | KeyProps) => (evt: KeyEventLike) => void;
+
 declare const noOp: () => void;
 
 interface RInterval {
@@ -1747,7 +2001,7 @@ interface BatchUpdateBatch<Payload> {
  * @returns actions and batch
  */
 declare const useBatchUpdate: <Payload extends BatchUpdatePayload>(updateCb: (batch: BatchUpdateBatch<Payload>) => void, batchUpdateInterval: number) => {
-    batch: React.MutableRefObject<BatchUpdateBatch<Payload>>;
+    batch: React$1.MutableRefObject<BatchUpdateBatch<Payload>>;
     pushUpdate: (payload: Payload) => void;
 };
 
@@ -1815,9 +2069,9 @@ interface ResizeOptions {
  * @returns resize state and utils
  */
 declare const useResize: (opts: ResizeOptions) => {
-    onMouseDown: React.MouseEventHandler<HTMLElement>;
-    setResizableEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-    isResizing: boolean;
+    onMouseDown: React$1.MouseEventHandler<HTMLElement> | undefined;
+    setResizableEl: (el: HTMLElement | null) => void;
+    isResizing: boolean | undefined;
 };
 
 declare type DragHandler = (diff: {
@@ -1858,6 +2112,7 @@ declare type DragHandler = (diff: {
      */
     clientVY: number;
 }) => void;
+declare type DragDimensionsHandler = (dimensions: Dimensions) => void;
 interface DraggableOptions {
     /**
      * Callback invoked on dragging. Passes most recent drag vectors.
@@ -1866,7 +2121,29 @@ interface DraggableOptions {
     /**
      * Callback invoked on drag end.
      */
-    onDragEnd?: (dimensions: Dimensions) => void;
+    onDragEnd?: DragDimensionsHandler;
+    /**
+     * Callback invoked on drag start.
+     */
+    onDragStart?: React.MouseEventHandler<HTMLElement>;
+}
+interface DraggableState {
+    /**
+     * Dragged element.
+     */
+    draggableEl: HTMLElement | null;
+    /**
+     * Indicates if dragging is happening.
+     */
+    isDragging?: boolean;
+    /**
+     * Event handler that should be attached to drag handle.
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Setter for element that will be dragged.
+     */
+    setDraggableEl: (el: HTMLElement | null) => void;
 }
 
 /**
@@ -1875,12 +2152,7 @@ interface DraggableOptions {
  * @param opts dragging options
  * @returns dragging state and utils
  */
-declare const useDraggable: (opts?: DraggableOptions) => {
-    draggableEl: HTMLElement | null;
-    isDragging: boolean;
-    onMouseDown: React.MouseEventHandler<HTMLElement>;
-    setDraggableEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-};
+declare const useDraggable: (opts?: DraggableOptions) => DraggableState;
 
 /**
  * Keeps info about mount state.
@@ -1913,7 +2185,7 @@ interface ItemsOverflowOptions {
  */
 declare const useItemsOverflow: (opts: ItemsOverflowOptions) => {
     init: boolean;
-    setContainer: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+    setContainer: React$1.Dispatch<React$1.SetStateAction<HTMLDivElement | null>>;
     visibleItems: number;
 };
 
@@ -1944,7 +2216,7 @@ declare const useResettableTimeout: (onTimeout: () => void, delay: number) => {
  */
 declare const useResponsiveSizes: (breakpoints: number[], enabled?: boolean) => {
     sizes: number | undefined;
-    setContainer: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    setContainer: React$1.Dispatch<React$1.SetStateAction<HTMLElement | null>>;
     pixelAdjSizes: number;
 };
 
@@ -1955,7 +2227,7 @@ declare const useResponsiveSizes: (breakpoints: number[], enabled?: boolean) =>
  * @returns hook state and methods
  */
 declare const useElementVisibility: (container?: HTMLElement | null) => {
-    setElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    setElement: React$1.Dispatch<React$1.SetStateAction<HTMLElement | null>>;
     visible: boolean;
 };
 
@@ -1976,6 +2248,35 @@ declare const useFilesDrop: ({ onDrop }: UseFilesDropProps) => {
     isActive: boolean;
 };
 
+declare type Selected = Set<string>;
+
+/**
+ * This hook is responsible for selecting elements in a grid.
+ * A list of cells with unique IDs must be provided along with a getter for column numbers.
+ *
+ * @param cells list of cell ids
+ * @param getColumns getter for column number
+ * @returns state setters / state slices
+ */
+declare const useGridSelection: (cells: string[], getColumns: () => number) => {
+    deselectAll: () => void;
+    toggleSelection: (id: string) => void;
+    selectAll: () => void;
+    selectDown: () => void;
+    selectLeft: () => void;
+    selectRange: (id: string) => void;
+    selectRangeDown: () => void;
+    selectRangeLeft: () => void;
+    selectRangeRight: () => void;
+    selectRangeUp: () => void;
+    selectRight: () => void;
+    selectSingle: (id: string) => void;
+    selectSome: (ids: string[]) => void;
+    selectUp: () => void;
+    lastSelectedId: string | undefined;
+    selectedIds: Selected;
+};
+
 /**
  * A helper hook for a building a simple state machine. Useful for togglable popper-based components such as menus.
  *
@@ -2001,8 +2302,8 @@ declare const useToggle: (initValue?: boolean) => {
  * @returns ref setters
  */
 declare const useScaleDown: (originalWidth?: number, originalHeight?: number, enabled?: boolean) => {
-    setSrcElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-    setTargetElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    setSrcElement: React$1.Dispatch<React$1.SetStateAction<HTMLElement | null>>;
+    setTargetElement: React$1.Dispatch<React$1.SetStateAction<HTMLElement | null>>;
 };
 
 interface XYCoord {
@@ -2179,12 +2480,12 @@ declare namespace validators_d {
   };
 }
 
-declare const ViewDialog: React.FC<Props$h>;
-interface Props$h {
+declare const ViewDialog: React$1.FC<Props$S>;
+interface Props$S {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Label of close button.
      */
@@ -2237,14 +2538,18 @@ interface Props$h {
      * Initial width of dialog window.
      */
     width: number | string;
+    /**
+     * Label of the root dialog element.
+     */
+    label?: string;
 }
 
-declare const UIProvider: React.FC<Props$g>;
-interface Props$g {
+declare const UIProvider: React$1.FC<Props$R>;
+interface Props$R {
     /**
      * Main content.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Initial navbar mode.
      */
@@ -2264,51 +2569,107 @@ interface Props$g {
     /**
      * Dialog mode options.
      */
-    dialog?: Omit<Props$h, 'children'>;
+    dialog?: Omit<Props$S, 'children'>;
     /**
      * Name of selected theme.
      */
     theme?: string;
+    /**
+     * Aria label to set on root element.
+     */
+    label?: string;
 }
 
-declare const View: React.ForwardRefExoticComponent<Props$f & React.RefAttributes<HTMLDivElement>>;
-interface Props$f {
+declare const View: React$1.FC<Props$Q>;
+interface Props$Q {
     /**
-     * Main content of the component.
+     * Sets component's children.
      */
-    children: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
-     * Indicates if content's area is active.
+     * Indicates whether view contains side content.
      */
-    isContentActive?: boolean;
+    sideContent?: boolean;
+}
+
+declare const ViewContent: React$1.ForwardRefExoticComponent<Props$P & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$P {
     /**
-     * Sets component's topbar.
+     * Sets component's children.
      */
-    topbar?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
-     * Sets component's bottombar.
+     * Indicates if content's area is active.
      */
-    bottombar?: React.ReactNode;
+    active?: boolean;
     /**
      * Sets content `mousedown` event handler.
      */
-    onContentMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseDown?: React$1.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Sets content `keydown` event handler.
+     */
+    onKeyDown?: React$1.KeyboardEventHandler;
+    /**
+     * Indicates if content contains bar.
+     */
+    contentBar?: boolean;
 }
 
-declare const ViewWrapper: React.FC<Props$e>;
-interface Props$e {
+declare const ViewContentBar: React$1.FC<Props$O>;
+interface Props$O {
+    /**
+     * Sets component's children.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const ViewFooter: React$1.FC<Props$N>;
+interface Props$N {
+    /**
+     * Sets component's children.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const ViewHeader: React$1.FC<Props$M>;
+interface Props$M {
+    /**
+     * Sets component's children.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const ViewSideContent: React$1.FC<Props$L>;
+interface Props$L {
+    /**
+     * Sets component's children.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const ViewContentWrapper: React$1.FC<Props$K>;
+interface Props$K {
+    /**
+     * Sets component's children.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const ViewWrapper: React$1.FC<Props$J>;
+interface Props$J {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Sets navbar.
      */
-    navbar?: React.ReactNode;
+    navbar?: React$1.ReactNode;
 }
 
-declare const RangeSlider: React.FC<Props$d>;
-declare type Props$d = {
+declare const RangeSlider: React$1.FC<Props$I>;
+declare type Props$I = {
     /**
      * Toggles animation, e.g. width transition.
      */
@@ -2349,12 +2710,12 @@ declare type Props$d = {
     showLabels?: boolean;
 };
 
-declare const FormFeedback: React.FC<Props$c>;
-declare type Props$c = {
+declare const FormFeedback: React$1.FC<Props$H>;
+declare type Props$H = {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Feedback error.
      */
@@ -2365,24 +2726,40 @@ declare type Props$c = {
     warning?: boolean;
 };
 
-declare const FormGroup: React.FC<Props$b>;
-interface Props$b {
+declare const FormGroup: React$1.FC<Props$G>;
+interface Props$G {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Applies offset.
      */
     offset?: 'base' | 'md';
 }
 
-declare const FormInputLabel: React.FC<Props$a>;
-declare type Props$a = {
+declare const FormGroupColumn: React$1.FC<Props$F>;
+interface Props$F {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
+}
+
+declare const FormGroupInfo: React$1.FC<Props$E>;
+interface Props$E {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const FormInputLabel: React$1.FC<Props$D>;
+declare type Props$D = {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
     /**
      * Input id.
      */
@@ -2393,12 +2770,12 @@ declare type Props$a = {
     hidden?: boolean;
 };
 
-declare const Form: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLFormElement>>;
-declare type Props$9 = {
+declare const Form: React$1.ForwardRefExoticComponent<Props$C & React$1.RefAttributes<HTMLFormElement>>;
+declare type Props$C = {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Form class.
      */
@@ -2410,31 +2787,43 @@ declare type Props$9 = {
     /**
      * Form submit callback.
      */
-    onSubmit: React.FormEventHandler<HTMLFormElement>;
+    onSubmit: React$1.FormEventHandler<HTMLFormElement>;
 };
 
-declare const EmptyView: React.ForwardRefExoticComponent<Props$8 & React.RefAttributes<HTMLDivElement>>;
-interface Props$8 {
+declare const EmptyViewLabel: React$1.FC<Props$B>;
+interface Props$B {
+    /**
+     * Main content of the component.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Adds styling for muted label.
+     */
+    muted?: boolean;
+}
+
+declare const EmptyView: React$1.ForwardRefExoticComponent<Props$A & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$A {
     /**
      * Adds active styling.
      */
     active?: boolean;
     /**
-     * Empty view label.
+     * Main content of the component.
      */
-    label: string;
+    children?: React$1.ReactNode;
     /**
      * Empty view icon.
      */
     icon: IconName;
     /**
-     * Empty view action container displayed under icon and label.
+     * Sets styling mode.
      */
-    actionContainer?: React.ReactNode;
+    type?: 'dropzone' | 'default';
 }
 
-declare const FileInputButton: React.ForwardRefExoticComponent<Props$7 & React.RefAttributes<HTMLInputElement>>;
-interface Props$7 extends Omit<Props$14, 'onClick'> {
+declare const FileInputButton: React$1.ForwardRefExoticComponent<Props$z & React$1.RefAttributes<HTMLInputElement>>;
+interface Props$z extends Omit<Props$1N, 'onClick'> {
     /**
      * Unique input's id.
      */
@@ -2442,7 +2831,7 @@ interface Props$7 extends Omit<Props$14, 'onClick'> {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * Input's name to register.
      */
@@ -2450,7 +2839,7 @@ interface Props$7 extends Omit<Props$14, 'onClick'> {
     /**
      * Callback invoked when the value is changed.
      */
-    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    onChange?: (evt: React$1.ChangeEvent<HTMLInputElement>) => Promise<void>;
     /**
      * Input's value.
      */
@@ -2461,106 +2850,292 @@ interface Props$7 extends Omit<Props$14, 'onClick'> {
     accept?: string;
 }
 
-/**
- * Selection rectangle's coordinates.
- * All coordinates are in relation to container's top left corner.
- */
-interface SelectionAreaCoords {
+declare const FilePreviewActions: React$1.FC<Props$y>;
+interface Props$y {
     /**
-     * Selection rectangle's `x` position.
+     * Label of the back button.
      */
-    x: number;
+    backBtnLabel: string;
     /**
-     * Selection rectangle's `y` position.
+     * Main content of the component.
      */
-    y: number;
+    children?: React$1.ReactNode;
     /**
-     * Selection rectangle's width.
+     * Label of the close button.
      */
-    width: number;
+    closeBtnLabel: string;
     /**
-     * Selection rectangle's height.
+     * Text displayed as title in the action bar.
      */
-    height: number;
+    title: string;
 }
 
-declare const SelectionArea: React.FC<Props$6>;
-interface Props$6 {
-    /**
-     * Selection area container.
-     */
-    container?: HTMLDivElement | null;
-    /**
-     * Area selection change handler.
-     */
-    onSelectionChange?: (area: SelectionAreaCoords) => void;
+declare const FilePreviewContent: React$1.ForwardRefExoticComponent<Props$x & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$x {
     /**
-     * Selector for ignoring areas started within passed selector.
+     * Main content of the component.
      */
-    ignoredSelector?: string;
+    children: React$1.ReactNode;
 }
 
-declare const Notifications: React.FC<Props$5>;
-interface Props$5 {
-    /**
-     * Container's position will be adjusted in accordance with provided element's height.
-     */
-    bottomOffsetEl?: HTMLElement | null;
+declare const FilePreviewHoverable: React$1.ForwardRefExoticComponent<Props$w & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$w {
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 
-declare const NotificationDetails: React.FC<Props$4>;
-interface Props$4 {
+declare const FilePreviewNavigationButtons: React$1.FC<Props$v>;
+declare type Side = 'left' | 'right';
+interface Props$v {
     /**
-     * Main content of the component.
+     * Disables button.
      */
-    children: React.ReactNode;
+    disabled?: boolean;
     /**
-     * Label for close button.
+     * Button's aria label.
      */
-    closeLabel?: string;
+    label: string;
     /**
-     * Notification details close callback.
+     * Callback invoked on click.
      */
-    onClose?: () => void;
+    onClick?: () => void;
     /**
-     * Notification title.
+     * Places button on the specified side of the `FilePreview`.
      */
-    title: string;
+    side?: Side;
+}
+
+declare const FilePreviewTooltip: React$1.FC<Props$u>;
+interface Props$u {
     /**
-     * Notification type.
+     * Main content of the tooltip.
      */
-    type: 'success' | 'error' | 'info';
+    children?: React$1.ReactNode;
 }
 
-declare const Notification: React.FC<Props$3>;
-/**
- * `Notification` component is rendered as part of `TransitionGroup` and therefore gets transition props in addition to its regular props.
- */
-declare type Props$3 = Partial<TransitionProps> & {
+declare const FilePreview: React$1.ForwardRefExoticComponent<Props$t & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$t {
     /**
-     * Label for "Close" button.
+     * Main content of the component.
      */
-    closeLabel: string;
+    children: React$1.ReactNode;
     /**
-     * Label for "Close Details" button.
+     * Label of the dialog element.
      */
-    closeDetailsLabel?: string;
+    label?: string;
     /**
-     * Optional notification details.
+     * Callback invoked when file preview is closed.
      */
-    details?: React.ReactNode;
+    onClose?: () => void;
     /**
-     * Notification close callback.
+     * Callback invoked when left arrow is clicked.
      */
-    onClose?: () => void;
+    onLeftArrowDown?: () => void;
     /**
-     * Label for "Open Details" button.
+     * Callback invoked when right arrow is clicked.
      */
-    openDetailsLabel?: string;
+    onRightArrowDown?: () => void;
+    /**
+     * Opens file preview.
+     */
+    open?: boolean;
+}
+
+/**
+ * Selection rectangle's coordinates.
+ * All coordinates are in relation to container's top left corner.
+ */
+interface SelectionAreaCoords {
+    /**
+     * Selection rectangle's `x` position.
+     */
+    x: number;
+    /**
+     * Selection rectangle's `y` position.
+     */
+    y: number;
+    /**
+     * Selection rectangle's width.
+     */
+    width: number;
+    /**
+     * Selection rectangle's height.
+     */
+    height: number;
+}
+
+declare const SelectionArea: React$1.FC<Props$s>;
+interface Props$s {
+    /**
+     * Selection area container.
+     */
+    container?: HTMLDivElement | null;
+    /**
+     * Area selection change handler.
+     */
+    onSelectionChange?: (area: SelectionAreaCoords) => void;
+    /**
+     * Selector for ignoring areas started within passed selector.
+     */
+    ignoredSelector?: string;
+}
+
+interface SelectOption {
+    /**
+     * Unique ID of an option.
+     */
+    id: string;
+    /**
+     * Value displayed for the user.
+     */
+    label: string;
+}
+interface SelectKeyboardNavProps {
+    /**
+     * Listbox element.
+     */
+    listboxEl: HTMLElement | null;
+    /**
+     * Flag indicating if listbox is currently open.
+     */
+    listboxOpen: boolean;
+    /**
+     * Callback that is called whenever listbox opening is requested.
+     */
+    onListboxOpen: () => void;
+    /**
+     * Toggles selection of an option.
+     */
+    onSelectToggle: SelectToggleHandler;
+    /**
+     * List of options to navigate.
+     */
+    options: SelectOption[];
+}
+/**
+ * Toggles selection of a provided option.
+ */
+declare type SelectToggleHandler = (opt: SelectOption) => void;
+/**
+ * Gets next / previous option (for keyboard selection).
+ */
+declare type SelectKeyboardNextIdGetter = (options: SelectOption[], currentIndex: number) => SelectOption | undefined;
+
+declare const Select: React$1.FC<Props$r>;
+interface Props$r {
+    /**
+     * Indicate error in input element.
+     */
+    error?: boolean;
+    /**
+     * ID of the input element.
+     */
+    id?: string;
+    /**
+     * Allows to select multiple options.
+     */
+    multiSelect?: boolean;
+    /**
+     * Callback invoked when component loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback invoked whenever an item is selected or deselected.
+     */
+    onSelectToggle: SelectToggleHandler;
+    /**
+     * Message displayed if listbox is empty.
+     */
+    noOptionsLabel?: string;
+    /**
+     * List of options.
+     */
+    options: SelectOption[];
+    /**
+     * Textual placeholder if there are no options selected.
+     */
+    placeholder?: string;
+    /**
+     * List of selected options.
+     */
+    selected: SelectOption[];
+    /**
+     * Allows to search through options.
+     */
+    searchable?: boolean;
+}
+
+declare const Notifications: React$1.FC<Props$q>;
+interface Props$q {
+    /**
+     * Container's position will be adjusted in accordance with provided element's height.
+     */
+    bottomOffsetEl?: HTMLElement | null;
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Controls if bottom-offset should be applied to notifications container.
+     */
+    offsetBottom?: boolean;
+}
+
+declare const NotificationDetails: React$1.FC<Props$p>;
+interface Props$p {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Label for close button.
+     */
+    closeLabel?: string;
+    /**
+     * Notification details close callback.
+     */
+    onClose?: () => void;
+    /**
+     * Toggles dialog.
+     */
+    open?: boolean;
+    /**
+     * Notification title.
+     */
+    title: string;
+    /**
+     * Notification type.
+     */
+    type: 'success' | 'error' | 'info';
+}
+
+declare const Notification: React$1.FC<Props$o>;
+/**
+ * `Notification` component is rendered as part of `TransitionGroup` and therefore gets transition props in addition to its regular props.
+ */
+declare type Props$o = Partial<TransitionProps> & {
+    /**
+     * Label for "Close" button.
+     */
+    closeLabel: string;
+    /**
+     * Label for "Close Details" button.
+     */
+    closeDetailsLabel?: string;
+    /**
+     * Optional notification details.
+     */
+    details?: React$1.ReactNode;
+    /**
+     * Notification close callback.
+     */
+    onClose?: () => void;
+    /**
+     * Label for "Open Details" button.
+     */
+    openDetailsLabel?: string;
     /**
      * Notification title.
      */
@@ -2571,8 +3146,8 @@ declare type Props$3 = Partial<TransitionProps> & {
     type: 'success' | 'error' | 'info';
 };
 
-declare const CopyableInput: React.FC<Props$2>;
-interface Props$2 {
+declare const CopyableInput: React$1.FC<Props$n>;
+interface Props$n {
     /**
      * Unique input's id.
      */
@@ -2595,8 +3170,8 @@ interface Props$2 {
     labelCopied: string;
 }
 
-declare const CopyButton: React.FC<Props$1>;
-interface Props$1 {
+declare const CopyButton: React$1.FC<Props$m>;
+interface Props$m {
     /**
      * Value to be copied to clipboard.
      */
@@ -2611,12 +3186,380 @@ interface Props$1 {
     labelCopied: string;
 }
 
-declare const Fixed: React.FC<Props>;
-interface Props {
+declare type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare type BreakpointMap = Record<BreakpointKey, number>;
+/**
+ * Encapsulates logic that allows to compare specified breakpoints.
+ * Breakpoint values are treated as equivalent of CSS `min-width` property.
+ * For instance, key `md` with value `900` means that breakpoint `md` is achieved for at least 900px of width.
+ */
+declare class Breakpoints {
+    breakpoints: BreakpointMap;
+    constructor(breakpoints: BreakpointMap);
+    /**
+     * Checks if requested key is lower than reference breakpoint.
+     * Matches [0px, {key}) (`key` exclusive).
+     *
+     * @param key maximum requested breakpoint
+     * @param breakpoint reference breakpoint
+     * @returns flag indicating if requested key is lower than reference breakpoint
+     */
+    down(key: BreakpointKey, breakpoint: BreakpointKey): boolean;
+    /**
+     * Gets matching breakpoint key for the specified width.
+     *
+     * @param width width in px
+     * @returns matching breakpoint key
+     */
+    toKey(width: number): BreakpointKey;
+    /**
+     * Checks if requested key is greater than or equal reference breakpoint.
+     * Matches [{key}, ∞) (`key` inclusive).
+     *
+     * @param key minimum requested key
+     * @param breakpoint reference breakpoint
+     * @returns flag indicating if requested key is greater than or equal reference breakpoint
+     */
+    up(key: BreakpointKey, breakpoint: BreakpointKey): boolean;
+}
+
+interface ContainerQueryContext {
+    /**
+     * Current breakpoint key of the container.
+     */
+    key?: BreakpointKey;
+    /**
+     * Current vertical breakpoint key of the container.
+     */
+    keyVertical?: BreakpointKey;
+    /**
+     * Breakpoint utils.
+     */
+    breakpoints?: Breakpoints;
+}
+declare const ContainerQueryContext: React$1.Context<ContainerQueryContext>;
+declare const useContainerQuery: () => ContainerQueryContext;
+
+declare const ContainerQueryProvider: React$1.FC<Props$l>;
+interface Props$l {
+    /**
+     * Maps breakpoint keys to width values. Each key corresponds to minimum value (in px).
+     */
+    breakpointValues: BreakpointMap;
     /**
      * Main content of the component.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
+    /**
+     * Element used as container.
+     */
+    containerEl?: HTMLElement | null;
+}
+
+declare const ContainerQuery: React$1.FC<Props$k>;
+interface Props$k {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Specifies maximum breakpoint key at which component should be still shown.
+     */
+    down?: BreakpointKey;
+    /**
+     * Specifies minimum breakpoint key starting from which component should be shown.
+     */
+    up?: BreakpointKey;
+}
+
+interface FixedContext {
+    /**
+     * Element used a root for fixed UI components within the context.
+     */
+    rootEl?: HTMLElement | null;
+}
+declare const FixedContext: React$1.Context<FixedContext>;
+declare const useFixedCtx: () => FixedContext;
+
+declare const FixedProvider: React$1.FC<Props$j>;
+interface Props$j {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * By default fixed components will be mounted at main UI root.
+     * Provide a different element to use as a root.
+     */
+    rootEl?: HTMLElement | null;
+}
+
+declare const Fixed: React$1.FC<Props$i>;
+interface Props$i {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const LoadingButton: React$1.ForwardRefExoticComponent<Props$h & React$1.RefAttributes<HTMLButtonElement>>;
+interface Props$h extends Props$1N {
+    /**
+     * Delays loader appearance. Defaults to `true`.
+     */
+    delay?: boolean;
+    /**
+     * Toggles loading state.
+     */
+    loading?: boolean;
+    /**
+     * Positions loader. Defaults to `center`.
+     */
+    loaderPosition?: 'left' | 'center' | 'right';
+}
+
+declare const ListItem: React$1.ForwardRefExoticComponent<Props$g & React$1.RefAttributes<HTMLLIElement>>;
+interface Props$g {
+    /**
+     * Main content of the component.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Placeholder label for the component.
+     */
+    placeholderLabel?: string;
+    /**
+     * Callback invoked when clicking on list item content.
+     */
+    onContentClick?: () => void;
+    /**
+     * Action buttons displayed in list item.
+     */
+    actionButtons?: React$1.ReactNode;
+    /**
+     * List item's class name.
+     */
+    className?: string;
+}
+
+declare const List: React$1.FC<Props$f>;
+interface Props$f {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * List's class name.
+     */
+    className?: string;
+}
+
+declare const SearchDialogActions: React$1.FC<Props$e>;
+interface Props$e {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const SearchDialogContent: React$1.FC<Props$d>;
+interface Props$d {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const SearchDialogFallback: React$1.FC<Props$c>;
+interface Props$c {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const SearchDialogHeader: React$1.FC<Props$b>;
+interface Props$b {
+    /**
+     * Optional action rendered next to close button.
+     */
+    action?: React$1.ReactNode;
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Aria label for the close button.
+     */
+    closeBtnLabel: string;
+    /**
+     * Aria label for the input.
+     */
+    inputLabel: string;
+    /**
+     * Callback invoked when form is submitted.
+     */
+    onSubmit?: React$1.FormEventHandler;
+}
+
+declare const SearchDialogInput: React$1.ForwardRefExoticComponent<Props$a & React$1.RefAttributes<HTMLInputElement>>;
+interface Props$a {
+    /**
+     * Input's name to register.
+     */
+    name?: string;
+    /**
+     * Callback invoked when the blur event is fired.
+     */
+    onBlur?: (evt: React$1.ChangeEvent) => void;
+    /**
+     * Callback invoked when the value is changed.
+     */
+    onChange?: (evt: React$1.ChangeEvent) => void;
+    /**
+     * Callback invoked when the element receives focus.
+     */
+    onFocus?: (evt: React$1.ChangeEvent) => void;
+    /**
+     * Input's placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Input's value.
+     */
+    value?: string;
+}
+
+declare const SearchDialogSection: React$1.FC<Props$9>;
+interface Props$9 {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Header of the section.
+     */
+    header?: string;
+}
+
+declare const SearchDialog: React$1.FC<Props$8>;
+interface Props$8 {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Label of the dialog element.
+     */
+    label?: string;
+    /**
+     * Callback invoked when dialog is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Opens file preview.
+     */
+    open?: boolean;
+}
+
+declare const DrawerActions: React$1.FC<Props$7>;
+interface Props$7 {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const DrawerContent: React$1.FC<Props$6>;
+interface Props$6 {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const DrawerHeader: React$1.FC<Props$5>;
+interface Props$5 {
+    /**
+     * Text displayed as title in the bar.
+     */
+    title: string;
+    /**
+     * Label of the close button.
+     */
+    closeBtnLabel: string;
+}
+
+declare const DrawerSection: React$1.ForwardRefExoticComponent<Props$4 & React$1.RefAttributes<HTMLDivElement>>;
+interface Props$4 {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Fixes section's height.
+     */
+    fixedHeight?: boolean;
+    /**
+     * Centers section's content.
+     */
+    centeredContent?: boolean;
+}
+
+declare const Drawer: React$1.FC<Props$3>;
+interface Props$3 {
+    /**
+     * Main content of the component.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Label of the dialog element.
+     */
+    label?: string;
+    /**
+     * Callback invoked when drawer is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Opens drawer.
+     */
+    open?: boolean;
+    /**
+     * Mounts drawer in a fixed mode. Defaults to `true`.
+     */
+    fixed?: boolean;
+}
+
+declare const SearchResultsBarPhrase: React$1.FC<Props$2>;
+interface Props$2 {
+    /**
+     * Sets the placeholder.
+     */
+    placeholder: string;
+    /**
+     * Sets the search phrase.
+     */
+    searchPhrase: string;
+    /**
+     * Sets the search results total count.
+     */
+    count: number;
+}
+
+declare const SearchResultsBarFilters: React$1.FC<Props$1>;
+interface Props$1 {
+    /**
+     * Sets component's children.
+     */
+    children: React$1.ReactNode;
+}
+
+declare const SearchResultsBar: React$1.FC<Props>;
+interface Props {
+    /**
+     * Sets component's children.
+     */
+    children: React$1.ReactNode;
 }
 
-export { Bottombar, Button, CircularLoader, CopyButton, CopyableInput, Dialog, DialogActions, DialogColumn, DialogFooter, DialogHeader, DialogRow, DialogSection, Dimensions, DocIcon, DocIconName, DragHandler, DraggableOptions, EmptyView, FileInputButton, Fixed, Form, FormFeedback, FormGroup, FormInputLabel, Gallery, GalleryFigure, GalleryItem, Icon, IconColor, IconName, IconRenderProp, IconRenderer, IconSize, Input, Props$S as InputProps, ListDndChildProps, ListDndItem, ListDndItemHookProps, ListDndMoveItem, ListDndOnDragEnd, ListDndSetDraggable, ListDndSetDraggablePartial, Menu, MenuItem, MenuSection, MenuSubSection, Navbar, NavbarItem, Notification, NotificationDetails, Notifications, OnScrollHandler, Overlay, PageChangeCallback, Pagination, PaginationState, Panel, PanelActions, PanelContent, PanelContentProp, PanelDragHandle, PanelList, PanelSkeleton, PanelTitle, Popper, PopperAnchorRef, PopperArrow, PopperOffset, PopperOffsetValue, PopperPlacement, ProgressPanel, PropertiesTable, PropertiesTableRow, RInterval, RangeSlider, ResizeOptions, ResponsiveImage, ScrollCoordsConfig, ScrollOptions, SelectionArea, SelectionAreaCoords, Skeleton, SortButton, SortableDndList, SortableDndListItem, Switch, SwitchInput, SwitchView, Tab, Tabs, Tag, TagInput, TagList, Tooltip, Topbar, TopbarAction, UIContext, UIProvider, Props$g as UIProviderProps, View, ViewDialog, Props$h as ViewDialogProps, ViewWrapper, XYCoord, base64FromBlurHash, clamp, clsx, copyToClipboard, formatTimeDistance, getScrollVectors, getValidChildren, hasOwnProperty, noOp, rInterval, useBatchUpdate, useClickAway, useClipboard, useDeferredUnmount, useDelay, useDownload, useDraggable, useElementVisibility, useFilesDrop, useIsMounted, useIsomorphicLayoutEffect, useItemsOverflow, useListDnd, usePagination, useResettableTimeout, useResize, useResponsiveSizes, useScaleDown, useScroll, useScrollDnd, useToggle, useUIContext, validators_d as validators };
+export { Bottombar, Button, ButtonColor, ButtonSize, ButtonType, CircularLoader, ContainerQuery, ContainerQueryProvider, CopyButton, CopyableInput, Dialog, DialogActions, DialogColumn, DialogFooter, DialogHeader, DialogRow, DialogSection, Dimensions, DocIcon, DocIconName, DragDimensionsHandler, DragHandler, DraggableOptions, DraggableState, Drawer, DrawerActions, DrawerContent, DrawerHeader, DrawerSection, EmptyView, EmptyViewLabel, FileInputButton, FilePreview, FilePreviewActions, FilePreviewContent, FilePreviewHoverable, FilePreviewNavigationButtons as FilePreviewNavButton, FilePreviewTooltip, Fixed, FixedContext, FixedProvider, Form, FormFeedback, FormGroup, FormGroupColumn, FormGroupInfo, FormInputLabel, Gallery, GalleryFigure, GalleryItem, Icon, IconColor, IconName, IconRenderProp, IconRenderer, IconSize, Input, Props$1z as InputProps, List, ListDndChildProps, ListDndItem, ListDndItemHookProps, ListDndMoveItem, ListDndOnDragEnd, ListDndSetDraggable, ListDndSetDraggablePartial, ListItem, LoadingButton, Menu, MenuItem, MenuSection, MenuSubSection, MouseEventButton, Navbar, NavbarButton, NavbarCreditLink, NavbarItem, NavbarItemFixed, Notification, NotificationDetails, Notifications, OnScrollHandler, Overlay, Pagination, Panel, PanelActions, PanelColumn, PanelContent, PanelContentProp, PanelDragHandle, PanelList, PanelListDivider, PanelSide, PanelSkeleton, PanelTitle, Popper, PopperAnchorRef, PopperArrow, PopperContext, PopperOffset, PopperOffsetValue, PopperPlacement, ProgressPanel, PropertiesTable, PropertiesTableRow, RInterval, RangeSlider, ResizeOptions, ResponsiveImage, ScrollCoordsConfig, ScrollOptions, SearchDialog, SearchDialogActions, SearchDialogContent, SearchDialogFallback, SearchDialogHeader, SearchDialogInput, SearchDialogSection, SearchResultsBar, SearchResultsBarFilters, SearchResultsBarPhrase, Select, SelectKeyboardNavProps, SelectKeyboardNextIdGetter, SelectOption, SelectToggleHandler, SelectionArea, SelectionAreaCoords, Skeleton, SortButton, SortableDndList, SortableDndListItem, Switch, SwitchInput, SwitchView, Tab, Tabs, Tag, TagInput, TagLabel, TagList, Tooltip, TooltipIcon, Topbar, TopbarAction, UIContext, UIProvider, Props$R as UIProviderProps, View, ViewContent, ViewContentBar, ViewContentWrapper, ViewDialog, Props$S as ViewDialogProps, ViewFooter, ViewHeader, ViewSideContent, ViewWrapper, XYCoord, base64FromBlurHash, clamp, clsx, copyToClipboard, formatTimeDistance, getKeyHandler, getPixelCountFromImageBlob, getScrollVectors, getStandardDeviation, getValidChildren, hasOwnProperty, matchesCombination, noOp, rInterval, useBatchUpdate, useClickAway, useClipboard, useContainerQuery, useDeferredUnmount, useDelay, useDownload, useDraggable, useElementVisibility, useFilesDrop, useFixedCtx, useGridSelection, useIsMounted, useIsomorphicLayoutEffect, useItemsOverflow, useListDnd, usePopperCtx, useResettableTimeout, useResize, useResponsiveSizes, useScaleDown, useScroll, useScrollDnd, useToggle, useUIContext, validators_d as validators };