@plesk/ui-library 3.38.2 → 3.40.0

package/dist/plesk-ui-library.js

@@ -1299,7 +1299,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports["default"] = void 0;
+exports["default"] = exports.BUTTON_PROP_NAMES = void 0;
 var _react = __webpack_require__(/*! react */ "react");
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
@@ -1350,6 +1350,9 @@ const renderCaret = _ref2 => {
   }
   return caretElement;
 };
+
+// For ToolbarMenu backward compatibility purposes
+const BUTTON_PROP_NAMES = exports.BUTTON_PROP_NAMES = ['size', 'intent', 'ghost', 'selected', 'onToggle', 'state', 'disabled', 'tooltip', 'icon', 'caret', 'fill', 'children', 'component', 'className', 'baseClassName', 'arrow', 'onClick'];
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     baseClassName = `${_constants.CLS_PREFIX}button`,
@@ -1463,27 +1466,6 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 });
 Button.displayName = 'Button';
 
-// For ToolbarMenu backward compatibility purposes
-Button.defaultProps = {
-  size: undefined,
-  intent: undefined,
-  ghost: false,
-  selected: undefined,
-  onToggle: undefined,
-  state: undefined,
-  disabled: false,
-  tooltip: undefined,
-  icon: undefined,
-  caret: undefined,
-  fill: false,
-  children: undefined,
-  component: 'button',
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}button`,
-  arrow: undefined,
-  onClick: undefined
-};
-
 /**
  * `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).
@@ -2135,10 +2117,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const CardButton = _ref => {
   let {
     icon,
+    baseClassName = `${_constants.CLS_PREFIX}card-button`,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     icon: _Icon.default.create(icon),
+    baseClassName: baseClassName,
     ...props
   });
 };
@@ -2149,9 +2133,6 @@ CardButton.propTypes = {
   baseClassName: _propTypes.default.string,
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]).isRequired
 };
-CardButton.defaultProps = {
-  baseClassName: `${_constants.CLS_PREFIX}card-button`
-};
 var _default = exports["default"] = CardButton;
 
 /***/ }),
@@ -2954,9 +2935,9 @@ const renderView = (onViewChange, currentView) => {
 const isToolbarExpander = element => /*#__PURE__*/(0, _react.isValidElement)(element) && element.type === _Toolbar.ToolbarExpander;
 const CardListToolbar = _ref2 => {
   let {
-    baseClassName,
-    selection,
-    onViewChange,
+    baseClassName = `${_constants.CLS_PREFIX}card-list__toolbar`,
+    selection = null,
+    onViewChange = null,
     currentView,
     groups
   } = _ref2;
@@ -2987,11 +2968,6 @@ CardListToolbar.propTypes = {
   currentView: _propTypes.default.string.isRequired,
   baseClassName: _propTypes.default.string
 };
-CardListToolbar.defaultProps = {
-  selection: null,
-  onViewChange: null,
-  baseClassName: `${_constants.CLS_PREFIX}card-list__toolbar`
-};
 var _default = exports["default"] = CardListToolbar;
 
 /***/ }),
@@ -5154,11 +5130,14 @@ const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/(0
  */
 const Dialog = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}dialog`,
+    isOpen = false,
+    size = 'md',
+    closable = true,
+    canClose = true,
     className,
     children,
     actions,
-    isOpen,
     banner,
     image,
     title,
@@ -5167,11 +5146,8 @@ const Dialog = _ref => {
     cancelButton,
     buttons,
     form,
-    size,
-    closable,
     onClose,
     closingConfirmation,
-    canClose,
     ...props
   } = _ref;
   const [isVisible, setIsVisible] = (0, _react.useState)(isOpen);
@@ -5331,28 +5307,6 @@ const Dialog = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Dialog.defaultProps = {
-  isOpen: false,
-  banner: undefined,
-  sideBanner: undefined,
-  sideBannerContainer: undefined,
-  image: undefined,
-  title: undefined,
-  subtitle: undefined,
-  cancelTitle: undefined,
-  cancelButton: undefined,
-  buttons: undefined,
-  actions: undefined,
-  form: undefined,
-  size: 'md',
-  closable: true,
-  canClose: true,
-  onClose: undefined,
-  closingConfirmation: undefined,
-  children: undefined,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}dialog`
-};
 var _default = exports["default"] = Dialog;
 
 /***/ }),
@@ -5455,24 +5409,6 @@ var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-const defaultProps = {
-  isOpen: false,
-  subtitle: undefined,
-  backButton: undefined,
-  hideButton: undefined,
-  tabs: undefined,
-  placement: 'left',
-  size: 'md',
-  onClose: undefined,
-  closingConfirmation: undefined,
-  form: undefined,
-  sideBanner: undefined,
-  sideBannerContainer: undefined,
-  progress: undefined,
-  children: null,
-  className: undefined,
-  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.
  * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
@@ -5480,7 +5416,10 @@ const defaultProps = {
  */
 const Drawer = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}drawer`,
+    isOpen = false,
+    placement = 'left',
+    size = 'md',
     className,
     children,
     title,
@@ -5582,6 +5521,9 @@ const Drawer = _ref => {
     }, className),
     onClose: onCloseWithConfirmation,
     canCloseOnBackdropClick: true,
+    isOpen: isOpen,
+    placement: placement,
+    size: size,
     ...props,
     children: [takeApart(_ref5 => {
       let {
@@ -5623,7 +5565,6 @@ const Drawer = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Drawer.defaultProps = defaultProps;
 var _default = exports["default"] = Drawer;
 
 /***/ }),
@@ -6077,12 +6018,12 @@ const useEnhancedMenu = (menu, _ref2) => {
  */
 const Dropdown = _ref3 => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}dropdown`,
     className,
     children,
     menu,
-    menuPlacement,
-    overlay,
+    menuPlacement = 'bottom-start',
+    overlay = false,
     locale,
     ...props
   } = _ref3;
@@ -6151,14 +6092,6 @@ const Dropdown = _ref3 => {
     })
   });
 };
