@gravity-ui/page-constructor 3.0.0-alpha.1 → 3.0.0-alpha.2

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -19,7 +19,7 @@ const DEFAULT_SIZES = {
 const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
-        react_1.default.createElement(components_1.BlockHeader, { title: title, description: description, className: b('header') }),
+        react_1.default.createElement(components_1.Title, { title: title, description: description, className: b('header') }),
         react_1.default.createElement("div", { className: b('items') },
             react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, links, label, icon, buttons, additionalInfo, }) => {
                 const itemLinks = links || [];

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -4,9 +4,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
 const BalancedMasonry_1 = tslib_1.__importDefault(require("../../components/BalancedMasonry/BalancedMasonry"));
-const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
 const FullWidthBackground_1 = tslib_1.__importDefault(require("../../components/FullWidthBackground/FullWidthBackground"));
 const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"));
+const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
 const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper"));
 const constants_1 = require("../../constants");
 const utils_1 = require("../../utils");
@@ -21,7 +21,7 @@ const PromoFeaturesBlock = (props) => {
     const backgroundTheme = theme || 'default';
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b({ [backgroundTheme]: true }), animate: animated },
         react_1.default.createElement(FullWidthBackground_1.default, { className: b('background', { [backgroundTheme]: true }) }),
-        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('header') }),
+        react_1.default.createElement(Title_1.default, { title: title, description: description, className: b('header') }),
         react_1.default.createElement(BalancedMasonry_1.default, { breakpointCols: breakpointColumns, className: b('card-container'), columnClassName: b('card-container-column') }, items.map(({ title: cardTitle, text, media, theme: cardTheme }, index) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';

package/build/cjs/blocks/Slider/Slider.js

@@ -7,8 +7,8 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_slick_1 = tslib_1.__importDefault(require("react-slick"));
 const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
-const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
 const OutsideClick_1 = tslib_1.__importDefault(require("../../components/OutsideClick/OutsideClick"));
+const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
 const constants_1 = require("../../constants");
 const mobileContext_1 = require("../../context/mobileContext");
 const ssrContext_1 = require("../../context/ssrContext");
@@ -185,7 +185,7 @@ const SliderBlock = (props) => {
                 type,
             }, blockClassName) },
             anchorId && react_1.default.createElement(Anchor_1.default, { id: anchorId }),
-            react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('header', { 'no-description': !description }) }),
+            react_1.default.createElement(Title_1.default, { title: title, description: description, className: b('header', { 'no-description': !description }) }),
             react_1.default.createElement(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated }, renderSlider()))));
 };
 exports.SliderBlock = SliderBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -4,11 +4,11 @@ exports.TabsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
-const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
 const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs"));
 const FullscreenImage_1 = tslib_1.__importDefault(require("../../components/FullscreenImage/FullscreenImage"));
 const utils_1 = require("../../components/Media/Image/utils");
 const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"));
+const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
 const VideoBlock_1 = require("../../components/VideoBlock/VideoBlock");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const grid_1 = require("../../grid");
@@ -54,7 +54,7 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
     };
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }) }),
+        react_1.default.createElement(Title_1.default, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
                 react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),

package/build/cjs/components/MediaBase/MediaBase.js

@@ -4,9 +4,9 @@ exports.MediaBase = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
-const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
+const Title_1 = tslib_1.__importDefault(require("../Title/Title"));
 const MediaBaseContent_1 = tslib_1.__importDefault(require("./MediaBaseContent"));
 const b = (0, utils_1.block)('media-base');
 const Card = () => null;
