@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -14,6 +11,8 @@ import Dropdown from '../Dropdown';
 import Menu, { MenuItem } from '../Menu';
 import Squeezer from '../Squeezer';
 import ResponsiveContext from '../ResponsiveContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const alphaSort = (a, b) => a > b ? 1 : -1;
 
 /**
@@ -150,23 +149,28 @@ class SegmentedControl extends Component {
     const {
       title
     } = buttons.find(button => button.value === selected) || {};
-    const menu = /*#__PURE__*/React.createElement(Menu, null, buttons.map(_ref2 => {
-      let {
-        title,
-        value,
-        ...buttonProps
-      } = _ref2;
-      const menuItemProps = {};
-      if (onChange !== null) {
-        menuItemProps.onClick = this.handleChange(value);
-      }
-      return /*#__PURE__*/React.createElement(MenuItem, _extends({
-        key: value
-      }, buttonProps, menuItemProps), title);
-    }));
-    return /*#__PURE__*/React.createElement(Dropdown, {
-      menu: menu
-    }, title);
+    const menu = /*#__PURE__*/_jsx(Menu, {
+      children: buttons.map(_ref2 => {
+        let {
+          title,
+          value,
+          ...buttonProps
+        } = _ref2;
+        const menuItemProps = {};
+        if (onChange !== null) {
+          menuItemProps.onClick = this.handleChange(value);
+        }
+        return /*#__PURE__*/_jsx(MenuItem, {
+          ...buttonProps,
+          ...menuItemProps,
+          children: title
+        }, value);
+      })
+    });
+    return /*#__PURE__*/_jsx(Dropdown, {
+      menu: menu,
+      children: title
+    });
   }
   renderButtonGroup() {
     const {
@@ -182,38 +186,41 @@ class SegmentedControl extends Component {
       monoWidth
     } = this.state;
     const isCollapsed = this.state.compact;
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      className: `${baseClassName}__button-group`
-    }, buttons.map(_ref3 => {
-      let {
-        value,
-        title,
-        ...buttonProps
-      } = _ref3;
-      // uncontrolled
-      const handler = {};
-      if (onChange !== null) {
-        handler.onClick = this.handleChange(value);
-      }
-      let buttonSelected = false;
-      if (multiple && selected && selected instanceof Array && selected.indexOf(value) !== -1) {
-        buttonSelected = true;
-      } else if (!multiple && selected === value) {
-        buttonSelected = true;
-      }
-      buttonProps.className = classNames(buttonProps.className, `${baseClassName}__button`);
-      if (!isCollapsed && monospaced && monoWidth) {
-        buttonProps.style = {
-          width: monoWidth,
-          ...buttonProps.style
-        };
-      }
-      return /*#__PURE__*/React.createElement(Button, _extends({
-        key: value,
-        selected: buttonSelected,
-        ghost: ghost
-      }, handler, buttonProps), title);
-    }));
+    return /*#__PURE__*/_jsx(ButtonGroup, {
+      className: `${baseClassName}__button-group`,
+      children: buttons.map(_ref3 => {
+        let {
+          value,
+          title,
+          ...buttonProps
+        } = _ref3;
+        // uncontrolled
+        const handler = {};
+        if (onChange !== null) {
+          handler.onClick = this.handleChange(value);
+        }
+        let buttonSelected = false;
+        if (multiple && selected && selected instanceof Array && selected.indexOf(value) !== -1) {
+          buttonSelected = true;
+        } else if (!multiple && selected === value) {
+          buttonSelected = true;
+        }
+        buttonProps.className = classNames(buttonProps.className, `${baseClassName}__button`);
+        if (!isCollapsed && monospaced && monoWidth) {
+          buttonProps.style = {
+            width: monoWidth,
+            ...buttonProps.style
+          };
+        }
+        return /*#__PURE__*/_jsx(Button, {
+          selected: buttonSelected,
+          ghost: ghost,
+          ...handler,
+          ...buttonProps,
+          children: title
+        }, value);
+      })
+    });
   }
   render() {
     const {
@@ -231,29 +238,34 @@ class SegmentedControl extends Component {
       ...props
     } = this.props;
     const isCollapsed = this.isResponsive();
-    return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-      value: isCollapsed
-    }, /*#__PURE__*/React.createElement(Squeezer, {
-      compact: this.compact,
-      uncompact: this.uncompact,
-      innerRef: el => {
-        this.rootRef.current = el;
-      }
-    }, _ref4 => {
-      let {
-        ref
-      } = _ref4;
-      return /*#__PURE__*/React.createElement("div", _extends({
-        ref: ref,
-        className: classNames(baseClassName, {
-          [`${baseClassName}--inline`]: inline,
-          [`${baseClassName}--collapsed`]: isCollapsed,
-          [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
-        }, className)
-      }, props), label && /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__label`
-      }, label), this.renderControl());
-    }));
+    return /*#__PURE__*/_jsx(ResponsiveContext.Provider, {
+      value: isCollapsed,
+      children: /*#__PURE__*/_jsx(Squeezer, {
+        compact: this.compact,
+        uncompact: this.uncompact,
+        innerRef: el => {
+          this.rootRef.current = el;
+        },
+        children: _ref4 => {
+          let {
+            ref
+          } = _ref4;
+          return /*#__PURE__*/_jsxs("div", {
+            ref: ref,
+            className: classNames(baseClassName, {
+              [`${baseClassName}--inline`]: inline,
+              [`${baseClassName}--collapsed`]: isCollapsed,
+              [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
+            }, className),
+            ...props,
+            children: [label && /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__label`,
+              children: label
+            }), this.renderControl()]
+          });
+        }
+      })
+    });
   }
 }
 SegmentedControl.propTypes = {

package/esm/components/Select/MultiValue.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React from 'react';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const MultiValue = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}select-multi-value`,
@@ -19,24 +19,30 @@ const MultiValue = _ref => {
     e.stopPropagation();
     onRemove();
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName)
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__content`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__label`
-  }, children), /*#__PURE__*/React.createElement(Icon, {
-    className: `${baseClassName}__remove`,
-    size: "12",
-    onMouseDown: onMouseDown,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 12",
-    focusable: "false",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M3.85 8.854a.498.498 0 1 1-.704-.704L5.296 6l-2.15-2.15a.498.498 0 0 1 .704-.704L6 5.296l2.15-2.15a.498.498 0 1 1 .704.704L6.704 6l2.15 2.15a.498.498 0 0 1-.704.704L6 6.704l-2.15 2.15z"
-  })))));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(baseClassName),
+    ...props,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__content`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__label`,
+        children: children
+      }), /*#__PURE__*/_jsx(Icon, {
+        className: `${baseClassName}__remove`,
+        size: "12",
+        onMouseDown: onMouseDown,
+        onClick: onClick,
+        children: /*#__PURE__*/_jsx("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 12 12",
+          focusable: "false",
+          "aria-hidden": "true",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M3.85 8.854a.498.498 0 1 1-.704-.704L5.296 6l-2.15-2.15a.498.498 0 0 1 .704-.704L6 5.296l2.15-2.15a.498.498 0 1 1 .704.704L6.704 6l2.15 2.15a.498.498 0 0 1-.704.704L6 6.704l-2.15 2.15z"
+          })
+        })
+      })]
+    })
+  });
 };
 export default MultiValue;

package/esm/components/Select/Select.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { Children, useState, useRef, isValidElement } from 'react';
+import { Children, useState, useRef, isValidElement } from 'react';
 import classNames from 'classnames';
 import { safeInvoke, EventEmitter } from '../utils';
 import { CLS_PREFIX } from '../../constants';
@@ -10,6 +9,7 @@ import Translate from '../Translate';
 import SelectControl from './SelectControl';
 import SelectOptionGroup from './SelectOptionGroup';
 import SelectOption from './SelectOption';
+import { jsx as _jsx } from "react/jsx-runtime";
 // eslint-disable-next-line default-param-last
 const collect = function (children) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -268,7 +268,7 @@ const Select = _ref => {
     setValue(nextValue);
     safeInvoke(onChange, nextValue);
   };
-  const control = /*#__PURE__*/React.createElement(SelectControl, {
+  const control = /*#__PURE__*/_jsx(SelectControl, {
     id: id,
     name: name,
     current: current,
@@ -288,7 +288,7 @@ const Select = _ref => {
     placeholder: placeholder,
     ref: controlRef
   });
-  return /*#__PURE__*/React.createElement(ComboBoxDropdown, _extends({
+  return /*#__PURE__*/_jsx(ComboBoxDropdown, {
     className: classNames(baseClassName, className, {
       [`${baseClassName}--size-${size}`]: size
     }),
@@ -302,12 +302,13 @@ const Select = _ref => {
     highlightedIndex: highlightedIndex,
     onHighlightedIndexChange: handleHighlightedIndexChange,
     onClose: handleClose,
-    noOptions: /*#__PURE__*/React.createElement(Translate, {
+    noOptions: /*#__PURE__*/_jsx(Translate, {
       content: "Select.noOptions",
       fallback: "No options"
     }),
     emitter: emitterRef.current,
-    value: value
-  }, props));
+    value: value,
+    ...props
+  });
 };
 export default Select;

package/esm/components/Select/Select.stories.js

@@ -1,47 +1,48 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Select from './Select';
 import SelectOption from './SelectOption';
-export const Basic = args => /*#__PURE__*/React.createElement(Select, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Select, {
+  ...args
+});
 Basic.args = {
-  children: [/*#__PURE__*/React.createElement(SelectOption, {
-    key: "1"
-  }, 'One'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "2"
-  }, 'Two'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "3"
-  }, 'Three'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "4"
-  }, 'Four'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "5"
-  }, 'Five'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "6"
-  }, 'Six'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "7"
-  }, 'Seven'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "8"
-  }, 'Eight'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "9"
-  }, 'Nine'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "10"
-  }, 'Ten'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "11"
-  }, 'Eleven'), /*#__PURE__*/React.createElement(SelectOption, {
-    key: "12"
-  }, 'Twelve')],
+  children: [/*#__PURE__*/_jsx(SelectOption, {
+    children: 'One'
+  }, "1"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Two'
+  }, "2"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Three'
+  }, "3"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Four'
+  }, "4"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Five'
+  }, "5"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Six'
+  }, "6"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Seven'
+  }, "7"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Eight'
+  }, "8"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Nine'
+  }, "9"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Ten'
+  }, "10"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Eleven'
+  }, "11"), /*#__PURE__*/_jsx(SelectOption, {
+    children: 'Twelve'
+  }, "12")],
   'data-test': 'select'
 };
-export const SearchableAtBottom = () => {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      bottom: 0,
-      padding: 16
-    }
-  }, /*#__PURE__*/React.createElement(Basic, _extends({
-    searchable: true
-  }, Basic.args)));
-};
+export const SearchableAtBottom = () => /*#__PURE__*/_jsx("div", {
+  style: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    padding: 16
+  },
+  children: /*#__PURE__*/_jsx(Basic, {
+    searchable: true,
+    ...Basic.args
+  })
+});

package/esm/components/Select/SelectControl.js

@@ -1,12 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React, { Fragment, useRef, useState, useLayoutEffect, forwardRef } from 'react';
+import { Fragment, useRef, useState, useLayoutEffect, forwardRef } from 'react';
 import { useTranslate } from '../LocaleProvider';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
 import MultiValue from './MultiValue';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_INPUT_WIDTH = 2;
 let inputMeter;
 const getInputWidth = target => {
@@ -152,84 +153,96 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
   const handleBlur = () => {
     setFocused(false);
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--disabled`]: disabled,
       [`${baseClassName}--focused`]: focused,
       [`${baseClassName}--multiple`]: multiple
