@plesk/ui-library 3.35.6 → 3.35.7

package/dist/plesk-ui-library.js

@@ -945,6 +945,7 @@ const AutoClosableContext = /*#__PURE__*/(0, _react.createContext)(null);
 class AutoClosable extends _react.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "context", void 0);
     _defineProperty(this, "children", []);
     _defineProperty(this, "addChild", child => {
       this.children.push(child);
@@ -10179,8 +10180,8 @@ const toNumber = value => {
   }
   return value;
 };
-const isMinDisabled = (value, min) => min !== undefined && value !== '' && value <= min;
-const isMaxDisabled = (value, max) => max !== undefined && value !== '' && value >= max;
+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.
@@ -10329,10 +10330,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /***/ }),
 
-/***/ "./components/Item/Item.js":
-/*!*********************************!*\
-  !*** ./components/Item/Item.js ***!
-  \*********************************/
+/***/ "./components/Item/Item.tsx":
+/*!**********************************!*\
+  !*** ./components/Item/Item.tsx ***!
+  \**********************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -10342,8 +10343,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
+var _react = __webpack_require__(/*! react */ "react");
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 var _Icon = _interopRequireWildcard(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
@@ -10353,28 +10353,38 @@ var _Tooltip = _interopRequireDefault(__webpack_require__(/*! ../Tooltip */ "./c
 var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
 __webpack_require__(/*! ./Item.less */ "./components/Item/Item.less");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-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
  */
-class Item extends _react.Component {
-  renderTitle(title) {
+const Item = _ref => {
+  let {
+    children,
+    baseClassName = `${_constants.CLS_PREFIX}item`,
+    component,
+    view = 'simple',
+    className,
+    icon,
+    title,
+    description,
+    footer,
+    value,
+    tooltip,
+    disabled,
+    hoverable,
+    ...props
+  } = _ref;
+  const Tag = component || 'div';
+  const renderTitle = () => {
     if (!title) {
       return null;
     }
-    const {
-      baseClassName,
-      view
-    } = this.props;
     let wrappable = false;
     if (typeof title === 'string') {
       title = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -10399,8 +10409,8 @@ class Item extends _react.Component {
       });
     }
     return title;
-  }
-  renderIcon(icon) {
+  };
+  const renderIcon = () => {
     if (!icon) {
       return null;
     }
@@ -10413,157 +10423,59 @@ class Item extends _react.Component {
     return _Icon.default.create(icon, {
       size: _Icon.ICON_SIZE_32
     });
-  }
-  render() {
-    const {
-      children,
-      baseClassName,
-      component: Tag,
-      view,
-      className,
-      icon,
-      title,
-      description,
-      footer,
-      value,
-      tooltip,
-      disabled,
-      hoverable,
-      ...props
-    } = this.props;
-    if (props.onClick) {
-      if (disabled) {
-        props.onClick = e => e.preventDefault();
-      } else {
-        props.tabIndex = 0;
-        props.onKeyDown = (0, _utils.wrapFunction)(props.onKeyDown, e => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        });
-      }
-    }
-    const item = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
-      className: (0, _classnames.default)(baseClassName, {
-        [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled,
-        [`${baseClassName}--hoverable`]: hoverable
-      }, className),
-      ...props,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Media.default, {
-        image: this.renderIcon(icon),
-        title: this.renderTitle(title),
-        className: `${baseClassName}__media`,
-        children: [description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__description`,
-          children: description
-        }), _react.Children.toArray(children).length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__content`,
-          children: children
-        }) : null]
-      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
-        className: `${baseClassName}__footer`,
-        children: footer
-      })]
-    });
-    if (tooltip) {
-      return (0, _utils.createProxyProps)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-        title: tooltip,
-        children: /*#__PURE__*/(0, _react.cloneElement)(item, props)
-      }));
+  };
+  if (props.onClick) {
+    if (disabled) {
+      props.onClick = e => e.preventDefault();
+    } else {
+      props.tabIndex = 0;
+      props.onKeyDown = (0, _utils.wrapFunction)(props.onKeyDown, e => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+      });
     }
-    return item;
   }
-}
-Item.propTypes = {
-  /**
-   * 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: _propTypes.default.oneOf([VIEW_SIMPLE, VIEW_CARD]),
-  /**
-   * Icon.
-   * @since 0.0.48
-   */
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-  /**
-   * 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
-   */
-  footer: _propTypes.default.node,
-  /**
-   * Description. Renders as small grey text.
-   * @since 2.1.0
-   */
-  description: _propTypes.default.node,
-  /**
-   * 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
-   */
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /**
-   * Tooltip for component.
-   * @since 2.5.1
-   */
-  tooltip: _propTypes.default.node,
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string,
-  /**
-   * Whether disabled or not.
-   * @since 3.15.0
-   */
-  disabled: _propTypes.default.bool,
-  /**
-   * Add hover shadow and pointer cursor.
-   * @since 3.26.0
-   */
-  hoverable: _propTypes.default.bool
-};
-Item.defaultProps = {
-  component: 'div',
-  view: VIEW_SIMPLE,
-  hoverable: undefined,
-  title: undefined,
-  description: undefined,
-  icon: undefined,
-  footer: undefined,
-  children: undefined,
-  value: undefined,
-  tooltip: undefined,
-  className: undefined,
-  disabled: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}item`
+  const item = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
+    className: (0, _classnames.default)(baseClassName, {
+      [`${baseClassName}--card`]: view === 'card',
+      [`${baseClassName}--disabled`]: disabled,
+      [`${baseClassName}--hoverable`]: hoverable
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Media.default, {
+      image: renderIcon(),
+      title: renderTitle(),
+      className: `${baseClassName}__media`,
+      children: [description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__description`,
+        children: description
+      }), _react.Children.toArray(children).length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__content`,
+        children: children
+      }) : null]
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+      className: `${baseClassName}__footer`,
+      children: footer
+    })]
+  });
+  if (tooltip) {
+    return (0, _utils.createProxyProps)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: tooltip,
+      children: /*#__PURE__*/(0, _react.cloneElement)(item, props)
+    }));
+  }
+  return item;
 };
 var _default = exports["default"] = Item;
 
 /***/ }),
 
-/***/ "./components/Item/index.js":
-/*!**********************************!*\
-  !*** ./components/Item/index.js ***!
-  \**********************************/
+/***/ "./components/Item/index.tsx":
+/*!***********************************!*\
+  !*** ./components/Item/index.tsx ***!
+  \***********************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -10578,7 +10490,7 @@ Object.defineProperty(exports, "default", ({
     return _Item.default;
   }
 }));
-var _Item = _interopRequireDefault(__webpack_require__(/*! ./Item */ "./components/Item/Item.js"));
+var _Item = _interopRequireDefault(__webpack_require__(/*! ./Item */ "./components/Item/Item.tsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /***/ }),
@@ -14824,6 +14736,7 @@ Object.defineProperty(exports, "__esModule", ({
 exports["default"] = void 0;
 var _utils = __webpack_require__(/*! ../../utils */ "./utils.tsx");
 var _react = __webpack_require__(/*! react */ "react");
+var _reactTransitionGroup = __webpack_require__(/*! react-transition-group */ "../node_modules/react-transition-group/esm/index.js");
 var _utils2 = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
@@ -14855,18 +14768,8 @@ const OverlayCore = _ref => {
     onAnimationExited,
     ...props
   } = _ref;
-  const animationTimeoutRef = (0, _react.useRef)();
+  const overlayRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
-  const prevIsOpen = (0, _react.useRef)(externalIsOpen);
-  if (prevIsOpen.current !== externalIsOpen) {
-    prevIsOpen.current = externalIsOpen;
-    if (externalIsOpen) {
-      clearTimeout(animationTimeoutRef.current);
-    } else {
-      animationTimeoutRef.current = window.setTimeout(onAnimationExited, 300);
-    }
-  }
-  (0, _react.useEffect)(() => () => clearTimeout(animationTimeoutRef.current), []);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => setIsOpen(externalIsOpen), [externalIsOpen]);
   const focus = () => {
@@ -14923,28 +14826,39 @@ const OverlayCore = _ref => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layer.default, {
     level: _constants.Z_INDEX_OVERLAY,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, isOpen && `${baseClassName}--open`, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+      in: isOpen,
+      timeout: 300,
+      classNames: {
+        enterActive: `${baseClassName}--open`,
+        enterDone: `${baseClassName}--open`
+      },
+      onExited: onAnimationExited,
+      nodeRef: overlayRef,
       style: {
         '--overlay-side-banner-background': sideBannerContainer?.background,
         '--overlay-side-banner-align': sideBannerContainer?.align,
         ...style
       },
-      ...props,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__backdrop`,
-        onClick: handleBackdropClick
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusTrap.default, {
-        className: `${baseClassName}__content`,
-        onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
-        ref: contentRef,
-        role: "dialog",
-        "aria-modal": "true",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: overlayRef,
+        className: (0, _classnames.default)(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, className),
+        ...props,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}__body`,
-          children: children
-        }), sideBanner && renderImage(sideBanner)]
-      })]
+          className: `${baseClassName}__backdrop`,
+          onClick: handleBackdropClick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusTrap.default, {
+          className: `${baseClassName}__content`,
+          onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
+          ref: contentRef,
+          role: "dialog",
+          "aria-modal": "true",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__body`,
+            children: children
+          }), sideBanner && renderImage(sideBanner)]
+        })]
+      })
     })
   });
 };
