@plesk/ui-library 3.25.7 → 3.26.0

package/cjs/components/Drawer/Drawer.js

@@ -29,8 +29,6 @@ var _Form = _interopRequireDefault(require("../Form"));
 
 var _Heading = _interopRequireDefault(require("../Heading"));
 
-var _Text = _interopRequireDefault(require("../Text"));
-
 var _Translate = require("../Translate");
 
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
@@ -74,6 +72,12 @@ const propTypes = {
    */
   backButton: _propTypes.default.bool,
 
+  /**
+   * A slot for `Tabs` component.
+   * @since 3.26.0
+   */
+  tabs: _propTypes.default.node,
+
   /**
    * Overlay placement.
    * @since 0.0.65
@@ -189,6 +193,7 @@ const defaultProps = {
   subtitle: '',
   backButton: undefined,
   hideButton: undefined,
+  tabs: undefined,
   placement: 'left',
   size: 'md',
   onClose: null,
@@ -215,6 +220,7 @@ const Drawer = ({
   subtitle,
   backButton,
   hideButton,
+  tabs,
   onClose,
   form,
   progress,
@@ -307,7 +313,8 @@ const Drawer = ({
   }) => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, {
     backButton: backButton,
     hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation
+    onClose: onCloseWithConfirmation,
+    tabs: tabs
   }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
     level: "2",
     className: `${baseClassName}__title`
@@ -315,9 +322,7 @@ const Drawer = ({
     className: `${baseClassName}__title`
   }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__subtitle`
-  }, (0, _Translate.isLikeText)(subtitle) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-    intent: "muted"
-  }, subtitle) : subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
+  }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
     handleScroll
   }) => /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__body`,

package/cjs/components/Drawer/Header.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 class Header extends _react.Component {
   componentDidMount() {
     this.isRtl = (0, _utils.isRtl)();
@@ -97,6 +97,7 @@ class Header extends _react.Component {
       children,
       backButton,
       hideButton,
+      tabs,
       ...props
     } = this.props;
     let prefix;
@@ -130,7 +131,11 @@ class Header extends _react.Component {
       className: `${baseClassName}__inner`
     }, prefix, /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content`
-    }, children), suffix));
+    }, children, tabs && /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__tabs`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__tabs-inner`
+    }, tabs))), suffix));
   }
 
 }
@@ -141,11 +146,13 @@ exports.default = Header;
   onClose: _propTypes.default.func,
   children: _propTypes.default.node.isRequired,
   backButton: _propTypes.default.bool,
-  hideButton: _propTypes.default.bool
+  hideButton: _propTypes.default.bool,
+  tabs: _propTypes.default.node
 });
 (0, _defineProperty2.default)(Header, "defaultProps", {
   onClose: null,
   baseClassName: `${_constants.CLS_PREFIX}drawer-header`,
   backButton: false,
-  hideButton: false
+  hideButton: false,
+  tabs: undefined
 });

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', 'dollar', 'dollar-filled', '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', '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', 'dollar', 'dollar-filled', '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', '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="10944" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11040" 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" />
@@ -592,6 +592,14 @@
       <path d="M11.145 2.855a.496.496 0 0 1 0-.702L13.097.202A.5.5 0 0 1 13.498 0h.004a.495.495 0 0 1 .401.202l1.952 1.951a.496.496 0 0 1-.702.702L14 1.702V10h-1V1.702l-1.153 1.153a.496.496 0 0 1-.702 0zM9.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
       <path d="M2 10c0-1.477.534-2.83 1.419-3.875a.47.47 0 0 1 .692-.014c.195.195.193.51.018.724A5 5 0 1 0 13 10h1.001a6 6 0 0 1-12 0z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="docker-filled:12">
+      <path d="M11.85 5.287c-.3-.224-.6-.3-.9-.3-.225 0-.375 0-.6.076-.075-.526-.375-.9-.75-1.2l-.15-.15-.15.15c-.225.3-.3.824-.225 1.2 0 .3.075.6.3.824-.375.226-.825.3-1.275.3H.75a.75.75 0 0 0-.75.75c.075 1.426.6 4.5 3.9 4.5 4.35 0 5.1-2.475 6.15-5.1h.15c.675 0 1.275-.225 1.65-.825l.15-.15-.15-.075zm-10.875.15h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225H.975c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm4.5-1.875h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225z" />
+      <path d="M5.475 5.438h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5 0h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.075.226.225.226zm-1.5-3.75h.675c.15 0 .225-.076.225-.226V.787c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-3 3.75h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5-1.876h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-1.5 0h.675c.15 0 .225-.075.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm1.5 1.876h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="docker-filled:16">
+      <path d="M15.8 6.8c-.4-.3-.8-.4-1.2-.4-.3 0-.5 0-.8.1-.1-.7-.5-1.2-1-1.6l-.2-.2-.2.2c-.3.4-.4 1.1-.3 1.6 0 .4.1.8.4 1.1-.5.3-1.1.4-1.7.4H1a1 1 0 0 0-1 1c.1 1.9.8 6 5.2 6 5.8 0 6.8-3.3 8.2-6.8h.2c.9 0 1.7-.3 2.2-1.1l.2-.2-.2-.1zM1.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM7.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+      <path d="M7.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM9.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.1.3.3.3zM7.3 2h.9c.2 0 .3-.1.3-.3V.8c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="dollar-filled:12">
       <path fill-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5 3a.5.5 0 0 0-.5.5v.53A1.5 1.5 0 0 0 6.3 7h.4a.5.5 0 0 1 0 1H5.3a.5.5 0 0 0 0 1H6v.5a.5.5 0 0 0 1 0v-.53A1.5 1.5 0 0 0 6.7 6h-.4a.5.5 0 0 1 0-1h1.4a.5.5 0 0 0 0-1H7v-.5a.5.5 0 0 0-.5-.5z" clip-rule="evenodd" />
     </symbol>
@@ -606,6 +614,12 @@
       <path fill-rule="evenodd" d="M8.5 15c3.5899 0 6.5-2.9101 6.5-6.5S12.0899 2 8.5 2 2 4.9101 2 8.5 4.9101 15 8.5 15zm0 1c4.1421 0 7.5-3.3579 7.5-7.5S12.6421 1 8.5 1 1 4.3579 1 8.5 4.3579 16 8.5 16z" clip-rule="evenodd" />
       <path d="M8 4.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1H8c-.5523 0-1 .4477-1 1s.4477 1 1 1h1c1.1046 0 2 .8954 2 2s-.8954 2-2 2v.5a.5.5 0 0 1-1 0V12H6.5a.5.5 0 0 1 0-1H9c.5523 0 1-.4477 1-1s-.4477-1-1-1H8c-1.1046 0-2-.8954-2-2s.8954-2 2-2v-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="dot:12">
+      <path d="M7.5 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="dot:16">
+      <path d="M6,8a2,2 0 1,0 4,0a2,2 0 1,0 -4,0" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="emoticon-confused:12">
       <path fill-rule="evenodd" d="M6 11A5 5 0 106 1a5 5 0 000 10zm0 1A6 6 0 106 0a6 6 0 000 12z" clip-rule="evenodd" />
       <path d="M8.803 9a.244.244 0 00.2-.383C8.334 7.636 7.259 7 6.048 7c-1.21 0-2.285.636-2.956 1.617a.244.244 0 00.2.383h5.512zM4.75 4.75a1 1 0 11-2 0 1 1 0 012 0zM9.25 4.75a1 1 0 11-2 0 1 1 0 012 0z" />

package/cjs/components/Item/Item.js

@@ -31,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 const VIEW_SIMPLE = 'simple';
 const VIEW_CARD = 'card';
 /**
@@ -106,6 +106,7 @@ class Item extends _react.Component {
       value,
       tooltip,
       disabled,
+      hoverable,
       ...props
     } = this.props;
 
@@ -126,7 +127,8 @@ class Item extends _react.Component {
     const item = /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled
+        [`${baseClassName}--disabled`]: disabled,
+        [`${baseClassName}--hoverable`]: hoverable
       }, className)
     }, props), /*#__PURE__*/_react.default.createElement(_Media.default, {
       image: this.renderIcon(icon),
@@ -220,11 +222,18 @@ Item.propTypes = {
    * Whether disabled or not.
    * @since 3.15.0
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Add hover shadow and pointer cursor.
+   * @since 3.26.0
+   */
+  hoverable: _propTypes.default.bool
 };
 Item.defaultProps = {
   component: 'div',
   view: VIEW_SIMPLE,
+  hoverable: undefined,
   title: undefined,
   description: undefined,
   icon: undefined,

package/cjs/components/ItemLink/ItemLink.js

@@ -28,6 +28,7 @@ const ItemLink = ({
   baseClassName = `${_constants.CLS_PREFIX}item-link`,
   className,
   children,
+  hoverable,
   ...props
 }) => {
   if (props.onClick) {

package/cjs/components/ItemList/ItemList.js

@@ -61,7 +61,8 @@ class ItemList extends _react.Component {
         baseClassName,
         selectable,
         onSelect,
-        reorderable
+        reorderable,
+        hoverable
       } = this.props;
       const classNameList = [`${baseClassName}__item`];
       const props = {};
@@ -86,6 +87,11 @@ class ItemList extends _react.Component {
           });
           (0, _utils.safeInvoke)(onSelect, nextValue);
         };
+      } // Extends hoverable behavior from the ItemList in case if its child doesn't have its own
+
+
+      if (item.props.hoverable === undefined) {
+        props.hoverable = hoverable && this.canManageHoverableState();
       }
 
       if (reorderable) {
@@ -177,20 +183,45 @@ class ItemList extends _react.Component {
     }));
   }
 
-  hasViewCard() {
-    const {
-      children
-    } = this.props;
+  someChild(predicate) {
     let result = false;
 
-    _react.Children.forEach(children, child => {
-      if (child && child.props && child.props.view === 'card') {
+    _react.Children.forEach(this.props.children, child => {
+      if (child && predicate(child)) {
         result = true;
       }
     });
 
     return result;
   }
+  /**
+   * There are some states where we can't manage hoverable state
+   */
+
+
+  canManageHoverableState() {
+    const {
+      reorderable,
+      selectable
+    } = this.props;
+    return !reorderable && !selectable;
+  }
+
+  isHoverable() {
+    if (!this.canManageHoverableState()) {
+      return false;
+    }
+
+    return this.props.hoverable || this.hasHoverableCard();
+  }
+
+  hasViewCard() {
+    return this.someChild(child => child.props && child.props.view === 'card');
+  }
+
+  hasHoverableCard() {
+    return this.someChild(child => child.props && !!child.props.hoverable);
+  }
 
   renderReorderable({
     baseClassName,
@@ -249,7 +280,7 @@ class ItemList extends _react.Component {
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(this.props.baseClassName, {
-        [`${this.props.baseClassName}--hoverable`]: hoverable && !reorderable && !selectable,
+        [`${this.props.baseClassName}--hoverable`]: this.isHoverable(),
         [`${this.props.baseClassName}--stretchable`]: stretchable,
         [`${this.props.baseClassName}--selectable`]: selectable,
         [`${this.props.baseClassName}--cards`]: this.hasViewCard()

package/cjs/components/ItemList/ItemList.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Selectables = exports.Reorderables = exports.Cards = exports.Basic = void 0;
+exports.Selectables = exports.Reorderables = exports.HoverableItems = exports.HoverableItemList = exports.Cards = exports.Basic = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -58,7 +58,8 @@ Basic.args = {
       name: "star-circle-filled",
       intent: "warning"
     }),
-    onClick: () => {}
+    onClick: () => {},
+    hoverable: true
   }, 'Content 3'), /*#__PURE__*/_react.default.createElement(_Item.default, {
     key: "4",
     value: "4",
@@ -70,7 +71,8 @@ Basic.args = {
       intent: "danger"
     }),
     onClick: () => {},
-    disabled: true
+    disabled: true,
+    hoverable: true
   }, 'Content 4')]
 };
 const Cards = Basic.bind(null);
@@ -93,4 +95,34 @@ exports.Selectables = Selectables;
 Selectables.args = { ...Basic.args,
   selectable: true,
   defaultValue: '2'
+};
+const HoverableItemList = Basic.bind(null);
+exports.HoverableItemList = HoverableItemList;
+HoverableItemList.args = { ...Basic.args,
+  hoverable: true,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      hoverable: index === 0 ? false : undefined
+    });
+  })
+};
+const HoverableItems = Basic.bind(null);
+exports.HoverableItems = HoverableItems;
+HoverableItems.args = { ...Basic.args,
+  hoverable: false,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      hoverable: index % 2 === 0
+    });
+  })
 };