@@ -24,7 +24,7 @@ const MediaBase = (props) => {
     const mediaContent = !mediaOnly && react_1.default.createElement(MediaBaseContent_1.default, Object.assign({}, mediaContentProps));
     const card = children.type === Card ? children === null || children === void 0 ? void 0 : children.props.children : null;
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: onScroll, animate: animated },
-        mediaOnly && (react_1.default.createElement(BlockHeader_1.default, { className: b('header'), title: title, description: description })),
+        mediaOnly && react_1.default.createElement(Title_1.default, { className: b('header'), title: title, description: description }),
         react_1.default.createElement(grid_1.Grid, null,
             react_1.default.createElement(grid_1.Row, { className: b('row', {
                     reverse: direction === 'media-content',

package/build/cjs/components/Title/Title.css

@@ -1,111 +1,16 @@
-.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
-  margin: 0;
-}
-
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-title-block_justify_center {
-  text-align: center;
-}
-.pc-title-block_justify_end {
-  text-align: right;
+.pc-title__description {
+  margin-top: 12px;
 }
-.pc-title-block_size_xs {
+.pc-title__description .yfm {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
-}
-.pc-title-block_size_s {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
-  margin-top: 32px;
-}
-.pc-title-block_size_m {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
-  margin-top: 48px;
-}
-@media (max-width: 576px) {
-  .pc-title-block_size_m {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
-  }
-}
-.pc-title-block_size_l {
-  font-size: var(--yc-text-display-4-font-size);
-  line-height: var(--yc-text-display-4-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
-  margin-top: 96px;
-}
-@media (max-width: 577px) {
-  .pc-title-block_size_l {
-    font-size: var(--yc-text-display-2-font-size);
-    line-height: var(--yc-text-display-2-line-height);
-  }
-}
-.pc-title-block__arrow {
-  margin-top: 10px;
-}
-.pc-title-block__arrow_size_xs {
-  margin-top: 7px;
-}
-.pc-title-block__arrow_size_s {
-  margin-top: 5px;
-}
-.pc-title-block__link {
-  color: inherit;
-  text-decoration: none;
-  padding-right: 8px;
-}
-.pc-title-block__link:hover, .pc-title-block__link:active {
-  --pc-text-header-color: inherit;
-  color: inherit;
-}
-.pc-title-block__link:hover {
-  cursor: pointer;
-}
-.pc-title-block__link:hover .pc-title-block__arrow {
-  margin-left: 10px;
-}
-.pc-title-block__link:hover .pc-title-block__arrow_size_xs {
-  margin-left: 6px;
-}
-.pc-title-block__link:hover .pc-title-block__arrow_size_s {
-  margin-left: 8px;
-}
-.pc-title-block__text {
-  white-space: normal;
-}
-.pc-title-block__text a {
-  outline: none;
-  color: var(--yc-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-}
-.utilityfocus .pc-title-block__text a:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-title-block__text a:hover, .pc-title-block__text a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
-}
-.pc-title-block__wrapper {
-  white-space: nowrap;
 }
-.pc-title-block_reset-margin {
-  margin-top: 0;
+.pc-title__description_titleSize_s, .pc-title__description_titleSize_xs {
+  margin-top: 8px;
 }
-@media (max-width: 577px) {
-  .pc-title-block_size_l:not(.pc-title-block_reset-margin) {
-    margin-top: 48px;
-  }
-  .pc-title-block__arrow_size_m, .pc-title-block__arrow_size_l {
-    margin-top: 9px;
-  }
+.pc-title__description_titleSize_s .yfm, .pc-title__description_titleSize_xs .yfm {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }

package/build/cjs/components/Title/Title.d.ts

@@ -1,10 +1,7 @@
-import { TextSize, TitleProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 20 | 22 | 26 | 38;
-export interface TitleFullProps extends TitleProps {
-    className?: string;
-    onClick?: () => void;
-    dataQa?: string;
-    resetMargin?: boolean;
+import { GridColumnSizesType } from '../../grid';
+import { ClassNameProps, TitleProps as TitleParams } from '../../models';
+export interface TitleProps extends TitleParams {
+    colSizes?: GridColumnSizesType;
 }
-declare const Title: (props: TitleFullProps) => JSX.Element;
+declare const Title: ({ title, description, className, colSizes, }: TitleProps & ClassNameProps) => JSX.Element | null;
 export default Title;

package/build/cjs/components/Title/Title.js

@@ -1,57 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArrowSize = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const __1 = require("../");
-const locationContext_1 = require("../../context/locationContext");
-const mobileContext_1 = require("../../context/mobileContext");
+const react_1 = tslib_1.__importDefault(require("react"));
+const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
-const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
-const b = (0, utils_1.block)('title-block');
-function getArrowSize(size, isMobile) {
-    switch (size) {
-        case 'xs':
-            return 13;
-        case 's':
-            return 16;
-        case 'm':
-            return isMobile ? 22 : 24;
-        case 'l':
-            return isMobile ? 26 : 38;
-        default:
-            return 20;
+const YFMWrapper_1 = tslib_1.__importDefault(require("../YFMWrapper/YFMWrapper"));
+const TitleItem_1 = tslib_1.__importDefault(require("./TitleItem"));
+const b = (0, utils_1.block)('title');
+const Title = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
+    if (!title && !description) {
+        return null;
     }
-}
-exports.getArrowSize = getArrowSize;
-const Title = (props) => {
-    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, dataQa, resetMargin = true, } = props;
-    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const textMarkup = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(__1.HTML, { className: b('text') }, text),
-        custom && (react_1.default.createElement(react_1.default.Fragment, null,
-            "\u00A0",
-            react_1.default.createElement("span", { className: b('custom') }, custom)))));
-    let content;
-    const insideClickableContent = (react_1.default.createElement("span", { className: b('wrapper') },
-        textMarkup,
-        "\u00A0",
-        react_1.default.createElement(__1.ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })));
-    if (!url && !onClick) {
-        content = textMarkup;
-    }
-    else if (url) {
-        content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick }), insideClickableContent));
-    }
-    else if (onClick) {
-        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
-    }
-    return (react_1.default.createElement(react_1.Fragment, null,
-        anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),
-        react_1.default.createElement((0, utils_1.getHeaderTag)(textSize), {
-            className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
-            'data-qa': `${dataQa}-header`,
-        }, content)));
+    const _a = !title || typeof title === 'string' ? { text: title } : title, { text } = _a, titleProps = tslib_1.__rest(_a, ["text"]);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        text && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
+            react_1.default.createElement(TitleItem_1.default, Object.assign({ text: text }, titleProps)))),
+        description && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
+            react_1.default.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
+                react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))))));
 };
 exports.default = Title;