@@ -15801,7 +15715,7 @@ class Popover extends _react.Component {
       ghost: true,
       icon: {
         name: 'cross-mark',
-        size: title ? 16 : 12
+        size: title ? '16' : '12'
       }
     });
     const heading = title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
@@ -17541,6 +17455,7 @@ class SegmentedControl extends _react.Component {
       selected: this.props.selected,
       monoWidth: 0
     });
+    _defineProperty(this, "context", void 0);
     _defineProperty(this, "isCompact", false);
     _defineProperty(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
     _defineProperty(this, "adjustMonospaced", () => {
@@ -20075,10 +19990,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /***/ }),
 
-/***/ "./components/Tabs/SearchBar.js":
-/*!**************************************!*\
-  !*** ./components/Tabs/SearchBar.js ***!
-  \**************************************/
+/***/ "./components/Tabs/SearchBar.tsx":
+/*!***************************************!*\
+  !*** ./components/Tabs/SearchBar.tsx ***!
+  \***************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -20088,24 +20003,23 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = void 0;
-var _utils = __webpack_require__(/*! ../../utils */ "./utils.tsx");
-var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
+var _react = __webpack_require__(/*! react */ "react");
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
+var _utils = __webpack_require__(/*! ../../utils */ "./utils.tsx");
+var _Badge = _interopRequireDefault(__webpack_require__(/*! ../Badge */ "./components/Badge/index.tsx"));
+var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./components/Button/index.tsx"));
 var _ButtonGroup = _interopRequireDefault(__webpack_require__(/*! ../ButtonGroup */ "./components/ButtonGroup/index.tsx"));
+var _DistractionFreeModeContext = _interopRequireDefault(__webpack_require__(/*! ../DistractionFreeModeContext */ "./components/DistractionFreeModeContext/index.tsx"));
 var _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ "./components/Input/index.tsx"));
-var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./components/Button/index.tsx"));
-var _Badge = _interopRequireDefault(__webpack_require__(/*! ../Badge */ "./components/Badge/index.tsx"));
 var _Menu = _interopRequireWildcard(__webpack_require__(/*! ../Menu */ "./components/Menu/index.tsx"));
 var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../ResponsiveContext */ "./components/ResponsiveContext/index.tsx"));
-var _DistractionFreeModeContext = _interopRequireDefault(__webpack_require__(/*! ../DistractionFreeModeContext */ "./components/DistractionFreeModeContext/index.tsx"));
 var _utils2 = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
 __webpack_require__(/*! ./SearchBar.less */ "./components/Tabs/SearchBar.less");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
