@gravity-ui/page-constructor 5.33.3 → 5.33.4-beta.0

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

@@ -1,52 +1,53 @@
-import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React 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 { MobileContext } from "../../context/mobileContext/index.js";
+import { VideoContext } from "../../context/videoContext/index.js";
+import { useAnalytics, useMount } from "../../hooks/index.js";
+import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from "../../models/index.js";
+import { block } from "../../utils/index.js";
+import CustomBarControls from "./CustomBarControls.js";
+import { i18n } from "./i18n/index.js";
+import { checkYoutubeVideos } from "./utils.js";
+import { isYoutubePlayerInstance } from "./utils/youtube.js";
 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 isMobile = React.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);
+    const { playingVideoRef, setProps } = React.useContext(VideoContext);
+    const ref = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const [playerRef, setPlayerRef] = React.useState();
+    const [isPlaying, setIsPlaying] = React.useState(autoPlay);
+    const [playedPercent, setPlayedPercent] = React.useState(0);
+    const [currentHeight, setCurrentHeight] = React.useState(height);
+    const [width, setWidth] = React.useState(0);
+    const [actualRatio, setActualRatio] = React.useState();
+    const [muted, setMuted] = React.useState(mute);
+    const [started, setStarted] = React.useState(autoPlay);
+    const [ended, setEnded] = React.useState(false);
+    const [isMounted, setIsMounted] = React.useState(false);
+    const [hovered, setHovered] = React.useState(isMobile);
     useMount(() => setIsMounted(true));
