@alfalab/core-components 44.5.1-beta.4 → 44.6.0

package/sortable-list/utils.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var coreComponentsShared = require('../shared');
 
 var restrictToParentElement = function (_a) {
     var containerNodeRect = _a.containerNodeRect, draggingNodeRect = _a.draggingNodeRect, transform = _a.transform;
@@ -29,7 +30,14 @@ var restrictToVerticalAxis = function (_a) {
     var transform = _a.transform;
     return (tslib.__assign(tslib.__assign({}, transform), { x: 0 }));
 };
+function getSortableListTestIds(dataTestId, index) {
+    return {
+        sortableList: coreComponentsShared.getDataTestId(dataTestId, 'container'),
+        item: coreComponentsShared.getDataTestId(dataTestId, "item_".concat(index)),
+    };
+}
 
+exports.getSortableListTestIds = getSortableListTestIds;
 exports.restrictToBoundingRect = restrictToBoundingRect;
 exports.restrictToParentElement = restrictToParentElement;
 exports.restrictToVerticalAxis = restrictToVerticalAxis;

package/system-message/cssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getSystemMessageTestIds } from "../utils";

package/system-message/cssm/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getSystemMessageTestIds = utils.getSystemMessageTestIds;

package/system-message/cssm/utils.d.ts

@@ -28,4 +28,12 @@ declare function createCompound<T>(functionComponent: T): T & {
         padding?: import("./index-72dda473").PaddingType | undefined;
     }>;
 };
-export { createCompound };
+declare function getSystemMessageTestIds(dataTestId: string): {
+    systemMessage: string;
+    caption: string;
+    controls: string;
+    graphic: string;
+    subtitle: string;
+    title: string;
+};
+export { createCompound, getSystemMessageTestIds };

package/system-message/cssm/utils.js

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var coreComponentsShared = require('../../shared/cssm');
 var components_caption_Component = require('./components/caption/Component.js');
 var components_controls_Component = require('./components/controls/Component.js');
 var components_graphic_Component = require('./components/graphic/Component.js');
@@ -15,5 +16,16 @@ function createCompound(functionComponent) {
         Controls: components_controls_Component.Controls,
     });
 }
+function getSystemMessageTestIds(dataTestId) {
+    return {
+        systemMessage: dataTestId,
+        caption: coreComponentsShared.getDataTestId(dataTestId, 'caption'),
+        controls: coreComponentsShared.getDataTestId(dataTestId, 'controls'),
+        graphic: coreComponentsShared.getDataTestId(dataTestId, 'graphic'),
+        subtitle: coreComponentsShared.getDataTestId(dataTestId, 'subtitle'),
+        title: coreComponentsShared.getDataTestId(dataTestId, 'title'),
+    };
+}
 
 exports.createCompound = createCompound;
+exports.getSystemMessageTestIds = getSystemMessageTestIds;

package/system-message/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getSystemMessageTestIds } from "../utils";

package/system-message/esm/shared/index.js

@@ -0,0 +1,10 @@
+export { getSystemMessageTestIds } from '../utils.js';
+import '../../../shared/esm';
+import '../components/caption/Component.js';
+import 'react';
+import 'classnames';
+import '../Context.js';
+import '../components/controls/Component.js';
+import '../components/graphic/Component.js';
+import '../components/subtitle/Component.js';
+import '../components/title/Component.js';

package/system-message/esm/utils.d.ts

@@ -28,4 +28,12 @@ declare function createCompound<T>(functionComponent: T): T & {
         padding?: import("./index-72dda473").PaddingType | undefined;
     }>;
 };
-export { createCompound };
+declare function getSystemMessageTestIds(dataTestId: string): {
+    systemMessage: string;
+    caption: string;
+    controls: string;
+    graphic: string;
+    subtitle: string;
+    title: string;
+};
+export { createCompound, getSystemMessageTestIds };

package/system-message/esm/utils.js

@@ -1,3 +1,4 @@
+import { getDataTestId } from '../../shared/esm';
 import { Caption } from './components/caption/Component.js';
 import { Controls } from './components/controls/Component.js';
 import { Graphic } from './components/graphic/Component.js';
@@ -5,7 +6,6 @@ import { Subtitle } from './components/subtitle/Component.js';
 import { Title } from './components/title/Component.js';
 import 'react';
 import 'classnames';
