@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -0,0 +1,273 @@
+import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { PlayFill } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import ReactPlayer from 'react-player';
+import { MobileContext } from '../../context/mobileContext';
+import { VideoContext } from '../../context/videoContext';
+import { useAnalytics, useMount } from '../../hooks';
+import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
+import { block } from '../../utils';
+import CustomBarControls from './CustomBarControls';
+import { i18n } from './i18n';
+import { checkYoutubeVideos } from './utils';
+import { isYoutubePlayerInstance } from './utils/youtube';
+import './ReactPlayer.css';
+const b = block('ReactPlayer');
+const FPS = 60;
+// eslint-disable-next-line react/display-name
+export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
+    const isMobile = useContext(MobileContext);
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
+    const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
+    const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
+    const mute = initiallyMuted || autoPlay;
+    const { playingVideoRef, setProps } = useContext(VideoContext);
+    const ref = useRef(null);
+    const buttonRef = useRef(null);
+    const [playerRef, setPlayerRef] = useState();
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [playedPercent, setPlayedPercent] = useState(0);
+    const [currentHeight, setCurrentHeight] = useState(height);
+    const [width, setWidth] = useState(0);
+    const [actualRatio, setActualRatio] = useState();
+    const [muted, setMuted] = useState(mute);
+    const [started, setStarted] = useState(autoPlay);
+    const [ended, setEnded] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    const [hovered, setHovered] = useState(isMobile);
+    useMount(() => setIsMounted(true));
+    const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
+    const eventsArray = useMemo(() => {
+        if (analyticsEvents) {
+            return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
+        }
+        return [];
+    }, [analyticsEvents]);
+    const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
+    useImperativeHandle(originRef, () => {
+        if (!playerRef) {
+            return;
+        }
+        let play, pause, addEventListener;
+        const videoInstance = playerRef.getInternalPlayer();
+        if (isYoutubePlayerInstance(videoInstance)) {
+            ({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
+        }
+        else {
+            // it is assumed that `videoInstance` is HTMLVideoElement by default
+            ({ play, pause, addEventListener } = videoInstance);
+        }
+        // eslint-disable-next-line consistent-return
+        return {
+            play: play.bind(videoInstance),
+            pause: pause.bind(videoInstance),
+            addEventListener: addEventListener.bind(videoInstance),
+        };
+    }, [playerRef]);
+    useEffect(() => {
+        if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
+            setMuted(true);
+        }
+    }, [playingVideoRef]);
+    useEffect(() => {
+        if (showPreview) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
+        }
+    }, [showPreview, playerRef]);
+    useEffect(() => {
+        if (playerRef && !started) {
+            setIsPlaying(autoPlay);
+        }
+    }, [autoPlay, playerRef, started]);
+    useEffect(() => setMuted(mute), [mute]);
+    useEffect(() => {
+        if (!started && isPlaying) {
+            setStarted(true);
+        }
+    }, [isPlaying, started]);
+    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]);
+    useEffect(() => {
+        const updateSize = 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);
+                setCurrentHeight(Math.floor(getHeight(newWidth, ratio !== null && ratio !== void 0 ? ratio : (autoRatio ? actualRatio : undefined))));
+            }
+        }, 200);
+        updateSize();
+        window.addEventListener('resize', updateSize, { passive: true });
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [actualRatio, autoRatio, ratio]);
+    const playEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
+    const stopEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
+    const playIcon = useMemo(() => {
+        let playButtonContent;
+        switch (type) {
+            case PlayButtonType.Text:
+                playButtonContent = text;
+                break;
+            case PlayButtonType.Default:
+            default:
+                playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 });
+                break;
+        }
+        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef }, playButtonContent));
+    }, [type, theme, text, buttonClassName]);
+    const changeMute = useCallback((isMuted) => {
+        if (isMuted &&
+            playerRef &&
+            controls === MediaVideoControlsType.Custom &&
+            customControlsType === CustomControlsType.WithMuteButton) {
+            playerRef.seekTo(0);
+            setPlayedPercent(0);
+        }
+        const events = isMuted ? playEvents : stopEvents;
+        handleAnalytics(events);
+        if (isMuted) {
+            setProps({ playingVideoRef: ref.current });
+        }
+        // In order to the progress bar to update (equals 0) before displaying
+        setTimeout(() => setMuted(!isMuted), 0);
+    }, [
+        playerRef,
+        customControlsType,
+        playEvents,
+        stopEvents,
+        handleAnalytics,
+        setProps,
+        controls,
+    ]);
+    const handleClickPreview = useCallback(() => {
+        setIsPlaying(true);
+        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
+        handleAnalytics(playEvents);
+    }, [onClickPreview, handleAnalytics, playEvents]);
+    const onPause = useCallback(() => {
+        // For support correct state for youtube
+        if (controls !== MediaVideoControlsType.Custom ||
+            customControlsType !== CustomControlsType.WithMuteButton) {
+            setIsPlaying(false);
+        }
+    }, [controls, customControlsType]);
+    const onStart = useCallback(() => {
+        if (!autoPlay && !initiallyMuted) {
+            setMuted(false);
+        }
+    }, [autoPlay, initiallyMuted]);
+    const onPlay = useCallback(() => {
+        setIsPlaying(true);
+        if (controls === MediaVideoControlsType.Custom &&
+            customControlsType === CustomControlsType.WithMuteButton) {
+            if (ended) {
+                changeMute(false);
+            }
+            else if (!isPlaying) {
+                changeMute(muted);
+            }
+            setEnded(false);
+        }
+    }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
+    const onReady = useCallback((player) => {
+        setPlayerRef(player);
+        const videoElement = player.getInternalPlayer();
+        const videoWidth = videoElement.videoWidth;
+        const videoHeight = videoElement.videoHeight;
+        if (videoWidth && videoHeight) {
+            setActualRatio(videoHeight / videoWidth);
+        }
+    }, []);
+    const onProgress = useCallback((progress) => {
+        setPlayedPercent(progress.played);
+        if (progress.played === 1) {
+            setMuted(true);
+        }
+    }, []);
+    const onEnded = 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 onPlayClick = useCallback(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
+        }
+    }, [isPlaying, onPlay, onPause]);
+    const handleClick = useCallback(() => {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        if (controls === MediaVideoControlsType.Custom) {
+            if (customControlsType === CustomControlsType.WithMuteButton) {
+                changeMute(muted);
+            }
+            else {
+                onPlayClick();
+            }
+        }
+    }, [controls, customControlsType, changeMute, muted, onPlayClick]);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        const key = e.key.toLowerCase();
+        if (key === 'enter') {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, []);
+    const onFocusIn = useCallback(() => setHovered(true), []);
+    const onFocusOut = useCallback(() => setHovered(false), []);
+    return (React.createElement("div", { className: b({
+            wrapper: !currentHeight,
+            controls,
+            contain,
+            'auto-ratio': autoRatio,
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, isMounted ? (React.createElement(Fragment, null,
+        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
+                ? undefined
+                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
+                file: {
+                    attributes: {
+                        pip: isMobile ? 'false' : undefined,
+                        playsinline: isMobile ? '' : undefined,
+                        disablepictureinpicture: isMobile ? '' : undefined,
+                    },
+                },
+            } }),
+        controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, mute: {
+                isMuted: muted,
+                changeMute: (event) => {
+                    event.stopPropagation();
+                    changeMute(muted);
+                },
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, muteButtonShown: muteButtonShown, shown: hovered && ((!started && !previewImgUrl) || started), positioning: positioning })))) : null));
+});
+function getHeight(width, ratio = 9 / 16) {
+    return width * ratio;
+}
+function getParentElement(element) {
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+        return element;
+    }
+    return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
+}
+export default ReactPlayerBlock;

