@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { ImageProps } from '../Image/Image';
+export interface FullScreenImageProps extends ImageProps {
+    imageClassName?: string;
+    modalImageClass?: string;
+    imageStyle?: CSSProperties;
+}
+declare const FullScreenImage: ({ src, alt, imageClassName, disableCompress, modalImageClass, imageStyle, }: FullScreenImageProps) => JSX.Element;
+export default FullScreenImage;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const Image_1 = (0, tslib_1.__importDefault)(require("../Image/Image"));
+const icons_1 = require("../../icons");
+const b = (0, utils_1.block)('FullScreenImage');
+const FullScreenImage = ({ src, alt, imageClassName, disableCompress, modalImageClass, imageStyle, }) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [isMouseEnter, setIsMouseEnter] = (0, react_1.useState)(false);
+    const openModal = (0, react_1.useCallback)(() => setIsOpened(true), []);
+    const closeModal = (0, react_1.useCallback)(() => setIsOpened(false), []);
+    const showFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(true), []);
+    const hideFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(false), []);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
+            react_1.default.createElement(Image_1.default, { className: b('image', imageClassName), src: src, alt: alt, onClick: openModal, style: imageStyle, disableCompress: disableCompress }),
+            react_1.default.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: 18, height: 18, className: b('icon') }))),
+        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
+            react_1.default.createElement("div", { className: b('modal-content') },
+                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: 30, height: 30, className: b('icon', { hover: true }) })),
+                react_1.default.createElement(Image_1.default, { className: b('modal-image', modalImageClass), src: src, alt: alt, disableCompress: disableCompress }))))));
+};
+exports.default = FullScreenImage;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WithChildren } from '../../models';
+export interface HTMLProps {
+    children?: string;
+    block?: boolean;
+    className?: string;
+}
+declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+    dangerouslySetInnerHTML: {
+        __html: string & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null);
+    };
+    className: string | undefined;
+}, HTMLElement> | null;
+export default HTML;

