@ckbox/components 0.0.2-dev.4 → 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,2612 @@
+/// <reference types="react" />
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ */
+import * as React from 'react';
+import React__default 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 {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Content rendered on the right side of the bar.
+     */
+    sideContent: React.ReactNode;
+    /**
+     * Content rendered as status summary in a absolute left-positioned container
+     */
+    statusContent?: React.ReactNode;
+}
+
+interface Props$16 {
+    /**
+     * Sets root class.
+     */
+    className: string;
+    /**
+     * Callback invoked upon clicking on icon.
+     */
+    onClick?: () => void;
+}
+
+declare const ArrowLeftEnd: React.FC<Props$16>;
+
+declare const ArrowRightEnd: React.FC<Props$16>;
+
+declare const ArrowLeft: React.FC<Props$16>;
+
+declare const ArrowRight: React.FC<Props$16>;
+
+declare const Cabinet: React.FC<Props$16>;
+
+declare const Check: React.FC<Props$16>;
+
+declare const ChevronDown: React.FC<Props$16>;
+
+declare const ChevronLeft: React.FC<Props$16>;
+
+declare const ChevronRight: React.FC<Props$16>;
+
+declare const ClockTwo: React.FC<Props$16>;
+
+declare const Close: React.FC<Props$16>;
+
+declare const Cog: React.FC<Props$16>;
+
+declare const Copy: React.FC<Props$16>;
+
+declare const Docs: React.FC<Props$16>;
+
+declare const DotsVertical: React.FC<Props$16>;
+
+declare const Download: React.FC<Props$16>;
+
+declare const DragHandle: React.FC<Props$16>;
+
+declare const Folder: React.FC<Props$16>;
+
+declare const Image: React.FC<Props$16>;
+
+declare const Info: React.FC<Props$16>;
+
+declare const Pencil: React.FC<Props$16>;
+
+declare const Plus: React.FC<Props$16>;
+
+declare const Settings: React.FC<Props$16>;
+
+declare const Sort: React.FC<Props$16>;
+
+declare const Trash: React.FC<Props$16>;
+
+declare const Upload: React.FC<Props$16>;
+
+declare const Warning: React.FC<Props$16>;
+
+declare const WarningFill: React.FC<Props$16>;
+
+declare const Search: React.FC<Props$16>;
+
+declare const icons$1_ArrowLeftEnd: typeof ArrowLeftEnd;
+declare const icons$1_ArrowRightEnd: typeof ArrowRightEnd;
+declare const icons$1_ArrowLeft: typeof ArrowLeft;
+declare const icons$1_ArrowRight: typeof ArrowRight;
+declare const icons$1_Cabinet: typeof Cabinet;
+declare const icons$1_Check: typeof Check;
+declare const icons$1_ChevronDown: typeof ChevronDown;
+declare const icons$1_ChevronLeft: typeof ChevronLeft;
+declare const icons$1_ChevronRight: typeof ChevronRight;
+declare const icons$1_Close: typeof Close;
+declare const icons$1_Cog: typeof Cog;
+declare const icons$1_Copy: typeof Copy;
+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_Folder: typeof Folder;
+declare const icons$1_Image: typeof Image;
+declare const icons$1_Info: typeof Info;
+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_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 namespace icons$1 {
+  export {
+    icons$1_ArrowLeftEnd as ArrowLeftEnd,
+    icons$1_ArrowRightEnd as ArrowRightEnd,
+    icons$1_ArrowLeft as ArrowLeft,
+    icons$1_ArrowRight as ArrowRight,
+    icons$1_Cabinet as Cabinet,
+    icons$1_Check as Check,
+    icons$1_ChevronDown as ChevronDown,
+    icons$1_ChevronLeft as ChevronLeft,
+    icons$1_ChevronRight as ChevronRight,
+    ClockTwo as Clock,
+    icons$1_Close as Close,
+    icons$1_Cog as Cog,
+    icons$1_Copy as Copy,
+    icons$1_Docs as Docs,
+    icons$1_DotsVertical as DotsVertical,
+    icons$1_Download as Download,
+    icons$1_DragHandle as DragHandle,
+    icons$1_Folder as Folder,
+    icons$1_Image as Image,
+    icons$1_Info as Info,
+    icons$1_Pencil as Pencil,
+    icons$1_Plus as Plus,
+    icons$1_Settings as Settings,
+    icons$1_Sort as Sort,
+    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,
+  };
+}
+
+declare type IconRenderer = (props: {
+    className?: string;
+}) => JSX.Element;
+declare type IconRenderProp = string | IconRenderer;
+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 {
+    /**
+     * Sets root class.
+     */
+    className?: string;
+    /**
+     * Icon color.
+     */
+    color?: IconColor;
+    /**
+     * Name of selected icon.
+     */
+    name?: 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.
+     */
+    render?: IconRenderProp;
+    /**
+     * Icon size.
+     */
+    size?: IconSize;
+}
+
+declare const Button: React.ForwardRefExoticComponent<Props$14 & React.RefAttributes<HTMLButtonElement>>;
+interface Props$14 {
+    /**
+     * Sets root class.
+     */
+    className?: string;
+    /**
+     * Sets color type. Use in combination with `type` to achieve desired styling.
+     */
+    color?: 'action' | 'danger' | 'neutral';
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Displays as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Id of a form element this button is associated with.
+     */
+    form?: string;
+    /**
+     * Sets full-width mode.
+     */
+    fullWidth?: boolean;
+    /**
+     * Button's html type.
+     */
+    htmlType?: 'button' | 'reset' | 'submit';
+    /**
+     * Button's aria label.
+     */
+    label?: string;
+    /**
+     * Sets left-side icon.
+     */
+    icon?: IconName;
+    /**
+     * Icon placement.
+     */
+    iconPlacement?: 'left' | 'right';
+    /**
+     * Sets `click` event handler.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Sets `mouseleave` event handler.
+     */
+    onMouseLeave?: React.MouseEventHandler;
+    /**
+     * Sets styling type. Use in combination with `color` to achieve desired styling.
+     */
+    type?: 'fill' | 'outline' | 'plain';
+    /**
+     * Sets sizing of the button.
+     */
+    sizing?: 'small';
+}
+
+declare const CircularLoader: React.FC<Props$13>;
+interface Props$13 {
+    /**
+     * Component's label.
+     */
+    label?: string;
+    /**
+     * Current value in %.
+     */
+    value: number;
+    /**
+     * Displays error icon.
+     */
+    error?: boolean;
+    /**
+     * Callback invoked upon click event.
+     */
+    onClick?: () => void;
+}
+
+declare const DialogActions: React.FC<Props$12>;
+interface Props$12 {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+
+declare const DialogColumn: React.ForwardRefExoticComponent<Props$11 & React.RefAttributes<HTMLDivElement>>;
+interface Props$11 extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Allows its content to overflow.
+     */
+    overflow?: boolean;
+}
+
+declare const DialogFooter: React.FC<Props$10>;
+interface Props$10 {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Content placed on a right-side of the footer.
+     */
+    sideContent?: {
+        label: React.ReactNode;
+        error?: boolean;
+        warning?: boolean;
+        onClick?: () => void;
+    }[];
+}
+
+declare const DialogHeader: React.FC<Props$$>;
+interface Props$$ {
+    /**
+     * Sets focus on close button on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * Close button's label.
+     */
+    closeLabel?: string;
+    /**
+     * Indicates that progress is ongoing.
+     */
+    inProgress?: boolean;
+    /**
+     * Turns on progress in header.
+     */
+    progress?: boolean;
+    /**
+     * Progress value. Works only if `progress` is enabled.
+     */
+    progressValue?: number;
+    /**
+     * Secondary title.
+     */
+    subTitle?: React.ReactNode;
+    /**
+     * Dialog title.
+     */
+    title?: string;
+    /**
+     * Dialog title size.
+     */
+    titleSize?: 'sm' | 'md';
+    /**
+     * Dialog header type.
+     */
+    type?: 'success' | 'error' | 'info';
+}
+
+declare const DialogRow: React.FC<Props$_>;
+interface Props$_ extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+
+declare const DialogSection: React.FC<Props$Z>;
+interface Props$Z {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Removes top spacing.
+     */
+    collapse?: boolean;
+    /**
+     * Makes component full height of its container.
+     */
+    fullHeight?: boolean;
+    /**
+     * Turns on accent background color.
+     */
+    accent?: boolean;
+    /**
+     * Toggles content spacing.
+     */
+    spacing?: boolean;
+    /**
+     * Accepts ref.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Shows content as an error.
+     */
+    error?: boolean;
+    /**
+     * Shows content as a header.
+     */
+    header?: boolean;
+}
+
+declare const Dialog: React.FC<Props$Y>;
+interface Props$Y {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Sets dialog as draggable.
+     */
+    draggable?: boolean;
+    /**
+     * Callback invoked when dialog is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Callback invoked on dragging the dialog (if it's `draggable`).
+     * Consider throttling the callback invocation.
+     */
+    onDrag?: () => void;
+    /**
+     * Sets dialog size.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Sets dialog height.
+     */
+    height?: 'md';
+    /**
+     * Enables dialog `modal` mode.
+     */
+    modal?: boolean;
+}
+
+interface Props$X {
+    /**
+     * Sets root class.
+     */
+    className: string;
+}
+
+declare const Zip: React.FC<Props$X>;
+
+declare const Empty: React.FC<Props$X>;
+
+declare const Excel: React.FC<Props$X>;
+
+declare const Img: React.FC<Props$X>;
+
+declare const Movie: React.FC<Props$X>;
+
+declare const Music: React.FC<Props$X>;
+
+declare const Pdf: React.FC<Props$X>;
+
+declare const Ppt: React.FC<Props$X>;
+
+declare const Txt: React.FC<Props$X>;
+
+declare const Word: React.FC<Props$X>;
+
+declare const icons_Empty: typeof Empty;
+declare const icons_Excel: typeof Excel;
+declare const icons_Img: typeof Img;
+declare const icons_Movie: typeof Movie;
+declare const icons_Music: typeof Music;
+declare const icons_Pdf: typeof Pdf;
+declare const icons_Ppt: typeof Ppt;
+declare const icons_Txt: typeof Txt;
+declare const icons_Word: typeof Word;
+declare namespace icons {
+  export {
+    Zip as Archive,
+    icons_Empty as Empty,
+    icons_Excel as Excel,
+    icons_Img as Img,
+    icons_Movie as Movie,
+    icons_Music as Music,
+    icons_Pdf as Pdf,
+    icons_Ppt as Ppt,
+    icons_Txt as Txt,
+    icons_Word as Word,
+  };
+}
+
+declare const DocIcon: React.FC<Props$W>;
+declare type DocIconName = keyof typeof icons;
+interface Props$W {
+    /**
+     * Name of selected icon.
+     */
+    name: DocIconName;
+}
+
+declare const GalleryFigure: React.FC<Props$V>;
+interface Props$V {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Figure caption.
+     */
+    caption: string;
+}
+
+declare const GalleryItem: React.ForwardRefExoticComponent<Props$U & React.RefAttributes<HTMLDivElement>>;
+interface Props$U {
+    /**
+     * Sets item as active.
+     */
+    active?: boolean;
+    /**
+     * Toggles loading.
+     */
+    loading?: boolean;
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Item name.
+     */
+    name: string;
+    /**
+     * Sets `mousedown` event handler.
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Sets `keydown` event handler.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+
+declare const Gallery: React.FC<Props$T>;
+interface Props$T {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Represents zoom value. Pass value in range 0 .. 1.
+     */
+    zoom?: number;
+    /**
+     * Controls element facusability.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * 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 {
+    /**
+     * Input's class name.
+     */
+    className?: string;
+    /**
+     * Marks input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Marks input as read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Unique input's id.
+     */
+    id: string;
+    /**
+     * Uses `textarea` instead of `input`.
+     */
+    multiline?: boolean;
+    /**
+     * Input's name to register.
+     */
+    name?: string;
+    /**
+     * Callback invoked when the blur event is fired.
+     */
+    onBlur?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Callback invoked when the value is changed.
+     */
+    onChange?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Callback invoked when the element receives focus.
+     */
+    onFocus?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Callback invoked when the element is clicked.
+     */
+    onClick?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Input's type.
+     */
+    type?: 'text' | 'number' | 'url' | 'email';
+    /**
+     * Input's placeholder text value.
+     */
+    placeholder?: string;
+    /**
+     * Input's value.
+     */
+    value?: string;
+    /**
+     * Input's ref object.
+     */
+    ref?: React.Ref<any>;
+    /**
+     * Sizing variant.
+     */
+    size?: 'base' | 'md';
+    /**
+     * Indicate error in input element.
+     */
+    error?: boolean;
+    /**
+     * Number input's min value.
+     */
+    min?: string | number;
+    /**
+     * Number input's max value.
+     */
+    max?: string | number;
+    /**
+     * Input's label.
+     */
+    label?: string;
+    /**
+     * Styling variant.
+     */
+    variant?: 'default' | 'underline';
+}
+
+declare const MenuItem: React.FC<Props$R>;
+interface Props$R {
+    /**
+     * Associated icon.
+     */
+    icon?: IconName;
+    /**
+     * Icon size.
+     */
+    iconSize?: IconSize;
+    /**
+     * Action label.
+     */
+    label: string;
+    /**
+     * Action invoked upon click.
+     */
+    onClick?: () => void;
+    /**
+     * Displays as disabled.
+     */
+    disabled?: boolean;
+}
+
+declare const MenuSubSection: React.FC<Props$Q>;
+interface Props$Q {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Indicates how content and title should be aligned.
+     */
+    align?: 'column' | 'row';
+    /**
+     * Indicates how children should be aligned.
+     */
+    alignChildren?: 'column' | 'row';
+    /**
+     * Display title as label.
+     */
+    label?: boolean;
+    /**
+     * Sets `for` attribute if title is displayed as label.
+     */
+    labelFor?: string;
+    /**
+     * Title of the subsection.
+     */
+    title: string;
+}
+
+declare const MenuSection: React.FC<Props$P>;
+interface Props$P {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Adds bottom border.
+     */
+    borderBottom?: boolean;
+    /**
+     * Title of the section.
+     */
+    title: string;
+}
+
+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 {
+    /**
+     * Sets arrow size.
+     */
+    size?: 'sm' | 'md';
+}
+
+declare const Popper: React__default.ForwardRefExoticComponent<Props$N & React__default.RefAttributes<HTMLDivElement>>;
+interface Props$N {
+    /**
+     * Anchor element. Popper will be mounted to this element.
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Popper content.
+     */
+    children: React__default.ReactNode;
+    /**
+     * Class name that will be applied to popper content-wrapper.
+     */
+    className?: string;
+    /**
+     * Disables popper auto-flip.
+     */
+    disableFlip?: boolean;
+    /**
+     * Popper placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Displacement from its reference element.
+     */
+    offset?: PopperOffset;
+    /**
+     * Aria role.
+     */
+    role?: React__default.AriaRole;
+    /**
+     * Makes popper same width as its anchor.
+     */
+    sameWidth?: boolean;
+}
+
+declare const Menu: React.FC<Props$M>;
+interface Props$M {
+    /**
+     * Anchor element.
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Shows an arrow pointing to the anchor element.
+     */
+    arrow?: boolean;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Offsets popper element.
+     */
+    offset?: PopperOffset;
+    /**
+     * Callback invoked when component is about to close.
+     */
+    onClose?: () => void;
+    /**
+     * Menu popper's placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Makes menu same width as its anchor.
+     */
+    sameWidth?: boolean;
+    /**
+     * Toggles vertical spacing around content.
+     */
+    spacing?: boolean;
+}
+
+declare const NavbarItem: React.FC<Props$L>;
+interface Props$L {
+    /**
+     * Applies active styling.
+     */
+    active?: boolean;
+    /**
+     * Toggles icon animation.
+     */
+    animateIcon?: boolean;
+    /**
+     * Marks item as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Separator for the special element.
+     */
+    separated?: boolean;
+    /**
+     * Fixing the element to bottom of the navbar.
+     */
+    bottomFixed?: boolean;
+    /**
+     * Displayed icon.
+     */
+    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;
+    /**
+     * Displayed label.
+     */
+    label: string;
+    /**
+     * Toggles loader.
+     */
+    loading?: boolean;
+    /**
+     * Optional click handler.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+declare const Navbar: React.FC<Props$K>;
+interface Props$K {
+    /**
+     * Labels navigation element.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+
+declare const Overlay: React.FC<Props$J>;
+interface Props$J {
+    /**
+     * Optional children.
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback invoked upon clicking on the overlay.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Color variant.
+     */
+    variant?: 'transparent' | 'dark';
+}
+
+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;
+    /**
+     * Toggles loading effect for the toolbar.
+     */
+    toolbarLoading?: boolean;
+}
+
+declare const PanelActions: React.FC<Props$H>;
+interface Props$H {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+}
+
+declare const PanelContent: React.ForwardRefExoticComponent<Props$G & React.RefAttributes<HTMLDivElement>>;
+interface Props$G {
+    /**
+     * Main content of the component.
+     */
+    children?: React.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;
+    /**
+     * Optional header in edit mode.
+     */
+    editHeader?: string;
+    /**
+     * Optional header in non-edit mode.
+     */
+    header?: string;
+}
+
+declare const PanelContentProp: React.FC<Props$F>;
+interface Props$F {
+    /**
+     * Property label.
+     */
+    label: string;
+    /**
+     * Property value.
+     */
+    value: string;
+}
+
+declare const PanelDragHandle: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
+
+declare const PanelSkeleton: React.FC<Props$E>;
+interface Props$E {
+    /**
+     * Number of loading blocks.
+     */
+    blocks?: number;
+    /**
+     * Relative size of a loading block.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+
+declare const PanelTitle: React.ForwardRefExoticComponent<Props$D & React.RefAttributes<HTMLDivElement>>;
+interface Props$D extends Omit<Props$G, 'children'> {
+    /**
+     * Panel's title.
+     */
+    title: string;
+    /**
+     * Panel's description.
+     */
+    description?: string;
+    /**
+     * Tooltip for panel's description.
+     */
+    descriptionTooltip?: string;
+}
+
+interface ListDndItem {
+    /**
+     * Unique id of a dnd item.
+     */
+    id: string;
+    /**
+     * Indicates if an item can be dragged.
+     */
+    isDraggable?: boolean;
+}
+interface ListDndItemHookProps extends ListDndItem {
+    /**
+     * Drag handle element.
+     */
+    dragHandle?: HTMLElement | null;
+    /**
+     * Current index of a drag item.
+     */
+    index: number;
+    /**
+     * Item root element.
+     */
+    itemRoot?: HTMLElement | null;
+}
+declare type ListDndMoveItem = (dragIndex: number, hoverIndex: number) => void;
+declare type ListDndSetDraggable = (id: string) => ListDndSetDraggablePartial;
+declare type ListDndSetDraggablePartial = (isDraggable: boolean) => void;
+declare type ListDndOnDragEnd = () => void;
+/**
+ * List of props that a child of `SortableListItem` receives.
+ * This type is intended to be used by components that want to be aware that they are dragged.
+ */
+interface ListDndChildProps {
+    /**
+     * Indicates if an item is in preview mode.
+     */
+    isPreview?: boolean;
+    /**
+     * Indicates if an item is being dragged.
+     */
+    isDragging?: boolean;
+    /**
+     * Indicates if an item is draggable.
+     */
+    isDraggable?: boolean;
+    /**
+     * Drag handle setter. Use it to separate drag handle from a preview.
+     */
+    setDragHandle?: (el: HTMLElement | null) => void;
+    /**
+     * Sets root item.
+     *
+     * In some scenarios, drag handle might be located inside an item.
+     * In such cases, item root.
+     */
+    setItemRoot?: (el: HTMLElement | null) => void;
+    /**
+     * Marks item as draggable / non-draggable.
+     */
+    setDraggable?: ListDndSetDraggablePartial;
+}
+
+/**
+ * Top-level hook that manages list state.
+ *
+ * @param initItems initial list items
+ * @returns list info
+ */
+declare const useListDnd: (initItems: ListDndItem[]) => {
+    items: ListDndItem[];
+    moveItem: ListDndMoveItem;
+    setItems: React.Dispatch<React.SetStateAction<ListDndItem[]>>;
+    setDraggable: ListDndSetDraggable;
+};
+
+declare const SortableDndListItem: React.FC<Props$C>;
+interface Props$C {
+    /**
+     * Current item's index in a list.
+     */
+    index: number;
+    /**
+     * Item's id.
+     */
+    id: string;
+    /**
+     * Indicates if item is draggable.
+     */
+    isDraggable?: boolean;
+    /**
+     * Indicates if item is currently in preview mode.
+     */
+    isPreview?: boolean;
+    /**
+     * Accepts a single child.
+     */
+    children: React.ReactChild;
+}
+
+interface SortableDndListContextShape {
+    /**
+     * Callback that performs list reordering.
+     */
+    moveItem: ListDndMoveItem;
+    /**
+     * Marks item as draggable / non-draggable.
+     */
+    setDraggable: ListDndSetDraggable;
+    /**
+     * Item type. Same value must be provided for all list items.
+     */
+    type: string;
+    /**
+     * Optional callback invoked when drag is over.
+     */
+    onDragEnd?: ListDndOnDragEnd;
+}
+
+declare const SortableDndList: React.FC<Props$B>;
+interface Props$B extends SortableDndListContextShape {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Container element to scroll while dragging.
+     */
+    scrollableContainer?: HTMLElement | null;
+}
+
+interface PanelContextShape extends Partial<ListDndChildProps> {
+    /**
+     * Toggles `edit` mode.
+     */
+    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;
+    /**
+     * 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>;
+    /**
+     * Toggles component opacity.
+     */
+    opaque?: boolean;
+    /**
+     * Toggles component's `elevated` mode.
+     */
+    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 {
+    /**
+     * Disables interaction with pagination.
+     */
+    disabled?: boolean;
+    /**
+     * Aria label for input element.
+     */
+    enterPageLabel: string;
+    /**
+     * Total number of pages.
+     */
+    totalPages: number;
+    /**
+     * Label indicating total number of pages.
+     */
+    totalPagesLabel: string;
+    /**
+     * Currently selected page.
+     */
+    page: number;
+}
+
+declare const ProgressPanel: React.ForwardRefExoticComponent<Props$y & React.RefAttributes<HTMLDivElement>>;
+interface Props$y {
+    /**
+     * Additional info rendered close to a title.
+     */
+    additionalInfo?: React.ReactNode;
+    /**
+     * Applies error styling.
+     */
+    error?: boolean;
+    /**
+     * Applies warning styling.
+     */
+    warning?: boolean;
+    /**
+     * Applies full progress styling.
+     */
+    completed?: boolean;
+    /**
+     * Help text displayed below the bar.
+     */
+    helpText?: React.ReactNode;
+    /**
+     * Unique identifier of a panel.
+     */
+    id: string;
+    /**
+     * Panel title.
+     */
+    title: string;
+    /**
+     * Current progress value in %.
+     */
+    value: number;
+}
+
+declare const PropertiesTableRow: React.FC<Props$x>;
+interface Props$x {
+    /**
+     * Item's label.
+     */
+    label: string;
+    /**
+     * Item's value.
+     */
+    value: React.ReactNode;
+}
+
+declare const PropertiesTable: React.FC<Props$w>;
+interface Props$w {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Adds aria-role for `label` column
+     */
+    labelColAriaLabel?: string;
+    /**
+     * Adds aria-role for `value` column
+     */
+    valueColAriaLabel?: string;
+}
+
+/**
+ * The `ResponsiveImage` component is responsible for displaying images in a responsive manner.
+ *
+ * Noteworthy, it is impossible to use a purely native approach based on `img`'s attributes such as `srcset` and `sizes`,
+ * since those require media queries to be defined upfront. It is not guaranteed that `ResponsiveImage` component will be used in a manner
+ * that allows for media queries to be defined at all. Most likely, the component will be used in a fluid environment
+ * in which size of the image's container changes frequently.
+ *
+ * Therefore, a hybrid approach is used. Native `srcset` and `sizes` attributes are used in combination with a mechanism that
+ * updates `sizes` attribute under the hood based on current size of the image's container and a list of available breakpoints.
+ * As soon as a fitting breakpoint value is found, it gets assigned to `sizes` attribute. From that moment onwards,
+ * the browser takes over and its native features are used to ensure responsiveness and related features:
+ *
+ * 1. Art direction is possible to achieve via `srcSet` prop. Therefore, different images can be displayed based on current display size.
+ *
+ * 2. Various image formats can be passed within `srcSet`. The browser will choose the first one supported.
+ * For instance, `webp` sources can be supplied via `srcSet.optional` prop and browsers supporting `webp` format will default to that.
+ *
+ * 3. The `sizes` attribute is leveraged to force the browser to choose the most suitable source.
+ * The `sizes` attribtue is set internally by the component in the form of `${ breakpoint }px` value.
+ *
+ * The images are loaded lazily. A visibility check is used to ensure that only images visible within a given container will be loaded.
+ * 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 {
+    /**
+     * Image's description.
+     *
+     * Used for accessibilty purposes and in case of image loading errors.
+     */
+    alt: string;
+    /**
+     * Original image's blurhash. Blurhash will be decoded under the hood into base64.
+     *
+     * It will be displayed as long as image is being loaded.
+     */
+    blurHash?: string;
+    /**
+     * List of available image widths.
+     */
+    breakpoints: number[];
+    /**
+     * Reference to a scrollable container that contains the image.
+     *
+     * It is used to detect image's visibility.
+     */
+    container?: HTMLDivElement | null;
+    /**
+     * Maps breakpoint value to a flag indicating if it is possible to display thumbnail as a cover for that breakpoint.
+     */
+    cover?: Record<number, boolean>;
+    /**
+     * Original image's height.
+     */
+    height?: number;
+    /**
+     * Available sources for the image.
+     */
+    srcSet: {
+        /**
+         * Optional source.
+         */
+        optional?: string[];
+        /**
+         * Required default source.
+         */
+        default: string[];
+    };
+    /**
+     * Optional sources' mime type.
+     */
+    optionalSrcMimeType?: string;
+    /**
+     * Original image's width.
+     */
+    width?: number;
+    /**
+     * Callback invoked when a resource failed to load, or can't be used.
+     */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+}
+
+declare const Skeleton: React.FC<Props$u>;
+interface Props$u {
+    /**
+     * Optional class name. It overrides class responsible for background color.
+     */
+    className?: string;
+    /**
+     * Specifies component height.
+     */
+    height?: string;
+    /**
+     * Specifies component width.
+     */
+    width?: string;
+}
+
+declare const SortButton: React.FC<Props$t>;
+interface Props$t {
+    /**
+     * Button's aria label.
+     */
+    label?: string;
+    /**
+     * Tooltip displayed on hover.
+     */
+    tooltip: string;
+    /**
+     * Order indicated on button's icon.
+     */
+    order: 'asc' | 'desc';
+    /**
+     * Sets `click` event handler.
+     */
+    onClick?: () => void;
+}
+
+declare const SwitchView: React.FC<Props$s>;
+interface Props$s {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * View id.
+     */
+    id: string;
+}
+
+declare const Switch: React.FC<Props$r>;
+interface Props$r {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * View id to match.
+     */
+    match?: string;
+}
+
+declare const SwitchInput: React.FC<Props$q>;
+interface Props$q {
+    /**
+     * Sets current input's value.
+     */
+    checked: boolean;
+    /**
+     * Underlying input's id.
+     */
+    id: string;
+    /**
+     * Underlying input's name.
+     */
+    name: string;
+    /**
+     * Callback invoked upon value's change.
+     */
+    onChange: (checked: boolean) => void;
+}
+
+declare const TagList: React.FC<Props$p>;
+interface Props$p {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional root class name.
+     */
+    className?: string;
+}
+
+declare const Tag: React.ForwardRefExoticComponent<Props$o & React.RefAttributes<HTMLDivElement>>;
+interface Props$o {
+    /**
+     * Emphasizes tag content.
+     */
+    bold?: boolean;
+    /**
+     * Tag's label.
+     */
+    label: string;
+    /**
+     * Callback invoked upon clicking on remove icon.
+     */
+    onRemove?: () => void;
+    /**
+     * Sets tag as removable.
+     */
+    removable?: boolean;
+    /**
+     * Label associated with remove button.
+     */
+    removeLabel?: string;
+}
+
+declare const TagInput: React.FC<Props$n>;
+interface Props$n {
+    /**
+     * Input's class name.
+     */
+    className?: string;
+    /**
+     * Label displayed in the popup when hovering over copy button.
+     */
+    copyBtnLabel: string;
+    /**
+     * Label displayed in the popup upon clicking on the copy button.
+     */
+    copyBtnLabelCopied: string;
+    /**
+     * Input field id.
+     */
+    id: string;
+    /**
+     * Callback invoked when component gains focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Callback invoked when component loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback invoked when tags change.
+     */
+    onChange: (tags: string[]) => void;
+    /**
+     * Input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Indicate error in input element.
+     */
+    error?: boolean;
+    /**
+     * List of tags to render.
+     */
+    tags: {
+        label: string;
+        bold?: boolean;
+        removeLabel?: string;
+        title?: string;
+    }[];
+}
+
+declare const Tab: React.FC<Props$m>;
+interface Props$m {
+    /**
+     * Main content.
+     */
+    children: React.ReactNode;
+    /**
+     * Tab id.
+     */
+    id: string;
+    /**
+     * Tab label.
+     */
+    label: string;
+}
+
+declare const Tabs: React.FC<Props$l>;
+interface Props$l {
+    /**
+     * Currently selected tab.
+     */
+    activeTab: string;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback invoked upon selecting a tab.
+     */
+    onTabSelect?: (tab: string) => void;
+}
+
+declare const Tooltip: React.FC<Props$k>;
+interface Props$k {
+    /**
+     * Main content of the component.
+     * It must be a single child that accepts `ref`.
+     */
+    children: React.ReactChild;
+    /**
+     * Delay before displaying the tooltip.
+     */
+    delay?: number;
+    /**
+     * Tooltip placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Tooltip helper text.
+     */
+    title: string;
+}
+
+/**
+ * `TopbarAction` component acts as a props carrier only.
+ */
+declare const TopbarAction: React.FC<Props$j>;
+interface Props$j {
+    /**
+     * Associated icon.
+     */
+    icon: IconName;
+    /**
+     * Icon size.
+     */
+    iconSize?: IconSize;
+    /**
+     * Action label.
+     */
+    label: string;
+    /**
+     * Displays as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Action invoked upon click.
+     */
+    onClick?: () => void;
+    /**
+     * Download action URL.
+     */
+    downloadUrl?: string;
+}
+
+declare const Topbar: React.FC<Props$i>;
+interface Props$i {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Content rendered on the right side of the bar.
+     */
+    sideContent: React.ReactNode;
+}
+
+interface UIContext {
+    /**
+     * Represents UI's root element.
+     */
+    rootEl: HTMLDivElement | null;
+    /**
+     * Holds info about animation duration (in ms).
+     *
+     * Note that these values are extracted from CSS variables.
+     * Therefore, CSS variables act here as the single source of truth.
+     */
+    animationDuration: {
+        primary: number;
+        secondary: number;
+    };
+    /**
+     * Indicates if navbar should be collapsed.
+     */
+    navbarCollapsed?: boolean;
+    /**
+     * Initial navbar width.
+     */
+    navbarWidth?: number;
+    /**
+     * Callback invoked whenever navbar is collapsed.
+     */
+    onNavbarCollapse: (collapsed: boolean) => void;
+    /**
+     * Callback invoked whenever navbar width changes.
+     */
+    onNavbarWidthChange: (width: number) => void;
+}
+/**
+ * Defines React context for i18n and sets defaults.
+ */
+declare const UIContext: React.Context<UIContext>;
+declare const useUIContext: () => UIContext;
+
+/**
+ * Generates base64-encoded image from its `blurhash` representation.
+ *
+ * @param hash blurhash representation of an image
+ * @returns base64-encoded image
+ */
+declare const base64FromBlurHash: (hash?: string) => string;
+
+/**
+ * Given preferred value and optional edge values,
+ * chooses the one that is most suitable:
+ *
+ * - min value if preferred value is below min
+ * - max value if preferred value is above max
+ * - preferred value otherwise
+ *
+ * @param val preferred value
+ * @param min optional minimum value
+ * @param max optional maximum value
+ * @returns chosen value
+ */
+declare const clamp: (val: number, min?: number, max?: number) => number;
+
+declare const copyToClipboard: (text: string) => Promise<void>;
+
+/**
+ * Filters off falsey values and concatenates list of classes.
+ *
+ * @param classes list of classes / falsey values
+ * @returns classes
+ */
+declare const clsx: (...classes: (string | undefined | null | number | boolean)[]) => string;
+
+/**
+ * Given time distance in s, formats it by rounding to nearest time unit in accordance with predefined buckets.
+ *
+ * @param t time left (in s)
+ */
+declare const formatTimeDistance: (t: number) => {
+    h: number;
+    m: number;
+    s: number;
+};
+
+declare const getValidChildren: <ChildProps>(children: React.ReactNode) => React.ReactElement<ChildProps, string | React.JSXElementConstructor<any>>[];
+
+/**
+ * Shorthand for recommended use of hasOwnProperty (see https://eslint.org/docs/rules/no-prototype-builtins).
+ *
+ * @param object checked object
+ * @param propertyKey property key to check
+ */
+declare const hasOwnProperty: (object: Record<string, unknown>, propertyKey: string) => boolean;
+
+declare const noOp: () => void;
+
+interface RInterval {
+    clear: () => void;
+}
+
+/**
+ * Allows to use `requestAnimationFrame` in a manner similar to `setInterval`.
+ * It should be used for animations instead of `setTimeout` and `setInterval`.
+ *
+ * @param callback callback invoked within a fram
+ * @param delay optional callback invocation delay
+ * @returns interval utils
+ */
+declare const rInterval: (callback: () => void, delay?: number) => RInterval;
+
+interface BatchUpdatePayload {
+    /**
+     * Id of an update group. Each update group is registered under the provided `id` as key.
+     */
+    id: string;
+}
+interface BatchUpdateBatch<Payload> {
+    /**
+     * Holds latest update for each update group.
+     */
+    data: Record<string, Payload>;
+    /**
+     * Total number of updates that happened during specified interval.
+     */
+    count: number;
+}
+
+/**
+ * Batches updates and releases them in specified intervals.
+ * Accumulates total number of updates that happened within a batch.
+ *
+ * This hook is useful for grouping high frequency updates into a single batch,
+ * so that downstream updates do not happen too often.
+ *
+ * @param updateCb callback that receives current batch in specified intervals
+ * @param batchUpdateInterval instructs how often batch is released
+ * @returns actions and batch
+ */
+declare const useBatchUpdate: <Payload extends BatchUpdatePayload>(updateCb: (batch: BatchUpdateBatch<Payload>) => void, batchUpdateInterval: number) => {
+    batch: React.MutableRefObject<BatchUpdateBatch<Payload>>;
+    pushUpdate: (payload: Payload) => void;
+};
+
+/**
+ * Hook that allows to detect click events within app root but outside specified element.
+ *
+ * @param container outer container
+ * @param el element outside which clicks should be detected
+ * @param ignoredEl optional element to ignore
+ * @param onClick callback invoked if click outside registered elements was detected
+ * @returns action for registering elements
+ */
+declare const useClickAway: (container?: HTMLElement | null, el?: HTMLElement | null, ignoredEl?: HTMLElement | null, onClick?: () => void) => void;
+
+declare const useClipboard: () => {
+    copied: boolean;
+    onCopy: (txtContent: string) => Promise<void>;
+};
+
+/**
+ * Use this hook in order to defer unmount of a component.
+ * It makes sure that component relying on this hook can be mounted for at least `waitFor` period.
+ * This is useful to keep loader-like components mounted for a minimum time to avoid "flashing" effect.
+ *
+ * @param loading loading flag
+ * @param waitFor indicates minimum mount time
+ * @returns flag indicating if component relying on this hook should be kept mounted
+ */
+declare const useDeferredUnmount: (loading: boolean, waitFor?: number) => boolean;
+
+/**
+ * Allows to delay `shouldWait` flag by a value specified by `delay` option.
+ *
+ * @param shouldWait observed flag
+ * @param delay delay time (in ms)
+ * @returns flag indicating if `delay` time has passed and `shouldWait` is still `true`.
+ */
+declare const useDelay: (shouldWait: boolean, delay: number) => boolean;
+
+interface Dimensions {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+interface ResizeOptions {
+    /**
+     * Resize direction.
+     */
+    dir?: 'SE' | 'SW';
+    /**
+     * Minimum resize width.
+     */
+    minWidth?: number;
+    /**
+     * Callback invoked when resizing is done.
+     */
+    onResizeEnd?: (dimensions: Dimensions) => void;
+}
+
+/**
+ * Manages element resize.
+ *
+ * @param opts resize options
+ * @returns resize state and utils
+ */
+declare const useResize: (opts: ResizeOptions) => {
+    onMouseDown: React.MouseEventHandler<HTMLElement>;
+    setResizableEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    isResizing: boolean;
+};
+
+declare type DragHandler = (diff: {
+    /**
+     * Dragged element.
+     */
+    draggableEl: HTMLElement;
+    /**
+     * Initial X offset of dragged element in relation to its closest positioned ancestor.
+     */
+    initOffsetX: number;
+    /**
+     * Initial Y offset of dragged element in relation to its closest positioned ancestor.
+     */
+    initOffsetY: number;
+    /**
+     * Initial offset width of dragged element.
+     */
+    initOffsetWidth: number;
+    /**
+     * Initial offset height of dragged element.
+     */
+    initOffsetHeight: number;
+    /**
+     * Pointer's X client offset.
+     */
+    clientOffsetX: number;
+    /**
+     * Pointer's Y client offset.
+     */
+    clientOffsetY: number;
+    /**
+     * Value of a vector representing pointer movement in X axis.
+     */
+    clientVX: number;
+    /**
+     * Value of a vector representing pointer movement in Y axis.
+     */
+    clientVY: number;
+}) => void;
+interface DraggableOptions {
+    /**
+     * Callback invoked on dragging. Passes most recent drag vectors.
+     */
+    onDrag?: DragHandler;
+    /**
+     * Callback invoked on drag end.
+     */
+    onDragEnd?: (dimensions: Dimensions) => void;
+}
+
+/**
+ * Manages element dragging.
+ *
+ * @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>>;
+};
+
+/**
+ * Keeps info about mount state.
+ *
+ * This hook is useful when paired with async effects.
+ * For instance, an effect might be in progress but its parent hook gets unmounted. In such case, it's advised to not update hook state.
+ *
+ * @returns callback that returns info about mount state
+ */
+declare const useIsMounted: () => () => boolean;
+
+interface ItemsOverflowOptions {
+    /**
+     * Total number of items.
+     */
+    items: number;
+    /**
+     * Margin added to items at each breakpoint. Provide a value to accommodate space for e.g. `more` button.
+     */
+    itemsMargin: number;
+}
+
+/**
+ * Calculates number of items that are visible within a container.
+ *
+ * @param opts hook options
+ * @returns items overflow state
+ */
+declare const useItemsOverflow: (opts: ItemsOverflowOptions) => {
+    init: boolean;
+    setContainer: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+    visibleItems: number;
+};
+
+/**
+ * Use this hook in order to invoke a callback once the specified time passes.
+ *
+ * The hook exposes actions for initializing and resetting the timeout.
+ *
+ * @param onTimeout callback invoked when time specified by `delay` passes
+ * @param delay timeout (in ms)
+ * @returns timeout actions
+ */
+declare const useResettableTimeout: (onTimeout: () => void, delay: number) => {
+    initTimeout: () => void;
+    removeTimeout: () => void;
+    resetTimeout: () => void;
+};
+
+/**
+ * Provided with a list of breakpoints, chooses a breakpoint value that is greater than or equal container's width.
+ * Additionally, it chooses another breakpoint by taking device's pixel ratio into account.
+ *
+ * Container's size changes are observed via `ResizeObserver`. Observer's callback invocation is throttled.
+ *
+ * @param breakpoints list of possible image widths
+ * @param enabled toggles `ResizeObserver`
+ * @returns state and ref setters
+ */
+declare const useResponsiveSizes: (breakpoints: number[], enabled?: boolean) => {
+    sizes: number | undefined;
+    setContainer: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    pixelAdjSizes: number;
+};
+
+/**
+ * Detects visibility of an element inside a scrollable container.
+ *
+ * @param container scrollable container
+ * @returns hook state and methods
+ */
+declare const useElementVisibility: (container?: HTMLElement | null) => {
+    setElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    visible: boolean;
+};
+
+interface UseFilesDropProps {
+    /**
+     * Callback invoked when files are dropped.
+     */
+    onDrop?: (files: File[]) => void;
+}
+/**
+ * Hook that allows to connect any container and make it a drop target for files.
+ *
+ * @param hook props
+ * @returns hook state and methods
+ */
+declare const useFilesDrop: ({ onDrop }: UseFilesDropProps) => {
+    drop: react_dnd.ConnectDropTarget;
+    isActive: boolean;
+};
+
+/**
+ * A helper hook for a building a simple state machine. Useful for togglable popper-based components such as menus.
+ *
+ * @param initValue initial value
+ * @returns toggle actions
+ */
+declare const useToggle: (initValue?: boolean) => {
+    value: boolean;
+    toggle: () => void;
+    on: () => void;
+    off: () => void;
+};
+
+/**
+ * Listens to source element's size changes and sets target's width and height accordingly.
+ *
+ * This hook is useful if `object-fit: scale-down` CSS rule cannot be used,
+ * e.g. if image's placeholder has different size than the original image
+ * but the placeholder must be still scaled to fit the size of the original image.
+ *
+ * @param originalWidth original image's width
+ * @param originalHeight original image's height
+ * @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>>;
+};
+
+interface XYCoord {
+    x: number;
+    y: number;
+}
+interface ScrollCoordsConfig {
+    /**
+     * Specifies fraction of the container
+     * that will be used as upper and lower scroll bounds
+     * (scrolling can happen only within those bounds).
+     */
+    containerMargin?: number;
+    /**
+     * Represents a value by which scroll vector is multiplied.
+     * Adjust the value to fine tune scrolling speed.
+     */
+    speedCoef?: number;
+    /**
+     * Specifies the number of pixels that vertical mouse movement
+     * must exceed so that scroll can happen.
+     */
+    initThresh?: number;
+}
+declare type OnScrollHandler = (vStart: {
+    startX: number;
+    startY: number;
+}, vCurrent: {
+    currentX: number;
+    currentY: number;
+}) => void;
+interface ScrollOptions {
+    /**
+     * Triggering `mousedown` events on elements with the provided selector
+     * will not initialize scrolling.
+     */
+    ignoredSelector?: string;
+    /**
+     * Callback that is invoked in intervals if scrolling has been initialied.
+     * The callback is invoked for every `tick` of scrolling interval.
+     */
+    onScroll?: OnScrollHandler;
+    /**
+     * Callback invoked upon scroll end.
+     */
+    onScrollEnd?: () => void;
+    /**
+     * Callback invoked upon scroll start.
+     */
+    onScrollStart?: () => void;
+}
+
+/**
+ * Calculates scrolling vector based on initial client coords, current client coords, and scrolling options.
+ *
+ * @param container scrollable container
+ * @param initOffset initial client offset (e.g. mouse coords)
+ * @param currentOffset current client offset (e.g. mouse coords)
+ * @param config config option
+ * @returns scrolling vector
+ */
+declare const getScrollVectors: (container: HTMLElement, initOffset: XYCoord, currentOffset: XYCoord, config?: ScrollCoordsConfig) => number;
+
+/**
+ * Allows to scroll a container while performing actions within that container.
+ *
+ * Container scrolling is initiated by a `mousedown` event within that container.
+ * Then, on `mousemove` the scrolling can be either accelerated or slowed down.
+ *
+ * Scrolling can happen only if mouse pointer is placed close to the upper or lower edge of the container.
+ *
+ * @param container scrollable container
+ * @param opts scroll options
+ * @returns scroll info
+ */
+declare const useScroll: (container?: HTMLElement | null, opts?: ScrollOptions) => {
+    isScrolling: boolean;
+};
+
+/**
+ * Allows to scroll a container while dragging an item.
+ *
+ * @param container scrollable container
+ * @param type item type that will trigger scrolling
+ */
+declare const useScrollDnd: (container?: HTMLElement | null, type?: string) => void;
+
+/**
+ * Hook for downloading file using hidden anchor tag.
+ *
+ * @returns function for downloading file
+ */
+declare const useDownload: (root?: HTMLElement | null) => {
+    downloadFile: (downloadUrl: string) => void;
+};
+
+/**
+ * Defines validators that can be used to check various user inputs.
+ * They are intended to be used downstream to build validation rules for HTML forms.
+ *
+ * Validators must conform to the convention used by `react-hook-form`: They must return either `boolean` or an error message.
+ * For more info see `validate` option: https://react-hook-form.com/api/useform/register
+ */
+/**
+ * Creates validation rule that checks if supplied `value` is non-empty.
+ * Whitespaces are trimmed before the check.
+ *
+ * @param msg error message
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const nonEmpty: (msg: string) => (value?: string) => string | true;
+/**
+ * Creates validation rule that checks if supplied `value` is present in `allowedValues`.
+ *
+ * @param msg error message
+ * @param allowedValues list of allowed values
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const isAllowed: <T>(msg: string, allowedValues: T[]) => (value?: T | undefined) => string | true;
+/**
+ * Creates validation rule that checks if supplied array has at least one item.
+ *
+ * @param msg error message
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const nonEmptyArray: <T>(msg: string) => (value?: T[] | undefined) => string | true;
+/**
+ * Creates validation rule that checks if supplied array does not exceed `max` items.
+ *
+ * @param msg error message
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const maxItems: <T>(msg: string, max: number) => (value?: T[] | undefined) => string | true;
+/**
+ * Creates validation rule that checks if supplied `value` is not already present within `existingValues`.
+ *
+ * @param msg error message
+ * @param existingValues list of existing values
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const unique: <T>(msg: string, existingValues: T[]) => (value?: T | undefined) => string | true;
+/**
+ * Creates validation rule that checks if supplied value contains a dot.
+ *
+ * @param msg error message
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const nonDotValue: (msg: string) => (values?: string[]) => string | true;
+/**
+ * Creates validation rule that checks if string length in an array doesn't exceed max length.
+ *
+ * @param msg error message
+ * @param maxLength maximum length of the string in the array
+ * @returns validator that returns `true` if check passes, error message otherwise
+ */
+declare const maxLength: (msg: string, maxLength: number) => (values?: string[]) => string | true;
+
+declare const validators_d_nonEmpty: typeof nonEmpty;
+declare const validators_d_isAllowed: typeof isAllowed;
+declare const validators_d_nonEmptyArray: typeof nonEmptyArray;
+declare const validators_d_maxItems: typeof maxItems;
+declare const validators_d_unique: typeof unique;
+declare const validators_d_nonDotValue: typeof nonDotValue;
+declare const validators_d_maxLength: typeof maxLength;
+declare namespace validators_d {
+  export {
+    validators_d_nonEmpty as nonEmpty,
+    validators_d_isAllowed as isAllowed,
+    validators_d_nonEmptyArray as nonEmptyArray,
+    validators_d_maxItems as maxItems,
+    validators_d_unique as unique,
+    validators_d_nonDotValue as nonDotValue,
+    validators_d_maxLength as maxLength,
+  };
+}
+
+declare const ViewDialog: React.FC<Props$h>;
+interface Props$h {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Label of close button.
+     */
+    closeLabel?: string;
+    /**
+     * Initial height of dialog window.
+     */
+    height: number | string;
+    /**
+     * Initial offset from the left.
+     */
+    left?: number;
+    /**
+     * Minimum height (in px) of dialog window.
+     */
+    minHeight?: number;
+    /**
+     * Minimum width (in px) of dialog window.
+     */
+    minWidth?: number;
+    /**
+     * Callback invoked upon closing of dialog window.
+     */
+    onClose?: () => void;
+    /**
+     * Callback invoked whenever dialog dragging is completed.
+     */
+    onDragEnd?: (dimensions: Dimensions) => void;
+    /**
+     * Callback invoked whenever dialog resizing is completed.
+     */
+    onResizeEnd?: (dimensions: Dimensions) => void;
+    /**
+     * Toggles open state of dialog window.
+     */
+    open: boolean;
+    /**
+     * Label of resize button (SE direction).
+     */
+    resizeSELabel?: string;
+    /**
+     * Label of resize button (SW direction).
+     */
+    resizeSWLabel?: string;
+    /**
+     * Initial offset from the top.
+     */
+    top?: number;
+    /**
+     * Initial width of dialog window.
+     */
+    width: number | string;
+}
+
+declare const UIProvider: React.FC<Props$g>;
+interface Props$g {
+    /**
+     * Main content.
+     */
+    children: React.ReactNode;
+    /**
+     * Initial navbar mode.
+     */
+    navbarCollapsed?: boolean;
+    /**
+     * Initial navbar width.
+     */
+    navbarWidth?: number;
+    /**
+     * Callback invoked whenever navbar mode changes.
+     */
+    onNavbarCollapse?: (collapsed: boolean) => void;
+    /**
+     * Callback invoked whenever navbar resize ends.
+     */
+    onNavbarWidthChange?: (width: number) => void;
+    /**
+     * Dialog mode options.
+     */
+    dialog?: Omit<Props$h, 'children'>;
+    /**
+     * Name of selected theme.
+     */
+    theme?: string;
+}
+
+declare const View: React.ForwardRefExoticComponent<Props$f & React.RefAttributes<HTMLDivElement>>;
+interface Props$f {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Indicates if content's area is active.
+     */
+    isContentActive?: boolean;
+    /**
+     * Sets component's topbar.
+     */
+    topbar?: React.ReactNode;
+    /**
+     * Sets component's bottombar.
+     */
+    bottombar?: React.ReactNode;
+    /**
+     * Sets content `mousedown` event handler.
+     */
+    onContentMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+declare const ViewWrapper: React.FC<Props$e>;
+interface Props$e {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Sets navbar.
+     */
+    navbar?: React.ReactNode;
+}
+
+declare const RangeSlider: React.FC<Props$d>;
+declare type Props$d = {
+    /**
+     * Toggles animation, e.g. width transition.
+     */
+    animated?: boolean;
+    /**
+     * Forces component to occupy half of the available width.
+     */
+    halfWidth?: boolean;
+    /**
+     * Slider value.
+     */
+    value: number;
+    /**
+     * Slider on change callback.
+     *
+     * @param value new slider value
+     */
+    onChange(value: number): void;
+    /**
+     * Slider step.
+     */
+    step: number;
+    /**
+     * Slider minimum value.
+     */
+    min: number;
+    /**
+     * Slider maximum value.
+     */
+    max: number;
+    /**
+     * Slider text values.
+     */
+    textValues?: Record<string, string>;
+    /**
+     * Renders range slider values labels.
+     */
+    showLabels?: boolean;
+};
+
+declare const FormFeedback: React.FC<Props$c>;
+declare type Props$c = {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Feedback error.
+     */
+    error?: boolean;
+    /**
+     * Feedback warning.
+     */
+    warning?: boolean;
+};
+
+declare const FormGroup: React.FC<Props$b>;
+interface Props$b {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Applies offset.
+     */
+    offset?: 'base' | 'md';
+}
+
+declare const FormInputLabel: React.FC<Props$a>;
+declare type Props$a = {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Input id.
+     */
+    htmlFor: string;
+    /**
+     * Input id.
+     */
+    hidden?: boolean;
+};
+
+declare const Form: React.ForwardRefExoticComponent<Props$9 & React.RefAttributes<HTMLFormElement>>;
+declare type Props$9 = {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Form class.
+     */
+    className?: string;
+    /**
+     * Form element's id.
+     */
+    id?: string;
+    /**
+     * Form submit callback.
+     */
+    onSubmit: React.FormEventHandler<HTMLFormElement>;
+};
+
+declare const EmptyView: React.ForwardRefExoticComponent<Props$8 & React.RefAttributes<HTMLDivElement>>;
+interface Props$8 {
+    /**
+     * Adds active styling.
+     */
+    active?: boolean;
+    /**
+     * Empty view label.
+     */
+    label: string;
+    /**
+     * Empty view icon.
+     */
+    icon: IconName;
+    /**
+     * Empty view action container displayed under icon and label.
+     */
+    actionContainer?: React.ReactNode;
+}
+
+declare const FileInputButton: React.ForwardRefExoticComponent<Props$7 & React.RefAttributes<HTMLInputElement>>;
+interface Props$7 extends Omit<Props$14, 'onClick'> {
+    /**
+     * Unique input's id.
+     */
+    id: string;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Input's name to register.
+     */
+    name?: string;
+    /**
+     * Callback invoked when the value is changed.
+     */
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    /**
+     * Input's value.
+     */
+    value?: string;
+    /**
+     * Input's accept attribute.
+     */
+    accept?: string;
+}
+
+/**
+ * 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.FC<Props$6>;
+interface Props$6 {
+    /**
+     * Selection area container.
+     */
+    container?: HTMLDivElement | null;
+    /**
+     * Area selection change handler.
+     */
+    onSelectionChange?: (area: SelectionAreaCoords) => void;
+    /**
+     * Selector for ignoring areas started within passed selector.
+     */
+    ignoredSelector?: string;
+}
+
+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;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+
+declare const NotificationDetails: React.FC<Props$4>;
+interface Props$4 {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Label for close button.
+     */
+    closeLabel?: string;
+    /**
+     * Notification details close callback.
+     */
+    onClose?: () => void;
+    /**
+     * Notification title.
+     */
+    title: string;
+    /**
+     * Notification type.
+     */
+    type: 'success' | 'error' | 'info';
+}
+
+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> & {
+    /**
+     * Label for "Close" button.
+     */
+    closeLabel: string;
+    /**
+     * Label for "Close Details" button.
+     */
+    closeDetailsLabel?: string;
+    /**
+     * Optional notification details.
+     */
+    details?: React.ReactNode;
+    /**
+     * Notification close callback.
+     */
+    onClose?: () => void;
+    /**
+     * Label for "Open Details" button.
+     */
+    openDetailsLabel?: string;
+    /**
+     * Notification title.
+     */
+    title: string;
+    /**
+     * Notification type.
+     */
+    type: 'success' | 'error' | 'info';
+};
+
+declare const CopyableInput: React.FC<Props$2>;
+interface Props$2 {
+    /**
+     * Unique input's id.
+     */
+    id: string;
+    /**
+     * Input's value. This value will be copied to clipboard upon clicking on the copy button.
+     */
+    value?: string;
+    /**
+     * Input's class name.
+     */
+    className?: string;
+    /**
+     * Label displayed in the popup on hover and the internal button's aria-label.
+     */
+    labelCopy: string;
+    /**
+     * Label displayed in the popup upon clicking on the copy button.
+     */
+    labelCopied: string;
+}
+
+declare const CopyButton: React.FC<Props$1>;
+interface Props$1 {
+    /**
+     * Value to be copied to clipboard.
+     */
+    value?: string;
+    /**
+     * Label displayed in the popup on hover and the internal button's aria-label.
+     */
+    labelCopy: string;
+    /**
+     * Label displayed in the popup upon clicking on the copy button.
+     */
+    labelCopied: string;
+}
+
+declare const Fixed: React.FC<Props>;
+interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.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, useItemsOverflow, useListDnd, usePagination, useResettableTimeout, useResize, useResponsiveSizes, useScaleDown, useScroll, useScrollDnd, useToggle, useUIContext, validators_d as validators };