@gravity-ui/page-constructor 1.0.0

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactPlayerBlock = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const react_player_1 = (0, tslib_1.__importDefault)(require("react-player"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const models_1 = require("../../models");
+const CustomBarControls_1 = (0, tslib_1.__importDefault)(require("./CustomBarControls"));
+const videoContext_1 = require("../../context/videoContext");
+const metrikaContext_1 = require("../../context/metrikaContext");
+const mobileContext_1 = require("../../context/mobileContext");
+const icons_1 = require("../../icons");
+const b = (0, utils_1.block)('ReactPlayer');
+const FPS = 60;
+// eslint-disable-next-line react/display-name
+exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, } = props;
+    const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
+    const mute = initiallyMuted || autoPlay;
+    const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
+    const ref = (0, react_1.useRef)(null);
+    const [playerRef, setPlayerRef] = (0, react_1.useState)();
+    const [isPlaying, setIsPlaying] = (0, react_1.useState)(autoPlay);
+    const [playedPercent, setPlayedPercent] = (0, react_1.useState)(0);
+    const [height, setHeight] = (0, react_1.useState)(0);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const [muted, setMuted] = (0, react_1.useState)(mute);
+    const [started, setStarted] = (0, react_1.useState)(autoPlay);
+    const [paused, setPaused] = (0, react_1.useState)(false);
+    const [ended, setEnded] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(originRef, () => ({
+        pause: () => setIsPlaying(false),
+    }));
+    (0, react_1.useEffect)(() => {
+        if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
+            setMuted(true);
+        }
+    }, [playingVideoRef]);
+    (0, react_1.useEffect)(() => {
+        if (showPreview) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
+        }
+    }, [showPreview, playerRef]);
+    (0, react_1.useEffect)(() => {
+        if (playerRef) {
+            setIsPlaying(autoPlay);
+        }
+    }, [autoPlay, playerRef]);
+    (0, react_1.useEffect)(() => setMuted(mute), [mute]);
+    (0, react_1.useEffect)(() => {
+        if (!started && isPlaying) {
+            setStarted(true);
+        }
+    }, [isPlaying, started]);
+    (0, react_1.useEffect)(() => {
+        if (started && !Number.isNaN(Number(elapsedTime))) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(elapsedTime !== null && elapsedTime !== void 0 ? elapsedTime : 0, 'seconds');
+        }
+    }, [elapsedTime, playerRef, started]);
+    (0, react_1.useEffect)(() => {
+        const updateSize = lodash_1.default.debounce(() => {
+            if (ref.current) {
+                // We need to get parent's width does not equal 0
+                const parentElement = getParentElement(ref.current);
+                const { paddingLeft, paddingRight } = getComputedStyle(parentElement);
+                const newWidth = parentElement.offsetWidth -
+                    parseFloat(paddingLeft) -
+                    parseFloat(paddingRight);
+                setWidth(newWidth);
+                setHeight(Math.floor(getHeight(newWidth)));
+            }
+        }, 200);
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, []);
+    const playIcon = (0, react_1.useMemo)(() => {
+        let playButtonContent;
+        switch (type) {
+            case models_1.PlayButtonType.Text:
+                playButtonContent = text;
+                break;
+            case models_1.PlayButtonType.Default:
+            default:
+                playButtonContent = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 });
+                break;
+        }
+        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
+    }, [type, theme, text, buttonClassName]);
+    const changeMute = (0, react_1.useCallback)((isMuted) => {
+        if (isMuted && playerRef) {
+            playerRef.seekTo(0);
+            setPlayedPercent(0);
+        }
+        if (metrika && videoMetrika) {
+            const { play, stop, counterName } = videoMetrika;
+            const goal = isMuted ? play : stop;
+            if (goal) {
+                metrika.reachGoals(goal, counterName);
+            }
+        }
+        if (isMuted) {
+            setProps({ playingVideoRef: ref.current });
+        }
+        // In order to the progress bar to update (equals 0) before displaying
+        setTimeout(() => setMuted(!isMuted), 0);
+    }, [playerRef, setProps, videoMetrika, metrika]);
+    const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
+    const handleClickPreview = (0, react_1.useCallback)(() => {
+        setIsPlaying(true);
+        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
+        if (metrika && videoMetrika) {
+            const { play, counterName } = videoMetrika;
+            if (play) {
+                metrika.reachGoals(play, counterName);
+            }
+        }
+    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
+    const onPause = (0, react_1.useCallback)(() => {
+        // For support correct state for youtube
+        setIsPlaying(false);
+        if (controls === models_1.MediaVideoControlsType.Custom) {
+            setPaused(true);
+            setIsPlaying(true);
+        }
+    }, [controls, setIsPlaying, setPaused]);
+    const onStart = (0, react_1.useCallback)(() => {
+        if (!autoPlay && !initiallyMuted) {
+            setMuted(false);
+        }
+    }, [autoPlay, initiallyMuted]);
+    const onPlay = (0, react_1.useCallback)(() => {
+        setIsPlaying(true);
+        if (controls === models_1.MediaVideoControlsType.Custom) {
+            if (ended) {
+                changeMute(false);
+            }
+            else if (paused) {
+                changeMute(muted);
+            }
+            setEnded(false);
+            setPaused(false);
+        }
+    }, [changeMute, controls, ended, muted, paused]);
+    const onProgress = (0, react_1.useCallback)((progress) => {
+        setPlayedPercent(progress.played);
+        if (progress.played === 1) {
+            setMuted(true);
+        }
+    }, []);
+    const onEnded = (0, react_1.useCallback)(() => {
+        // Youtube videos not muted after finishing playing and start again.
+        // 'onEnded' does not fire when 'loop' is set to true.
+        // It is custom loop with muted sound after finishing playing and start again.
+        if (loop) {
+            setPlayedPercent(0);
+            setIsPlaying(true);
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(0);
+        }
+        setEnded(true);
+    }, [loop, playerRef]);
+    const renderCustomBarControls = (0, react_1.useCallback)((isMuted, elapsedTimePercent) => {
+        if (controls !== models_1.MediaVideoControlsType.Custom || !isPlaying) {
+            return null;
+        }
+        return (react_1.default.createElement(CustomBarControls_1.default, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
+                isMuted,
+                changeMute: (event) => {
+                    event.stopPropagation();
+                    changeMute(isMuted);
+                },
+            }, elapsedTimePercent: elapsedTimePercent }));
+    }, [controls, isPlaying, customBarControlsClassName, changeMute]);
+    return (react_1.default.createElement("div", { className: b({ wrapper: !height }, className), ref: ref, onClick: handleClick },
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: height || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
+        renderCustomBarControls(muted, playedPercent)));
+});
+function getHeight(width) {
+    return (width / 16) * 9;
+}
+function getParentElement(element) {
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+        return element;
+    }
+    return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
+}
+exports.default = exports.ReactPlayerBlock;

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

