@plesk/ui-library 3.25.6 → 3.27.0

package/dist/plesk-ui-library.js

@@ -750,9 +750,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * `Action` component is used mostly for navigation, to go between pages, and not for immediate action or submitting data.
- * @since 0.0.68
+/**
+ * `Action` component is used mostly for navigation, to go between pages, and not for immediate action or submitting data.
+ * @since 0.0.68
  */
 const Action = ({
   baseClassName = `${_constants.CLS_PREFIX}action`,
@@ -1500,10 +1500,10 @@ const renderCaret = ({
 
   return caretElement;
 };
-/**
- * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
- * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
- * @since 0.0.37
+/**
+ * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
+ * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
+ * @since 0.0.37
  */
 
 
@@ -1623,97 +1623,97 @@ const Button = ({
 };
 
 Button.propTypes = {
-  /**
-   * Button size.
-   * @since 2.5.0
+  /**
+   * Button size.
+   * @since 2.5.0
    */
   size: _propTypes.default.oneOf(['md', 'lg']),
 
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.42
+  /**
+   * Visual intent color to apply to component.
+   * @since 0.0.42
    */
   intent: _propTypes.default.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'info']),
 
-  /**
-   * Display button with transparent background.
-   * @since 2.1.0
+  /**
+   * Display button with transparent background.
+   * @since 2.1.0
    */
   ghost: _propTypes.default.bool,
 
-  /**
-   * Arrow button.
-   * @since 2.6.0
+  /**
+   * Arrow button.
+   * @since 2.6.0
    */
   arrow: _propTypes.default.oneOf(['forward', 'backward']),
 
-  /**
-   * Selected state of toggle button. Used in controlled component mode.
-   * @since 0.0.68
+  /**
+   * Selected state of toggle button. Used in controlled component mode.
+   * @since 0.0.68
    */
   selected: _propTypes.default.bool,
 
-  /**
-   * Toggle button callback. Used in uncontrolled component mode.
-   * @since 0.0.68
+  /**
+   * Toggle button callback. Used in uncontrolled component mode.
+   * @since 0.0.68
    */
   onToggle: _propTypes.default.func,
 
-  /**
-   * State of the button
-   * @since 0.0.42
+  /**
+   * State of the button
+   * @since 0.0.42
    */
   state: _propTypes.default.oneOf(['active', 'loading', 'hovered', 'focused']),
 
-  /**
-   * Is button disabled?
-   * @since 0.0.42
+  /**
+   * Is button disabled?
+   * @since 0.0.42
    */
   disabled: _propTypes.default.bool,
 
-  /**
-   * Tooltip for component
-   * @since 0.0.42
+  /**
+   * Tooltip for component
+   * @since 0.0.42
    */
   tooltip: _propTypes.default.node,
 
-  /**
-   * Name of icon or [Icon](#!/Icon) component
-   * @since 0.0.42
+  /**
+   * Name of icon or [Icon](#!/Icon) component
+   * @since 0.0.42
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Show caret
-   * @since 0.0.42
+  /**
+   * Show caret
+   * @since 0.0.42
    */
   caret: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.element]),
 
-  /**
-   * Dynamically expand the button to fill out the whole available width of its parent container.
-   * @since 1.8.0
+  /**
+   * Dynamically expand the button to fill out the whole available width of its parent container.
+   * @since 1.8.0
    */
   fill: _propTypes.default.bool,
 
-  /**
-   * Content of the button
-   * @since 0.0.37
+  /**
+   * Content of the button
+   * @since 0.0.37
    */
   children: _propTypes.default.node,
 
-  /**
-   * Component to render as the root element. Useful when rendering a `Button` as `<a>` or `<Link>`.
-   * @since 0.0.42
+  /**
+   * Component to render as the root element. Useful when rendering a `Button` as `<a>` or `<Link>`.
+   * @since 0.0.42
    */
   component: _propTypes.default.elementType,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -3686,9 +3686,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
- * @since 0.0.55
+/**
+ * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
+ * @since 0.0.55
  */
 const Checkbox = ({
   baseClassName = `${_constants.CLS_PREFIX}checkbox`,
@@ -3960,9 +3960,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-/**
- * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
- * @since 0.0.61
+/**
+ * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
+ * @since 0.0.61
  */
 class CodeEditor extends _react.Component {
   constructor(...args) {
@@ -4168,82 +4168,82 @@ class CodeEditor extends _react.Component {
 }
 
 CodeEditor.propTypes = {
-  /**
-   * The mode to use. When not given, this will default to the first mode that was loaded.
-   * @since 0.0.61
+  /**
+   * The mode to use. When not given, this will default to the first mode that was loaded.
+   * @since 0.0.61
    */
   mode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
 
-  /**
-   * CodeEditor can detect mode by file name. Will be ignored if you set mode property.
-   * @since 0.0.61
+  /**
+   * CodeEditor can detect mode by file name. Will be ignored if you set mode property.
+   * @since 0.0.61
    */
   fileName: _propTypes.default.string,
 
-  /**
-   * Content of the `CodeEditor`.
-   * @since 0.0.61
+  /**
+   * Content of the `CodeEditor`.
+   * @since 0.0.61
    */
   children: _propTypes.default.string,
 
-  /**
-   * Set read only.
-   * @since 0.0.61
+  /**
+   * Set read only.
+   * @since 0.0.61
    */
   readOnly: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
 
-  /**
-   * Set auto focus.
-   * @since 0.0.61
+  /**
+   * Set auto focus.
+   * @since 0.0.61
    */
   autofocus: _propTypes.default.bool,
 
-  /**
-   * onInit event handler.
-   * @since 0.0.61
+  /**
+   * onInit event handler.
+   * @since 0.0.61
    */
   onInit: _propTypes.default.func,
 
-  /**
-   * onChange event handler.
-   * @since 0.0.61
+  /**
+   * onChange event handler.
+   * @since 0.0.61
    */
   onChange: _propTypes.default.func,
 
-  /**
-   * onSave event handler.
-   * @since 0.0.61
+  /**
+   * onSave event handler.
+   * @since 0.0.61
    */
   onSave: _propTypes.default.func,
 
-  /**
-   * See all supported options in [CodeMirror](https://codemirror.net/doc/manual.html#config) documentation.
-   * @since 0.0.61
+  /**
+   * See all supported options in [CodeMirror](https://codemirror.net/doc/manual.html#config) documentation.
+   * @since 0.0.61
    */
   options: _propTypes.default.object,
 
-  /**
-   * Set scroll position.
-   * @since 1.12.4
+  /**
+   * Set scroll position.
+   * @since 1.12.4
    */
   scrollPosition: _propTypes.default.shape({
     left: _propTypes.default.number,
     top: _propTypes.default.number
   }),
 
-  /**
-   * onScroll event handler.
-   * @since 1.12.4
+  /**
+   * onScroll event handler.
+   * @since 1.12.4
    */
   onScroll: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -5729,9 +5729,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/(0, _react.isValidElement)(value);
-/**
- * `Dialog` is a modal window that asks users to make a decision or enter additional information.
- * @since 0.0.68
+/**
+ * `Dialog` is a modal window that asks users to make a decision or enter additional information.
+ * @since 0.0.68
  */
 
 
@@ -5897,126 +5897,126 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.68
+  /**
+   * Toggles visibility.
+   * @since 0.0.68
    */
   isOpen: _propTypes.default.bool,
 
-  /**
-   * Banner. Renders in front of content as wide as dialog.
-   * @since 0.0.68
+  /**
+   * Banner. Renders in front of content as wide as dialog.
+   * @since 0.0.68
    */
   banner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
+  /**
+   * Block with an image, placed at the side of the component
+   * @since 3.25.0
    */
   sideBanner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
+  /**
+   * Additional properties for the sideBanner
+   * @since 3.25.0
    */
   sideBannerContainer: _propTypes.default.shape({
-    /**
-     * Values for css background property
+    /**
+     * Values for css background property
      */
     background: _propTypes.default.string,
 
-    /**
-     * One of: center, flex-start, flex-end
+    /**
+     * One of: center, flex-start, flex-end
      */
     align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
   }),
 
-  /**
-   * Image. Renders into content.
-   * @since 0.0.68
+  /**
+   * Image. Renders into content.
+   * @since 0.0.68
    */
   image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Title
-   * @since 0.0.68
+  /**
+   * Title
+   * @since 0.0.68
    */
   title: _propTypes.default.node,
 
-  /**
-   * The subtitle of the `Dialog`.
-   * @since 4.0.0
+  /**
+   * The subtitle of the `Dialog`.
+   * @since 4.0.0
    */
   subtitle: _propTypes.default.node,
 
-  /**
-   * Title of "cancel" button
-   * @since 0.0.68
-   * @deprecated Use `cancelButton` instead.
+  /**
+   * Title of "cancel" button
+   * @since 0.0.68
+   * @deprecated Use `cancelButton` instead.
    */
   cancelTitle: _propTypes.default.node,
 
-  /**
-   * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
-   * @since 3.13.0
+  /**
+   * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
+   * @since 3.13.0
    */
   cancelButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
 
-  /**
-   * Buttons except "cancel" button
-   * @since 0.0.68
+  /**
+   * Buttons except "cancel" button
+   * @since 0.0.68
    */
   buttons: _propTypes.default.node,
 
-  /**
-   * Actions which will be shown in Dialog header
-   * @since 1.2.0
+  /**
+   * Actions which will be shown in Dialog header
+   * @since 1.2.0
    */
   actions: _propTypes.default.node,
 
-  /**
-   * Wraps children into [Form](#!/Form) if not empty.
-   * @since 0.0.68
+  /**
+   * Wraps children into [Form](#!/Form) if not empty.
+   * @since 0.0.68
    */
   form: _propTypes.default.object,
 
-  /**
-   * Dialog width
-   * @since 0.0.68
+  /**
+   * Dialog width
+   * @since 0.0.68
    */
   size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
 
-  /**
-   * If the value is false, the dialog cannot be closed and the Close button is hidden.
-   * @since 1.2.0
+  /**
+   * If the value is false, the dialog cannot be closed and the Close button is hidden.
+   * @since 1.2.0
    */
   closable: _propTypes.default.bool,
 
-  /**
-   * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
-   * @since 0.0.68
+  /**
+   * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
+   * @since 0.0.68
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Whether show or not a confirmation dialog on close.
-   * @since 3.21.0
+  /**
+   * Whether show or not a confirmation dialog on close.
+   * @since 3.21.0
    */
   closingConfirmation: _propTypes.default.bool,
 
-  /**
-   * Content of the `DialogWindow`.
-   * @since 0.0.68
+  /**
+   * Content of the `DialogWindow`.
+   * @since 0.0.68
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -6154,8 +6154,6 @@ var _Form = _interopRequireDefault(__webpack_require__(/*! ../Form */ "./compone
 
 var _Heading = _interopRequireDefault(__webpack_require__(/*! ../Heading */ "./components/Heading/index.tsx"));
 
-var _Text = _interopRequireDefault(__webpack_require__(/*! ../Text */ "./components/Text/index.tsx"));
-
 var _Translate = __webpack_require__(/*! ../Translate */ "./components/Translate/index.js");
 
 var _ScrollableElementFormContext = _interopRequireDefault(__webpack_require__(/*! ../Form/ScrollableElementFormContext */ "./components/Form/ScrollableElementFormContext.js"));
@@ -6175,107 +6173,113 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.65
+  /**
+   * Toggles visibility.
+   * @since 0.0.65
    */
   isOpen: _propTypes.default.bool,
 
-  /**
-   * The title of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * The title of the `Drawer`.
+   * @since 0.0.65
    */
   title: _propTypes.default.node.isRequired,
 
-  /**
-   * The subtitle of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * The subtitle of the `Drawer`.
+   * @since 0.0.65
    */
   subtitle: _propTypes.default.node,
 
-  /**
-   * Show the minimize button and the inactive close button.
-   * @since 1.4.1
+  /**
+   * Show the minimize button and the inactive close button.
+   * @since 1.4.1
    */
   hideButton: _propTypes.default.bool,
 
-  /**
-   * Show back button in the header. If true the close button is not show.
-   * @deprecated Not recommended to use. Use default close button instead.
-   * @since 0.0.65
+  /**
+   * Show back button in the header. If true the close button is not show.
+   * @deprecated Not recommended to use. Use default close button instead.
+   * @since 0.0.65
    */
   backButton: _propTypes.default.bool,
 
-  /**
-   * Overlay placement.
-   * @since 0.0.65
+  /**
+   * A slot for `Tabs` component.
+   * @since 3.26.0
+   */
+  tabs: _propTypes.default.node,
+
+  /**
+   * Overlay placement.
+   * @since 0.0.65
    */
   placement: _propTypes.default.oneOf(['left', 'right']),
 
-  /**
-   * Overlay size.
-   * @since 0.0.65
+  /**
+   * Overlay size.
+   * @since 0.0.65
    */
   size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
 
-  /**
-   * onClose handler.
-   * @since 0.0.65
+  /**
+   * onClose handler.
+   * @since 0.0.65
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Whether show or not a confirmation dialog on close.
-   * @since 3.21.0
+  /**
+   * Whether show or not a confirmation dialog on close.
+   * @since 3.21.0
    */
   closingConfirmation: _propTypes.default.bool,
 
-  /**
-   * Wraps children into [Form](#!/Form) if not empty.
-   * @since 0.0.66
+  /**
+   * Wraps children into [Form](#!/Form) if not empty.
+   * @since 0.0.66
    */
   form: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
+  /**
+   * Block with an image, placed at the side of the component
+   * @since 3.25.0
    */
   sideBanner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
+  /**
+   * Additional properties for the sideBanner
+   * @since 3.25.0
    */
   sideBannerContainer: _propTypes.default.shape({
-    /**
-     * Values for css background property
+    /**
+     * Values for css background property
      */
     background: _propTypes.default.string,
 
-    /**
-     * One of: center, flex-start, flex-end
+    /**
+     * One of: center, flex-start, flex-end
      */
     align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
   }),
 
-  /**
-   * Content of the `Drawer`.
-   * @since 0.0.65
+  /**
+   * Content of the `Drawer`.
+   * @since 0.0.65
    */
   children: _propTypes.default.node,
 
-  /**
-   * Adds [Progress](#!/Progress) into footer.
-   * @since 1.11.0
+  /**
+   * Adds [Progress](#!/Progress) into footer.
+   * @since 1.11.0
    */
   progress: _propTypes.default.shape({
-    /**
-     * A title for the progress.
+    /**
+     * A title for the progress.
      */
     title: _propTypes.default.string,
 
-    /**
-     * An array of [ProgressStep](#!/ProgressStep) props.
+    /**
+     * An array of [ProgressStep](#!/ProgressStep) props.
      */
     steps: _propTypes.default.arrayOf(_propTypes.default.shape({
       title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
@@ -6284,35 +6288,35 @@ const propTypes = {
       icon: _propTypes.default.string
     })).isRequired,
 
-    /**
-     * An option that controls drawer closing ability.
+    /**
+     * An option that controls drawer closing ability.
      */
     cancelable: _propTypes.default.bool,
 
-    /**
-     * On overall status event handler.
-     * @since 3.8.0
+    /**
+     * On overall status event handler.
+     * @since 3.8.0
      */
     onStatusChange: _propTypes.default.func,
 
-    /**
-     * @ignore
+    /**
+     * @ignore
      */
     onClose: _propTypes.default.func,
 
-    /**
-     * @ignore
+    /**
+     * @ignore
      */
     onClosableChange: _propTypes.default.func
   }),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -6321,6 +6325,7 @@ const defaultProps = {
   subtitle: '',
   backButton: undefined,
   hideButton: undefined,
+  tabs: undefined,
   placement: 'left',
   size: 'md',
   onClose: null,
@@ -6333,10 +6338,10 @@ const defaultProps = {
   className: null,
   baseClassName: `${_constants.CLS_PREFIX}drawer`
 };
-/**
- * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
- * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
- * @since 0.0.65
+/**
+ * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
+ * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
+ * @since 0.0.65
  */
 
 const Drawer = ({
@@ -6347,6 +6352,7 @@ const Drawer = ({
   subtitle,
   backButton,
   hideButton,
+  tabs,
   onClose,
   form,
   progress,
@@ -6367,9 +6373,23 @@ const Drawer = ({
     if (progress) {
       progress.onClose = onCloseWithConfirmation;
       progress.onClosableChange = setIsClosable;
-    }
 
-    const createProgress = () => /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, progress);
+      const drawerProgressRender = ({
+        content,
+        footer
+      }) => {
+        return render({
+          content: /*#__PURE__*/_react.default.createElement("div", {
+            className: `${baseClassName}__form`
+          }, content),
+          footer
+        });
+      };
+
+      return /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, _extends({
+        render: drawerProgressRender
+      }, progress));
+    }
 
     if (form) {
       if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
@@ -6384,7 +6404,7 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         });
       }
@@ -6405,25 +6425,16 @@ const Drawer = ({
             renderActionButtons
           }) => render({
             content: renderForm(),
-            footer: progress ? createProgress() : renderActionButtons()
+            footer: renderActionButtons()
           })
         }), children);
       }
     }
 
-    children = /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__inner-body`
-    }, children);
-
-    if (progress) {
-      return render({
-        content: children,
-        footer: createProgress()
-      });
-    }
-
     return render({
-      content: children
+      content: /*#__PURE__*/_react.default.createElement("div", {
+        className: `${baseClassName}__inner-body`
+      }, children)
     });
   };
 
@@ -6439,7 +6450,8 @@ const Drawer = ({
   }) => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, {
     backButton: backButton,
     hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation
+    onClose: onCloseWithConfirmation,
+    tabs: tabs
   }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
     level: "2",
     className: `${baseClassName}__title`
@@ -6447,9 +6459,7 @@ const Drawer = ({
     className: `${baseClassName}__title`
   }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__subtitle`
-  }, (0, _Translate.isLikeText)(subtitle) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-    intent: "muted"
-  }, subtitle) : subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
+  }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
     handleScroll
   }) => /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__body`,
@@ -6587,7 +6597,7 @@ class DrawerProgress extends _react.Component {
     if (prevState.status !== _ProgressStep.STATUS_DONE && status === _ProgressStep.STATUS_DONE) {
       window.clearTimeout(this.closeTimeout);
 
-      if (autoCloseTimeout) {
+      if (autoCloseTimeout !== undefined) {
         this.closeTimeout = window.setTimeout(this.handleClose, autoCloseTimeout);
       }
     }
@@ -6607,7 +6617,8 @@ class DrawerProgress extends _react.Component {
       title,
       steps,
       buttons,
-      cancelable
+      cancelable,
+      render
     } = this.props;
     const {
       status
@@ -6615,35 +6626,37 @@ class DrawerProgress extends _react.Component {
     const isFinished = status === _ProgressStep.STATUS_DONE;
     const isFailed = status === _ProgressStep.STATUS_ERROR;
     const canCancel = cancelable && !(isFinished || isFailed);
-    /* eslint-disable react/jsx-indent */
+    const hasFooter = !!(buttons || canCancel);
 
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, title && /*#__PURE__*/_react.default.createElement("div", {
+    const content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, title && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__title`
     }, title), /*#__PURE__*/_react.default.createElement(_Progress.default, {
       onStatusChange: this.handleStatusChange,
       className: `${baseClassName}__progress`
     }, steps.map((step, index) => /*#__PURE__*/_react.default.createElement(_ProgressStep.default, _extends({
       key: index.toString()
-    }, step)))), /*#__PURE__*/_react.default.createElement("div", {
+    }, step)))));
+
+    const footer = hasFooter ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__footer`
-    }, buttons, (isFinished || isFailed) && /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: this.handleClose
-    }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "DrawerProgress.closeButton",
-      fallback: "Close"
-    })), canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: this.handleCancel
+    }, buttons, canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: this.handleCancel,
+      size: "lg"
     }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
       content: "DrawerProgress.cancelButton",
       fallback: "Cancel"
-    }))));
+    }))) : null;
+    return typeof render === 'function' ? render({
+      content,
+      footer
+    }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, content, footer);
   }
 
 }
 
 _defineProperty(DrawerProgress, "defaultProps", {
   baseClassName: `${_constants.CLS_PREFIX}drawer-progress`,
-  autoCloseTimeout: 3000,
+  autoCloseTimeout: 0,
   cancelable: false,
   steps: []
 });
@@ -6760,6 +6773,7 @@ class Header extends _react.Component {
       children,
       backButton,
       hideButton,
+      tabs,
       ...props
     } = this.props;
     let prefix;
@@ -6793,7 +6807,11 @@ class Header extends _react.Component {
       className: `${baseClassName}__inner`
     }, prefix, /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content`