package/build/cjs/components/HTML/HTML.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const HTML = ({ children, block = false, className }) => {
+    if (!children) {
+        return null;
+    }
+    return react_1.default.createElement(block ? 'div' : 'span', {
+        dangerouslySetInnerHTML: { __html: children },
+        className,
+    });
+};
+exports.default = HTML;

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.css

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-header-breadcrumbs {
+  z-index: 11;
+}
+.pc-header-breadcrumbs__item {
+  display: inline-block;
+}
+.pc-header-breadcrumbs__text {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--yc-color-text-secondary);
+}
+.utilityfocus .pc-header-breadcrumbs__text:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header-breadcrumbs__text:hover, .pc-header-breadcrumbs__text:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-header-breadcrumbs__text:after {
+  content: " / ";
+  margin: 0 8px 0 6px;
+  color: var(--yc-color-text-secondary);
+}
+.pc-header-breadcrumbs__text:hover {
+  color: var(--yc-color-text-primary);
+}
+.pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:after {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-header-breadcrumbs_theme_dark .pc-header-breadcrumbs__text:hover {
+  color: var(--yc-color-text-light-primary);
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { HeaderBreadCrumbsProps } from '../../models';
+export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps): JSX.Element;

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../utils");
+const useMetrika_1 = require("../../hooks/useMetrika");
+const b = (0, utils_1.block)('header-breadcrumbs');
+function HeaderBreadcrumbs(props) {
+    const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
+    const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const onClick = () => {
+        handleMetrika({ metrikaGoals, pixelEvents });
+    };
+    return (react_1.default.createElement("div", { className: b({ theme }, className) }, items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
+        react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
+}
+exports.default = HeaderBreadcrumbs;

package/build/cjs/components/HeightCalculator/HeightCalculator.css

@@ -0,0 +1,9 @@
+.pc-height-calculator {
+  position: relative;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.pc-height-calculator__item-wrapper {
+  position: absolute;
+}

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

@@ -0,0 +1,6 @@
+import { WithChildren } from '../../models';
+export interface HeightCalculatorProps {
+    onCalculate: (height: number) => void;
+}
+declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
+export default HeightCalculator;

package/build/cjs/components/HeightCalculator/HeightCalculator.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('height-calculator');
+const HeightCalculator = ({ onCalculate, children }) => {
+    const [isCalculating, setIsCalculating] = (0, react_1.useState)(true);
+    const container = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = react_1.Children.map(children, () => react_1.default.createRef())) !== null && _a !== void 0 ? _a : [];
+    }, [children]);
+    const calculateContainerHeight = (0, react_1.useCallback)(() => {
+        if (container && container.current && itemRefs.length) {
+            const maxHeight = Math.max(...itemRefs.map((tabRef) => {
+                if (tabRef && tabRef.current) {
+                    return tabRef.current.offsetHeight;
+                }
+                return 0;
+            }));
+            onCalculate(maxHeight);
+            setIsCalculating(false);
+        }
+    }, [itemRefs, onCalculate]);
+    (0, react_1.useEffect)(() => {
+        const handleResize = lodash_1.default.debounce(() => {
+            setIsCalculating(true);
+            calculateContainerHeight();
+        }, 1000);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [calculateContainerHeight]);
+    return isCalculating ? (react_1.default.createElement("div", { className: b(), ref: container }, react_1.Children.map(children, (child, index) => {
+        return (react_1.default.createElement("div", { className: b('item-wrapper'), ref: itemRefs[index], key: index }, child));
+    }))) : null;
+};
+exports.default = HeightCalculator;

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

@@ -0,0 +1,11 @@
+import { CSSProperties, MouseEventHandler } from 'react';
+export interface ImageProps {
+    src: string;
+    alt?: string;
+    disableCompress?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+}
+declare const Image: (props: ImageProps) => JSX.Element | null;
+export default Image;

package/build/cjs/components/Image/Image.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const projectSettingsContext_1 = require("../../context/projectSettingsContext");
+const Image = (props) => {
+    const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
+    const { src, alt, disableCompress, style, className, onClick } = props;
+    const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
+    if (!src) {
+        return null;
+    }
+    // TODO: Temporary solution for .svg images
+    const disableWebp = projectSettings.disableCompress ||
+        disableCompress ||
+        src.endsWith('.svg') ||
+        imgLoadingError;
+    const webp = src.endsWith('.webp') ? src : src + '.webp';
+    return (react_1.default.createElement("picture", null,
+        disableWebp ? null : react_1.default.createElement("source", { srcSet: webp, type: "image/webp" }),
+        react_1.default.createElement("img", { className: className, src: src, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+};
+exports.default = Image;

package/build/cjs/components/Link/Link.css

@@ -0,0 +1,54 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-link-block {
+  margin-top: 16px;
+}
+.pc-link-block__link {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.utilityfocus .pc-link-block__link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-link-block__link:hover, .pc-link-block__link:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}
+.pc-link-block__link_theme_dark {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-link-block__link_theme_dark:hover {
+  color: var(--yc-color-text-light-secondary);
+}
+.pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
+  --pc-text-header-color: inherit;
+  color: var(--yc-color-text-link);
+}
+.pc-link-block__link:hover .pc-link-block__arrow {
+  transform: translateX(5px) rotate(-90deg);
+}
+.pc-link-block__link.pc-link-block__link_has-arrow.pc-link-block__link_theme_dark:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-link-block__arrow {
+  position: relative;
+  margin-left: 2px;
+  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transform: rotate(-90deg);
+}
+.pc-link-block_size_l {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.pc-link-block_size_m {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-link-block_size_s {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}

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

@@ -0,0 +1,4 @@
+import { LinkProps, ClassNameProps, WithChildren } from '../../models';
+export declare type LinkFullProps = LinkProps & ClassNameProps;
+declare const LinkBlock: (props: WithChildren<LinkFullProps>) => JSX.Element;
+export default LinkBlock;

package/build/cjs/components/Link/Link.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const FileLink_1 = (0, tslib_1.__importDefault)(require("../FileLink/FileLink"));
+const BackLink_1 = (0, tslib_1.__importDefault)(require("../BackLink/BackLink"));
+const localeContext_1 = require("../../context/localeContext/localeContext");
+const locationContext_1 = require("../../context/locationContext/locationContext");
+const useMetrika_1 = require("../../hooks/useMetrika");
+const b = (0, utils_1.block)('link-block');
+function getArrowSize(size) {
+    switch (size) {
+        case 'l':
+            return 14;
+        case 'm':
+            return 12;
+        case 's':
+            return 12;
+        default:
+            return 12;
+    }
+}
+const LinkBlock = (props) => {
+    const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
+    const href = (0, utils_1.setUrlTld)(props.url, tld);
+    const defaultTextSize = theme === 'back' ? 'l' : 'm';
+    const onClick = () => {
+        handleMetrika({ metrikaGoals, pixelEvents });
+    };
+    const getLinkByType = () => {
+        switch (theme) {
+            case 'back':
+                return react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick });
+            case 'file-link':
+            case 'underline':
+                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick }));
+            case 'normal': {
+                const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
+                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps),
+                    children || text,
+                    arrow && (react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))));
+            }
+            default:
+                return null;
+        }
+    };
+    return (react_1.default.createElement("div", { className: b({ size: textSize || defaultTextSize }, className) }, getLinkByType()));
+};
+exports.default = LinkBlock;

