@plesk/ui-library 3.27.2 → 3.28.0

package/cjs/components/FormFieldPassword/estimatePassword.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_RULES = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Translate = _interopRequireDefault(require("../Translate"));
+
+var _enUS = _interopRequireDefault(require("./locale/en-US"));
+
+// 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;
+  }
+
+}, {
+  name: 'passwordLength',
+
+  score(passwd) {
+    if (passwd.length < 5) {
+      return 3;
+    }
+
+    if (passwd.length > 4 && passwd.length < 8) {
+      return 6;
+    }
+
+    if (passwd.length > 7 && passwd.length < 16) {
+      return 12;
+    }
+
+    return 18;
+  }
+
+}, {
+  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
+    return passwd.match(/[a-z]/) ? 1 : -1;
+  }
+
+}, {
+  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
+    return passwd.match(/[A-Z]/) ? 5 : -1;
+  }
+
+}, {
+  name: 'numbers1',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.numbers1`,
+    fallback: _enUS.default.numbers1
+  }),
+
+  score(passwd) {
+    // [verified] at least one number
+    return passwd.match(/\d+/) ? 5 : -1;
+  }
+
+}, {
+  name: 'numbers3',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.numbers3`,
+    fallback: _enUS.default.numbers3
+  }),
+
+  score(passwd) {
+    // [verified] at least three numbers
+    return passwd.match(/(.*[0-9].*[0-9].*[0-9])/) ? 5 : -1;
+  }
+
+}, {
+  name: 'specialChar1',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.specialChar1`,
+    fallback: _enUS.default.specialChar1
+  }),
+
+  score(passwd) {
+    // [verified] at least one special character
+    return passwd.match(/[!@#$%^&*?_~]/) ? 5 : -1;
+  }
+
+}, {
+  name: 'specialChar2',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.specialChar2`,
+    fallback: _enUS.default.specialChar2
+  }),
+
+  score(passwd) {
+    // [verified] at least two special characters
+    return passwd.match(/(.*[!@#$%^&*?_~].*[!@#$%^&*?_~])/) ? 5 : -1;
+  }
+
+}, {
+  name: 'comboUpperAndLower',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboUpperAndLower`,
+    fallback: _enUS.default.comboUpperAndLower
+  }),
+
+  score(passwd) {
+    // [verified] both upper and lower case
+    return passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) ? 2 : -1;
+  }
+
+}, {
+  name: 'comboLettersAndNumbers',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboLettersAndNumbers`,
+    fallback: _enUS.default.comboLettersAndNumbers
+  }),
+
+  score(passwd) {
+    // [verified] both letters and numbers
+    return passwd.match(/([a-zA-Z])/) && passwd.match(/([0-9])/) ? 2 : -1;
+  }
+
+}, {
+  name: 'comboLettersNumbersSpecial',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboLettersNumbersSpecial`,
+    fallback: _enUS.default.comboLettersNumbersSpecial
+  }),
+
+  score(passwd) {
+    // [verified] letters, numbers, and special characters
+    return passwd.match(/([a-zA-Z0-9].*[!@#$%^&*?_~])|([!@#$%^&*?_~].*[a-zA-Z0-9])/) ? 2 : -1;
+  }
+
+}];
+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;

package/cjs/components/FormFieldPassword/generatePassword.js

@@ -0,0 +1,21 @@
+"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;

package/cjs/components/FormFieldPassword/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,12 +14,10 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "generatePassword", {
   enumerable: true,
   get: function () {
-    return _FormFieldPassword.generatePassword;
+    return _generatePassword.default;
   }
 });
 
-var _FormFieldPassword = _interopRequireWildcard(require("./FormFieldPassword"));
-
-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); }
+var _FormFieldPassword = _interopRequireDefault(require("./FormFieldPassword"));
 
-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; }
+var _generatePassword = _interopRequireDefault(require("./generatePassword"));

package/cjs/components/Icon/constants.js

@@ -7,7 +7,7 @@ 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;

package/cjs/components/Icon/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="11040" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11088" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <symbol viewBox="0 0 12 12" id="archive:12">
       <path d="M2 1h7v.5a.5.5 0 0 0 1 0V1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-.5a.5.5 0 0 0-1 0v.5H2V1z" />
@@ -1391,6 +1391,14 @@
     <symbol viewBox="0 0 16 16" id="send:16">
       <path fill-rule="evenodd" d="M15.63 1.174a.5.5 0 0 1 .067.55l-6.5 13a.5.5 0 0 1-.827.101l-1.5-1.75-.005-.006L5.646 11.6a.5.5 0 0 1-.061-.544l1.304-2.587-3.016.975a.5.5 0 0 1-.474-.09l-1.468-1.22-.006-.005-1.75-1.5a.5.5 0 0 1 .172-.855l14.75-4.75a.5.5 0 0 1 .532.15zM1.503 6.452l1.068.916 1.254 1.04L7.721 7.15a.5.5 0 0 1 .6.7l-1.696 3.365 1.007 1.213 1.008 1.176L14.27 2.34 1.505 6.452z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="server:12">
+      <path d="M2.5 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1ZM5 2.5c0-.28.22-.5.5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5ZM2.5 6a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1ZM5 6.5c0-.28.22-.5.5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z" />
+      <path fill-rule="evenodd" d="M0 3a2 2 0 0 0 .68 1.5A2 2 0 0 0 0 6v1c0 1.1.9 2 2 2h3.5v.09a1.5 1.5 0 0 0-.91.91H.5a.5.5 0 1 0 0 1h4.09a1.5 1.5 0 0 0 2.82 0h4.09a.5.5 0 0 0 0-1H7.41a1.5 1.5 0 0 0-.91-.91V9H10a2 2 0 0 0 2-2V6a2 2 0 0 0-.68-1.5A2 2 0 0 0 12 3V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v1Zm10-2H2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Zm0 7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h8Zm-4 3a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="server:16">
+      <path d="M3 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM5 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0ZM9 7a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H9ZM3 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM8 3a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z" />
+      <path fill-rule="evenodd" d="M0 4a2 2 0 0 0 .68 1.5A2 2 0 0 0 0 7v2c0 1.1.9 2 2 2h5.5v1.09a1.5 1.5 0 0 0-.91.91H.5a.5.5 0 1 0 0 1h6.09a1.5 1.5 0 0 0 2.82 0h6.09a.5.5 0 0 0 0-1H9.41a1.5 1.5 0 0 0-.91-.91V11H14a2 2 0 0 0 2-2V7a2 2 0 0 0-.68-1.5A2 2 0 0 0 16 4V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v2Zm14 6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12Zm0-9H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM8.5 13.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="servers:12">
       <path d="M8 6.5a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5zM0 1.5a.5.5 0 011 0v2a.5.5 0 01-1 0v-2zM2.5 1a.5.5 0 00-.5.5v2a.5.5 0 001 0v-2a.5.5 0 00-.5-.5zM8.5 2a.5.5 0 000 1H9v1a1 1 0 001 1h1.5a.5.5 0 000-1H10V3a1 1 0 00-1-1h-.5zM9 9v1h-.5a.5.5 0 000 1H9a1 1 0 001-1V9h1.5a.5.5 0 000-1H10a1 1 0 00-1 1z" />
       <path fill-rule="evenodd" d="M4 2a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H5a1 1 0 01-1-1V2zm1 0h1v1H5V2z" clip-rule="evenodd" />

package/cjs/components/ProgressDialog/ProgressDialog.js

@@ -151,7 +151,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, {

package/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../utils");
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * `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, (0, _extends2.default)({
+    className: (0, _classnames.default)(baseClassName, className),
+    style: finalStyle
+  }, props));
+};
+
+var _default = Skeleton;
+exports.default = _default;