-    })
-  }, props, {
+    }),
+    ...props,
     onClick: handleClick,
-    ref: ref
-  }), /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__value-container`
-  }, Array.isArray(current) && current.map(_ref3 => {
-    let {
-      value,
-      label
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(MultiValue, {
-      key: value,
-      onRemove: () => handleValueRemove(value)
-    }, label);
-  }), /*#__PURE__*/React.createElement("input", {
-    id: id,
-    className: `${baseClassName}__input`,
-    value: filterValue,
-    type: "text",
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    readOnly: !searchable,
-    disabled: disabled,
-    ref: inputRef,
-    style: {
-      width: inputWidth
-    }
-  }), !filterValue && /*#__PURE__*/React.createElement(Fragment, null, !Array.isArray(current) && current && /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__value`
-  }, current.children), !hasValue && placeholder && /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__placeholder`
-  }, placeholder))), /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__indicators`
-  }, clearable && hasValue && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--clear`),
-    tabIndex: -1,
-    onMouseDown: e => e.preventDefault(),
-    onClick: e => {
-      e.stopPropagation();
-      handleClear();
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: `${baseClassName}__indicator-icon`
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-4 -4 16 16",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
-  })))), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: `${baseClassName}__indicator-icon`
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-4 -5 16 16",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M4 4.048L.847.895a.496.496 0 1 0-.702.702l3.452 3.451a.5.5 0 0 0 .806 0l3.452-3.451a.496.496 0 0 0-.702-.702L4 4.048z"
-  }))))), name && values.map(value => /*#__PURE__*/React.createElement("input", {
-    key: value,
-    type: "hidden",
-    name: name,
-    value: value
-  })));
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: `${baseClassName}__value-container`,
+      children: [Array.isArray(current) && current.map(_ref3 => {
+        let {
+          value,
+          label
+        } = _ref3;
+        return /*#__PURE__*/_jsx(MultiValue, {
+          onRemove: () => handleValueRemove(value),
+          children: label
+        }, value);
+      }), /*#__PURE__*/_jsx("input", {
+        id: id,
+        className: `${baseClassName}__input`,
+        value: filterValue,
+        type: "text",
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        readOnly: !searchable,
+        disabled: disabled,
+        ref: inputRef,
+        style: {
+          width: inputWidth
+        }
+      }), !filterValue && /*#__PURE__*/_jsxs(Fragment, {
+        children: [!Array.isArray(current) && current && /*#__PURE__*/_jsx("span", {
+          className: `${baseClassName}__value`,
+          children: current.children
+        }), !hasValue && placeholder && /*#__PURE__*/_jsx("span", {
+          className: `${baseClassName}__placeholder`,
+          children: placeholder
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("span", {
+      className: `${baseClassName}__indicators`,
+      children: [clearable && hasValue && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--clear`),
+        tabIndex: -1,
+        onMouseDown: e => e.preventDefault(),
+        onClick: e => {
+          e.stopPropagation();
+          handleClear();
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: `${baseClassName}__indicator-icon`,
+          children: /*#__PURE__*/_jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "-4 -4 16 16",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M.85 7.854a.498.498 0 1 1-.704-.704L3.296 4 .146.85A.498.498 0 0 1 .85.146L4 3.296 7.15.146a.498.498 0 0 1 .704.704L4.704 4l3.15 3.15a.498.498 0 0 1-.704.704L4 4.704.85 7.854z"
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
+        tabIndex: -1,
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: `${baseClassName}__indicator-icon`,
+          children: /*#__PURE__*/_jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "-4 -5 16 16",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M4 4.048L.847.895a.496.496 0 1 0-.702.702l3.452 3.451a.5.5 0 0 0 .806 0l3.452-3.451a.496.496 0 0 0-.702-.702L4 4.048z"
+            })
+          })
+        })
+      })]
+    }), name && values.map(value => /*#__PURE__*/_jsx("input", {
+      type: "hidden",
+      name: name,
+      value: value
+    }, value))]
+  });
 });
 SelectControl.displayName = 'SelectControl';
 export default SelectControl;