-import '../../shared/esm';
 import './Context.js';
 
 function createCompound(functionComponent) {
@@ -17,5 +17,15 @@ function createCompound(functionComponent) {
         Controls: Controls,
     });
 }
+function getSystemMessageTestIds(dataTestId) {
+    return {
+        systemMessage: dataTestId,
+        caption: getDataTestId(dataTestId, 'caption'),
+        controls: getDataTestId(dataTestId, 'controls'),
+        graphic: getDataTestId(dataTestId, 'graphic'),
+        subtitle: getDataTestId(dataTestId, 'subtitle'),
+        title: getDataTestId(dataTestId, 'title'),
+    };
+}
 
-export { createCompound };
+export { createCompound, getSystemMessageTestIds };

package/system-message/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getSystemMessageTestIds } from "../utils";

package/system-message/modern/shared/index.js

@@ -0,0 +1,10 @@
+export { getSystemMessageTestIds } from '../utils.js';
+import '../../../shared/modern';
+import '../components/caption/Component.js';
+import 'react';
+import 'classnames';
+import '../Context.js';
+import '../components/controls/Component.js';
+import '../components/graphic/Component.js';
+import '../components/subtitle/Component.js';
+import '../components/title/Component.js';

package/system-message/modern/utils.d.ts

@@ -28,4 +28,12 @@ declare function createCompound<T>(functionComponent: T): T & {
         padding?: import("./index-72dda473").PaddingType | undefined;
     }>;
 };
-export { createCompound };
+declare function getSystemMessageTestIds(dataTestId: string): {
+    systemMessage: string;
+    caption: string;
+    controls: string;
+    graphic: string;
+    subtitle: string;
+    title: string;
+};
+export { createCompound, getSystemMessageTestIds };

package/system-message/modern/utils.js

@@ -1,3 +1,4 @@
+import { getDataTestId } from '../../shared/modern';
 import { Caption } from './components/caption/Component.js';
 import { Controls } from './components/controls/Component.js';
 import { Graphic } from './components/graphic/Component.js';
@@ -5,7 +6,6 @@ import { Subtitle } from './components/subtitle/Component.js';
 import { Title } from './components/title/Component.js';
 import 'react';
 import 'classnames';
-import '../../shared/modern';
 import './Context.js';
 
 function createCompound(functionComponent) {
@@ -17,5 +17,15 @@ function createCompound(functionComponent) {
         Controls,
     });
 }
+function getSystemMessageTestIds(dataTestId) {
+    return {
+        systemMessage: dataTestId,
+        caption: getDataTestId(dataTestId, 'caption'),
+        controls: getDataTestId(dataTestId, 'controls'),
+        graphic: getDataTestId(dataTestId, 'graphic'),
+        subtitle: getDataTestId(dataTestId, 'subtitle'),
+        title: getDataTestId(dataTestId, 'title'),
+    };
+}
 
-export { createCompound };
+export { createCompound, getSystemMessageTestIds };

package/system-message/shared/index.d.ts

@@ -0,0 +1 @@
+export { getSystemMessageTestIds } from "../utils";

package/system-message/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getSystemMessageTestIds = utils.getSystemMessageTestIds;

package/system-message/shared/package.json

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

package/system-message/utils.d.ts

@@ -28,4 +28,12 @@ declare function createCompound<T>(functionComponent: T): T & {
         padding?: import("./index-72dda473").PaddingType | undefined;
     }>;
 };
-export { createCompound };
+declare function getSystemMessageTestIds(dataTestId: string): {
+    systemMessage: string;
+    caption: string;
+    controls: string;
+    graphic: string;
+    subtitle: string;
+    title: string;
+};
+export { createCompound, getSystemMessageTestIds };

package/system-message/utils.js

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var coreComponentsShared = require('../shared');
 var components_caption_Component = require('./components/caption/Component.js');
 var components_controls_Component = require('./components/controls/Component.js');
 var components_graphic_Component = require('./components/graphic/Component.js');
@@ -15,5 +16,16 @@ function createCompound(functionComponent) {
         Controls: components_controls_Component.Controls,
     });
 }
