@plesk/ui-library 3.27.2 → 3.28.0

package/dist/plesk-ui-library.js

@@ -5753,6 +5753,7 @@ const Dialog = ({
   closable,
   onClose,
   closingConfirmation,
+  canClose,
   ...props
 }) => {
   const [isVisible, setIsVisible] = (0, _react.useState)(isOpen);
@@ -5863,8 +5864,8 @@ const Dialog = ({
     className: (0, _classnames.default)(baseClassName, className),
     isOpen: isVisible,
     onClose: onCloseWithConfirmation,
-    canCloseOnBackdropClick: closable,
-    canCloseOnEscapePress: closable,
+    canCloseOnBackdropClick: canClose && closable,
+    canCloseOnEscapePress: canClose && closable,
     size: size
   }, props), (title || subtitle || actions) && /*#__PURE__*/_react.default.createElement("header", {
     className: `${baseClassName}__header`
@@ -5887,6 +5888,7 @@ const Dialog = ({
     className: `${baseClassName}__header-actions`
   }, actions, closable && /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: `${baseClassName}__header-close`,
+    disabled: !canClose,
     ghost: true,
     size: "lg",
     icon: "cross-mark",
@@ -5992,6 +5994,12 @@ Dialog.propTypes = {
    */
   closable: _propTypes.default.bool,
 
+  /**
+   * Disable close dialog button
+   * @since 4.0.0
+   */
+  canClose: _propTypes.default.bool,
+
   /**
    * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
    * @since 0.0.68
@@ -6035,6 +6043,7 @@ Dialog.defaultProps = {
   form: undefined,
   size: 'md',
   closable: true,
+  canClose: true,
   onClose: undefined,
   closingConfirmation: undefined,
   children: undefined,
@@ -8180,9 +8189,11 @@ class Form extends _react.Component {
       let field;
       let fieldErrors;
       Object.keys(this.fields).every(name => {
-        if (errors && errors[name] && typeof errors[name] === 'object' && Object.keys(errors[name]).length > 0) {
+        const foundError = (0, _utils.getIn)(errors, name);
+
+        if (foundError && typeof foundError === 'object' && Object.keys(foundError).length > 0) {
           field = this.fields[name];
-          fieldErrors = errors[name];
+          fieldErrors = foundError;
           return false;
         }
 
@@ -9408,10 +9419,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /***/ }),
 
-/***/ "./components/FormFieldPassword/FormFieldPassword.js":
-/*!***********************************************************!*\
-  !*** ./components/FormFieldPassword/FormFieldPassword.js ***!
-  \***********************************************************/
+/***/ "./components/FormFieldPassword/FormFieldPassword.tsx":
+/*!************************************************************!*\
+  !*** ./components/FormFieldPassword/FormFieldPassword.tsx ***!
+  \************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -9420,12 +9431,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.generatePassword = exports["default"] = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
 
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
-
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
@@ -9436,11 +9445,11 @@ var _FormField = _interopRequireDefault(__webpack_require__(/*! ../FormField */
 
 var _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ "./components/Input/index.tsx"));
 
-var _Popover = _interopRequireDefault(__webpack_require__(/*! ../Popover */ "./components/Popover/index.js"));
-
 var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
 
-var _passwordScore = _interopRequireWildcard(__webpack_require__(/*! ./passwordScore */ "./components/FormFieldPassword/passwordScore.js"));
+var _PasswordMeter = _interopRequireDefault(__webpack_require__(/*! ./PasswordMeter */ "./components/FormFieldPassword/PasswordMeter.tsx"));
+
+var _generatePassword = _interopRequireDefault(__webpack_require__(/*! ./generatePassword */ "./components/FormFieldPassword/generatePassword.js"));
 
 var _enUS = _interopRequireDefault(__webpack_require__(/*! ./locale/en-US */ "./components/FormFieldPassword/locale/en-US.js"));
 
@@ -9456,42 +9465,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const symbolClasses = {
-  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-  lower: 'abcdefghijklmnopqrstuvwxyz',
-  number: '0123456789',
-  special: '!@#$%^&*?_~'
-};
-
-const generatePassword = () => {
-  const password = ['upper', 'lower', 'lower', 'lower', 'number', 'number', 'special', 'number', 'upper', 'upper', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower'];
-  return password.sort((a, b) => Math.floor(b.length * Math.random()) - Math.floor(a.length * Math.random())).map(symbolClass => symbolClasses[symbolClass][Math.floor(symbolClasses[symbolClass].length * Math.random())]).join('');
-};
 /**
  * `FormFieldPassword` component provides secure way to enter a password.
  * @since 0.0.58
  */
-
-
-exports.generatePassword = generatePassword;
-
 class FormFieldPassword extends _react.Component {
   constructor(...args) {
     super(...args);
 
     _defineProperty(this, "state", {
       visible: false,
-      passwordMeterVisible: false,
-      scoreResult: {
-        password: null,
-        intent: null,
-        strength: null,
-        unusedRules: []
-      }
+      passwordMeterVisible: false
     });
 
-    _defineProperty(this, "passwordOnScoring", null);
-
     _defineProperty(this, "targetRef", /*#__PURE__*/(0, _react.createRef)());
 
     _defineProperty(this, "handleToggleClick", () => {
@@ -9511,135 +9497,6 @@ class FormFieldPassword extends _react.Component {
     _defineProperty(this, "handleBlur", this.handleClosePasswordMeter);
   }
 
-  async passwordScore(value) {
-    if (!value) {
-      return {
-        password: null,
-        intent: null,
-        strength: null,
-        unusedRules: []
-      };
-    }
-
-    const {
-      passwordScoreRules
-    } = this.props;
-    const {
-      password,
-      score,
-      unusedRules
-    } = await (0, _passwordScore.default)(value, passwordScoreRules);
-    let intent = 'success';
-
-    let strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.strengthVeryStrong",
-      fallback: _enUS.default.strengthVeryStrong
-    });
-
-    if (score < 16) {
-      intent = 'danger';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthVeryWeak",
-        fallback: _enUS.default.strengthVeryWeak
-      });
-    } else if (score < 25) {
-      intent = 'danger';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthWeak",
-        fallback: _enUS.default.strengthWeak
-      });
-    } else if (score < 35) {
-      intent = 'warning';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthMedium",
-        fallback: _enUS.default.strengthMedium
-      });
-    } else if (score < 45) {
-      intent = 'success';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthStrong",
-        fallback: _enUS.default.strengthStrong
-      });
-    }
-
-    return {
-      password,
-      intent,
-      strength,
-      unusedRules
-    };
-  }
-
-  renderPasswordMeter(value, target) {
-    const {
-      passwordMeterVisible
-    } = this.state;
-    const {
-      passwordMeterProps
-    } = this.props;
-    const {
-      password,
-      intent,
-      strength,
-      unusedRules
-    } = this.state.scoreResult;
-
-    if (!!value && value !== password && value !== this.passwordOnScoring) {
-      this.passwordOnScoring = value;
-      this.passwordScore(value).then(scoreResult => {
-        if (this.passwordOnScoring === scoreResult.password) {
-          this.passwordOnScoring = null;
-          this.setState({
-            scoreResult
-          });
-        }
-      });
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_Popover.default, _extends({
-      visible: passwordMeterVisible && !!value,
-      target: target,
-      targetRef: this.targetRef,
-      placement: "bottom-right",
-      intent: intent,
-      canCloseOnOutsideClick: false,
-      canCloseOnEscapePress: false,
-      onClose: this.handleClosePasswordMeter
-    }, passwordMeterProps), /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.passwordStrength",
-      fallback: _enUS.default.passwordStrength,
-      params: {
-        strength: /*#__PURE__*/_react.default.createElement("b", null, strength)
-      }
-    }), /*#__PURE__*/_react.default.createElement("br", null), unusedRules.length ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.improvePassword",
-      fallback: _enUS.default.improvePassword
-    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("ul", null, unusedRules.slice(0, 3).map(({
-      rule
-    }, index) => {
-      const {
-        name
-      } = rule;
-      let {
-        message
-      } = rule;
-
-      if (name && !message) {
-        message = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-          content: `FormFieldPassword.${name}`,
-          fallback: _enUS.default[name]
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: name || index.toString()
-      }, message);
-    }))) : /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.yourPasswordIsStrong",
-      fallback: _enUS.default.yourPasswordIsStrong
-    }));
-  }
-
   renderGenerateButton({
     setValue,
     isDisabled
@@ -9650,7 +9507,7 @@ class FormFieldPassword extends _react.Component {
     } = this.props;
     const generateButtonProps = {
       className: `${baseClassName}__button--generate`,
-      onClick: () => setValue(generatePassword()),
+      onClick: () => setValue((0, _generatePassword.default)()),
       tooltip: /*#__PURE__*/_react.default.createElement(_Translate.default, {
         content: "FormFieldPassword.generateButtonHint",
         fallback: _enUS.default.generateButtonHint
@@ -9681,12 +9538,15 @@ class FormFieldPassword extends _react.Component {
       hideGenerateButton,
       hidePasswordMeter,
       passwordMeterProps,
-      passwordScoreRules,
       size,
       autoFocus,
       autoComplete,
       ...props
     } = this.props;
+    const {
+      visible,
+      passwordMeterVisible
+    } = this.state;
     return /*#__PURE__*/_react.default.createElement(_FormField.default, _extends({
       className: (0, _classnames.default)(baseClassName, className)
     }, props), ({
@@ -9696,18 +9556,19 @@ class FormFieldPassword extends _react.Component {
       setValue,
       isDisabled
     }) => {
+      const value = getValue('');
+
       const input = /*#__PURE__*/_react.default.createElement(_Input.default, {
         id: getId(),
         name: getName(),
-        type: this.state.visible ? 'text' : 'password',
-        value: getValue(''),
+        type: visible ? 'text' : 'password',
+        value: value,
         onChange: e => {
           setValue(e.target.value);
           this.setState({
             passwordMeterVisible: true
           });
         },
-        onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         autoFocus: autoFocus,
         autoComplete: autoComplete,
@@ -9716,8 +9577,8 @@ class FormFieldPassword extends _react.Component {
         suffix: hideShowButton ? null : /*#__PURE__*/_react.default.createElement(_Button.default, {
           className: `${baseClassName}__button--show`,
           onClick: this.handleToggleClick,
-          icon: this.state.visible ? 'visible' : 'invisible',
-          tooltip: this.state.visible ? /*#__PURE__*/_react.default.createElement(_Translate.default, {
+          icon: visible ? 'visible' : 'invisible',
+          tooltip: visible ? /*#__PURE__*/_react.default.createElement(_Translate.default, {
             content: "FormFieldPassword.hidePassword",
             fallback: _enUS.default.hidePassword
           }) : /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -9737,7 +9598,12 @@ class FormFieldPassword extends _react.Component {
         className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--${size}`)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(`${baseClassName}__field`, `${baseClassName}__field--${size}`)
-      }, hidePasswordMeter ? input : this.renderPasswordMeter(getValue(), input)), hideGenerateButton ? null : this.renderGenerateButton({
+      }, hidePasswordMeter ? input : /*#__PURE__*/_react.default.createElement(_PasswordMeter.default, _extends({
+        value: value,
+        targetRef: this.targetRef,
+        visible: passwordMeterVisible && value !== '',
+        onClose: this.handleClosePasswordMeter
+      }, passwordMeterProps), input)), hideGenerateButton ? null : this.renderGenerateButton({
         setValue,
         isDisabled
       }));
@@ -9746,98 +9612,28 @@ class FormFieldPassword extends _react.Component {
 
 }
 
-FormFieldPassword.propTypes = {
-  /**
-   * Is show button hidden?
-   * @since 0.0.59
-   */
-  hideShowButton: _propTypes.default.bool,
-
-  /**
-   * Is generate button hidden?
-   * @since 0.0.59
-   */
-  hideGenerateButton: _propTypes.default.bool,
-
-  /**
-   * Is password meter hidden?
-   * @since 0.0.59
-   */
-  hidePasswordMeter: _propTypes.default.bool,
-
-  /**
-   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
-   * @since 1.5.6
-   */
-  passwordMeterProps: _propTypes.default.object,
-
-  /**
-   * A set of custom password score rules.
-   * @since 3.21.0
-   */
-  passwordScoreRules: _propTypes.default.arrayOf(_propTypes.default.shape({
-    name: _propTypes.default.string,
-    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
-    score: _propTypes.default.func.isRequired
-  })),
-
-  /**
-   * Size of the control
-   * @since 1.5.6
-   */
-  size: _propTypes.default.oneOf(['md', 'lg', 'xl', 'fill']),
-
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
-   */
-  autoFocus: _propTypes.default.bool,
-
-  /**
-   * Prevent password autocompletion.
-   * @since 2.5.1
-   */
-  autoComplete: _propTypes.default.oneOf(['new-password']),
-
-  /**
-   * A render function for customizing the password generation button.
-   * @since 3.13.0
-   */
-  generateButton: _propTypes.default.func,
-
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string
-};
-FormFieldPassword.defaultProps = {
+_defineProperty(FormFieldPassword, "defaultProps", {
   hideShowButton: false,
   generateButton: undefined,
   hideGenerateButton: false,
   hidePasswordMeter: false,
   passwordMeterProps: {},
-  passwordScoreRules: undefined,
   size: 'md',
   autoFocus: undefined,
   autoComplete: undefined,
   className: undefined,
   baseClassName: `${_constants.CLS_PREFIX}form-field-password`
-};
-FormFieldPassword.PASSWORD_SCORE_RULES = _passwordScore.PASSWORD_SCORE_RULES;
+});
+
 var _default = FormFieldPassword;
 exports["default"] = _default;
 
 /***/ }),
 
-/***/ "./components/FormFieldPassword/index.js":
-/*!***********************************************!*\
-  !*** ./components/FormFieldPassword/index.js ***!
-  \***********************************************/
+/***/ "./components/FormFieldPassword/PasswordMeter.tsx":
+/*!********************************************************!*\
+  !*** ./components/FormFieldPassword/PasswordMeter.tsx ***!
+  \********************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -9846,74 +9642,89 @@ exports["default"] = _default;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-Object.defineProperty(exports, "default", ({
-  enumerable: true,
-  get: function () {
-    return _FormFieldPassword.default;
-  }
-}));
-Object.defineProperty(exports, "generatePassword", ({
-  enumerable: true,
-  get: function () {
-    return _FormFieldPassword.generatePassword;
-  }
-}));
+exports["default"] = void 0;
 
-var _FormFieldPassword = _interopRequireWildcard(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/FormFieldPassword.js"));
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
+
+var _Popover = _interopRequireDefault(__webpack_require__(/*! ../Popover */ "./components/Popover/index.js"));
+
+var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
+
+var _estimatePassword = _interopRequireWildcard(__webpack_require__(/*! ./estimatePassword */ "./components/FormFieldPassword/estimatePassword.tsx"));
+
+var _enUS = _interopRequireDefault(__webpack_require__(/*! ./locale/en-US */ "./components/FormFieldPassword/locale/en-US.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/***/ }),
-
-/***/ "./components/FormFieldPassword/locale/en-US.js":
-/*!******************************************************!*\
-  !*** ./components/FormFieldPassword/locale/en-US.js ***!
-  \******************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-"use strict";
+const strengthIntents = {
+  VeryWeak: 'danger',
+  Weak: 'danger',
+  Medium: 'warning',
+  Strong: 'success',
+  VeryStrong: 'success'
+};
 
+const PasswordMeter = ({
+  value,
+  visible,
+  onEstimate,
+  children,
+  ...props
+}) => {
+  const [result, setResult] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      return;
+    }
 
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports["default"] = void 0;
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
-var _default = {
-  improvePassword: 'To improve your password:',
-  passwordTooShort: 'Make the password longer.',
-  lettersLowerCase: 'Use at least one lower-case character.',
-  lettersUpperCase: 'Use at least one upper-case character.',
-  numbers1: 'Use at least one number.',
-  numbers3: 'Use at least three numbers.',
-  specialChar1: 'Use at least one special character (for example: !, @, #, $, % ,^, &, *, ?, _, ~).',
-  specialChar2: 'Use at least two special characters (for example: !, @, #, $, %, ^, &, *, ?, _, ~).',
-  comboUpperAndLower: 'Use both upper and lower-case characters.',
-  comboLettersAndNumbers: 'Use both numbers and characters.',
-  comboLettersNumbersSpecial: 'Use numbers, characters and special characters.',
-  yourPasswordIsStrong: 'You can make it even stronger by increasing its length.',
-  passwordStrength: 'The password strength is %%strength%%.',
-  strengthVeryStrong: 'VERY STRONG',
-  strengthStrong: 'STRONG',
-  strengthVeryWeak: 'VERY WEAK',
-  strengthWeak: 'WEAK',
-  strengthMedium: 'MEDIUM',
-  hidePassword: 'Hide password',
-  showPassword: 'Show password',
-  generateButton: 'Generate',
-  generateButtonHint: 'Generate a strong password'
+    Promise.resolve(onEstimate ? onEstimate(value, _estimatePassword.default, _estimatePassword.DEFAULT_RULES) : (0, _estimatePassword.default)(value)).then(result => {
+      setResult(result);
+    });
+  }, [visible, value, onEstimate]);
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, _extends({
+    visible: visible && result !== null,
+    target: children,
+    placement: "bottom-right",
+    intent: result ? strengthIntents[result.strength] : undefined,
+    canCloseOnOutsideClick: false,
+    canCloseOnEscapePress: false
+  }, props), result !== null && result !== void 0 && result.strength ? /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    component: "div",
+    content: "FormFieldPassword.passwordStrength",
+    fallback: _enUS.default.passwordStrength,
+    params: {
+      strength: /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_Translate.default, {
+        content: `FormFieldPassword.strength${result === null || result === void 0 ? void 0 : result.strength}`,
+        fallback: _enUS.default[`strength${result === null || result === void 0 ? void 0 : result.strength}`]
+      }))
+    }
+  }) : null, result !== null && result !== void 0 && result.suggestions.length ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: "FormFieldPassword.improvePassword",
+    fallback: _enUS.default.improvePassword
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("ul", null, result.suggestions.slice(0, 3).map((suggestion, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: index.toString()
+  }, suggestion)))) : /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: "FormFieldPassword.yourPasswordIsStrong",
+    fallback: _enUS.default.yourPasswordIsStrong
+  }));
 };
+
+var _default = PasswordMeter;
 exports["default"] = _default;
 
 /***/ }),
 
-/***/ "./components/FormFieldPassword/passwordScore.js":
-/*!*******************************************************!*\
-  !*** ./components/FormFieldPassword/passwordScore.js ***!
-  \*******************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ "./components/FormFieldPassword/estimatePassword.tsx":
+/*!***********************************************************!*\
+  !*** ./components/FormFieldPassword/estimatePassword.tsx ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
@@ -9921,33 +9732,29 @@ exports["default"] = _default;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports["default"] = exports.PASSWORD_SCORE_RULES = void 0;
+exports["default"] = exports.DEFAULT_RULES = void 0;
 
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-const passwordScore = (password, rules = PASSWORD_SCORE_RULES) => {
-  const unusedRules = [];
-  let score = 0;
-  rules.forEach(rule => {
-    const mark = rule.score(password);
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
 
-    if (mark < 0) {
-      unusedRules.push({
-        rule,
-        value: -mark
-      });
-    } else {
-      score += mark;
-    }
-  });
-  return Promise.resolve({
-    password,
-    score,
-    unusedRules
-  });
-};
+var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
 
-const PASSWORD_SCORE_RULES = [{
+var _enUS = _interopRequireDefault(__webpack_require__(/*! ./locale/en-US */ "./components/FormFieldPassword/locale/en-US.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const EXCLUSIONS = {
+  numbers1: 'numbers3',
+  specialChar1: 'specialChar2',
+  lettersLowerCase: 'comboUpperAndLower',
+  lettersUpperCase: 'comboUpperAndLower'
+};
+const DEFAULT_RULES = [{
   name: 'passwordTooShort',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.passwordTooShort`,
+    fallback: _enUS.default.passwordTooShort
+  }),
 
   score(passwd) {
     return passwd.length < 5 ? -1 : 0;
@@ -9974,6 +9781,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'lettersLowerCase',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.lettersLowerCase`,
+    fallback: _enUS.default.lettersLowerCase
+  }),
 
   score(passwd) {
     // [verified] at least one lower case letter
@@ -9982,6 +9793,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'lettersUpperCase',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.lettersUpperCase`,
+    fallback: _enUS.default.lettersUpperCase
+  }),
 
   score(passwd) {
     // [verified] at least one upper case letter
@@ -9990,6 +9805,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'numbers1',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.numbers1`,
+    fallback: _enUS.default.numbers1
+  }),
 
   score(passwd) {
     // [verified] at least one number
@@ -9998,6 +9817,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'numbers3',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.numbers3`,
+    fallback: _enUS.default.numbers3
+  }),
 
   score(passwd) {
     // [verified] at least three numbers
@@ -10006,6 +9829,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'specialChar1',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.specialChar1`,
+    fallback: _enUS.default.specialChar1
+  }),
 
   score(passwd) {
     // [verified] at least one special character
@@ -10014,6 +9841,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'specialChar2',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.specialChar2`,
+    fallback: _enUS.default.specialChar2
+  }),
 
   score(passwd) {
     // [verified] at least two special characters
@@ -10022,6 +9853,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'comboUpperAndLower',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboUpperAndLower`,
+    fallback: _enUS.default.comboUpperAndLower
+  }),
 
   score(passwd) {
     // [verified] both upper and lower case
@@ -10030,6 +9865,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'comboLettersAndNumbers',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboLettersAndNumbers`,
+    fallback: _enUS.default.comboLettersAndNumbers
+  }),
 
   score(passwd) {
     // [verified] both letters and numbers
@@ -10038,6 +9877,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'comboLettersNumbersSpecial',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboLettersNumbersSpecial`,
+    fallback: _enUS.default.comboLettersNumbersSpecial
+  }),
 
   score(passwd) {
     // [verified] letters, numbers, and special characters
@@ -10045,8 +9888,162 @@ const PASSWORD_SCORE_RULES = [{
   }
 
 }];
-exports.PASSWORD_SCORE_RULES = PASSWORD_SCORE_RULES;
-var _default = passwordScore;
+exports.DEFAULT_RULES = DEFAULT_RULES;
+
+var _default = (password, rules = DEFAULT_RULES) => {
+  let passwordScore = 0;
+  const suggestions = [];
+  const skippedRules = new Set();
+  rules.forEach(rule => {
+    const ruleScore = rule.score(password);
+
+    if (ruleScore >= 0) {
+      passwordScore += ruleScore;
+      return;
+    }
+
+    skippedRules.add(EXCLUSIONS[rule.name]);
+
+    if (!skippedRules.has(rule.name) && rule.suggestion) {
+      suggestions.push(rule.suggestion);
+    }
+  });
+  let strength;
+
+  switch (true) {
+    case passwordScore < 16:
+      strength = 'VeryWeak';
+      break;
+
+    case passwordScore < 25:
+      strength = 'Weak';
+      break;
+
+    case passwordScore < 35:
+      strength = 'Medium';
+      break;
+
+    case passwordScore < 45:
+      strength = 'Strong';
+      break;
+
+    default:
+      strength = 'VeryStrong';
+      break;
+  }
+
+  return {
+    strength,
+    suggestions
+  };
+};
+
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/FormFieldPassword/generatePassword.js":
+/*!**********************************************************!*\
+  !*** ./components/FormFieldPassword/generatePassword.js ***!
+  \**********************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const symbolClasses = {
+  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  lower: 'abcdefghijklmnopqrstuvwxyz',
+  number: '0123456789',
+  special: '!@#$%^&*?_~'
+};
+
+const generatePassword = () => {
+  const password = ['upper', 'upper', 'upper', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower', 'number', 'number', 'number', 'special', 'special'];
+  return password.sort((a, b) => Math.floor(b.length * Math.random()) - Math.floor(a.length * Math.random())).map(symbolClass => symbolClasses[symbolClass][Math.floor(symbolClasses[symbolClass].length * Math.random())]).join('');
+};
+
+var _default = generatePassword;
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/FormFieldPassword/index.tsx":
+/*!************************************************!*\
+  !*** ./components/FormFieldPassword/index.tsx ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+Object.defineProperty(exports, "default", ({
+  enumerable: true,
+  get: function () {
+    return _FormFieldPassword.default;
+  }
+}));
+Object.defineProperty(exports, "generatePassword", ({
+  enumerable: true,
+  get: function () {
+    return _generatePassword.default;
+  }
+}));
+
+var _FormFieldPassword = _interopRequireDefault(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/FormFieldPassword.tsx"));
+
+var _generatePassword = _interopRequireDefault(__webpack_require__(/*! ./generatePassword */ "./components/FormFieldPassword/generatePassword.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+
+/***/ "./components/FormFieldPassword/locale/en-US.js":
+/*!******************************************************!*\
+  !*** ./components/FormFieldPassword/locale/en-US.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+var _default = {
+  improvePassword: 'To improve your password:',
+  passwordTooShort: 'Make the password longer.',
+  lettersLowerCase: 'Use at least one lower-case character.',
+  lettersUpperCase: 'Use at least one upper-case character.',
+  numbers1: 'Use at least one number.',
+  numbers3: 'Use at least three numbers.',
+  specialChar1: 'Use at least one special character (for example: !, @, #, $, % ,^, &, *, ?, _, ~).',
+  specialChar2: 'Use at least two special characters (for example: !, @, #, $, %, ^, &, *, ?, _, ~).',
+  comboUpperAndLower: 'Use both upper and lower-case characters.',
+  comboLettersAndNumbers: 'Use both numbers and characters.',
+  comboLettersNumbersSpecial: 'Use numbers, characters and special characters.',
+  yourPasswordIsStrong: 'You can make it even stronger by increasing its length.',
+  passwordStrength: 'The password strength is %%strength%%.',
+  strengthVeryStrong: 'VERY STRONG',
+  strengthStrong: 'STRONG',
+  strengthVeryWeak: 'VERY WEAK',
+  strengthWeak: 'WEAK',
+  strengthMedium: 'MEDIUM',
+  hidePassword: 'Hide password',
+  showPassword: 'Show password',
+  generateButton: 'Generate',
+  generateButtonHint: 'Generate a strong password'
+};
 exports["default"] = _default;
 
 /***/ }),
@@ -11303,9 +11300,9 @@ exports.NAMES_12 = exports.NAMES = void 0;
 
 /* eslint-disable max-len */
 // This file is generated by create-svg-sprite. Do not edit.
-const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
+const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
 exports.NAMES_12 = NAMES_12;
-const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
+const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-right', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'kebab', 'key', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-chain', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'wordpress'];
 exports.NAMES = NAMES;
 
 /***/ }),
@@ -20067,7 +20064,8 @@ class ProgressDialog extends _react.Component {
     }, props, {
       isOpen: isOpen,
       onClose: this.handleClose,
-      closable: canClose || canCancel
+      closable: canClose || canCancel,
+      canClose: canClose
     }), description && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__description`
     }, description), /*#__PURE__*/_react.default.createElement(_Progress.default, {
@@ -22623,6 +22621,212 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /***/ }),
 
+/***/ "./components/Skeleton/Skeleton.tsx":
+/*!******************************************!*\
+  !*** ./components/Skeleton/Skeleton.tsx ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
+
+var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
+
+var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
+
+__webpack_require__(/*! ./Skeleton.less */ "./components/Skeleton/Skeleton.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**
+ * `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.
+ * @since 3.28.0
+ */
+const Skeleton = ({
+  width,
+  maxWidth,
+  height,
+  style,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton`,
+  ...props
+}) => {
+  const finalStyle = { ...style,
+    width: (0, _utils.normalizeSize)(width),
+    maxWidth: (0, _utils.normalizeSize)(maxWidth),
+    height: (0, _utils.normalizeSize)(height)
+  };
+  return /*#__PURE__*/_react.default.createElement(Tag, _extends({
+    className: (0, _classnames.default)(baseClassName, className),
+    style: finalStyle
+  }, props));
+};
+
+var _default = Skeleton;
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/Skeleton/SkeletonTabs.tsx":
+/*!**********************************************!*\
+  !*** ./components/Skeleton/SkeletonTabs.tsx ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
+
+var _SkeletonText = _interopRequireDefault(__webpack_require__(/*! ./SkeletonText */ "./components/Skeleton/SkeletonText.tsx"));
+
+var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
+
+__webpack_require__(/*! ./SkeletonTabs.less */ "./components/Skeleton/SkeletonTabs.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**
+ * Skeleton for tabs component
+ * @since `3.28.0
+ */
+const SkeletonTabs = ({
+  count = 3,
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton-tabs`,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement("div", _extends({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), /*#__PURE__*/_react.default.createElement(_SkeletonText.default, {
+  lineProps: {
+    maxWidth: 100
+  },
+  lines: count
+}));
+
+var _default = SkeletonTabs;
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/Skeleton/SkeletonText.tsx":
+/*!**********************************************!*\
+  !*** ./components/Skeleton/SkeletonText.tsx ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+
+var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
+
+var _Skeleton = _interopRequireDefault(__webpack_require__(/*! ./Skeleton */ "./components/Skeleton/Skeleton.tsx"));
+
+var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
+
+__webpack_require__(/*! ./SkeletonText.less */ "./components/Skeleton/SkeletonText.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**
+ * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
+ * @since 3.28.0
+ */
+const SkeletonText = ({
+  lines = 3,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton-text`,
+  lineProps = {},
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(Tag, _extends({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), Array.from({
+  length: lines
+}).map((_, key) => /*#__PURE__*/_react.default.createElement(_Skeleton.default // eslint-disable-next-line react/no-array-index-key
+, _extends({
+  key: key
+}, lineProps, {
+  className: (0, _classnames.default)(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+}))));
+
+var _default = SkeletonText;
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/Skeleton/index.tsx":
+/*!***************************************!*\
+  !*** ./components/Skeleton/index.tsx ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+Object.defineProperty(exports, "SkeletonTabs", ({
+  enumerable: true,
+  get: function () {
+    return _SkeletonTabs.default;
+  }
+}));
+Object.defineProperty(exports, "SkeletonText", ({
+  enumerable: true,
+  get: function () {
+    return _SkeletonText.default;
+  }
+}));
+Object.defineProperty(exports, "default", ({
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+}));
+
+var _Skeleton = _interopRequireDefault(__webpack_require__(/*! ./Skeleton */ "./components/Skeleton/Skeleton.tsx"));
+
+var _SkeletonText = _interopRequireDefault(__webpack_require__(/*! ./SkeletonText */ "./components/Skeleton/SkeletonText.tsx"));
+
+var _SkeletonTabs = _interopRequireDefault(__webpack_require__(/*! ./SkeletonTabs */ "./components/Skeleton/SkeletonTabs.tsx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+
 /***/ "./components/Spinner/Spinner.tsx":
 /*!****************************************!*\
   !*** ./components/Spinner/Spinner.tsx ***!
@@ -28198,7 +28402,8 @@ var _exportNames = {
   Tooltip: true,
   Tour: true,
   Translate: true,
-  Link: true
+  Link: true,
+  Skeleton: true
 };
 Object.defineProperty(exports, "Action", ({
   enumerable: true,
@@ -28602,6 +28807,12 @@ Object.defineProperty(exports, "Select", ({
     return _Select.default;
   }
 }));
+Object.defineProperty(exports, "Skeleton", ({
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+}));
 Object.defineProperty(exports, "SplitButton", ({
   enumerable: true,
   get: function () {
@@ -28815,7 +29026,7 @@ var _FormField = _interopRequireDefault(__webpack_require__(/*! ./FormField */ "
 
 var _FormFieldCheckbox = _interopRequireDefault(__webpack_require__(/*! ./FormFieldCheckbox */ "./components/FormFieldCheckbox/index.js"));
 
-var _FormFieldPassword = _interopRequireWildcard(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/index.js"));
+var _FormFieldPassword = _interopRequireWildcard(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/index.tsx"));
 
 Object.keys(_FormFieldPassword).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -29045,6 +29256,20 @@ var _Translate = _interopRequireDefault(__webpack_require__(/*! ./Translate */ "
 
 var _Link = _interopRequireDefault(__webpack_require__(/*! ./Link */ "./components/Link/index.tsx"));
 
+var _Skeleton = _interopRequireWildcard(__webpack_require__(/*! ./Skeleton */ "./components/Skeleton/index.tsx"));
+
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Skeleton[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29090,7 +29315,7 @@ exports.intentIconMap = intentIconMap;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.wrapFunction = exports.scrollIntoView = exports.safeInvoke = exports.mergeRefs = exports.isClickable = exports.createProxyProps = exports.createFocusManager = exports.EventEmitter = void 0;
+exports.wrapFunction = exports.scrollIntoView = exports.safeInvoke = exports.normalizeSize = exports.mergeRefs = exports.isClickable = exports.createProxyProps = exports.createFocusManager = exports.EventEmitter = void 0;
 
 var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
 
@@ -29345,6 +29570,10 @@ const mergeRefs = (...refs) => value => {
 
 exports.mergeRefs = mergeRefs;
 
+const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;
+
+exports.normalizeSize = normalizeSize;
+
 /***/ }),
 
 /***/ "./constants.js":
@@ -81259,6 +81488,45 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "./components/Skeleton/Skeleton.less":
+/*!*******************************************!*\
+  !*** ./components/Skeleton/Skeleton.less ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
+/***/ "./components/Skeleton/SkeletonTabs.less":
+/*!***********************************************!*\
+  !*** ./components/Skeleton/SkeletonTabs.less ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
+/***/ "./components/Skeleton/SkeletonText.less":
+/*!***********************************************!*\
+  !*** ./components/Skeleton/SkeletonText.less ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
 /***/ }),
 
 /***/ "./components/Spinner/Spinner.less":
@@ -92159,7 +92427,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?147027a4906d0c1e2b29";
+module.exports = __webpack_require__.p + "images/symbols.svg?6bd5879cb9a032639fb3";
 
 /***/ }),
 
@@ -92292,7 +92560,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.27.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","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^1.0.0","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.4.6","postcss-less":"^6.0.0","postcss-loader":"^6.2.1","postcss-logical":"^5.0.3","prettier":"^2.0.5","puppeteer-core":"^5.2.1","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint":"^14.3.0","stylelint-config-prettier":"^9.0.3","stylelint-declaration-block-no-ignored-properties":"^2.5.0","stylelint-no-unsupported-browser-features":"^5.0.2","stylelint-prettier":"^2.0.0","stylelint-use-logical-spec":"^3.2.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001307"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
+module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.28.0","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --disable-host-check","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^1.0.0","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.4.6","postcss-less":"^6.0.0","postcss-loader":"^6.2.1","postcss-logical":"^5.0.3","prettier":"^2.0.5","puppeteer-core":"13.1.3","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint":"^14.3.0","stylelint-config-prettier":"^9.0.3","stylelint-declaration-block-no-ignored-properties":"^2.5.0","stylelint-no-unsupported-browser-features":"^5.0.2","stylelint-prettier":"^2.0.0","stylelint-use-logical-spec":"^3.2.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001307"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),