package/esm/components/Select/SelectOption.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 /**
  * `SelectOption` is a part of [SelectOptionGroup](#!/SelectOptionGroup) component.
  * @since 2.3.0
@@ -9,7 +9,7 @@ const SelectOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition
   if (false) {
-    return /*#__PURE__*/React.createElement("option", null);
+    return /*#__PURE__*/_jsx("option", {});
   }
   return null;
 };

package/esm/components/Select/SelectOptionGroup.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 /**
  * `SelectOptionGroup` is a part of [Select](#!/Select) component. It can be used for splitting the list of all options into groups.
  * @since 2.3.0
@@ -9,7 +9,7 @@ const SelectOptionGroup = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition
   if (false) {
-    return /*#__PURE__*/React.createElement("optgroup", null);
+    return /*#__PURE__*/_jsx("optgroup", {});
   }
   return null;
 };

package/esm/components/Skeleton/Skeleton.js

@@ -1,10 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { normalizeSize } from '../utils';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Skeleton` (or content-placeholder) is placeholder preview of content before the data gets loaded to reduce load-time frustration.
  * Skeleton is used for non-text components, images, media-objects, etc.
@@ -27,9 +26,10 @@ const Skeleton = _ref => {
     maxWidth: normalizeSize(maxWidth),
     height: normalizeSize(height)
   };
-  return /*#__PURE__*/React.createElement(Tag, _extends({
+  return /*#__PURE__*/_jsx(Tag, {
     className: classNames(baseClassName, className),
-    style: finalStyle
-  }, props));
+    style: finalStyle,
+    ...props
+  });
 };
 export default Skeleton;