package/cjs/components/ProgressStep/ProgressStep.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 const STATUS_NOT_STARTED = 'not_started';
 exports.STATUS_NOT_STARTED = STATUS_NOT_STARTED;
 const STATUS_RUNNING = 'running';
@@ -64,39 +64,39 @@ const ProgressStep = ({
   switch (status) {
     case STATUS_NOT_STARTED:
       intent = 'inactive';
-      icon = false;
+      icon = 'dot';
       break;
 
     case STATUS_RUNNING:
-      intent = 'info';
-      icon = false;
+      intent = false;
+      icon = 'dot';
       break;
 
     case STATUS_DONE:
       intent = 'success';
-      icon = 'check-mark';
+      icon = 'check-mark-circle-filled';
       break;
 
     case STATUS_WARNING:
       intent = 'warning';
-      icon = 'triangle-exclamation-mark';
+      icon = 'triangle-exclamation-mark-filled';
       break;
 
     case STATUS_ERROR:
       intent = 'danger';
-      icon = 'exclamation-mark-circle';
+      icon = 'exclamation-mark-circle-filled';
       break;
 
     case STATUS_CANCELED:
       progress = 0;
       intent = 'inactive';
-      icon = 'cross-mark';
+      icon = 'cross-mark-circle-filled';
       break;
   }
 
   icon = _Icon.default.create(icon, {
     className: `${baseClassName}__icon`,
-    size: _Icon.ICON_SIZE_12,
+    size: _Icon.ICON_SIZE_16,
     intent
   });
 
@@ -114,19 +114,21 @@ const ProgressStep = ({
     className: `${baseClassName}__media`
   }, icon), /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__body`
-  }, (title || statusText) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (title || statusText || _react.Children.toArray(children).length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__labels`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${baseClassName}__labels-body`
   }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__title`
-  }, title), statusText && /*#__PURE__*/_react.default.createElement("div", {
+  }, title), _react.Children.toArray(children).length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${baseClassName}__content`
+  }, children) : null), statusText && /*#__PURE__*/_react.default.createElement("div", {
     className: `${baseClassName}__status`
   }, statusText)), STATUS_RUNNING === status && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
     className: `${baseClassName}__progress`,
     intent: "info",
     progress: progress
-  }), _react.Children.toArray(children).length ? /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__content`
-  }, children) : null));
+  })));
 };
 
 ProgressStep.propTypes = {

package/cjs/components/Section/Section.js

@@ -88,7 +88,11 @@ class Section extends _react.Component {
         collapsed
       }) => ({
         collapsed: !collapsed
-      }));
+      }), () => {
+        if (this.props.onToggle) {
+          this.props.onToggle(this.state.collapsed);
+        }
+      });
     });
   }
 
