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

package/build/esm/components/Map/YMap/YandexMap.js

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Spin } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
-import { LocaleContext } from "../../../context/localeContext/localeContext.js";
-import { MapsContext } from "../../../context/mapsContext/mapsContext.js";
-import { MobileContext } from "../../../context/mobileContext/index.js";
-import { block } from "../../../utils/index.js";
-import ErrorWrapper from "../../ErrorWrapper/ErrorWrapper.js";
-import { getMapHeight } from "../helpers.js";
-import { YMap } from "./YMap.js";
-import { MapApiStatus, YMapsApiLoader } from "./YandexMapApiLoader.js";
-import { i18n } from "./i18n/index.js";
+import { LocaleContext } from '../../../context/localeContext/localeContext';
+import { MapsContext } from '../../../context/mapsContext/mapsContext';
+import { MobileContext } from '../../../context/mobileContext';
+import { block } from '../../../utils';
+import ErrorWrapper from '../../ErrorWrapper/ErrorWrapper';
+import { getMapHeight } from '../helpers';
+import { YMap } from './YMap';
+import { MapApiStatus, YMapsApiLoader } from './YandexMapApiLoader';
+import { i18n } from './i18n';
 const b = block('map');
 const DEFAULT_CONTAINER_ID = 'ymap';
 const DEFAULT_ZOOM = 9;