package/build/cjs/components/Title/TitleItem.css

@@ -0,0 +1,111 @@
+.pc-title-item_size_l, .pc-title-item_size_m, .pc-title-item_size_s, .pc-title-item_size_xs {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-title-item_justify_center {
+  text-align: center;
+}
+.pc-title-item_justify_end {
+  text-align: right;
+}
+.pc-title-item_size_xs {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.pc-title-item_size_s {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  margin-top: 32px;
+}
+.pc-title-item_size_m {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  margin-top: 48px;
+}
+@media (max-width: 576px) {
+  .pc-title-item_size_m {
+    font-size: var(--yc-text-display-1-font-size);
+    line-height: var(--yc-text-display-1-line-height);
+  }
+}
+.pc-title-item_size_l {
+  font-size: var(--yc-text-display-4-font-size);
+  line-height: var(--yc-text-display-4-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  margin-top: 96px;
+}
+@media (max-width: 577px) {
+  .pc-title-item_size_l {
+    font-size: var(--yc-text-display-2-font-size);
+    line-height: var(--yc-text-display-2-line-height);
+  }
+}
+.pc-title-item__arrow {
+  margin-top: 10px;
+}
+.pc-title-item__arrow_size_xs {
+  margin-top: 7px;
+}
+.pc-title-item__arrow_size_s {
+  margin-top: 5px;
+}
+.pc-title-item__link {
+  color: inherit;
+  text-decoration: none;
+  padding-right: 8px;
+}
+.pc-title-item__link:hover, .pc-title-item__link:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+.pc-title-item__link:hover {
+  cursor: pointer;
+}
+.pc-title-item__link:hover .pc-title-item__arrow {
+  margin-left: 10px;
+}
+.pc-title-item__link:hover .pc-title-item__arrow_size_xs {
+  margin-left: 6px;
+}
+.pc-title-item__link:hover .pc-title-item__arrow_size_s {
+  margin-left: 8px;
+}
+.pc-title-item__text {
+  white-space: normal;
+}
+.pc-title-item__text a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-title-item__text a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-title-item__text a:hover, .pc-title-item__text a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-title-item__wrapper {
+  white-space: nowrap;
+}
+.pc-title-item_reset-margin {
+  margin-top: 0;
+}
+@media (max-width: 577px) {
+  .pc-title-item_size_l:not(.pc-title-item_reset-margin) {
+    margin-top: 48px;
+  }
+  .pc-title-item__arrow_size_m, .pc-title-item__arrow_size_l {
+    margin-top: 9px;
+  }
+}

package/build/cjs/components/Title/TitleItem.d.ts

@@ -0,0 +1,10 @@
+import { TextSize, TitleItemProps } from '../../models';
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
+export interface TitleItemFullProps extends TitleItemProps {
+    className?: string;
+    onClick?: () => void;
+    dataQa?: string;
+    resetMargin?: boolean;
+}
+declare const Title: (props: TitleItemFullProps) => JSX.Element;
+export default Title;

package/build/cjs/components/Title/TitleItem.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getArrowSize = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const __1 = require("../");
+const locationContext_1 = require("../../context/locationContext");
+const mobileContext_1 = require("../../context/mobileContext");
+const utils_1 = require("../../utils");
+const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
+const b = (0, utils_1.block)('title-item');
+function getArrowSize(size, isMobile) {
+    switch (size) {
+        case 'xs':
+            return 13;
+        case 's':
+            return 16;
+        case 'm':
+            return isMobile ? 22 : 24;
+        case 'l':
+            return isMobile ? 26 : 38;
+        default:
+            return 20;
+    }
+}
+exports.getArrowSize = getArrowSize;
+const Title = (props) => {
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, dataQa, resetMargin = true, } = props;
+    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const textMarkup = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.HTML, { className: b('text') }, text),
+        custom && (react_1.default.createElement(react_1.default.Fragment, null,
+            "\u00A0",
+            react_1.default.createElement("span", { className: b('custom') }, custom)))));
+    let content;
+    const insideClickableContent = (react_1.default.createElement("span", { className: b('wrapper') },
+        textMarkup,
+        "\u00A0",
+        react_1.default.createElement(__1.ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })));
+    if (!url && !onClick) {
+        content = textMarkup;
+    }
+    else if (url) {
+        content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick }), insideClickableContent));
+    }
+    else if (onClick) {
+        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
+    }
+    return (react_1.default.createElement(react_1.Fragment, null,
+        anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),
+        react_1.default.createElement((0, utils_1.getHeaderTag)(textSize), {
+            className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
+            'data-qa': `${dataQa}-header`,
+        }, content)));
+};
+exports.default = Title;

