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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.18.0](https://github.com/gravity-ui/page-constructor/compare/v2.18.0...v2.18.0) (2023-05-15)
+
+
+### Features
+
+* **HubspotForm:** add ref forwarding for HS form ([#332](https://github.com/gravity-ui/page-constructor/issues/332)) ([37b75d3](https://github.com/gravity-ui/page-constructor/commit/37b75d31c09e8dc061d718828bcccc72b037e106))
+
+
+### Bug Fixes
+
+* config gulpfile for tests ([a5cb59d](https://github.com/gravity-ui/page-constructor/commit/a5cb59d0bc1e3a8c09babed0c5ace9a2253416c3))
+
+## [2.17.0](https://github.com/gravity-ui/page-constructor/compare/v2.16.0...v2.17.0) (2023-05-12)
+
+
+### Features
+
+* drop rules overriding ([#303](https://github.com/gravity-ui/page-constructor/issues/303)) ([0c13398](https://github.com/gravity-ui/page-constructor/commit/0c1339885ce3b930ab9428b585aa6dd020b0d298))
+
 ## [2.16.0](https://github.com/gravity-ui/page-constructor/compare/v2.15.0...v2.16.0) (2023-05-11)
 
 

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/Anchor/Anchor.d.ts

@@ -2,7 +2,7 @@ import { ClassNameProps } from '../../models';
 export declare const qaIdByDefault = "qa-anchor";
 export interface AnchorProps extends ClassNameProps {
     id: string;
-    dataQa?: string;
+    qa?: string;
 }
-declare const Anchor: ({ id, className, dataQa }: AnchorProps) => JSX.Element;
+declare const Anchor: ({ id, className, qa }: AnchorProps) => JSX.Element;
 export default Anchor;

package/build/cjs/components/Anchor/Anchor.js

@@ -7,5 +7,5 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('Anchor');
 exports.qaIdByDefault = 'qa-anchor';
-const Anchor = ({ id, className, dataQa }) => (react_1.default.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa || exports.qaIdByDefault }));
+const Anchor = ({ id, className, qa }) => (react_1.default.createElement("div", { id: id, className: b(null, className), "data-qa": qa || exports.qaIdByDefault }));
 exports.default = Anchor;

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/grid/Col/Col.d.ts

@@ -7,4 +7,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     dataQa?: string;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "dataQa" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "visible" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "visible" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/internal-typings/global.d.ts

@@ -10,22 +10,17 @@ declare module '*.svg' {
     export default path;
 }
 
-interface CreateFormProps {
-    portalId: string;
-    formId: string;
-    region?: string;
-    target?: string;
-    cssClass?: string;
-    formInstanceId?: string;
-}
+declare module '*.md';
 
-interface Window {
-    hbspt?: {
-        forms: {
-            create: (args: CreateFormProps) => unknown;
-        };
-    };
-    ymaps: Ymaps;
+declare namespace Hbspt {
+    interface CreateFormProps {
+        portalId: string;
+        formId: string;
+        region?: string;
+        target?: string;
+        cssClass?: string;
+        formInstanceId?: string;
+    }
 }
 
 declare namespace Ymaps {
@@ -63,4 +58,11 @@ declare namespace Ymaps {
     }
 }
 
-declare module '*.md';
+interface Window {
+    hbspt?: {
+        forms: {
+            create: (args: Hbspt.CreateFormProps) => unknown;
+        };
+    };
+    ymaps: Ymaps;
+}