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

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/sub-blocks/HubspotForm/HubspotFormContainer.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { HubspotFormProps } from '../../models';
 type HubspotFormContainerPropsKeys = 'className' | 'formId' | 'formInstanceId' | 'portalId' | 'region' | 'formClassName' | 'createDOMElement';
 type HubspotFormContainerProps = Pick<HubspotFormProps, HubspotFormContainerPropsKeys>;
-declare const HubspotFormContainer: (props: HubspotFormContainerProps) => JSX.Element;
+declare const HubspotFormContainer: React.ForwardRefExoticComponent<HubspotFormContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default HubspotFormContainer;

package/build/cjs/sub-blocks/HubspotForm/HubspotFormContainer.js

@@ -4,10 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../hooks");
 const loadHubspotScript_1 = tslib_1.__importDefault(require("./loadHubspotScript"));
-const HubspotFormContainer = (props) => {
+const HubspotFormContainer = (0, react_1.forwardRef)((props, ref) => {
     const { className, formId, formInstanceId, portalId, region, formClassName, createDOMElement, } = props;
     const containerRef = (0, react_1.useRef)(null);
     const hsContainerRef = (0, react_1.useRef)();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (0, react_1.useImperativeHandle)(ref, () => containerRef.current);
     const containerId = formInstanceId
         ? `hubspot-form-${formId}-${formInstanceId}`
         : `hubspot-form-${formId}`;
@@ -45,5 +47,6 @@ const HubspotFormContainer = (props) => {
         };
     });
     return react_1.default.createElement("div", { className: className, id: containerId, ref: containerRef });
-};
+});
+HubspotFormContainer.displayName = 'HubspotFormContainer';
 exports.default = HubspotFormContainer;

package/build/cjs/sub-blocks/HubspotForm/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { HubspotFormProps } from '../../models';
-declare const HubspotForm: React.FunctionComponent<HubspotFormProps>;
+declare const HubspotForm: React.ForwardRefExoticComponent<HubspotFormProps & React.RefAttributes<HTMLDivElement>>;
 export default HubspotForm;

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -10,7 +10,7 @@ const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const HubspotFormContainer_1 = tslib_1.__importDefault(require("./HubspotFormContainer"));
 const b = (0, utils_1.block)('hubspot-form');
-const HubspotForm = (props) => {
+const HubspotForm = (0, react_1.forwardRef)((props, ref) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
     analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
@@ -25,10 +25,10 @@ const HubspotForm = (props) => {
         onBeforeSubmit,
         onLoad,
         onSubmitError,
-        onSubmit: (e) => {
+        onSubmit: (event) => {
             handleMetrika === null || handleMetrika === void 0 ? void 0 : handleMetrika({ pixelEvents });
             handleAnalytics(analyticsEvents);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
         },
     }), [
         onBeforeLoad,
@@ -42,6 +42,7 @@ const HubspotForm = (props) => {
         onSubmitError,
     ]);
     (0, hooks_1.useHandleHubspotEvents)(handlers, formId);
-    return (react_1.default.createElement(HubspotFormContainer_1.default, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
-};
+    return (react_1.default.createElement(HubspotFormContainer_1.default, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region, ref: ref }));
+});
+HubspotForm.displayName = 'HubspotForm';
 exports.default = HubspotForm;

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;

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { AnimateBlock, BlockHeader, HTML } from '../../components/';
+import { AnimateBlock, HTML, Title } from '../../components/';
 import Image from '../../components/Image/Image';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
