@alfalab/core-components 26.0.1 → 26.1.0

package/filter-tag/modern/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent, ReactNode } from "react";
+type FilterTagProps = {
+    /**
+     * Состояние выбора
+     */
+    checked?: boolean;
+    /**
+     * Состояние открытия
+     */
+    open?: boolean;
+    /**
+     * Состояние блокировки
+     */
+    disabled?: boolean;
+    /**
+     * Обработчик клика
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик очистки
+     */
+    onClear?: () => void;
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 'xxs' | 'xs' | 's';
+    /**
+     * Вариант тега
+     */
+    variant?: 'default' | 'alt';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const FilterTag: React.ForwardRefExoticComponent<FilterTagProps & React.RefAttributes<HTMLDivElement>>;
+export { FilterTagProps, FilterTag };

package/filter-tag/modern/Component.js

@@ -0,0 +1,35 @@
+import React, { forwardRef, useRef } from 'react';
+import { useFocus } from '@alfalab/hooks';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
+import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
+import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';
+import cn from 'classnames';
+import { IconButton } from '../../icon-button/modern';
+
+var styles = {"component":"filter-tag__component_1eb36","disabled":"filter-tag__disabled_1eb36","default":"filter-tag__default_1eb36","alt":"filter-tag__alt_1eb36","checked":"filter-tag__checked_1eb36","xxs":"filter-tag__xxs_1eb36","xs":"filter-tag__xs_1eb36","s":"filter-tag__s_1eb36","focused":"filter-tag__focused_1eb36","chevron":"filter-tag__chevron_1eb36","valueButton":"filter-tag__valueButton_1eb36","open":"filter-tag__open_1eb36","clear":"filter-tag__clear_1eb36"};
+require('./index.css');
+
+const FilterTag = forwardRef(({ children, checked, disabled, open, onClick, size = 's', variant = 'default', onClear = () => null, className, dataTestId, ...restProps }, ref) => {
+    const valueRef = useRef(null);
+    const [focused] = useFocus(valueRef, 'keyboard');
+    const handleClear = (event) => {
+        event.stopPropagation();
+        onClear();
+    };
+    return (React.createElement("div", Object.assign({ className: cn(className, [styles.component], styles[variant], styles[size], {
+            [styles.checked]: checked,
+            [styles.disabled]: disabled,
+            [styles.focused]: focused,
+            [styles.open]: open,
+        }), ref: ref, "data-test-id": dataTestId }, restProps),
+        React.createElement("button", { type: 'button', ref: valueRef, disabled: disabled, className: cn(styles.valueButton, styles[size], styles[variant], {
+                [styles.checked]: checked,
+                [styles.open]: open,
+            }), onClick: disabled ? undefined : onClick },
+            React.createElement("span", null, children),
+            React.createElement("span", { className: styles.chevron }, size === 'xxs' ? React.createElement(ChevronDownCompactSIcon, null) : React.createElement(ChevronDownMIcon, null))),
+        checked && !disabled && (React.createElement(IconButton, { className: cn(styles.clear, styles[size], styles[variant]), icon: size === 'xxs' ? CrossCircleSIcon : CrossCircleMIcon, colors: 'inverted', size: 'xxs', onClick: handleClear }))));
+});
+
+export { FilterTag };

package/filter-tag/modern/index.css

@@ -0,0 +1,311 @@
+/* hash: 1sv29 */
+:root {
+    --color-dark-border-underline: #6d7986;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-key: #0b1f35;
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-tertiary: #b6bcc3;
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-bg-primary-inverted-alpha-30: rgba(11, 31, 53, 0.3);
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l: 20px;
+    --gap-xl: 24px;
+}
+:root {
+    --border-radius-s: 4px;
+    --border-radius-pill: 99px;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+    --size-xs-height: 32px;
+    --size-s-height: 48px;
+}
+:root {
+    /* border */
+    --tag-border-color: var(--color-light-border-underline);
+    --tag-border-color-hover: var(--color-light-border-key);
+    --tag-border-color-active: var(--color-light-border-key);
+    --tag-border-color-disabled: var(--color-light-border-primary);
+    --tag-border-width: 1px;
+    --tag-border-radius: var(--border-radius-pill);
+    --tag-alt-border-radius: var(--border-radius-s);
+
+    /* background-color */
+    --tag-background-color: transparent;
+    --tag-background-color-hover: transparent;
+    --tag-background-color-active: var(--color-light-bg-primary-inverted-alpha-7);
+    --tag-background-color-disabled: transparent;
+    --tag-background-color-checked: var(--color-light-bg-primary-inverted);
+    --tag-background-color-checked-hover: var(--color-light-bg-primary-inverted-tint-15);
+    --tag-background-color-checked-active: var(--color-light-bg-primary-inverted-tint-20);
+    --tag-background-color-checked-disabled: var(--color-light-bg-primary-inverted-alpha-30);
+
+    /* text color */
+    --tag-text-color: var(--color-light-text-primary);
+    --tag-text-color-checked: var(--color-light-text-primary-inverted);
+    --tag-text-color-disabled: var(--color-light-text-tertiary);
+    --tag-text-color-checked-disabled: var(--color-light-text-primary-inverted);
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color */
+
+    /* text color */
+}
+:root {
+    --filter-tag-separator-background-color-hover: transparent;
+}
+.filter-tag__component_1eb36 {
+    display: flex;
+    width: max-content;
+    box-sizing: border-box
+}
+.filter-tag__component_1eb36.filter-tag__disabled_1eb36 {
+        background-color: var(--tag-background-color-disabled);
+    }
+.filter-tag__component_1eb36.filter-tag__default_1eb36 {
+        border-radius: var(--tag-border-radius);
+    }
+.filter-tag__component_1eb36.filter-tag__alt_1eb36 {
+        border-radius: var(--tag-alt-border-radius);
+    }
+.filter-tag__component_1eb36.filter-tag__checked_1eb36:not(.filter-tag__component_1eb36.filter-tag__disabled_1eb36) {
+            background-color: var(--tag-background-color-checked);
+        }
+.filter-tag__component_1eb36.filter-tag__checked_1eb36:not(.filter-tag__component_1eb36.filter-tag__disabled_1eb36).filter-tag__xxs_1eb36 {
+            min-width: 84px;
+        }
+.filter-tag__component_1eb36.filter-tag__checked_1eb36:not(.filter-tag__component_1eb36.filter-tag__disabled_1eb36).filter-tag__xs_1eb36 {
+            min-width: 104px;
+        }
+.filter-tag__component_1eb36.filter-tag__checked_1eb36:not(.filter-tag__component_1eb36.filter-tag__disabled_1eb36).filter-tag__s_1eb36 {
+            min-width: 116px;
+        }
+.filter-tag__component_1eb36.filter-tag__checked_1eb36:not(.filter-tag__component_1eb36.filter-tag__disabled_1eb36):hover {
+            background-color: var(--tag-background-color-checked-hover);
+        }
+.filter-tag__component_1eb36.filter-tag__checked_1eb36:not(.filter-tag__component_1eb36.filter-tag__disabled_1eb36):active {
+            background-color: var(--tag-background-color-checked-active);
+        }
+.filter-tag__focused_1eb36 {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}
+.filter-tag__chevron_1eb36 {
+    position: relative;
+    transition: transform 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.filter-tag__valueButton_1eb36 {
+    display: flex;
+    align-items: center;
+    box-shadow: none;
+    -webkit-user-select: none;
+            user-select: none;
+    cursor: pointer;
+    outline: none;
+    white-space: nowrap;
+    color: var(--tag-text-color);
+    background-color: var(--tag-background-color);
+    border-width: var(--tag-border-width);
+    border-color: var(--tag-border-color);
+    border-style: solid;
+    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease
+}
+.filter-tag__valueButton_1eb36.filter-tag__default_1eb36 {
+        border-radius: var(--tag-border-radius);
+    }
+.filter-tag__valueButton_1eb36.filter-tag__alt_1eb36 {
+        border-radius: var(--tag-alt-border-radius);
+    }
+.filter-tag__valueButton_1eb36.filter-tag__xxs_1eb36 {
+        min-width: 60px;
+        min-height: var(--size-xs-height)
+    }
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.filter-tag__valueButton_1eb36.filter-tag__xxs_1eb36 {
+            /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+            Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+            height: 32px
+    }
+        }
+.filter-tag__valueButton_1eb36.filter-tag__xs_1eb36 {
+        min-width: 72px;
+        min-height: 40px
+    }
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.filter-tag__valueButton_1eb36.filter-tag__xs_1eb36 {
+            /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+            Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+            height: 40px
+    }
+        }
+.filter-tag__valueButton_1eb36.filter-tag__s_1eb36 {
+        min-width: 80px;
+        min-height: var(--size-s-height)
+    }
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+.filter-tag__valueButton_1eb36.filter-tag__s_1eb36 {
+            /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+            Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+            height: 48px
+    }
+        }
+.filter-tag__valueButton_1eb36:not(.filter-tag__valueButton_1eb36:disabled):hover {
+        background-color: var(--tag-background-color-hover);
+        border-color: var(--tag-border-color-hover);
+    }
+.filter-tag__valueButton_1eb36:not(.filter-tag__valueButton_1eb36:disabled):active {
+        background-color: var(--tag-background-color-active);
+        border-color: var(--tag-border-color-active);
+    }
+.filter-tag__valueButton_1eb36:disabled {
+        cursor: not-allowed;
+        background-color: var(--tag-background-color-disabled);
+        border-color: var(--tag-border-color-disabled);
+        color: var(--tag-text-color-disabled);
+    }
+.filter-tag__valueButton_1eb36.filter-tag__s_1eb36 {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+        padding-right: var(--gap-s);
+        padding-left: var(--gap-xl)
+    }
+.filter-tag__valueButton_1eb36.filter-tag__s_1eb36 .filter-tag__chevron_1eb36 {
+            margin: 0 var(--gap-xs);
+        }
+.filter-tag__valueButton_1eb36.filter-tag__xs_1eb36 {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 400;
+        padding-right: var(--gap-xs);
+        padding-left: var(--gap-l)
+    }
+.filter-tag__valueButton_1eb36.filter-tag__xs_1eb36 .filter-tag__chevron_1eb36 {
+            margin: 0 var(--gap-xs) 0 var(--gap-2xs);
+        }
+.filter-tag__valueButton_1eb36.filter-tag__xxs_1eb36 {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 400;
+        padding-right: var(--gap-2xs);
+        padding-left: var(--gap-m)
+    }
+.filter-tag__valueButton_1eb36.filter-tag__xxs_1eb36 .filter-tag__chevron_1eb36 {
+            margin: 0 var(--gap-xs) 0 var(--gap-2xs);
+        }
+.filter-tag__valueButton_1eb36.filter-tag__open_1eb36 .filter-tag__chevron_1eb36 {
+        transform: rotateZ(180deg);
+    }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36 {
+        background-color: var(--tag-background-color-checked);
+        border-width: 0;
+        color: var(--tag-text-color-checked)
+    }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36.filter-tag__default_1eb36 {
+            border-radius: var(--tag-border-radius) 0 0 var(--tag-border-radius)
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36.filter-tag__default_1eb36:disabled {
+                border-radius: var(--tag-border-radius);
+            }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36.filter-tag__alt_1eb36 {
+            border-radius: var(--tag-alt-border-radius) 0 0 var(--tag-alt-border-radius)
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36.filter-tag__alt_1eb36:disabled {
+                border-radius: var(--tag-alt-border-radius);
+            }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36:not(.filter-tag__valueButton_1eb36:disabled) {
+            padding-right: 0;
+            border-right-width: 0;
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36:not(.filter-tag__valueButton_1eb36:disabled):hover {
+            background-color: var(--tag-background-color-checked-hover);
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36:not(.filter-tag__valueButton_1eb36:disabled):active {
+            background-color: var(--tag-background-color-checked-active);
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36:not(.filter-tag__valueButton_1eb36:disabled):hover + .filter-tag__clear_1eb36:before {
+            background-color: var(--filter-tag-separator-background-color-hover);
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36:not(.filter-tag__valueButton_1eb36:disabled):active + .filter-tag__clear_1eb36:before {
+            background-color: transparent;
+        }
+.filter-tag__valueButton_1eb36.filter-tag__checked_1eb36:disabled {
+            background-color: var(--tag-background-color-checked-disabled);
+            color: var(--tag-text-color-checked-disabled);
+        }
+.filter-tag__clear_1eb36 {
+    position: relative;
+    background-color: var(--tag-background-color-checked)
+}
+.filter-tag__clear_1eb36.filter-tag__default_1eb36 {
+        border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+    }
+.filter-tag__clear_1eb36.filter-tag__alt_1eb36 {
+        border-radius: 0 var(--tag-alt-border-radius) var(--tag-alt-border-radius) 0;
+    }
+.filter-tag__clear_1eb36:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        display: block;
+        background-color: var(--color-dark-border-underline);
+        width: 1px;
+        transition: background-color 0.2s ease;
+    }
+.filter-tag__clear_1eb36:hover:before {
+        background-color: var(--filter-tag-separator-background-color-hover);
+    }
+.filter-tag__clear_1eb36:active:before {
+        background-color: transparent;
+    }
+.filter-tag__clear_1eb36:hover {
+        background-color: var(--tag-background-color-checked-hover);
+    }
+.filter-tag__clear_1eb36:active {
+        background-color: var(--tag-background-color-checked-active);
+    }
+.filter-tag__clear_1eb36.filter-tag__s_1eb36 {
+        padding: 0 var(--gap-s) 0 var(--gap-xs)
+    }
+.filter-tag__clear_1eb36.filter-tag__s_1eb36:before {
+            height: 24px;
+        }
+.filter-tag__clear_1eb36.filter-tag__xs_1eb36 {
+        padding: 0 var(--gap-xs)
+    }
+.filter-tag__clear_1eb36.filter-tag__xs_1eb36:before {
+            height: 24px;
+        }
+.filter-tag__clear_1eb36.filter-tag__xxs_1eb36 {
+        padding: 0 3px 0 var(--gap-2xs)
+    }
+.filter-tag__clear_1eb36.filter-tag__xxs_1eb36:before {
+            height: 20px;
+        }

package/filter-tag/modern/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/filter-tag/modern/index.js

@@ -0,0 +1,9 @@
+import 'react';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '@alfalab/icons-glyph/CrossCircleSIcon';
+import 'classnames';
+import '../../icon-button/modern';
+export { FilterTag } from './Component.js';

package/filter-tag/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/filter-tag/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/form-control/Component.js

@@ -47,13 +47,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"form-control__component_1g9up","inner":"form-control__inner_1g9up","inputWrapper":"form-control__inputWrapper_1g9up","input":"form-control__input_1g9up","label":"form-control__label_1g9up","labelInner":"form-control__labelInner_1g9up","addons":"form-control__addons_1g9up","leftAddons":"form-control__leftAddons_1g9up","rightAddons":"form-control__rightAddons_1g9up","sub":"form-control__sub_1g9up","block":"form-control__block_1g9up","s":"form-control__s_1g9up","hasLabel":"form-control__hasLabel_1g9up","m":"form-control__m_1g9up","l":"form-control__l_1g9up","xl":"form-control__xl_1g9up","hasLeftAddons":"form-control__hasLeftAddons_1g9up","hasRightAddons":"form-control__hasRightAddons_1g9up","disabled":"form-control__disabled_1g9up","focused":"form-control__focused_1g9up","hasError":"form-control__hasError_1g9up","filled":"form-control__filled_1g9up","hiddenLabel":"form-control__hiddenLabel_1g9up"};
+var styles = {"component":"form-control__component_13bt5","inner":"form-control__inner_13bt5","inputWrapper":"form-control__inputWrapper_13bt5","input":"form-control__input_13bt5","label":"form-control__label_13bt5","labelInner":"form-control__labelInner_13bt5","addons":"form-control__addons_13bt5","leftAddons":"form-control__leftAddons_13bt5","rightAddons":"form-control__rightAddons_13bt5","sub":"form-control__sub_13bt5","block":"form-control__block_13bt5","s":"form-control__s_13bt5","hasLabel":"form-control__hasLabel_13bt5","m":"form-control__m_13bt5","l":"form-control__l_13bt5","xl":"form-control__xl_13bt5","hasLeftAddons":"form-control__hasLeftAddons_13bt5","hasRightAddons":"form-control__hasRightAddons_13bt5","disabled":"form-control__disabled_13bt5","focused":"form-control__focused_13bt5","hasError":"form-control__hasError_13bt5","filled":"form-control__filled_13bt5","hiddenLabel":"form-control__hiddenLabel_13bt5"};
 require('./index.css');
 
-var defaultColors = {"component":"form-control__component_1v3us","inner":"form-control__inner_1v3us","label":"form-control__label_1v3us","hint":"form-control__hint_1v3us","disabled":"form-control__disabled_1v3us","focused":"form-control__focused_1v3us","hasError":"form-control__hasError_1v3us","error":"form-control__error_1v3us"};
+var defaultColors = {"component":"form-control__component_lkavq","inner":"form-control__inner_lkavq","label":"form-control__label_lkavq","hint":"form-control__hint_lkavq","disabled":"form-control__disabled_lkavq","focused":"form-control__focused_lkavq","hasError":"form-control__hasError_lkavq","error":"form-control__error_lkavq"};
 require('./default.css');
 
-var invertedColors = {"component":"form-control__component_zpvg2","inner":"form-control__inner_zpvg2","label":"form-control__label_zpvg2","hint":"form-control__hint_zpvg2","disabled":"form-control__disabled_zpvg2","focused":"form-control__focused_zpvg2","hasError":"form-control__hasError_zpvg2","error":"form-control__error_zpvg2"};
+var invertedColors = {"component":"form-control__component_1p7fl","inner":"form-control__inner_1p7fl","label":"form-control__label_1p7fl","hint":"form-control__hint_1p7fl","disabled":"form-control__disabled_1p7fl","focused":"form-control__focused_1p7fl","hasError":"form-control__hasError_1p7fl","error":"form-control__error_1p7fl"};
 require('./inverted.css');
 
 var colorStyles = {

package/form-control/default.css

@@ -42,51 +42,51 @@
     --form-control-error-shadow: none;
     --form-control-error-border-bottom: 1px solid var(--color-static-border-accent);
 }
-.form-control__component_1v3us {
+.form-control__component_lkavq {
     color: var(--form-control-color);
 }
-.form-control__inner_1v3us {
+.form-control__inner_lkavq {
     background-color: var(--form-control-bg-color);
 }
 /* Нижняя граница */
-.form-control__inner_1v3us:before {
+.form-control__inner_lkavq:before {
     border-bottom: var(--form-control-border-bottom);
 }
-.form-control__label_1v3us {
+.form-control__label_lkavq {
     color: var(--form-control-label-color);
 }
-.form-control__hint_1v3us {
+.form-control__hint_lkavq {
     color: var(--form-control-hint-color);
 }
 /* DISABLED STATE */
-.form-control__disabled_1v3us {
+.form-control__disabled_lkavq {
     background-color: var(--form-control-disabled-bg-color);
     color: var(--form-control-disabled-color);
 }
-.form-control__disabled_1v3us:before {
+.form-control__disabled_lkavq:before {
     border-bottom: var(--form-control-disabled-border-bottom);
 }
 /* FOCUS STATE */
-.form-control__focused_1v3us:not(.form-control__disabled_1v3us):not(.form-control__hasError_1v3us):before {
+.form-control__focused_lkavq:not(.form-control__disabled_lkavq):not(.form-control__hasError_lkavq):before {
     border-bottom: var(--form-control-focus-border-bottom);
 }
-.form-control__focused_1v3us.form-control__inner_1v3us {
+.form-control__focused_lkavq.form-control__inner_lkavq {
     background-color: var(--form-control-focus-bg-color);
 }
 /* HOVER STATE */
-.form-control__inner_1v3us:not(.form-control__disabled_1v3us):hover {
+.form-control__inner_lkavq:not(.form-control__disabled_lkavq):hover {
     background-color: var(--form-control-hover-bg-color);
 }
 /* ERROR STATE */
-.form-control__error_1v3us {
+.form-control__error_lkavq {
     color: var(--form-control-error-color);
 }
-.form-control__hasError_1v3us .form-control__label_1v3us {
+.form-control__hasError_lkavq .form-control__label_lkavq {
     color: var(--form-control-error-label-color);
 }
-.form-control__hasError_1v3us {
+.form-control__hasError_lkavq {
     box-shadow: var(--form-control-error-shadow);
 }
-.form-control__hasError_1v3us:before {
+.form-control__hasError_lkavq:before {
     border-bottom: var(--form-control-error-border-bottom);
 }

package/form-control/esm/Component.js

@@ -40,13 +40,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"form-control__component_1g9up","inner":"form-control__inner_1g9up","inputWrapper":"form-control__inputWrapper_1g9up","input":"form-control__input_1g9up","label":"form-control__label_1g9up","labelInner":"form-control__labelInner_1g9up","addons":"form-control__addons_1g9up","leftAddons":"form-control__leftAddons_1g9up","rightAddons":"form-control__rightAddons_1g9up","sub":"form-control__sub_1g9up","block":"form-control__block_1g9up","s":"form-control__s_1g9up","hasLabel":"form-control__hasLabel_1g9up","m":"form-control__m_1g9up","l":"form-control__l_1g9up","xl":"form-control__xl_1g9up","hasLeftAddons":"form-control__hasLeftAddons_1g9up","hasRightAddons":"form-control__hasRightAddons_1g9up","disabled":"form-control__disabled_1g9up","focused":"form-control__focused_1g9up","hasError":"form-control__hasError_1g9up","filled":"form-control__filled_1g9up","hiddenLabel":"form-control__hiddenLabel_1g9up"};
+var styles = {"component":"form-control__component_13bt5","inner":"form-control__inner_13bt5","inputWrapper":"form-control__inputWrapper_13bt5","input":"form-control__input_13bt5","label":"form-control__label_13bt5","labelInner":"form-control__labelInner_13bt5","addons":"form-control__addons_13bt5","leftAddons":"form-control__leftAddons_13bt5","rightAddons":"form-control__rightAddons_13bt5","sub":"form-control__sub_13bt5","block":"form-control__block_13bt5","s":"form-control__s_13bt5","hasLabel":"form-control__hasLabel_13bt5","m":"form-control__m_13bt5","l":"form-control__l_13bt5","xl":"form-control__xl_13bt5","hasLeftAddons":"form-control__hasLeftAddons_13bt5","hasRightAddons":"form-control__hasRightAddons_13bt5","disabled":"form-control__disabled_13bt5","focused":"form-control__focused_13bt5","hasError":"form-control__hasError_13bt5","filled":"form-control__filled_13bt5","hiddenLabel":"form-control__hiddenLabel_13bt5"};
 require('./index.css');
 
-var defaultColors = {"component":"form-control__component_1v3us","inner":"form-control__inner_1v3us","label":"form-control__label_1v3us","hint":"form-control__hint_1v3us","disabled":"form-control__disabled_1v3us","focused":"form-control__focused_1v3us","hasError":"form-control__hasError_1v3us","error":"form-control__error_1v3us"};
+var defaultColors = {"component":"form-control__component_lkavq","inner":"form-control__inner_lkavq","label":"form-control__label_lkavq","hint":"form-control__hint_lkavq","disabled":"form-control__disabled_lkavq","focused":"form-control__focused_lkavq","hasError":"form-control__hasError_lkavq","error":"form-control__error_lkavq"};
 require('./default.css');
 
-var invertedColors = {"component":"form-control__component_zpvg2","inner":"form-control__inner_zpvg2","label":"form-control__label_zpvg2","hint":"form-control__hint_zpvg2","disabled":"form-control__disabled_zpvg2","focused":"form-control__focused_zpvg2","hasError":"form-control__hasError_zpvg2","error":"form-control__error_zpvg2"};
+var invertedColors = {"component":"form-control__component_1p7fl","inner":"form-control__inner_1p7fl","label":"form-control__label_1p7fl","hint":"form-control__hint_1p7fl","disabled":"form-control__disabled_1p7fl","focused":"form-control__focused_1p7fl","hasError":"form-control__hasError_1p7fl","error":"form-control__error_1p7fl"};
 require('./inverted.css');
 
 var colorStyles = {