-    }, children), suffix));
+    }, children, tabs && /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__tabs`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__tabs-inner`
+    }, tabs))), suffix));
   }
 
 }
@@ -6805,14 +6823,16 @@ _defineProperty(Header, "propTypes", {
   onClose: _propTypes.default.func,
   children: _propTypes.default.node.isRequired,
   backButton: _propTypes.default.bool,
-  hideButton: _propTypes.default.bool
+  hideButton: _propTypes.default.bool,
+  tabs: _propTypes.default.node
 });
 
 _defineProperty(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${_constants.CLS_PREFIX}drawer-header`,
   backButton: false,
-  hideButton: false
+  hideButton: false,
+  tabs: undefined
 });
 
 /***/ }),
@@ -7877,10 +7897,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * `FormFieldCheckbox` component component is used for turning an option on or off
- * and selecting or deselecting an item.
- * @since 0.0.58
+/**
+ * `FormFieldCheckbox` component component is used for turning an option on or off
+ * and selecting or deselecting an item.
+ * @since 0.0.58
  */
 const FormFieldCheckbox = ({
   baseClassName,
@@ -7922,52 +7942,52 @@ const FormFieldCheckbox = ({
 }, label)));
 
 FormFieldCheckbox.propTypes = {
-  /**
-   * Disabled state of field.
-   * @since 0.1.0
+  /**
+   * Disabled state of field.
+   * @since 0.1.0
    */
   disabled: _propTypes.default.bool,
 
-  /**
-   * Custom checked value. Default is boolean true.
-   * @since 0.0.59
+  /**
+   * Custom checked value. Default is boolean true.
+   * @since 0.0.59
    */
   checkedValue: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
 
-  /**
-   * Custom unchecked value. Default is boolean false.
-   * @since 0.0.59
+  /**
+   * Custom unchecked value. Default is boolean false.
+   * @since 0.0.59
    */
   uncheckedValue: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: _propTypes.default.bool,
 
-  /**
-   * @ignore Field cannot be multiple
+  /**
+   * @ignore Field cannot be multiple
    */
   multi: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   label: _propTypes.default.any,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   required: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
   fullDescription: _propTypes.default.string
@@ -8073,9 +8093,9 @@ const generatePassword = () => {
   const password = ['upper', 'lower', 'lower', 'lower', 'number', 'number', 'special', 'number', 'upper', 'upper', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower'];
   return password.sort((a, b) => Math.floor(b.length * Math.random()) - Math.floor(a.length * Math.random())).map(symbolClass => symbolClasses[symbolClass][Math.floor(symbolClasses[symbolClass].length * Math.random())]).join('');
 };
-/**
- * `FormFieldPassword` component provides secure way to enter a password.
- * @since 0.0.58
+/**
+ * `FormFieldPassword` component provides secure way to enter a password.
+ * @since 0.0.58
  */
 
 
@@ -8328,33 +8348,33 @@ class FormFieldPassword extends _react.Component {
 }
 
 FormFieldPassword.propTypes = {
-  /**
-   * Is show button hidden?
-   * @since 0.0.59
+  /**
+   * Is show button hidden?
+   * @since 0.0.59
    */
   hideShowButton: _propTypes.default.bool,
 
-  /**
-   * Is generate button hidden?
-   * @since 0.0.59
+  /**
+   * Is generate button hidden?
+   * @since 0.0.59
    */
   hideGenerateButton: _propTypes.default.bool,
 
-  /**
-   * Is password meter hidden?
-   * @since 0.0.59
+  /**
+   * Is password meter hidden?
+   * @since 0.0.59
    */
   hidePasswordMeter: _propTypes.default.bool,
 
-  /**
-   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
-   * @since 1.5.6
+  /**
+   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
+   * @since 1.5.6
    */
   passwordMeterProps: _propTypes.default.object,
 
-  /**
-   * A set of custom password score rules.
-   * @since 3.21.0
+  /**
+   * A set of custom password score rules.
+   * @since 3.21.0
    */
   passwordScoreRules: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string,
@@ -8362,37 +8382,37 @@ FormFieldPassword.propTypes = {
     score: _propTypes.default.func.isRequired
   })),
 
-  /**
-   * Size of the control
-   * @since 1.5.6
+  /**
+   * Size of the control
+   * @since 1.5.6
    */
   size: _propTypes.default.oneOf(['md', 'lg', 'xl', 'fill']),
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: _propTypes.default.bool,
 
-  /**
-   * Prevent password autocompletion.
-   * @since 2.5.1
+  /**
+   * Prevent password autocompletion.
+   * @since 2.5.1
    */
   autoComplete: _propTypes.default.oneOf(['new-password']),
 
-  /**
-   * A render function for customizing the password generation button.
-   * @since 3.13.0
+  /**
+   * A render function for customizing the password generation button.
+   * @since 3.13.0
    */
   generateButton: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -8669,9 +8689,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
- * @since 0.2.0
+/**
+ * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
+ * @since 0.2.0
  */
 class FormFieldRadioButtons extends _react.Component {
   render() {
@@ -8733,68 +8753,68 @@ class FormFieldRadioButtons extends _react.Component {
 }
 
 FormFieldRadioButtons.propTypes = {
-  /**
-   * Options definition.
-   * @since 0.2.0
+  /**
+   * Options definition.
+   * @since 0.2.0
    */
   options: _propTypes.default.arrayOf(_propTypes.default.shape({
-    /**
-     * Option value.
+    /**
+     * Option value.
      */
     value: _propTypes.default.string.isRequired,
 
-    /**
-     * Option label.
+    /**
+     * Option label.
      */
     label: _propTypes.default.node.isRequired,
 
-    /**
-     * Text hint located below option for providing additional information.
+    /**
+     * Text hint located below option for providing additional information.
      */
     description: _propTypes.default.node,
 
-    /**
-     * Set true if option is not available to choice.
+    /**
+     * Set true if option is not available to choice.
      */
     disabled: _propTypes.default.bool,
 
-    /**
-     * Optional array of `FormField` components under this option.
+    /**
+     * Optional array of `FormField` components under this option.
      */
     indentFields: _propTypes.default.array
   })).isRequired,
 
-  /**
-   * Value of current chosen option.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.2.0
+  /**
+   * Value of current chosen option.
+   * @deprecated Use [Form](#!/Form) values.
+   * @since 0.2.0
    */
   value: _propTypes.default.string,
 
-  /**
-   * Disabled state of field.
-   * @since 0.2.0
+  /**
+   * Disabled state of field.
+   * @since 0.2.0
    */
   disabled: _propTypes.default.bool,
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: _propTypes.default.bool,
 
-  /**
-   * @ignore Field cannot be multiple
+  /**
+   * @ignore Field cannot be multiple
    */
   multi: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -8893,7 +8913,7 @@ const FormFieldSelect = ({
   size: size,
   id: getId(),
   name: getName(),
-  value: getValue(''),
+  value: getValue(multiple ? [] : undefined),
   onChange: setValue,
   disabled: isDisabled(),
   searchable: searchable,
@@ -9202,11 +9222,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 const defaultValue = undefined;
-/**
- * Simple helper to handle situations when we expecting only array
- * @param value
- * @param nonEmpty
- * @returns {Array}
+/**
+ * Simple helper to handle situations when we expecting only array
+ * @param value
+ * @param nonEmpty
+ * @returns {Array}
  */
 
 const getArrayHelper = (value, nonEmpty = false) => {
@@ -9224,8 +9244,12 @@ const getArrayHelper = (value, nonEmpty = false) => {
 };
 
 const isControlled = props => props.value !== undefined;
-/**
- * @since 0.0.54
+
+const isEmpty = value => {
+  return !value && value !== 0 || Array.isArray(value) && value.length === 0 || !Array.isArray(value) && typeof value === 'object' && Object.values(value).filter(t => Boolean(t)).length === 0;
+};
+/**
+ * @since 0.0.54
  */
 
 
@@ -9347,18 +9371,19 @@ class FormField extends _react.Component {
         disabled
       } = this.props;
       const value = getArrayHelper(this.fieldApi.getValue());
+      const isClearable = multi && value.length === 1 && !isEmpty(value[0]);
 
-      if (!multi || value.length <= 1) {
+      if (!multi || value.length < 1 || value.length === 1 && isEmpty(value[0])) {
         return null;
       }
 
       return /*#__PURE__*/_react.default.createElement(_Button.default, {
         className: `${this.props.baseClassName}__remove`,
-        icon: "cross-mark",
+        icon: isClearable ? 'clean' : 'cross-mark',
         tooltip: /*#__PURE__*/_react.default.createElement(_Translate.default, {
           namespace: "FormField",
-          content: "remove",
-          fallback: "Remove",
+          content: isClearable ? 'clear' : 'remove',
+          fallback: isClearable ? 'Clear' : 'Remove',
           translators: locale
         }),
         onClick: () => this.handleRemove(index),
@@ -9590,10 +9615,10 @@ class FormField extends _react.Component {
 
     clearTimeout(this.focusTimer);
   }
-  /**
-   * Field API provided to field
-   * @param index
-   * @returns {Object}
+  /**
+   * Field API provided to field
+   * @param index
+   * @returns {Object}
    */
 
 
@@ -9617,127 +9642,127 @@ class FormField extends _react.Component {
 }
 
 const propTypes = {
-  /**
-   * Field ID.
-   * @since 0.0.59
+  /**
+   * Field ID.
+   * @since 0.0.59
    */
   id: _propTypes.default.string,
 
-  /**
-   * Field name.
-   * @since 0.0.54
+  /**
+   * Field name.
+   * @since 0.0.54
    */
   name: _propTypes.default.string,
 
-  /**
-   * Field value.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.0.57
+  /**
+   * Field value.
+   * @deprecated Use [Form](#!/Form) values.
+   * @since 0.0.57
    */
   value: _propTypes.default.any,
 
-  /**
-   * A callback function, can be executed when the value is changing.
-   * @since 0.4.1
+  /**
+   * A callback function, can be executed when the value is changing.
+   * @since 0.4.1
    */
   onChange: _propTypes.default.func,
 
-  /**
-   * Field label.
-   * @since 0.0.54
+  /**
+   * Field label.
+   * @since 0.0.54
    */
   label: _propTypes.default.any,
 
-  /**
-   * Field description.
-   * @since 0.0.57
+  /**
+   * Field description.
+   * @since 0.0.57
    */
   description: _propTypes.default.any,
 
-  /**
-   * Show long descriptions in popover after clicking on "( i )" icon
-   * @since 3.14.0
+  /**
+   * Show long descriptions in popover after clicking on "( i )" icon
+   * @since 3.14.0
    */
   fullDescription: _propTypes.default.node,
 
-  /**
-   * Field errors.
-   *  @deprecated Use [Form](#!/Form) errors.
-   * @since 0.0.57
+  /**
+   * Field errors.
+   *  @deprecated Use [Form](#!/Form) errors.
+   * @since 0.0.57
    */
   errors: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
 
-  /**
-   * Indicates whether field is required.
-   * @since 0.0.54
+  /**
+   * Indicates whether field is required.
+   * @since 0.0.54
    */
   required: _propTypes.default.bool,
 
-  /**
-   * Content of the `FormField`.
-   * @since 0.0.54
+  /**
+   * Content of the `FormField`.
+   * @since 0.0.54
    */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
 
-  /**
-   * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
-   * @since 1.12.0
+  /**
+   * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
+   * @since 1.12.0
    */
   multi: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
     max: _propTypes.default.number.isRequired
   })]),
 
-  /**
-   * @ignore Disabled state of multiple field.
+  /**
+   * @ignore Disabled state of multiple field.
    */
   disabled: _propTypes.default.bool,
 
-  /**
-   * Localization messages
-   * @since 1.12.0
+  /**
+   * Localization messages
+   * @since 1.12.0
    */
   locale: _propTypes.default.shape({
     addMore: _propTypes.default.node,
     remove: _propTypes.default.node
   }),
 
-  /**
-   * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
-   * @ignore
-   * @deprecated
+  /**
+   * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
+   * @ignore
+   * @deprecated
    */
   addMoreValidator: _propTypes.default.func,
 
-  /**
-   * A callback function, can be executed when the row is removed.
-   * @since 1.12.0
+  /**
+   * A callback function, can be executed when the row is removed.
+   * @since 1.12.0
    */
   onRemoveRow: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   form: _propTypes.default.object,
 
-  /**
-   * Vertical or horizontal field view.
-   * If it is not defined explicitly, the vertical mode will use from Form or Section components.
-   * @since 3.13.0
+  /**
+   * Vertical or horizontal field view.
+   * If it is not defined explicitly, the vertical mode will use from Form or Section components.
+   * @since 3.13.0
    */
   vertical: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   scrollableElement: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Element), _propTypes.default.instanceOf(Window)])
 };
@@ -9765,14 +9790,14 @@ const defaultProps = {
 };
 FormField.propTypes = propTypes;
 FormField.defaultProps = defaultProps;
-/**
- * `FormField` component is used for showing of parameter values in Form or
- * for entering of user data with any form elements.
- *
- * For the most cases the following form elements can be used:
- * * [FormFieldText](#!/FormFieldText) for entering text,
- * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
- * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
+/**
+ * `FormField` component is used for showing of parameter values in Form or
+ * for entering of user data with any form elements.
+ *
+ * For the most cases the following form elements can be used:
+ * * [FormFieldText](#!/FormFieldText) for entering text,
+ * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
+ * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
 
 const FormFieldWrapper = props => {
@@ -10258,10 +10283,10 @@ class Form extends _react.Component {
   }
 
 }
-/**
- * `Form` component is used for entering and submitting of user data.
- * [More details about designing of forms.](#!/Good%20Forms)
- * @since 0.0.54
+/**
+ * `Form` component is used for entering and submitting of user data.
+ * [More details about designing of forms.](#!/Good%20Forms)
+ * @since 0.0.54
  */
 
 
@@ -11172,12 +11197,12 @@ const getHref = (name, size) => {
   return `${_symbols.default}#${name}:${iconSize}`;
 };
 