@@ -0,0 +1,6 @@
+import { WithChildren } from '../../models';
+export interface RouterLinkProps {
+    href: string;
+}
+declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
+export default RouterLink;

package/build/cjs/components/RouterLink/RouterLink.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const locationContext_1 = require("../../context/locationContext");
+const RouterLink = ({ href, children }) => {
+    const { Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    return Link ? react_1.default.createElement(Link, { href: href }, children) : react_1.default.createElement(react_1.Fragment, null, children);
+};
+exports.default = RouterLink;

package/build/cjs/components/Share/Share.css

@@ -0,0 +1,52 @@
+.pc-share-block__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-share-block__title {
+  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);
+  text-align: center;
+  font-weight: normal;
+}
+.pc-share-block__items {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+.pc-share-block__item {
+  display: flex;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 100%;
+}
+.pc-share-block__item_type_vk {
+  background-color: var(--yc-color-vk);
+}
+.pc-share-block__item_type_facebook {
+  background-color: var(--yc-color-facebook);
+}
+.pc-share-block__item_type_twitter {
+  background-color: var(--yc-color-twitter);
+}
+.pc-share-block__item_type_telegram {
+  background-color: var(--yc-color-telegram);
+}
+.pc-share-block__item:before {
+  border-radius: 100%;
+}
+.pc-share-block__item:hover:before {
+  /* stylelint-disable-next-line declaration-no-important */
+  background-color: var(--yc-color-base-generic) !important;
+  border-radius: 100%;
+}
+.pc-share-block__item + .pc-share-block__item {
+  margin-left: 12px;
+}
+.pc-share-block__item svg {
+  color: var(--yc-color-base-background);
+}

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

@@ -0,0 +1,7 @@
+import { PCShareSocialNetwork } from '../../models';
+export interface ShareProps {
+    items: PCShareSocialNetwork[];
+    title?: string;
+}
+declare const Share: ({ items, title }: ShareProps) => JSX.Element;
+export default Share;

package/build/cjs/components/Share/Share.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const models_1 = require("../../models");
+const locationContext_1 = require("../../context/locationContext");
+const i18n_1 = (0, tslib_1.__importDefault)(require("./i18n"));
+const b = (0, utils_1.block)('share-block');
+// TODO https://st.yandex-team.ru/CLOUDFRONT-11753
+const pcShareSocialNetwork = {
+    [models_1.PCShareSocialNetwork.Vk]: uikit_1.ShareSocialNetwork.VK,
+    [models_1.PCShareSocialNetwork.Telegram]: uikit_1.ShareSocialNetwork.Telegram,
+    [models_1.PCShareSocialNetwork.Twitter]: uikit_1.ShareSocialNetwork.Twitter,
+    [models_1.PCShareSocialNetwork.Facebook]: uikit_1.ShareSocialNetwork.Facebook,
+};
+const Share = ({ items, title }) => {
+    const { pathname, hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("h5", { className: b('title') }, title || (0, i18n_1.default)('constructor-share')),
+        react_1.default.createElement("div", { className: b('items') }, items.map((type) => (react_1.default.createElement(uikit_1.ShareList.Item, { key: type, url: (0, utils_1.getAbsolutePath)(hostname, pathname), className: b('item', { type: type.toLowerCase() }), type: pcShareSocialNetwork[type] }))))));
+};
+exports.default = Share;