@@ -199,9 +203,11 @@ class Section extends _react.Component {
       collapsed,
       onTitleChange,
       onClose,
+      onToggle,
       buttons,
       vertical: verticalProp,
       children,
+      form,
       ...props
     } = this.props;
     const vertical = verticalProp === undefined ? this.state.vertical : verticalProp;
@@ -278,6 +284,12 @@ const propTypes = {
    */
   onClose: _propTypes.default.func,
 
+  /**
+   * A callback executed when the section collapsing.
+   * @since 3.26.0
+   */
+  onToggle: _propTypes.default.func,
+
   /**
    * Array of custom section action button at the right.
    * @since 0.0.54
@@ -319,6 +331,7 @@ const defaultProps = {
   collapsed: false,
   onTitleChange: undefined,
   onClose: undefined,
+  onToggle: undefined,
   buttons: undefined,
   vertical: undefined,
   children: undefined,

package/cjs/index.js

@@ -54,6 +54,6 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2018. Plesk International GmbH. All rights reserved.
-const version = "3.25.7";
+const version = "3.26.0";
 exports.version = version;
 (0, _svg4everybody.default)();

package/dist/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="10944" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11040" 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" />
@@ -592,6 +592,14 @@
       <path d="M11.145 2.855a.496.496 0 0 1 0-.702L13.097.202A.5.5 0 0 1 13.498 0h.004a.495.495 0 0 1 .401.202l1.952 1.951a.496.496 0 0 1-.702.702L14 1.702V10h-1V1.702l-1.153 1.153a.496.496 0 0 1-.702 0zM9.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
       <path d="M2 10c0-1.477.534-2.83 1.419-3.875a.47.47 0 0 1 .692-.014c.195.195.193.51.018.724A5 5 0 1 0 13 10h1.001a6 6 0 0 1-12 0z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="docker-filled:12">
+      <path d="M11.85 5.287c-.3-.224-.6-.3-.9-.3-.225 0-.375 0-.6.076-.075-.526-.375-.9-.75-1.2l-.15-.15-.15.15c-.225.3-.3.824-.225 1.2 0 .3.075.6.3.824-.375.226-.825.3-1.275.3H.75a.75.75 0 0 0-.75.75c.075 1.426.6 4.5 3.9 4.5 4.35 0 5.1-2.475 6.15-5.1h.15c.675 0 1.275-.225 1.65-.825l.15-.15-.15-.075zm-10.875.15h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225H.975c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm4.5-1.875h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225z" />
+      <path d="M5.475 5.438h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5 0h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.075.226.225.226zm-1.5-3.75h.675c.15 0 .225-.076.225-.226V.787c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-3 3.75h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5-1.876h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-1.5 0h.675c.15 0 .225-.075.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm1.5 1.876h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="docker-filled:16">
+      <path d="M15.8 6.8c-.4-.3-.8-.4-1.2-.4-.3 0-.5 0-.8.1-.1-.7-.5-1.2-1-1.6l-.2-.2-.2.2c-.3.4-.4 1.1-.3 1.6 0 .4.1.8.4 1.1-.5.3-1.1.4-1.7.4H1a1 1 0 0 0-1 1c.1 1.9.8 6 5.2 6 5.8 0 6.8-3.3 8.2-6.8h.2c.9 0 1.7-.3 2.2-1.1l.2-.2-.2-.1zM1.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM7.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+      <path d="M7.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM9.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.1.3.3.3zM7.3 2h.9c.2 0 .3-.1.3-.3V.8c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="dollar-filled:12">
       <path fill-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5 3a.5.5 0 0 0-.5.5v.53A1.5 1.5 0 0 0 6.3 7h.4a.5.5 0 0 1 0 1H5.3a.5.5 0 0 0 0 1H6v.5a.5.5 0 0 0 1 0v-.53A1.5 1.5 0 0 0 6.7 6h-.4a.5.5 0 0 1 0-1h1.4a.5.5 0 0 0 0-1H7v-.5a.5.5 0 0 0-.5-.5z" clip-rule="evenodd" />
     </symbol>
@@ -606,6 +614,12 @@
       <path fill-rule="evenodd" d="M8.5 15c3.5899 0 6.5-2.9101 6.5-6.5S12.0899 2 8.5 2 2 4.9101 2 8.5 4.9101 15 8.5 15zm0 1c4.1421 0 7.5-3.3579 7.5-7.5S12.6421 1 8.5 1 1 4.3579 1 8.5 4.3579 16 8.5 16z" clip-rule="evenodd" />
       <path d="M8 4.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1H8c-.5523 0-1 .4477-1 1s.4477 1 1 1h1c1.1046 0 2 .8954 2 2s-.8954 2-2 2v.5a.5.5 0 0 1-1 0V12H6.5a.5.5 0 0 1 0-1H9c.5523 0 1-.4477 1-1s-.4477-1-1-1H8c-1.1046 0-2-.8954-2-2s.8954-2 2-2v-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="dot:12">
+      <path d="M7.5 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="dot:16">
+      <path d="M6,8a2,2 0 1,0 4,0a2,2 0 1,0 -4,0" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="emoticon-confused:12">
       <path fill-rule="evenodd" d="M6 11A5 5 0 106 1a5 5 0 000 10zm0 1A6 6 0 106 0a6 6 0 000 12z" clip-rule="evenodd" />
       <path d="M8.803 9a.244.244 0 00.2-.383C8.334 7.636 7.259 7 6.048 7c-1.21 0-2.285.636-2.956 1.617a.244.244 0 00.2.383h5.512zM4.75 4.75a1 1 0 11-2 0 1 1 0 012 0zM9.25 4.75a1 1 0 11-2 0 1 1 0 012 0z" />