package/build/cjs/components/Link/Links.d.ts

@@ -0,0 +1,6 @@
+import { LinkProps, ClassNameProps } from '../../models';
+interface LinksProps extends ClassNameProps {
+    links?: LinkProps[];
+}
+declare const Links: (props: LinksProps) => JSX.Element | null;
+export default Links;

package/build/cjs/components/Link/Links.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const Link_1 = (0, tslib_1.__importDefault)(require("./Link"));
+const Links = (props) => {
+    const { links, className } = props;
+    if (!links) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.Fragment, null, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ key: link.url }, link, { className: className }))))));
+};
+exports.default = Links;

package/build/cjs/components/Media/DataLens/DataLens.css

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-data-lens__wrap {
+  height: 400px;
+  overflow: hidden;
+  margin: 24px;
+}
+.pc-media-component-data-lens__wrap .pc-media-component-data-lens__iframe {
+  border-radius: 0;
+}
+.pc-media-component-data-lens__iframe {
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  margin: -1px -2px 0;
+}
+@media (max-width: 577px) {
+  .pc-media-component-data-lens__wrap {
+    margin: 24px 0;
+  }
+}

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

@@ -0,0 +1,3 @@
+import { MediaComponentDataLensProps } from '../../../models';
+declare const DataLens: (props: MediaComponentDataLensProps) => JSX.Element | null;
+export default DataLens;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../../utils");
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('media-component-data-lens');
+const DataLens = (props) => {
+    const { dataLens } = props;
+    const dataLensData = (0, utils_2.unifyDataLensToObject)(dataLens);
+    return dataLens ? (react_1.default.createElement("div", { className: b('wrap') },
+        react_1.default.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), frameBorder: 0 }))) : null;
+};
+exports.default = DataLens;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unifyDataLensToObject = void 0;
+function unifyDataLensToObject(dataLens) {
+    return typeof dataLens === 'string' ? { id: dataLens, theme: 'light' } : dataLens;
+}
+exports.unifyDataLensToObject = unifyDataLensToObject;

package/build/cjs/components/Media/Image/Image.css

@@ -0,0 +1,10 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-image__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.pc-media-component-image__item_withVideo {
+  display: none;
+}

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