@@ -20119,10 +20033,11 @@ class SearchBar extends _react.Component {
     _defineProperty(this, "state", {
       focused: false,
       overMenu: false,
-      value: this.props.inputProps.value || '',
+      value: `${this.props.inputProps?.value || ''}`,
       highlightedValue: null
     });
     _defineProperty(this, "isFocusScheduled", false);
+    _defineProperty(this, "search", void 0);
     _defineProperty(this, "keyboardNavigation", key => {
       const {
         onItemSelect,
@@ -20137,7 +20052,7 @@ class SearchBar extends _react.Component {
       let nextIndex;
       if (key === 'ArrowUp') {
         nextIndex = Math.max(currentIndex - 1, 0);
-      } else if (key === 'ArrowDown') {
+      } else {
         nextIndex = Math.min(currentIndex + 1, res.length - 1);
       }
       this.setState({
@@ -20172,7 +20087,7 @@ class SearchBar extends _react.Component {
       } = this.props;
       const {
         value
-      } = e.target;
+      } = e.currentTarget;
       if (['Enter', 'Escape', 'ArrowUp', 'ArrowDown'].indexOf(e.key) !== -1) {
         this.checkKeys(e.key);
         return;
@@ -20251,7 +20166,7 @@ class SearchBar extends _react.Component {
     } = state;
     const nextState = {};
     if (inputPropsValue !== prevInputPropsValue) {
-      nextState.value = inputPropsValue;
+      nextState.value = inputPropsValue ?? '';
     }
     nextState.prevInputProps = props.inputProps;
     return nextState;
@@ -20265,34 +20180,41 @@ class SearchBar extends _react.Component {
   isResponsive() {
     return this.props.responsive;
   }
-  getResults() {
-    let innerResults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  getResults(innerResults) {
     const {
       results
     } = this.props;
     if (!results) {
       return [];
     }
-    if (results.type === _Menu.default || innerResults) {
+    if ('type' in results && results.type === _Menu.default || innerResults) {
       let res = [];
       const children = innerResults || results.props.children;
+      if (!Array.isArray(children)) {
+        return res;
+      }
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
         if (!child) {
           continue;
         }
-        if (child instanceof Array) {
+        if (_react.Children.count(child) > 1) {
           res = res.concat(this.getResults(child));
-        } else if (child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem) {
-          res.push(child.key);
+        } else if ((child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem) && child.key) {
+          res.push(child.key.toString());
         }
       }
       return res;
     }
-    return results.map(item => item.value);
+    return results.map(_ref => {
+      let {
+        value
+      } = _ref;
+      return value;
+    });
   }
   getHighlightedValue() {
-    return this.state.highlightedValue || this.getResults()[0];
+    return (this.state.highlightedValue || this.getResults()[0]) ?? null;
   }
   searchAction() {
     const {
@@ -20333,12 +20255,15 @@ class SearchBar extends _react.Component {
   }
   elementsIndexToKeyMapping(elements) {
     let result = [];
+    if (!Array.isArray(elements)) {
+      return result;
+    }
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       if (!element) {
         continue;
       }
-      if (element instanceof Array) {
+      if (Array.isArray(element)) {
         result = result.concat(this.elementsIndexToKeyMapping(element));
       } else {
         result.push(element.key);
@@ -20346,19 +20271,15 @@ class SearchBar extends _react.Component {
     }
     return result;
   }
-  renderResults() {
+  renderResults(results) {
     const {
-      baseClassName,
-      results
+      baseClassName
     } = this.props;
     const {
       focused,
       overMenu
     } = this.state;
     const highlightedValue = this.getHighlightedValue();
-    if (!results || results.length === 0) {
-      return null;
-    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
       className: (0, _classnames.default)(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
@@ -20372,10 +20293,9 @@ class SearchBar extends _react.Component {
       }, item.value))
     });
   }
-  renderResultsMenu() {
+  renderResultsMenu(results) {
     const {
       baseClassName,
-      results,
       onItemSelect
     } = this.props;
     const {
@@ -20383,21 +20303,18 @@ class SearchBar extends _react.Component {
       overMenu
     } = this.state;
     const highlightedValue = this.getHighlightedValue();
-    if (!results) {
-      return null;
-    }
     return /*#__PURE__*/(0, _react.cloneElement)(results, {
       className: (0, _classnames.default)(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
-      }, results.className),
+      }, results.props.className),
       onMouseOver: this.handleMenuMouseOver,
       onMouseOut: this.handleMenuMouseOut,
-      onItemClick: (item, index) => {
+      onItemClick: (_item, index) => {
         const indexMap = this.elementsIndexToKeyMapping(results.props.children);
         this.handleSelect(indexMap[index])();
       },
       children: _react.Children.map(results.props.children, child => {
-        if (onItemSelect && child && (child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem)) {
+        if (onItemSelect && child && typeof child === 'object' && 'type' in child && (child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem)) {
           return /*#__PURE__*/(0, _react.cloneElement)(child, {
             active: child.key === highlightedValue
           });
@@ -20435,7 +20352,7 @@ class SearchBar extends _react.Component {
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--focused`]: focused
       }, className),
-      style: isCollapsed || distractionFreeModeEnabled ? null : {
+      style: isCollapsed || distractionFreeModeEnabled ? undefined : {
         maxWidth,
         minWidth
       },
@@ -20475,128 +20392,21 @@ class SearchBar extends _react.Component {
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
               icon: "search",
               onClick: this.handleSearch,
-              state: loading ? 'loading' : null,
+              state: loading ? 'loading' : undefined,
               ghost: true
             })]
           })
         })
-      }), results && results.type === _Menu.default ? this.renderResultsMenu() : this.renderResults()]
+      }), Array.isArray(results) && this.renderResults(results), results && !Array.isArray(results) && results.type === _Menu.default && this.renderResultsMenu(results)]
     });
   }
 }
-const propTypes = {
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string,
-  /**
-   * Maximum width of SearchBar
-   * @since 0.1.0
-   */
-  maxWidth: _propTypes.default.number,
-  /**
-   * Minimum width of SearchBar
-   * @since 0.1.0
-   */
-  minWidth: _propTypes.default.number,
-  /**
-   * Should disable input and show spinner or not.
-   * @since 0.1.0
-   */
-  loading: _propTypes.default.bool,
-  /**
-   * Should collapse input or not. Used for control in independence of context.
-   * @since 0.1.0
-   */
-  responsive: _propTypes.default.bool,
-  /**
-   * Callback for pressing 'Enter' key or 'Search' button.
-   *
-   * arguments:
-   * * value - search value
-   * * clearHandler - function that clears input value
-   * @since 0.1.0
-   */
-  onSearch: _propTypes.default.func,
-  /**
-   * Callback for pressing any key in input. Used for a live search.
-   *
-   * arguments:
-   * * value - search value
-   * * clearHandler - function that clears input value
-   * @since 0.1.0
-   */
-  onTyping: _propTypes.default.func,
-  /**
-   * Callback for selecting menu item with mouse click or key pressing.
-   *
-   * arguments:
-   * * value - selected value
-   * * clearHandler - function that clears input value
-   * @since 0.1.0
-   */
-  onItemSelect: _propTypes.default.func,
-  /**
-   * Should render toggle button or not.
-   * @since 2.2.0
-   */
-  collapsable: _propTypes.default.bool,
-  /**
-   * Callback for pressing toggle button (in normal mode).
-   * @since 2.2.0
-   */
-  onCollapse: _propTypes.default.func,
-  /**
-   * Callback for pressing toggle button (in collapsed mode).
-   * @since 2.2.0
-   */
-  onExpand: _propTypes.default.func,
-  /**
-   * Results to display.
-   * Could be specified by array of objects with "value" and "title" properties or by Menu component.
-   * If Menu component is used then key property of MenuItem will be treated as value.
-   * @since 0.1.0
-   */
-  results: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string.isRequired,
-    title: _propTypes.default.string.isRequired
-  })), _propTypes.default.element]),
-  /**
-   * Props of underlying input element.
-   * @since 0.4.1
-   */
-  inputProps: _propTypes.default.object
-};
-const defaultProps = {
-  className: undefined,
+_defineProperty(SearchBar, "defaultProps", {
   baseClassName: `${_constants.CLS_PREFIX}search-bar`,
   maxWidth: 500,
   minWidth: 270,
-  loading: false,
-  responsive: undefined,
-  onSearch: undefined,
-  onTyping: undefined,
-  onItemSelect: undefined,
-  collapsable: false,
-  onCollapse: undefined,
-  onExpand: undefined,
-  results: undefined,
   inputProps: {}
-};
-SearchBar.propTypes = {
-  ...propTypes,
-  distractionFreeMode: _propTypes.default.shape({
-    enabled: _propTypes.default.bool.isRequired,
-    toggle: _propTypes.default.func.isRequired
-  })
-};
-SearchBar.defaultProps = {
-  distractionFreeMode: undefined
-};
+});
 const SearchBarWrapper = props => {
   const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
   let responsive = (0, _react.useContext)(_ResponsiveContext.default);
@@ -20608,16 +20418,14 @@ const SearchBarWrapper = props => {
   });
 };
 SearchBarWrapper.displayName = 'SearchBar';
-SearchBarWrapper.propTypes = propTypes;
-SearchBarWrapper.defaultProps = defaultProps;
 var _default = exports["default"] = SearchBarWrapper;
 
 /***/ }),
 
-/***/ "./components/Tabs/Tab.js":
-/*!********************************!*\
-  !*** ./components/Tabs/Tab.js ***!
-  \********************************/
+/***/ "./components/Tabs/Tab.tsx":
+/*!*********************************!*\
+  !*** ./components/Tabs/Tab.tsx ***!
+  \*********************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -20627,10 +20435,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = void 0;
-var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 /* eslint-disable react/no-unused-prop-types */
 
@@ -20641,7 +20446,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 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 = _ref => {
+ */
+const Tab = _ref => {
   let {
     children
   } = _ref;
@@ -20649,59 +20455,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     children: children
   });
 };
-Tab.propTypes = {
-  /**
-   * Tab title
-   * @since 0.0.35
-   */
-  title: _propTypes.default.node.isRequired,
-  /**
-   * 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
-   */
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-  /**
-   * Activate callback.
-   * @since 0.0.43
-   */
-  onActivate: _propTypes.default.func,
-  /**
-   * Close callback
-   * @since 0.0.58
-   */
-  onClose: _propTypes.default.func,
-  /**
-   * Component to render as the root element.
-   * @since 2.5.1
-   */
-  component: _propTypes.default.elementType,
-  /**
-   * Tab content
-   * @since 0.0.47
-   */
-  children: _propTypes.default.node
-};
-Tab.defaultProps = {
-  label: undefined,
-  icon: undefined,
-  onActivate: undefined,
-  onClose: undefined,
-  children: undefined,
-  component: undefined
-};
 var _default = exports["default"] = Tab;
 
 /***/ }),
 
-/***/ "./components/Tabs/Tabs.js":
-/*!*********************************!*\
-  !*** ./components/Tabs/Tabs.js ***!
-  \*********************************/
+/***/ "./components/Tabs/Tabs.tsx":
+/*!**********************************!*\
+  !*** ./components/Tabs/Tabs.tsx ***!
+  \**********************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -20711,31 +20472,29 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
+var _react = __webpack_require__(/*! react */ "react");
 var _reactMeasure = _interopRequireDefault(__webpack_require__(/*! react-measure */ "../node_modules/react-measure/dist/index.esm.js"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
+var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
 var _Icon = _interopRequireWildcard(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
 var _Label = _interopRequireDefault(__webpack_require__(/*! ../Label */ "./components/Label/index.tsx"));
-var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
 var _Menu = _interopRequireWildcard(__webpack_require__(/*! ../Menu */ "./components/Menu/index.tsx"));
-var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.js"));
 var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../ResponsiveContext */ "./components/ResponsiveContext/index.tsx"));
 var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
+var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.tsx"));
 __webpack_require__(/*! ../../helpers/base.less */ "./helpers/base.less");
 __webpack_require__(/*! ./Tabs.less */ "./components/Tabs/Tabs.less");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 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
@@ -20751,9 +20510,12 @@ class Tabs extends _react.Component {
       collapsedLength: 0,
       compact: false,
       searching: false,
-      monospacedWidth: null
+      monospacedWidth: 0
     });
-    _defineProperty(this, "widths", null);
+    _defineProperty(this, "widths", void 0);
+    _defineProperty(this, "addon", void 0);
+    _defineProperty(this, "tabsnavRef", void 0);
+    _defineProperty(this, "moreTabsRef", null);
     _defineProperty(this, "checkAdaptive", () => {
       let {
         compact,
@@ -20769,12 +20531,12 @@ class Tabs extends _react.Component {
         widths,
         addon
       } = this;
-      let monospacedWidth = null;
+      let monospacedWidth = 0;
       const getMonospacedWidth = () => monospacedWidth;
       if (!widths) {
         return;
       }
-      const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search ? search.props.minWidth : MIN_ADDON_WIDTH_DEFAULT));
+      const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search?.props.minWidth ?? MIN_ADDON_WIDTH_DEFAULT));
       const searchWidth = compact && search ? COLLAPSED_SEARCH_WIDTH + ADDON_LEFT_PADDING : 0;
       const {
         more,
@@ -20785,7 +20547,7 @@ class Tabs extends _react.Component {
       const tabsNumber = tabs.length;
       let lastTabIndex = tabsNumber - 1 - collapsedLength;
       if (monospaced) {
-        monospacedWidth = tabs.slice(0, lastTabIndex + 1).reduce((max, tab) => tab > max ? tab : max, 0);
+        monospacedWidth = Math.max(...tabs.slice(0, lastTabIndex + 1));
         tabs = tabs.map(getMonospacedWidth);
       }
       const getListWidth = () => {
@@ -20857,9 +20619,7 @@ class Tabs extends _react.Component {
         collapsedLength,
         monospacedWidth
       };
-      const keys = Object.keys(newState);
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
+      for (const key of Object.keys(newState)) {
         if (JSON.stringify(newState[key]) === JSON.stringify(this.state[key])) {
           delete newState[key];
         }
@@ -20894,7 +20654,7 @@ class Tabs extends _react.Component {
           tabs,
           more: more.offsetWidth,
           container: this.tabsnavRef.offsetWidth,
-          margin: more.offsetWidth - more.querySelector(`.${baseClassName}__link`).offsetWidth
+          margin: more.offsetWidth - (more.querySelector(`.${baseClassName}__link`)?.offsetWidth ?? 0)
         };
       }
       this.checkAdaptive();
@@ -20958,9 +20718,9 @@ class Tabs extends _react.Component {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
           className: `${baseClassName}__link`,
           role: "tab",
-          "aria-selected": selected || null,
+          "aria-selected": selected || undefined,
           style: {
-            width: monospacedWidth
+            width: monospacedWidth || undefined
           },
           onClick: handleClick,
           ...tabProps,
@@ -20987,21 +20747,16 @@ class Tabs extends _react.Component {
     return nextState;
   }
   componentDidUpdate() {
-    if (!this.widths || this.props.children.length !== this.widths.tabs.length) {
-      setTimeout(() => this.handleResize(), 0);
+    if (!this.widths || _react.Children.count(this.props.children) !== this.widths.tabs.length) {
+      setTimeout(() => this.handleResize());
     }
   }
   onClick(active) {
     this.setState({
       active
     });
-    const tab = this.props.children[active - 1];
-    const {
-      onActivate
-    } = tab.props;
-    if (onActivate) {
-      onActivate();
-    }
+    const tab = Array.isArray(this.props.children) ? this.props.children[active - 1] : this.props.children;
+    tab?.props?.onActivate?.();
   }
   renderTabLabel(tabMode, label) {
     const {
@@ -21048,7 +20803,7 @@ class Tabs extends _react.Component {
       children
     } = this.props;
     const childrenCount = _react.Children.count(children);
-    if (!childrenCount) {
+    if (!childrenCount || !children) {
       return null;
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
@@ -21074,19 +20829,19 @@ class Tabs extends _react.Component {
           className: (0, _classnames.default)(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
             className: `${baseClassName}__link`,
-            tabIndex: "-1",
+            tabIndex: -1,
             style: tabProps.style,
             children: [iconBlock, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: `${baseClassName}__tab-title`,
               children: title
             }), this.renderTabLabel('tab', label)]
           }), closeBlock]
-        }, title);
+        }, `${title}`);
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         className: (0, _classnames.default)(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
           className: `${baseClassName}__link`,
-          tabIndex: "-1",
+          tabIndex: -1,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: "three-dots-horizontal"
           })
@@ -21107,7 +20862,10 @@ class Tabs extends _react.Component {
     _react.Children.forEach(children, (child, index) => {
       const hidden = index > lastTabIndex;
       const tabMode = hidden ? 'menu-item' : 'tab';
-      (hidden ? hiddenItems : visibleItems).push(this.renderTabItem(child, index, tabMode));
+      const renderedTab = this.renderTabItem(child, index, tabMode);
+      if (renderedTab) {
+        (hidden ? hiddenItems : visibleItems).push(renderedTab);
+      }
     });
     return {
       visibleItems,
@@ -21137,7 +20895,7 @@ class Tabs extends _react.Component {
         ref: ref => this.moreTabsRef = ref,
         className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
         role: "presentation",
-        "aria-selected": moreSelected || null,
+        "aria-selected": moreSelected || undefined,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
           className: `${baseClassName}__dropdown`,
           menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
@@ -21147,8 +20905,8 @@ class Tabs extends _react.Component {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
             className: `${baseClassName}__link`,
             role: "tab",
-            tabIndex: "0",
-            "aria-selected": moreSelected || null,
+            tabIndex: 0,
+            "aria-selected": moreSelected || undefined,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "three-dots-horizontal"
             })
@@ -21162,6 +20920,9 @@ class Tabs extends _react.Component {
       baseClassName,
       search
     } = this.props;
+    if (!search) {
+      return null;
+    }
     const {
       compact
     } = this.state;
@@ -21195,7 +20956,8 @@ class Tabs extends _react.Component {
     if (!childrenCount) {
       return null;
     }
-    let addonBlock = addon || placeholder;
+    const addonElement = addon || placeholder;
+    let addonBlock = addonElement;
     const addonProps = {};
     let searchBlock = null;
     if (search) {
@@ -21206,19 +20968,21 @@ class Tabs extends _react.Component {
       };
       if (compact) {
         if (searching) {
-          searchProps.maxWidth = null;
-          searchProps.minWidth = null;
+          searchProps.maxWidth = undefined;
+          searchProps.minWidth = undefined;
           searchProps.autoFocus = true;
           searchProps.responsive = false;
         } else {
           searchProps.onSearch = this.handleStartSearching;
         }
         searchBlock = this.renderSearchBar(searchProps);
-      } else if (addonBlock) {
+      } else if (addonElement) {
         searchProps.key = 1;
-        addonBlock = [this.renderSearchBar(searchProps), /*#__PURE__*/(0, _react.cloneElement)(addonBlock, {
-          key: 2
-        })];
+        addonBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [this.renderSearchBar(searchProps), /*#__PURE__*/(0, _react.cloneElement)(addonElement, {
+            key: 2
+          })]
+        });
       } else {
         addonProps.style = {
           maxWidth: search.props.maxWidth
@@ -21247,9 +21011,10 @@ class Tabs extends _react.Component {
                   let {
                     measureRef: ref
                   } = _ref2;
-                  return /*#__PURE__*/(0, _react.cloneElement)(this.renderFakeTabs(), {
+                  const fakeTabs = this.renderFakeTabs();
+                  return fakeTabs ? /*#__PURE__*/(0, _react.cloneElement)(fakeTabs, {
                     ref
-                  });
+                  }) : null;
                 }
               }), searchBlock, addonBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
                 onResize: this.handleAddonResize,
@@ -21277,72 +21042,17 @@ class Tabs extends _react.Component {
     });
   }
 }
-Tabs.propTypes = {
-  /**
-   * Number of active tab
-   * @since 0.0.35
-   */
-  active: _propTypes.default.number,
-  /**
-   * 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: _propTypes.default.element,
-  /**
-   * 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: _propTypes.default.bool,
-  /**
-   * [SearchBar](#!/SearchBar) element
-   * @since 0.0.58
-   */
-  search: _propTypes.default.element,
-  /**
-   * [Tabs](#!/Tab)
-   * @since 0.0.47
-   */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element]),
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string
-};
-Tabs.defaultProps = {
-  active: null,
-  addon: null,
-  placeholder: null,
-  addonMinWidth: null,
-  monospaced: null,
-  search: null,
-  children: null,
-  className: null,
+_defineProperty(Tabs, "defaultProps", {
   baseClassName: `${_constants.CLS_PREFIX}tabs`
-};
+});
 var _default = exports["default"] = Tabs;
 
 /***/ }),
 
-/***/ "./components/Tabs/index.js":
-/*!**********************************!*\
-  !*** ./components/Tabs/index.js ***!
-  \**********************************/
+/***/ "./components/Tabs/index.tsx":
+/*!***********************************!*\
+  !*** ./components/Tabs/index.tsx ***!
+  \***********************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -21369,9 +21079,9 @@ Object.defineProperty(exports, "default", ({
     return _Tabs.default;
   }
 }));
-var _Tabs = _interopRequireDefault(__webpack_require__(/*! ./Tabs */ "./components/Tabs/Tabs.js"));
-var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.js"));
-var _SearchBar = _interopRequireDefault(__webpack_require__(/*! ./SearchBar */ "./components/Tabs/SearchBar.js"));
+var _Tabs = _interopRequireDefault(__webpack_require__(/*! ./Tabs */ "./components/Tabs/Tabs.tsx"));
+var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.tsx"));
+var _SearchBar = _interopRequireDefault(__webpack_require__(/*! ./SearchBar */ "./components/Tabs/SearchBar.tsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /***/ }),
@@ -22569,6 +22279,7 @@ class ToolbarItem extends _react.Component {
     _defineProperty(this, "state", {
       compact: false
     });
+    _defineProperty(this, "context", void 0);
   }
   componentDidMount() {
     const registry = this.context;
@@ -23401,6 +23112,8 @@ var _exportNames = {
   SwitchesPanel: true,
   SwitchesPanelItem: true,
   Tabs: true,
+  Tab: true,
+  SearchBar: true,
   Text: true,
   Toaster: true,
   Toolbar: true,
@@ -23853,6 +23566,12 @@ Object.defineProperty(exports, "SEGMENTED_CONTROL_BASE_CLASS_NAME", ({
     return _SegmentedControl.SEGMENTED_CONTROL_BASE_CLASS_NAME;
   }
 }));
+Object.defineProperty(exports, "SearchBar", ({
+  enumerable: true,
+  get: function () {
+    return _Tabs.SearchBar;
+  }
+}));
 Object.defineProperty(exports, "Section", ({
   enumerable: true,
   get: function () {
@@ -23943,6 +23662,12 @@ Object.defineProperty(exports, "SwitchesPanelItem", ({
     return _SwitchesPanelItem.default;
   }
 }));
+Object.defineProperty(exports, "Tab", ({
+  enumerable: true,
+  get: function () {
+    return _Tabs.Tab;
+  }
+}));
 Object.defineProperty(exports, "Tabs", ({
   enumerable: true,
   get: function () {
@@ -24111,7 +23836,7 @@ Object.keys(_Select).forEach(function (key) {
     }
   });
 });
-var _Item = _interopRequireDefault(__webpack_require__(/*! ./Item */ "./components/Item/index.js"));
+var _Item = _interopRequireDefault(__webpack_require__(/*! ./Item */ "./components/Item/index.tsx"));
 var _ItemLink = _interopRequireDefault(__webpack_require__(/*! ./ItemLink */ "./components/ItemLink/index.tsx"));
 var _ItemList = _interopRequireDefault(__webpack_require__(/*! ./ItemList */ "./components/ItemList/index.tsx"));
 var _Label = _interopRequireDefault(__webpack_require__(/*! ./Label */ "./components/Label/index.tsx"));
@@ -24177,18 +23902,7 @@ var _Subnav = _interopRequireWildcard(__webpack_require__(/*! ./Subnav */ "./com
 var _Switch = _interopRequireDefault(__webpack_require__(/*! ./Switch */ "./components/Switch/index.tsx"));
 var _SwitchesPanel = _interopRequireDefault(__webpack_require__(/*! ./SwitchesPanel */ "./components/SwitchesPanel/index.tsx"));
 var _SwitchesPanelItem = _interopRequireDefault(__webpack_require__(/*! ./SwitchesPanelItem */ "./components/SwitchesPanelItem/index.tsx"));
-var _Tabs = _interopRequireWildcard(__webpack_require__(/*! ./Tabs */ "./components/Tabs/index.js"));
-Object.keys(_Tabs).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Tabs[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Tabs[key];
-    }
-  });
-});
+var _Tabs = _interopRequireWildcard(__webpack_require__(/*! ./Tabs */ "./components/Tabs/index.tsx"));
 var _Text = _interopRequireDefault(__webpack_require__(/*! ./Text */ "./components/Text/index.tsx"));
 var _Toaster = _interopRequireDefault(__webpack_require__(/*! ./Toaster */ "./components/Toaster/index.tsx"));
 var _Toolbar = _interopRequireWildcard(__webpack_require__(/*! ./Toolbar */ "./components/Toolbar/index.tsx"));
@@ -78273,7 +77987,7 @@ module.exports = checkPropTypes;
 
 
 
-var ReactIs = __webpack_require__(/*! react-is */ "../node_modules/prop-types/node_modules/react-is/index.js");
+var ReactIs = __webpack_require__(/*! react-is */ "../node_modules/react-is/index.js");
 var assign = __webpack_require__(/*! object-assign */ "../node_modules/object-assign/index.js");
 
 var ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ "../node_modules/prop-types/lib/ReactPropTypesSecret.js");
@@ -78892,7 +78606,7 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
  */
 
 if (true) {
-  var ReactIs = __webpack_require__(/*! react-is */ "../node_modules/prop-types/node_modules/react-is/index.js");
+  var ReactIs = __webpack_require__(/*! react-is */ "../node_modules/react-is/index.js");
 
   // By explicitly using `prop-types` you are opting into new development behavior.
   // http://fb.me/prop-types-in-prod
@@ -78937,10 +78651,10 @@ module.exports = Function.call.bind(Object.prototype.hasOwnProperty);
 
 /***/ }),
 
-/***/ "../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js":
-/*!************************************************************************************!*\
-  !*** ../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js ***!
-  \************************************************************************************/
+/***/ "../node_modules/react-is/cjs/react-is.development.js":
+/*!************************************************************!*\
+  !*** ../node_modules/react-is/cjs/react-is.development.js ***!
+  \************************************************************/
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
@@ -79129,17 +78843,17 @@ exports.typeOf = typeOf;
 
 /***/ }),
 
-/***/ "../node_modules/prop-types/node_modules/react-is/index.js":
-/*!*****************************************************************!*\
-  !*** ../node_modules/prop-types/node_modules/react-is/index.js ***!
-  \*****************************************************************/
+/***/ "../node_modules/react-is/index.js":
+/*!*****************************************!*\
+  !*** ../node_modules/react-is/index.js ***!
+  \*****************************************/
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
 
 
 if (false) {} else {
-  module.exports = __webpack_require__(/*! ./cjs/react-is.development.js */ "../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js");
+  module.exports = __webpack_require__(/*! ./cjs/react-is.development.js */ "../node_modules/react-is/cjs/react-is.development.js");
 }
 
 
@@ -82696,7 +82410,8 @@ var forceReflow = function forceReflow(node) {
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-/** @license React v17.0.2
+/**
+ * @license React
  * react-jsx-runtime.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -82712,59 +82427,25 @@ if (true) {
 'use strict';
 
 var React = __webpack_require__(/*! react */ "react");
-var _assign = __webpack_require__(/*! object-assign */ "../node_modules/object-assign/index.js");
 
 // ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var REACT_ELEMENT_TYPE = 0xeac7;
-var REACT_PORTAL_TYPE = 0xeaca;
-exports.Fragment = 0xeacb;
-var REACT_STRICT_MODE_TYPE = 0xeacc;
-var REACT_PROFILER_TYPE = 0xead2;
-var REACT_PROVIDER_TYPE = 0xeacd;
-var REACT_CONTEXT_TYPE = 0xeace;
-var REACT_FORWARD_REF_TYPE = 0xead0;
-var REACT_SUSPENSE_TYPE = 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-var REACT_MEMO_TYPE = 0xead3;
-var REACT_LAZY_TYPE = 0xead4;
-var REACT_BLOCK_TYPE = 0xead9;
-var REACT_SERVER_BLOCK_TYPE = 0xeada;
-var REACT_FUNDAMENTAL_TYPE = 0xead5;
-var REACT_SCOPE_TYPE = 0xead7;
-var REACT_OPAQUE_ID_TYPE = 0xeae0;
-var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-var REACT_OFFSCREEN_TYPE = 0xeae2;
-var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
-if (typeof Symbol === 'function' && Symbol.for) {
-  var symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  exports.Fragment = symbolFor('react.fragment');
-  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-  REACT_PROFILER_TYPE = symbolFor('react.profiler');
-  REACT_PROVIDER_TYPE = symbolFor('react.provider');
-  REACT_CONTEXT_TYPE = symbolFor('react.context');
-  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-  REACT_MEMO_TYPE = symbolFor('react.memo');
-  REACT_LAZY_TYPE = symbolFor('react.lazy');
-  REACT_BLOCK_TYPE = symbolFor('react.block');
-  REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
-  REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
-  REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-}
-
-var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 var FAUX_ITERATOR_SYMBOL = '@@iterator';
 function getIteratorFn(maybeIterable) {
   if (maybeIterable === null || typeof maybeIterable !== 'object') {
@@ -82784,11 +82465,13 @@ var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FI
 
 function error(format) {
   {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
-    }
+    {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
 
-    printWarning('error', format, args);
+      printWarning('error', format, args);
+    }
   }
 }
 
@@ -82802,10 +82485,11 @@ function printWarning(level, format, args) {
     if (stack !== '') {
       format += '%s';
       args = args.concat([stack]);
-    }
+    } // eslint-disable-next-line react-internal/safe-string-coercion
+
 
     var argsWithFormat = args.map(function (item) {
-      return '' + item;
+      return String(item);
     }); // Careful: RN currently depends on this prefix
 
     argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -82816,9 +82500,23 @@ function printWarning(level, format, args) {
   }
 }
 
-// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+// -----------------------------------------------------------------------------
 
 var enableScopeAPI = false; // Experimental Create Event Handle API.
+var enableCacheElement = false;
+var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+// stuff. Intended to enable React core members to more easily debug scheduling
+// issues in DEV builds.
+
+var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+var REACT_MODULE_REFERENCE;
+
+{
+  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+}
 
 function isValidElementType(type) {
   if (typeof type === 'string' || typeof type === 'function') {
@@ -82826,12 +82524,16 @@ function isValidElementType(type) {
   } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
 
 
-  if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
     return true;
   }
 
   if (typeof type === 'object' && type !== null) {
-    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+    // types supported by any Flight configuration anywhere since
+    // we don't know which Flight build this will end up being used
+    // with.
+    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
       return true;
     }
   }
@@ -82840,15 +82542,23 @@ function isValidElementType(type) {
 }
 
 function getWrappedName(outerType, innerType, wrapperName) {
+  var displayName = outerType.displayName;
+
+  if (displayName) {
+    return displayName;
+  }
+
   var functionName = innerType.displayName || innerType.name || '';
-  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
-}
+  return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+} // Keep in sync with react-reconciler/getComponentNameFromFiber
+
 
 function getContextName(type) {
   return type.displayName || 'Context';
-}
+} // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+
 
-function getComponentName(type) {
+function getComponentNameFromType(type) {
   if (type == null) {
     // Host root, text node or just invalid type.
     return null;
@@ -82856,7 +82566,7 @@ function getComponentName(type) {
 
   {
     if (typeof type.tag === 'number') {
-      error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+      error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
     }
   }
 
@@ -82869,7 +82579,7 @@ function getComponentName(type) {
   }
 
   switch (type) {
-    case exports.Fragment:
+    case REACT_FRAGMENT_TYPE:
       return 'Fragment';
 
     case REACT_PORTAL_TYPE:
@@ -82886,6 +82596,7 @@ function getComponentName(type) {
 
     case REACT_SUSPENSE_LIST_TYPE:
       return 'SuspenseList';
+
   }
 
   if (typeof type === 'object') {
@@ -82902,10 +82613,13 @@ function getComponentName(type) {
         return getWrappedName(type, type.render, 'ForwardRef');
 
       case REACT_MEMO_TYPE:
-        return getComponentName(type.type);
+        var outerName = type.displayName || null;
 
-      case REACT_BLOCK_TYPE:
-        return getComponentName(type._render);
+        if (outerName !== null) {
+          return outerName;
+        }
+
+        return getComponentNameFromType(type.type) || 'Memo';
 
       case REACT_LAZY_TYPE:
         {
@@ -82914,17 +82628,21 @@ function getComponentName(type) {
           var init = lazyComponent._init;
 
           try {
-            return getComponentName(init(payload));
+            return getComponentNameFromType(init(payload));
           } catch (x) {
             return null;
           }
         }
+
+      // eslint-disable-next-line no-fallthrough
     }
   }
 
   return null;
 }
 
+var assign = Object.assign;
+
 // Helpers to patch console.logs to avoid logging during side-effect free
 // replaying on render function. This currently only patches the object
 // lazily which won't cover if the log function was extracted eagerly.
@@ -82988,25 +82706,25 @@ function reenableLogs() {
       }; // $FlowFixMe Flow thinks console is immutable.
 
       Object.defineProperties(console, {
-        log: _assign({}, props, {
+        log: assign({}, props, {
           value: prevLog
         }),
-        info: _assign({}, props, {
+        info: assign({}, props, {
           value: prevInfo
         }),
-        warn: _assign({}, props, {
+        warn: assign({}, props, {
           value: prevWarn
         }),
-        error: _assign({}, props, {
+        error: assign({}, props, {
           value: prevError
         }),
-        group: _assign({}, props, {
+        group: assign({}, props, {
           value: prevGroup
         }),
-        groupCollapsed: _assign({}, props, {
+        groupCollapsed: assign({}, props, {
           value: prevGroupCollapsed
         }),
-        groupEnd: _assign({}, props, {
+        groupEnd: assign({}, props, {
           value: prevGroupEnd
         })
       });
@@ -83047,7 +82765,7 @@ var componentFrameCache;
 
 function describeNativeComponentFrame(fn, construct) {
   // If something asked for a stack inside a fake render, it should get ignored.
-  if (!fn || reentry) {
+  if ( !fn || reentry) {
     return '';
   }
 
@@ -83156,7 +82874,14 @@ function describeNativeComponentFrame(fn, construct) {
 
               if (c < 0 || sampleLines[s] !== controlLines[c]) {
                 // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
-                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+                // but we have a user-provided "displayName"
+                // splice it in to make the stack more readable.
+
+
+                if (fn.displayName && _frame.includes('<anonymous>')) {
+                  _frame = _frame.replace('<anonymous>', fn.displayName);
+                }
 
                 {
                   if (typeof fn === 'function') {
@@ -83241,9 +82966,6 @@ function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
         // Memo may contain any component type so we recursively resolve it.
         return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
 
-      case REACT_BLOCK_TYPE:
-        return describeFunctionComponentFrame(type._render);
-
       case REACT_LAZY_TYPE:
         {
           var lazyComponent = type;
@@ -83261,6 +82983,8 @@ function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
   return '';
 }
 
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
 var loggedTypeFailures = {};
 var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
@@ -83279,7 +83003,7 @@ function setCurrentlyValidatingElement(element) {
 function checkPropTypes(typeSpecs, values, location, componentName, element) {
   {
     // $FlowFixMe This is okay but Flow doesn't know it.
-    var has = Function.call.bind(Object.prototype.hasOwnProperty);
+    var has = Function.call.bind(hasOwnProperty);
 
     for (var typeSpecName in typeSpecs) {
       if (has(typeSpecs, typeSpecName)) {
@@ -83291,6 +83015,7 @@ function checkPropTypes(typeSpecs, values, location, componentName, element) {
           // This is intentionally an invariant that gets caught. It's the same
           // behavior as without this statement except with a better message.
           if (typeof typeSpecs[typeSpecName] !== 'function') {
+            // eslint-disable-next-line react-internal/prod-error-codes
             var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
             err.name = 'Invariant Violation';
             throw err;
@@ -83324,8 +83049,80 @@ function checkPropTypes(typeSpecs, values, location, componentName, element) {
   }
 }
 
+var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
+
+function isArray(a) {
+  return isArrayImpl(a);
+}
+
+/*
+ * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+// $FlowFixMe only called in DEV, so void return is not possible.
+function typeName(value) {
+  {
+    // toStringTag is needed for namespaced types like Temporal.Instant
+    var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+    var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+    return type;
+  }
+} // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+function willCoercionThrow(value) {
+  {
+    try {
+      testStringCoercion(value);
+      return false;
+    } catch (e) {
+      return true;
+    }
+  }
+}
+
+function testStringCoercion(value) {
+  // If you ended up here by following an exception call stack, here's what's
+  // happened: you supplied an object or symbol value to React (as a prop, key,
+  // DOM attribute, CSS property, string ref, etc.) and when React tried to
+  // coerce it to a string using `'' + value`, an exception was thrown.
+  //
+  // The most common types that will cause this exception are `Symbol` instances
+  // and Temporal objects like `Temporal.Instant`. But any object that has a
+  // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+  // exception. (Library authors do this to prevent users from using built-in
+  // numeric operators like `+` or comparison operators like `>=` because custom
+  // methods are needed to perform accurate arithmetic or comparison.)
+  //
+  // To fix the problem, coerce this object or symbol value to a string before
+  // passing it to React. The most reliable way is usually `String(value)`.
+  //
+  // To find which value is throwing, check the browser or debugger console.
+  // Before this exception was thrown, there should be `console.error` output
+  // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+  // problem and how that type was used: key, atrribute, input value prop, etc.
+  // In most cases, this console output also shows the component and its
+  // ancestor components where the exception happened.
+  //
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  return '' + value;
+}
+function checkKeyStringCoercion(value) {
+  {
+    if (willCoercionThrow(value)) {
+      error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
 var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
-var hasOwnProperty = Object.prototype.hasOwnProperty;
 var RESERVED_PROPS = {
   key: true,
   ref: true,
@@ -83371,10 +83168,10 @@ function hasValidKey(config) {
 function warnIfStringRefCannotBeAutoConverted(config, self) {
   {
     if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
-      var componentName = getComponentName(ReactCurrentOwner.current.type);
+      var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
 
       if (!didWarnAboutStringRefs[componentName]) {
-        error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+        error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
 
         didWarnAboutStringRefs[componentName] = true;
       }
@@ -83513,10 +83310,18 @@ function jsxDEV(type, config, maybeKey, source, self) {
     // key is explicitly declared to be undefined or not.
 
     if (maybeKey !== undefined) {
+      {
+        checkKeyStringCoercion(maybeKey);
+      }
+
       key = '' + maybeKey;
     }
 
     if (hasValidKey(config)) {
+      {
+        checkKeyStringCoercion(config.key);
+      }
+
       key = '' + config.key;
     }
 
@@ -83587,6 +83392,7 @@ var propTypesMisspellWarningShown;
  * @final
  */
 
+
 function isValidElement(object) {
   {
     return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
@@ -83596,7 +83402,7 @@ function isValidElement(object) {
 function getDeclarationErrorAddendum() {
   {
     if (ReactCurrentOwner$1.current) {
-      var name = getComponentName(ReactCurrentOwner$1.current.type);
+      var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
 
       if (name) {
         return '\n\nCheck the render method of `' + name + '`.';
@@ -83676,7 +83482,7 @@ function validateExplicitKey(element, parentType) {
 
     if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
       // Give the component that originally created this child.
-      childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+      childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
     }
 
     setCurrentlyValidatingElement$1(element);
@@ -83703,7 +83509,7 @@ function validateChildKeys(node, parentType) {
       return;
     }
 
-    if (Array.isArray(node)) {
+    if (isArray(node)) {
       for (var i = 0; i < node.length; i++) {
         var child = node[i];
 
@@ -83766,12 +83572,12 @@ function validatePropTypes(element) {
 
     if (propTypes) {
       // Intentionally inside to avoid triggering lazy initializers:
-      var name = getComponentName(type);
+      var name = getComponentNameFromType(type);
       checkPropTypes(propTypes, element.props, 'prop', name, element);
     } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
       propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
 
-      var _name = getComponentName(type);
+      var _name = getComponentNameFromType(type);
 
       error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
     }
@@ -83838,10 +83644,10 @@ function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
 
       if (type === null) {
         typeString = 'null';
-      } else if (Array.isArray(type)) {
+      } else if (isArray(type)) {
         typeString = 'array';
       } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-        typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+        typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
         info = ' Did you accidentally export a JSX literal instead of a component?';
       } else {
         typeString = typeof type;
@@ -83867,7 +83673,7 @@ function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
 
       if (children !== undefined) {
         if (isStaticChildren) {
-          if (Array.isArray(children)) {
+          if (isArray(children)) {
             for (var i = 0; i < children.length; i++) {
               validateChildKeys(children[i], type);
             }
@@ -83884,7 +83690,7 @@ function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
       }
     }
 
-    if (type === exports.Fragment) {
+    if (type === REACT_FRAGMENT_TYPE) {
       validateFragmentProps(element);
     } else {
       validatePropTypes(element);
@@ -83913,6 +83719,7 @@ var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs intern
 
 var jsxs =  jsxWithValidationStatic ;
 
+exports.Fragment = REACT_FRAGMENT_TYPE;
 exports.jsx = jsx;
 exports.jsxs = jsxs;
   })();
@@ -88128,7 +87935,7 @@ function _setPrototypeOf(o, p) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.35.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,styleguidist}/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.23.1","@plesk/react-movable":"^2.7.1","classnames":"^2.3.2","codemirror":"5.58.2","marked":"4.2.12","memoize-one":"^5.2.1","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^2.2.31","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.23.0","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.22.15","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@babel/types":"^7.23.0","@csstools/postcss-logical-float-and-clear":"^1.0.1","@plesk/eslint-config":"^3.0.0","@plesk/stylelint-config":"^2.0.0","@testing-library/dom":"^9.3.3","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^12.1.5","@testing-library/user-event":"^12.8.3","@types/buble":"^0.20.2","@types/classnames":"2.3.1","@types/doctrine":"^0.0.5","@types/enzyme":"^3.10.14","@types/jest":"^28.1.8","@types/jest-image-snapshot":"^6.2.1","@types/marked":"^4.3.1","@types/node":"^16.18.54","@types/react":"^17.0.65","@types/react-dom":"^17.0.20","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.6","@types/svg4everybody":"2.1.2","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0","@wojtekmaj/enzyme-adapter-react-17":"^0.8.0","autoprefixer":"^10.4.16","babel-loader":"^8.3.0","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.1","css-loader":"^6.8.1","css-minimizer-webpack-plugin":"^5.0.1","enzyme":"^3.11.0","enzyme-to-json":"^3.6.2","eslint":"^8.50.0","eslint-config-prettier":"^8.10.0","eslint-plugin-markdown":"^3.0.1","eslint-plugin-prettier":"^4.2.1","html-webpack-plugin":"^5.5.3","jest":"^28.1.3","jest-dev-server":"^9.0.1","jest-environment-jsdom":"^28.1.3","jest-image-snapshot":"^6.2.0","less":"^4.2.0","less-loader":"^11.1.3","mini-css-extract-plugin":"^2.7.6","postcss":"^8.4.30","postcss-less":"^6.0.0","postcss-loader":"^7.3.3","postcss-logical":"^6.2.0","prettier":"^2.8.8","puppeteer-core":"20.4.0","react":"^17.0.2","react-docgen-typescript":"^2.2.2","react-dom":"^17.0.2","react-styleguidist":"^12.0.1","rimraf":"^5.0.1","rtlcss":"^4.1.1","style-loader":"^3.3.3","stylelint":"^15.10.3","stylelint-declaration-block-no-ignored-properties":"^2.7.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.0","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.9","typescript":"4.7.4","webpack":"^5.88.2","webpack-cli":"^5.1.4"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"resolutions":{"@babel/types":"^7.15.6","@types/react":"^17.0.39","trim":">=0.0.3","postcss":"^8.4.23"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"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.35.7","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 && yarn format:check","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"{src,styleguidist}/**/*.less\\"","format:check":"prettier --check src","format":"prettier --write src","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.23.1","@plesk/react-movable":"^2.7.1","classnames":"^2.3.2","codemirror":"5.58.2","marked":"4.2.12","memoize-one":"^5.2.1","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^2.2.31","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.23.0","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.22.15","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@babel/types":"^7.23.0","@csstools/postcss-logical-float-and-clear":"^1.0.1","@plesk/eslint-config":"^3.0.0","@plesk/stylelint-config":"^2.0.0","@testing-library/dom":"^9.3.3","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.5.1","@types/buble":"^0.20.2","@types/classnames":"2.3.1","@types/doctrine":"^0.0.5","@types/jest":"^29.5.5","@types/jest-image-snapshot":"^6.2.1","@types/marked":"^4.3.2","@types/node":"^16.18.58","@types/react":"^18.2.25","@types/react-dom":"^18.2.11","@types/react-measure":"2.0.9","@types/react-transition-group":"^4.4.7","@types/svg4everybody":"2.1.2","@typescript-eslint/eslint-plugin":"^6.7.4","@typescript-eslint/parser":"^6.7.4","autoprefixer":"^10.4.16","babel-loader":"^8.3.0","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^7.0.3","css-loader":"^6.8.1","css-minimizer-webpack-plugin":"^5.0.1","eslint":"^8.51.0","eslint-config-prettier":"^8.10.0","eslint-plugin-markdown":"^3.0.1","html-webpack-plugin":"^5.5.3","jest":"^29.7.0","jest-dev-server":"^9.0.1","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.2.0","less":"^4.2.0","less-loader":"^11.1.3","mini-css-extract-plugin":"^2.7.6","postcss":"^8.4.31","postcss-less":"^6.0.0","postcss-loader":"^7.3.3","postcss-logical":"^6.2.0","prettier":"^2.8.8","puppeteer-core":"20.4.0","react":"^18.2.0","react-docgen-typescript":"^2.2.2","react-dom":"^18.2.0","react-styleguidist":"^13.1.1","rimraf":"^5.0.5","rtlcss":"^4.1.1","style-loader":"^3.3.3","stylelint":"^15.10.3","stylelint-declaration-block-no-ignored-properties":"^2.7.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.0","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.9","typescript":"5.2.2","webpack":"^5.88.2","webpack-cli":"^5.1.4"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"resolutions":{"trim":">=0.0.3","postcss":"^8.4.23"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),