@plesk/ui-library 3.27.2 → 3.28.0

package/styleguide/images/symbols.svg

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

package/styleguide/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Plesk UI Library 3.27.2</title>
+    <title>Plesk UI Library 3.28.0</title>
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
@@ -40,6 +40,6 @@
     </script>
     <noscript><div><img src="https://mc.yandex.ru/watch/56446840" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
     <!-- /Yandex.Metrika counter -->
-    <script src="build/bundle.1c9c8500.js"></script>
+    <script src="build/bundle.24d5b0eb.js"></script>
   </body>
 </html>

package/types/src/components/FormFieldPassword/FormFieldPassword.d.ts

@@ -0,0 +1,91 @@
+import { Component, ComponentProps, ReactElement, RefObject } from 'react';
+import Button from '../Button';
+import FormField from '../FormField';
+import { PasswordMeterProps } from './PasswordMeter';
+import './FormFieldPassword.less';
+export declare type FormFieldPasswordProps = {
+    /**
+     * Is show button hidden?
+     * @since 0.0.59
+     */
+    hideShowButton?: boolean;
+    /**
+     * Is generate button hidden?
+     * @since 0.0.59
+     */
+    hideGenerateButton?: boolean;
+    /**
+     * Is password meter hidden?
+     * @since 0.0.59
+     */
+    hidePasswordMeter?: boolean;
+    /**
+     * Additional props for password meter. See [Popover](#!/Popover) for more information.
+     * @since 1.5.6
+     */
+    passwordMeterProps?: PasswordMeterProps;
+    /**
+     * Size of the control
+     * @since 1.5.6
+     */
+    size: 'md' | 'lg' | 'xl' | 'fill';
+    /**
+     * The browser will automatically focus on the component upon rendering the screen
+     * @since 1.9.0
+     */
+    autoFocus?: boolean;
+    /**
+     * Prevent password autocompletion.
+     * @since 2.5.1
+     */
+    autoComplete?: 'new-password';
+    /**
+     * A render function for customizing the password generation button.
+     * @since 3.13.0
+     */
+    generateButton?: (generateButtonProps: ComponentProps<typeof Button>) => ReactElement;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+} & ComponentProps<typeof FormField>;
+declare type FormFieldPasswordState = {
+    visible: boolean;
+    passwordMeterVisible: boolean;
+};
+/**
+ * `FormFieldPassword` component provides secure way to enter a password.
+ * @since 0.0.58
+ */
+declare class FormFieldPassword extends Component<FormFieldPasswordProps, FormFieldPasswordState> {
+    static defaultProps: {
+        hideShowButton: boolean;
+        generateButton: undefined;
+        hideGenerateButton: boolean;
+        hidePasswordMeter: boolean;
+        passwordMeterProps: {};
+        size: string;
+        autoFocus: undefined;
+        autoComplete: undefined;
+        className: undefined;
+        baseClassName: string;
+    };
+    state: {
+        visible: boolean;
+        passwordMeterVisible: boolean;
+    };
+    targetRef: RefObject<HTMLSpanElement>;
+    handleToggleClick: () => void;
+    handleClosePasswordMeter: () => void;
+    handleBlur: () => void;
+    renderGenerateButton({ setValue, isDisabled, }: {
+        setValue: (value: any) => void;
+        isDisabled: () => boolean;
+    }): JSX.Element;
+    render(): JSX.Element;
+}
+export default FormFieldPassword;

package/types/src/components/FormFieldPassword/PasswordMeter.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import Popover from '../Popover';
+import estimatePassword, { EstimateResult, EstimateRule } from './estimatePassword';
+export declare type PasswordMeterProps = {
+    value: string;
+    onEstimate?: (password: string, defaultEstimateFn: typeof estimatePassword, defaultEstimateRules: EstimateRule[]) => EstimateResult;
+} & ComponentProps<typeof Popover>;
+declare const PasswordMeter: FunctionComponent<PasswordMeterProps>;
+export default PasswordMeter;