package/cjs/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSize = exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Skeleton.default, args);
+
+exports.Basic = Basic;
+Basic.args = {};
+
+const CustomSize = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.CustomSize = CustomSize;
+CustomSize.args = {
+  width: 200,
+  height: 100
+};

package/cjs/components/Skeleton/SkeletonTabs.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * 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", (0, _extends2.default)({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), /*#__PURE__*/_react.default.createElement(_SkeletonText.default, {
+  lineProps: {
+    maxWidth: 100
+  },
+  lines: count
+}));
+
+var _default = SkeletonTabs;
+exports.default = _default;

package/cjs/components/Skeleton/SkeletonTabs.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkeletonTabs = _interopRequireDefault(require("./SkeletonTabs"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_SkeletonTabs.default, args);
+
+exports.Basic = Basic;

package/cjs/components/Skeleton/SkeletonText.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * 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, (0, _extends2.default)({
+  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
+, (0, _extends2.default)({
+  key: key
+}, lineProps, {
+  className: (0, _classnames.default)(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+}))));
+
+var _default = SkeletonText;
+exports.default = _default;

package/cjs/components/Skeleton/SkeletonText.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinesCount = exports.Custom = exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_SkeletonText.default, args);
+
+exports.Basic = Basic;
+Basic.args = {};
+
+const LinesCount = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.LinesCount = LinesCount;
+LinesCount.args = {
+  lines: 5
+};
+
+const Custom = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.Custom = Custom;
+Custom.args = {
+  lines: 5,
+  lineProps: {
+    width: 200
+  }
+};

package/cjs/components/Skeleton/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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(require("./Skeleton"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+var _SkeletonTabs = _interopRequireDefault(require("./SkeletonTabs"));

package/cjs/components/index.js

@@ -88,7 +88,8 @@ var _exportNames = {
   Tooltip: true,
   Tour: true,
   Translate: true,
-  Link: true
+  Link: true,
+  Skeleton: true
 };
 Object.defineProperty(exports, "Action", {
   enumerable: true,
@@ -492,6 +493,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 () {
@@ -935,6 +942,20 @@ var _Translate = _interopRequireDefault(require("./Translate"));
 
 var _Link = _interopRequireDefault(require("./Link"));
 
+var _Skeleton = _interopRequireWildcard(require("./Skeleton"));
+
+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; }

package/cjs/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -257,4 +257,8 @@ const mergeRefs = (...refs) => value => {
   });
 };
 
-exports.mergeRefs = mergeRefs;
+exports.mergeRefs = mergeRefs;
+
+const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;
+
+exports.normalizeSize = normalizeSize;