@@ -20,20 +19,20 @@ const DEFAULT_ZOOM = 9;
 const INITIAL_CENTER = [0, 0];
 const YandexMap = (props) => {
     const { markers, zoom, id, className } = props;
-    const { apiKey, scriptSrc, nonce } = React.useContext(MapsContext);
-    const isMobile = React.useContext(MobileContext);
-    const { lang = 'ru' } = React.useContext(LocaleContext);
+    const { apiKey, scriptSrc, nonce } = useContext(MapsContext);
+    const isMobile = useContext(MobileContext);
+    const { lang = 'ru' } = useContext(LocaleContext);
     const containerId = `${DEFAULT_CONTAINER_ID}-${id}`;
-    const [ymap, setYmaps] = React.useState(null);
-    const [height, setHeight] = React.useState(undefined);
-    const ref = React.useRef(null);
-    const [loading, setLoading] = React.useState(false);
-    const [ready, setReady] = React.useState(false);
-    const [attemptsIndex, setAttemptsIndex] = React.useState(0);
-    const onTryAgain = React.useCallback(() => {
+    const [ymap, setYmaps] = useState(null);
+    const [height, setHeight] = useState(undefined);
+    const ref = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [ready, setReady] = useState(false);
+    const [attemptsIndex, setAttemptsIndex] = useState(0);
+    const onTryAgain = useCallback(() => {
         setAttemptsIndex(attemptsIndex + 1);
     }, [attemptsIndex]);
-    React.useEffect(() => {
+    useEffect(() => {
         (async function () {
             var _a;
             setLoading(true);
@@ -47,7 +46,7 @@ const YandexMap = (props) => {
             setLoading(false);
         })();
     }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
-    React.useEffect(() => {
+    useEffect(() => {
         const updateSize = debounce(() => {
             if (ref.current) {
                 setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile)));
@@ -59,7 +58,7 @@ const YandexMap = (props) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [markers, ymap, setYmaps, isMobile]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (ymap) {
             // show with computed center and placemarks
             const showPlacemarks = async () => {
@@ -71,7 +70,9 @@ const YandexMap = (props) => {
     });
     if (!markers)
         return null;
-    return (_jsx(ErrorWrapper, { isError: YMapsApiLoader.status === MapApiStatus.Error, text: i18n('map-load-error'), buttonText: i18n('map-try-again'), handler: onTryAgain, className: b('wrapper'), children: _jsxs("div", { className: b('wrapper'), children: [_jsx("div", { id: containerId, className: b({ hidden: !ready }, className), ref: ref, style: { height } }), loading ? _jsx(Spin, { size: "xl", className: b('spinner') }) : null] }) }));
+    return (React.createElement(ErrorWrapper, { isError: YMapsApiLoader.status === MapApiStatus.Error, text: i18n('map-load-error'), buttonText: i18n('map-try-again'), handler: onTryAgain, className: b('wrapper') },
+        React.createElement("div", { className: b('wrapper') },
+            React.createElement("div", { id: containerId, className: b({ hidden: !ready }, className), ref: ref, style: { height } }),
+            loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
 };
 export default YandexMap;
-//# sourceMappingURL=YandexMap.js.map

package/build/esm/components/Map/YMap/YandexMapApiLoader.js

@@ -1,5 +1,5 @@
-import { Maplangs } from "../../../context/mapsContext/mapsContext.js";
-import { loadScript } from "../../../utils/index.js";
+import { Maplangs } from '../../../context/mapsContext/mapsContext';
+import { loadScript } from '../../../utils';
 export var MapApiStatus;
 (function (MapApiStatus) {
     MapApiStatus["NotStarted"] = "not_started";
@@ -31,4 +31,3 @@ export class YMapsApiLoader {
     }
 }
 YMapsApiLoader.status = MapApiStatus.NotStarted;
-//# sourceMappingURL=YandexMapApiLoader.js.map

package/build/esm/components/Map/YMap/i18n/index.d.ts

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

package/build/esm/components/Map/YMap/i18n/index.js

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

package/build/esm/components/Map/helpers.js

@@ -1,4 +1,3 @@
 export function getMapHeight(width, isMobile) {
     return isMobile ? (width / 4) * 3 : (width / 16) * 9;
 }
-//# sourceMappingURL=helpers.js.map

package/build/esm/components/Media/DataLens/DataLens.d.ts

@@ -1,4 +1,4 @@
-import { MediaComponentDataLensProps } from "../../../models/index.js";
+import { MediaComponentDataLensProps } from '../../../models';
 import './DataLens.css';
-declare const DataLens: (props: MediaComponentDataLensProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const DataLens: (props: MediaComponentDataLensProps) => JSX.Element | null;
 export default DataLens;

package/build/esm/components/Media/DataLens/DataLens.js

@@ -1,16 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { LocaleContext } from "../../../context/localeContext/index.js";
-import { block } from "../../../utils/index.js";
-import { i18n } from "./i18n/index.js";
-import { unifyDataLensToObject } from "./utils.js";
+import React, { useContext } from 'react';
+import { LocaleContext } from '../../../context/localeContext';
+import { block } from '../../../utils';
+import { i18n } from './i18n';
+import { unifyDataLensToObject } from './utils';
 import './DataLens.css';
 const b = block('media-component-data-lens');
 const DataLens = (props) => {
     const { dataLens } = props;
     const dataLensData = unifyDataLensToObject(dataLens);
-    const locale = React.useContext(LocaleContext);
-    return dataLens ? (_jsx("div", { className: b('wrap'), children: _jsx("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}&_lang=${locale.lang}`, className: b('iframe'), loading: "lazy", title: i18n('iframe-title'), frameBorder: 0 }) })) : null;
+    const locale = useContext(LocaleContext);
+    return dataLens ? (React.createElement("div", { className: b('wrap') },
+        React.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}&_lang=${locale.lang}`, className: b('iframe'), loading: "lazy", title: i18n('iframe-title'), frameBorder: 0 }))) : null;
 };
 export default DataLens;
-//# sourceMappingURL=DataLens.js.map

package/build/esm/components/Media/DataLens/i18n/index.d.ts

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

package/build/esm/components/Media/DataLens/i18n/index.js

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

package/build/esm/components/Media/DataLens/utils.d.ts

@@ -1,2 +1,2 @@
-import { DataLensObjectProps, DataLensProps } from "../../../models/index.js";
+import { DataLensObjectProps, DataLensProps } from '../../../models';
 export declare function unifyDataLensToObject(dataLens: DataLensProps): DataLensObjectProps;

package/build/esm/components/Media/DataLens/utils.js

@@ -1,4 +1,3 @@
 export function unifyDataLensToObject(dataLens) {
     return typeof dataLens === 'string' ? { id: dataLens, theme: 'light' } : dataLens;
 }
-//# sourceMappingURL=utils.js.map

package/build/esm/components/Media/FullscreenVideo/FullscreenVideo.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { VideoAllProps } from "../Video/Video.js";
+import React from 'react';
+import { VideoAllProps } from '../Video/Video';
 declare const FullscreenVideo: React.FC<VideoAllProps>;
 export default FullscreenVideo;

package/build/esm/components/Media/FullscreenVideo/FullscreenVideo.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import FullscreenMedia from "../../FullscreenMedia/FullscreenMedia.js";
-import Video from "../Video/Video.js";
+import React from 'react';
+import FullscreenMedia from '../../FullscreenMedia/FullscreenMedia';
+import Video from '../Video/Video';
 const FullscreenVideo = (props) => {
-    return (_jsx(FullscreenMedia, { children: (classNames) => _jsx(Video, Object.assign({}, props, classNames)) }));
+    return (React.createElement(FullscreenMedia, null, (classNames) => React.createElement(Video, Object.assign({}, props, classNames))));
 };
 export default FullscreenVideo;
-//# sourceMappingURL=FullscreenVideo.js.map

package/build/esm/components/Media/Iframe/Iframe.d.ts

@@ -1,4 +1,4 @@
-import { MediaComponentIframeProps } from "../../../models/index.js";
+import { MediaComponentIframeProps } from '../../../models';
 import './Iframe.css';
-declare const Iframe: (props: MediaComponentIframeProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Iframe: (props: MediaComponentIframeProps) => JSX.Element | null;
 export default Iframe;

package/build/esm/components/Media/Iframe/Iframe.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { block } from "../../../utils/index.js";
-import { i18n } from "./i18n/index.js";
+import React from 'react';
+import { block } from '../../../utils';
+import { i18n } from './i18n';
 import './Iframe.css';
 const b = block('media-component-iframe');
 const Iframe = (props) => {
     const { iframe, margins = true } = props;
     const { height = 400, src, width, name, title } = iframe;
-    return iframe ? (_jsx("div", { className: b({ margins }), style: { height }, children: _jsx("iframe", { className: b('item'), loading: "lazy", title: title || i18n('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }) })) : null;
+    return iframe ? (React.createElement("div", { className: b({ margins }), style: { height } },
+        React.createElement("iframe", { className: b('item'), loading: "lazy", title: title || i18n('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
 };
 export default Iframe;
-//# sourceMappingURL=Iframe.js.map

package/build/esm/components/Media/Iframe/i18n/index.d.ts

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

package/build/esm/components/Media/Iframe/i18n/index.js

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

package/build/esm/components/Media/Image/Image.d.ts

@@ -1,4 +1,4 @@
-import { MediaComponentImageProps, QAProps } from "../../../models/index.js";
+import { MediaComponentImageProps, QAProps } from '../../../models';
 import './Image.css';
 export interface ImageAdditionProps {
     imageClassName?: string;
@@ -11,5 +11,5 @@ interface InnerImageProps {
 }
 type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;
 export declare const defaultAnimatedDivQa = "animated-div";
-declare const Image: (props: ImageAllProps) => import("react/jsx-runtime").JSX.Element;
+declare const Image: (props: ImageAllProps) => JSX.Element;
 export default Image;

package/build/esm/components/Media/Image/Image.js

@@ -1,14 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { animated, config, useSpring } from '@react-spring/web';
 import debounce from 'lodash/debounce';
-import SliderBlock from "../../../blocks/Slider/Slider.js";
-import { SliderType } from "../../../models/index.js";
-import { block, getQaAttrubutes } from "../../../utils/index.js";
-import BackgroundImage from "../../BackgroundImage/BackgroundImage.js";
-import FullscreenImage from "../../FullscreenImage/FullscreenImage.js";
-import ImageView from "../../Image/Image.js";
-import { getMediaImage } from "./utils.js";
+import SliderBlock from '../../../blocks/Slider/Slider';
+import { SliderType } from '../../../models';
+import { block, getQaAttrubutes } from '../../../utils';
+import BackgroundImage from '../../BackgroundImage/BackgroundImage';
+import FullscreenImage from '../../FullscreenImage/FullscreenImage';
+import ImageView from '../../Image/Image';
+import { getMediaImage } from './utils';
 import './Image.css';
 const b = block('media-component-image');
 export const defaultAnimatedDivQa = 'animated-div';
@@ -18,13 +17,13 @@ const Image = (props) => {
         ? props.image[0]
         : props.image;
     const qaAttributes = getQaAttrubutes(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
-    const [scrollY, setScrollY] = React.useState(0);
+    const [scrollY, setScrollY] = useState(0);
     const [{ springScrollY }, springSetScrollY] = useSpring(() => ({
         springScrollY: 0,
         config: config.molasses,
     }));
     let parallaxInterpolate = '';
-    React.useEffect(() => {
+    useEffect(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
             const debouncedHandler = debounce(handleScroll, 5);
@@ -41,19 +40,20 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {
         const itemData = getMediaImage(item);
-        return (_jsx(FullscreenImage, Object.assign({}, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage }), itemData.alt));
+        return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (_jsx(animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate, children: _jsx(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage })) }));
+        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate },
+            React.createElement(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }))));
     };
     const imageOnly = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (_jsx(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad })));
+        return (React.createElement(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad })));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (_jsx(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard, children: imageArray.map((item, index) => (_jsx(React.Fragment, { children: fullscreenItem ? renderFullscreenImage(item) : imageOnly(item) }, index))) }));
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item, index) => (React.createElement(Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);
@@ -64,4 +64,3 @@ const Image = (props) => {
     return isBackground ? imageBackground(image) : imageOnly(image);
 };
 export default Image;
-//# sourceMappingURL=Image.js.map

package/build/esm/components/Media/Image/utils.d.ts

@@ -1,2 +1,2 @@
-import { ImageProps } from "../../../models/index.js";
-export declare function getMediaImage(image: ImageProps): import("../../../index.js").ImageObjectProps | import("../../../index.js").ImageDeviceProps;
+import { ImageProps } from '../../../models';
+export declare function getMediaImage(image: ImageProps): import("../../../models").ImageObjectProps | import("../../../models").ImageDeviceProps;

package/build/esm/components/Media/Image/utils.js

@@ -1,4 +1,3 @@
 export function getMediaImage(image) {
     return typeof image === 'string' ? { src: image } : image;
 }
-//# sourceMappingURL=utils.js.map

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

@@ -1,6 +1,6 @@
-import { MediaProps, QAProps } from "../../models/index.js";
-import { ImageAdditionProps } from "./Image/Image.js";
-import { VideoAdditionProps } from "./Video/Video.js";
+import { MediaProps, QAProps } from '../../models';
+import { ImageAdditionProps } from './Image/Image';
+import { VideoAdditionProps } from './Video/Video';
 import './Media.css';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
@@ -8,5 +8,5 @@ export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAddi
     autoplay?: boolean;
     onImageLoad?: () => void;
 }
-export declare const Media: (props: MediaAllProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

package/build/esm/components/Media/Media.js

@@ -1,25 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { InnerContext } from "../../context/innerContext/index.js";
-import { block, getQaAttrubutes } from "../../utils/index.js";
-import { sanitizeMicrodata } from "../../utils/microdata.js";
-import IframeVideoBlock from "../VideoBlock/VideoBlock.js";
-import DataLens from "./DataLens/DataLens.js";
-import FullscreenVideo from "./FullscreenVideo/FullscreenVideo.js";
-import Iframe from "./Iframe/Iframe.js";
-import Image from "./Image/Image.js";
-import Video from "./Video/Video.js";
+import React, { useContext, useMemo, useState } from 'react';
+import { InnerContext } from '../../context/innerContext';
+import { block, getQaAttrubutes } from '../../utils';
+import { sanitizeMicrodata } from '../../utils/microdata';
+import IframeVideoBlock from '../VideoBlock/VideoBlock';
+import DataLens from './DataLens/DataLens';
+import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
+import Iframe from './Iframe/Iframe';
+import Image from './Image/Image';
+import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
     const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
-    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);
-    const { microdata } = React.useContext(InnerContext);
+    const [hasVideoFallback, setHasVideoFallback] = useState(false);
+    const { microdata } = useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
-    const content = React.useMemo(() => {
+    const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(_jsx(Image, { parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }, "image"));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
         }
         if (video) {
             const videoProps = {
@@ -37,20 +36,20 @@ export const Media = (props) => {
                 ratio,
             };
             if (fullscreen) {
-                result.push(_jsx(FullscreenVideo, Object.assign({}, videoProps, { qa: qaAttributes.video })));
+                result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
-                result.push(_jsx(Video, Object.assign({}, videoProps, { qa: qaAttributes.video })));
+                result.push(React.createElement(Video, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
         if (youtube || videoIframe) {
-            result = (_jsx(IframeVideoBlock, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
+            result = (React.createElement(IframeVideoBlock, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
         }
         if (dataLens) {
-            result = _jsx(DataLens, { dataLens: dataLens });
+            result = React.createElement(DataLens, { dataLens: dataLens });
         }
         if (iframe) {
-            result = _jsx(Iframe, { iframe: iframe, margins: margins });
+            result = React.createElement(Iframe, { iframe: iframe, margins: margins });
         }
         return result;
     }, [
@@ -81,13 +80,14 @@ export const Media = (props) => {
         autoplay,
         margins,
     ]);
-    const videoMicrodataScript = React.useMemo(() => {
+    const videoMicrodataScript = useMemo(() => {
         var _a;
         const { name, description } = videoMicrodata || {};
         const json = JSON.stringify(Object.assign(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, (videoMicrodata || {})), { name: name ? sanitizeMicrodata(name) : name, description: description ? sanitizeMicrodata(description) : description }));
-        return video || youtube || videoIframe ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } })) : null;
+        return video || youtube || videoIframe ? (React.createElement("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } })) : null;
     }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
-    return (_jsxs("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa, children: [videoMicrodataScript, content] }));
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 export default Media;
-//# sourceMappingURL=Media.js.map

package/build/esm/components/Media/Video/Video.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { MediaComponentVideoProps, PlayButtonProps, QAProps } from "../../../models/index.js";
+import React from 'react';
+import { MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
 import './Video.css';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
@@ -12,5 +12,5 @@ interface InnerVideoProps {
     hasVideoFallback: boolean;
 }
 export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps & QAProps;
-declare const Video: (props: VideoAllProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

package/build/esm/components/Media/Video/Video.js

@@ -1,16 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { MediaVideoType } from "../../../models/index.js";
-import { block, getQaAttrubutes } from "../../../utils/index.js";
-import { DefaultVideo } from "../../DefaultVideo/DefaultVideo.js";
-import ReactPlayerBlock from "../../ReactPlayer/ReactPlayer.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import { MediaVideoType } from '../../../models';
+import { block, getQaAttrubutes } from '../../../utils';
+import { DefaultVideo } from '../../DefaultVideo/DefaultVideo';
+import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
     const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
     const qaAttributes = getQaAttrubutes(qa, 'source');
-    const ref = React.useRef(null);
-    React.useEffect(() => {
+    const ref = useRef(null);
+    useEffect(() => {
         if (ref && ref.current) {
             const { loop } = video;
             if (loop && typeof loop !== 'boolean') {
@@ -29,9 +28,9 @@ const Video = (props) => {
             }
         }
     }, [playVideo, video, setHasVideoFallback]);
-    const reactPlayerBlock = React.useMemo(() => {
+    const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, contain, } = video;
-        return (_jsx(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
+        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio === 'auto' ? undefined : ratio, autoRatio: ratio === 'auto', contain: contain }));
     }, [
         video,
         height,
@@ -43,8 +42,9 @@ const Video = (props) => {
         analyticsEvents,
         ratio,
     ]);
-    const defaultVideoBlock = React.useMemo(() => {
-        return video.src.length && !hasVideoFallback ? (_jsx("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default, children: _jsx(DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }) })) : null;
+    const defaultVideoBlock = useMemo(() => {
+        return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
+            React.createElement(DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }))) : null;
     }, [
         video,
         hasVideoFallback,
@@ -62,4 +62,3 @@ const Video = (props) => {
     }
 };
 export default Video;
-//# sourceMappingURL=Video.js.map

package/build/esm/components/Media/Video/utils.js

@@ -42,4 +42,3 @@ export const getVideoTypesWithPriority = (sources) => sources
     }
     return VideoTypePriority[typeA] - VideoTypePriority[typeB];
 });
-//# sourceMappingURL=utils.js.map

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { MediaBaseBlockProps } from "../../models/index.js";
+import React, { ReactElement } from 'react';
+import { MediaBaseBlockProps } from '../../models';
 import './MediaBase.css';
 interface MediaBaseProps extends MediaBaseBlockProps {
-    children: React.ReactElement;
+    children: ReactElement;
     onScroll?: () => void;
 }
 export declare const MediaBase: {
-    (props: MediaBaseProps): import("react/jsx-runtime").JSX.Element;
+    (props: MediaBaseProps): JSX.Element;
     Card: React.FC<{
-        children?: React.ReactNode | undefined;
+        children?: React.ReactNode;
     }>;
 };
 export default MediaBase;