package/build/cjs/components/index.d.ts

@@ -5,7 +5,7 @@ export { default as BackgroundMedia } from './BackgroundMedia/BackgroundMedia';
 export { default as BackLink } from './BackLink/BackLink';
 export { default as BalancedMasonry } from './BalancedMasonry/BalancedMasonry';
 export { default as BlockBase } from './BlockBase/BlockBase';
-export { default as BlockHeader } from './BlockHeader/BlockHeader';
+export { default as BlockHeader } from './Title/Title';
 export { default as Button } from './Button/Button';
 export { default as CardBase } from './CardBase/CardBase';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';

package/build/cjs/components/index.js

@@ -18,8 +18,8 @@ var BalancedMasonry_1 = require("./BalancedMasonry/BalancedMasonry");
 Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return __importDefault(BalancedMasonry_1).default; } });
 var BlockBase_1 = require("./BlockBase/BlockBase");
 Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return __importDefault(BlockBase_1).default; } });
-var BlockHeader_1 = require("./BlockHeader/BlockHeader");
-Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return __importDefault(BlockHeader_1).default; } });
+var Title_1 = require("./Title/Title");
+Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return __importDefault(Title_1).default; } });
 var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
@@ -52,8 +52,8 @@ var ReactPlayer_1 = require("./ReactPlayer/ReactPlayer");
 Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return __importDefault(ReactPlayer_1).default; } });
 var Table_1 = require("./Table/Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
-var Title_1 = require("./Title/Title");
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return __importDefault(Title_1).default; } });
+var Title_2 = require("./Title/Title");
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return __importDefault(Title_2).default; } });
 var ToggleArrow_1 = require("./ToggleArrow/ToggleArrow");
 Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return __importDefault(ToggleArrow_1).default; } });
 var UnpublishedLabel_1 = require("./UnpublishedLabel/UnpublishedLabel");

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