+function getSystemMessageTestIds(dataTestId) {
+    return {
+        systemMessage: dataTestId,
+        caption: coreComponentsShared.getDataTestId(dataTestId, 'caption'),
+        controls: coreComponentsShared.getDataTestId(dataTestId, 'controls'),
+        graphic: coreComponentsShared.getDataTestId(dataTestId, 'graphic'),
+        subtitle: coreComponentsShared.getDataTestId(dataTestId, 'subtitle'),
+        title: coreComponentsShared.getDataTestId(dataTestId, 'title'),
+    };
+}
 
 exports.createCompound = createCompound;
+exports.getSystemMessageTestIds = getSystemMessageTestIds;

package/tab-bar/cssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getTabBarTestIds } from "../utils";

package/tab-bar/cssm/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getTabBarTestIds = utils.getTabBarTestIds;

package/tab-bar/cssm/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTabBarTestIds(dataTestId: string): {
+    tabBar: string;
+    tab: string;
+};
+export { getTabBarTestIds };

package/tab-bar/cssm/utils.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: coreComponentsShared.getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+exports.getTabBarTestIds = getTabBarTestIds;

package/tab-bar/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getTabBarTestIds } from "../utils";

package/tab-bar/esm/shared/index.js

@@ -0,0 +1,2 @@
+export { getTabBarTestIds } from '../utils.js';
+import '../../../shared/esm';

package/tab-bar/esm/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTabBarTestIds(dataTestId: string): {
+    tabBar: string;
+    tab: string;
+};
+export { getTabBarTestIds };

package/tab-bar/esm/utils.js

@@ -0,0 +1,10 @@
+import { getDataTestId } from '../../shared/esm';
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+export { getTabBarTestIds };

package/tab-bar/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getTabBarTestIds } from "../utils";

package/tab-bar/modern/shared/index.js

@@ -0,0 +1,2 @@
+export { getTabBarTestIds } from '../utils.js';
+import '../../../shared/modern';

package/tab-bar/modern/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTabBarTestIds(dataTestId: string): {
+    tabBar: string;
+    tab: string;
+};
+export { getTabBarTestIds };

package/tab-bar/modern/utils.js

@@ -0,0 +1,10 @@
+import { getDataTestId } from '../../shared/modern';
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+export { getTabBarTestIds };

package/tab-bar/shared/index.d.ts

@@ -0,0 +1 @@
+export { getTabBarTestIds } from "../utils";

package/tab-bar/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getTabBarTestIds = utils.getTabBarTestIds;

package/tab-bar/shared/package.json

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

package/tab-bar/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTabBarTestIds(dataTestId: string): {
+    tabBar: string;
+    tab: string;
+};
+export { getTabBarTestIds };

package/tab-bar/utils.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../shared');
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: coreComponentsShared.getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+exports.getTabBarTestIds = getTabBarTestIds;

package/tag/components/base-tag/Component.d.ts

