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

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -1,25 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const __1 = require("../index.js");
-const utils_1 = require("../../utils/index.js");
-const i18n_1 = require("./i18n/index.js");
+const __1 = require("..");
+const utils_1 = require("../../utils");
+const i18n_1 = require("./i18n");
 const b = (0, utils_1.block)('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
 const DEFAULT_ARROW_SIZE = 18;
-class OverflowScroller extends React.Component {
+class OverflowScroller extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.state = {
             arrows: [],
             scrollValue: 0,
         };
-        this.containerRef = React.createRef();
-        this.wrapperRef = React.createRef();
+        this.containerRef = (0, react_1.createRef)();
+        this.wrapperRef = (0, react_1.createRef)();
         // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
         this.checkOverflow = (0, debounce_1.default)(() => {
             if (this.containerRef &&
@@ -80,11 +79,14 @@ class OverflowScroller extends React.Component {
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
         const paddingRight = arrows.includes('right');
-        return ((0, jsx_runtime_1.jsxs)("div", { className: b('container', {
+        return (react_1.default.createElement("div", { className: b('container', {
                 'padding-left': paddingLeft,
                 'padding-right': paddingRight,
-            }), children: [(0, jsx_runtime_1.jsx)("div", { className: b(null, className), ref: this.containerRef, children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef, children: children }) }), arrows.map((direction) => ((0, jsx_runtime_1.jsx)("button", { className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction), "aria-label": (0, i18n_1.i18n)(direction), children: (0, jsx_runtime_1.jsx)(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }) }, direction)))] }));
+            }) },
+            react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
+                react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
+            arrows.map((direction) => (react_1.default.createElement("button", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction), "aria-label": (0, i18n_1.i18n)(direction) },
+                react_1.default.createElement(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }
 exports.default = OverflowScroller;
-//# sourceMappingURL=OverflowScroller.js.map

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

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

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

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
 const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
-const cn_1 = require("../../../utils/cn.js");
+const cn_1 = require("../../../utils/cn");
 const en_json_1 = tslib_1.__importDefault(require("./en.json"));
 const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
 exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}OverflowScroller`);
-//# sourceMappingURL=index.js.map

package/build/cjs/components/ReactPlayer/CircleProgress.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps } from "../../models/index.js";
+import { ClassNameProps } from '../../models';
 export interface CircleProgressProps extends ClassNameProps {
     elapsedTime: number;
     baseColor?: string;
@@ -6,5 +6,5 @@ export interface CircleProgressProps extends ClassNameProps {
     strokeWidth?: number;
     radius?: number;
 }
-declare const CircleProgress: (props: CircleProgressProps) => import("react/jsx-runtime").JSX.Element;
+declare const CircleProgress: (props: CircleProgressProps) => JSX.Element;
 export default CircleProgress;

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

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
-const utils_1 = require("../../utils/index.js");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('CircleProgress');
 const CircleProgress = (props) => {
     const { baseColor, elapsedTime, circleColor = '#262626', strokeWidth = 10, radius = 50, className, } = props;
-    const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const baseCircle = React.useMemo(() => {
+    const circumference = (0, react_1.useMemo)(() => 2 * Math.PI * radius, [radius]);
+    const baseCircle = (0, react_1.useMemo)(() => {
         if (!baseColor) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: baseColor, strokeWidth: strokeWidth }));
+        return (react_1.default.createElement("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: baseColor, strokeWidth: strokeWidth }));
     }, [baseColor, radius, strokeWidth]);
-    return ((0, jsx_runtime_1.jsxs)("svg", { className: b(null, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", children: [baseCircle, (0, jsx_runtime_1.jsx)("circle", { cx: "60", cy: "60", r: radius, transform: "rotate(-90 60 60)", fill: "none", strokeDashoffset: circumference - elapsedTime * circumference, strokeDasharray: circumference, stroke: circleColor, strokeWidth: strokeWidth })] }));
+    return (react_1.default.createElement("svg", { className: b(null, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120" },
+        baseCircle,
+        react_1.default.createElement("circle", { cx: "60", cy: "60", r: radius, transform: "rotate(-90 60 60)", fill: "none", strokeDashoffset: circumference - elapsedTime * circumference, strokeDasharray: circumference, stroke: circleColor, strokeWidth: strokeWidth })));
 };
 exports.default = CircleProgress;
-//# sourceMappingURL=CircleProgress.js.map

package/build/cjs/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ClassNameProps, CustomControlsOptions, CustomControlsType } from "../../models/index.js";
+import React from 'react';
+import { ClassNameProps, CustomControlsOptions, CustomControlsType } from '../../models';
 interface MuteConfigProps {
     isMuted: boolean;
     changeMute: (event: React.MouseEvent) => void;
@@ -12,5 +12,5 @@ export interface CustomBarControlsProps extends ClassNameProps, CustomControlsOp
     onPlayClick?: () => void;
     shown?: boolean;
 }
-declare const CustomBarControls: (props: CustomBarControlsProps) => import("react/jsx-runtime").JSX.Element;
+declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const models_1 = require("../../models/index.js");
-const utils_1 = require("../../utils/index.js");
-const CircleProgress_1 = tslib_1.__importDefault(require("./CircleProgress.js"));
-const i18n_1 = require("./i18n/index.js");
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const CircleProgress_1 = tslib_1.__importDefault(require("./CircleProgress"));
+const i18n_1 = require("./i18n");
 const b = (0, utils_1.block)('CustomBarControls');
 const playIconsMap = {
     [models_1.CustomControlsType.WithMuteButton]: null,
@@ -32,21 +31,25 @@ const CustomBarControls = (props) => {
     const unmuteIcon = unmuteIconsMap[type];
     const playIcon = playIconsMap[type];
     const pauseIcon = pauseIconsMap[type];
-    const muteButton = React.useMemo(() => {
+    const muteButton = (0, react_1.useMemo)(() => {
         if (!mute || !isMuteButtonShown) {
             return null;
         }
         const { isMuted, changeMute } = mute;
-        return ((0, jsx_runtime_1.jsxs)("button", { className: b('button', { type }), onClick: changeMute, "aria-label": (0, i18n_1.i18n)(isMuted ? 'unmute' : 'mute'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }), type === models_1.CustomControlsType.WithMuteButton && !isMuted && ((0, jsx_runtime_1.jsx)(CircleProgress_1.default, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))] }));
+        return (react_1.default.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": (0, i18n_1.i18n)(isMuted ? 'unmute' : 'mute') },
+            react_1.default.createElement(uikit_1.Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }),
+            type === models_1.CustomControlsType.WithMuteButton && !isMuted && (react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))));
     }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);
-    const playPauseButton = React.useMemo(() => {
+    const playPauseButton = (0, react_1.useMemo)(() => {
         const icon = isPaused ? playIcon : pauseIcon;
         if (type === models_1.CustomControlsType.WithMuteButton || !icon) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": (0, i18n_1.i18n)(isPaused ? 'play' : 'pause'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon, className: b('play-icon', { type }) }) }));
+        return (react_1.default.createElement("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": (0, i18n_1.i18n)(isPaused ? 'play' : 'pause') },
+            react_1.default.createElement(uikit_1.Icon, { data: icon, className: b('play-icon', { type }) })));
     }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b('wrapper', { type, shown, positioning }, className), children: [playPauseButton, muteButton] }));
+    return (react_1.default.createElement("div", { className: b('wrapper', { type, shown, positioning }, className) },
+        playPauseButton,
+        muteButton));
 };
 exports.default = CustomBarControls;
-//# sourceMappingURL=CustomBarControls.js.map

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from "../../models/index.js";
+import React from 'react';
+import { ClassNameProps, MediaVideoProps, ReactPlayerBlockHandler } from '../../models';
 export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 'src'>, ClassNameProps {
     src: string | string[];
     previewImgUrl?: string;

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

@@ -2,55 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactPlayerBlock = void 0;
 const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const react_player_1 = tslib_1.__importDefault(require("react-player"));
-const mobileContext_1 = require("../../context/mobileContext/index.js");
-const videoContext_1 = require("../../context/videoContext/index.js");
-const hooks_1 = require("../../hooks/index.js");
-const models_1 = require("../../models/index.js");
-const utils_1 = require("../../utils/index.js");
-const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls.js"));
-const i18n_1 = require("./i18n/index.js");
-const utils_2 = require("./utils.js");
-const youtube_1 = require("./utils/youtube.js");
+const mobileContext_1 = require("../../context/mobileContext");
+const videoContext_1 = require("../../context/videoContext");
+const hooks_1 = require("../../hooks");
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls"));
+const i18n_1 = require("./i18n");
+const utils_2 = require("./utils");
+const youtube_1 = require("./utils/youtube");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
-exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
-    const isMobile = React.useContext(mobileContext_1.MobileContext);
+exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = models_1.CustomControlsType.WithMuteButton, muteButtonShown, positioning = models_1.CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
-    const { playingVideoRef, setProps } = React.useContext(videoContext_1.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);
+    const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
+    const ref = (0, react_1.useRef)(null);
+    const buttonRef = (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 [currentHeight, setCurrentHeight] = (0, react_1.useState)(height);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const [actualRatio, setActualRatio] = (0, react_1.useState)();
+    const [muted, setMuted] = (0, react_1.useState)(mute);
+    const [started, setStarted] = (0, react_1.useState)(autoPlay);
+    const [ended, setEnded] = (0, react_1.useState)(false);
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(isMobile);
     (0, hooks_1.useMount)(() => setIsMounted(true));
-    const videoSrc = React.useMemo(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
-    const eventsArray = React.useMemo(() => {
+    const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
+    const eventsArray = (0, react_1.useMemo)(() => {
         if (analyticsEvents) {
             return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
         }
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ReactPlayerControls);
-    React.useImperativeHandle(originRef, () => {
+    (0, react_1.useImperativeHandle)(originRef, () => {
         if (!playerRef) {
             return;
         }
@@ -70,33 +69,33 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             addEventListener: addEventListener.bind(videoInstance),
         };
     }, [playerRef]);
-    React.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
     }, [playingVideoRef]);
-    React.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
-    React.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (playerRef && !started) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef, started]);
-    React.useEffect(() => setMuted(mute), [mute]);
-    React.useEffect(() => {
+    (0, react_1.useEffect)(() => setMuted(mute), [mute]);
+    (0, react_1.useEffect)(() => {
         if (!started && isPlaying) {
             setStarted(true);
         }
     }, [isPlaying, started]);
-    React.useEffect(() => {
+    (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]);
-    React.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const updateSize = (0, debounce_1.default)(() => {
             if (ref.current) {
                 // We need to get parent's width does not equal 0
@@ -115,9 +114,9 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [actualRatio, autoRatio, ratio]);
-    const playEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
-    const stopEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
-    const playIcon = React.useMemo(() => {
+    const playEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
+    const stopEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
+    const playIcon = (0, react_1.useMemo)(() => {
         let playButtonContent;
         switch (type) {
             case models_1.PlayButtonType.Text:
@@ -125,12 +124,12 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 break;
             case models_1.PlayButtonType.Default:
             default:
-                playButtonContent = (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
+                playButtonContent = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
                 break;
         }
-        return ((0, jsx_runtime_1.jsx)("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play'), ref: buttonRef, children: playButtonContent }));
+        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play'), ref: buttonRef }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
-    const changeMute = React.useCallback((isMuted) => {
+    const changeMute = (0, react_1.useCallback)((isMuted) => {
         if (isMuted &&
             playerRef &&
             controls === models_1.MediaVideoControlsType.Custom &&
@@ -154,24 +153,24 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
         setProps,
         controls,
     ]);
-    const handleClickPreview = React.useCallback(() => {
+    const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
         handleAnalytics(playEvents);
     }, [onClickPreview, handleAnalytics, playEvents]);
-    const onPause = React.useCallback(() => {
+    const onPause = (0, react_1.useCallback)(() => {
         // For support correct state for youtube
         if (controls !== models_1.MediaVideoControlsType.Custom ||
             customControlsType !== models_1.CustomControlsType.WithMuteButton) {
             setIsPlaying(false);
         }
     }, [controls, customControlsType]);
-    const onStart = React.useCallback(() => {
+    const onStart = (0, react_1.useCallback)(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
         }
     }, [autoPlay, initiallyMuted]);
-    const onPlay = React.useCallback(() => {
+    const onPlay = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         if (controls === models_1.MediaVideoControlsType.Custom &&
             customControlsType === models_1.CustomControlsType.WithMuteButton) {
@@ -184,7 +183,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setEnded(false);
         }
     }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
-    const onReady = React.useCallback((player) => {
+    const onReady = (0, react_1.useCallback)((player) => {
         setPlayerRef(player);
         const videoElement = player.getInternalPlayer();
         const videoWidth = videoElement.videoWidth;
@@ -193,13 +192,13 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             setActualRatio(videoHeight / videoWidth);
         }
     }, []);
-    const onProgress = React.useCallback((progress) => {
+    const onProgress = (0, react_1.useCallback)((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
     }, []);
-    const onEnded = React.useCallback(() => {
+    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.
@@ -210,7 +209,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const onPlayClick = React.useCallback(() => {
+    const onPlayClick = (0, react_1.useCallback)(() => {
         if (isPlaying) {
             onPause();
         }
@@ -218,7 +217,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             onPlay();
         }
     }, [isPlaying, onPlay, onPause]);
-    const handleClick = React.useCallback(() => {
+    const handleClick = (0, react_1.useCallback)(() => {
         var _a;
         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         if (controls === models_1.MediaVideoControlsType.Custom) {
@@ -230,37 +229,39 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             }
         }
     }, [controls, customControlsType, changeMute, muted, onPlayClick]);
-    const handleKeyDown = React.useCallback((e) => {
+    const handleKeyDown = (0, react_1.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 = React.useCallback(() => setHovered(true), []);
-    const onFocusOut = React.useCallback(() => setHovered(false), []);
-    return ((0, jsx_runtime_1.jsx)("div", { className: b({
+    const onFocusIn = (0, react_1.useCallback)(() => setHovered(true), []);
+    const onFocusOut = (0, react_1.useCallback)(() => setHovered(false), []);
+    return (react_1.default.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, children: isMounted ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.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 !== models_1.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 === models_1.MediaVideoControlsType.Custom && ((0, jsx_runtime_1.jsx)(CustomBarControls_1.default, { 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 }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.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 !== models_1.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 === models_1.MediaVideoControlsType.Custom && (react_1.default.createElement(CustomBarControls_1.default, { 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;
@@ -273,4 +274,3 @@ function getParentElement(element) {
     return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);
 }
 exports.default = exports.ReactPlayerBlock;
-//# sourceMappingURL=ReactPlayer.js.map

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

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

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

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
 const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
-const cn_1 = require("../../../utils/cn.js");
+const cn_1 = require("../../../utils/cn");
 const en_json_1 = tslib_1.__importDefault(require("./en.json"));
 const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
 exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}ReactPlayer`);
-//# sourceMappingURL=index.js.map

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

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

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

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

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

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

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_1 = require("../../context/theme/index.js");
-const utils_1 = require("../../utils/index.js");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const theme_1 = require("../../context/theme");
+const utils_1 = require("../../utils");
 const RootCn = ({ className, children }) => {
     const theme = (0, theme_1.useTheme)();
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.rootCn)({ theme }, className), children: children });
+    return react_1.default.createElement("div", { className: (0, utils_1.rootCn)({ theme }, className) }, children);
 };
 exports.default = RootCn;
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
-const locationContext_1 = require("../../context/locationContext/index.js");
+const react_1 = tslib_1.__importStar(require("react"));
+const locationContext_1 = require("../../context/locationContext");
 const RouterLink = ({ href, children }) => {
-    const { Link } = React.useContext(locationContext_1.LocationContext);
-    return Link ? (0, jsx_runtime_1.jsx)(Link, { href: href, children: children }) : (0, jsx_runtime_1.jsx)(React.Fragment, { children: 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;
-//# sourceMappingURL=RouterLink.js.map

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

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