package/build/esm/components/ReactPlayer/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "play": "Play",
+  "pause": "Pause",
+  "mute": "Mute",
+  "unmute": "Unmute"
+}

package/build/esm/components/ReactPlayer/i18n/index.d.ts

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

package/build/esm/components/ReactPlayer/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ReactPlayer`);

package/build/esm/components/ReactPlayer/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "play": "Воспроизвести",
+  "pause": "Остановить",
+  "mute": "Отключить звук",
+  "unmute": "Включить звук"
+}

package/build/esm/components/ReactPlayer/utils/youtube.d.ts

@@ -0,0 +1,2 @@
+import type { YouTubePlayer } from 'youtube-player/dist/types';
+export declare const isYoutubePlayerInstance: (playerInstance: Record<string, unknown> | YouTubePlayer) => playerInstance is YouTubePlayer;

package/build/esm/components/ReactPlayer/utils/youtube.js

@@ -0,0 +1,3 @@
+export const isYoutubePlayerInstance = (playerInstance) => {
+    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
+};

package/build/esm/components/ReactPlayer/utils.d.ts

@@ -0,0 +1 @@
+export declare const checkYoutubeVideos: (src: string | string[]) => string | string[];

package/build/esm/components/ReactPlayer/utils.js

@@ -0,0 +1,20 @@
+// the file serves to support live video with react-player@2.9
+const LIVE_YUOTUBE_VIDEO_REGEX = /(?:youtu\.be\/live\/|youtube(?:-nocookie)?\.com\/(?:live\/))((\w|-){11})/;
+const YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';
+const transformYoutubeUrl = (src) => {
+    var _a;
+    if (LIVE_YUOTUBE_VIDEO_REGEX.test(src)) {
+        const youtubeLiveId = (_a = src.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
+        if (!youtubeLiveId) {
+            return src;
+        }
+        return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
+    }
+    return src;
+};
+export const checkYoutubeVideos = (src) => {
+    if (Array.isArray(src)) {
+        return src.map((videoUrl) => transformYoutubeUrl(videoUrl));
+    }
+    return transformYoutubeUrl(src);
+};

package/build/esm/components/RootCn/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../models';
+declare const RootCn: ({ className, children }: PropsWithChildren<ClassNameProps>) => JSX.Element;
+export default RootCn;

package/build/esm/components/RootCn/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useTheme } from '../../context/theme';
+import { rootCn } from '../../utils';
+const RootCn = ({ className, children }) => {
+    const theme = useTheme();
+    return React.createElement("div", { className: rootCn({ theme }, className) }, children);
+};
+export default RootCn;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface RouterLinkProps {
+    href: string;
+    [key: string]: unknown;
+}
+declare const RouterLink: ({ href, children }: React.PropsWithChildren<RouterLinkProps>) => JSX.Element;
+export default RouterLink;

package/build/esm/components/RouterLink/RouterLink.js

@@ -0,0 +1,7 @@
+import React, { Fragment, useContext } from 'react';
+import { LocationContext } from '../../context/locationContext';
+const RouterLink = ({ href, children }) => {
+    const { Link } = useContext(LocationContext);
+    return Link ? React.createElement(Link, { href: href }, children) : React.createElement(Fragment, null, children);
+};
+export default RouterLink;

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

@@ -0,0 +1,6 @@
+export interface ServiceIconProps {
+    name?: string;
+    size?: number;
+}
+declare const ServiceIcon: ({ name, size }: ServiceIconProps) => JSX.Element | null;
+export default ServiceIcon;

package/build/esm/components/ServiceIcon/ServiceIcon.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { ServicesContext } from '../../context/servicesContext';
+import Image from '../Image/Image';
+const ServiceIcon = ({ name, size }) => {
+    const { icons } = useContext(ServicesContext);
+    const data = name ? icons[name] : '';
+    if (!data)
+        return null;
+    if (data.startsWith('/') || /^(http(s?):\/\/)/.test(data)) {
+        return React.createElement(Image, { src: data, alt: "", "aria-hidden": "true" });
+    }
+    return React.createElement(Icon, { data: data, size: size, "aria-hidden": "true" });
+};
+export default ServiceIcon;

package/build/esm/components/ServiceLabel/ServiceLabel.css

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-service-label {
+  display: flex;
+  align-items: center;
+}
+.pc-service-label__wrap {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--g-color-text-light-primary);
+  border-radius: 50%;
+  background-color: var(--g-color-base-brand);
+  width: 18px;
+  height: 18px;
+}
+.pc-service-label__name {
+  margin-left: 4px;
+}

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

@@ -0,0 +1,4 @@
+import { ServiceLabelProps } from '../../models';
+import './ServiceLabel.css';
+declare const ServiceLabel: ({ name, slug }: ServiceLabelProps) => JSX.Element;
+export default ServiceLabel;

package/build/esm/components/ServiceLabel/ServiceLabel.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { block } from '../../utils';
+import ServiceIcon from '../ServiceIcon/ServiceIcon';
+import './ServiceLabel.css';
+const b = block('service-label');
+const ServiceLabel = ({ name, slug }) => (React.createElement("div", { className: b() },
+    React.createElement("div", { className: b('wrap'), "aria-hidden": "true" },
+        React.createElement(ServiceIcon, { name: slug, size: 8 })),
+    React.createElement("span", { className: b('name') },
+        React.createElement("span", null, name))));
+export default ServiceLabel;

package/build/esm/components/Table/Table.css

@@ -0,0 +1,87 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-table {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}
+.pc-table__table {
+  width: 100%;
+  overflow-x: auto;
+}
+.pc-table__row {
+  display: flex;
+}
+.pc-table__row:first-child {
+  font-weight: var(--g-text-accent-font-weight);
+}
+.pc-table__row:first-child .pc-table__cell {
+  border-bottom-color: var(--g-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(--g-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(--g-color-base-neutral-light);
+}
+.pc-table__marker_type_disk.pc-table__marker_index_1 {
+  background-color: var(--g-color-base-brand);
+}
+.pc-table__marker_type_disk.pc-table__marker_index_2 {
+  border: 1px solid var(--g-color-text-hint);
+}
+.pc-table__marker_tick {
+  color: var(--g-color-base-generic-medium);
+}
+.pc-table__marker_tick_check {
+  color: var(--g-color-base-brand);
+}
+.pc-table__legend {
+  display: flex;
+  margin-top: 20px;
+  color: var(--g-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/esm/components/Table/Table.d.ts

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

package/build/esm/components/Table/Table.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Check, Minus } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { HTML, YFMWrapper } from '../';
+import { block } from '../../utils';
+import './Table.css';
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
+const b = block('table');
+export default class Table extends React.Component {
+    render() {
+        const { content, legend, hideLegend, marker = 'disk', className, caption } = this.props;
+        if (!content || !content.length || !content[0].length) {
+            return null;
+        }
+        return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
+            this.renderTable(content, marker, legend),
+            legend && !hideLegend && this.renderLegend(legend, marker)));
+    }
+    renderTable(content, marker, legend) {
+        const justify = this.getDefaultJustify(content, this.props.justify);
+        return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
+    }
+    renderMarker(type, cell) {
+        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }, type === 'tick' ? (React.createElement(Icon, { size: 20, className: b('marker_tick', { check: Number(cell) === 1 }), data: Number(cell) === 1 ? Check : Minus })) : null));
+    }
+    renderLegend(legend, marker) {
+        return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },
+            this.renderMarker(marker, String(index)),
+            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
+    }
+    getDefaultJustify(content, justify) {
+        return justify || new Array(content[0].length).fill('center');
+    }
+}

package/build/esm/components/Title/Title.css

@@ -0,0 +1,19 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-title__description {
+  margin-top: 12px;
+}
+.pc-title__description .yfm {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+}
+.pc-title__description_bold {
+  font-weight: bold;
+}
+.pc-title__description_titleSize_s, .pc-title__description_titleSize_xs {
+  margin-top: 8px;
+}
+.pc-title__description_titleSize_s .yfm, .pc-title__description_titleSize_xs .yfm {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}

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

@@ -0,0 +1,9 @@
+import { GridColumnSizesType } from '../../grid';
+import { ClassNameProps, TitleProps as TitleParams } from '../../models';
+import './Title.css';
+export interface TitleProps extends TitleParams {
+    colSizes?: GridColumnSizesType;
+    id?: string;
+}
+declare const Title: ({ title, subtitle, subtitleBold, className, colSizes, id, }: TitleProps & ClassNameProps) => JSX.Element | null;
+export default Title;

package/build/esm/components/Title/Title.js

@@ -0,0 +1,24 @@
+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');
+const Title = ({ title, subtitle, subtitleBold, className, colSizes = { all: 12, sm: 8 }, id, }) => {
+    if (!title && !subtitle) {
+        return null;
+    }
+    const _a = !title || typeof title === 'string' ? { text: title } : title, { text } = _a, titleProps = __rest(_a, ["text"]);
+    return (React.createElement("div", { className: b(null, className), id: id },
+        text && (React.createElement(Col, { reset: true, sizes: colSizes },
+            React.createElement(TitleItem, Object.assign({ text: text }, titleProps)))),
+        subtitle && (React.createElement(Col, { reset: true, sizes: colSizes },
+            React.createElement("div", { className: b('description', {
+                    titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize,
+                    bold: subtitleBold,
+                }) },
+                React.createElement(YFMWrapper, { content: subtitle, modifiers: { constructor: true } }))))));
+};
+export default Title;