-/**
- * `Icons` are small symbolic images used for two things: to help quickly find the right control on the screen and to
- * bring user attention to something that requires consideration. In the former case, `Icon` typically acts as a part
- * of a [Button](#!/Button) and helps differentiate this particular [Button](#!/Button) from others. `Icons` come in several
- * standard sizes.
- * @since 0.0.35
+/**
+ * `Icons` are small symbolic images used for two things: to help quickly find the right control on the screen and to
+ * bring user attention to something that requires consideration. In the former case, `Icon` typically acts as a part
+ * of a [Button](#!/Button) and helps differentiate this particular [Button](#!/Button) from others. `Icons` come in several
+ * standard sizes.
+ * @since 0.0.35
  */
 const Icon = ({
   baseClassName = `${_constants.CLS_PREFIX}icon`,
@@ -11238,9 +11263,9 @@ exports.NAMES_12 = exports.NAMES = void 0;
 
 /* eslint-disable max-len */
 // This file is generated by create-svg-sprite. Do not edit.
-const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'dollar', 'dollar-filled', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
+const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
 exports.NAMES_12 = NAMES_12;
-const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'dollar', 'dollar-filled', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
+const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
 exports.NAMES = NAMES;
 
 /***/ }),
@@ -11926,9 +11951,9 @@ const toNumber = value => {
 const isMinDisabled = (value, min) => min !== undefined && value !== '' && value <= min;
 
 const isMaxDisabled = (value, max) => max !== undefined && value !== '' && value >= max;
-/**
- * `InputNumber` component is used for entering integer numbers.
- * @since 2.2.0
+/**
+ * `InputNumber` component is used for entering integer numbers.
+ * @since 2.2.0
  */
 
 
@@ -12226,6 +12251,7 @@ const ItemLink = ({
   baseClassName = `${_constants.CLS_PREFIX}item-link`,
   className,
   children,
+  hoverable,
   ...props
 }) => {
   if (props.onClick) {
@@ -12336,10 +12362,10 @@ const getNextSelectedValue = (value, prevValue, toggleable) => {
   return value;
 };
 
-/**
- * `ItemList` component is used for displaying list of [Items](#!/Item)
- * according to [Grid](#!/Grid) principle.
- * @since 0.0.48
+/**
+ * `ItemList` component is used for displaying list of [Items](#!/Item)
+ * according to [Grid](#!/Grid) principle.
+ * @since 0.0.48
  */
 class ItemList extends _react.Component {
   constructor(_props) {
@@ -12350,7 +12376,8 @@ class ItemList extends _react.Component {
         baseClassName,
         selectable,
         onSelect,
-        reorderable
+        reorderable,
+        hoverable
       } = this.props;
       const classNameList = [`${baseClassName}__item`];
       const props = {};
@@ -12375,6 +12402,11 @@ class ItemList extends _react.Component {
           });
           (0, _utils.safeInvoke)(onSelect, nextValue);
         };
+      } // Extends hoverable behavior from the ItemList in case if its child doesn't have its own
+
+
+      if (item.props.hoverable === undefined) {
+        props.hoverable = hoverable && this.canManageHoverableState();
       }
 
       if (reorderable) {
@@ -12467,20 +12499,45 @@ class ItemList extends _react.Component {
     }));
   }
 
