@gravity-ui/page-constructor 4.15.1-alpha.0 → 4.15.1

package/build/cjs/hooks/useWindowBreakpoint.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const constants_1 = require("../constants");
 function calculate(windowWidth) {
     const breakpointsSorted = Object.values(constants_1.BREAKPOINTS).sort((b1, b2) => b1 - b2);
@@ -21,7 +21,7 @@ function useWindowBreakpoint() {
     const [breakpoint, setBreakpoint] = (0, react_1.useState)(constants_1.BREAKPOINTS.sm);
     (0, react_1.useEffect)(() => {
         setBreakpoint(calculate(window.innerWidth));
-        const detect = lodash_1.default.debounce(() => {
+        const detect = (0, debounce_1.default)(() => {
             setBreakpoint(calculate(window.innerWidth));
         }, 100);
         detect();

package/build/cjs/navigation/components/Navigation/Navigation.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navigation = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const grid_1 = require("../../../grid");
 const utils_1 = require("../../../utils");
@@ -29,7 +29,7 @@ const Navigation = ({ data, logo }) => {
                 setShowBorder(window.scrollY > 0);
             }
         };
-        const scrollHandler = lodash_1.default.debounce(showBorderOnScroll, 20);
+        const scrollHandler = (0, debounce_1.default)(showBorderOnScroll, 20);
         window.addEventListener('scroll', scrollHandler, { passive: true });
         return () => window.removeEventListener('scroll', scrollHandler);
     });

package/build/cjs/navigation/components/NavigationItem/NavigationItem.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = require("lodash");
+const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const blockIdContext_1 = require("../../../context/blockIdContext");
 const innerContext_1 = require("../../../context/innerContext");
 const models_1 = require("../../../models");
@@ -17,7 +17,7 @@ const NavigationItem = (_a) => {
     const componentProps = (0, react_1.useMemo)(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);
         if (type !== models_1.NavigationItemType.Dropdown) {
-            return (0, lodash_1.omit)(componentProperties, 'hidePopup', 'isActive');
+            return (0, omit_1.default)(componentProperties, 'hidePopup', 'isActive');
         }
         return componentProperties;
     }, [data, props, type]);

package/build/cjs/navigation/schema.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationHeaderProps = exports.LogoProps = void 0;
-const lodash_1 = require("lodash");
+const tslib_1 = require("tslib");
+const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const schema_1 = require("../components/Image/schema");
 const common_1 = require("../schema/validators/common");
 const utils_1 = require("../schema/validators/utils");
@@ -40,7 +41,7 @@ const NavigationItemBaseProps = {
         type: 'number',
     },
 };
-const NavigationItemBaseLinkProps = (0, lodash_1.omit)(NavigationItemBaseProps, ['url']);
+const NavigationItemBaseLinkProps = (0, omit_1.default)(NavigationItemBaseProps, ['url']);
 const NavigationLinkItemProps = {
     type: 'object',
     additionalProperties: false,

package/build/cjs/sub-blocks/BackgroundCard/schema.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundCard = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
 const event_1 = require("../../schema/validators/event");
 const schema_2 = require("../Content/schema");
-const BackgroundCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size']);
+const BackgroundCardContentProps = (0, omit_1.default)(schema_2.ContentBase, ['size']);
 exports.BackgroundCard = {
     'background-card': {
         additionalProperties: false,

package/build/cjs/sub-blocks/BasicCard/schema.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasicCard = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
 const schema_2 = require("../Content/schema");
-const BasicCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size', 'theme']);
+const BasicCardContentProps = (0, omit_1.default)(schema_2.ContentBase, ['size', 'theme']);
 exports.BasicCard = {
     'basic-card': {
         additionalProperties: false,

package/build/cjs/sub-blocks/LayoutItem/schema.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutItem = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = require("lodash");
+const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const schema_1 = tslib_1.__importDefault(require("../../components/MetaInfo/schema"));
 const common_1 = require("../../schema/validators/common");
 const event_1 = require("../../schema/validators/event");
@@ -11,7 +11,7 @@ exports.LayoutItem = {
     type: 'object',
     additionalProperties: false,
     required: ['content', 'media'],
-    properties: Object.assign(Object.assign({}, common_1.BaseProps), { media: common_1.MediaProps, content: (0, lodash_1.omit)(schema_2.ContentBase, ['colSize', 'size', 'centered']), metaInfo: schema_1.default, border: {
+    properties: Object.assign(Object.assign({}, common_1.BaseProps), { media: common_1.MediaProps, content: (0, omit_1.default)(schema_2.ContentBase, ['colSize', 'size', 'centered']), metaInfo: schema_1.default, border: {
             type: 'boolean',
         }, fullscreen: {
             type: 'boolean',

package/build/cjs/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const chunk_1 = tslib_1.__importDefault(require("lodash/chunk"));
 const components_1 = require("../../../components");
 const constants_1 = require("../../../constants");
 const grid_1 = require("../../../grid");
@@ -50,11 +50,11 @@ const CombinedPriceDetailed = (props) => {
             react_1.default.createElement("div", null, descriptionComponents),
             react_1.default.createElement("div", { className: b('description', { delimiter: useMixedView }) }, detailsComponents)));
     };
-    const chunkedItems = lodash_1.default.chunk(items, groupItemsSize);
+    const chunkedItems = (0, chunk_1.default)(items, groupItemsSize);
     return (react_1.default.createElement(components_1.CardBase, { className: b(), border: border, analyticsEvents: analyticsEvents },
         react_1.default.createElement(components_1.CardBase.Content, null,
-            react_1.default.createElement(grid_1.Grid, null, chunkedItems.map((chunk, id) => {
-                return (react_1.default.createElement(grid_1.Row, { key: id, className: b('row') }, getPrice(chunk)));
+            react_1.default.createElement(grid_1.Grid, null, chunkedItems.map((item, id) => {
+                return (react_1.default.createElement(grid_1.Row, { key: id, className: b('row') }, getPrice(item)));
             })))));
 };
 exports.default = CombinedPriceDetailed;

package/build/cjs/text-transform/config.js

@@ -1,4 +1,6 @@
 "use strict";
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.config = exports.blockHeaderTransformer = void 0;
 const tslib_1 = require("tslib");

package/build/cjs/text-transform/transformers.js

@@ -2,20 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentTransformer = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
+const shuffle_1 = tslib_1.__importDefault(require("lodash/shuffle"));
 const config_1 = require("./config");
 const filter_1 = require("./filter");
 function transformBlocks(blocks, lang, customConfig = {}, options = {}) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
     const { plugins = [] } = options;
-    const clonedBlocks = lodash_1.default.cloneDeep(blocks);
+    const clonedBlocks = (0, cloneDeep_1.default)(blocks);
     return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, plugins));
 }
 function transformBlock(lang, blocksConfig, block, plugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
-            block.children = lodash_1.default.shuffle(block.children);
+            block.children = (0, shuffle_1.default)(block.children);
         }
     }
     if (blockConfig) {

package/build/cjs/text-transform/utils.d.ts

@@ -1,7 +1,6 @@
 import { Options, Output } from '@doc-tools/transform';
 import sanitize from 'sanitize-html';
 import { Lang } from '../utils/configure';
-import AddRuleOptions = typograf.AddRuleOptions;
 export declare enum TransformType {
     Text = "text",
     Html = "html"
@@ -15,7 +14,6 @@ export declare const typografConfig: {
     disabled: string[];
 };
 export declare const sanitizeStripOptions: sanitize.IOptions;
-export declare function addTypografRules(options: AddRuleOptions[]): void;
 export declare function typograf(text: string, lang?: Lang): string;
 export declare function sanitizeHtml(html: string, options?: sanitize.IOptions): string;
 export declare function typografToHTML(text: string, lang: Lang, allowedTags?: string[]): string;

package/build/cjs/text-transform/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typografEntity = exports.fullTransform = exports.transformMarkdown = exports.typografToText = exports.typografToHTML = exports.sanitizeHtml = exports.typograf = exports.addTypografRules = exports.sanitizeStripOptions = exports.typografConfig = exports.DEFAULT_ALLOWED_TAGS = exports.TransformType = void 0;
+exports.typografEntity = exports.fullTransform = exports.transformMarkdown = exports.typografToText = exports.typografToHTML = exports.sanitizeHtml = exports.typograf = exports.sanitizeStripOptions = exports.typografConfig = exports.DEFAULT_ALLOWED_TAGS = exports.TransformType = void 0;
 const tslib_1 = require("tslib");
 const transform_1 = tslib_1.__importDefault(require("@doc-tools/transform"));
 const sanitize_html_1 = tslib_1.__importDefault(require("sanitize-html"));
@@ -37,12 +37,31 @@ exports.sanitizeStripOptions = {
     allowedTags: [],
     allowedAttributes: {},
 };
-function addTypografRules(options) {
-    options.forEach((option) => {
-        typograf_1.default.addRule(option);
-    });
-}
-exports.addTypografRules = addTypografRules;
+typograf_1.default.addRule({
+    name: 'common/html/sup',
+    queue: 'end',
+    /* TODO mange with it: in typograf types AddRuleOptions.handler takes only one param: text.
+    But in cloud-www was used this notation with 3 params */
+    //@ts-ignore
+    handler: function (text, settings, context) {
+        const { prefs: { htmlEntity: { type = '' } = {} } = {} } = context;
+        let symbols;
+        switch (type) {
+            case 'digit':
+                symbols = '®|©|™';
+                break;
+            case 'name':
+                symbols = '®|©|™';
+                break;
+            default:
+                symbols = '®|©|™';
+                break;
+        }
+        const symbolsRegex = new RegExp(`(?<!<sup>\\s*)(${symbols})|(${symbols})(?!\\s*<\\/sup>)`, 'gi');
+        return text.replace(symbolsRegex, '<sup>$1</sup>');
+    },
+    htmlAttrs: false,
+});
 function enableRules(tp) {
     const { disabled, enabled } = exports.typografConfig;
     enabled.forEach((rule) => tp.enableRule(rule));

package/build/cjs/utils/blocks.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
-const lodash_1 = require("lodash");
+const tslib_1 = require("tslib");
+const camelCase_1 = tslib_1.__importDefault(require("lodash/camelCase"));
+const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -125,9 +127,9 @@ exports.getShareLink = getShareLink;
 const getQaAttrubutes = (qa, ...customKeys) => {
     const attributes = {};
     if (qa) {
-        const keys = QA_ATTRIBUTES_KEYS.concat((0, lodash_1.flatten)(customKeys));
+        const keys = QA_ATTRIBUTES_KEYS.concat((0, flatten_1.default)(customKeys));
         keys.forEach((key) => {
-            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+            attributes[(0, camelCase_1.default)(key)] = `${qa}-${key}`;
         });
         attributes.default = qa;
     }

package/build/esm/blocks/HeaderSlider/schema.js

@@ -1,11 +1,11 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 import { HeaderProperties, SliderProps } from '../../schema/validators/blocks';
 import { BlockBaseProps } from '../../schema/validators/common';
 export const HeaderSliderBlock = {
     'header-slider-block': {
         additionalProperties: false,
         required: ['items'],
-        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), _.omit(SliderProps, ['loadable', 'children'])), { items: {
+        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), omit(SliderProps, ['loadable', 'children'])), { items: {
                 type: 'array',
                 items: {
                     type: 'object',

package/build/esm/blocks/Info/schema.js

@@ -1,10 +1,10 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 import { BaseProps, ButtonBlock, LinkProps, ThemeProps, withTheme, } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
 import { ContentBase } from '../../sub-blocks/Content/schema';
 const ContentProps = {
     additionalProperties: false,
-    properties: _.omit(ContentBase, ['size', 'colSizes', 'theme']),
+    properties: omit(ContentBase, ['size', 'colSizes', 'theme']),
 };
 export const InfoBlock = {
     'info-block': {

package/build/esm/blocks/Media/schema.js

@@ -1,4 +1,4 @@
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 import { AnimatableProps, BlockBaseProps, ButtonBlock, MediaProps, mediaDirection, withTheme, } from '../../schema/validators/common';
 import { ContentBase } from '../../sub-blocks/Content/schema';
 export const Media = {

package/build/esm/blocks/Questions/schema.js

@@ -1,8 +1,8 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 import { BlockBaseProps, LinkProps } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
 import { ContentBase } from '../../sub-blocks/Content/schema';
-const QuestionsBlockContentProps = _.omit(ContentBase, ['size', 'theme']);
+const QuestionsBlockContentProps = omit(ContentBase, ['size', 'theme']);
 export const QuestionsBlock = {
     'questions-block': {
         additionalProperties: false,

package/build/esm/blocks/Slider/Slider.js

@@ -1,5 +1,7 @@
 import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import get from 'lodash/get';
+import noop from 'lodash/noop';
 import SlickSlider from 'react-slick';
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
@@ -40,11 +42,11 @@ export const SliderBlock = (props) => {
     const autoplayTimeId = useRef();
     const { hasFocus, unsetFocus } = useFocus((_a = slider === null || slider === void 0 ? void 0 : slider.innerSlider) === null || _a === void 0 ? void 0 : _a.list);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const onResize = useCallback(_.debounce(() => {
+    const onResize = useCallback(debounce(() => {
         if (!slider) {
             return;
         }
-        const newBreakpoint = _.get(slider, 'state.breakpoint') || BREAKPOINTS.xl;
+        const newBreakpoint = get(slider, 'state.breakpoint') || BREAKPOINTS.xl;
         if (newBreakpoint !== breakpoint) {
             setBreakpoint(newBreakpoint);
             setCurrentIndex(0);
@@ -193,7 +195,7 @@ export const SliderBlock = (props) => {
             prevArrow: React.createElement(Arrow, { type: "left", handleClick: handleArrowClick, size: arrowSize }),
             lazyLoad,
         };
-        return (React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : _.noop },
+        return (React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : noop },
             React.createElement(SlickSlider, Object.assign({}, settings), disclosedChildren),
             React.createElement("div", { className: b('footer') },
                 renderDisclaimer(),

package/build/esm/blocks/Slider/utils.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import pickBy from 'lodash/pickBy';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
 export const DEFAULT_SLIDE_BREAKPOINTS = {
@@ -16,7 +16,7 @@ export function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobile
     else {
         result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;
     }
-    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), _.pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
+    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
 }
 export function getSliderResponsiveParams(breakpoints) {
     return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({

package/build/esm/blocks/Tabs/schema.js

@@ -1,9 +1,9 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 import { ImageProps } from '../../components/Image/schema';
 import { BlockBaseProps, BlockHeaderProps, LinkProps, MediaProps, containerSizesArray, contentSizes, mediaDirection, sizeNumber, withTheme, } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
 import { ContentBase } from '../../sub-blocks/Content/schema';
-const TabsItemContentProps = _.omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']);
+const TabsItemContentProps = omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']);
 export const tabsItem = {
     type: 'object',
     additionalProperties: false,

package/build/esm/components/BalancedMasonry/BalancedMasonry.js

@@ -1,5 +1,7 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import first from 'lodash/first';
+import minBy from 'lodash/minBy';
 import { SSRContext } from '../../context/ssrContext';
 import { block, getQaAttrubutes } from '../../utils';
 import './BalancedMasonry.css';
@@ -13,7 +15,7 @@ const BalancedMasonry = (props) => {
             return Number(secondBreakpoint) - Number(firstBreakpoint);
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        let [, result] = _.first(breakpoints);
+        let [, result] = first(breakpoints);
         if (isServer) {
             return result;
         }
@@ -29,7 +31,7 @@ const BalancedMasonry = (props) => {
     const [columns, setColumns] = useState([]);
     const containerRef = useRef(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const balanceColumns = useCallback(_.debounce(() => {
+    const balanceColumns = useCallback(debounce(() => {
         if (!containerRef.current) {
             return;
         }
@@ -44,7 +46,7 @@ const BalancedMasonry = (props) => {
             if (!node) {
                 continue;
             }
-            const minColumn = _.minBy(columnsMeta, 'height') || { id: 0, height: 0 };
+            const minColumn = minBy(columnsMeta, 'height') || { id: 0, height: 0 };
             const { id: columnId } = minColumn;
             localColumns[columnId].push(children[i]);
             minColumn.height += node.offsetHeight;

package/build/esm/components/CardBase/CardBase.d.ts

@@ -11,6 +11,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    qa?: string;
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -2,7 +2,7 @@ import React, { Children, Fragment } from 'react';
 import { useAnalytics } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
 import { DefaultEventNames } from '../../models/common';
-import { block } from '../../utils';
+import { block, getQaAttrubutes } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
 import './CardBase.css';
@@ -11,10 +11,11 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', qa, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
+    const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');
     function handleChild(child) {
         switch (child.type) {
             case Header:
@@ -38,18 +39,18 @@ export const Layout = (props) => {
         Children.forEach(children, handleChild);
     }
     const cardContent = (React.createElement(Fragment, null,
-        (header || image) && (React.createElement(BackgroundImage, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image)),
+        (header || image) && (React.createElement(BackgroundImage, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image), { qa: qaAttributes.header }),
             React.createElement("div", { className: b('header-content') }, header))),
-        React.createElement("div", { className: b('body', bodyClassName) },
-            React.createElement("div", { className: b('content', contentClassName) }, content),
-            footer && React.createElement("div", { className: b('footer', footerClass) }, footer))));
+        React.createElement("div", { className: b('body', bodyClassName), "data-qa": qaAttributes.body },
+            React.createElement("div", { className: b('content', contentClassName), "data-qa": qaAttributes.content }, content),
+            footer && (React.createElement("div", { className: b('footer', footerClass), "data-qa": qaAttributes.footer }, footer)))));
     const fullClassName = b({ border }, className);
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
-        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (React.createElement("div", { className: fullClassName }, cardContent));
+        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 Layout.Header = Header;
 Layout.Content = Content;

package/build/esm/components/FullWidthBackground/FullWidthBackground.js

@@ -1,5 +1,5 @@
 import React, { Component, createRef } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import { BREAKPOINTS } from '../../constants';
 import { block } from '../../utils';
 import './FullWidthBackground.css';
@@ -11,7 +11,7 @@ export default class FullWidthBackground extends Component {
     constructor() {
         super(...arguments);
         this.ref = createRef();
-        this.setBg = _.debounce(() => {
+        this.setBg = debounce(() => {
             var _a, _b;
             if (this.ref && this.ref.current) {
                 const bg = this.ref.current;

package/build/esm/components/Image/Image.d.ts

@@ -6,5 +6,10 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     onClick?: MouseEventHandler;
     containerClassName?: string;
 }
+export interface DeviceSpecificFragmentProps extends QAProps {
+    disableWebp: boolean;
+    src: string;
+    breakpoint: number;
+}
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/build/esm/components/Image/Image.js

@@ -8,6 +8,9 @@ import i18n from './i18n';
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
+const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React.createElement(Fragment, null,
+    !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })),
+    React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
@@ -16,19 +19,15 @@ const Image = (props) => {
     if (!src) {
         return null;
     }
-    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'display-source');
+    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
     return (React.createElement("picture", { className: containerClassName, "data-qa": qa },
-        mobile && (React.createElement(Fragment, null,
-            !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)`, "data-qa": qaAttributes.mobileWebpSource })),
-            React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)`, "data-qa": qaAttributes.mobileSource }))),
-        tablet && (React.createElement(Fragment, null,
-            !disableWebp && (React.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${BREAKPOINTS.md}px)`, "data-qa": qaAttributes.tabletWebpSource })),
-            React.createElement("source", { srcSet: tablet, media: `(max-width: ${BREAKPOINTS.md}px)`, "data-qa": qaAttributes.tabletSource }))),
-        src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.displaySource })),
+        mobile && (React.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
+        tablet && (React.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
+        src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
         React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 export default Image;

package/build/esm/components/Map/GoogleMap.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { MapsContext } from '../../context/mapsContext/mapsContext';
 import { MobileContext } from '../../context/mobileContext';
@@ -20,7 +20,7 @@ const GoogleMap = (props) => {
     const ref = useRef(null);
     const src = useMemo(() => getScriptSrc({ apiKey, scriptSrc, address, lang, zoom }), [apiKey, scriptSrc, address, lang, zoom]);
     useEffect(() => {
-        const updateSize = _.debounce(() => {
+        const updateSize = debounce(() => {
             if (ref.current) {
                 setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile)));
             }

package/build/esm/components/Map/YMap/YandexMap.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Spin } from '@gravity-ui/uikit';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import { LocaleContext } from '../../../context/localeContext/localeContext';
 import { MapsContext } from '../../../context/mapsContext/mapsContext';
 import { MobileContext } from '../../../context/mobileContext';
@@ -47,7 +47,7 @@ const YandexMap = (props) => {
         })();
     }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
     useEffect(() => {
-        const updateSize = _.debounce(() => {
+        const updateSize = debounce(() => {
             if (ref.current) {
                 setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile)));
             }

package/build/esm/components/Media/Image/Image.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import { animated, config, useSpring } from 'react-spring';
 import SliderBlock from '../../../blocks/Slider/Slider';
 import { SliderType } from '../../../models';
@@ -23,7 +23,7 @@ const Image = (props) => {
     useEffect(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            const debouncedHandler = _.debounce(handleScroll, 5);
+            const debouncedHandler = debounce(handleScroll, 5);
             window.addEventListener('scroll', debouncedHandler, { passive: true });
             return () => window.removeEventListener('scroll', debouncedHandler);
         }

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -1,5 +1,5 @@
 import React, { createRef } from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import { ToggleArrow } from '..';
 import { block } from '../../utils';
 import './OverflowScroller.css';
@@ -17,7 +17,7 @@ export default class OverflowScroller extends React.Component {
         this.containerRef = createRef();
         this.wrapperRef = createRef();
         // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
-        this.checkOverflow = _.debounce(() => {
+        this.checkOverflow = debounce(() => {
             if (this.containerRef &&
                 this.containerRef.current &&
                 this.wrapperRef &&

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import ReactPlayer from 'react-player';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
@@ -75,7 +75,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [elapsedTime, playerRef, started]);
     useEffect(() => {
-        const updateSize = _.debounce(() => {
+        const updateSize = debounce(() => {
             if (ref.current) {
                 // We need to get parent's width does not equal 0
                 const parentElement = getParentElement(ref.current);