package/build/cjs/components/Share/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "constructor-share": "Share"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/Share/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = (0, tslib_1.__importDefault)(require("./en.json"));
+const ru_json_1 = (0, tslib_1.__importDefault)(require("./ru.json"));
+const COMPONENT = 'Share';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/Share/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "constructor-share": "Поделиться"
+}

package/build/cjs/components/Table/Table.css

@@ -0,0 +1,82 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-table {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  margin-top: 32px;
+}
+.pc-table__table {
+  width: 100%;
+  overflow-x: auto;
+}
+.pc-table__row {
+  display: flex;
+}
+.pc-table__row:first-child {
+  font-weight: 500;
+}
+.pc-table__row:first-child .pc-table__cell {
+  border-bottom-color: var(--yc-color-line-generic-active);
+  align-items: flex-end;
+  padding-top: 0;
+}
+.pc-table__cell {
+  padding: 12px 0;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.pc-table__cell:first-child {
+  flex: 2;
+}
+.pc-table__cell_justify_center {
+  justify-content: center;
+  text-align: center;
+}
+.pc-table__cell_justify_right {
+  justify-content: flex-end;
+  text-align: right;
+}
+.pc-table__marker {
+  display: inline-block;
+}
+.pc-table__marker_type_disk {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.pc-table__marker_type_disk.pc-table__marker_index_0 {
+  background-color: var(--yc-color-infographics-neutral-light);
+}
+.pc-table__marker_type_disk.pc-table__marker_index_1 {
+  background-color: var(--yc-my-color-brand-normal);
+}
+.pc-table__marker_type_disk.pc-table__marker_index_2 {
+  border: 1px solid var(--yc-color-text-hint);
+}
+.pc-table__legend {
+  display: flex;
+  margin-top: 20px;
+  color: var(--yc-color-text-secondary);
+}
+.pc-table__legend-item {
+  display: flex;
+  align-items: center;
+}
+.pc-table__legend-item + .pc-table__legend-item {
+  margin-left: 32px;
+}
+.pc-table__legent-item-text {
+  margin-left: 6px;
+}
+@media (max-width: 577px) {
+  .pc-table__cell {
+    min-width: 120px;
+  }
+  .pc-table__cell:first-child {
+    min-width: 230px;
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TableProps, ClassNameProps } from '../../models';
+export default class Table extends React.Component<TableProps & ClassNameProps> {
+    render(): JSX.Element | null;
+    private renderTable;
+    private renderMarker;
+    private renderLegend;
+    private getDefaultJustify;
+}

package/build/cjs/components/Table/Table.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../utils");
+const __1 = require("../");
+const b = (0, utils_1.block)('table');
+class Table extends react_1.default.Component {
+    render() {
+        const { content, legend, marker = 'disk', className } = this.props;
+        if (!content || !content.length || !content[0].length) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: b(null, className) },
+            this.renderTable(content, marker, legend),
+            legend && this.renderLegend(legend, marker)));
+    }
+    renderTable(content, marker, legend) {
+        const justify = this.getDefaultJustify(content, this.props.justify);
+        return (react_1.default.createElement("div", { className: b('table') }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
+    }
+    renderMarker(type, cell) {
+        return react_1.default.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+    }
+    renderLegend(legend, marker) {
+        return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },
+            this.renderMarker(marker, String(index)),
+            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+    }
+    getDefaultJustify(content, justify) {
+        return justify || new Array(content[0].length).fill('center');
+    }
+}
+exports.default = Table;

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

@@ -0,0 +1,96 @@
+.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
+  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-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: 8px 0 0 4px;
+}
+.pc-title-block__arrow_size_s {
+  margin: 4px 0 0 4px;
+}
+.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: 12px;
+}
+.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;
+}
+@media (max-width: 577px) {
+  .pc-title-block_size_l {
+    margin-top: 48px;
+  }
+}

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

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

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getArrowSize = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const Anchor_1 = (0, tslib_1.__importDefault)(require("../Anchor/Anchor"));
+const __1 = require("../");
+const locationContext_1 = require("../../context/locationContext");
+const mobileContext_1 = require("../../context/mobileContext");
+const b = (0, utils_1.block)('title-block');
+function getArrowSize(size, isMobile) {
+    switch (size) {
+        case 's':
+            return 16;
+        case 'm':
+            return isMobile ? 20 : 24;
+        case 'l':
+            return isMobile ? 20 : 24;
+        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/ToggleArrow/ToggleArrow.css

@@ -0,0 +1,23 @@
+.pc-ToggleArrow {
+  transition: transform 0.15s;
+  stroke-width: 2px;
+}
+.pc-ToggleArrow_type_horizontal {
+  transition: margin-left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transform: rotate(-90deg);
+}
+.pc-ToggleArrow_type_vertical {
+  transform: rotate(0deg);
+}
+.pc-ToggleArrow_open.pc-ToggleArrow_type_horizontal {
+  transform: rotate(0deg);
+}
+.pc-ToggleArrow_open.pc-ToggleArrow_type_vertical {
+  transform: rotate(180deg);
+}
+.pc-ToggleArrow_thin {
+  stroke-width: 1px;
+}
+.pc-ToggleArrow_slow {
+  transition-duration: 0.3s;
+}

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

@@ -0,0 +1,11 @@
+export interface ToggleArrowProps {
+    type?: 'horizontal' | 'vertical';
+    iconType?: 'navigation' | 'default';
+    open?: boolean;
+    size?: number;
+    thin?: boolean;
+    slow?: boolean;
+    className?: string;
+}
+declare const ToggleArrow: ({ type, iconType, open, size, thin, slow, className, }: ToggleArrowProps) => JSX.Element;
+export default ToggleArrow;

package/build/cjs/components/ToggleArrow/ToggleArrow.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const b = (0, utils_1.block)('ToggleArrow');
+const ToggleArrow = ({ type = 'horizontal', iconType = 'default', open = false, size = 16, thin = false, slow = false, className, }) => (react_1.default.createElement(uikit_1.Icon, { className: b({ type, open, thin, slow }, className), data: iconType === 'navigation' ? icons_1.NavigationChevron : icons_1.Chevron, size: size }));
+exports.default = ToggleArrow;