@alfalab/core-components 41.1.0-beta.0 → 41.1.0

package/tabs/modern/{hook-edac5428.d.ts → hook-3e68f8db.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
-type useSelectWithApplyProps = {
+type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
      */
@@ -17,6 +17,10 @@ type useSelectWithApplyProps = {
      * Компонент выпадающего меню
      */
     OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
     /**
      * Показывать кнопку очистки
      */
@@ -27,15 +31,16 @@ type useSelectWithApplyProps = {
     showSelectAll?: boolean;
 };
 declare const SELECT_ALL_KEY = "select_all";
-declare function useSelectWithApply({ options, selected, onChange, OptionsList, showClear, showSelectAll, }: useSelectWithApplyProps): {
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, }: UseSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<unknown>> | undefined;
-    } & import("react").RefAttributes<unknown>>;
+        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps> | undefined;
+        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -51,4 +56,5 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
-export { SELECT_ALL_KEY, useSelectWithApply };
+export * from "./Component-5e1b8383";
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/tabs/modern/index-3e68f8db.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { FormControlProps } from "./Component-e67996e9";
-import { BaseSelectProps, OptionProps, OptionShape } from "./typings-f9462675";
+import { FormControlProps } from "./Component-3ebe4754";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
 type SelectFieldProps = Omit<FormControlProps, "size"> & Record<string, unknown>;
 type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
     /**
@@ -92,7 +92,8 @@ type SkeletonProps = {
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
-export * from "./hook-edac5428";
-export * from "./index-48646db0";
-export * from "./typings-f9462675";
-export * from "./utils-f9462675";
+export * from "./index-ebda875c";
+export * from "./Component-5e1b8383";
+export * from "./hook-3e68f8db";
+export * from "./typings-5e1b8383";
+export * from "./utils-5e1b8383";

package/tabs/modern/index-3ebe4754.d.ts

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

package/tabs/modern/index-ebda875c.d.ts

@@ -1,3 +1,37 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
-export * from "./Component-f9462675";
+import React from "react";
+import { ButtonHTMLAttributes, ElementType, FC } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+export { CloserProps, Closer };
+export * from "./Component-ebda875c";

package/tabs/modern/index.js

@@ -13,10 +13,10 @@ import '../../picker-button/modern/desktop';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-e296336f.js';
+import './index.module-0980df8e.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-d02a2eee.js';
+import './index.module-56412f23.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

package/tabs/modern/index.module-0980df8e.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_nmi4j","fullWidthScroll":"tabs__fullWidthScroll_nmi4j","container":"tabs__container_nmi4j","title":"tabs__title_nmi4j","disabled":"tabs__disabled_nmi4j","focused":"tabs__focused_nmi4j","collapsed":"tabs__collapsed_nmi4j","selected":"tabs__selected_nmi4j","line":"tabs__line_nmi4j","s":"tabs__s_nmi4j","xs":"tabs__xs_nmi4j","xxs":"tabs__xxs_nmi4j","pickerWrapper":"tabs__pickerWrapper_nmi4j","option":"tabs__option_nmi4j","m":"tabs__m_nmi4j","l":"tabs__l_nmi4j","xl":"tabs__xl_nmi4j","rightAddons":"tabs__rightAddons_nmi4j"};
+require('./components/primary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/index.module-56412f23.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_1vmms","fullWidthScroll":"tabs__fullWidthScroll_1vmms","container":"tabs__container_1vmms","title":"tabs__title_1vmms","xxs":"tabs__xxs_1vmms","xs":"tabs__xs_1vmms","s":"tabs__s_1vmms","m":"tabs__m_1vmms","l":"tabs__l_1vmms","xl":"tabs__xl_1vmms"};
+require('./components/secondary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/mobile.js

@@ -13,9 +13,9 @@ import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-e296336f.js';
+import './index.module-0980df8e.js';
 import '../../tag/modern';
-import './index.module-d02a2eee.js';
+import './index.module-56412f23.js';
 import './components/primary-tablist/Component.js';
 import './hooks/use-tablist-titles.js';
 import './hooks/use-collapsible-elements.js';

package/tabs/modern/responsive.js

@@ -14,10 +14,10 @@ import '../../picker-button/modern/desktop';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-e296336f.js';
+import './index.module-0980df8e.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-d02a2eee.js';
+import './index.module-56412f23.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

package/tabs/modern/{typings-f9462675.d.ts → typings-5e1b8383.d.ts}

@@ -200,7 +200,7 @@ type BaseSelectProps = {
     /**
      * Компонент выпадающего меню
      */
-    OptionsList?: FC<OptionsListProps>;
+    OptionsList?: FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
     /**
      * Компонент группы
      */

package/tabs/{cssm/utils-f9462675.d.ts → modern/utils-5e1b8383.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-f9462675";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-5e1b8383";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/tabs/responsive.js

@@ -19,13 +19,13 @@ require('../picker-button/desktop');
 require('./hooks/use-tablist-titles.js');
 require('./synthetic-events.js');
 require('./components/title/Component.js');
-require('./index.module-bb5c409c.js');
+require('./index.module-3542b7eb.js');
 require('./components/primary-tablist/Component.mobile.js');
 require('compute-scroll-into-view');
 require('./components/secondary-tablist/Component.desktop.js');
 require('./components/secondary-tablist/Component.js');
 require('../tag');
-require('./index.module-be7bd8e7.js');
+require('./index.module-8ba53f9c.js');
 require('./components/secondary-tablist/Component.mobile.js');
 require('./components/tabs/Component.js');
 require('@juggle/resize-observer');

package/tabs/{typings-f9462675.d.ts → typings-5e1b8383.d.ts}

@@ -200,7 +200,7 @@ type BaseSelectProps = {
     /**
      * Компонент выпадающего меню
      */
-    OptionsList?: FC<OptionsListProps>;
+    OptionsList?: FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
     /**
      * Компонент группы
      */

package/tabs/{modern/utils-f9462675.d.ts → utils-5e1b8383.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-f9462675";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-5e1b8383";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/tag/Component.js

@@ -12,13 +12,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"component":"tag__component_3x465","outlined":"tag__outlined_3x465","filled":"tag__filled_3x465","checked":"tag__checked_3x465"};
+var defaultColors = {"component":"tag__component_2smcd","outlined":"tag__outlined_2smcd","filled":"tag__filled_2smcd","checked":"tag__checked_2smcd"};
 require('./default.css');
 
-var styles = {"component":"tag__component_vduuf","focused":"tag__focused_vduuf","addons":"tag__addons_vduuf","s":"tag__s_vduuf","m":"tag__m_vduuf","l":"tag__l_vduuf","xl":"tag__xl_vduuf","xxs":"tag__xxs_vduuf","xs":"tag__xs_vduuf","withRightAddons":"tag__withRightAddons_vduuf","withLeftAddons":"tag__withLeftAddons_vduuf","rounded":"tag__rounded_vduuf","rectangular":"tag__rectangular_vduuf"};
+var styles = {"component":"tag__component_122ug","focused":"tag__focused_122ug","addons":"tag__addons_122ug","s":"tag__s_122ug","m":"tag__m_122ug","l":"tag__l_122ug","xl":"tag__xl_122ug","xxs":"tag__xxs_122ug","xs":"tag__xs_122ug","withRightAddons":"tag__withRightAddons_122ug","withLeftAddons":"tag__withLeftAddons_122ug","rounded":"tag__rounded_122ug","rectangular":"tag__rectangular_122ug"};
 require('./index.css');
 
-var invertedColors = {"component":"tag__component_1q0we","outlined":"tag__outlined_1q0we","filled":"tag__filled_1q0we","checked":"tag__checked_1q0we"};
+var invertedColors = {"component":"tag__component_1owek","outlined":"tag__outlined_1owek","filled":"tag__filled_1owek","checked":"tag__checked_1owek"};
 require('./inverted.css');
 
 var colorStylesMap = {

package/tag/cssm/index.module.css

@@ -223,4 +223,3 @@
     .rectangular.xl {
         border-radius: var(--tag-alt-border-radius);
     }
-

package/tag/default.css

@@ -74,41 +74,41 @@
     /* background-color checked */
 
     /* text color */
-} .tag__component_3x465.tag__outlined_3x465 {
+} .tag__component_2smcd.tag__outlined_2smcd {
         color: var(--tag-text-color);
         border-color: var(--tag-border-color);
         background-color: var(--tag-outlined-background-color)
-    } .tag__component_3x465.tag__outlined_3x465:disabled {
+    } .tag__component_2smcd.tag__outlined_2smcd:disabled {
             border-color: var(--tag-border-color-disabled);
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-outlined-background-color-disabled);
-        } .tag__component_3x465.tag__outlined_3x465:hover:not(:disabled) {
+        } .tag__component_2smcd.tag__outlined_2smcd:hover:not(:disabled) {
             border-color: var(--tag-border-color-hover);
             background-color: var(--tag-outlined-background-color-hover);
-        } .tag__component_3x465.tag__outlined_3x465:active:not(:disabled) {
+        } .tag__component_2smcd.tag__outlined_2smcd:active:not(:disabled) {
             border-color: var(--tag-border-color-active);
             background-color: var(--tag-outlined-background-color-active);
-        } .tag__component_3x465.tag__filled_3x465 {
+        } .tag__component_2smcd.tag__filled_2smcd {
         color: var(--tag-text-color);
         border-color: var(--tag-filled-border-color);
         background-color: var(--tag-filled-background-color)
-    } .tag__component_3x465.tag__filled_3x465:disabled {
+    } .tag__component_2smcd.tag__filled_2smcd:disabled {
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-filled-background-color-disabled);
-        } .tag__component_3x465.tag__filled_3x465:hover:not(:disabled) {
+        } .tag__component_2smcd.tag__filled_2smcd:hover:not(:disabled) {
             background-color: var(--tag-filled-background-color-hover);
-        } .tag__component_3x465.tag__filled_3x465:active:not(:disabled) {
+        } .tag__component_2smcd.tag__filled_2smcd:active:not(:disabled) {
             background-color: var(--tag-filled-background-color-active);
-        } .tag__component_3x465.tag__checked_3x465 {
+        } .tag__component_2smcd.tag__checked_2smcd {
         border-color: var(--tag-border-color-checked);
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked)
-    } .tag__component_3x465.tag__checked_3x465:disabled {
+    } .tag__component_2smcd.tag__checked_2smcd:disabled {
             background-color: var(--tag-background-color-checked-disabled);
             border-color: var(--tag-border-color-checked-disabled);
             color: var(--tag-text-color-checked-disabled);
-        } .tag__component_3x465.tag__checked_3x465:hover:not(:disabled) {
+        } .tag__component_2smcd.tag__checked_2smcd:hover:not(:disabled) {
             background-color: var(--tag-background-color-checked-hover);
-        } .tag__component_3x465.tag__checked_3x465:active:not(:disabled) {
+        } .tag__component_2smcd.tag__checked_2smcd:active:not(:disabled) {
             background-color: var(--tag-background-color-checked-active);
         }

package/tag/esm/Component.js

@@ -4,13 +4,13 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 
-var defaultColors = {"component":"tag__component_3x465","outlined":"tag__outlined_3x465","filled":"tag__filled_3x465","checked":"tag__checked_3x465"};
+var defaultColors = {"component":"tag__component_2smcd","outlined":"tag__outlined_2smcd","filled":"tag__filled_2smcd","checked":"tag__checked_2smcd"};
 require('./default.css');
 
-var styles = {"component":"tag__component_vduuf","focused":"tag__focused_vduuf","addons":"tag__addons_vduuf","s":"tag__s_vduuf","m":"tag__m_vduuf","l":"tag__l_vduuf","xl":"tag__xl_vduuf","xxs":"tag__xxs_vduuf","xs":"tag__xs_vduuf","withRightAddons":"tag__withRightAddons_vduuf","withLeftAddons":"tag__withLeftAddons_vduuf","rounded":"tag__rounded_vduuf","rectangular":"tag__rectangular_vduuf"};
+var styles = {"component":"tag__component_122ug","focused":"tag__focused_122ug","addons":"tag__addons_122ug","s":"tag__s_122ug","m":"tag__m_122ug","l":"tag__l_122ug","xl":"tag__xl_122ug","xxs":"tag__xxs_122ug","xs":"tag__xs_122ug","withRightAddons":"tag__withRightAddons_122ug","withLeftAddons":"tag__withLeftAddons_122ug","rounded":"tag__rounded_122ug","rectangular":"tag__rectangular_122ug"};
 require('./index.css');
 
-var invertedColors = {"component":"tag__component_1q0we","outlined":"tag__outlined_1q0we","filled":"tag__filled_1q0we","checked":"tag__checked_1q0we"};
+var invertedColors = {"component":"tag__component_1owek","outlined":"tag__outlined_1owek","filled":"tag__filled_1owek","checked":"tag__checked_1owek"};
 require('./inverted.css');
 
 var colorStylesMap = {

package/tag/esm/default.css

@@ -74,41 +74,41 @@
     /* background-color checked */
 
     /* text color */
-} .tag__component_3x465.tag__outlined_3x465 {
+} .tag__component_2smcd.tag__outlined_2smcd {
         color: var(--tag-text-color);
         border-color: var(--tag-border-color);
         background-color: var(--tag-outlined-background-color)
-    } .tag__component_3x465.tag__outlined_3x465:disabled {
+    } .tag__component_2smcd.tag__outlined_2smcd:disabled {
             border-color: var(--tag-border-color-disabled);
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-outlined-background-color-disabled);
-        } .tag__component_3x465.tag__outlined_3x465:hover:not(:disabled) {
+        } .tag__component_2smcd.tag__outlined_2smcd:hover:not(:disabled) {
             border-color: var(--tag-border-color-hover);
             background-color: var(--tag-outlined-background-color-hover);
-        } .tag__component_3x465.tag__outlined_3x465:active:not(:disabled) {
+        } .tag__component_2smcd.tag__outlined_2smcd:active:not(:disabled) {
             border-color: var(--tag-border-color-active);
             background-color: var(--tag-outlined-background-color-active);
-        } .tag__component_3x465.tag__filled_3x465 {
+        } .tag__component_2smcd.tag__filled_2smcd {
         color: var(--tag-text-color);
         border-color: var(--tag-filled-border-color);
         background-color: var(--tag-filled-background-color)
-    } .tag__component_3x465.tag__filled_3x465:disabled {
+    } .tag__component_2smcd.tag__filled_2smcd:disabled {
             color: var(--tag-text-color-disabled);
             background-color: var(--tag-filled-background-color-disabled);
-        } .tag__component_3x465.tag__filled_3x465:hover:not(:disabled) {
+        } .tag__component_2smcd.tag__filled_2smcd:hover:not(:disabled) {
             background-color: var(--tag-filled-background-color-hover);
-        } .tag__component_3x465.tag__filled_3x465:active:not(:disabled) {
+        } .tag__component_2smcd.tag__filled_2smcd:active:not(:disabled) {
             background-color: var(--tag-filled-background-color-active);
-        } .tag__component_3x465.tag__checked_3x465 {
+        } .tag__component_2smcd.tag__checked_2smcd {
         border-color: var(--tag-border-color-checked);
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked)
-    } .tag__component_3x465.tag__checked_3x465:disabled {
+    } .tag__component_2smcd.tag__checked_2smcd:disabled {
             background-color: var(--tag-background-color-checked-disabled);
             border-color: var(--tag-border-color-checked-disabled);
             color: var(--tag-text-color-checked-disabled);
-        } .tag__component_3x465.tag__checked_3x465:hover:not(:disabled) {
+        } .tag__component_2smcd.tag__checked_2smcd:hover:not(:disabled) {
             background-color: var(--tag-background-color-checked-hover);
-        } .tag__component_3x465.tag__checked_3x465:active:not(:disabled) {
+        } .tag__component_2smcd.tag__checked_2smcd:active:not(:disabled) {
             background-color: var(--tag-background-color-checked-active);
         }