@@ -16,7 +16,7 @@ const DEFAULT_SIZES = {
 export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
     const { themeValue: theme } = useContext(ThemeValueContext);
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
-        React.createElement(BlockHeader, { title: title, description: description, className: b('header') }),
+        React.createElement(Title, { title: title, description: description, className: b('header') }),
         React.createElement("div", { className: b('items') },
             React.createElement(Row, null, items.map(({ title: itemTitle, text, link, links, label, icon, buttons, additionalInfo, }) => {
                 const itemLinks = links || [];

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import BalancedMasonry from '../../components/BalancedMasonry/BalancedMasonry';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import FullWidthBackground from '../../components/FullWidthBackground/FullWidthBackground';
 import Media from '../../components/Media/Media';
+import Title from '../../components/Title/Title';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { BREAKPOINTS } from '../../constants';
 import { block } from '../../utils';
@@ -19,7 +19,7 @@ const PromoFeaturesBlock = (props) => {
     const backgroundTheme = theme || 'default';
     return (React.createElement(AnimateBlock, { className: b({ [backgroundTheme]: true }), animate: animated },
         React.createElement(FullWidthBackground, { className: b('background', { [backgroundTheme]: true }) }),
-        React.createElement(BlockHeader, { title: title, description: description, className: b('header') }),
+        React.createElement(Title, { title: title, description: description, className: b('header') }),
         React.createElement(BalancedMasonry, { 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/esm/blocks/Slider/Slider.js

@@ -3,8 +3,8 @@ import _ from 'lodash';
 import SlickSlider from 'react-slick';
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import OutsideClick from '../../components/OutsideClick/OutsideClick';
+import Title from '../../components/Title/Title';
 import { BREAKPOINTS } from '../../constants';
 import { MobileContext } from '../../context/mobileContext';
 import { SSRContext } from '../../context/ssrContext';
@@ -182,7 +182,7 @@ export const SliderBlock = (props) => {
                 type,
             }, blockClassName) },
             anchorId && React.createElement(Anchor, { id: anchorId }),
-            React.createElement(BlockHeader, { title: title, description: description, className: b('header', { 'no-description': !description }) }),
+            React.createElement(Title, { title: title, description: description, className: b('header', { 'no-description': !description }) }),
             React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider()))));
 };
 // TODO remove this and rework PriceDetailed CLOUDFRONT-12230

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

@@ -1,10 +1,10 @@
 import React, { Fragment, useContext, useRef, useState } from 'react';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
 import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import Media from '../../components/Media/Media';
+import Title from '../../components/Title/Title';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
@@ -51,7 +51,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
     };
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        React.createElement(BlockHeader, { title: title, description: description, className: b('block-title', { centered: centered }) }),
+        React.createElement(Title, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         React.createElement(Row, null,
             React.createElement(Col, { sizes: tabsColSizes },
                 React.createElement(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),

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

@@ -3,7 +3,7 @@ import './Anchor.css';
 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/esm/components/Anchor/Anchor.js

@@ -4,5 +4,5 @@ import { block } from '../../utils';
 import './Anchor.css';
 const b = block('Anchor');
 export const qaIdByDefault = 'qa-anchor';
-const Anchor = ({ id, className, dataQa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa || qaIdByDefault }));
+const Anchor = ({ id, className, qa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": qa || qaIdByDefault }));
 export default Anchor;

package/build/esm/components/MediaBase/MediaBase.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
 import { Col, Grid, GridColumnSize, Row } from '../../grid';
 import { block } from '../../utils';
+import Title from '../Title/Title';
 import MediaContent from './MediaBaseContent';
 import './MediaBase.css';
 const b = block('media-base');
@@ -22,7 +22,7 @@ export const MediaBase = (props) => {
     const mediaContent = !mediaOnly && React.createElement(MediaContent, Object.assign({}, mediaContentProps));
     const card = children.type === Card ? children === null || children === void 0 ? void 0 : children.props.children : null;
     return (React.createElement(AnimateBlock, { className: b(), onScroll: onScroll, animate: animated },
-        mediaOnly && (React.createElement(BlockHeader, { className: b('header'), title: title, description: description })),
+        mediaOnly && React.createElement(Title, { className: b('header'), title: title, description: description }),
         React.createElement(Grid, null,
             React.createElement(Row, { className: b('row', {
                     reverse: direction === 'media-content',

package/build/esm/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/esm/components/Title/Title.d.ts

@@ -1,11 +1,8 @@
-import { TextSize, TitleProps } from '../../models';
+import { GridColumnSizesType } from '../../grid';
+import { ClassNameProps, TitleProps as TitleParams } from '../../models';
 import './Title.css';
-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;
+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/esm/components/Title/Title.js

@@ -1,53 +1,21 @@
-import React, { Fragment, useContext } from 'react';
-import { HTML, ToggleArrow } from '../';
-import { LocationContext } from '../../context/locationContext';
-import { MobileContext } from '../../context/mobileContext';
-import { block, getHeaderTag, getLinkProps } from '../../utils';
-import Anchor from '../Anchor/Anchor';
+import { __rest } from "tslib";
+import React from 'react';
+import { Col } from '../../grid';
+import { block } from '../../utils';
+import YFMWrapper from '../YFMWrapper/YFMWrapper';
+import TitleItem from './TitleItem';
 import './Title.css';
-const b = block('title-block');
-export 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 b = block('title');
+const Title = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
+    if (!title && !description) {
+        return null;
     }
-}
-const Title = (props) => {
-    const isMobile = useContext(MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, dataQa, resetMargin = true, } = props;
-    const { hostname } = useContext(LocationContext);
-    const textMarkup = (React.createElement(React.Fragment, null,
-        React.createElement(HTML, { className: b('text') }, text),
-        custom && (React.createElement(React.Fragment, null,
-            "\u00A0",
-            React.createElement("span", { className: b('custom') }, custom)))));
-    let content;
-    const insideClickableContent = (React.createElement("span", { className: b('wrapper') },
-        textMarkup,
-        "\u00A0",
-        React.createElement(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.createElement("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick }), insideClickableContent));
-    }
-    else if (onClick) {
-        content = (React.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
-    }
-    return (React.createElement(Fragment, null,
-        anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),
-        React.createElement(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 = __rest(_a, ["text"]);
+    return (React.createElement("div", { className: b(null, className) },
+        text && (React.createElement(Col, { reset: true, sizes: colSizes },
+            React.createElement(TitleItem, Object.assign({ text: text }, titleProps)))),
+        description && (React.createElement(Col, { reset: true, sizes: colSizes },
+            React.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
+                React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))))));
 };
 export default Title;

package/build/esm/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/esm/components/Title/TitleItem.d.ts

@@ -0,0 +1,11 @@
+import { TextSize, TitleItemProps } from '../../models';
+import './TitleItem.css';
+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;