-Dropdown.defaultProps = {
-  menuPlacement: 'bottom-start',
-  children: undefined,
-  overlay: false,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}dropdown`,
-  locale: undefined
-};
 var _default = exports["default"] = Dropdown;
 
 /***/ }),
@@ -7404,28 +7337,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 const BASE_FORM_FIELD_CLASS_NAME = exports.BASE_FORM_FIELD_CLASS_NAME = `${_constants.CLS_PREFIX}form-field`;
 const defaultValue = undefined;
-const defaultProps = {
-  id: undefined,
-  name: undefined,
-  value: defaultValue,
-  onChange: null,
-  label: undefined,
-  description: undefined,
-  errors: {},
-  required: false,
-  children: undefined,
-  multi: undefined,
-  disabled: undefined,
-  locale: undefined,
-  addMoreValidator: undefined,
-  onRemoveRow: null,
-  fullDescription: undefined,
-  className: undefined,
-  baseClassName: BASE_FORM_FIELD_CLASS_NAME,
-  form: undefined,
-  vertical: undefined,
-  scrollableElement: undefined
-};
 
 /**
  * Simple helper to handle situations when we're expecting only array
@@ -7831,8 +7742,14 @@ class FormField extends _react.Component {
  * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
  * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
-_defineProperty(FormField, "defaultProps", defaultProps);
-const FormFieldWrapper = props => {
+const FormFieldWrapper = _ref => {
+  let {
+    value = defaultValue,
+    errors = {},
+    required = false,
+    baseClassName = BASE_FORM_FIELD_CLASS_NAME,
+    ...props
+  } = _ref;
   const form = (0, _react.useContext)(_FormContext.default);
   const verticalContext = (0, _react.useContext)(_VerticalContext.default);
   const vertical = props.vertical === undefined ? verticalContext : props.vertical;
@@ -7843,11 +7760,14 @@ const FormFieldWrapper = props => {
     form: form,
     vertical: vertical,
     scrollableElement: scrollableElement,
-    disabled: props.disabled || disabled
+    disabled: props.disabled || disabled,
+    value: value,
+    errors: errors,
+    required: required,
+    baseClassName: baseClassName
   });
 };
 FormFieldWrapper.displayName = 'FormField';
-FormFieldWrapper.defaultProps = defaultProps;
 var _default = exports["default"] = FormFieldWrapper;
 
 /***/ }),
@@ -9418,8 +9338,8 @@ 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 = exports.NAMES_12 = ['advisor', 'archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', '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', 'bar-chart-vertical-lock', '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-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', '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', 'file', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'label', 'label-plus', 'laravel', '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-circle-filled', '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', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'ssl-it', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', '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', 'woocommerce', 'wordpress', 'wordpress-minus', 'zero-circle-filled'];
-const NAMES = exports.NAMES = ['advisor', 'archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', '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', 'bar-chart-vertical-lock', '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-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', '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', 'file', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'label', 'label-plus', 'laravel', '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-circle-filled', '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', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'ssl-it', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', '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', 'woocommerce', 'wordpress', 'wordpress-minus', 'zero-circle-filled'];
+const NAMES_12 = exports.NAMES_12 = ['advisor', 'archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', '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', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boost', '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-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', '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', 'file', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'label', 'label-plus', 'laravel', '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-circle-filled', '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', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'ssl-it', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', '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', 'woocommerce', 'wordpress', 'wordpress-minus', 'zero-circle-filled'];
+const NAMES = exports.NAMES = ['advisor', 'archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', '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', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boost', '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-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', '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', 'file', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'label', 'label-plus', 'laravel', '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-circle-filled', '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', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'ssl-it', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', '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', 'woocommerce', 'wordpress', 'wordpress-minus', 'zero-circle-filled'];
 
 /***/ }),
 
@@ -11565,7 +11485,6 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports["default"] = void 0;
 var _react = __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 _reactTransitionGroup = __webpack_require__(/*! react-transition-group */ "../node_modules/react-transition-group/esm/index.js");
 var _memoizeOne = _interopRequireDefault(__webpack_require__(/*! memoize-one */ "../node_modules/memoize-one/dist/memoize-one.esm.js"));
@@ -11604,7 +11523,7 @@ function getRowKey(row, props) {
 }
 const Tbody = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}list__wrapper`,
     className,
     ...props
   } = _ref;
@@ -11622,18 +11541,6 @@ const Tbody = _ref => {
     })
   });
 };