package/tag/esm/index.css

@@ -66,7 +66,7 @@
     /* background-color checked */
 
     /* text color */
-} .tag__component_vduuf {
+} .tag__component_122ug {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -84,144 +84,143 @@
     cursor: pointer;
     outline: none;
     white-space: nowrap
-} .tag__component_vduuf:disabled {
+} .tag__component_122ug:disabled {
         cursor: var(--disabled-cursor);
-    } .tag__focused_vduuf {
+    } .tag__focused_122ug {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tag__addons_vduuf {
+} .tag__addons_122ug {
     display: flex;
     flex-shrink: 0;
     align-items: center
-} .tag__addons_vduuf:first-child {
+} .tag__addons_122ug:first-child {
         margin-right: var(--gap-2xs);
-    } .tag__addons_vduuf:last-child {
+    } .tag__addons_122ug:last-child {
         margin-left: var(--gap-2xs);
-    } .tag__addons_vduuf:only-child {
+    } .tag__addons_122ug:only-child {
         margin: 0;
-    } .tag__s_vduuf .tag__addons_vduuf:first-child, .tag__m_vduuf .tag__addons_vduuf:first-child {
+    } .tag__s_122ug .tag__addons_122ug:first-child, .tag__m_122ug .tag__addons_122ug:first-child {
         margin-right: var(--gap-xs);
-    } .tag__s_vduuf .tag__addons_vduuf:last-child, .tag__m_vduuf .tag__addons_vduuf:last-child {
+    } .tag__s_122ug .tag__addons_122ug:last-child, .tag__m_122ug .tag__addons_122ug:last-child {
         margin-left: var(--gap-xs);
-    } .tag__l_vduuf .tag__addons_vduuf:first-child, .tag__xl_vduuf .tag__addons_vduuf:first-child {
+    } .tag__l_122ug .tag__addons_122ug:first-child, .tag__xl_122ug .tag__addons_122ug:first-child {
         margin-right: var(--gap-s);
-    } .tag__l_vduuf .tag__addons_vduuf:last-child, .tag__xl_vduuf .tag__addons_vduuf:last-child {
+    } .tag__l_122ug .tag__addons_122ug:last-child, .tag__xl_122ug .tag__addons_122ug:last-child {
         margin-left: var(--gap-s);
-    } .tag__xxs_vduuf {
+    } .tag__xxs_122ug {
     min-width: 60px;
     min-height: var(--size-xxs-height);
     padding: 0 var(--gap-m);
     font-size: 14px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xxs_vduuf {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xxs_122ug {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
-    } .tag__xs_vduuf {
+    } .tag__xs_122ug {
     min-width: 72px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-l);
     font-size: 14px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xs_vduuf {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xs_122ug {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
-    } .tag__s_vduuf {
+    } .tag__s_122ug {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
     font-size: 16px;
     line-height: 20px;
     font-weight: normal
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__s_vduuf {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__s_122ug {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
-    } .tag__m_vduuf {
+    } .tag__m_122ug {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
     min-width: 96px;
     min-height: var(--size-m-height);
     padding: 0 28px
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__m_vduuf {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__m_122ug {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
-    } .tag__l_vduuf {
+    } .tag__l_122ug {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
     min-width: 120px;
     min-height: var(--size-l-height);
     padding: 0 var(--gap-2xl)
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__l_vduuf {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__l_122ug {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
-    } .tag__xl_vduuf {
+    } .tag__xl_122ug {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
     min-width: 120px;
     min-height: var(--size-xl-height);
     padding: 0 36px
-} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xl_vduuf {
+} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .tag__xl_122ug {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
-    } .tag__withRightAddons_vduuf.tag__xxs_vduuf {
+    } .tag__withRightAddons_122ug.tag__xxs_122ug {
         padding-right: var(--gap-s);
-    } .tag__withRightAddons_vduuf.tag__xs_vduuf {
+    } .tag__withRightAddons_122ug.tag__xs_122ug {
         padding-right: var(--gap-m);
-    } .tag__withRightAddons_vduuf.tag__s_vduuf {
+    } .tag__withRightAddons_122ug.tag__s_122ug {
         padding-right: var(--gap-l);
-    } .tag__withRightAddons_vduuf.tag__m_vduuf {
+    } .tag__withRightAddons_122ug.tag__m_122ug {
         padding-right: var(--gap-xl);
-    } .tag__withRightAddons_vduuf.tag__l_vduuf {
+    } .tag__withRightAddons_122ug.tag__l_122ug {
         padding-right: 28px;
-    } .tag__withRightAddons_vduuf.tag__xl_vduuf {
+    } .tag__withRightAddons_122ug.tag__xl_122ug {
         padding-right: var(--gap-2xl);
-    } .tag__withLeftAddons_vduuf.tag__xxs_vduuf {
+    } .tag__withLeftAddons_122ug.tag__xxs_122ug {
         padding-left: var(--gap-s);
-    } .tag__withLeftAddons_vduuf.tag__xs_vduuf {
+    } .tag__withLeftAddons_122ug.tag__xs_122ug {
         padding-left: var(--gap-m);
-    } .tag__withLeftAddons_vduuf.tag__s_vduuf {
+    } .tag__withLeftAddons_122ug.tag__s_122ug {
         padding-left: var(--gap-l);
-    } .tag__withLeftAddons_vduuf.tag__m_vduuf {
+    } .tag__withLeftAddons_122ug.tag__m_122ug {
         padding-left: var(--gap-xl);
-    } .tag__withLeftAddons_vduuf.tag__l_vduuf {
+    } .tag__withLeftAddons_122ug.tag__l_122ug {
         padding-left: 28px;
-    } .tag__withLeftAddons_vduuf.tag__xl_vduuf {
+    } .tag__withLeftAddons_122ug.tag__xl_122ug {
         padding-left: var(--gap-2xl);
-    } .tag__rounded_vduuf.tag__xxs_vduuf {
+    } .tag__rounded_122ug.tag__xxs_122ug {
         border-radius: var(--tag-rounded-xxs-border-radius);
-    } .tag__rounded_vduuf.tag__xs_vduuf {
+    } .tag__rounded_122ug.tag__xs_122ug {
         border-radius: var(--tag-rounded-xs-border-radius);
-    } .tag__rounded_vduuf.tag__s_vduuf {
+    } .tag__rounded_122ug.tag__s_122ug {
         border-radius: var(--tag-rounded-s-border-radius);
-    } .tag__rounded_vduuf.tag__m_vduuf,
-    .tag__rounded_vduuf.tag__l_vduuf,
-    .tag__rounded_vduuf.tag__xl_vduuf {
+    } .tag__rounded_122ug.tag__m_122ug,
+    .tag__rounded_122ug.tag__l_122ug,
+    .tag__rounded_122ug.tag__xl_122ug {
         border-radius: var(--tag-border-radius);
-    } .tag__rectangular_vduuf.tag__xxs_vduuf {
+    } .tag__rectangular_122ug.tag__xxs_122ug {
         border-radius: var(--tag-rectangular-xxs-border-radius);
-    } .tag__rectangular_vduuf.tag__xs_vduuf {
+    } .tag__rectangular_122ug.tag__xs_122ug {
         border-radius: var(--tag-rectangular-xs-border-radius);
-    } .tag__rectangular_vduuf.tag__s_vduuf {
+    } .tag__rectangular_122ug.tag__s_122ug {
         border-radius: var(--tag-rectangular-s-border-radius);
-    } .tag__rectangular_vduuf.tag__m_vduuf,
-    .tag__rectangular_vduuf.tag__l_vduuf,
-    .tag__rectangular_vduuf.tag__xl_vduuf {
+    } .tag__rectangular_122ug.tag__m_122ug,
+    .tag__rectangular_122ug.tag__l_122ug,
+    .tag__rectangular_122ug.tag__xl_122ug {
         border-radius: var(--tag-alt-border-radius);
     }
-