@plesk/ui-library 3.35.1 → 3.35.3

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/Grid/Grid.js

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, Component } from 'react';
-import PropTypes from 'prop-types';
+import { cloneElement, Component } from 'react';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
@@ -19,10 +18,11 @@ class Grid extends Component {
     });
     _defineProperty(this, "handleResize", _ref => {
       let {
-        bounds: {
-          width
-        }
+        bounds
       } = _ref;
+      const {
+        width
+      } = bounds;
       let {
         maxColumnsNumber
       } = this.props;
@@ -87,9 +87,9 @@ class Grid extends Component {
     const result = /*#__PURE__*/_jsx("div", {
       className: computedClassName,
       ...props,
-      children: minColumnWidth > 0 && !this.state.xs ? null : children
+      children: minColumnWidth && !this.state.xs ? null : children
     });
-    if (minColumnWidth > 0) {
+    if (minColumnWidth) {
       return /*#__PURE__*/_jsx(Measure, {
         bounds: true,
         onResize: this.handleResize,
@@ -106,67 +106,7 @@ class Grid extends Component {
     return result;
   }
 }
-Grid.propTypes = {
-  /**
-   * Content of the `Grid`.
-   * @since 0.0.48
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Minimal column width
-   * @since 0.0.50
-   */
-  minColumnWidth: PropTypes.number,
-  /**
-   * Maximum columns number
-   * @since 0.0.53
-   */
-  maxColumnsNumber: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-  /**
-   * Number of columns for `xs` breakpoint
-   * @since 0.0.53
-   */
-  xs: PropTypes.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
-  /**
-   * Number of columns for `sm` breakpoint
-   * @since 0.0.48
-   */
-  sm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
-  /**
-   * Number of columns for `md` breakpoint
-   * @since 0.0.48
-   */
-  md: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
-  /**
-   * Number of columns for `lg` breakpoint
-   * @since 0.0.48
-   */
-  lg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
-  /**
-   * Number of columns for `xl` breakpoint
-   * @since 0.0.48
-   */
-  xl: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
-  /**
-   * Specifying the gutters between grid items
-   * @since 0.0.53
-   */
-  gap: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /**
-   * Columns number change notifier
-   * @since 0.0.50
-   */
-  onColumnsChange: PropTypes.func
-};
-Grid.defaultProps = {
+_defineProperty(Grid, "defaultProps", {
   children: null,
   className: null,
   baseClassName: `${CLS_PREFIX}grid`,
@@ -179,5 +119,5 @@ Grid.defaultProps = {
   xl: null,
   gap: null,
   onColumnsChange: null
-};
+});
 export default Grid;

package/esm/components/GridCol/GridCol.js

@@ -1,18 +1,15 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `GridCol` component is a part of [Grid](#!/Grid) component.
  * @since 0.0.48
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const GridCol = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}grid__col`,
     className,
     children,
     xs,
@@ -35,54 +32,4 @@ const GridCol = _ref => {
     children: children
   });
 };
-GridCol.propTypes = {
-  /**
-   * Content of the `GridCol`.
-   * @since 0.0.48
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * Column size for `xs` breakpoint (from 1 to 12)
-   * @since 0.0.53
-   */
-  xs: PropTypes.number,
-  /**
-   * Column size for `sm` breakpoint (from 1 to 12)
-   * @since 0.0.53
-   */
-  sm: PropTypes.number,
-  /**
-   * Column size for `sm` breakpoint (from 1 to 12)
-   * @since 0.0.53
-   */
-  md: PropTypes.number,
-  /**
-   * Column size for `md` breakpoint (from 1 to 12)
-   * @since 0.0.53
-   */
-  lg: PropTypes.number,
-  /**
-   * Column size for `lg` breakpoint (from 1 to 12)
-   * @since 0.0.53
-   */
-  xl: PropTypes.number
-};
-GridCol.defaultProps = {
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}grid__col`,
-  xs: null,
-  sm: null,
-  md: null,
-  lg: null,
-  xl: null
-};
 export default GridCol;

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'];