package/types/src/components/FormFieldPassword/estimatePassword.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare type EstimateRule = {
+    name: string;
+    suggestion?: ReactNode;
+    score: (password: string) => number;
+};
+export declare type EstimateResult = {
+    strength: 'VeryWeak' | 'Weak' | 'Medium' | 'Strong' | 'VeryStrong';
+    suggestions: ReactNode[];
+};
+export declare const DEFAULT_RULES: EstimateRule[];
+declare const _default: (password: string, rules?: EstimateRule[]) => EstimateResult;
+export default _default;

package/types/src/components/FormFieldPassword/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FormFieldPassword';
+export { default as generatePassword } from './generatePassword';

package/types/src/components/Icon/constants.d.ts

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

package/types/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,49 @@
+import { ComponentType, FC } from 'react';
+import './Skeleton.less';
+export declare type SkeletonProps = {
+    /**
+     * Skeleton width. For the width specified as a number, `'px'` is used as the unit.
+     * You can also specify a value with other units such as `'em'`, `'%'`, etc. (f.e. 20%, 10em)
+     * @since 3.28.0
+     */
+    width?: number | string;
+    /**
+     * Skeleton max width. For the width specified as a number, `'px'` is used as the unit.
+     * You can also specify a value with other units such as `'em'`, `'%'`, etc. (f.e. 20%, 10em)
+     * @since 3.28.0
+     */
+    maxWidth?: number | string;
+    /**
+     * Skeleton height. For the width specified as a number, `'px'` is used as the unit.
+     * You can also specify a value with other units such as `'em'`, `'%'`, etc. (f.e. 20%, 10em)
+     * @since 3.28.0
+     */
+    height?: number | string;
+    /**
+     * custom styles for skeleton
+     * @since 3.28.0
+     */
+    style?: {
+        [key: string]: string;
+    };
+    /**
+     * Component to render as the root element.
+     * @since 3.28.0
+     */
+    component?: ComponentType | keyof JSX.IntrinsicElements;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+};
+/**
+ * `Skeleton` (or content-placeholder) is placeholder preview of content before the data gets loaded to reduce load-time frustration.
+ * Skeleton is used for non-text components, images, media-objects, etc.
+ * @since 3.28.0
+ */
+declare const Skeleton: FC<SkeletonProps>;
+export default Skeleton;

package/types/src/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const Basic: {
+    (args: React.PropsWithChildren<import("./Skeleton").SkeletonProps>): JSX.Element;
+    args: {};
+};
+export declare const CustomSize: {
+    (args: React.PropsWithChildren<import("./Skeleton").SkeletonProps>): JSX.Element;
+    args: {
+        width: number;
+        height: number;
+    };
+};

package/types/src/components/Skeleton/SkeletonTabs.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import './SkeletonTabs.less';
+declare type SkeletonTabsProps = {
+    /**
+     * Number of tabs
+     * @since 3.28.0
+     */
+    count?: number;
+    /**
+     * @ignore
+     */
+    className: string;
+    /**
+     * @ignore
+     */
+    baseClassName: string;
+};
+/**
+ * Skeleton for tabs component
+ * @since `3.28.0
+ */
+declare const SkeletonTabs: FC<SkeletonTabsProps>;
+export default SkeletonTabs;

package/types/src/components/Skeleton/SkeletonTabs.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Basic: (args: React.PropsWithChildren<{
+    count?: number | undefined;
+    className: string;
+    baseClassName: string;
+}>) => JSX.Element;

package/types/src/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,34 @@
+import { FC, ComponentType } from 'react';
+import { SkeletonProps } from './Skeleton';
+import './SkeletonText.less';
+declare type SkeletonTextProps = {
+    /**
+     * Number of rows
+     * @since 3.28.0
+     */
+    lines?: number;
+    /**
+     * Props for line
+     * @since 3.28.0
+     */
+    lineProps?: SkeletonProps;
+    /**
+     * Component to render as the root element.
+     * @since 3.28.0
+     */
+    component?: ComponentType | keyof JSX.IntrinsicElements;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+};
+/**
+ * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
+ * @since 3.28.0
+ */
+declare const SkeletonText: FC<SkeletonTextProps>;
+export default SkeletonText;

