@plesk/ui-library 3.35.2 → 3.35.3

package/esm/components/FormField/FormField.js

@@ -531,6 +531,7 @@ const propTypes = {
    */
   scrollableElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.instanceOf(Window)])
 };
+const BASE_FORM_FIELD_CLASS_NAME = `${CLS_PREFIX}form-field`;
 const defaultProps = {
   id: undefined,
   name: undefined,
@@ -548,7 +549,7 @@ const defaultProps = {
   onRemoveRow: null,
   fullDescription: undefined,
   className: undefined,
-  baseClassName: `${CLS_PREFIX}form-field`,
+  baseClassName: BASE_FORM_FIELD_CLASS_NAME,
   form: undefined,
   vertical: undefined,
   scrollableElement: undefined
@@ -583,4 +584,5 @@ const FormFieldWrapper = props => {
 FormFieldWrapper.displayName = 'FormField';
 FormFieldWrapper.propTypes = propTypes;
 FormFieldWrapper.defaultProps = defaultProps;
-export default FormFieldWrapper;
+export default FormFieldWrapper;
+export { BASE_FORM_FIELD_CLASS_NAME };

package/esm/components/FormField/index.js

@@ -1,3 +1,4 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-export { default } from './FormField';
+export { default } from './FormField';
+export { BASE_FORM_FIELD_CLASS_NAME } from './FormField';

package/esm/components/FormFieldPassword/PasswordMeter.js

@@ -34,12 +34,12 @@ const PasswordMeter = _ref => {
   }, [visible, value, onEstimate]);
   return /*#__PURE__*/_jsxs(Popover, {
     visible: visible && result !== null,
-    target: children,
     placement: "bottom-right",
     intent: result ? strengthIntents[result.strength] : undefined,
     canCloseOnOutsideClick: false,
     canCloseOnEscapePress: false,
     ...props,
+    target: children,
     children: [result?.strength ? /*#__PURE__*/_jsx(Translate, {
       component: "div",
       content: "FormFieldPassword.passwordStrength",

package/esm/components/FormFieldRadioButtons/FormFieldRadioButtons.js

@@ -1,10 +1,9 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { cloneElement } from 'react';
 import { CLS_PREFIX } from '../../constants';
-import FormField from '../FormField';
+import FormField, { BASE_FORM_FIELD_CLASS_NAME } from '../FormField';
 import Hint from '../Hint';
 import Radio from '../Radio';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,136 +12,69 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
  * @since 0.2.0
  */
-class FormFieldRadioButtons extends Component {
-  render() {
-    const {
-      baseClassName,
-      className,
-      options,
-      autoFocus,
-      multi,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/_jsx(FormField, {
-      className: classNames(baseClassName, className),
-      ...props,
-      children: _ref => {
+const FormFieldRadioButtons = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}form-field-radio-buttons`,
+    className,
+    options,
+    autoFocus,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(FormField, {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: _ref2 => {
+      let {
+        getId,
+        getName,
+        getValue,
+        setValue,
+        isDisabled
+      } = _ref2;
+      return options.map((_ref3, index) => {
         let {
-          getId,
-          getName,
-          getValue,
-          setValue,
-          isDisabled
-        } = _ref;
-        return options.map((_ref2, index) => {
-          let {
-            value,
-            label,
-            description,
-            disabled,
-            indentFields = []
-          } = _ref2;
-          return /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__radio`,
-            children: [/*#__PURE__*/_jsx(Radio, {
+          value,
+          label,
+          description,
+          disabled,
+          indentFields = []
+        } = _ref3;
+        return /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__radio`,
+          children: [/*#__PURE__*/_jsx(Radio, {
+            name: getName(),
+            checked: getValue() === value,
+            onChange: isChecked => {
+              if (isChecked) {
+                setValue(value);
+              }
+            },
+            disabled: isDisabled() || disabled,
+            inputProps: {
+              id: getId() ? `${getId()}-${value}` : undefined,
               name: getName(),
-              checked: getValue() === value,
-              onChange: isChecked => {
-                if (isChecked) {
-                  setValue(value);
-                }
-              },
-              disabled: isDisabled() || disabled,
-              inputProps: {
-                id: getId() ? `${getId()}-${value}` : null,
-                name: getName(),
-                value,
-                autoFocus: index === 0 && autoFocus ? true : undefined
-              },
-              children: label || value
-            }), description || indentFields ? /*#__PURE__*/_jsxs("div", {
-              className: `${baseClassName}__content`,
-              children: [description && /*#__PURE__*/_jsx(Hint, {
-                component: "div",
-                className: `${FormField.defaultProps.baseClassName}__description`,
-                children: description
-              }), indentFields.map(field => {
-                if (isDisabled() || disabled || getValue() !== value) {
-                  return /*#__PURE__*/cloneElement(field, {
-                    disabled: true
-                  });
-                }
-                return field;
-              })]
-            }) : null]
-          }, value);
-        });
-      }
-    });
-  }
-}
-FormFieldRadioButtons.propTypes = {
-  /**
-   * Options definition.
-   * @since 0.2.0
-   */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * Option value.
-     */
-    value: PropTypes.string.isRequired,
-    /**
-     * Option label.
-     */
-    label: PropTypes.node.isRequired,
-    /**
-     * Text hint located below option for providing additional information.
-     */
-    description: PropTypes.node,
-    /**
-     * Set true if option is not available to choice.
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Optional array of `FormField` components under this option.
-     */
-    indentFields: PropTypes.array
-  })).isRequired,
-  /**
-   * Value of current chosen option.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.2.0
-   */
-  value: PropTypes.string,
-  /**
-   * Disabled state of field.
-   * @since 0.2.0
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
-   */
-  autoFocus: PropTypes.bool,
-  /**
-   * @ignore Field cannot be multiple
-   */
-  multi: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-FormFieldRadioButtons.defaultProps = {
-  value: undefined,
-  disabled: undefined,
-  autoFocus: undefined,
-  multi: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}form-field-radio-buttons`
+              value,
+              autoFocus: index === 0 && autoFocus ? true : undefined
+            },
+            children: label || value
+          }), description || indentFields ? /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__content`,
+            children: [description && /*#__PURE__*/_jsx(Hint, {
+              component: "div",
+              className: `${BASE_FORM_FIELD_CLASS_NAME}__description`,
+              children: description
+            }), indentFields.map(field => {
+              if (isDisabled() || disabled || getValue() !== value) {
+                return /*#__PURE__*/cloneElement(field, {
+                  disabled: true
+                });
+              }
+              return field;
+            })]
+          }) : null]
+        }, value);
+      });
+    }
+  });
 };
 export default FormFieldRadioButtons;

package/esm/components/FormFieldText/FormFieldText.js

@@ -1,8 +1,4 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-/* eslint-disable react/prefer-stateless-function */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import FormField from '../FormField';
@@ -15,141 +11,60 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * [FormField](#!/FormField) with [InputNumber](#!/InputNumber) can be used for entering of integer numbers.
  * @since 0.0.58
  */
-class FormFieldText extends Component {
-  render() {
-    const {
-      baseClassName,
-      className,
-      size,
-      placeholder,
-      multiline,
-      rows,
-      autoFocus,
-      autoComplete,
-      autoheight,
-      inputProps,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/_jsx(FormField, {
-      className: classNames(baseClassName, {
-        [`${baseClassName}--multiline`]: multiline
-      }, className),
-      ...props,
-      children: _ref => {
-        let {
-          getId,
-          getName,
-          getValue,
-          setValue,
-          isDisabled
-        } = _ref;
-        return multiline ? /*#__PURE__*/_jsx(TextArea, {
-          id: getId(),
-          name: getName(),
-          value: getValue(''),
-          onChange: e => setValue(e.target.value),
-          disabled: isDisabled(),
-          size: size,
-          rows: rows,
-          placeholder: placeholder,
-          autoFocus: autoFocus,
-          autoComplete: autoComplete,
-          autoheight: autoheight,
-          ...inputProps
-        }) : /*#__PURE__*/_jsx(Input, {
-          id: getId(),
-          name: getName(),
-          className: `${baseClassName}__input`,
-          value: getValue(''),
-          onChange: e => setValue(e.target.value),
-          disabled: isDisabled(),
-          size: size,
-          placeholder: placeholder,
-          autoFocus: autoFocus,
-          autoComplete: autoComplete,
-          ...inputProps
-        });
-      }
-    });
-  }
-}
-FormFieldText.propTypes = {
-  /**
-   * Size of the input
-   * @since 0.0.58
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fill']),
-  /**
-   * If `true`, a textarea element will be rendered.
-   * @since 1.3.0
-   */
-  multiline: PropTypes.bool,
-  /**
-   * Number of rows to display when multiline option is set to true.
-   * @since 1.3.0
-   */
-  rows: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.shape({
-    min: PropTypes.number.isRequired,
-    max: PropTypes.number.isRequired
-  })]),
-  /**
-   * Placeholder of the input
-   * @since 0.0.58
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Disabled state of field.
-   * @since 0.2.0
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
-   */
-  autoFocus: PropTypes.bool,
-  /**
-   * Whether the value of the control can be automatically completed by the browser or not.
-   * @since 2.5.1
-   */
-  autoComplete: PropTypes.oneOf(['on', 'off']),
-  /**
-   * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
-   * @since 1.12.0
-   */
-  multi: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    max: PropTypes.number.isRequired
-  })]),
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Adjust height automatically when multiline option is set to true.
-   * @since 1.9.0
-   */
-  autoheight: PropTypes.bool,
-  /**
-   * Props of underlying input element.
-   * @since 3.28.1
-   */
-  inputProps: PropTypes.object
-};
-FormFieldText.defaultProps = {
-  size: undefined,
-  placeholder: undefined,
-  disabled: undefined,
-  multiline: false,
-  rows: 4,
-  autoFocus: undefined,
-  autoComplete: undefined,
-  multi: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}form-field-text`,
-  autoheight: false,
-  inputProps: undefined
+const FormFieldText = props => {
+  const {
+    baseClassName = `${CLS_PREFIX}form-field-text`,
+    className,
+    size,
+    placeholder,
+    rows = 4,
+    autoFocus,
+    multiline = false,
+    autoComplete,
+    autoheight = false,
+    inputProps,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/_jsx(FormField, {
+    className: classNames(baseClassName, {
+      [`${baseClassName}--multiline`]: multiline
+    }, className),
+    ...otherProps,
+    children: _ref => {
+      let {
+        getId,
+        getName,
+        getValue,
+        setValue,
+        isDisabled
+      } = _ref;
+      return props.multiline ? /*#__PURE__*/_jsx(TextArea, {
+        id: getId(),
+        name: getName(),
+        value: getValue(''),
+        onChange: e => setValue(e.currentTarget.value),
+        disabled: isDisabled(),
+        size: size,
+        rows: rows,
+        placeholder: placeholder,
+        autoFocus: autoFocus,
+        autoComplete: autoComplete,
+        autoheight: autoheight,
+        ...(props.inputProps ?? {})
+      }) : /*#__PURE__*/_jsx(Input, {
+        id: getId(),
+        name: getName(),
+        className: `${baseClassName}__input`,
+        value: getValue(''),
+        onChange: e => setValue(e.currentTarget.value),
+        disabled: isDisabled(),
+        size: size,
+        placeholder: placeholder,
+        autoFocus: autoFocus,
+        autoComplete: autoComplete,
+        ...(props.inputProps ?? {})
+      });
+    }
+  });
 };
 export default FormFieldText;

package/esm/components/Icon/constants.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
 // This file is generated by create-svg-sprite. Do not edit.
 
-export 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-circle-filled', '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', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', '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', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'laravel', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'woocommerce', 'wordpress', 'zero-circle-filled'];
-export 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-circle-filled', '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', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', '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', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'laravel', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'woocommerce', 'wordpress', 'zero-circle-filled'];
+export const NAMES_12 = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'laravel', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'woocommerce', 'wordpress', 'zero-circle-filled'];
+export const NAMES = ['archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'laravel', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'woocommerce', 'wordpress', 'zero-circle-filled'];

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

@@ -1,4 +1,4 @@
-<svg width="16" height="11856" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="12144" 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" />
@@ -23,6 +23,12 @@
       <path d="M5.645 10.355a.496.496 0 0 1 0-.702L14.298 1H10.5a.5.5 0 0 1 0-1h5.002A.494.494 0 0 1 16 .498V5.5a.5.5 0 0 1-1 0V1.702l-8.653 8.653a.496.496 0 0 1-.702 0z" />
       <path d="M8 4.5a.5.5 0 0 0-.5-.5H1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8.5a.5.5 0 0 0-1 0V15H1V5h6.5a.5.5 0 0 0 .5-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="arrow-down-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM6 2.5a.5.5 0 0 1 1 0v5.798l1.653-1.653a.496.496 0 0 1 .702.702L6.903 9.798a.5.5 0 0 1-.401.202h-.004a.495.495 0 0 1-.401-.202L3.645 7.347a.496.496 0 0 1 .702-.702L6 8.298V2.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="arrow-down-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 0-15 0 7.5 7.5 0 0 0 15 0zm-3.645.146a.496.496 0 0 0-.702 0L9 11.299V3.5a.5.5 0 0 0-1 0v7.799L5.347 8.646a.496.496 0 0 0-.702.701L8.097 12.8a.504.504 0 0 0 .401.201h.004a.494.494 0 0 0 .401-.201l3.452-3.452a.496.496 0 0 0 0-.701z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="arrow-down-in:12">
       <path d="M11 2v9H2V2h1a.5.5 0 0 0 0-1H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-1a.5.5 0 0 0 0 1h1z" />
       <path d="M8.653 5.645a.496.496 0 0 1 .702.702L6.903 8.798A.499.499 0 0 1 6.502 9h-.004a.495.495 0 0 1-.401-.202L3.645 6.347a.496.496 0 0 1 .702-.702L6 7.298V.5a.5.5 0 0 1 1 0v6.798l1.653-1.653z" />
@@ -52,6 +58,12 @@
     <symbol viewBox="0 0 16 16" id="arrow-down:16">
       <path d="M8 .5a.5.5 0 0 1 1 0v13.7984l2.6531-2.6531a.4962.4962 0 0 1 .7016.7016l-3.4513 3.4513A.4944.4944 0 0 1 8.502 16h-.004a.4944.4944 0 0 1-.4014-.2018l-3.4513-3.4513a.4961.4961 0 0 1 .7016-.7016L8 14.2984V.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="arrow-left-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM10.5 6a.5.5 0 0 1 0 1H4.702l1.653 1.653a.496.496 0 0 1-.702.702L3.202 6.903A.5.5 0 0 1 3 6.502v-.004a.495.495 0 0 1 .202-.401l2.451-2.452a.496.496 0 0 1 .702.702L4.702 6H10.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="arrow-left-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 16a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm-.146-3.645a.496.496 0 0 0 0-.702L5.701 9H13.5a.5.5 0 0 0 0-1H5.701l2.654-2.653a.496.496 0 0 0-.702-.702L4.202 8.097A.499.499 0 0 0 4 8.498v.004a.495.495 0 0 0 .202.401l3.45 3.452a.496.496 0 0 0 .702 0z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="arrow-left:12">
       <path d="M.202 6.097A.499.499 0 0 0 0 6.498v.004a.495.495 0 0 0 .202.401l2.451 2.452a.496.496 0 0 0 .702-.702L1.702 7H11.5a.5.5 0 0 0 0-1H1.702l1.653-1.653a.496.496 0 0 0-.702-.702L.202 6.097z" />
     </symbol>
@@ -86,6 +98,12 @@
     <symbol viewBox="0 0 16 16" id="arrow-right:16">
       <path d="M11.6453 5.3469a.4961.4961 0 0 1 .7016-.7016l3.4513 3.4513A.4944.4944 0 0 1 16 8.498v.004a.4944.4944 0 0 1-.2018.4014l-3.4513 3.4513a.4962.4962 0 0 1-.7016-.7016L14.2984 9H.5a.5.5 0 0 1 0-1h13.7984l-2.6531-2.6531z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="arrow-up-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM6 10.5a.5.5 0 0 0 1 0V4.702l1.653 1.653a.496.496 0 0 0 .702-.702L6.903 3.202A.5.5 0 0 0 6.502 3h-.004a.495.495 0 0 0-.401.202L3.645 5.653a.496.496 0 0 0 .702.702L6 4.702V10.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="arrow-up-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-3.645-.146a.496.496 0 0 1-.702 0L9 5.701V13.5a.5.5 0 0 1-1 0V5.701L5.347 8.355a.496.496 0 0 1-.702-.702l3.452-3.451A.499.499 0 0 1 8.498 4h.004a.495.495 0 0 1 .401.202l3.452 3.45a.496.496 0 0 1 0 .702z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="arrow-up-circle:12">
       <path d="M6 11.5a.5.5 0 001 0V4.702l1.653 1.653a.496.496 0 00.702-.702L6.903 3.202A.5.5 0 006.502 3h-.004a.495.495 0 00-.401.202L3.645 5.653a.496.496 0 00.702.702L6 4.702V11.5z" />
       <path d="M9 9.528c0-.179.09-.343.232-.452a4.5 4.5 0 10-5.464 0A.573.573 0 014 9.528c0 .399-.42.65-.742.415a5.5 5.5 0 116.485 0C9.42 10.18 9 9.927 9 9.528z" />
@@ -640,6 +658,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-big:12">
+      <path d="M10 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="dot-big:16">
+      <circle cx="8" cy="8" r="5" />
+    </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>
@@ -1296,6 +1320,20 @@
     <symbol viewBox="0 0 16 16" id="plugins:16">
       <path fill-rule="evenodd" d="M15 2h-5v5h5V2zm-5-1c-.5523 0-1 .4477-1 1v5c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1V2c0-.5523-.4477-1-1-1h-5zM7 10H2v5h5v-5zM2 9c-.5523 0-1 .4477-1 1v5c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1v-5c0-.5523-.4477-1-1-1H2zM15 10h-5v5h5v-5zm-5-1c-.5523 0-1 .4477-1 1v5c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1v-5c0-.5523-.4477-1-1-1h-5z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="plus-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0-2.5A.5.5 0 0 1 6 9V7H4a.5.5 0 0 1 0-1h2V4a.5.5 0 0 1 1 0v2h2a.5.5 0 0 1 0 1H7v2a.5.5 0 0 1-.5.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="plus-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-11.5 0A.5.5 0 0 1 5 8h3V5a.5.5 0 0 1 1 0v3h3a.5.5 0 0 1 0 1H9v3a.5.5 0 0 1-1 0V9H5a.5.5 0 0 1-.5-.5z" />
+    </symbol>
+    <symbol viewBox="0 0 12 12" id="plus-circle:12">
+      <path d="M4 6a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0V7h2a.5.5 0 0 0 0-1H7V4a.5.5 0 0 0-1 0v2H4z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-1 0a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="plus-circle:16">
+      <path d="M5 8a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0V9h3a.5.5 0 0 0 0-1H9V5a.5.5 0 0 0-1 0v3H5z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-1 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="plus:12">
       <path d="M6.5 2a.5.5 0 0 0-.5.5V6H2.5a.5.5 0 1 0 0 1H6v3.5a.5.5 0 0 0 1 0V7h3.5a.5.5 0 0 0 0-1H7V2.5a.5.5 0 0 0-.5-.5z" />
     </symbol>