-  hasViewCard() {
-    const {
-      children
-    } = this.props;
+  someChild(predicate) {
     let result = false;
 
-    _react.Children.forEach(children, child => {
-      if (child && child.props && child.props.view === 'card') {
+    _react.Children.forEach(this.props.children, child => {
+      if (child && predicate(child)) {
         result = true;
       }
     });
 
     return result;
   }
+  /**
+   * There are some states where we can't manage hoverable state
+   */
+
+
+  canManageHoverableState() {
+    const {
+      reorderable,
+      selectable
+    } = this.props;
+    return !reorderable && !selectable;
+  }
+
+  isHoverable() {
+    if (!this.canManageHoverableState()) {
+      return false;
+    }
+
+    return this.props.hoverable || this.hasHoverableCard();
+  }
+
+  hasViewCard() {
+    return this.someChild(child => child.props && child.props.view === 'card');
+  }
+
+  hasHoverableCard() {
+    return this.someChild(child => child.props && !!child.props.hoverable);
+  }
 
   renderReorderable({
     baseClassName,
@@ -12539,7 +12596,7 @@ class ItemList extends _react.Component {
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(this.props.baseClassName, {
-        [`${this.props.baseClassName}--hoverable`]: hoverable && !reorderable && !selectable,
+        [`${this.props.baseClassName}--hoverable`]: this.isHoverable(),
         [`${this.props.baseClassName}--stretchable`]: stretchable,
         [`${this.props.baseClassName}--selectable`]: selectable,
         [`${this.props.baseClassName}--cards`]: this.hasViewCard()
@@ -12634,10 +12691,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const VIEW_SIMPLE = 'simple';
 const VIEW_CARD = 'card';
-/**
- * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
- * a combination of icon, text title and content (similar to [Media](#!/Media)).
- * @since 0.0.48
+/**
+ * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
+ * a combination of icon, text title and content (similar to [Media](#!/Media)).
+ * @since 0.0.48
  */
 
 class Item extends _react.Component {
@@ -12706,6 +12763,7 @@ class Item extends _react.Component {
       value,
       tooltip,
       disabled,
+      hoverable,
       ...props
     } = this.props;
 
@@ -12726,7 +12784,8 @@ class Item extends _react.Component {
     const item = /*#__PURE__*/_react.default.createElement(Tag, _extends({
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled
+        [`${baseClassName}--disabled`]: disabled,
+        [`${baseClassName}--hoverable`]: hoverable
       }, className)
     }, props), /*#__PURE__*/_react.default.createElement(_Media.default, {
       image: this.renderIcon(icon),
@@ -12752,79 +12811,86 @@ class Item extends _react.Component {
 }
 
 Item.propTypes = {
-  /**
-   * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
-   * @since 0.0.48
+  /**
+   * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
+   * @since 0.0.48
    */
   component: _propTypes.default.elementType,
 
-  /**
-   * View mode.
-   * @since 2.1.0
+  /**
+   * View mode.
+   * @since 2.1.0
    */
   view: _propTypes.default.oneOf([VIEW_SIMPLE, VIEW_CARD]),
 
-  /**
-   * Icon.
-   * @since 0.0.48
+  /**
+   * Icon.
+   * @since 0.0.48
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Title.
-   * @since 0.0.48
+  /**
+   * Title.
+   * @since 0.0.48
    */
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Content for footer.
-   * @since 2.1.0
+  /**
+   * Content for footer.
+   * @since 2.1.0
    */
   footer: _propTypes.default.node,
 
-  /**
-   * Description. Renders as small grey text.
-   * @since 2.1.0
+  /**
+   * Description. Renders as small grey text.
+   * @since 2.1.0
    */
   description: _propTypes.default.node,
 
-  /**
-   * Content of the `Item`.
-   * @since 0.0.48
+  /**
+   * Content of the `Item`.
+   * @since 0.0.48
    */
   children: _propTypes.default.node,
 
-  /**
-   * An unique value. It needs only in ItemList with selectable view.
-   * @since 2.3.0
+  /**
+   * An unique value. It needs only in ItemList with selectable view.
+   * @since 2.3.0
    */
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
-  /**
-   * Tooltip for component.
-   * @since 2.5.1
+  /**
+   * Tooltip for component.
+   * @since 2.5.1
    */
   tooltip: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * Whether disabled or not.
-   * @since 3.15.0
+  /**
+   * Whether disabled or not.
+   * @since 3.15.0
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Add hover shadow and pointer cursor.
+   * @since 3.26.0
    */
-  disabled: _propTypes.default.bool
+  hoverable: _propTypes.default.bool
 };
 Item.defaultProps = {
   component: 'div',
   view: VIEW_SIMPLE,
+  hoverable: undefined,
   title: undefined,
   description: undefined,
   icon: undefined,
@@ -13090,104 +13156,104 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 const propTypes = {
-  /**
-   * Type of the `Layout`
-   * @since 1.4.0
+  /**
+   * Type of the `Layout`
+   * @since 1.4.0
    */
   type: _propTypes.default.oneOf(['fluid', 'simplified']),
 
-  /**
-   * Header content.
-   * @since 1.4.0
+  /**
+   * Header content.
+   * @since 1.4.0
    */
   header: _propTypes.default.node,
 
-  /**
-   * Define header position - always on top (fixed) or static.
-   * @since 1.4.0
+  /**
+   * Define header position - always on top (fixed) or static.
+   * @since 1.4.0
    */
   headerFixed: _propTypes.default.bool,
 
-  /**
-   * Additional content at the top of the header.
-   * @since 3.2.0
+  /**
+   * Additional content at the top of the header.
+   * @since 3.2.0
    */
   headerAddon: _propTypes.default.node,
 
-  /**
-   * Sidebar content.
-   * @since 1.4.0
+  /**
+   * Sidebar content.
+   * @since 1.4.0
    */
   sidebar: _propTypes.default.node,
 
-  /**
-   * Sidebar type.
-   * @since 3.2.0
+  /**
+   * Sidebar type.
+   * @since 3.2.0
    */
   sidebarType: _propTypes.default.oneOf(['collapsed', 'folded']),
 
-  /**
-   * Define if sidebar can collapse.
-   * @since 1.4.0
+  /**
+   * Define if sidebar can collapse.
+   * @since 1.4.0
    */
   sidebarCollapsible: _propTypes.default.bool,
 
-  /**
-   * Sidebar collapsed state.
-   * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
-   *
-   * @since 1.4.0
+  /**
+   * Sidebar collapsed state.
+   * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
+   *
+   * @since 1.4.0
    */
   sidebarCollapsed: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.array]),
 
-  /**
-   * Additional content between header and main content.
-   * @since 1.4.0
+  /**
+   * Additional content between header and main content.
+   * @since 1.4.0
    */
   contentAddon: _propTypes.default.node,
 
-  /**
-   * Content header.
-   * @since 3.0.0
+  /**
+   * Content header.
+   * @since 3.0.0
    */
   contentHeader: _propTypes.default.node,
 
-  /**
-   * Footer content.
-   * @since 1.4.0
+  /**
+   * Footer content.
+   * @since 1.4.0
    */
   footer: _propTypes.default.node,
 
-  /**
-   * Main content of the `Layout`.
-   * @since 1.4.0
+  /**
+   * Main content of the `Layout`.
+   * @since 1.4.0
    */
   children: _propTypes.default.node,
 
-  /**
-   * Width of the content
-   * @since 3.0.0
+  /**
+   * Width of the content
+   * @since 3.0.0
    */
   width: _propTypes.default.oneOf(['sm', 'md', 'lg']),
 
-  /**
-   * Sidebar onToggle handler.
-   * The handler is called with two args:
-   *
-   * * Whether collapsed or not.
-   * * In which mode: responsive or desktop.
-   *
-   * @since 1.4.0
+  /**
+   * Sidebar onToggle handler.
+   * The handler is called with two args:
+   *
+   * * Whether collapsed or not.
+   * * In which mode: responsive or desktop.
+   *
+   * @since 1.4.0
    */
   onSidebarToggle: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -13237,8 +13303,8 @@ const subscribeClickOutside = (refs, handler) => {
     document.removeEventListener('touchstart', listener);
   };
 };
-/**
- * @since 1.4.0
+/**
+ * @since 1.4.0
  */
 
 
@@ -13931,10 +13997,10 @@ const getHumanTotalRows = ({
       return null;
   }
 };
-/**
- * `List` component is used for displaying a collection of tabular data.
- * [More details about designing of lists.](#!/Sets%20of%20Objects)
- * @since 0.0.42
+/**
+ * `List` component is used for displaying a collection of tabular data.
+ * [More details about designing of lists.](#!/Sets%20of%20Objects)
+ * @since 0.0.42
  */
 
 
@@ -14668,9 +14734,14 @@ class List extends _react.Component {
 
     if (totalRows && /*#__PURE__*/(0, _react.isValidElement)(pagination)) {
       const {
-        itemsPerPageOptions = _Pagination.ITEMS_PER_PAGE_OPTIONS
+        itemsPerPageOptions = _Pagination.ITEMS_PER_PAGE_OPTIONS,
+        itemsPerPage
       } = pagination.props;
 
+      if (Number.isInteger(itemsPerPage)) {
+        return totalRows > itemsPerPage;
+      }
+
       if (Array.isArray(itemsPerPageOptions)) {
         const numericOptions = itemsPerPageOptions.filter(v => Number(v) === v);
 
@@ -15123,214 +15194,214 @@ class List extends _react.Component {
 }
 
 List.propTypes = {
-  /**
-   * Columns definition.
-   *
-   * In addition to the properties described below, you can use any native properties
-   * supported by the `TH` element like `className`, `style`, etc.
-   * @since 0.0.42
+  /**
+   * Columns definition.
+   *
+   * In addition to the properties described below, you can use any native properties
+   * supported by the `TH` element like `className`, `style`, etc.
+   * @since 0.0.42
    */
   columns: _propTypes.default.arrayOf(_propTypes.default.shape({
-    /**
-     * Unique column key.
+    /**
+     * Unique column key.
      */
     key: _propTypes.default.string.isRequired,
 
-    /**
-     * Column title.
+    /**
+     * Column title.
      */
     title: _propTypes.default.node,
 
-    /**
-     * Optional cell renderer function: `row => Component`. By default render value of cell.
-     * The renderer function can also returns a configuration object like: `{children: 'cell content', colSpan: 3}`
+    /**
+     * Optional cell renderer function: `row => Component`. By default render value of cell.
+     * The renderer function can also returns a configuration object like: `{children: 'cell content', colSpan: 3}`
      */
     render: _propTypes.default.func,
 
-    /**
-     * Is column sortable.
-     * Default is `false`
+    /**
+     * Is column sortable.
+     * Default is `false`
      */
     sortable: _propTypes.default.bool,
 
-    /**
-     * Optional function for row comparison: `(row1, row2) => -1 | 0 | 1`
+    /**
+     * Optional function for row comparison: `(row1, row2) => -1 | 0 | 1`
      */
     sort: _propTypes.default.func,
 
-    /**
-     * Column alignment.
+    /**
+     * Column alignment.
      */
     align: _propTypes.default.oneOf(['left', 'center', 'right']),
 
-    /**
-     * Truncate the text in cell with an ellipsis.
+    /**
+     * Truncate the text in cell with an ellipsis.
      */
     truncate: _propTypes.default.bool,
 
-    /**
-     * Determine type of column content.
-     *
-     * * title - There should a title of the row.
-     * * controls - There should be some control: a button or a dropdown.
-     * * actions - There should be the ListAction component.
+    /**
+     * Determine type of column content.
+     *
+     * * title - There should a title of the row.
+     * * controls - There should be some control: a button or a dropdown.
+     * * actions - There should be the ListAction component.
      */
     type: _propTypes.default.oneOf(['title', 'controls', 'actions'])
   })).isRequired,
 
-  /**
-   * Array of row objects.
-   *
-   * Each row must contains `key` property, all columns keys, and can contain `disabled` property.
-   * @since 0.0.42
+  /**
+   * Array of row objects.
+   *
+   * Each row must contains `key` property, all columns keys, and can contain `disabled` property.
+   * @since 0.0.42
    */
   data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    /**
-     * Unique column key. This property can by renamed using `rowKey` property of List.
+    /**
+     * Unique column key. This property can by renamed using `rowKey` property of List.
      */
     key: _propTypes.default.string,
 
-    /**
-     * Optional property for disabling ability to select this row.
+    /**
+     * Optional property for disabling ability to select this row.
      */
     disabled: _propTypes.default.bool,
 
-    /**
-     * Optional array of children rows.
+    /**
+     * Optional array of children rows.
      */
     data: _propTypes.default.array
   })),
 
-  /**
-   * Current sort column key
-   * @since 0.0.42
+  /**
+   * Current sort column key
+   * @since 0.0.42
    */
   sortColumn: _propTypes.default.string,
 
-  /**
-   * Sort direction of the column being sorted.
-   * @since 0.0.42
+  /**
+   * Sort direction of the column being sorted.
+   * @since 0.0.42
    */
   sortDirection: _propTypes.default.oneOf(['ASC', 'DESC']),
 
-  /**
-   * Sort change handler
-   * @since 0.0.42
+  /**
+   * Sort change handler
+   * @since 0.0.42
    */
   onSortChange: _propTypes.default.func,
 
-  /**
-   * Array of keys of selected rows
-   * @since 0.0.42
+  /**
+   * Array of keys of selected rows
+   * @since 0.0.42
    */
   selection: _propTypes.default.array,
 
-  /**
-   * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
-   * @since 0.0.42
+  /**
+   * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
+   * @since 0.0.42
    */
   onSelectionChange: _propTypes.default.func,
 
-  /**
-   * Renderer for a selection checkbox. Allow to replace checkboxes in the List by a custom implementation.
-   * @since 3.19.0
+  /**
+   * Renderer for a selection checkbox. Allow to replace checkboxes in the List by a custom implementation.
+   * @since 3.19.0
    */
   renderSelectionCheckbox: _propTypes.default.func,
 
-  /**
-   * Row's key getter. Could be a string or function like: `row => <unique_string>`
-   * @since 0.0.45
+  /**
+   * Row's key getter. Could be a string or function like: `row => <unique_string>`
+   * @since 0.0.45
    */
   rowKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
 
-  /**
-   * Renderer for a row body. Should return ReactNode.
-   * @since 1.12.0
+  /**
+   * Renderer for a row body. Should return ReactNode.
+   * @since 1.12.0
    */
   renderRowBody: _propTypes.default.func,
 
-  /**
-   * Array of keys of expanded rows
-   * @since 1.12.0
+  /**
+   * Array of keys of expanded rows
+   * @since 1.12.0
    */
   expandedRows: _propTypes.default.array,
 
-  /**
-   * Array of keys of rows which not have expand indicator
-   * @since 1.12.0
+  /**
+   * Array of keys of rows which not have expand indicator
+   * @since 1.12.0
    */
   notExpandableRows: _propTypes.default.array,
 
-  /**
-   * Rows expanding change handler.
-   * @since 1.12.0
+  /**
+   * Rows expanding change handler.
+   * @since 1.12.0
    */
   onExpandedRowsChange: _propTypes.default.func,
 
-  /**
-   * Array of keys of loading rows. They are displayed instead of checkboxes.
-   * @since 2.5.0
+  /**
+   * Array of keys of loading rows. They are displayed instead of checkboxes.
+   * @since 2.5.0
    */
   loadingRows: _propTypes.default.array,
 
-  /**
-   * A `Pagination` element. It displays at the top and the bottom of the list. When pagination is defined, the built-in sort is disabled.
-   * @since 2.4.0
+  /**
+   * A `Pagination` element. It displays at the top and the bottom of the list. When pagination is defined, the built-in sort is disabled.
+   * @since 2.4.0
    */
   pagination: _propTypes.default.node,
 
-  /**
-   * Total rows count, including nested rows. Usually, it uses together with pagination.
-   * @since 2.4.0
+  /**
+   * Total rows count, including nested rows. Usually, it uses together with pagination.
+   * @since 2.4.0
    */
   totalRows: _propTypes.default.number,
 
-  /**
-   * A `Toolbar` element.
-   * @since 2.4.0
+  /**
+   * A `Toolbar` element.
+   * @since 2.4.0
    */
   toolbar: _propTypes.default.node,
 
-  /**
-   * A flag that all rows are selected.
-   * @since 2.4.0
+  /**
+   * A flag that all rows are selected.
+   * @since 2.4.0
    */
   allRowsSelected: _propTypes.default.bool,
 
-  /**
-   * A callback executed when the allRowsSelected prop is changed.
-   * @since 2.4.0
+  /**
+   * A callback executed when the allRowsSelected prop is changed.
+   * @since 2.4.0
    */
   onAllRowsSelectedChange: _propTypes.default.func,
 
-  /**
-   * Filtered list. Manages toolbar visibility when data is absent and defines the defaults for empty view.
-   * @since 3.0.1
+  /**
+   * Filtered list. Manages toolbar visibility when data is absent and defines the defaults for empty view.
+   * @since 3.0.1
    */
   filtered: _propTypes.default.bool,
 
-  /**
-   * A custom view for the case when data is absent.
-   * @since 2.5.0
+  /**
+   * A custom view for the case when data is absent.
+   * @since 2.5.0
    */
   emptyView: _propTypes.default.node,
 
-  /**
-   * Which part of the List component should be replaced by the empty view.
-   * @since 2.6.0
-   * @deprecated Use `filtered` instead.
+  /**
+   * Which part of the List component should be replaced by the empty view.
+   * @since 2.6.0
+   * @deprecated Use `filtered` instead.
    */
   emptyViewMode: _propTypes.default.oneOf(['all', 'items']),
 
-  /**
-   * A slot on the right of the items.
-   * @since 2.6.0
+  /**
+   * A slot on the right of the items.
+   * @since 2.6.0
    */
   sidebar: _propTypes.default.node,
 
-  /**
-   * Custom localization messages.
-   * @since 2.6.0
+  /**
+   * Custom localization messages.
+   * @since 2.6.0
    */
   locale: _propTypes.default.shape({
     selectAll: _propTypes.default.node,
@@ -15340,49 +15411,49 @@ List.propTypes = {
     selectedRows: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
   }),
 
-  /**
-   * Render List row's content vertically.
-   * When some number is specified, it turns into vertical mode automatically if the List's width is less than the provided number.
-   * @since 3.3.0
+  /**
+   * Render List row's content vertically.
+   * When some number is specified, it turns into vertical mode automatically if the List's width is less than the provided number.
+   * @since 3.3.0
    */
   vertical: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
 
-  /**
-   * Indicate the loading state of the list.
-   * @since 3.3.1
+  /**
+   * Indicate the loading state of the list.
+   * @since 3.3.1
    */
   loading: _propTypes.default.bool,
 
-  /**
-   * Apply some props to each row.
-   *
-   * `virtual` - Virtual row does not have any controls.
-   *
-   * @since 3.11.0
+  /**
+   * Apply some props to each row.
+   *
+   * `virtual` - Virtual row does not have any controls.
+   *
+   * @since 3.11.0
    */
   rowProps: _propTypes.default.oneOfType([_propTypes.default.shape({
     virtual: _propTypes.default.bool
   }), _propTypes.default.func]),
 
-  /**
-   * Enable reorderable view.
-   * @since 3.18.0
+  /**
+   * Enable reorderable view.
+   * @since 3.18.0
    */
   reorderable: _propTypes.default.bool,
 
-  /**
-   * Reorder end handler.
-   * @since 3.18.0
+  /**
+   * Reorder end handler.
+   * @since 3.18.0
    */
   onReorderEnd: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -16138,9 +16209,9 @@ const useTranslate = namespace => {
 
 exports.useTranslate = useTranslate;
 
-/**
- * LocaleProvider provides a uniform localization support for built-in text of components.
- * @since 0.0.42
+/**
+ * LocaleProvider provides a uniform localization support for built-in text of components.
+ * @since 0.0.42
  */
 class LocaleProvider extends _react.PureComponent {
   getChildContext() {
@@ -16875,9 +16946,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * `MenuBaseItem` component.
- * @since 0.0.60
+/**
+ * `MenuBaseItem` component.
+ * @since 0.0.60
  */
 const MenuBaseItem = ({
   baseClassName,
@@ -16900,37 +16971,37 @@ const MenuBaseItem = ({
 }, label));
 
 MenuBaseItem.propTypes = {
-  /**
-   * Icon
-   * @since 0.0.60
+  /**
+   * Icon
+   * @since 0.0.60
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Right label of item.
-   * @since 0.0.60
+  /**
+   * Right label of item.
+   * @since 0.0.60
    */
   label: _propTypes.default.node,
 
-  /**
-   * Content of the `MenuBaseItem`.
-   * @since 0.0.60
+  /**
+   * Content of the `MenuBaseItem`.
+   * @since 0.0.60
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * Component to render as the root element. Useful when rendering a `MenuBaseItem` as other component or tag.
-   * @since 1.9.1
+  /**
+   * Component to render as the root element. Useful when rendering a `MenuBaseItem` as other component or tag.
+   * @since 1.9.1
    */
   component: _propTypes.default.elementType
 };
@@ -17627,12 +17698,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-/**
- * `Overlay` component.
+/**
+ * `Overlay` component.
  */
 const overlays = [];
-/**
- * @since 0.0.65
+/**
+ * @since 0.0.65
  */
 
 class Overlay extends _react.Component {
@@ -17871,75 +17942,75 @@ class Overlay extends _react.Component {
 exports["default"] = Overlay;
 
 _defineProperty(Overlay, "propTypes", {
-  /**
-   * Toggles visibility.
+  /**
+   * Toggles visibility.
    */
   isOpen: _propTypes.default.bool,
 
-  /**
-   * Overlay placement.
+  /**
+   * Overlay placement.
    */
   placement: _propTypes.default.oneOf(['center', 'left', 'right']),
 
-  /**
-   * Overlay size.
+  /**
+   * Overlay size.
    */
   size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
 
-  /**
-   * onClose handler.
+  /**
+   * onClose handler.
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Indicating if clicking the backdrop should close the overlay.
+  /**
+   * Indicating if clicking the backdrop should close the overlay.
    */
   canCloseOnBackdropClick: _propTypes.default.bool,
 
-  /**
-   * Indicating if pressing the escape key should close the overlay.
+  /**
+   * Indicating if pressing the escape key should close the overlay.
    */
   canCloseOnEscapePress: _propTypes.default.bool,
 
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
+  /**
+   * Block with an image, placed at the side of the component
+   * @since 3.25.0
    */
   sideBanner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
+  /**
+   * Additional properties for the sideBanner
+   * @since 3.25.0
    */
   sideBannerContainer: _propTypes.default.shape({
-    /**
-     * Values for css background property
+    /**
+     * Values for css background property
      */
     background: _propTypes.default.string,
 
-    /**
-     * One of: center, flex-start, flex-end
+    /**
+     * One of: center, flex-start, flex-end
      */
     align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
   }),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   style: _propTypes.default.object,
 
-  /**
-   * Content of the `Overlay`.
+  /**
+   * Content of the `Overlay`.
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 });
@@ -18134,9 +18205,9 @@ exports.ITEMS_PER_PAGE_OPTIONS = ITEMS_PER_PAGE_OPTIONS;
 const VIEW_DEFAULT = 'default';
 const VIEW_POPOVER = 'popover';
 
-/**
- * `Pagination` component is used for navigating objects in [List](#!/List) which content is displayed on multiple pages.
- * @since 0.0.54
+/**
+ * `Pagination` component is used for navigating objects in [List](#!/List) which content is displayed on multiple pages.
+ * @since 0.0.54
  */
 const Pagination = ({
   baseClassName = `${_constants.CLS_PREFIX}pagination`,
@@ -18292,6 +18363,8 @@ var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "
 
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 
+var _reactTransitionGroup = __webpack_require__(/*! react-transition-group */ "../node_modules/react-transition-group/esm/index.js");
+
 var _Translate = __webpack_require__(/*! ../Translate */ "./components/Translate/index.js");
 
 var _Heading = _interopRequireDefault(__webpack_require__(/*! ../Heading */ "./components/Heading/index.tsx"));
@@ -18372,13 +18445,21 @@ class Panel extends _react.Component {
       collapsed
     } = this.state;
     const handleToggle = collapsible ? this.handleToggle : undefined;
-    return /*#__PURE__*/_react.default.createElement("div", _extends({
+    const rootRef = /*#__PURE__*/(0, _react.createRef)();
+    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      classNames: `${baseClassName}-`,
+      in: !collapsed,
+      timeout: 300,
+      nodeRef: rootRef
+    }, /*#__PURE__*/_react.default.createElement("div", _extends({
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--collapsible`]: collapsible,
         [`${baseClassName}--collapsed`]: collapsed,
         [`${baseClassName}--expanded`]: !collapsed
       }, className)
-    }, props), title && /*#__PURE__*/_react.default.createElement("div", {
+    }, props, {
+      ref: rootRef
+    }), title && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__header`,
       onClick: handleToggle
     }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
@@ -18397,7 +18478,7 @@ class Panel extends _react.Component {
       onClick: handleToggle
     }))), /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content`
-    }, children));
+    }, children)));
   }
 
 }
@@ -19165,8 +19246,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-/**
- * `Popper` component.
+/**
+ * `Popper` component.
  */
 class Popper extends _react.Component {
   constructor(...args) {
@@ -19345,75 +19426,75 @@ class Popper extends _react.Component {
 }
 
 Popper.propTypes = {
-  /**
-   * Whether show popper content.
+  /**
+   * Whether show popper content.
    */
   show: _propTypes.default.bool,
 
-  /**
-   * Content of the `Popper`.
+  /**
+   * Content of the `Popper`.
    */
   children: _propTypes.default.node,
 
-  /**
-   * Target for popper.
+  /**
+   * Target for popper.
    */
   target: _propTypes.default.any.isRequired,
 
-  /**
-   * A React reference to the DOM element that needs for calculating the position of the popup.
+  /**
+   * A React reference to the DOM element that needs for calculating the position of the popup.
    */
   targetRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(HTMLElement)
   })]),
 
-  /**
-   * Arrow element of popper
+  /**
+   * Arrow element of popper
    */
   arrow: _propTypes.default.element,
 
-  /**
-   * Placement for popper.
+  /**
+   * Placement for popper.
    */
   placement: _propTypes.default.oneOf(['auto', 'auto-start', 'auto-end', 'auto-top', 'auto-right', 'auto-bottom', 'auto-left', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
 
-  /**
-   * The behavior used to change the popper's placement.
+  /**
+   * The behavior used to change the popper's placement.
    */
   behavior: _propTypes.default.oneOfType([_propTypes.default.oneOf(['flip', 'clockwise', 'counterclockwise']), _propTypes.default.arrayOf(_propTypes.default.string)]),
 
-  /**
-   * Shift your popper on both axis.
+  /**
+   * Shift your popper on both axis.
    */
   offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
-  /**
-   * Update callback function
+  /**
+   * Update callback function
    */
   onUpdate: _propTypes.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * zIndex value.
+  /**
+   * zIndex value.
    */
   zIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
-  /**
-   * Boundaries element for preventOverflow property.
+  /**
+   * Boundaries element for preventOverflow property.
    */
   boundariesElement: _propTypes.default.oneOfType([_propTypes.default.oneOf(['scrollParent', 'window', 'viewport']), _propTypes.default.instanceOf(HTMLElement)]),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   style: _propTypes.default.object
 };
@@ -20045,39 +20126,39 @@ const ProgressStep = ({
   switch (status) {
     case STATUS_NOT_STARTED:
       intent = 'inactive';
-      icon = false;
+      icon = 'dot';
       break;
 
     case STATUS_RUNNING:
-      intent = 'info';
-      icon = false;
+      intent = false;
+      icon = 'dot';
       break;
 
     case STATUS_DONE:
       intent = 'success';
-      icon = 'check-mark';
+      icon = 'check-mark-circle-filled';
       break;
 
     case STATUS_WARNING:
       intent = 'warning';
-      icon = 'triangle-exclamation-mark';
+      icon = 'triangle-exclamation-mark-filled';
       break;
 
     case STATUS_ERROR:
       intent = 'danger';
-      icon = 'exclamation-mark-circle';
+      icon = 'exclamation-mark-circle-filled';
       break;
 
     case STATUS_CANCELED:
       progress = 0;
       intent = 'inactive';
-      icon = 'cross-mark';
+      icon = 'cross-mark-circle-filled';
       break;
   }
 
   icon = _Icon.default.create(icon, {
     className: `${baseClassName}__icon`,
-    size: _Icon.ICON_SIZE_12,
+    size: _Icon.ICON_SIZE_16,
     intent
   });
 
@@ -20095,19 +20176,21 @@ const ProgressStep = ({
     className: `${baseClassName}__media`
   }, icon), /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__body`
-  }, (title || statusText) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (title || statusText || _react.Children.toArray(children).length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__labels`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${baseClassName}__labels-body`
   }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__title`
-  }, title), statusText && /*#__PURE__*/_react.default.createElement("div", {
+  }, title), _react.Children.toArray(children).length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${baseClassName}__content`
+  }, children) : null), statusText && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__status`
   }, statusText)), STATUS_RUNNING === status && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     className: `${baseClassName}__progress`,
     intent: "info",
     progress: progress
-  }), _react.Children.toArray(children).length ? /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__content`
-  }, children) : null));
+  })));
 };
 
 ProgressStep.propTypes = {
@@ -20709,6 +20792,8 @@ var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./com
 
 var _VerticalContext = _interopRequireWildcard(__webpack_require__(/*! ../VerticalContext */ "./components/VerticalContext/index.tsx"));
 
+var _FormContext = _interopRequireDefault(__webpack_require__(/*! ../Form/FormContext */ "./components/Form/FormContext.tsx"));
+
 __webpack_require__(/*! ./Section.less */ "./components/Section/Section.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20721,23 +20806,29 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const getVertical = (props, verticalContext) => {
-  if (props.vertical !== null && props.vertical !== undefined) {
-    return props.vertical;
-  }
+const getErrorsForChildren = (form, children) => {
+  let errors = {};
 
-  if (verticalContext !== undefined) {
-    return verticalContext;
-  }
+  _react.Children.forEach(children, child => {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return;
+    }
 
-  return undefined;
-};
-/**
- * `Section` component is used for dividing of complex content into groups for better readability
- * and comprehension of the presented information.
- * @since 0.0.54
- */
+    if (child.props.name) {
+      errors = { ...errors,
+        ...form.getErrors(child.props.name)
+      };
+    }
+
+    if (child.props.children) {
+      errors = { ...errors,
+        ...getErrorsForChildren(form, child.props.children)
+      };
+    }
+  });
 
+  return errors;
+};
 
 class Section extends _react.Component {
   constructor(...args) {
@@ -20750,9 +20841,7 @@ class Section extends _react.Component {
     _defineProperty(this, "handleResize", ({
       bounds
     }) => {
-      const vertical = getVertical(this.props, this.context);
-
-      if (vertical !== undefined) {
+      if (this.props.vertical !== undefined) {
         return;
       }
 
@@ -20770,16 +20859,24 @@ class Section extends _react.Component {
         collapsed
       }) => ({
         collapsed: !collapsed
-      }));
+      }), () => {
+        if (this.props.onToggle) {
+          this.props.onToggle(this.state.collapsed);
+        }
+      });
     });
   }
 
   static getDerivedStateFromProps(props, state) {
     const {
-      collapsed
+      collapsible,
+      collapsed,
+      form,
+      children
     } = props;
     const {
-      prevCollapsed
+      prevCollapsed,
+      prevErrors
     } = state;
     const nextState = {};
 
@@ -20788,6 +20885,17 @@ class Section extends _react.Component {
     }
 
     nextState.prevCollapsed = collapsed;
+
+    if (collapsible && form) {
+      const errors = getErrorsForChildren(form, children);
+
+      if (JSON.stringify(errors) !== JSON.stringify(prevErrors) && Object.keys(errors).length > 0) {
+        nextState.collapsed = false;
+      }
+
+      nextState.prevErrors = errors;
+    }
+
     return nextState;
   }
 
@@ -20866,13 +20974,14 @@ class Section extends _react.Component {
       collapsed,
       onTitleChange,
       onClose,
+      onToggle,
       buttons,
       vertical: verticalProp,
       children,
+      form,
       ...props
     } = this.props;
-    let vertical = getVertical(this.props, this.context);
-    vertical = vertical === undefined ? this.state.vertical : vertical;
+    const vertical = verticalProp === undefined ? this.state.vertical : verticalProp;
     return /*#__PURE__*/_react.default.createElement(_VerticalContext.default.Provider, {
       value: vertical
     }, /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
@@ -20909,87 +21018,121 @@ class Section extends _react.Component {
 
 }
 
-Section.propTypes = {
-  /**
-   * Title of the section.
-   * @since 0.0.54
+const propTypes = {
+  /**
+   * Title of the section.
+   * @since 0.0.54
    */
   title: _propTypes.default.node,
 
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.54
+  /**
+   * Visual intent color to apply to component.
+   * @since 0.0.54
    */
   intent: _propTypes.default.oneOf(['danger', 'warning', 'success', 'inactive']),
 
-  /**
-   * Is section collapsible.
-   * @since 0.0.54
+  /**
+   * Is section collapsible.
+   * @since 0.0.54
    */
   collapsible: _propTypes.default.bool,
 
-  /**
-   * Is section collapsed now.
-   * @since 0.0.54
+  /**
+   * Is section collapsed now.
+   * @since 0.0.54
    */
   collapsed: _propTypes.default.bool,
 
-  /**
-   * Event handler of title change with inline editing form.
-   * @since 0.0.54
+  /**
+   * Event handler of title change with inline editing form.
+   * @since 0.0.54
    */
   onTitleChange: _propTypes.default.func,
 
-  /**
-   * Event handler of closing section with X-sign at the right.
-   * @since 0.0.54
+  /**
+   * Event handler of closing section with X-sign at the right.
+   * @since 0.0.54
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Array of custom section action button at the right.
-   * @since 0.0.54
+  /**
+   * A callback executed when the section collapsing.
+   * @since 3.26.0
+   */
+  onToggle: _propTypes.default.func,
+
+  /**
+   * Array of custom section action button at the right.
+   * @since 0.0.54
    */
   buttons: _propTypes.default.arrayOf(_propTypes.default.element),
 
-  /**
-   * Vertical or horizontal section view.
-   * Section view will be automatically switched if this parameter is not specified explicitly.
-   * @since 0.3.0
+  /**
+   * Vertical or horizontal section view.
+   * Section view will be automatically switched if this parameter is not specified explicitly.
+   * @since 0.3.0
    */
   vertical: _propTypes.default.bool,
 
-  /**
-   * Content of the `Section`.
-   * @since 0.0.54
+  /**
+   * Content of the `Section`.
+   * @since 0.0.54
    */
   children: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
-  baseClassName: _propTypes.default.string
+  baseClassName: _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  form: _propTypes.default.object
 };
-Section.defaultProps = {
-  title: null,
-  intent: null,
+const defaultProps = {
+  title: undefined,
+  intent: undefined,
   collapsible: false,
   collapsed: false,
-  onTitleChange: null,
-  onClose: null,
-  buttons: null,
-  vertical: null,
-  children: null,
-  className: null,
-  baseClassName: `${_constants.CLS_PREFIX}section`
+  onTitleChange: undefined,
+  onClose: undefined,
+  onToggle: undefined,
+  buttons: undefined,
+  vertical: undefined,
+  children: undefined,
+  className: undefined,
+  baseClassName: `${_constants.CLS_PREFIX}section`,
+  form: undefined
+};
+Section.propTypes = propTypes;
+Section.defaultProps = defaultProps;
+/**
+ * `Section` component is used for dividing of complex content into groups for better readability
+ * and comprehension of the presented information.
+ * @since 0.0.54
+ */
+
+const SectionWrapper = props => {
+  const form = (0, _react.useContext)(_FormContext.default);
+  const verticalContext = (0, _react.useContext)(_VerticalContext.default);
+  const vertical = props.vertical === undefined ? verticalContext : props.vertical;
+  return /*#__PURE__*/_react.default.createElement(Section, _extends({}, props, {
+    form: form,
+    vertical: vertical
+  }));
 };
-Section.contextType = _VerticalContext.default;
-var _default = Section;
+
+SectionWrapper.displayName = 'Section';
+SectionWrapper.propTypes = propTypes;
+SectionWrapper.defaultProps = defaultProps;
+SectionWrapper.WrappedComponent = Section;
+var _default = SectionWrapper;
 exports["default"] = _default;
 
 /***/ }),
@@ -21709,12 +21852,12 @@ const collect = (children, options = [], group) => {
         ...props
       } = child.props;
 
-      if (typeof value !== 'string' && typeof value !== 'number' && typeof children === 'string') {
-        value = children;
-      }
-
-      if (!value) {
-        throw new Error('The value can only be a number or a string.');
+      if (typeof value !== 'string' && typeof value !== 'number') {
+        if (typeof children === 'string' && children) {
+          value = children;
+        } else {
+          throw new Error('The value can only be a number or a string.');
+        }
       }
 
       let label;
@@ -21767,9 +21910,9 @@ const getNextValue = (value, prevValue) => {
   return value;
 };
 
-/**
- * `Select` component is used for making a choice among a set of related options.
- * @since 2.3.0
+/**
+ * `Select` component is used for making a choice among a set of related options.
+ * @since 2.3.0
  */
 const Select = ({
   id,
@@ -22297,7 +22440,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     "aria-hidden": "true",
     focusable: "false"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
+    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1\r .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
   })))), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
@@ -24822,58 +24965,58 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /* eslint-disable react/no-unused-prop-types */
 
-/**
- * `Tab` is an individual element of the [Tabs](#!/Tabs) component.
- *
- * Each `Tab` can display an icon near the tab name for easier identification.
- * It can also display a [Label](#!/Label) next to the tab name for showing additional information about its content.
- * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
- * @since 0.0.35
+/**
+ * `Tab` is an individual element of the [Tabs](#!/Tabs) component.
+ *
+ * Each `Tab` can display an icon near the tab name for easier identification.
+ * It can also display a [Label](#!/Label) next to the tab name for showing additional information about its content.
+ * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
+ * @since 0.0.35
  */
 const Tab = ({
   children
 }) => /*#__PURE__*/_react.default.createElement("div", null, children);
 
 Tab.propTypes = {
-  /**
-   * Tab title
-   * @since 0.0.35
+  /**
+   * Tab title
+   * @since 0.0.35
    */
   title: _propTypes.default.node.isRequired,
 
-  /**
-   * Label in tab title
-   * @since 0.0.42
+  /**
+   * Label in tab title
+   * @since 0.0.42
    */
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
 
-  /**
-   * Name of icon or Icon component for tab
-   * @since 0.0.42
+  /**
+   * Name of icon or Icon component for tab
+   * @since 0.0.42
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Activate callback.
-   * @since 0.0.43
+  /**
+   * Activate callback.
+   * @since 0.0.43
    */
   onActivate: _propTypes.default.func,
 
-  /**
-   * Close callback
-   * @since 0.0.58
+  /**
+   * Close callback
+   * @since 0.0.58
    */
   onClose: _propTypes.default.func,
 
-  /**
-   * Component to render as the root element.
-   * @since 2.5.1
+  /**
+   * Component to render as the root element.
+   * @since 2.5.1
    */
   component: _propTypes.default.elementType,
 
-  /**
-   * Tab content
-   * @since 0.0.47
+  /**
+   * Tab content
+   * @since 0.0.47
    */
   children: _propTypes.default.node
 };
@@ -24943,12 +25086,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 const ADDON_LEFT_PADDING = 5;
 const MIN_ADDON_WIDTH_DEFAULT = 150;
 const COLLAPSED_SEARCH_WIDTH = 60;
-/**
- * `Tabs` component is a content area with a group of individual [Tab](#!/Tab) elements, each displaying different content
- * in the same screen area. `Tabs` are used when you have too much content to display in one place at the same time, so
- * the content is broken into logical groups and each group is displayed under its own [Tab](#!/Tab) that serves both as a
- * group name and a navigation button.
- * @since 0.0.35
+/**
+ * `Tabs` component is a content area with a group of individual [Tab](#!/Tab) elements, each displaying different content
+ * in the same screen area. `Tabs` are used when you have too much content to display in one place at the same time, so
+ * the content is broken into logical groups and each group is displayed under its own [Tab](#!/Tab) that serves both as a
+ * group name and a navigation button.
+ * @since 0.0.35
  */
 
 class Tabs extends _react.Component {
@@ -25524,57 +25667,57 @@ class Tabs extends _react.Component {
 }
 
 Tabs.propTypes = {
-  /**
-   * Number of active tab
-   * @since 0.0.35
+  /**
+   * Number of active tab
+   * @since 0.0.35
    */
   active: _propTypes.default.number,
 
-  /**
-   * Addon for search bar, dropdown etc.
-   * @since 0.0.58
+  /**
+   * Addon for search bar, dropdown etc.
+   * @since 0.0.58
    */
   addon: _propTypes.default.element,
 
-  /**
-   * Placeholder for search bar, dropdown etc.
-   *
-   * @deprecated Do not use! Use `addon` instead!
-   * @since 0.0.42
+  /**
+   * Placeholder for search bar, dropdown etc.
+   *
+   * @deprecated Do not use! Use `addon` instead!
+   * @since 0.0.42
    */
   placeholder: _propTypes.default.element,
 
-  /**
-   * Minimum add-on width in pixels
-   * @since 0.0.58
+  /**
+   * Minimum add-on width in pixels
+   * @since 0.0.58
    */
   addonMinWidth: _propTypes.default.number,
 
-  /**
-   * Monospaced version of tabs (all visible tabs as wide as widest of them)
-   * @since 0.0.58
+  /**
+   * Monospaced version of tabs (all visible tabs as wide as widest of them)
+   * @since 0.0.58
    */
   monospaced: _propTypes.default.bool,
 
-  /**
-   * [SearchBar](#!/SearchBar) element
-   * @since 0.0.58
+  /**
+   * [SearchBar](#!/SearchBar) element
+   * @since 0.0.58
    */
   search: _propTypes.default.element,
 
-  /**
-   * [Tabs](#!/Tab)
-   * @since 0.0.47
+  /**
+   * [Tabs](#!/Tab)
+   * @since 0.0.47
    */
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element]),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -27722,9 +27865,9 @@ const isLikeText = node => {
 
   return false;
 };
-/**
- * `Translate` component.
- * @since 0.0.42
+/**
+ * `Translate` component.
+ * @since 0.0.42
  */
 
 
@@ -27767,49 +27910,49 @@ const Translate = ({
 };
 
 Translate.propTypes = {
-  /**
-   * A some prefix for the message key.
-   * @since 2.6.0
+  /**
+   * A some prefix for the message key.
+   * @since 2.6.0
    */
   namespace: _propTypes.default.string,
 
-  /**
-   * Translatable content or message key.
-   * @since 0.0.42
+  /**
+   * Translatable content or message key.
+   * @since 0.0.42
    */
   content: _propTypes.default.string,
 
-  /**
-   * Message params
-   * @since 0.0.42
+  /**
+   * Message params
+   * @since 0.0.42
    */
   params: _propTypes.default.object,
 
-  /**
-   * Fallback translation value.
-   * @since 0.0.47
+  /**
+   * Fallback translation value.
+   * @since 0.0.47
    */
   fallback: _propTypes.default.string,
 
-  /**
-   * Component to render as the root element. Useful when rendering a `Translate` as `<option>`.
-   * @since 0.0.42
+  /**
+   * Component to render as the root element. Useful when rendering a `Translate` as `<option>`.
+   * @since 0.0.42
    */
   component: _propTypes.default.elementType,
 
-  /**
-   * A set of translation messages. If the set contains a message key, the component uses an item from the set for rendering.
-   * @ignore
+  /**
+   * A set of translation messages. If the set contains a message key, the component uses an item from the set for rendering.
+   * @ignore
    */
   translators: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   unsafe: _propTypes.default.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   children: _propTypes.default.string
 };
@@ -88128,7 +88271,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 
     if (type === 'appear' && phase === 'done' && doneClassName) {
       className += " " + doneClassName;
-    } // This is for to force a repaint,
+    } // This is to force a repaint,
     // which is necessary in order to transition styles when adding a class name.
 
 
@@ -89198,7 +89341,10 @@ Transition.propTypes =  true ? {
    *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
    */
   nodeRef: prop_types__WEBPACK_IMPORTED_MODULE_2___default().shape({
-    current: typeof Element === 'undefined' ? (prop_types__WEBPACK_IMPORTED_MODULE_2___default().any) : prop_types__WEBPACK_IMPORTED_MODULE_2___default().instanceOf(Element)
+    current: typeof Element === 'undefined' ? (prop_types__WEBPACK_IMPORTED_MODULE_2___default().any) : function (propValue, key, componentName, location, propFullName, secret) {
+      var value = propValue[key];
+      return prop_types__WEBPACK_IMPORTED_MODULE_2___default().instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
+    }
   }),
 
   /**
@@ -91973,7 +92119,7 @@ module.exports = __webpack_require__.p + "images/no-image.svg?3c02c3e8caae8b04ac
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
-module.exports = __webpack_require__.p + "images/symbols.svg?7b5d5251a1fc1431e0a8";
+module.exports = __webpack_require__.p + "images/symbols.svg?5677796d474aaff12080";
 
 /***/ }),
 
@@ -92106,7 +92252,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.25.6","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.2.3","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.1","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^0.0.6","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.3.11","postcss-loader":"^6.2.0","postcss-logical":"^5.0.0","prettier":"^2.0.5","puppeteer-core":"^5.2.1","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint-config-prettier":"^8.0.1","stylelint-prettier":"^1.1.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001274"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
+module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.27.0","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^0.0.6","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.3.11","postcss-loader":"^6.2.0","postcss-logical":"^5.0.0","prettier":"^2.0.5","puppeteer-core":"^5.2.1","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint-config-prettier":"^8.0.1","stylelint-prettier":"^1.1.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001274"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),