package/types/src/components/Skeleton/SkeletonText.stories.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export declare const Basic: {
+    (args: React.PropsWithChildren<{
+        lines?: number | undefined;
+        lineProps?: import("./Skeleton").SkeletonProps | undefined;
+        component?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+        baseClassName?: string | undefined;
+        className?: string | undefined;
+    }>): JSX.Element;
+    args: {};
+};
+export declare const LinesCount: {
+    (args: React.PropsWithChildren<{
+        lines?: number | undefined;
+        lineProps?: import("./Skeleton").SkeletonProps | undefined;
+        component?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+        baseClassName?: string | undefined;
+        className?: string | undefined;
+    }>): JSX.Element;
+    args: {
+        lines: number;
+    };
+};
+export declare const Custom: {
+    (args: React.PropsWithChildren<{
+        lines?: number | undefined;
+        lineProps?: import("./Skeleton").SkeletonProps | undefined;
+        component?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+        baseClassName?: string | undefined;
+        className?: string | undefined;
+    }>): JSX.Element;
+    args: {
+        lines: number;
+        lineProps: {
+            width: number;
+        };
+    };
+};

package/types/src/components/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Skeleton';
+export { default as SkeletonText } from './SkeletonText';
+export { default as SkeletonTabs } from './SkeletonTabs';

package/types/src/components/index.d.ts

@@ -96,3 +96,5 @@ export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
 export { default as Link } from './Link';
+export { default as Skeleton } from './Skeleton';
+export * from './Skeleton';

package/types/src/components/utils.d.ts

@@ -25,4 +25,5 @@ export declare const createFocusManager: (containerRef: React.RefObject<HTMLElem
     focusLast: (attempt?: number) => boolean;
 };
 export declare const mergeRefs: <T>(...refs: React.Ref<T | null>[]) => (value: T | null) => void;
+export declare const normalizeSize: (value?: string | number | undefined) => string | number | undefined;
 export {};

package/cjs/components/FormFieldPassword/passwordScore.js