@@ -68,6 +68,11 @@ type BaseTagProps = Omit<NativeProps, 'onClick'> & {
      * Стиль тега
      */
     view?: 'outlined' | 'filled';
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Основные стили компонента.
      */
@@ -137,6 +142,11 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Стиль тега
      */
     view?: "outlined" | "filled" | undefined;
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean | undefined;
     /**
      * Основные стили компонента.
      */

package/tag/components/base-tag/Component.js

@@ -15,7 +15,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var defaultColors = {"component":"tag__component_1444d","outlined":"tag__outlined_1444d","filled":"tag__filled_1444d","checked":"tag__checked_1444d"};
 require('./default.css');
 
-var commonStyles = {"component":"tag__component_1xa0b","focused":"tag__focused_1xa0b","addons":"tag__addons_1xa0b","s":"tag__s_1xa0b","m":"tag__m_1xa0b","l":"tag__l_1xa0b","xl":"tag__xl_1xa0b","xxs":"tag__xxs_1xa0b","xs":"tag__xs_1xa0b","withRightAddons":"tag__withRightAddons_1xa0b","withLeftAddons":"tag__withLeftAddons_1xa0b","rounded":"tag__rounded_1xa0b"};
+var commonStyles = {"component":"tag__component_1xa0b","focused":"tag__focused_1xa0b","addons":"tag__addons_1xa0b","s":"tag__s_1xa0b","m":"tag__m_1xa0b","l":"tag__l_1xa0b","xl":"tag__xl_1xa0b","xxs":"tag__xxs_1xa0b","xs":"tag__xs_1xa0b","withRightAddons":"tag__withRightAddons_1xa0b","withLeftAddons":"tag__withLeftAddons_1xa0b","rounded":"tag__rounded_1xa0b","allowBackdropBlur":"tag__allowBackdropBlur_1xa0b","outlined":"tag__outlined_1xa0b","checked":"tag__checked_1xa0b","filled":"tag__filled_1xa0b"};
 require('./index.css');
 
 var invertedColors = {"component":"tag__component_1u7ir","outlined":"tag__outlined_1u7ir","filled":"tag__filled_1u7ir","checked":"tag__checked_1u7ir"};
@@ -27,7 +27,7 @@ var colorCommonStyles = {
 };
 var BaseTag = React.forwardRef(function (_a, ref) {
     var _b;
-    var rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = tslib.__rest(_a, ["rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = tslib.__rest(_a, ["allowBackdropBlur", "rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
     var colorStyles = colorStylesMap[colors];
     var tagRef = React.useRef(null);
     var focused = hooks.useFocus(tagRef, 'keyboard')[0];
@@ -35,6 +35,7 @@ var BaseTag = React.forwardRef(function (_a, ref) {
     var shapeClassName = shape || variantClassName;
     var tagProps = {
         className: cn__default.default(commonStyles.component, colorCommonStyles[colors].component, colorStyles.component, commonStyles[size], styles[size], colorCommonStyles[colors][view], commonStyles[view], (_b = {},
+            _b[commonStyles.allowBackdropBlur] = allowBackdropBlur,
             _b[commonStyles.checked] = checked,
             _b[commonStyles[shapeClassName]] = Boolean(commonStyles[shapeClassName]),
             _b[styles[shapeClassName]] = Boolean(styles[shapeClassName]),

package/tag/components/base-tag/index.css

@@ -180,4 +180,8 @@
     .tag__rounded_1xa0b.tag__l_1xa0b,
     .tag__rounded_1xa0b.tag__xl_1xa0b {
         border-radius: var(--tag-border-radius);
+    } .tag__allowBackdropBlur_1xa0b.tag__outlined_1xa0b.tag__checked_1xa0b[disabled],
+    .tag__allowBackdropBlur_1xa0b.tag__filled_1xa0b {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
     }

package/tag/cssm/components/base-tag/Component.d.ts

@@ -68,6 +68,11 @@ type BaseTagProps = Omit<NativeProps, 'onClick'> & {
      * Стиль тега
      */
     view?: 'outlined' | 'filled';
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Основные стили компонента.
      */
@@ -137,6 +142,11 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Стиль тега
      */
     view?: "outlined" | "filled" | undefined;
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean | undefined;
     /**
      * Основные стили компонента.
      */

package/tag/cssm/components/base-tag/Component.js

@@ -24,7 +24,7 @@ var colorCommonStyles = {
 };
 var BaseTag = React.forwardRef(function (_a, ref) {
     var _b;
-    var rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = tslib.__rest(_a, ["rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = tslib.__rest(_a, ["allowBackdropBlur", "rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
     var colorStyles = colorStylesMap[colors];
     var tagRef = React.useRef(null);
     var focused = hooks.useFocus(tagRef, 'keyboard')[0];
@@ -32,6 +32,7 @@ var BaseTag = React.forwardRef(function (_a, ref) {
     var shapeClassName = shape || variantClassName;
     var tagProps = {
         className: cn__default.default(commonStyles__default.default.component, colorCommonStyles[colors].component, colorStyles.component, commonStyles__default.default[size], styles[size], colorCommonStyles[colors][view], commonStyles__default.default[view], (_b = {},
+            _b[commonStyles__default.default.allowBackdropBlur] = allowBackdropBlur,
             _b[commonStyles__default.default.checked] = checked,
             _b[commonStyles__default.default[shapeClassName]] = Boolean(commonStyles__default.default[shapeClassName]),
             _b[styles[shapeClassName]] = Boolean(styles[shapeClassName]),

package/tag/cssm/components/base-tag/index.module.css

@@ -179,4 +179,8 @@
     .rounded.l,
     .rounded.xl {
         border-radius: var(--tag-border-radius);
+    } .allowBackdropBlur.outlined.checked[disabled],
+    .allowBackdropBlur.filled {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
     }

package/tag/esm/components/base-tag/Component.d.ts

@@ -68,6 +68,11 @@ type BaseTagProps = Omit<NativeProps, 'onClick'> & {
      * Стиль тега
      */
     view?: 'outlined' | 'filled';
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Основные стили компонента.
      */
@@ -137,6 +142,11 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Стиль тега
      */
     view?: "outlined" | "filled" | undefined;
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean | undefined;
     /**
      * Основные стили компонента.
      */

package/tag/esm/components/base-tag/Component.js

@@ -7,7 +7,7 @@ import { useFocus } from '@alfalab/hooks';
 var defaultColors = {"component":"tag__component_1444d","outlined":"tag__outlined_1444d","filled":"tag__filled_1444d","checked":"tag__checked_1444d"};
 require('./default.css');
 
-var commonStyles = {"component":"tag__component_1xa0b","focused":"tag__focused_1xa0b","addons":"tag__addons_1xa0b","s":"tag__s_1xa0b","m":"tag__m_1xa0b","l":"tag__l_1xa0b","xl":"tag__xl_1xa0b","xxs":"tag__xxs_1xa0b","xs":"tag__xs_1xa0b","withRightAddons":"tag__withRightAddons_1xa0b","withLeftAddons":"tag__withLeftAddons_1xa0b","rounded":"tag__rounded_1xa0b"};
+var commonStyles = {"component":"tag__component_1xa0b","focused":"tag__focused_1xa0b","addons":"tag__addons_1xa0b","s":"tag__s_1xa0b","m":"tag__m_1xa0b","l":"tag__l_1xa0b","xl":"tag__xl_1xa0b","xxs":"tag__xxs_1xa0b","xs":"tag__xs_1xa0b","withRightAddons":"tag__withRightAddons_1xa0b","withLeftAddons":"tag__withLeftAddons_1xa0b","rounded":"tag__rounded_1xa0b","allowBackdropBlur":"tag__allowBackdropBlur_1xa0b","outlined":"tag__outlined_1xa0b","checked":"tag__checked_1xa0b","filled":"tag__filled_1xa0b"};
 require('./index.css');
 
 var invertedColors = {"component":"tag__component_1u7ir","outlined":"tag__outlined_1u7ir","filled":"tag__filled_1u7ir","checked":"tag__checked_1u7ir"};
@@ -19,7 +19,7 @@ var colorCommonStyles = {
 };
 var BaseTag = forwardRef(function (_a, ref) {
     var _b;
-    var rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = __rest(_a, ["rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = __rest(_a, ["allowBackdropBlur", "rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
     var colorStyles = colorStylesMap[colors];
     var tagRef = useRef(null);
     var focused = useFocus(tagRef, 'keyboard')[0];
@@ -27,6 +27,7 @@ var BaseTag = forwardRef(function (_a, ref) {
     var shapeClassName = shape || variantClassName;
     var tagProps = {
         className: cn(commonStyles.component, colorCommonStyles[colors].component, colorStyles.component, commonStyles[size], styles[size], colorCommonStyles[colors][view], commonStyles[view], (_b = {},
+            _b[commonStyles.allowBackdropBlur] = allowBackdropBlur,
             _b[commonStyles.checked] = checked,
             _b[commonStyles[shapeClassName]] = Boolean(commonStyles[shapeClassName]),
             _b[styles[shapeClassName]] = Boolean(styles[shapeClassName]),

package/tag/esm/components/base-tag/index.css

@@ -180,4 +180,8 @@
     .tag__rounded_1xa0b.tag__l_1xa0b,
     .tag__rounded_1xa0b.tag__xl_1xa0b {
         border-radius: var(--tag-border-radius);
+    } .tag__allowBackdropBlur_1xa0b.tag__outlined_1xa0b.tag__checked_1xa0b[disabled],
+    .tag__allowBackdropBlur_1xa0b.tag__filled_1xa0b {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
     }

package/tag/modern/components/base-tag/Component.d.ts

@@ -68,6 +68,11 @@ type BaseTagProps = Omit<NativeProps, 'onClick'> & {
      * Стиль тега
      */
     view?: 'outlined' | 'filled';
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Основные стили компонента.
      */
@@ -137,6 +142,11 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Стиль тега
      */
     view?: "outlined" | "filled" | undefined;
+    /**
+     * Включает размытие фона для некоторых вариантов тега
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean | undefined;
     /**
      * Основные стили компонента.
      */

package/tag/modern/components/base-tag/Component.js

@@ -6,7 +6,7 @@ import { useFocus } from '@alfalab/hooks';
 const defaultColors = {"component":"tag__component_1444d","outlined":"tag__outlined_1444d","filled":"tag__filled_1444d","checked":"tag__checked_1444d"};
 require('./default.css');
 
-const commonStyles = {"component":"tag__component_1xa0b","focused":"tag__focused_1xa0b","addons":"tag__addons_1xa0b","s":"tag__s_1xa0b","m":"tag__m_1xa0b","l":"tag__l_1xa0b","xl":"tag__xl_1xa0b","xxs":"tag__xxs_1xa0b","xs":"tag__xs_1xa0b","withRightAddons":"tag__withRightAddons_1xa0b","withLeftAddons":"tag__withLeftAddons_1xa0b","rounded":"tag__rounded_1xa0b"};
+const commonStyles = {"component":"tag__component_1xa0b","focused":"tag__focused_1xa0b","addons":"tag__addons_1xa0b","s":"tag__s_1xa0b","m":"tag__m_1xa0b","l":"tag__l_1xa0b","xl":"tag__xl_1xa0b","xxs":"tag__xxs_1xa0b","xs":"tag__xs_1xa0b","withRightAddons":"tag__withRightAddons_1xa0b","withLeftAddons":"tag__withLeftAddons_1xa0b","rounded":"tag__rounded_1xa0b","allowBackdropBlur":"tag__allowBackdropBlur_1xa0b","outlined":"tag__outlined_1xa0b","checked":"tag__checked_1xa0b","filled":"tag__filled_1xa0b"};
 require('./index.css');
 
 const invertedColors = {"component":"tag__component_1u7ir","outlined":"tag__outlined_1u7ir","filled":"tag__filled_1u7ir","checked":"tag__checked_1u7ir"};
@@ -16,7 +16,7 @@ const colorCommonStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-const BaseTag = forwardRef(({ rightAddons, leftAddons, children, size = 's', checked, className, dataTestId, name, colors = 'default', onClick, variant = 'default', shape, view = 'outlined', childrenClassName, childrenRef, styles = {}, colorStylesMap = { default: {}, inverted: {} }, ...restProps }, ref) => {
+const BaseTag = forwardRef(({ allowBackdropBlur, rightAddons, leftAddons, children, size = 's', checked, className, dataTestId, name, colors = 'default', onClick, variant = 'default', shape, view = 'outlined', childrenClassName, childrenRef, styles = {}, colorStylesMap = { default: {}, inverted: {} }, ...restProps }, ref) => {
     const colorStyles = colorStylesMap[colors];
     const tagRef = useRef(null);
     const [focused] = useFocus(tagRef, 'keyboard');
@@ -24,6 +24,7 @@ const BaseTag = forwardRef(({ rightAddons, leftAddons, children, size = 's', che
     const shapeClassName = shape || variantClassName;
     const tagProps = {
         className: cn(commonStyles.component, colorCommonStyles[colors].component, colorStyles.component, commonStyles[size], styles[size], colorCommonStyles[colors][view], commonStyles[view], {
+            [commonStyles.allowBackdropBlur]: allowBackdropBlur,
             [commonStyles.checked]: checked,
             [commonStyles[shapeClassName]]: Boolean(commonStyles[shapeClassName]),
             [styles[shapeClassName]]: Boolean(styles[shapeClassName]),

package/tag/modern/components/base-tag/index.css

@@ -180,4 +180,8 @@
     .tag__rounded_1xa0b.tag__l_1xa0b,
     .tag__rounded_1xa0b.tag__xl_1xa0b {
         border-radius: var(--tag-border-radius);
+    } .tag__allowBackdropBlur_1xa0b.tag__outlined_1xa0b.tag__checked_1xa0b[disabled],
+    .tag__allowBackdropBlur_1xa0b.tag__filled_1xa0b {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
     }