@doyourjob/gravity-ui-page-constructor 5.31.264 → 5.31.266

package/build/cjs/blocks/Header/Header.css

@@ -1,4 +1,4 @@
-.pc-header-block__title {
+.pc-header-block__title_size_xl, .pc-header-block__title_size_l, .pc-header-block__title_size_m, .pc-header-block__title_size_s, .pc-header-block__title_size_xs, .pc-header-block__title {
   margin: 0;
 }
 
@@ -125,6 +125,54 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-header-block__title_size_xs {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+.pc-header-block__title_size_s {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+.pc-header-block__title_size_m {
+  font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+  line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+@media (max-width: 576px) {
+  .pc-header-block__title_size_m {
+    font-size: var(--g-text-display-1-font-size, var(--pc-text-display-1-font-size));
+    line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
+  }
+}
+.pc-header-block__title_size_l {
+  font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
+  line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+@media (max-width: 577px) {
+  .pc-header-block__title_size_l {
+    font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+    line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  }
+}
+.pc-header-block__title_size_xl {
+  font-size: var(--g-text-display-5-font-size, var(--pc-text-display-5-font-size));
+  line-height: var(--g-text-display-5-line-height, var(--pc-text-display-5-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+@media (max-width: 577px) {
+  .pc-header-block__title_size_xl {
+    font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
+    line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
+  }
+}
 .pc-header-block__title_pre-wrap {
   white-space: pre-wrap;
 }

package/build/cjs/blocks/Header/Header.js

@@ -30,7 +30,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 const HeaderBlock = (props) => {
-    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
+    const { title, titleSize = 'l', switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { backButton, blockTag } = (0, react_1.useContext)(headerContext_1.HeaderContext);
     const theme = (0, theme_1.useTheme)();
@@ -85,12 +85,13 @@ const HeaderBlock = (props) => {
                                 react_1.default.createElement("div", null,
                                     overtitle && (react_1.default.createElement("div", { className: b('overtitle') },
                                         react_1.default.createElement(components_1.HTML, null, overtitle))),
-                                    react_1.default.createElement("h1", { className: b('title', {
+                                    react_1.default.createElement((0, utils_2.getHeaderTag)(titleSize), {
+                                        className: b('title', {
                                             'pre-wrap': Boolean(switchingTitle),
-                                        }), id: titleId },
-                                        react_1.default.createElement(HeaderTag_1.default, { tag: blockTag }),
-                                        status,
-                                        switchingTitle ? (react_1.default.createElement(SwitchingTtitle_1.default, Object.assign({}, switchingTitle))) : (react_1.default.createElement(react_1.default.Fragment, null, renderTitle ? (renderTitle(title)) : (react_1.default.createElement(components_1.HTML, null, title))))),
+                                            size: titleSize,
+                                        }),
+                                        id: titleId,
+                                    }, react_1.default.createElement(HeaderTag_1.default, { tag: blockTag }), status, switchingTitle ? (react_1.default.createElement(SwitchingTtitle_1.default, Object.assign({}, switchingTitle))) : (react_1.default.createElement(react_1.default.Fragment, null, renderTitle ? (renderTitle(title)) : (react_1.default.createElement(components_1.HTML, null, title))))),
                                     react_1.default.createElement(HeaderDescription_1.default, { className: b('description', { theme: textTheme }), description: description, theme: textTheme }),
                                     react_1.default.createElement(HeaderButtons_1.default, { buttons: buttons, titleId: titleId }),
                                     children),

package/build/cjs/blocks/Header/schema.d.ts

@@ -323,6 +323,10 @@ export declare const HeaderProperties: {
         type: string;
         contentType: string;
     };
+    titleSize: {
+        type: string;
+        enum: string[];
+    };
     switchingTitle: {
         type: string;
         additionalProperties: boolean;
@@ -1041,6 +1045,10 @@ export declare const HeaderBlock: {
                 type: string;
                 contentType: string;
             };
+            titleSize: {
+                type: string;
+                enum: string[];
+            };
             switchingTitle: {
                 type: string;
                 additionalProperties: boolean;

package/build/cjs/blocks/Header/schema.js

@@ -16,6 +16,10 @@ exports.HeaderProperties = {
         type: 'string',
         contentType: 'text',
     },
+    titleSize: {
+        type: 'string',
+        enum: common_1.titleTextSize,
+    },
     switchingTitle: {
         type: 'object',
         additionalProperties: false,

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -14,6 +14,10 @@ export declare const HeaderSliderBlock: {
                             type: string;
                             contentType: string;
                         };
+                        titleSize: {
+                            type: string;
+                            enum: string[];
+                        };
                         switchingTitle: {
                             type: string;
                             additionalProperties: boolean;

package/build/cjs/blocks/LogoRotator/Item.js

@@ -9,7 +9,6 @@ const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('logo-rotator-block');
-const defaultColSizes = { all: 3 };
 const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', (0, utils_2.getLayerModifiers)(layer, swapAnimation))}`;
 const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
     const renderLayer = (layerSrc, layer, layerUrl) => {
@@ -20,7 +19,7 @@ const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onM
         return react_1.default.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
     };
     const isSwapping = Boolean(previousSrc);
-    return (react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes },
+    return (react_1.default.createElement(grid_1.Col, { sizes: (0, utils_2.getLogoRotatorColSizes)(colSizes) },
         react_1.default.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
             previousSrc && renderLayer(previousSrc, 'from', previousUrl),
             renderLayer(src, previousSrc ? 'to' : 'current', url))));

package/build/cjs/blocks/LogoRotator/LogoRotator.css

@@ -132,6 +132,13 @@ unpredictable css rules order in build */
   flex: 1;
   overflow: hidden;
 }
+@media (max-width: 769px) {
+  .pc-logo-rotator-block__row-item {
+    min-width: 0;
+    max-width: calc(50% - 8px);
+    flex: 0 0 calc(50% - 8px);
+  }
+}
 
 @keyframes logo-rotator-fade-out {
   from {

package/build/cjs/blocks/LogoRotator/LogoRotator.js

@@ -15,6 +15,10 @@ const utils_2 = require("./utils");
 const b = (0, utils_1.block)('logo-rotator-block');
 const DEFAULT_MIN_ROTATE_COUNT = 2;
 const DEFAULT_MAX_ROTATE_COUNT = 4;
+const GRID_COLUMNS_COUNT = 12;
+const MIN_COLUMN_COUNT = 2;
+const MAX_COLUMN_COUNT = 7;
+const ROW_MODE_ITEM_MIN_WIDTH = 160;
 const emptyTransitions = (count) => Array(count).fill(undefined);
 const pickRandomSlots = (slotIndices, count) => {
     const shuffled = [...slotIndices];
@@ -24,10 +28,58 @@ const pickRandomSlots = (slotIndices, count) => {
     }
     return shuffled.slice(0, count);
 };
+const getFiniteCssValue = (value) => {
+    const result = Number.parseFloat(value);
+    return Number.isFinite(result) ? result : 0;
+};
+const getSupportedColumnCount = (columns) => {
+    const columnCount = Math.min(Math.max(Math.floor(columns), MIN_COLUMN_COUNT), MAX_COLUMN_COUNT);
+    return String(columnCount);
+};
+const getActiveGridColumnCount = (colSizes, breakpoint) => {
+    const activeColSize = (0, utils_2.getActiveBreakpointValue)((0, utils_2.getLogoRotatorColSizes)(colSizes), breakpoint);
+    return getSupportedColumnCount(GRID_COLUMNS_COUNT / activeColSize);
+};
+const getRowModeColumnCount = (width, gap) => {
+    const columns = Math.floor((width + gap) / (ROW_MODE_ITEM_MIN_WIDTH + gap));
+    return getSupportedColumnCount(columns);
+};
+const getActiveCount = (count, columnCount) => count[columnCount];
+const noop = () => { };
+const useRowModeColumnCount = (rowMode, breakpoint, rowItemsRef) => {
+    const [columnCount, setColumnCount] = (0, react_1.useState)(getSupportedColumnCount(MIN_COLUMN_COUNT));
+    (0, react_1.useEffect)(() => {
+        if (!rowMode) {
+            setColumnCount(getSupportedColumnCount(MIN_COLUMN_COUNT));
+            return noop;
+        }
+        const rowItems = rowItemsRef.current;
+        if (!rowItems)
+            return noop;
+        const updateColumnCount = (width) => {
+            const nextColumnCount = breakpoint <= constants_1.BREAKPOINTS.md
+                ? getSupportedColumnCount(MIN_COLUMN_COUNT)
+                : getRowModeColumnCount(width, getFiniteCssValue(window.getComputedStyle(rowItems).columnGap));
+            setColumnCount((currentColumnCount) => currentColumnCount === nextColumnCount ? currentColumnCount : nextColumnCount);
+        };
+        updateColumnCount(rowItems.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return noop;
+        const observer = new ResizeObserver(([entry]) => {
+            updateColumnCount(entry.contentRect.width);
+        });
+        observer.observe(rowItems);
+        return () => observer.disconnect();
+    }, [breakpoint, rowItemsRef, rowMode]);
+    return columnCount;
+};
 const LogoRotatorBlock = (props) => {
-    const { animated, title, text, theme, items, countMobile, countDesktop, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
+    const { animated, title, text, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
     const breakpoint = (0, useWindowBreakpoint_1.default)();
-    const activeCount = countDesktop !== undefined && breakpoint >= constants_1.BREAKPOINTS.md ? countDesktop : countMobile;
+    const rowItemsRef = (0, react_1.useRef)(null);
+    const rowModeColumnCount = useRowModeColumnCount(rowMode, breakpoint, rowItemsRef);
+    const gridColumnCount = (0, react_1.useMemo)(() => getActiveGridColumnCount(colSizes, breakpoint), [breakpoint, colSizes]);
+    const activeCount = getActiveCount(count, rowMode ? rowModeColumnCount : gridColumnCount);
     // Индексы логотипов, которые участвуют в ротации (не статичные)
     const rotatableIndices = (0, react_1.useMemo)(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
     // Инициализация слотов: статичные вставляются в начало, остальные по порядку
@@ -151,7 +203,7 @@ const LogoRotatorBlock = (props) => {
             title || text ? (react_1.default.createElement("div", { className: b('head') },
                 title && react_1.default.createElement("h2", { className: b('title') }, title),
                 text && react_1.default.createElement("div", { className: b('text') }, text))) : null,
-            rowMode ? (react_1.default.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
+            rowMode ? (react_1.default.createElement("div", { className: b('row-items'), ref: rowItemsRef }, slots.map((slot, index) => {
                 var _a;
                 const transition = transitions[index];
                 const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];

package/build/cjs/blocks/LogoRotator/schema.d.ts

@@ -32,11 +32,13 @@ export declare const LogoRotatorBlock: {
                     };
                 };
             };
-            countMobile: {
-                type: string;
-            };
-            countDesktop: {
+            count: {
                 type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: Record<string, {
+                    type: 'number';
+                }>;
             };
             minRotateCount: {
                 type: string;

package/build/cjs/blocks/LogoRotator/schema.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogoRotatorBlock = void 0;
 const common_1 = require("../../schema/validators/common");
+const countColumns = ['2', '3', '4', '5', '6', '7'];
+const countByColumnsProperties = countColumns.reduce((acc, columns) => (Object.assign(Object.assign({}, acc), { [columns]: { type: 'number' } })), {});
+const countByColumns = {
+    type: 'object',
+    additionalProperties: false,
+    required: countColumns,
+    properties: countByColumnsProperties,
+};
 exports.LogoRotatorBlock = {
     'logo-rotator-block': {
         additionalProperties: false,
-        required: ['items', 'countMobile'],
+        required: ['items', 'count'],
         properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { title: {
                 type: 'string',
             }, text: {
@@ -22,11 +30,7 @@ exports.LogoRotatorBlock = {
                         isStatic: { type: 'boolean' },
                     },
                 },
-            }, countMobile: {
-                type: 'number',
-            }, countDesktop: {
-                type: 'number',
-            }, minRotateCount: {
+            }, count: countByColumns, minRotateCount: {
                 type: 'number',
             }, maxRotateCount: {
                 type: 'number',

package/build/cjs/blocks/LogoRotator/utils.d.ts

@@ -1,7 +1,14 @@
+import { GridColumnSize, GridColumnSizesType } from '../../grid';
 import { LogoRotatorBlockProps } from '../../models';
 export type LogoRotatorLayer = 'current' | 'from' | 'to';
 export type LogoRotatorSwapAnimation = NonNullable<LogoRotatorBlockProps['swapAnimation']>;
 export declare const DEFAULT_SWAP_ANIMATION: LogoRotatorSwapAnimation;
 export declare const SWAP_ANIMATION_DURATIONS: Record<LogoRotatorSwapAnimation, number>;
+export declare const getActiveBreakpointValue: <T>(values: Partial<Record<GridColumnSize, T>> & {
+    all: T;
+}, breakpoint: number) => T | (undefined & T);
+export declare const getLogoRotatorColSizes: (colSizes: LogoRotatorBlockProps['colSizes']) => GridColumnSizesType & {
+    all: number;
+};
 export declare const getLayerModifiers: (layer: LogoRotatorLayer, swapAnimation: LogoRotatorSwapAnimation) => Record<string, boolean>;
 export declare const getInitialSlots: (items: LogoRotatorBlockProps['items'], count: number) => number[];

package/build/cjs/blocks/LogoRotator/utils.js

@@ -1,11 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialSlots = exports.getLayerModifiers = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
+exports.getInitialSlots = exports.getLayerModifiers = exports.getLogoRotatorColSizes = exports.getActiveBreakpointValue = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
+const constants_1 = require("../../constants");
+const grid_1 = require("../../grid");
 exports.DEFAULT_SWAP_ANIMATION = 'fade';
 exports.SWAP_ANIMATION_DURATIONS = {
     fade: 1100,
     morph: 500,
 };
+const defaultColSizes = { all: 3 };
+const maxMobileColSize = 6;
+const gridBreakpoints = [
+    [grid_1.GridColumnSize.All, constants_1.BREAKPOINTS.xs],
+    [grid_1.GridColumnSize.Sm, constants_1.BREAKPOINTS.sm],
+    [grid_1.GridColumnSize.Md, constants_1.BREAKPOINTS.md],
+    [grid_1.GridColumnSize.Lg, constants_1.BREAKPOINTS.lg],
+    [grid_1.GridColumnSize.Xl, constants_1.BREAKPOINTS.xl],
+];
+const getActiveBreakpointValue = (values, breakpoint) => {
+    let result = values.all;
+    gridBreakpoints.forEach(([size, minWidth]) => {
+        const value = values[size];
+        if (breakpoint >= minWidth && value !== undefined) {
+            result = value;
+        }
+    });
+    return result;
+};
+exports.getActiveBreakpointValue = getActiveBreakpointValue;
+const getLogoRotatorColSizes = (colSizes) => {
+    const sizes = Object.assign(Object.assign({}, defaultColSizes), colSizes);
+    [grid_1.GridColumnSize.All, grid_1.GridColumnSize.Sm].forEach((size) => {
+        const colSize = sizes[size];
+        if (colSize !== undefined) {
+            sizes[size] = Math.min(colSize, maxMobileColSize);
+        }
+    });
+    return sizes;
+};
+exports.getLogoRotatorColSizes = getLogoRotatorColSizes;
 const getLayerModifiers = (layer, swapAnimation) => {
     const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
     const modifiers = { [layer]: true };

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -204,6 +204,7 @@ export interface SwitchingTitleProps {
 export type HeaderButtonType = Pick<ButtonProps, 'url' | 'text' | 'img' | 'theme' | 'primary' | 'size' | 'extraProps'>;
 export interface HeaderBlockProps {
     title: string;
+    titleSize?: TitleTextSize;
     switchingTitle?: SwitchingTitleProps;
     topTags?: HeaderTag[];
     bottomTags?: HeaderTag[];
@@ -301,6 +302,8 @@ export interface QuestionBlockItemProps extends QuestionItem {
 }
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
+export type LogoRotatorColumnCount = '2' | '3' | '4' | '5' | '6' | '7';
+export type LogoRotatorCountConfig = Record<LogoRotatorColumnCount, number>;
 export interface LogoRotatorBlockProps extends Animatable {
     title?: string;
     text?: string;
@@ -309,8 +312,7 @@ export interface LogoRotatorBlockProps extends Animatable {
         src: string;
         isStatic?: boolean;
     }[];
-    countMobile: number;
-    countDesktop?: number;
+    count: LogoRotatorCountConfig;
     minRotateCount?: number;
     maxRotateCount?: number;
     swapAnimation?: 'fade' | 'morph';

package/build/cjs/sub-blocks/MiniCaseCard/MiniCaseCard.css

@@ -48,11 +48,6 @@ unpredictable css rules order in build */
   flex-flow: row wrap;
   gap: 8px;
 }
-@media (max-width: 769px) {
-  .pc-mini-case-card__tags {
-    flex-wrap: wrap;
-  }
-}
 .pc-mini-case-card__tag {
   display: flex;
   align-items: center;

package/build/esm/blocks/Header/Header.css

@@ -1,4 +1,4 @@
-.pc-header-block__title {
+.pc-header-block__title_size_xl, .pc-header-block__title_size_l, .pc-header-block__title_size_m, .pc-header-block__title_size_s, .pc-header-block__title_size_xs, .pc-header-block__title {
   margin: 0;
 }
 
@@ -125,6 +125,54 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-header-block__title_size_xs {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+.pc-header-block__title_size_s {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+.pc-header-block__title_size_m {
+  font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+  line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+@media (max-width: 576px) {
+  .pc-header-block__title_size_m {
+    font-size: var(--g-text-display-1-font-size, var(--pc-text-display-1-font-size));
+    line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
+  }
+}
+.pc-header-block__title_size_l {
+  font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
+  line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+@media (max-width: 577px) {
+  .pc-header-block__title_size_l {
+    font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+    line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  }
+}
+.pc-header-block__title_size_xl {
+  font-size: var(--g-text-display-5-font-size, var(--pc-text-display-5-font-size));
+  line-height: var(--g-text-display-5-line-height, var(--pc-text-display-5-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+@media (max-width: 577px) {
+  .pc-header-block__title_size_xl {
+    font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
+    line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
+  }
+}
 .pc-header-block__title_pre-wrap {
   white-space: pre-wrap;
 }

package/build/esm/blocks/Header/Header.js

@@ -6,7 +6,7 @@ import { HeaderContext } from '../../context/headerContext';
 import { MobileContext } from '../../context/mobileContext';
 import { useTheme } from '../../context/theme';
 import { Col, Grid, Row } from '../../grid';
-import { block, getThemedValue } from '../../utils';
+import { block, getHeaderTag, getThemedValue } from '../../utils';
 import BackButton from './BackButton/BackButton';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 import HeaderButtons from './HeaderButtons/HeaderButtons';
@@ -27,7 +27,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 export const HeaderBlock = (props) => {
-    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
+    const { title, titleSize = 'l', switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
     const isMobile = useContext(MobileContext);
     const { backButton, blockTag } = useContext(HeaderContext);
     const theme = useTheme();
@@ -82,12 +82,13 @@ export const HeaderBlock = (props) => {
                                 React.createElement("div", null,
                                     overtitle && (React.createElement("div", { className: b('overtitle') },
                                         React.createElement(HTML, null, overtitle))),
-                                    React.createElement("h1", { className: b('title', {
+                                    React.createElement(getHeaderTag(titleSize), {
+                                        className: b('title', {
                                             'pre-wrap': Boolean(switchingTitle),
-                                        }), id: titleId },
-                                        React.createElement(HeaderTag, { tag: blockTag }),
-                                        status,
-                                        switchingTitle ? (React.createElement(SwitchingTitle, Object.assign({}, switchingTitle))) : (React.createElement(React.Fragment, null, renderTitle ? (renderTitle(title)) : (React.createElement(HTML, null, title))))),
+                                            size: titleSize,
+                                        }),
+                                        id: titleId,
+                                    }, React.createElement(HeaderTag, { tag: blockTag }), status, switchingTitle ? (React.createElement(SwitchingTitle, Object.assign({}, switchingTitle))) : (React.createElement(React.Fragment, null, renderTitle ? (renderTitle(title)) : (React.createElement(HTML, null, title))))),
                                     React.createElement(HeaderDescription, { className: b('description', { theme: textTheme }), description: description, theme: textTheme }),
                                     React.createElement(HeaderButtons, { buttons: buttons, titleId: titleId }),
                                     children),

package/build/esm/blocks/Header/schema.d.ts

@@ -323,6 +323,10 @@ export declare const HeaderProperties: {
         type: string;
         contentType: string;
     };
+    titleSize: {
+        type: string;
+        enum: string[];
+    };
     switchingTitle: {
         type: string;
         additionalProperties: boolean;
@@ -1041,6 +1045,10 @@ export declare const HeaderBlock: {
                 type: string;
                 contentType: string;
             };
+            titleSize: {
+                type: string;
+                enum: string[];
+            };
             switchingTitle: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -1,6 +1,6 @@
 import { ImageProps } from '../../components/Image/schema';
 import { HeaderStockType } from '../../models';
-import { BlockBaseProps, ButtonBlock, MediaProps, VideoProps, mediaView, withTheme, } from '../../schema/validators/common';
+import { BlockBaseProps, ButtonBlock, MediaProps, VideoProps, mediaView, titleTextSize, withTheme, } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
 export const HeaderBackgroundProps = {
     type: 'object',
@@ -13,6 +13,10 @@ export const HeaderProperties = {
         type: 'string',
         contentType: 'text',
     },
+    titleSize: {
+        type: 'string',
+        enum: titleTextSize,
+    },
     switchingTitle: {
         type: 'object',
         additionalProperties: false,

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -14,6 +14,10 @@ export declare const HeaderSliderBlock: {
                             type: string;
                             contentType: string;
                         };
+                        titleSize: {
+                            type: string;
+                            enum: string[];
+                        };
                         switchingTitle: {
                             type: string;
                             additionalProperties: boolean;

package/build/esm/blocks/LogoRotator/Item.js

@@ -3,10 +3,9 @@ import { Link } from '@gravity-ui/uikit';
 import { Image } from '../../components';
 import { Col } from '../../grid';
 import { block } from '../../utils';
-import { getLayerModifiers } from './utils';
+import { getLayerModifiers, getLogoRotatorColSizes } from './utils';
 import './LogoRotator.css';
 const b = block('logo-rotator-block');
-const defaultColSizes = { all: 3 };
 const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', getLayerModifiers(layer, swapAnimation))}`;
 export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
     const renderLayer = (layerSrc, layer, layerUrl) => {
@@ -17,7 +16,7 @@ export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSiz
         return React.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
     };
     const isSwapping = Boolean(previousSrc);
-    return (React.createElement(Col, { sizes: colSizes || defaultColSizes },
+    return (React.createElement(Col, { sizes: getLogoRotatorColSizes(colSizes) },
         React.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
             previousSrc && renderLayer(previousSrc, 'from', previousUrl),
             renderLayer(src, previousSrc ? 'to' : 'current', url))));

package/build/esm/blocks/LogoRotator/LogoRotator.css

@@ -132,6 +132,13 @@ unpredictable css rules order in build */
   flex: 1;
   overflow: hidden;
 }
+@media (max-width: 769px) {
+  .pc-logo-rotator-block__row-item {
+    min-width: 0;
+    max-width: calc(50% - 8px);
+    flex: 0 0 calc(50% - 8px);
+  }
+}
 
 @keyframes logo-rotator-fade-out {
   from {