-Tbody.propTypes = {
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  className: _propTypes.default.string,
-  baseClassName: _propTypes.default.string
-};
-Tbody.defaultProps = {
-  onFocus: undefined,
-  onBlur: undefined,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}list__wrapper`
-};
 const getHumanTotalRows = _ref2 => {
   let {
     selectedRows,
@@ -15815,11 +15722,12 @@ class Progress extends _react.Component {
     let isFailed = false;
     if (children) {
       _react.Children.forEach(children, child => {
-        if ( /*#__PURE__*/(0, _react.isValidElement)(child) && child.props.status) {
-          isNotStarted = isNotStarted && child.props.status === _ProgressStep.STATUS_NOT_STARTED;
-          isFinished = isFinished && child.props.status === _ProgressStep.STATUS_DONE;
-          isFinishedWithWarnings = isFinishedWithWarnings && [_ProgressStep.STATUS_DONE, _ProgressStep.STATUS_WARNING].includes(child.props.status);
-          isFailed = isFailed || child.props.status === _ProgressStep.STATUS_ERROR;
+        if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+          const status = child.props.status ?? _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
+          isNotStarted = isNotStarted && status === _ProgressStep.STATUS_NOT_STARTED;
+          isFinished = isFinished && status === _ProgressStep.STATUS_DONE;
+          isFinishedWithWarnings = isFinishedWithWarnings && [_ProgressStep.STATUS_DONE, _ProgressStep.STATUS_WARNING].includes(status);
+          isFailed = isFailed || status === _ProgressStep.STATUS_ERROR;
         }
       });
     }
@@ -16310,7 +16218,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports["default"] = exports.STATUS_WARNING = exports.STATUS_RUNNING = exports.STATUS_NOT_STARTED = exports.STATUS_ERROR = exports.STATUS_DONE = exports.STATUS_CANCELED = void 0;
+exports["default"] = exports.STATUS_WARNING = exports.STATUS_RUNNING = exports.STATUS_NOT_STARTED = exports.STATUS_ERROR = exports.STATUS_DONE = exports.STATUS_CANCELED = exports.PROGRESS_STEP_DEFAULT_STATUS = void 0;
 var _react = __webpack_require__(/*! react */ "react");
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 var _Icon = _interopRequireWildcard(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
@@ -16332,6 +16240,7 @@ const STATUS_DONE = exports.STATUS_DONE = 'done';
 const STATUS_WARNING = exports.STATUS_WARNING = 'warning';
 const STATUS_ERROR = exports.STATUS_ERROR = 'error';
 const STATUS_CANCELED = exports.STATUS_CANCELED = 'canceled';
+const PROGRESS_STEP_DEFAULT_STATUS = exports.PROGRESS_STEP_DEFAULT_STATUS = STATUS_NOT_STARTED;
 /**
  * `ProgressStep` is a part of the [Progress](#!/Progress) component.
  * @since 1.10.0
@@ -16343,9 +16252,9 @@ const ProgressStep = _ref => {
     icon,
     title,
     statusText,
-    progress,
-    status,
-    baseClassName,
+    progress = -1,
+    status = PROGRESS_STEP_DEFAULT_STATUS,
+    baseClassName = `${_constants.CLS_PREFIX}progress-step`,
     ...props
   } = _ref;
   let intent = null;
@@ -16421,16 +16330,6 @@ const ProgressStep = _ref => {
     })]
   });
 };
-ProgressStep.defaultProps = {
-  icon: null,
-  title: null,
-  status: STATUS_NOT_STARTED,
-  statusText: null,
-  progress: -1,
-  children: null,
-  className: null,
-  baseClassName: `${_constants.CLS_PREFIX}progress-step`
-};
 var _default = exports["default"] = ProgressStep;
 
 /***/ }),
@@ -16447,6 +16346,12 @@ var _default = exports["default"] = ProgressStep;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
+Object.defineProperty(exports, "PROGRESS_STEP_DEFAULT_STATUS", ({
+  enumerable: true,
+  get: function () {
+    return _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
+  }
+}));
 Object.defineProperty(exports, "STATUS_CANCELED", ({
   enumerable: true,
   get: function () {
@@ -16770,21 +16675,6 @@ const getErrorsForChildren = (form, children) => {
   return errors;
 };
 const SECTION_BASE_CLASS_NAME = exports.SECTION_BASE_CLASS_NAME = `${_constants.CLS_PREFIX}section`;
-const DEFAULT_PROPS = {
-  title: undefined,
-  intent: undefined,
-  collapsible: false,
-  collapsed: false,
-  onTitleChange: undefined,
-  onClose: undefined,
-  onToggle: undefined,
-  buttons: undefined,
-  vertical: undefined,
-  children: undefined,
-  className: undefined,
-  baseClassName: SECTION_BASE_CLASS_NAME,
-  form: undefined
-};
 class Section extends _react.Component {
   constructor() {
     super(...arguments);
@@ -16972,19 +16862,26 @@ class Section extends _react.Component {
  * and comprehension of the presented information.
  * @since 0.0.54
  */
-_defineProperty(Section, "defaultProps", DEFAULT_PROPS);
-const SectionWrapper = props => {
+const SectionWrapper = _ref8 => {
+  let {
+    collapsible = false,
+    collapsed = false,
+    baseClassName = SECTION_BASE_CLASS_NAME,
+    ...props
+  } = _ref8;
   const form = (0, _react.useContext)(_FormContext.default);
   const verticalContext = (0, _react.useContext)(_VerticalContext.default);
   const vertical = props.vertical === undefined ? verticalContext : props.vertical;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
     ...props,
     form: form,
-    vertical: vertical
+    vertical: vertical,
+    collapsible: collapsible,
+    collapsed: collapsed,
+    baseClassName: baseClassName
   });
 };
 SectionWrapper.displayName = 'Section';
-SectionWrapper.defaultProps = DEFAULT_PROPS;
 SectionWrapper.WrappedComponent = Section;
 var _default = exports["default"] = SectionWrapper;
 
@@ -18477,7 +18374,7 @@ var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
 __webpack_require__(/*! ./SplitButton.less */ "./components/SplitButton/SplitButton.less");
 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.
+// Copyright 1999-2024. Plesk International GmbH. All rights reserved.
 
 const focusStrategy = {
   getNext(container, element) {
@@ -18554,8 +18451,7 @@ const SplitButton = _ref => {
       menuPlacement: "bottom-end",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         size: size,
-        caret: true,
-        tabIndex: -1
+        caret: true
       })
     })]
   });
@@ -20881,9 +20777,8 @@ var _calculateNodeHeight = _interopRequireDefault(__webpack_require__(/*! ./calc
 __webpack_require__(/*! ./TextArea.less */ "./components/TextArea/TextArea.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 _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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
 const getMinMax = rows => {
   if (typeof rows === 'number') {
     return {
@@ -20895,111 +20790,64 @@ const getMinMax = rows => {
       maxRows: rows.max
     };
   }
-  return null;
+  return {};
 };
-const AVAILABLE_SIZES = ['sm', 'md', 'lg', 'xl', 'fill'];
+const AVAILABLE_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'fill']);
 
 /**
  * `TextArea` is used for entering long text (like email body, descriptions, comments).
  * @since 1.9.0
  */
-
-class TextArea extends _react.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      textareaStyles: null
-    });
-    _defineProperty(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
-    _defineProperty(this, "handleChange", e => {
-      const {
-        autoheight,
-        onChange
-      } = this.props;
-      if (autoheight) {
-        this.adjustHeight();
-      }
-      if (typeof onChange === 'function') {
-        onChange(e);
-      }
-    });
-  }
-  static getDerivedStateFromProps(_ref) {
-    let {
-      rows
-    } = _ref;
-    if (rows) {
-      return getMinMax(rows);
-    }
-    return null;
-  }
-  componentDidMount() {
-    this.adjustHeight();
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      autoheight
-    } = this.props;
-    if (autoheight !== prevProps.autoheight) {
-      this.adjustHeight();
-    }
-  }
-  adjustHeight() {
-    const {
-      autoheight
-    } = this.props;
-    if (!autoheight) {
-      this.setState({
-        textareaStyles: null
-      });
+const TextArea = _ref => {
+  let {
+    baseClassName = `${_constants.CLS_PREFIX}textarea`,
+    className,
+    rows = 4,
+    size = 'md',
+    autoheight = false,
+    onChange,
+    style,
+    ...props
+  } = _ref;
+  const rootRef = (0, _react.useRef)(null);
+  const useSizeModifier = size && AVAILABLE_SIZES.has(size);
+  const {
+    minRows,
+    maxRows
+  } = getMinMax(rows);
+  const [heightStyle, setHeightStyle] = (0, _react.useState)();
+  const adjustHeight = (0, _react.useCallback)(() => {
+    if (!autoheight || !rootRef.current) {
+      setHeightStyle(undefined);
       return;
     }
-    const {
-      minRows,
-      maxRows
-    } = this.state;
-    if (this.rootRef.current) {
-      const textareaStyles = (0, _calculateNodeHeight.default)(this.rootRef.current, false, minRows, maxRows);
-      this.setState({
-        textareaStyles
-      });
+    setHeightStyle((0, _calculateNodeHeight.default)(rootRef.current, false, minRows, maxRows));
+  }, [autoheight, maxRows, minRows]);
+  (0, _react.useLayoutEffect)(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+  const handleChange = e => {
+    if (autoheight) {
+      adjustHeight();
     }
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      rows,
-      size,
-      autoheight,
-      onChange,
-      ...other
-    } = this.props;
-    const {
-      textareaStyles,
-      minRows
-    } = this.state;
-    const useSizeModifier = size && AVAILABLE_SIZES.indexOf(size) !== -1;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
-      className: (0, _classnames.default)(baseClassName, {
-        [`${baseClassName}--size-${size}`]: useSizeModifier
-      }, className),
-      ref: this.rootRef,
-      style: textareaStyles,
-      onChange: this.handleChange,
-      rows: minRows,
-      ...other
-    });
-  }
-}
-_defineProperty(TextArea, "defaultProps", {
-  baseClassName: `${_constants.CLS_PREFIX}textarea`,
-  className: null,
-  rows: 4,
-  size: 'md',
-  autoheight: false,
-  onChange: null
-});
+    if (typeof onChange === 'function') {
+      onChange(e);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+    ref: rootRef,
+    className: (0, _classnames.default)(baseClassName, {
+      [`${baseClassName}--size-${size}`]: useSizeModifier
+    }, className),
+    style: {
+      ...style,
+      ...heightStyle
+    },
+    onChange: handleChange,
+    rows: minRows,
+    ...props
+  });
+};
 var _default = exports["default"] = TextArea;
 
 /***/ }),
@@ -21060,8 +20908,8 @@ const calculateNodeStyling = function (node) {
 // eslint-disable-next-line max-params
 function calculateNodeHeight(uiTextNode) {
   let useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea');
     document.body.appendChild(hiddenTextarea);
@@ -21083,8 +20931,8 @@ function calculateNodeHeight(uiTextNode) {
   // Need to have the overflow attribute to hide the scrollbar otherwise text-lines will not calculated properly as the shadow will technically be narrower for content
   hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
   hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
-  let minHeight = null;
-  let maxHeight = null;
+  let minHeight = undefined;
+  let maxHeight = undefined;
   let height = hiddenTextarea.scrollHeight;
   let overflowY;
   if (boxSizing === 'border-box') {
@@ -21094,23 +20942,23 @@ function calculateNodeHeight(uiTextNode) {
     // remove padding, since height = content
     height = height - paddingSize;
   }
-  if (minRows !== null || maxRows !== null) {
+  if (minRows !== undefined || maxRows !== undefined) {
     // measure height of a textarea with a single row
     hiddenTextarea.value = ' ';
     const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-    if (minRows !== null) {
+    if (minRows !== undefined) {
       minHeight = singleRowHeight * minRows;
       if (boxSizing === 'border-box') {
         minHeight = minHeight + paddingSize + borderSize;
       }
       height = Math.max(minHeight, height);
     }
-    if (maxRows !== null) {
+    if (maxRows !== undefined) {
       maxHeight = singleRowHeight * maxRows;
       if (boxSizing === 'border-box') {
         maxHeight = maxHeight + paddingSize + borderSize;
       }
-      overflowY = height > maxHeight ? '' : 'hidden';
+      overflowY = height > maxHeight ? undefined : 'hidden';
       height = Math.min(maxHeight, height);
     }
   }
@@ -21606,6 +21454,127 @@ exports.createRegistry = createRegistry;
 
 /***/ }),
 
+/***/ "./components/Toolbar/RegistryContextBeta.tsx":
+/*!****************************************************!*\
+  !*** ./components/Toolbar/RegistryContextBeta.tsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useRegistryItem = exports.useRegistry = exports["default"] = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+const RegistryContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+RegistryContext.displayName = 'RegistryContext';
+const useRegistryContext = () => (0, _react.useContext)(RegistryContext);
+var _default = exports["default"] = RegistryContext;
+class Registry {
+  constructor() {
+    _defineProperty(this, "items", []);
+  }
+  register(item) {
+    this.items.push(item);
+  }
+  unregister(item) {
+    this.items = this.items.filter(i => i !== item);
+  }
+  compact() {
+    let changed = false;
+    for (const item of [...this.items].reverse()) {
+      if (!item.isCompact) {
+        item.compact();
+        changed = true;
+        break;
+      }
+    }
+    return changed;
+  }
+  expand() {
+    let changed = false;
+    for (const item of this.items) {
+      if (this.checkItemIsCompactOrHasCompactItems(item)) {
+        item.expand();
+        changed = true;
+        break;
+      }
+    }
+    return changed;
+  }
+  get isCompact() {
+    return this.items.every(_ref => {
+      let {
+        isCompact
+      } = _ref;
+      return isCompact;
+    });
+  }
+  get hasCompactItems() {
+    return this.items.some(this.checkItemIsCompactOrHasCompactItems);
+  }
+  checkItemIsCompactOrHasCompactItems(item) {
+    return item.isCompact || 'hasCompactItems' in item && item.hasCompactItems;
+  }
+}
+class RegistryItem {
+  constructor(_ref2) {
+    let {
+      onCompactStateChange
+    } = _ref2;
+    _defineProperty(this, "_isCompact", false);
+    _defineProperty(this, "onCompactStateChange", void 0);
+    this.onCompactStateChange = onCompactStateChange;
+  }
+  compact() {
+    this._isCompact = true;
+    this.onCompactStateChange(true);
+  }
+  expand() {
+    this._isCompact = false;
+    this.onCompactStateChange(false);
+  }
+  get isCompact() {
+    return this._isCompact;
+  }
+}
+const useRegistry = () => {
+  const parentRegistry = useRegistryContext();
+  const [registry] = (0, _react.useState)(() => new Registry());
+  (0, _react.useLayoutEffect)(() => {
+    if (!parentRegistry) return undefined;
+    parentRegistry.register(registry);
+    return () => {
+      parentRegistry.unregister(registry);
+    };
+  }, [parentRegistry, registry]);
+  return registry;
+};
+exports.useRegistry = useRegistry;
+const useRegistryItem = () => {
+  const registry = useRegistryContext();
+  const [isCompact, setIsCompact] = (0, _react.useState)(false);
+  const [registryItem] = (0, _react.useState)(() => new RegistryItem({
+    onCompactStateChange: setIsCompact
+  }));
+  (0, _react.useLayoutEffect)(() => {
+    if (!registry) return undefined;
+    registry.register(registryItem);
+    return () => {
+      registry.unregister(registryItem);
+    };
+  }, [registry, registryItem]);
+  return [isCompact];
+};
+exports.useRegistryItem = useRegistryItem;
+
+/***/ }),
+
 /***/ "./components/Toolbar/Toolbar.tsx":
 /*!****************************************!*\
   !*** ./components/Toolbar/Toolbar.tsx ***!
@@ -21623,9 +21592,12 @@ 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 _RegistryContext = _interopRequireWildcard(__webpack_require__(/*! ./RegistryContext */ "./components/Toolbar/RegistryContext.tsx"));
+var _RegistryContextBeta = _interopRequireWildcard(__webpack_require__(/*! ./RegistryContextBeta */ "./components/Toolbar/RegistryContextBeta.tsx"));
 var _DistractionFreeModeContext = _interopRequireDefault(__webpack_require__(/*! ../DistractionFreeModeContext */ "./components/DistractionFreeModeContext/index.tsx"));
 var _ToolbarItem = __webpack_require__(/*! ./ToolbarItem */ "./components/Toolbar/ToolbarItem.tsx");
 var _Squeezer = _interopRequireDefault(__webpack_require__(/*! ../Squeezer */ "./components/Squeezer/index.tsx"));
+var _hooks = __webpack_require__(/*! ../../hooks */ "./hooks/index.tsx");
+var _ToolbarBetaProvider = __webpack_require__(/*! ./ToolbarBetaProvider */ "./components/Toolbar/ToolbarBetaProvider.tsx");
 __webpack_require__(/*! ../../helpers/base.less */ "./helpers/base.less");
 __webpack_require__(/*! ./Toolbar.less */ "./components/Toolbar/Toolbar.less");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
@@ -21642,7 +21614,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * and controls for changing the way the content block looks.
  * @since 0.0.57
  */
-class Toolbar extends _react.Component {
+class ToolbarClassComponent extends _react.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "state", {
@@ -21699,15 +21671,89 @@ class Toolbar extends _react.Component {
     });
   }
 }
-_defineProperty(Toolbar, "defaultProps", {
+_defineProperty(ToolbarClassComponent, "defaultProps", {
   children: null,
   className: null,
   baseClassName: `${_constants.CLS_PREFIX}toolbar`
 });
+const ToolbarBeta = _ref2 => {
+  let {
+    children,
+    className,
+    baseClassName = `${_constants.CLS_PREFIX}toolbar`,
+    ...props
+  } = _ref2;
+  const containerRef = (0, _react.useRef)(null);
+  const [isDistractionFreeModeEnabled, setIsDistractionFreeModeEnabled] = (0, _react.useState)(false);
+  const distractionFreeModeContextValue = (0, _react.useMemo)(() => ({
+    enabled: isDistractionFreeModeEnabled,
+    toggle: () => setIsDistractionFreeModeEnabled(current => !current)
+  }), [isDistractionFreeModeEnabled]);
+  const registry = (0, _RegistryContextBeta.useRegistry)();
+  (0, _hooks.useSqueeze)({
+    ref: containerRef,
+    compact: () => registry.compact(),
+    expand: () => registry.expand()
+  });
+  const toolbarItems = (0, _ToolbarItem.toToolbarItems)(children, true);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: containerRef,
+    className: (0, _classnames.default)(baseClassName, className),
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContextBeta.default.Provider, {
+      value: registry,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
+        value: distractionFreeModeContextValue,
+        children: toolbarItems
+      })
+    })
+  });
+};
+const Toolbar = props => {
+  const isToolbarBeta = (0, _ToolbarBetaProvider.useToolbarBetaContext)();
+  return isToolbarBeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarBeta, {
+    ...props
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarClassComponent, {
+    ...props
+  });
+};
 var _default = exports["default"] = Toolbar;
 
 /***/ }),
 
+/***/ "./components/Toolbar/ToolbarBetaProvider.tsx":
+/*!****************************************************!*\
+  !*** ./components/Toolbar/ToolbarBetaProvider.tsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useToolbarBetaContext = exports["default"] = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
+// Copyright 1999-2024. Plesk International GmbH. All rights reserved.
+
+const ToolbarBetaContext = /*#__PURE__*/(0, _react.createContext)(false);
+const useToolbarBetaContext = () => (0, _react.useContext)(ToolbarBetaContext);
+exports.useToolbarBetaContext = useToolbarBetaContext;
+const ToolbarBetaProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarBetaContext.Provider, {
+    value: true,
+    children: children
+  });
+};
+var _default = exports["default"] = ToolbarBetaProvider;
+
+/***/ }),
+
 /***/ "./components/Toolbar/ToolbarExpander.tsx":
 /*!************************************************!*\
   !*** ./components/Toolbar/ToolbarExpander.tsx ***!
@@ -21775,9 +21821,11 @@ var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
 var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
 var _ToolbarMenu = _interopRequireDefault(__webpack_require__(/*! ./ToolbarMenu */ "./components/Toolbar/ToolbarMenu.tsx"));
 var _RegistryContext = _interopRequireWildcard(__webpack_require__(/*! ./RegistryContext */ "./components/Toolbar/RegistryContext.tsx"));
+var _RegistryContextBeta = _interopRequireWildcard(__webpack_require__(/*! ./RegistryContextBeta */ "./components/Toolbar/RegistryContextBeta.tsx"));
 var _DistractionFreeModeContext = _interopRequireDefault(__webpack_require__(/*! ../DistractionFreeModeContext */ "./components/DistractionFreeModeContext/index.tsx"));
 var _ToolbarItem = __webpack_require__(/*! ./ToolbarItem */ "./components/Toolbar/ToolbarItem.tsx");
 var _ToolbarExpander = _interopRequireDefault(__webpack_require__(/*! ./ToolbarExpander */ "./components/Toolbar/ToolbarExpander.tsx"));
+var _ToolbarBetaProvider = __webpack_require__(/*! ./ToolbarBetaProvider */ "./components/Toolbar/ToolbarBetaProvider.tsx");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -21790,7 +21838,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * It is used for grouping several toolbar controls together.
  * @since 0.0.57
  */
-class ToolbarGroup extends _react.Component {
+class ToolbarGroupClassComponent extends _react.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "state", {
@@ -21910,7 +21958,7 @@ class ToolbarGroup extends _react.Component {
     });
   }
 }
-_defineProperty(ToolbarGroup, "defaultProps", {
+_defineProperty(ToolbarGroupClassComponent, "defaultProps", {
   registry: undefined,
   distractionFreeMode: undefined
 });
@@ -21922,7 +21970,7 @@ const ToolbarGroupWrapper = _ref => {
   } = _ref;
   const registry = (0, _react.useContext)(_RegistryContext.default);
   const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroup, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupClassComponent, {
     groupable: groupable,
     baseClassName: baseClassName,
     ...props,
@@ -21931,7 +21979,67 @@ const ToolbarGroupWrapper = _ref => {
   });
 };
 ToolbarGroupWrapper.displayName = 'ToolbarGroup';
-var _default = exports["default"] = ToolbarGroupWrapper;
+const ToolbarGroupBeta = _ref2 => {
+  let {
+    baseClassName = `${_constants.CLS_PREFIX}toolbar__group`,
+    className,
+    title,
+    children,
+    groupable = true,
+    ...props
+  } = _ref2;
+  const [compact] = (0, _RegistryContextBeta.useRegistryItem)();
+  const registry = (0, _RegistryContextBeta.useRegistry)();
+  const [availableInDistractionFreeMode, setAvailableInDistractionFreeMode] = (0, _react.useState)(false);
+  const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
+  const distractionFreeModeContextValue = {
+    enabled: distractionFreeMode?.enabled ?? false,
+    toggle: () => {
+      if (distractionFreeMode) {
+        distractionFreeMode.toggle();
+        setAvailableInDistractionFreeMode(current => !current);
+      }
+    }
+  };
+  let hasExpander = _react.Children.toArray(children).some(child => /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _ToolbarExpander.default);
+  if (groupable && compact && _react.Children.count(children) > 1) {
+    hasExpander = false;
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
+      menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarMenu.default, {
+        onItemClick: () => {},
+        children: children
+      }),
+      children: title
+    });
+  } else {
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContextBeta.default.Provider, {
+      value: registry,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
+        value: distractionFreeModeContextValue,
+        children: (0, _ToolbarItem.toToolbarItems)(children, true)
+      })
+    });
+  }
+  if (distractionFreeModeContextValue.enabled && !availableInDistractionFreeMode) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(baseClassName, className, {
+      [`${baseClassName}--grow`]: hasExpander || distractionFreeModeContextValue.enabled && availableInDistractionFreeMode
+    }),
+    ...props,
+    children: children
+  });
+};
+const ToolbarGroup = props => {
+  const isToolbarBeta = (0, _ToolbarBetaProvider.useToolbarBetaContext)();
+  return isToolbarBeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupBeta, {
+    ...props
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupWrapper, {
+    ...props
+  });
+};
+var _default = exports["default"] = ToolbarGroup;
 
 /***/ }),
 
@@ -21955,6 +22063,7 @@ var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../Respo
 var _RegistryContext = _interopRequireDefault(__webpack_require__(/*! ./RegistryContext */ "./components/Toolbar/RegistryContext.tsx"));
 var _ToolbarGroup = _interopRequireDefault(__webpack_require__(/*! ./ToolbarGroup */ "./components/Toolbar/ToolbarGroup.tsx"));
 var _ToolbarExpander = _interopRequireDefault(__webpack_require__(/*! ./ToolbarExpander */ "./components/Toolbar/ToolbarExpander.tsx"));
+var _RegistryContextBeta = __webpack_require__(/*! ./RegistryContextBeta */ "./components/Toolbar/RegistryContextBeta.tsx");
 var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
 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; }
@@ -21998,19 +22107,33 @@ class ToolbarItem extends _react.Component {
   }
 }
 ToolbarItem.contextType = _RegistryContext.default;
-const toToolbarItems = children => _react.Children.map(children, child => {
-  if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
-    return child;
-  }
-  if (child.type === _ToolbarGroup.default || child.type === _ToolbarExpander.default) {
-    return child;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItem, {
-    children: /*#__PURE__*/(0, _react.cloneElement)(child, {
-      className: (0, _classnames.default)(child.props.className, `${_constants.CLS_PREFIX}toolbar__group-item`)
-    })
+const ToolbarItemBeta = _ref => {
+  let {
+    children
+  } = _ref;
+  const [isCompact] = (0, _RegistryContextBeta.useRegistryItem)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
+    value: isCompact,
+    children: children
   });
-});
+};
+const toToolbarItems = function (children) {
+  let isBeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return _react.Children.map(children, child => {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return child;
+    }
+    if (child.type === _ToolbarGroup.default || child.type === _ToolbarExpander.default) {
+      return child;
+    }
+    const Component = isBeta ? ToolbarItemBeta : ToolbarItem;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      children: /*#__PURE__*/(0, _react.cloneElement)(child, {
+        className: (0, _classnames.default)(child.props.className, `${_constants.CLS_PREFIX}toolbar__group-item`)
+      })
+    });
+  });
+};
 exports.toToolbarItems = toToolbarItems;
 
 /***/ }),
@@ -22036,6 +22159,7 @@ var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./com
 var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
 var _List = __webpack_require__(/*! ../List */ "./components/List/index.tsx");
 var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
+var _Button2 = __webpack_require__(/*! ../Button/Button */ "./components/Button/Button.tsx");
 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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -22057,7 +22181,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
         } = child.props);
         props.onClick = (0, _utils.wrapFunction)(props.onClick, onItemClick);
         Object.keys(other).forEach(k => {
-          if (!(_Button.default.defaultProps && k in _Button.default.defaultProps)) {
+          if (!_Button2.BUTTON_PROP_NAMES.includes(k)) {
             props[k] = other[k];
           }
         });
@@ -22160,6 +22284,12 @@ var _default = exports["default"] = ToolbarMenu;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
+Object.defineProperty(exports, "ToolbarBetaProvider", ({
+  enumerable: true,
+  get: function () {
+    return _ToolbarBetaProvider.default;
+  }
+}));
 Object.defineProperty(exports, "ToolbarExpander", ({
   enumerable: true,
   get: function () {
@@ -22181,6 +22311,7 @@ Object.defineProperty(exports, "default", ({
 var _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ "./components/Toolbar/Toolbar.tsx"));
 var _ToolbarGroup = _interopRequireDefault(__webpack_require__(/*! ./ToolbarGroup */ "./components/Toolbar/ToolbarGroup.tsx"));
 var _ToolbarExpander = _interopRequireDefault(__webpack_require__(/*! ./ToolbarExpander */ "./components/Toolbar/ToolbarExpander.tsx"));
+var _ToolbarBetaProvider = _interopRequireDefault(__webpack_require__(/*! ./ToolbarBetaProvider */ "./components/Toolbar/ToolbarBetaProvider.tsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /***/ }),
@@ -22790,6 +22921,7 @@ var _exportNames = {
   ProgressDialog: true,
   ProgressDialogStep: true,
   ProgressStep: true,
+  PROGRESS_STEP_DEFAULT_STATUS: true,
   Rating: true,
   Section: true,
   SegmentedControl: true,
@@ -22811,6 +22943,7 @@ var _exportNames = {
   Toolbar: true,
   ToolbarGroup: true,
   ToolbarExpander: true,
+  ToolbarBetaProvider: true,
   Tooltip: true,
   Tour: true,
   Translate: true,
@@ -23204,6 +23337,12 @@ Object.defineProperty(exports, "Overlay", ({
     return _Overlay.default;
   }
 }));
+Object.defineProperty(exports, "PROGRESS_STEP_DEFAULT_STATUS", ({
+  enumerable: true,
+  get: function () {
+    return _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
+  }
+}));
 Object.defineProperty(exports, "PageHeader", ({
   enumerable: true,
   get: function () {
@@ -23426,6 +23565,12 @@ Object.defineProperty(exports, "Toolbar", ({
     return _Toolbar.default;
   }
 }));
+Object.defineProperty(exports, "ToolbarBetaProvider", ({
+  enumerable: true,
+  get: function () {
+    return _Toolbar.ToolbarBetaProvider;
+  }
+}));
 Object.defineProperty(exports, "ToolbarExpander", ({
   enumerable: true,
   get: function () {
@@ -23585,7 +23730,7 @@ var _Progress = _interopRequireDefault(__webpack_require__(/*! ./Progress */ "./
 var _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ./ProgressBar */ "./components/ProgressBar/index.tsx"));
 var _ProgressDialog = _interopRequireDefault(__webpack_require__(/*! ./ProgressDialog */ "./components/ProgressDialog/index.tsx"));
 var _ProgressDialogStep = _interopRequireDefault(__webpack_require__(/*! ./ProgressDialogStep */ "./components/ProgressDialogStep/index.js"));
-var _ProgressStep = _interopRequireDefault(__webpack_require__(/*! ./ProgressStep */ "./components/ProgressStep/index.tsx"));
+var _ProgressStep = _interopRequireWildcard(__webpack_require__(/*! ./ProgressStep */ "./components/ProgressStep/index.tsx"));
 var _Rating = _interopRequireDefault(__webpack_require__(/*! ./Rating */ "./components/Rating/index.tsx"));
 var _Section = _interopRequireWildcard(__webpack_require__(/*! ./Section */ "./components/Section/index.tsx"));
 Object.keys(_Section).forEach(function (key) {
@@ -23899,6 +24044,125 @@ module.exports = {
 
 /***/ }),
 
+/***/ "./hooks/index.tsx":
+/*!*************************!*\
+  !*** ./hooks/index.tsx ***!
+  \*************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+Object.defineProperty(exports, "useSqueeze", ({
+  enumerable: true,
+  get: function () {
+    return _useSqueeze.useSqueeze;
+  }
+}));
+var _useSqueeze = __webpack_require__(/*! ./useSqueeze */ "./hooks/useSqueeze.tsx");
+
+/***/ }),
+
+/***/ "./hooks/useResizeObserver.tsx":
+/*!*************************************!*\
+  !*** ./hooks/useResizeObserver.tsx ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useResizeObserver = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+// Copyright 1999-2024. Plesk International GmbH. All rights reserved.
+
+const useResizeObserver = _ref => {
+  let {
+    ref,
+    onResize
+  } = _ref;
+  const onResizeRef = (0, _react.useRef)(undefined);
+  onResizeRef.current = onResize;
+  (0, _react.useEffect)(() => {
+    if (!ref.current) return undefined;
+    if (typeof window === 'undefined' || !('ResizeObserver' in window)) return undefined;
+    const observer = new ResizeObserver(() => {
+      onResizeRef.current?.();
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+};
+exports.useResizeObserver = useResizeObserver;
+
+/***/ }),
+
+/***/ "./hooks/useSqueeze.tsx":
+/*!******************************!*\
+  !*** ./hooks/useSqueeze.tsx ***!
+  \******************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.useSqueeze = void 0;
+var _react = __webpack_require__(/*! react */ "react");
+var _useResizeObserver = __webpack_require__(/*! ./useResizeObserver */ "./hooks/useResizeObserver.tsx");
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const useSqueeze = _ref => {
+  let {
+    ref,
+    compact,
+    expand
+  } = _ref;
+  const minWidth = (0, _react.useRef)(0);
+  const lastAction = (0, _react.useRef)(null);
+  const [recheck, setRecheck] = (0, _react.useState)(false);
+  const checkRef = (0, _react.useRef)();
+  const check = () => {
+    if (!ref.current) return;
+    const root = ref.current;
+    const width = Math.ceil(root.getBoundingClientRect().width);
+    const scrollWidth = Math.floor(root.scrollWidth);
+    let isCompactChanged = false;
+    if (scrollWidth > width) {
+      isCompactChanged = compact();
+      minWidth.current = scrollWidth;
+      lastAction.current = 'compact';
+    } else if (minWidth.current && width > minWidth.current || lastAction.current === 'expand') {
+      isCompactChanged = expand();
+      lastAction.current = 'expand';
+    }
+    if (isCompactChanged) {
+      setRecheck(c => !c);
+    }
+  };
+  checkRef.current = check;
+  (0, _react.useLayoutEffect)(() => {
+    checkRef.current?.();
+  }, [recheck]);
+  (0, _useResizeObserver.useResizeObserver)({
+    ref,
+    onResize: check
+  });
+};
+exports.useSqueeze = useSqueeze;
+
+/***/ }),
+
 /***/ "./index.tsx":
 /*!*******************!*\
   !*** ./index.tsx ***!
@@ -83257,6 +83521,7 @@ function validateFragmentProps(fragment) {
   }
 }
 
+var didWarnAboutKeySpread = {};
 function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
   {
     var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
@@ -83327,6 +83592,24 @@ function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
       }
     }
 
+    {
+      if (hasOwnProperty.call(props, 'key')) {
+        var componentName = getComponentNameFromType(type);
+        var keys = Object.keys(props).filter(function (k) {
+          return k !== 'key';
+        });
+        var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
+
+        if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+          var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+
+          error('A props object containing a "key" prop is being spread into JSX:\n' + '  let props = %s;\n' + '  <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + '  let props = %s;\n' + '  <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
+
+          didWarnAboutKeySpread[componentName + beforeExample] = true;
+        }
+      }
+    }
+
     if (type === REACT_FRAGMENT_TYPE) {
       validateFragmentProps(element);
     } else {
@@ -84667,7 +84950,7 @@ module.exports = __webpack_require__.p + "images/no-image.svg?2f8dd4286fb9a8bd9a
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
-module.exports = __webpack_require__.p + "images/symbols.svg?74bb7981633207f7307b";
+module.exports = __webpack_require__.p + "images/symbols.svg?c93dbf4e8547363db109";
 
 /***/ }),
 
@@ -87618,12 +87901,11 @@ __webpack_require__.r(__webpack_exports__);
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
   }
   return target;
 }
@@ -87658,7 +87940,7 @@ function _setPrototypeOf(o, p) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.38.2","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.24.4","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","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.24.4","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.24.3","@babel/preset-env":"^7.24.4","@babel/preset-react":"^7.24.1","@babel/preset-typescript":"^7.24.1","@babel/types":"^7.24.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.4","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.2","@testing-library/user-event":"^14.5.2","@types/buble":"^0.20.5","@types/classnames":"2.3.1","@types/codemirror":"^5.60.15","@types/doctrine":"^0.0.5","@types/jest":"^29.5.12","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^4.3.2","@types/node":"^16.18.95","@types/react":"^18.2.74","@types/react-dom":"^18.2.24","@types/react-measure":"2.0.9","@types/react-transition-group":"^4.4.10","@types/svg4everybody":"2.1.2","@types/webpack-env":"^1.18.4","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","autoprefixer":"^10.4.19","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.11.0","css-minimizer-webpack-plugin":"^5.0.1","eslint":"^8.57.0","eslint-config-prettier":"^8.10.0","eslint-plugin-markdown":"^3.0.1","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-dev-server":"^9.0.2","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.4.0","less":"^4.2.0","less-loader":"^11.1.4","mini-css-extract-plugin":"^2.8.1","postcss":"^8.4.38","postcss-less":"^6.0.0","postcss-loader":"^7.3.4","postcss-logical":"^6.2.0","prettier":"^2.8.8","puppeteer-core":"21.7.0","react":"^18.2.0","react-docgen-typescript":"^2.2.2","react-dom":"^18.2.0","react-styleguidist":"^13.1.2","rimraf":"^5.0.5","rtlcss":"^4.1.1","style-loader":"^3.3.4","stylelint":"^15.11.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.10","typescript":"5.2.2","webpack":"^5.91.0","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"}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.40.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 && 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.24.5","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","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.24.5","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.24.3","@babel/preset-env":"^7.24.5","@babel/preset-react":"^7.24.1","@babel/preset-typescript":"^7.24.1","@babel/types":"^7.24.5","@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.4","@testing-library/jest-dom":"^6.4.5","@testing-library/react":"^14.3.1","@testing-library/user-event":"^14.5.2","@types/buble":"^0.20.5","@types/classnames":"2.3.1","@types/codemirror":"^5.60.15","@types/doctrine":"^0.0.5","@types/jest":"^29.5.12","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^4.3.2","@types/node":"^16.18.96","@types/react":"^18.3.1","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.9","@types/react-transition-group":"^4.4.10","@types/svg4everybody":"2.1.2","@types/webpack-env":"^1.18.4","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","autoprefixer":"^10.4.19","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.11.0","css-minimizer-webpack-plugin":"^5.0.1","eslint":"^8.57.0","eslint-config-prettier":"^8.10.0","eslint-plugin-markdown":"^3.0.1","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-dev-server":"^9.0.2","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.4.0","less":"^4.2.0","less-loader":"^11.1.4","mini-css-extract-plugin":"^2.9.0","postcss":"^8.4.38","postcss-less":"^6.0.0","postcss-loader":"^7.3.4","postcss-logical":"^6.2.0","prettier":"^2.8.8","puppeteer-core":"21.7.0","react":"^18.3.1","react-docgen-typescript":"^2.2.2","react-dom":"^18.3.1","react-styleguidist":"^13.1.2","rimraf":"^5.0.5","rtlcss":"^4.1.1","style-loader":"^3.3.4","stylelint":"^15.11.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^6.1.0","stylelint-prettier":"^3.0.0","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.10","typescript":"5.2.2","webpack":"^5.91.0","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"}');
 
 /***/ }),