@@ -1,132 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PASSWORD_SCORE_RULES = void 0;
-
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-const passwordScore = (password, rules = PASSWORD_SCORE_RULES) => {
-  const unusedRules = [];
-  let score = 0;
-  rules.forEach(rule => {
-    const mark = rule.score(password);
-
-    if (mark < 0) {
-      unusedRules.push({
-        rule,
-        value: -mark
-      });
-    } else {
-      score += mark;
-    }
-  });
-  return Promise.resolve({
-    password,
-    score,
-    unusedRules
-  });
-};
-
-const PASSWORD_SCORE_RULES = [{
-  name: 'passwordTooShort',
-
-  score(passwd) {
-    return passwd.length < 5 ? -1 : 0;
-  }
-
-}, {
-  name: 'passwordLength',
-
-  score(passwd) {
-    if (passwd.length < 5) {
-      return 3;
-    }
-
-    if (passwd.length > 4 && passwd.length < 8) {
-      return 6;
-    }
-
-    if (passwd.length > 7 && passwd.length < 16) {
-      return 12;
-    }
-
-    return 18;
-  }
-
-}, {
-  name: 'lettersLowerCase',
-
-  score(passwd) {
-    // [verified] at least one lower case letter
-    return passwd.match(/[a-z]/) ? 1 : -1;
-  }
-
-}, {
-  name: 'lettersUpperCase',
-
-  score(passwd) {
-    // [verified] at least one upper case letter
-    return passwd.match(/[A-Z]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers1',
-
-  score(passwd) {
-    // [verified] at least one number
-    return passwd.match(/\d+/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers3',
-
-  score(passwd) {
-    // [verified] at least three numbers
-    return passwd.match(/(.*[0-9].*[0-9].*[0-9])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar1',
-
-  score(passwd) {
-    // [verified] at least one special character
-    return passwd.match(/[!@#$%^&*?_~]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar2',
-
-  score(passwd) {
-    // [verified] at least two special characters
-    return passwd.match(/(.*[!@#$%^&*?_~].*[!@#$%^&*?_~])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'comboUpperAndLower',
-
-  score(passwd) {
-    // [verified] both upper and lower case
-    return passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersAndNumbers',
-
-  score(passwd) {
-    // [verified] both letters and numbers
-    return passwd.match(/([a-zA-Z])/) && passwd.match(/([0-9])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersNumbersSpecial',
-
-  score(passwd) {
-    // [verified] letters, numbers, and special characters
-    return passwd.match(/([a-zA-Z0-9].*[!@#$%^&*?_~])|([!@#$%^&*?_~].*[a-zA-Z0-9])/) ? 2 : -1;
-  }
-
-}];
-exports.PASSWORD_SCORE_RULES = PASSWORD_SCORE_RULES;
-var _default = passwordScore;
-exports.default = _default;

package/esm/components/FormFieldPassword/passwordScore.js

@@ -1,123 +0,0 @@
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-const passwordScore = (password, rules = PASSWORD_SCORE_RULES) => {
-  const unusedRules = [];
-  let score = 0;
-  rules.forEach(rule => {
-    const mark = rule.score(password);
-
-    if (mark < 0) {
-      unusedRules.push({
-        rule,
-        value: -mark
-      });
-    } else {
-      score += mark;
-    }
-  });
-  return Promise.resolve({
-    password,
-    score,
-    unusedRules
-  });
-};
-
-export const PASSWORD_SCORE_RULES = [{
-  name: 'passwordTooShort',
-
-  score(passwd) {
-    return passwd.length < 5 ? -1 : 0;
-  }
-
-}, {
-  name: 'passwordLength',
-
-  score(passwd) {
-    if (passwd.length < 5) {
-      return 3;
-    }
-
-    if (passwd.length > 4 && passwd.length < 8) {
-      return 6;
-    }
-
-    if (passwd.length > 7 && passwd.length < 16) {
-      return 12;
-    }
-
-    return 18;
-  }
-
-}, {
-  name: 'lettersLowerCase',
-
-  score(passwd) {
-    // [verified] at least one lower case letter
-    return passwd.match(/[a-z]/) ? 1 : -1;
-  }
-
-}, {
-  name: 'lettersUpperCase',
-
-  score(passwd) {
-    // [verified] at least one upper case letter
-    return passwd.match(/[A-Z]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers1',
-
-  score(passwd) {
-    // [verified] at least one number
-    return passwd.match(/\d+/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers3',
-
-  score(passwd) {
-    // [verified] at least three numbers
-    return passwd.match(/(.*[0-9].*[0-9].*[0-9])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar1',
-
-  score(passwd) {
-    // [verified] at least one special character
-    return passwd.match(/[!@#$%^&*?_~]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar2',
-
-  score(passwd) {
-    // [verified] at least two special characters
-    return passwd.match(/(.*[!@#$%^&*?_~].*[!@#$%^&*?_~])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'comboUpperAndLower',
-
-  score(passwd) {
-    // [verified] both upper and lower case
-    return passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersAndNumbers',
-
-  score(passwd) {
-    // [verified] both letters and numbers
-    return passwd.match(/([a-zA-Z])/) && passwd.match(/([0-9])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersNumbersSpecial',
-
-  score(passwd) {
-    // [verified] letters, numbers, and special characters
-    return passwd.match(/([a-zA-Z0-9].*[!@#$%^&*?_~])|([!@#$%^&*?_~].*[a-zA-Z0-9])/) ? 2 : -1;
-  }
-
-}];
-export default passwordScore;