@@ -2,7 +2,7 @@
 import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
-import { AnchorProps, Animatable, BackgroundImageProps, BlockHeaderProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleBaseProps, TitleProps } from './common';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, TitleProps } from './common';
 import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
@@ -69,7 +69,7 @@ export interface SliderProps extends Childable, Animatable, LoadableChildren {
         text: string;
         size?: TextSize;
     };
-    title?: TitleBaseProps;
+    title?: TitleItemBaseProps;
     description?: string;
     autoplay?: number;
     randomOrder?: boolean;
@@ -120,7 +120,7 @@ export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' |
 }
 export interface ExtendedFeaturesProps extends Animatable {
     items: ExtendedFeaturesItem[];
-    title?: TitleProps | string;
+    title?: TitleItemProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }
@@ -132,7 +132,7 @@ export interface PromoFeaturesItem {
 }
 export interface PromoFeaturesProps extends Animatable {
     items: PromoFeaturesItem[];
-    title?: TitleProps | string;
+    title?: TitleItemProps | string;
     description?: string;
     theme?: 'grey' | 'default';
 }
@@ -207,14 +207,14 @@ export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSize
     caption?: string;
     media?: ThemedMediaProps;
 }
-export interface TabsBlockProps extends BlockHeaderProps, Animatable {
+export interface TabsBlockProps extends TitleProps, Animatable {
     tabsColSizes?: GridColumnSizesType;
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title: TitleItemProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }
@@ -227,7 +227,7 @@ export type FilterItem = {
     card: SubBlockModels;
 };
 export interface FilterBlockProps extends Animatable, LoadableChildren {
-    title?: TitleProps | string;
+    title?: TitleItemProps | string;
     description?: string;
     tags: FilterTag[];
     items: FilterItem[];
@@ -257,7 +257,7 @@ export interface ContentLayoutBlockProps {
     fileContent?: FileLinkProps[];
 }
 export interface ContentBlockProps {
-    title?: TitleBaseProps | string;
+    title?: TitleItemBaseProps | string;
     text?: string;
     additionalInfo?: string;
     links?: LinkProps[];

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

@@ -249,11 +249,11 @@ export interface HeaderBreadCrumbsProps extends ClassNameProps {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
 }
-export interface TitleProps extends Justifyable, TitleBaseProps {
+export interface TitleItemProps extends Justifyable, TitleItemBaseProps {
     navTitle?: string;
     anchor?: string;
 }
-export interface TitleBaseProps {
+export interface TitleItemBaseProps {
     text: string;
     textSize?: TextSize;
     url?: string;
@@ -334,8 +334,8 @@ export interface AuthorProps {
     type?: AuthorType;
     dataQa?: string;
 }
-export interface BlockHeaderProps {
-    title?: TitleProps | string;
+export interface TitleProps {
+    title?: TitleItemProps | string;
     description?: string;
 }
 export {};

package/build/cjs/sub-blocks/Content/Content.js

@@ -37,11 +37,11 @@ function getButtonSize(size) {
 const Content = (props) => {
     const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, } = props;
     const titleProps = tslib_1.__rest(!title || typeof title === 'string'
-        ? { text: title, textSize: getTextSize(size) }
-        : title, []);
+        ? { text: title, textSize: getTextSize(size), resetMargin: true }
+        : Object.assign(Object.assign({}, title), { resetMargin: true }), []);
     const hasTitle = Boolean(title);
     return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes },
-        title && react_1.default.createElement(components_1.Title, Object.assign({ className: b('title') }, titleProps, { resetMargin: true })),
+        title && react_1.default.createElement(components_1.Title, { title: titleProps }),
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },

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

@@ -1,9 +1,9 @@
-import { TitleProps } from '../models';
+import { TitleItemProps } from '../models';
 import { Parser, Transformer, TransformerRaw, typografTransformer, yfmTransformer } from './common';
 export declare const blockHeaderTransformer: ({
     fields: string[];
     transformer: typeof typografTransformer;
-    parser: (transformer: Transformer, title: TitleProps | string) => string | {
+    parser: (transformer: Transformer, title: TitleItemProps | string) => string | {
         text: string;
         navTitle?: string | undefined;
         anchor?: string | undefined;