@@ -0,0 +1,11 @@
+import { MediaComponentImageProps } from '../../../models';
+export interface ImageAdditionProps {
+    imageClassName?: string;
+    isBackground?: boolean;
+}
+interface InnerImageProps {
+    hasVideoFallback: boolean;
+}
+declare type ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps;
+declare const Image: (props: ImageAllProps) => JSX.Element;
+export default Image;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const react_spring_1 = require("react-spring");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const Slider_1 = (0, tslib_1.__importDefault)(require("../../../blocks/Slider/Slider"));
+const models_1 = require("../../../models");
+const utils_1 = require("./utils");
+const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../FullscreenImage/FullscreenImage"));
+const BackgroundImage_1 = (0, tslib_1.__importDefault)(require("../../BackgroundImage/BackgroundImage"));
+const utils_2 = require("../../../utils");
+const Image_1 = (0, tslib_1.__importDefault)(require("../../Image/Image"));
+const b = (0, utils_2.block)('media-component-image');
+const Image = (props) => {
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video } = props;
+    const [scrollY, setScrollY] = (0, react_1.useState)(0);
+    const [{ springScrollY }, springSetScrollY] = (0, react_spring_1.useSpring)(() => ({
+        springScrollY: 0,
+        config: react_spring_1.config.molasses,
+    }));
+    let parallaxInterpolate = '';
+    (0, react_1.useEffect)(() => {
+        if (parallax) {
+            const handleScroll = () => setScrollY(window.scrollY);
+            window.addEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
+            return () => window.removeEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
+        }
+        return () => { };
+    });
+    if (parallax) {
+        const parallaxLevel = 2;
+        springSetScrollY({ springScrollY: height && scrollY > height ? height : scrollY });
+        parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
+    }
+    const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
+    const imageSlider = (imageArray) => (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => {
+        const itemData = (0, utils_1.getMediaImage)(item);
+        return (react_1.default.createElement(FullscreenImage_1.default, { key: itemData.src, src: itemData.src, alt: itemData.alt, imageClassName: imageClass, imageStyle: { height } }));
+    })));
+    const imageBackground = (oneImage) => {
+        const imageData = (0, utils_1.getMediaImage)(oneImage);
+        return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
+            react_1.default.createElement(BackgroundImage_1.default, { className: imageClass, src: imageData.src, style: { height }, disableCompress: imageData.disableCompress })));
+    };
+    const imageOnly = (oneImage) => {
+        const imageData = (0, utils_1.getMediaImage)(oneImage);
+        return (react_1.default.createElement(Image_1.default, { className: imageClass, src: imageData.src, alt: imageData.alt, style: { height }, disableCompress: imageData.disableCompress }));
+    };
+    if (Array.isArray(image)) {
+        return imageSlider(image);
+    }
+    return isBackground ? imageBackground(image) : imageOnly(image);
+};
+exports.default = Image;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMediaImage = void 0;
+function getMediaImage(image) {
+    return typeof image === 'string' ? { src: image } : image;
+}
+exports.getMediaImage = getMediaImage;

package/build/cjs/components/Media/Media.css

@@ -0,0 +1,11 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-Media {
+  overflow: hidden;
+}
+.pc-Media__youtube {
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,9 @@
+import { MediaProps } from '../../models';
+import { ImageAdditionProps } from './Image/Image';
+import { VideoAdditionProps } from './Video/Video';
+export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps {
+    className?: string;
+    youtubeClassName?: string;
+}
+export declare const Media: (props: MediaAllProps) => JSX.Element;
+export default Media;

package/build/cjs/components/Media/Media.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Media = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const Image_1 = (0, tslib_1.__importDefault)(require("./Image/Image"));
+const DataLens_1 = (0, tslib_1.__importDefault)(require("./DataLens/DataLens"));
+const Video_1 = (0, tslib_1.__importDefault)(require("./Video/Video"));
+const VideoBlock_1 = (0, tslib_1.__importDefault)(require("../VideoBlock/VideoBlock"));
+const b = (0, utils_1.block)('Media');
+const Media = (props) => {
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, } = props;
+    const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
+    const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
+    const content = (0, react_1.useMemo)(() => {
+        let result = [];
+        if (image) {
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
+        }
+        if (video) {
+            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+        }
+        if (youtube) {
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg }));
+        }
+        if (dataLens) {
+            result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
+        }
+        return result;
+    }, [
+        image,
+        video,
+        youtube,
+        dataLens,
+        parallax,
+        height,
+        imageClassName,
+        isBackground,
+        hasVideoFallback,
+        videoClassName,
+        metrika,
+        playVideo,
+        previewImg,
+        playButton,
+        customBarControlsClassName,
+        youtubeClassName,
+    ]);
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
+};
+exports.Media = Media;
+exports.default = exports.Media;

package/build/cjs/components/Media/Video/Video.css

@@ -0,0 +1,17 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-video__wrap {
+  position: relative;
+  overflow: hidden;
+}
+.pc-media-component-video__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.pc-media-component-video__react-player {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  overflow: hidden;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MediaComponentVideoProps, PlayButtonProps } from '../../../models';
+export interface VideoAdditionProps {
+    playButton?: PlayButtonProps;
+    customBarControlsClassName?: string;
+    videoClassName?: string;
+    playVideo?: boolean;
+}
+interface InnerVideoProps {
+    setHasVideoFallback: React.Dispatch<boolean>;
+    hasVideoFallback: boolean;
+}
+declare type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+declare const Video: (props: VideoAllProps) => JSX.Element | null;
+export default Video;