-    const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
-    const eventsArray = useMemo(() => {
+    const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);
+    const eventsArray = React.useMemo(() => {
         if (analyticsEvents) {
             return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
         }
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
-    useImperativeHandle(originRef, () => {
+    React.useImperativeHandle(originRef, () => {
         if (!playerRef) {
             return;
         }
@@ -66,33 +67,33 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             addEventListener: addEventListener.bind(videoInstance),
         };
     }, [playerRef]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
     }, [playingVideoRef]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (playerRef && !started) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef, started]);
-    useEffect(() => setMuted(mute), [mute]);
-    useEffect(() => {
+    React.useEffect(() => setMuted(mute), [mute]);
+    React.useEffect(() => {
         if (!started && isPlaying) {
             setStarted(true);
         }
     }, [isPlaying, started]);
-    useEffect(() => {
+    React.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(() => {
+    React.useEffect(() => {
         const updateSize = debounce(() => {
             if (ref.current) {
                 // We need to get parent's width does not equal 0
@@ -111,9 +112,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             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(() => {
+    const playEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
+    const stopEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
+    const playIcon = React.useMemo(() => {
         let playButtonContent;
         switch (type) {
             case PlayButtonType.Text:
@@ -121,12 +122,12 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 break;
             case PlayButtonType.Default:
             default:
-                playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 });
+                playButtonContent = _jsx(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));
+        return (_jsx("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef, children: playButtonContent }));
     }, [type, theme, text, buttonClassName]);
-    const changeMute = useCallback((isMuted) => {
+    const changeMute = React.useCallback((isMuted) => {
         if (isMuted &&
             playerRef &&
             controls === MediaVideoControlsType.Custom &&
@@ -150,24 +151,24 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         setProps,
         controls,
     ]);
-    const handleClickPreview = useCallback(() => {
+    const handleClickPreview = React.useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
         handleAnalytics(playEvents);
     }, [onClickPreview, handleAnalytics, playEvents]);
-    const onPause = useCallback(() => {
+    const onPause = React.useCallback(() => {
         // For support correct state for youtube
         if (controls !== MediaVideoControlsType.Custom ||
             customControlsType !== CustomControlsType.WithMuteButton) {
             setIsPlaying(false);
         }
     }, [controls, customControlsType]);
-    const onStart = useCallback(() => {
+    const onStart = React.useCallback(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
         }
     }, [autoPlay, initiallyMuted]);
-    const onPlay = useCallback(() => {
+    const onPlay = React.useCallback(() => {
         setIsPlaying(true);
         if (controls === MediaVideoControlsType.Custom &&
             customControlsType === CustomControlsType.WithMuteButton) {
@@ -180,7 +181,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setEnded(false);
         }
     }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
-    const onReady = useCallback((player) => {
+    const onReady = React.useCallback((player) => {
         setPlayerRef(player);
         const videoElement = player.getInternalPlayer();
         const videoWidth = videoElement.videoWidth;
@@ -189,13 +190,13 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setActualRatio(videoHeight / videoWidth);
         }
     }, []);
-    const onProgress = useCallback((progress) => {
+    const onProgress = React.useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
     }, []);
-    const onEnded = useCallback(() => {
+    const onEnded = React.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.
@@ -206,7 +207,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const onPlayClick = useCallback(() => {
+    const onPlayClick = React.useCallback(() => {
         if (isPlaying) {
             onPause();
         }
@@ -214,7 +215,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             onPlay();
         }
     }, [isPlaying, onPlay, onPause]);
-    const handleClick = useCallback(() => {
+    const handleClick = React.useCallback(() => {
         var _a;
         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         if (controls === MediaVideoControlsType.Custom) {
@@ -226,39 +227,37 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             }
         }
     }, [controls, customControlsType, changeMute, muted, onPlayClick]);
-    const handleKeyDown = useCallback((e) => {
+    const handleKeyDown = React.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({
+    const onFocusIn = React.useCallback(() => setHovered(true), []);
+    const onFocusOut = React.useCallback(() => setHovered(false), []);
+    return (_jsx("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));
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, children: isMounted ? (_jsxs(React.Fragment, { children: [_jsx(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 && (_jsx(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;
@@ -271,3 +270,4 @@ function getParentElement(element) {
     return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
 }
 export default ReactPlayerBlock;
+//# sourceMappingURL=ReactPlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPlayer.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/ReactPlayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport ReactPlayer from 'react-player';\n\nimport {MobileContext} from '../../context/mobileContext';\nimport {VideoContext} from '../../context/videoContext';\nimport {useAnalytics, useMount} from '../../hooks';\nimport {\n    AnalyticsEvent,\n    ClassNameProps,\n    CustomControlsButtonPositioning,\n    CustomControlsType,\n    DefaultEventNames,\n    MediaVideoControlsType,\n    MediaVideoProps,\n    PlayButtonProps,\n    PlayButtonThemes,\n    PlayButtonType,\n    PredefinedEventTypes,\n    ReactPlayerBlockHandler,\n} from '../../models';\nimport {block} from '../../utils';\n\nimport CustomBarControls from './CustomBarControls';\nimport {i18n} from './i18n';\nimport {checkYoutubeVideos} from './utils';\nimport {isYoutubePlayerInstance} from './utils/youtube';\n\nimport './ReactPlayer.scss';\n\nconst b = block('ReactPlayer');\n\nconst FPS = 60;\n\nexport interface ReactPlayerBlockProps\n    extends Omit<MediaVideoProps, 'loop' | 'src'>,\n        ClassNameProps {\n    src: string | string[];\n    previewImgUrl?: string;\n    loop?: boolean;\n    customBarControlsClassName?: string;\n    showPreview?: boolean;\n    onClickPreview?: () => void;\n    height?: number;\n    ratio?: number;\n    autoRatio?: boolean;\n    children?: React.ReactNode;\n}\n\ninterface PlayerPropgress {\n    played: number;\n}\n\n// eslint-disable-next-line react/display-name\nexport const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactPlayerBlockProps>(\n    (props, originRef) => {\n        const isMobile = React.useContext(MobileContext);\n        const {\n            src,\n            previewImgUrl,\n            loop = false,\n            controls = MediaVideoControlsType.Default,\n            customControlsOptions = {},\n            muted: initiallyMuted = false,\n            elapsedTime,\n            playButton,\n            className,\n            customBarControlsClassName,\n            showPreview,\n            onClickPreview,\n            analyticsEvents,\n            height,\n            ariaLabel,\n            ratio,\n            autoRatio,\n            contain = true,\n        } = props;\n\n        const {\n            type = PlayButtonType.Default,\n            theme = PlayButtonThemes.Blue,\n            text,\n            className: buttonClassName,\n        } = playButton || ({} as PlayButtonProps);\n        const {\n            type: customControlsType = CustomControlsType.WithMuteButton,\n            muteButtonShown,\n            positioning = CustomControlsButtonPositioning.Center,\n        } = customControlsOptions;\n\n        const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);\n        const mute = initiallyMuted || autoPlay;\n\n        const {playingVideoRef, setProps} = React.useContext(VideoContext);\n\n        const ref = React.useRef<HTMLDivElement>(null);\n        const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n        const [playerRef, setPlayerRef] = React.useState<ReactPlayer>();\n        const [isPlaying, setIsPlaying] = React.useState(autoPlay);\n        const [playedPercent, setPlayedPercent] = React.useState<number>(0);\n        const [currentHeight, setCurrentHeight] = React.useState(height);\n        const [width, setWidth] = React.useState<number>(0);\n        const [actualRatio, setActualRatio] = React.useState<number>();\n        const [muted, setMuted] = React.useState<boolean>(mute);\n        const [started, setStarted] = React.useState(autoPlay);\n        const [ended, setEnded] = React.useState<boolean>(false);\n        const [isMounted, setIsMounted] = React.useState(false);\n        const [hovered, setHovered] = React.useState(isMobile);\n\n        useMount(() => setIsMounted(true));\n\n        const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);\n\n        const eventsArray = React.useMemo(() => {\n            if (analyticsEvents) {\n                return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];\n            }\n\n            return [];\n        }, [analyticsEvents]);\n        const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);\n\n        React.useImperativeHandle(originRef, () => {\n            if (!playerRef) {\n                return;\n            }\n\n            let play, pause, addEventListener;\n            const videoInstance = playerRef.getInternalPlayer();\n            if (isYoutubePlayerInstance(videoInstance)) {\n                ({pauseVideo: pause, playVideo: play, addEventListener} = videoInstance);\n            } else {\n                // it is assumed that `videoInstance` is HTMLVideoElement by default\n                ({play, pause, addEventListener} = videoInstance);\n            }\n\n            // eslint-disable-next-line consistent-return\n            return {\n                play: play.bind(videoInstance),\n                pause: pause.bind(videoInstance),\n                addEventListener: addEventListener.bind(videoInstance),\n            };\n        }, [playerRef]);\n\n        React.useEffect(() => {\n            if (ref.current && !playingVideoRef?.contains(ref.current)) {\n                setMuted(true);\n            }\n        }, [playingVideoRef]);\n\n        React.useEffect(() => {\n            if (showPreview) {\n                playerRef?.showPreview();\n            }\n        }, [showPreview, playerRef]);\n\n        React.useEffect(() => {\n            if (playerRef && !started) {\n                setIsPlaying(autoPlay);\n            }\n        }, [autoPlay, playerRef, started]);\n\n        React.useEffect(() => setMuted(mute), [mute]);\n\n        React.useEffect(() => {\n            if (!started && isPlaying) {\n                setStarted(true);\n            }\n        }, [isPlaying, started]);\n\n        React.useEffect(() => {\n            if (started && !Number.isNaN(Number(elapsedTime))) {\n                playerRef?.seekTo(elapsedTime ?? 0, 'seconds');\n            }\n        }, [elapsedTime, playerRef, started]);\n\n        React.useEffect(() => {\n            const updateSize = debounce(() => {\n                if (ref.current) {\n                    // We need to get parent's width does not equal 0\n                    const parentElement = getParentElement(ref.current);\n                    const {paddingLeft, paddingRight} = getComputedStyle(parentElement);\n                    const newWidth =\n                        parentElement.offsetWidth -\n                        parseFloat(paddingLeft) -\n                        parseFloat(paddingRight);\n\n                    setWidth(newWidth);\n                    setCurrentHeight(\n                        Math.floor(\n                            getHeight(newWidth, ratio ?? (autoRatio ? actualRatio : undefined)),\n                        ),\n                    );\n                }\n            }, 200);\n\n            updateSize();\n            window.addEventListener('resize', updateSize, {passive: true});\n            return () => {\n                window.removeEventListener('resize', updateSize);\n            };\n        }, [actualRatio, autoRatio, ratio]);\n\n        const playEvents = React.useMemo(\n            () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Play),\n            [eventsArray],\n        );\n        const stopEvents = React.useMemo(\n            () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Stop),\n            [eventsArray],\n        );\n\n        const playIcon = React.useMemo(() => {\n            let playButtonContent;\n\n            switch (type) {\n                case PlayButtonType.Text:\n                    playButtonContent = text;\n                    break;\n                case PlayButtonType.Default:\n                default:\n                    playButtonContent = <Icon className={b('icon')} data={PlayFill} size={24} />;\n                    break;\n            }\n\n            return (\n                <button\n                    className={b('button', {theme, text: Boolean(text)}, buttonClassName)}\n                    aria-label={i18n('play')}\n                    ref={buttonRef}\n                >\n                    {playButtonContent}\n                </button>\n            );\n        }, [type, theme, text, buttonClassName]);\n\n        const changeMute = React.useCallback(\n            (isMuted: boolean) => {\n                if (\n                    isMuted &&\n                    playerRef &&\n                    controls === MediaVideoControlsType.Custom &&\n                    customControlsType === CustomControlsType.WithMuteButton\n                ) {\n                    playerRef.seekTo(0);\n                    setPlayedPercent(0);\n                }\n\n                const events = isMuted ? playEvents : stopEvents;\n                handleAnalytics(events);\n\n                if (isMuted) {\n                    setProps({playingVideoRef: ref.current});\n                }\n\n                // In order to the progress bar to update (equals 0) before displaying\n                setTimeout(() => setMuted(!isMuted), 0);\n            },\n            [\n                playerRef,\n                customControlsType,\n                playEvents,\n                stopEvents,\n                handleAnalytics,\n                setProps,\n                controls,\n            ],\n        );\n\n        const handleClickPreview = React.useCallback(() => {\n            setIsPlaying(true);\n            onClickPreview?.();\n\n            handleAnalytics(playEvents);\n        }, [onClickPreview, handleAnalytics, playEvents]);\n\n        const onPause = React.useCallback(() => {\n            // For support correct state for youtube\n            if (\n                controls !== MediaVideoControlsType.Custom ||\n                customControlsType !== CustomControlsType.WithMuteButton\n            ) {\n                setIsPlaying(false);\n            }\n        }, [controls, customControlsType]);\n\n        const onStart = React.useCallback(() => {\n            if (!autoPlay && !initiallyMuted) {\n                setMuted(false);\n            }\n        }, [autoPlay, initiallyMuted]);\n\n        const onPlay = React.useCallback(() => {\n            setIsPlaying(true);\n\n            if (\n                controls === MediaVideoControlsType.Custom &&\n                customControlsType === CustomControlsType.WithMuteButton\n            ) {\n                if (ended) {\n                    changeMute(false);\n                } else if (!isPlaying) {\n                    changeMute(muted);\n                }\n                setEnded(false);\n            }\n        }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);\n\n        const onReady = React.useCallback((player: ReactPlayer) => {\n            setPlayerRef(player);\n            const videoElement = player.getInternalPlayer();\n            const videoWidth = videoElement.videoWidth as number | undefined;\n            const videoHeight = videoElement.videoHeight as number | undefined;\n            if (videoWidth && videoHeight) {\n                setActualRatio(videoHeight / videoWidth);\n            }\n        }, []);\n\n        const onProgress = React.useCallback((progress: PlayerPropgress) => {\n            setPlayedPercent(progress.played);\n\n            if (progress.played === 1) {\n                setMuted(true);\n            }\n        }, []);\n\n        const onEnded = React.useCallback(() => {\n            // Youtube videos not muted after finishing playing and start again.\n            // 'onEnded' does not fire when 'loop' is set to true.\n            // It is custom loop with muted sound after finishing playing and start again.\n            if (loop) {\n                setPlayedPercent(0);\n                setIsPlaying(true);\n                playerRef?.seekTo(0);\n            }\n\n            setEnded(true);\n        }, [loop, playerRef]);\n\n        const onPlayClick = React.useCallback(() => {\n            if (isPlaying) {\n                onPause();\n            } else {\n                onPlay();\n            }\n        }, [isPlaying, onPlay, onPause]);\n\n        const handleClick = React.useCallback(() => {\n            buttonRef.current?.click();\n\n            if (controls === MediaVideoControlsType.Custom) {\n                if (customControlsType === CustomControlsType.WithMuteButton) {\n                    changeMute(muted);\n                } else {\n                    onPlayClick();\n                }\n            }\n        }, [controls, customControlsType, changeMute, muted, onPlayClick]);\n\n        const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n            const key = e.key.toLowerCase();\n\n            if (key === 'enter') {\n                buttonRef.current?.click();\n            }\n        }, []);\n\n        const onFocusIn = React.useCallback(() => setHovered(true), []);\n        const onFocusOut = React.useCallback(() => setHovered(false), []);\n\n        return (\n            <div\n                className={b(\n                    {\n                        wrapper: !currentHeight,\n                        controls,\n                        contain,\n                        'auto-ratio': autoRatio,\n                    },\n                    className,\n                )}\n                ref={ref}\n                onClick={handleClick}\n                onMouseEnter={onFocusIn}\n                onMouseLeave={onFocusOut}\n                onFocus={onFocusIn}\n                onBlur={onFocusOut}\n                onKeyDown={handleKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                {isMounted ? (\n                    <React.Fragment>\n                        <ReactPlayer\n                            className={b('player')}\n                            url={videoSrc}\n                            muted={muted}\n                            controls={controls === MediaVideoControlsType.Default}\n                            height={currentHeight || '100%'}\n                            width={width || '100%'}\n                            light={previewImgUrl}\n                            playing={isPlaying}\n                            playIcon={playIcon}\n                            progressInterval={FPS}\n                            onClickPreview={handleClickPreview}\n                            onStart={onStart}\n                            onReady={onReady}\n                            onPlay={onPlay}\n                            onPause={\n                                autoPlay && customControlsType !== CustomControlsType.WithMuteButton\n                                    ? undefined\n                                    : onPause\n                            } // to prevent pause icon flickering when autoplayed video ends\n                            onProgress={onProgress}\n                            onEnded={onEnded}\n                            aria-label={ariaLabel}\n                            previewTabIndex={-1}\n                            config={{\n                                file: {\n                                    attributes: {\n                                        pip: isMobile ? 'false' : undefined,\n                                        playsinline: isMobile ? '' : undefined,\n                                        disablepictureinpicture: isMobile ? '' : undefined,\n                                    },\n                                },\n                            }}\n                        />\n                        {controls === MediaVideoControlsType.Custom && (\n                            <CustomBarControls\n                                className={customBarControlsClassName}\n                                mute={{\n                                    isMuted: muted,\n                                    changeMute: (event: React.MouseEvent) => {\n                                        event.stopPropagation();\n                                        changeMute(muted);\n                                    },\n                                }}\n                                elapsedTimePercent={playedPercent}\n                                type={customControlsType}\n                                isPaused={!isPlaying}\n                                onPlayClick={onPlayClick}\n                                muteButtonShown={muteButtonShown}\n                                shown={hovered && ((!started && !previewImgUrl) || started)}\n                                positioning={positioning}\n                            />\n                        )}\n                    </React.Fragment>\n                ) : null}\n            </div>\n        );\n    },\n);\n\nfunction getHeight(width: number, ratio: number = 9 / 16): number {\n    return width * ratio;\n}\n\nfunction getParentElement(element: HTMLElement): HTMLElement {\n    const parentElement = element.parentElement;\n\n    if (!parentElement) {\n        return element;\n    }\n\n    return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);\n}\n\nexport default ReactPlayerBlock;\n"]}

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

@@ -1 +1,5 @@
-export declare const i18n: (key: "play" | "pause" | "mute" | "unmute", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "play" | "pause" | "mute" | "unmute", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "pc-ReactPlayer": Record<"play" | "pause" | "mute" | "unmute", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["components/ReactPlayer/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAC,SAAS,EAAC,6BAA0B;AAE5C,OAAO,EAAE,kBAAkB;AAC3B,OAAO,EAAE,kBAAkB;AAE3B,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,GAAG,SAAS,aAAa,CAAC,CAAC","sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}ReactPlayer`);\n"]}

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

@@ -1,3 +1,4 @@
 export const isYoutubePlayerInstance = (playerInstance) => {
     return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
 };
+//# sourceMappingURL=youtube.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"youtube.js","sourceRoot":"../../../../../src","sources":["components/ReactPlayer/utils/youtube.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,cAAuD,EACxB,EAAE;IACjC,OAAO,OAAO,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;AAChF,CAAC,CAAC","sourcesContent":["import type {YouTubePlayer} from 'youtube-player/dist/types';\n\nexport const isYoutubePlayerInstance = (\n    playerInstance: Record<string, unknown> | YouTubePlayer,\n): playerInstance is YouTubePlayer => {\n    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);\n};\n"]}

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

@@ -18,3 +18,4 @@ export const checkYoutubeVideos = (src) => {
     }
     return transformYoutubeUrl(src);
 };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/utils.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,MAAM,wBAAwB,GAC1B,0EAA0E,CAAC;AAC/E,MAAM,sBAAsB,GAAG,kCAAkC,CAAC;AAElE,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;;IACxC,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACrC,MAAM,aAAa,GAAG,MAAA,GAAG,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,aAAa,EAAE,CAAC;YACjB,OAAO,GAAG,CAAC;QACf,CAAC;QAED,OAAO,GAAG,sBAAsB,GAAG,aAAa,EAAE,CAAC;IACvD,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAsB,EAAE,EAAE;IACzD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QACrB,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;AACpC,CAAC,CAAC","sourcesContent":["// the file serves to support live video with react-player@2.9\nconst LIVE_YUOTUBE_VIDEO_REGEX =\n    /(?:youtu\\.be\\/live\\/|youtube(?:-nocookie)?\\.com\\/(?:live\\/))((\\w|-){11})/;\nconst YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';\n\nconst transformYoutubeUrl = (src: string) => {\n    if (LIVE_YUOTUBE_VIDEO_REGEX.test(src)) {\n        const youtubeLiveId = src.match(LIVE_YUOTUBE_VIDEO_REGEX)?.[1];\n        if (!youtubeLiveId) {\n            return src;\n        }\n\n        return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;\n    }\n\n    return src;\n};\n\nexport const checkYoutubeVideos = (src: string | string[]) => {\n    if (Array.isArray(src)) {\n        return src.map((videoUrl) => transformYoutubeUrl(videoUrl));\n    }\n\n    return transformYoutubeUrl(src);\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
-import { ClassNameProps } from '../../models';
-declare const RootCn: ({ className, children }: PropsWithChildren<ClassNameProps>) => JSX.Element;
+import * as React from 'react';
+import { ClassNameProps } from "../../models/index.js";
+declare const RootCn: ({ className, children }: React.PropsWithChildren<ClassNameProps>) => import("react/jsx-runtime").JSX.Element;
 export default RootCn;

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

@@ -1,8 +1,9 @@
-import React from 'react';
-import { useTheme } from '../../context/theme';
-import { rootCn } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../context/theme/index.js";
+import { rootCn } from "../../utils/index.js";
 const RootCn = ({ className, children }) => {
     const theme = useTheme();
-    return React.createElement("div", { className: rootCn({ theme }, className) }, children);
+    return _jsx("div", { className: rootCn({ theme }, className), children: children });
 };
 export default RootCn;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RootCn/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAE7C,OAAO,EAAC,MAAM,EAAC,6BAAoB;AAEnC,MAAM,MAAM,GAAG,CAAC,EAAC,SAAS,EAAE,QAAQ,EAA0C,EAAE,EAAE;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,cAAK,SAAS,EAAE,MAAM,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;AACxE,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useTheme} from '../../context/theme';\nimport {ClassNameProps} from '../../models';\nimport {rootCn} from '../../utils';\n\nconst RootCn = ({className, children}: React.PropsWithChildren<ClassNameProps>) => {\n    const theme = useTheme();\n\n    return <div className={rootCn({theme}, className)}>{children}</div>;\n};\n\nexport default RootCn;\n"]}

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

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

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

@@ -1,7 +1,9 @@
-import React, { Fragment, useContext } from 'react';
-import { LocationContext } from '../../context/locationContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { LocationContext } from "../../context/locationContext/index.js";
 const RouterLink = ({ href, children }) => {
-    const { Link } = useContext(LocationContext);
-    return Link ? React.createElement(Link, { href: href }, children) : React.createElement(Fragment, null, children);
+    const { Link } = React.useContext(LocationContext);
+    return Link ? _jsx(Link, { href: href, children: children }) : _jsx(React.Fragment, { children: children });
 };
 export default RouterLink;
+//# sourceMappingURL=RouterLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RouterLink.js","sourceRoot":"../../../../src","sources":["components/RouterLink/RouterLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAO9D,MAAM,UAAU,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAA2C,EAAE,EAAE;IAC9E,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,YAAG,QAAQ,GAAQ,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,QAAQ,cAAE,QAAQ,GAAkB,CAAC;AACpG,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {LocationContext} from '../../context/locationContext';\n\nexport interface RouterLinkProps {\n    href: string;\n    [key: string]: unknown;\n}\n\nconst RouterLink = ({href, children}: React.PropsWithChildren<RouterLinkProps>) => {\n    const {Link} = React.useContext(LocationContext);\n\n    return Link ? <Link href={href}>{children}</Link> : <React.Fragment>{children}</React.Fragment>;\n};\n\nexport default RouterLink;\n"]}

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ClassNameProps, TableProps } from '../../models';
+import * as React from 'react';
+import { ClassNameProps, TableProps } from "../../models/index.js";
 import './Table.css';
 export default class Table extends React.Component<TableProps & ClassNameProps> {
-    render(): JSX.Element | null;
+    render(): import("react/jsx-runtime").JSX.Element | null;
     private renderTable;
     private renderMarker;
     private renderLegend;

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as 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 { HTML, YFMWrapper } from "../index.js";
+import { block } from "../../utils/index.js";
 import './Table.css';
 function getMarkerId(index) {
     if (isNaN(index)) {
@@ -17,23 +18,20 @@ export default class Table extends React.Component {
         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)));
+        return (_jsxs("div", { className: b(null, className), role: 'table', "aria-label": caption, children: [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))))))))));
+        return (_jsx("div", { className: b('table'), role: 'rowgroup', children: content.map((row, i) => (_jsx("div", { className: b('row'), role: 'row', children: row.map((cell, j) => (_jsx("div", { className: b('cell', { justify: justify[j] }), role: 'cell', children: legend && i && j ? (this.renderMarker(marker, cell)) : (_jsx(HTML, { children: cell })) }, j))) }, i))) }));
     }
     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));
+        return (_jsx("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }), children: type === 'tick' ? (_jsx(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) }))))));
+        return (_jsx("div", { className: b('legend'), children: legend.map((item, index) => (_jsxs("div", { className: b('legend-item'), children: [this.renderMarker(marker, String(index)), _jsx(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) })] }, item))) }));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');
     }
 }
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"../../../../src","sources":["components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Check, Minus} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {HTML, YFMWrapper} from '../';\nimport {ClassNameProps, Justify, LegendTableMarkerType, TableProps} from '../../models';\nimport {block} from '../../utils';\n\nimport './Table.scss';\n\nfunction getMarkerId(index: number): string | undefined {\n    if (isNaN(index)) {\n        return undefined;\n    }\n\n    return `marker-${index}`;\n}\n\nconst b = block('table');\n\nexport default class Table extends React.Component<TableProps & ClassNameProps> {\n    render() {\n        const {content, legend, hideLegend, marker = 'disk', className, caption} = this.props;\n\n        if (!content || !content.length || !content[0].length) {\n            return null;\n        }\n\n        return (\n            <div className={b(null, className)} role={'table'} aria-label={caption}>\n                {this.renderTable(content, marker, legend)}\n                {legend && !hideLegend && this.renderLegend(legend, marker)}\n            </div>\n        );\n    }\n\n    private renderTable(content: string[][], marker: LegendTableMarkerType, legend?: string[]) {\n        const justify = this.getDefaultJustify(content, this.props.justify);\n\n        return (\n            <div className={b('table')} role={'rowgroup'}>\n                {content.map((row, i) => (\n                    <div key={i} className={b('row')} role={'row'}>\n                        {row.map((cell, j) => (\n                            <div key={j} className={b('cell', {justify: justify[j]})} role={'cell'}>\n                                {legend && i && j ? (\n                                    this.renderMarker(marker, cell)\n                                ) : (\n                                    <HTML>{cell}</HTML>\n                                )}\n                            </div>\n                        ))}\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    private renderMarker(type: LegendTableMarkerType, cell: string) {\n        return (\n            <div\n                aria-labelledby={getMarkerId(Number(cell))}\n                className={b('marker', {type, index: String(cell)})}\n            >\n                {type === 'tick' ? (\n                    <Icon\n                        size={20}\n                        className={b('marker_tick', {check: Number(cell) === 1})}\n                        data={Number(cell) === 1 ? Check : Minus}\n                    />\n                ) : null}\n            </div>\n        );\n    }\n\n    private renderLegend(legend: string[], marker: LegendTableMarkerType) {\n        return (\n            <div className={b('legend')}>\n                {legend.map((item, index) => (\n                    <div key={item} className={b('legend-item')}>\n                        {this.renderMarker(marker, String(index))}\n                        <YFMWrapper\n                            className={b('legent-item-text')}\n                            content={item}\n                            modifiers={{constructor: true}}\n                            id={getMarkerId(index)}\n                        />\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    private getDefaultJustify(content: string[][], justify?: Justify[]) {\n        return justify || new Array(content[0].length).fill('center');\n    }\n}\n"]}

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

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

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

@@ -1,9 +1,9 @@
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Col } from "../../grid/index.js";
+import { block } from "../../utils/index.js";
+import YFMWrapper from "../YFMWrapper/YFMWrapper.js";
+import TitleItem from "./TitleItem.js";
 import './Title.css';
 const b = block('title');
 const Title = ({ title, subtitle, className, colSizes = { all: 12, sm: 8 }, id, }) => {
@@ -11,11 +11,7 @@ const Title = ({ title, subtitle, className, colSizes = { all: 12, sm: 8 }, id,
         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 }) },
-                React.createElement(YFMWrapper, { content: subtitle, modifiers: { constructor: true } }))))));
+    return (_jsxs("div", { className: b(null, className), id: id, children: [text && (_jsx(Col, { reset: true, sizes: colSizes, children: _jsx(TitleItem, Object.assign({ text: text }, titleProps)) })), subtitle && (_jsx(Col, { reset: true, sizes: colSizes, children: _jsx("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }), children: _jsx(YFMWrapper, { content: subtitle, modifiers: { constructor: true } }) }) }))] }));
 };
 export default Title;
+//# sourceMappingURL=Title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sourceRoot":"../../../../src","sources":["components/Title/Title.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAC,GAAG,EAAsB,4BAAmB;AAEpD,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,UAAU,oCAAiC;AAElD,OAAO,SAAS,uBAAoB;AAEpC,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAOzB,MAAM,KAAK,GAAG,CAAC,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EAC3B,EAAE,GACwB,EAAE,EAAE;IAC9B,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,KACF,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,EAAC,IAAI,EAAE,KAAK,EAAoB,CAAC,CAAC,CAAC,KAAK,EAD7E,EAAC,IAAI,OACwE,EADnE,UAAU,cAApB,QAAqB,CACwD,CAAC;IAEpF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,aACrC,IAAI,IAAI,CACL,KAAC,GAAG,IAAC,KAAK,QAAC,KAAK,EAAE,QAAQ,YACtB,KAAC,SAAS,kBAAC,IAAI,EAAE,IAAI,IAAM,UAAU,EAAI,GACvC,CACT,EACA,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,KAAK,QAAC,KAAK,EAAE,QAAQ,YACtB,cAAK,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,SAAS,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,EAAC,CAAC,YAC/D,KAAC,UAAU,IAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAAI,GAC/D,GACJ,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import {Col, GridColumnSizesType} from '../../grid';\nimport {ClassNameProps, TitleItemProps, TitleProps as TitleParams} from '../../models';\nimport {block} from '../../utils';\nimport YFMWrapper from '../YFMWrapper/YFMWrapper';\n\nimport TitleItem from './TitleItem';\n\nimport './Title.scss';\n\nconst b = block('title');\n\nexport interface TitleProps extends TitleParams {\n    colSizes?: GridColumnSizesType;\n    id?: string;\n}\n\nconst Title = ({\n    title,\n    subtitle,\n    className,\n    colSizes = {all: 12, sm: 8},\n    id,\n}: TitleProps & ClassNameProps) => {\n    if (!title && !subtitle) {\n        return null;\n    }\n\n    const {text, ...titleProps} =\n        !title || typeof title === 'string' ? ({text: title} as TitleItemProps) : title;\n\n    return (\n        <div className={b(null, className)} id={id}>\n            {text && (\n                <Col reset sizes={colSizes}>\n                    <TitleItem text={text} {...titleProps} />\n                </Col>\n            )}\n            {subtitle && (\n                <Col reset sizes={colSizes}>\n                    <div className={b('description', {titleSize: titleProps?.textSize})}>\n                        <YFMWrapper content={subtitle} modifiers={{constructor: true}} />\n                    </div>\n                </Col>\n            )}\n        </div>\n    );\n};\n\nexport default Title;\n"]}