@gravity-ui/page-constructor 7.12.0 → 7.14.0

package/build/cjs/blocks/Header/Header.css

@@ -145,6 +145,13 @@ unpredictable css rules order in build */
   object-fit: cover;
   border-radius: var(--pc-border-radius);
 }
+.pc-header-block__video-iframe {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  transform: translateY(-50%);
+}
 .pc-header-block__breadcrumbs {
   position: absolute;
   top: 16px;
@@ -220,6 +227,12 @@ unpredictable css rules order in build */
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.pc-header-block_media-view_full .pc-header-block__video-iframe {
+  top: 0;
+  bottom: 0;
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  transform: none;
+}
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
     left: 0;

package/build/cjs/blocks/Header/Header.js

@@ -24,11 +24,11 @@ const Background = ({ background, isMobile }) => {
 };
 const FullWidthBackground = ({ background }) => ((0, jsx_runtime_1.jsx)("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
 const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, contentInnerClassName, } = props;
+    const { title, overtitle, description, buttons, image, video, videoIframe, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, contentInnerClassName, } = props;
     const windowWidth = (0, windowWidthContext_1.useWindowWidth)();
     const isMobile = windowWidth <= constants_1.BREAKPOINTS.sm;
     const theme = (0, theme_1.useTheme)();
-    const hasRightSideImage = Boolean((image || video) && !centered);
+    const hasRightSideImage = Boolean((image || video || videoIframe) && !centered);
     const curImageSize = imageSize || (0, utils_3.getImageSize)(width);
     const titleSizes = hasRightSideImage ? (0, utils_3.titleWithImageSizes)(curImageSize) : (0, utils_3.getTitleSizes)(width);
     let curVerticalOffset = verticalOffset;
@@ -38,7 +38,8 @@ const HeaderBlock = (props) => {
     const backgroundThemed = background && (0, utils_2.getThemedValue)(background, theme);
     const imageThemed = image && (0, utils_2.getThemedValue)(image, theme);
     const videoThemed = video && (0, utils_2.getThemedValue)(video, theme);
-    const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)({ video: videoThemed, image: imageThemed }, { name: title, description });
+    const { src: videoIframeSrc, ...videoIframeProps } = videoIframe ?? {};
+    const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)({ video: videoThemed, image: imageThemed, videoIframe: videoIframeSrc, ...videoIframeProps }, { name: title, description });
     const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;
     const titleId = (0, uikit_1.useUniqId)();
     return ((0, jsx_runtime_1.jsxs)("header", { className: b({
@@ -59,7 +60,7 @@ const HeaderBlock = (props) => {
                                                         } }) })), buttons && ((0, jsx_runtime_1.jsx)("div", { className: b('buttons'), "data-qa": "header-buttons", children: buttons.map((button, index) => ((0, jsx_runtime_1.jsx)(components_1.RouterLink, { href: button.url, children: (0, jsx_runtime_1.jsx)(components_1.Button, { className: b('button'), size: "xl", extraProps: {
                                                                 'aria-describedby': titleId,
                                                                 ...button.extraProps,
-                                                            }, ...button }, index) }, index))) })), children] }) }) }), hasRightSideImage && ((0, jsx_runtime_1.jsx)(components_1.Media, { className: b('media', { [curImageSize]: true }, mediaClassName), videoClassName: b('video'), imageClassName: b('image'), ...mediaWithMicrodata }))] }) })] })] }));
+                                                            }, ...button }, index) }, index))) })), children] }) }) }), hasRightSideImage && ((0, jsx_runtime_1.jsx)(components_1.Media, { className: b('media', { [curImageSize]: true }, mediaClassName), videoClassName: b('video'), imageClassName: b('image'), youtubeClassName: b('video-iframe'), ...mediaWithMicrodata }))] }) })] })] }));
 };
 exports.HeaderBlock = HeaderBlock;
 exports.default = exports.HeaderBlock;

package/build/cjs/blocks/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport * as React from 'react';\n\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport {Button, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {BREAKPOINTS} from '../../constants';\nimport {useTheme} from '../../context/theme';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\n\nimport './Header.scss';\n\nconst b = block('header-block');\n\ntype ElementsClassName = {\n    gridClassName?: string;\n    mediaClassName?: string;\n    contentWrapperClassName?: string;\n    contentInnerClassName?: string;\n};\n\nexport type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;\n\ninterface BackgroundProps {\n    background: HeaderBlockBackground;\n    isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n    const {url, image, fullWidthMedia, video, color} = background;\n    const imageObject = url ? getMediaImage(url) : image;\n    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n    return (\n        <div\n            className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n            style={{backgroundColor: color}}\n        >\n            {renderMedia && (\n                <Media\n                    {...background}\n                    className={b('background-media')}\n                    imageClassName={b('image')}\n                    videoClassName={b('video')}\n                    isBackground={true}\n                    parallax={false}\n                    video={isMobile ? undefined : video}\n                    image={imageObject}\n                />\n            )}\n        </div>\n    );\n};\n\ninterface FullWidthBackgroundProps {\n    background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n    <div\n        className={b('background', {['full-width']: true})}\n        style={{backgroundColor: background?.color}}\n    />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n    const {\n        title,\n        overtitle,\n        description,\n        buttons,\n        image,\n        video,\n        width = 'm',\n        imageSize,\n        offset = 'default',\n        background,\n        theme: textTheme = 'light',\n        verticalOffset = 'm',\n        className,\n        gridClassName,\n        breadcrumbs,\n        status,\n        renderTitle,\n        children,\n        mediaView = 'full',\n        centered,\n        additionalInfo,\n        mediaClassName,\n        contentWrapperClassName,\n        contentInnerClassName,\n    } = props;\n    const windowWidth = useWindowWidth();\n    const isMobile = windowWidth <= BREAKPOINTS.sm;\n    const theme = useTheme();\n    const hasRightSideImage = Boolean((image || video) && !centered);\n    const curImageSize = imageSize || getImageSize(width);\n    const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n    let curVerticalOffset = verticalOffset;\n\n    if (hasRightSideImage && !verticalOffset) {\n        curVerticalOffset = 'm';\n    }\n\n    const backgroundThemed = background && getThemedValue(background, theme);\n    const imageThemed = image && getThemedValue(image, theme);\n    const videoThemed = video && getThemedValue(video, theme);\n    const mediaWithMicrodata = mergeVideoMicrodata(\n        {video: videoThemed, image: imageThemed},\n        {name: title, description},\n    );\n    const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n    const titleId = useUniqId();\n\n    return (\n        <header\n            className={b(\n                {\n                    ['has-media']: hasRightSideImage,\n                    ['full-width']: fullWidth,\n                    ['media-view']: mediaView,\n                    ['controls-view']: textTheme,\n                },\n                className,\n            )}\n        >\n            {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n            {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n            <Grid containerClass={b('container-fluid')} className={b(null, gridClassName)}>\n                {breadcrumbs && (\n                    <Row className={b('breadcrumbs')}>\n                        <Col>\n                            <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n                        </Col>\n                    </Row>\n                )}\n                <Row>\n                    <Col reset className={b('content-wrapper', contentWrapperClassName)}>\n                        <Row>\n                            <Col\n                                className={b('content', {\n                                    offset,\n                                    theme: textTheme,\n                                    'vertical-offset': curVerticalOffset,\n                                })}\n                            >\n                                <Col\n                                    sizes={titleSizes}\n                                    className={b(\n                                        'content-inner',\n                                        {centered},\n                                        contentInnerClassName,\n                                    )}\n                                >\n                                    {overtitle && (\n                                        <div className={b('overtitle')}>\n                                            {typeof overtitle === 'string' ? (\n                                                <YFMWrapper\n                                                    tagName=\"div\"\n                                                    className={b('overtitle')}\n                                                    content={overtitle}\n                                                    modifiers={{constructor: true}}\n                                                />\n                                            ) : (\n                                                overtitle\n                                            )}\n                                        </div>\n                                    )}\n                                    <YFMWrapper\n                                        content={title}\n                                        contentClassName={b('title')}\n                                        className={b('title-container')}\n                                        modifiers={{constructor: true, constructorTheme: textTheme}}\n                                        tagName=\"h1\"\n                                        contentPosition=\"end\"\n                                    >\n                                        {status}\n                                        {renderTitle ? renderTitle(title) : null}\n                                    </YFMWrapper>\n                                    {description && (\n                                        <div className={b('description', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={description}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {additionalInfo && (\n                                        <div className={b('additional-info', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={additionalInfo}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {buttons && (\n                                        <div className={b('buttons')} data-qa=\"header-buttons\">\n                                            {buttons.map((button, index) => (\n                                                <RouterLink href={button.url} key={index}>\n                                                    <Button\n                                                        key={index}\n                                                        className={b('button')}\n                                                        size=\"xl\"\n                                                        extraProps={{\n                                                            'aria-describedby': titleId,\n                                                            ...button.extraProps,\n                                                        }}\n                                                        {...button}\n                                                    />\n                                                </RouterLink>\n                                            ))}\n                                        </div>\n                                    )}\n                                    {children}\n                                </Col>\n                            </Col>\n                        </Row>\n                        {hasRightSideImage && (\n                            <Media\n                                className={b('media', {[curImageSize]: true}, mediaClassName)}\n                                videoClassName={b('video')}\n                                imageClassName={b('image')}\n                                {...mediaWithMicrodata}\n                            />\n                        )}\n                    </Col>\n                </Row>\n            </Grid>\n        </header>\n    );\n};\n\nexport default HeaderBlock;\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport * as React from 'react';\n\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport {Button, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {BREAKPOINTS} from '../../constants';\nimport {useTheme} from '../../context/theme';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\n\nimport './Header.scss';\n\nconst b = block('header-block');\n\ntype ElementsClassName = {\n    gridClassName?: string;\n    mediaClassName?: string;\n    contentWrapperClassName?: string;\n    contentInnerClassName?: string;\n};\n\nexport type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;\n\ninterface BackgroundProps {\n    background: HeaderBlockBackground;\n    isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n    const {url, image, fullWidthMedia, video, color} = background;\n    const imageObject = url ? getMediaImage(url) : image;\n    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n    return (\n        <div\n            className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n            style={{backgroundColor: color}}\n        >\n            {renderMedia && (\n                <Media\n                    {...background}\n                    className={b('background-media')}\n                    imageClassName={b('image')}\n                    videoClassName={b('video')}\n                    isBackground={true}\n                    parallax={false}\n                    video={isMobile ? undefined : video}\n                    image={imageObject}\n                />\n            )}\n        </div>\n    );\n};\n\ninterface FullWidthBackgroundProps {\n    background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n    <div\n        className={b('background', {['full-width']: true})}\n        style={{backgroundColor: background?.color}}\n    />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n    const {\n        title,\n        overtitle,\n        description,\n        buttons,\n        image,\n        video,\n        videoIframe,\n        width = 'm',\n        imageSize,\n        offset = 'default',\n        background,\n        theme: textTheme = 'light',\n        verticalOffset = 'm',\n        className,\n        gridClassName,\n        breadcrumbs,\n        status,\n        renderTitle,\n        children,\n        mediaView = 'full',\n        centered,\n        additionalInfo,\n        mediaClassName,\n        contentWrapperClassName,\n        contentInnerClassName,\n    } = props;\n    const windowWidth = useWindowWidth();\n    const isMobile = windowWidth <= BREAKPOINTS.sm;\n    const theme = useTheme();\n    const hasRightSideImage = Boolean((image || video || videoIframe) && !centered);\n    const curImageSize = imageSize || getImageSize(width);\n    const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n    let curVerticalOffset = verticalOffset;\n\n    if (hasRightSideImage && !verticalOffset) {\n        curVerticalOffset = 'm';\n    }\n\n    const backgroundThemed = background && getThemedValue(background, theme);\n    const imageThemed = image && getThemedValue(image, theme);\n    const videoThemed = video && getThemedValue(video, theme);\n    const {src: videoIframeSrc, ...videoIframeProps} = videoIframe ?? {};\n    const mediaWithMicrodata = mergeVideoMicrodata(\n        {video: videoThemed, image: imageThemed, videoIframe: videoIframeSrc, ...videoIframeProps},\n        {name: title, description},\n    );\n    const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n    const titleId = useUniqId();\n\n    return (\n        <header\n            className={b(\n                {\n                    ['has-media']: hasRightSideImage,\n                    ['full-width']: fullWidth,\n                    ['media-view']: mediaView,\n                    ['controls-view']: textTheme,\n                },\n                className,\n            )}\n        >\n            {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n            {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n            <Grid containerClass={b('container-fluid')} className={b(null, gridClassName)}>\n                {breadcrumbs && (\n                    <Row className={b('breadcrumbs')}>\n                        <Col>\n                            <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n                        </Col>\n                    </Row>\n                )}\n                <Row>\n                    <Col reset className={b('content-wrapper', contentWrapperClassName)}>\n                        <Row>\n                            <Col\n                                className={b('content', {\n                                    offset,\n                                    theme: textTheme,\n                                    'vertical-offset': curVerticalOffset,\n                                })}\n                            >\n                                <Col\n                                    sizes={titleSizes}\n                                    className={b(\n                                        'content-inner',\n                                        {centered},\n                                        contentInnerClassName,\n                                    )}\n                                >\n                                    {overtitle && (\n                                        <div className={b('overtitle')}>\n                                            {typeof overtitle === 'string' ? (\n                                                <YFMWrapper\n                                                    tagName=\"div\"\n                                                    className={b('overtitle')}\n                                                    content={overtitle}\n                                                    modifiers={{constructor: true}}\n                                                />\n                                            ) : (\n                                                overtitle\n                                            )}\n                                        </div>\n                                    )}\n                                    <YFMWrapper\n                                        content={title}\n                                        contentClassName={b('title')}\n                                        className={b('title-container')}\n                                        modifiers={{constructor: true, constructorTheme: textTheme}}\n                                        tagName=\"h1\"\n                                        contentPosition=\"end\"\n                                    >\n                                        {status}\n                                        {renderTitle ? renderTitle(title) : null}\n                                    </YFMWrapper>\n                                    {description && (\n                                        <div className={b('description', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={description}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {additionalInfo && (\n                                        <div className={b('additional-info', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={additionalInfo}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {buttons && (\n                                        <div className={b('buttons')} data-qa=\"header-buttons\">\n                                            {buttons.map((button, index) => (\n                                                <RouterLink href={button.url} key={index}>\n                                                    <Button\n                                                        key={index}\n                                                        className={b('button')}\n                                                        size=\"xl\"\n                                                        extraProps={{\n                                                            'aria-describedby': titleId,\n                                                            ...button.extraProps,\n                                                        }}\n                                                        {...button}\n                                                    />\n                                                </RouterLink>\n                                            ))}\n                                        </div>\n                                    )}\n                                    {children}\n                                </Col>\n                            </Col>\n                        </Row>\n                        {hasRightSideImage && (\n                            <Media\n                                className={b('media', {[curImageSize]: true}, mediaClassName)}\n                                videoClassName={b('video')}\n                                imageClassName={b('image')}\n                                youtubeClassName={b('video-iframe')}\n                                {...mediaWithMicrodata}\n                            />\n                        )}\n                    </Col>\n                </Row>\n            </Grid>\n        </header>\n    );\n};\n\nexport default HeaderBlock;\n"]}

package/build/cjs/blocks/Header/schema.d.ts

@@ -1,3 +1,22 @@
+export declare const HeaderVideoIframeProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        src: {
+            type: string;
+        };
+        autoplay: {
+            type: string;
+        };
+        previewImg: {
+            type: string;
+        };
+        height: {
+            type: string;
+        };
+    };
+};
 export declare const HeaderBackgroundProps: {
     type: string;
     additionalProperties: boolean;
@@ -492,6 +511,35 @@ export declare const HeaderProperties: {
             optionName: string;
         })[];
     };
+    videoIframe: {
+        oneOf: (({
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                src: {
+                    type: string;
+                };
+                autoplay: {
+                    type: string;
+                };
+                previewImg: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+            };
+        } & {
+            optionName: string;
+        }) | {
+            type: string;
+            additionalProperties: boolean;
+            required: import("../../index.js").Theme[];
+            properties: {};
+            optionName: string;
+        })[];
+    };
     mediaView: {
         type: string;
         enum: string[];
@@ -1064,6 +1112,35 @@ export declare const HeaderBlock: {
                     optionName: string;
                 })[];
             };
+            videoIframe: {
+                oneOf: (({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        src: {
+                            type: string;
+                        };
+                        autoplay: {
+                            type: string;
+                        };
+                        previewImg: {
+                            type: string;
+                        };
+                        height: {
+                            type: string;
+                        };
+                    };
+                } & {
+                    optionName: string;
+                }) | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: import("../../index.js").Theme[];
+                    properties: {};
+                    optionName: string;
+                })[];
+            };
             mediaView: {
                 type: string;
                 enum: string[];

package/build/cjs/blocks/Header/schema.js

@@ -1,9 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderBlock = exports.HeaderProperties = exports.HeaderBackgroundProps = void 0;
+exports.HeaderBlock = exports.HeaderProperties = exports.HeaderBackgroundProps = exports.HeaderVideoIframeProps = void 0;
 const schema_1 = require("../../components/Image/schema.js");
 const common_1 = require("../../schema/validators/common.js");
 const utils_1 = require("../../schema/validators/utils.js");
+exports.HeaderVideoIframeProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['src'],
+    properties: {
+        src: { type: 'string' },
+        autoplay: { type: 'boolean' },
+        previewImg: { type: 'string' },
+        height: { type: 'number' },
+    },
+};
 exports.HeaderBackgroundProps = {
     type: 'object',
     additionalProperties: false,
@@ -44,6 +55,7 @@ exports.HeaderProperties = {
     },
     image: (0, common_1.withTheme)(schema_1.ImageProps),
     video: (0, common_1.withTheme)(common_1.VideoProps),
+    videoIframe: (0, common_1.withTheme)(exports.HeaderVideoIframeProps),
     mediaView: {
         type: 'string',
         enum: common_1.mediaView,

package/build/cjs/blocks/Header/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Header/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n    BlockBaseProps,\n    ButtonBlock,\n    MediaProps,\n    VideoProps,\n    mediaView,\n    withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const HeaderBackgroundProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...MediaProps,\n        fullWidth: {type: 'boolean'},\n        fullWidthMedia: {type: 'boolean'},\n    },\n};\n\nexport const HeaderProperties = {\n    title: {\n        type: 'string',\n        contentType: 'text',\n    },\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    description: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    additionalInfo: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    width: {\n        type: 'string',\n        enum: ['s', 'm', 'l'],\n    },\n    buttons: filteredArray(ButtonBlock),\n    offset: {\n        type: 'string',\n        enum: ['default', 'large'],\n    },\n    image: withTheme(ImageProps),\n    video: withTheme(VideoProps),\n    mediaView: {\n        type: 'string',\n        enum: mediaView,\n    },\n    backLink: {\n        type: 'object',\n        required: ['url', 'title'],\n        properties: {\n            url: {\n                type: 'string',\n            },\n            title: {\n                type: 'string',\n                contentType: 'text',\n            },\n        },\n    },\n    imageSize: {\n        type: 'string',\n        enum: ['s', 'm'],\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['0', 's', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeaderBackgroundProps),\n    theme: {\n        type: 'string',\n        enum: ['default', 'dark'],\n    },\n    breadcrumbs: {\n        type: 'object',\n        additionalProperties: false,\n        required: ['items'],\n        properties: {\n            items: {\n                type: 'array',\n                items: {\n                    type: 'object',\n                    additionalProperties: false,\n                    required: ['url', 'text'],\n                    properties: {\n                        url: {\n                            type: 'string',\n                        },\n                        text: {\n                            type: 'string',\n                            contentType: 'text',\n                        },\n                    },\n                },\n            },\n            theme: {type: 'string', enum: ['light', 'dark']},\n        },\n    },\n    status: {\n        type: 'string',\n    },\n    centered: {\n        type: 'boolean',\n    },\n};\n\nexport const HeaderBlock = {\n    'header-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeaderProperties,\n        },\n    },\n};\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/Header/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {ImageProps} from '../../components/Image/schema';\nimport {\n    BlockBaseProps,\n    ButtonBlock,\n    MediaProps,\n    VideoProps,\n    mediaView,\n    withTheme,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const HeaderVideoIframeProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['src'],\n    properties: {\n        src: {type: 'string'},\n        autoplay: {type: 'boolean'},\n        previewImg: {type: 'string'},\n        height: {type: 'number'},\n    },\n};\n\nexport const HeaderBackgroundProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: [],\n    properties: {\n        ...MediaProps,\n        fullWidth: {type: 'boolean'},\n        fullWidthMedia: {type: 'boolean'},\n    },\n};\n\nexport const HeaderProperties = {\n    title: {\n        type: 'string',\n        contentType: 'text',\n    },\n    overtitle: {\n        type: 'string',\n        contentType: 'text',\n    },\n    description: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    additionalInfo: {\n        type: 'string',\n        contentType: 'yfm',\n        inputType: 'textarea',\n    },\n    width: {\n        type: 'string',\n        enum: ['s', 'm', 'l'],\n    },\n    buttons: filteredArray(ButtonBlock),\n    offset: {\n        type: 'string',\n        enum: ['default', 'large'],\n    },\n    image: withTheme(ImageProps),\n    video: withTheme(VideoProps),\n    videoIframe: withTheme(HeaderVideoIframeProps),\n    mediaView: {\n        type: 'string',\n        enum: mediaView,\n    },\n    backLink: {\n        type: 'object',\n        required: ['url', 'title'],\n        properties: {\n            url: {\n                type: 'string',\n            },\n            title: {\n                type: 'string',\n                contentType: 'text',\n            },\n        },\n    },\n    imageSize: {\n        type: 'string',\n        enum: ['s', 'm'],\n    },\n    verticalOffset: {\n        type: 'string',\n        enum: ['0', 's', 'm', 'l', 'xl'],\n    },\n    background: withTheme(HeaderBackgroundProps),\n    theme: {\n        type: 'string',\n        enum: ['default', 'dark'],\n    },\n    breadcrumbs: {\n        type: 'object',\n        additionalProperties: false,\n        required: ['items'],\n        properties: {\n            items: {\n                type: 'array',\n                items: {\n                    type: 'object',\n                    additionalProperties: false,\n                    required: ['url', 'text'],\n                    properties: {\n                        url: {\n                            type: 'string',\n                        },\n                        text: {\n                            type: 'string',\n                            contentType: 'text',\n                        },\n                    },\n                },\n            },\n            theme: {type: 'string', enum: ['light', 'dark']},\n        },\n    },\n    status: {\n        type: 'string',\n    },\n    centered: {\n        type: 'boolean',\n    },\n};\n\nexport const HeaderBlock = {\n    'header-block': {\n        additionalProperties: false,\n        required: ['title'],\n        properties: {\n            ...BlockBaseProps,\n            ...HeaderProperties,\n        },\n    },\n};\n"]}

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -184,6 +184,35 @@ export declare const HeaderSliderBlock: {
                                 optionName: string;
                             })[];
                         };
+                        videoIframe: {
+                            oneOf: (({
+                                type: string;
+                                additionalProperties: boolean;
+                                required: string[];
+                                properties: {
+                                    src: {
+                                        type: string;
+                                    };
+                                    autoplay: {
+                                        type: string;
+                                    };
+                                    previewImg: {
+                                        type: string;
+                                    };
+                                    height: {
+                                        type: string;
+                                    };
+                                };
+                            } & {
+                                optionName: string;
+                            }) | {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: import("../../index.js").Theme[];
+                                properties: {};
+                                optionName: string;
+                            })[];
+                        };
                         mediaView: {
                             type: string;
                             enum: string[];

package/build/cjs/blocks/Media/Media.js

@@ -21,7 +21,7 @@ const MediaBlock = (props) => {
     const theme = (0, theme_1.useTheme)();
     const mediaThemed = (0, utils_1.getThemedValue)(media, theme);
     const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(mediaThemed, {
-        name: title,
+        name: typeof title === 'object' ? title.text : title,
         description,
     });
     return ((0, jsx_runtime_1.jsx)(MediaBase_1.default, { ...props, onScroll: () => setPlay(true), children: (0, jsx_runtime_1.jsx)(MediaBase_1.default.Card, { children: (0, jsx_runtime_1.jsx)(Media_1.default, { imageClassName: b('image'), ...mediaWithMicrodata, playVideo: play, className: b({ border: borderSelected }) }) }) }));

package/build/cjs/blocks/Media/Media.js.map

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["blocks/Media/Media.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,oFAAiD;AACjD,gGAA6D;AAC7D,wDAA6C;AAE7C,gDAAkD;AAClD,kEAA0D;AAC1D,wDAA0D;AAI1D,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAExB,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACjD,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IACjE,MAAM,cAAc,GAAG,IAAA,+BAAc,EAAC;QAClC,MAAM;QACN,aAAa;KAChB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,IAAA,+BAAmB,EAAC,WAAW,EAAE;QACxD,IAAI,EAAE,KAAK;QACX,WAAW;KACd,CAAC,CAAC;IAEH,OAAO,CACH,uBAAC,mBAAS,OAAK,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YAC/C,uBAAC,mBAAS,CAAC,IAAI,cACX,uBAAC,eAAK,IACF,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,KACtB,kBAAkB,EACtB,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAC,CAAC,GACxC,GACW,GACT,CACf,CAAC;AACN,CAAC,CAAC;AA3BW,QAAA,UAAU,cA2BrB;AAEF,kBAAe,kBAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport Media from '../../components/Media/Media';\nimport MediaBase from '../../components/MediaBase/MediaBase';\nimport {useTheme} from '../../context/theme';\nimport {MediaBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {getMediaBorder} from '../../utils/borderSelector';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport './Media.scss';\n\nconst b = block('media-block');\n\nexport const MediaBlock = (props: MediaBlockProps) => {\n    const {media, border, disableShadow, title, description} = props;\n    const borderSelected = getMediaBorder({\n        border,\n        disableShadow,\n    });\n\n    const [play, setPlay] = React.useState<boolean>(false);\n    const theme = useTheme();\n    const mediaThemed = getThemedValue(media, theme);\n    const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, {\n        name: title,\n        description,\n    });\n\n    return (\n        <MediaBase {...props} onScroll={() => setPlay(true)}>\n            <MediaBase.Card>\n                <Media\n                    imageClassName={b('image')}\n                    {...mediaWithMicrodata}\n                    playVideo={play}\n                    className={b({border: borderSelected})}\n                />\n            </MediaBase.Card>\n        </MediaBase>\n    );\n};\n\nexport default MediaBlock;\n"]}
+{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["blocks/Media/Media.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,oFAAiD;AACjD,gGAA6D;AAC7D,wDAA6C;AAE7C,gDAAkD;AAClD,kEAA0D;AAC1D,wDAA0D;AAI1D,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAExB,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACjD,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IACjE,MAAM,cAAc,GAAG,IAAA,+BAAc,EAAC;QAClC,MAAM;QACN,aAAa;KAChB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,IAAA,+BAAmB,EAAC,WAAW,EAAE;QACxD,IAAI,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;QACpD,WAAW;KACd,CAAC,CAAC;IAEH,OAAO,CACH,uBAAC,mBAAS,OAAK,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YAC/C,uBAAC,mBAAS,CAAC,IAAI,cACX,uBAAC,eAAK,IACF,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,KACtB,kBAAkB,EACtB,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAC,CAAC,GACxC,GACW,GACT,CACf,CAAC;AACN,CAAC,CAAC;AA3BW,QAAA,UAAU,cA2BrB;AAEF,kBAAe,kBAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport Media from '../../components/Media/Media';\nimport MediaBase from '../../components/MediaBase/MediaBase';\nimport {useTheme} from '../../context/theme';\nimport {MediaBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {getMediaBorder} from '../../utils/borderSelector';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport './Media.scss';\n\nconst b = block('media-block');\n\nexport const MediaBlock = (props: MediaBlockProps) => {\n    const {media, border, disableShadow, title, description} = props;\n    const borderSelected = getMediaBorder({\n        border,\n        disableShadow,\n    });\n\n    const [play, setPlay] = React.useState<boolean>(false);\n    const theme = useTheme();\n    const mediaThemed = getThemedValue(media, theme);\n    const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, {\n        name: typeof title === 'object' ? title.text : title,\n        description,\n    });\n\n    return (\n        <MediaBase {...props} onScroll={() => setPlay(true)}>\n            <MediaBase.Card>\n                <Media\n                    imageClassName={b('image')}\n                    {...mediaWithMicrodata}\n                    playVideo={play}\n                    className={b({border: borderSelected})}\n                />\n            </MediaBase.Card>\n        </MediaBase>\n    );\n};\n\nexport default MediaBlock;\n"]}

package/build/cjs/components/DefaultVideo/DefaultVideo.js

@@ -41,6 +41,13 @@ exports.DefaultVideo = React.forwardRef((props, ref) => {
             videoElement.removeEventListener('ended', handleVideoEnd);
         };
     }, [videoRef, onVideoEnd]);
+    // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389
+    React.useEffect(() => {
+        const videoElement = videoRef.current;
+        if (videoElement && initiallyMuted) {
+            videoElement.defaultMuted = true;
+        }
+    }, [videoRef, initiallyMuted]);
     const onPlayToggle = React.useCallback(() => {
         setIsPaused((value) => {
             if (value) {

package/build/cjs/components/DefaultVideo/DefaultVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd} = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement || !onVideoEnd) {\n                return undefined;\n            }\n\n            const handleVideoEnd = () => {\n                onVideoEnd?.();\n            };\n\n            videoElement.addEventListener('ended', handleVideoEnd);\n            return () => {\n                videoElement.removeEventListener('ended', handleVideoEnd);\n            };\n        }, [videoRef, onVideoEnd]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}
+{"version":3,"file":"DefaultVideo.js","sourceRoot":"../../../../src","sources":["components/DefaultVideo/DefaultVideo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CustomControlsType, MediaVideoControlsType, MediaVideoProps} from '../../models';\nimport {block} from '../../utils';\nimport {getVideoTypesWithPriority} from '../Media/Video/utils';\nimport CustomBarControls from '../ReactPlayer/CustomBarControls';\n\nimport './DefaultVideo.scss';\n\nconst b = block('default-video');\n\ntype DefaultVideoRefType = HTMLVideoElement | undefined;\n\ninterface DefaultVideoProps {\n    video: MediaVideoProps;\n    qa?: string;\n    customBarControlsClassName?: string;\n    className?: string;\n}\n\nexport const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(\n    (props, ref) => {\n        const {video, qa, customBarControlsClassName} = props;\n        const {controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd} = video;\n        const {\n            muteButtonShown,\n            positioning,\n            type: customControlsType,\n        } = customControlsOptions || {};\n        const [isPaused, setIsPaused] = React.useState(false);\n        const [isMuted, setIsMuted] = React.useState(initiallyMuted);\n        const videoRef = React.useRef<HTMLVideoElement>(null);\n\n        // one may not use this hook and work with `ref` variable only, but\n        // in this case one should support both function type and object type,\n        // according to ForwardedRef type.\n        // Currently used way with extra ref and useImperativeHandle is more\n        // convenient and allows us to work with object typed ref only,\n        // avoiding typeof ref === 'function' statements\n        React.useImperativeHandle(ref, () => {\n            if (!videoRef?.current) {\n                return undefined;\n            }\n\n            return videoRef.current;\n        }, [videoRef]);\n\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n            if (!videoElement || !onVideoEnd) {\n                return undefined;\n            }\n\n            const handleVideoEnd = () => {\n                onVideoEnd?.();\n            };\n\n            videoElement.addEventListener('ended', handleVideoEnd);\n            return () => {\n                videoElement.removeEventListener('ended', handleVideoEnd);\n            };\n        }, [videoRef, onVideoEnd]);\n\n        // to guarantee setting a muted attribute in HTML. https://github.com/facebook/react/issues/10389\n        React.useEffect(() => {\n            const videoElement = videoRef.current;\n\n            if (videoElement && initiallyMuted) {\n                videoElement.defaultMuted = true;\n            }\n        }, [videoRef, initiallyMuted]);\n\n        const onPlayToggle = React.useCallback(() => {\n            setIsPaused((value) => {\n                if (value) {\n                    videoRef?.current?.play();\n                } else {\n                    videoRef?.current?.pause();\n                }\n\n                return !value;\n            });\n        }, [videoRef]);\n        const onMuteToggle = React.useCallback(() => {\n            setIsMuted((value) => !value);\n        }, []);\n\n        const onClick = React.useCallback(() => {\n            if (customControlsType === CustomControlsType.WithPlayPauseButton) {\n                onPlayToggle();\n            }\n        }, [onPlayToggle, customControlsType]);\n\n        return (\n            <React.Fragment>\n                <video\n                    disablePictureInPicture\n                    playsInline\n                    // @ts-ignore\n                    // eslint-disable-next-line react/no-unknown-property\n                    pip=\"false\"\n                    className={b()}\n                    ref={videoRef}\n                    preload=\"metadata\"\n                    muted={isMuted}\n                    aria-label={video.ariaLabel}\n                    onClick={onClick}\n                >\n                    {getVideoTypesWithPriority(video.src).map(({src, type}, index) => (\n                        <source key={index} src={src} type={type} data-qa={qa} />\n                    ))}\n                    <track default kind=\"captions\" />\n                </video>\n\n                {controls === MediaVideoControlsType.Custom && (\n                    <CustomBarControls\n                        className={customBarControlsClassName}\n                        type={customControlsType}\n                        isPaused={isPaused}\n                        onPlayClick={onPlayToggle}\n                        muteButtonShown={muteButtonShown}\n                        shown\n                        positioning={positioning}\n                        mute={{\n                            isMuted: Boolean(isMuted),\n                            changeMute: onMuteToggle,\n                        }}\n                    />\n                )}\n            </React.Fragment>\n        );\n    },\n);\n\nDefaultVideo.displayName = 'DefaultVideo';\n"]}

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -111,6 +111,12 @@ export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, P
     fullWidthMedia?: boolean;
 }
 export type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;
+export interface HeaderBlockVideoIframe {
+    src: string;
+    autoplay?: boolean;
+    previewImg?: string;
+    height?: number;
+}
 export interface HeaderBlockProps {
     title: string;
     overtitle?: string | JSX.Element;
@@ -127,6 +133,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
+    videoIframe?: HeaderBlockVideoIframe;
     mediaView?: MediaView;
     centered?: boolean;
     background?: ThemedHeaderBlockBackground;
@@ -201,8 +208,7 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mediaOnly?: boolean;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
-export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
-    title: string;
+export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {
     description?: string;
     /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;

package/build/cjs/models/constructor-items/blocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/blocks.ts"],"names":[],"mappings":";;;AA4CA,IAAY,SAuBX;AAvBD,WAAY,SAAS;IACjB,wDAA2C,CAAA;IAC3C,8DAAiD,CAAA;IACjD,kBAAkB;IAClB,gDAAmC,CAAA;IACnC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,kDAAqC,CAAA;IACrC,wDAA2C,CAAA;IAC3C,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;AAC5B,CAAC,EAvBW,SAAS,yBAAT,SAAS,QAuBpB;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACtC,QAAA,gBAAgB,GAAG,CAAC,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;AAgCrF,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,qCAArB,qBAAqB,QAKhC;AAED,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,0BAAV,UAAU,QAIrB;AAmUD,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,oCAApB,oBAAoB,QAM/B;AAOD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {\n    AnchorProps,\n    Animatable,\n    BackgroundImageProps,\n    ButtonProps,\n    CardBorder,\n    ContentSize,\n    ContentTextSize,\n    ContentTheme,\n    FileLinkProps,\n    GravityIconProps,\n    HeaderBreadCrumbsProps,\n    HeaderImageSize,\n    HeaderOffset,\n    HeaderWidth,\n    ImageDeviceProps,\n    ImageProps,\n    Justify,\n    LegendTableMarkerType,\n    LinkProps,\n    MapProps,\n    MediaDirection,\n    MediaProps,\n    MediaView,\n    TextSize,\n    TextTheme,\n    ThemedImage,\n    ThemedMediaProps,\n    ThemedMediaVideoProps,\n    TitleItemBaseProps,\n    TitleItemProps,\n    WithBorder,\n    YandexFormProps,\n} from './common';\nimport {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';\n\nexport enum BlockType {\n    PromoFeaturesBlock = 'promo-features-block',\n    ExtendedFeaturesBlock = 'extended-features-block',\n    /** @deprecated */\n    SliderOldBlock = 'slider-old-block',\n    SliderBlock = 'slider-block',\n    QuestionsBlock = 'questions-block',\n    FoldableListBlock = 'foldable-list-block',\n    BannerBlock = 'banner-block',\n    CompaniesBlock = 'companies-block',\n    MediaBlock = 'media-block',\n    InfoBlock = 'info-block',\n    TableBlock = 'table-block',\n    TabsBlock = 'tabs-block',\n    HeaderSliderBlock = 'header-slider-block',\n    HeaderBlock = 'header-block',\n    IconsBlock = 'icons-block',\n    CardLayoutBlock = 'card-layout-block',\n    ContentLayoutBlock = 'content-layout-block',\n    ShareBlock = 'share-block',\n    MapBlock = 'map-block',\n    FilterBlock = 'filter-block',\n    FormBlock = 'form-block',\n}\n\nexport const BlockTypes = Object.values(BlockType);\nexport const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];\n\nexport interface Childable {\n    children?: SubBlock[];\n}\n\n//block props\nexport interface BlockBaseProps {\n    anchor?: AnchorProps;\n    visible?: GridColumnSize;\n    /** @deprecated */\n    resetPaddings?: boolean;\n    indent?: {\n        top?: IndentValue;\n        bottom?: IndentValue;\n    };\n    qa?: string;\n}\n\nexport interface LoadableProps {\n    source: string;\n    /**\n     * @deprecated Will be moved to params\n     */\n    serviceId?: number;\n    params?: Record<string, string | number | boolean | object>;\n}\n\nexport interface LoadableChildren {\n    loadable?: LoadableProps;\n}\n\nexport enum SliderBreakpointNames {\n    Sm = 'sm',\n    Md = 'md',\n    Lg = 'lg',\n    Xl = 'xl',\n}\n\nexport enum SliderType {\n    MediaCard = 'media-card',\n    HeaderCard = 'header-card',\n    FullscreenCard = 'fullscreen-card',\n}\n\nexport type SliderBreakpointParams = Record<SliderBreakpointNames, number>;\nexport type SlidesToShow = Partial<SliderBreakpointParams> | number;\n\nexport interface SliderOldProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface SliderProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface HeaderSliderBlockProps extends Omit<SliderOldProps, 'title' | 'description'> {\n    items: HeaderBlockProps[];\n}\n\ninterface HeaderBackgroundProps {\n    /** @deprecated replaced by Media Props image */\n    url?: string;\n    /** @deprecated replaced by Media Props image */\n    disableCompress?: boolean;\n}\n\nexport interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {\n    fullWidth?: boolean;\n    fullWidthMedia?: boolean;\n}\n\nexport type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;\n\nexport interface HeaderBlockProps {\n    title: string;\n    overtitle?: string | JSX.Element;\n    description?: string;\n    additionalInfo?: string;\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];\n    width?: HeaderWidth;\n    /** @deprecated imageSize now depends on width */\n    imageSize?: HeaderImageSize;\n    /**\n     * @deprecated used only on the main page\n     * TODO: delete after the possibility to remove padding-bottom in the block\n     */\n    offset?: HeaderOffset;\n    image?: ThemedImage;\n    video?: ThemedMediaVideoProps;\n    mediaView?: MediaView;\n    centered?: boolean;\n    background?: ThemedHeaderBlockBackground;\n    theme?: 'light' | 'dark';\n    verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';\n    breadcrumbs?: HeaderBreadCrumbsProps;\n    status?: JSX.Element;\n    renderTitle?: (title: string) => React.ReactNode;\n}\n\nexport interface ExtendedFeaturesItem\n    extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {\n    title: string;\n    label?: string;\n    icon?: ThemedImage;\n    /** @deprecated **/\n    link?: LinkProps;\n}\n\nexport interface ExtendedFeaturesProps extends Animatable {\n    items: ExtendedFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n}\n\nexport interface PromoFeaturesItem {\n    title: string;\n    text: string;\n    theme?: 'accent' | 'accent-light' | 'primary';\n    media?: ThemeSupporting<MediaProps>;\n}\n\nexport interface PromoFeaturesProps extends Animatable {\n    items: PromoFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    theme?: 'grey' | 'default';\n}\n\nexport interface QuestionItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n}\n\nexport interface QuestionsProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: QuestionItem[];\n}\n\nexport interface QuestionBlockItemProps extends QuestionItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface FoldableListItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n}\n\nexport interface FoldableListProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: FoldableListItem[];\n}\n\nexport interface FoldableListBlockItemProps extends FoldableListItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface BannerBlockProps extends BannerCardProps, Animatable {}\n\nexport interface CompaniesBlockProps extends Animatable {\n    title: string;\n    description?: string;\n    images: ThemeSupporting<ImageDeviceProps>;\n}\n\nexport interface MediaBaseBlockProps extends Animatable, MediaContentProps {\n    direction?: MediaDirection;\n    mobileDirection?: MediaDirection;\n    largeMedia?: boolean;\n    mediaOnly?: boolean;\n    mediaOnlyColSizes?: GridColumnSizesType;\n}\n\nexport interface MediaContentProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {\n    title: string;\n    description?: string;\n    /** @deprecated  Use array of buttons from ContentBlockProps instead**/\n    button?: ButtonProps;\n}\n\nexport interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {\n    media: ThemeSupporting<MediaProps>;\n}\n\nexport interface MapBlockProps extends MediaBaseBlockProps, WithBorder {\n    map: MapProps;\n}\n\nexport interface InfoBlockProps {\n    theme?: TextTheme;\n    backgroundColor?: ThemeSupporting<string>;\n    /** @deprecated **/\n    title?: string;\n    /** @deprecated **/\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];\n    /** @deprecated **/\n    sectionsTitle?: string;\n    /** @deprecated **/\n    links?: Pick<LinkProps, 'text' | 'url'>[];\n    leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n    rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n}\n\nexport interface TableProps {\n    content: string[][];\n    legend?: string[];\n    hideLegend?: boolean;\n    justify?: Justify[];\n    marker?: LegendTableMarkerType;\n    /**\n     * Only as accessible name, not displayed explicitly\n     */\n    caption?: string;\n}\n\nexport interface TableBlockProps {\n    title: string;\n    table: TableProps;\n}\n\nexport interface TabsBlockItem\n    extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,\n        WithBorder {\n    tabName: string;\n    /**\n     * @deprecated Use array links from ContentBlockProps instead\n     */\n    link?: LinkProps;\n    image?: ThemedImage;\n    caption?: string;\n    media?: ThemedMediaProps;\n}\n\nexport interface TabsBlockProps extends Animatable {\n    title?: TitleItemProps | string;\n    description?: string;\n    tabsColSizes?: GridColumnSizesType;\n    centered?: boolean;\n    direction?: MediaDirection;\n    items: TabsBlockItem[];\n    contentSize?: ContentSize;\n}\n\nexport interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {\n    title?: TitleItemProps | string;\n    titleClassName?: string;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n    background?: ThemeSupporting<\n        BackgroundImageProps & {\n            border?: CardBorder;\n        }\n    >;\n}\n\nexport type FilterTag = {\n    id: string;\n    label: string;\n};\n\nexport type FilterItem = {\n    tags: string[];\n    card: SubBlockModels;\n};\n\nexport interface FilterBlockProps extends Animatable, LoadableChildren {\n    title?: TitleItemProps | string;\n    description?: string;\n    tags: FilterTag[];\n    items: FilterItem[];\n    tagButtonSize?: ButtonSize;\n    allTag?: boolean | string;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n}\n\nexport interface IconsBlockItemProps extends AnalyticsEventsBase {\n    url: string;\n    text: string;\n    src: ThemeSupporting<string>;\n}\n\nexport interface IconsBlockProps {\n    title?: string;\n    description?: string;\n    size?: 's' | 'm' | 'l';\n    items: IconsBlockItemProps[];\n    colSizes?: GridColumnSizesType;\n}\n\ninterface ContentLayoutBlockParams {\n    size?: ContentSize;\n    background?: ThemeSupporting<BackgroundImageProps>;\n    centered?: boolean;\n    theme?: ContentTheme;\n    textWidth?: ContentTextSize;\n}\n\nexport interface ContentLayoutBlockProps extends ContentLayoutBlockParams {\n    textContent: ContentBlockProps;\n    fileContent?: FileLinkProps[];\n}\n\nexport type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;\n\nexport interface ContentItemProps {\n    title?: string;\n    text?: string;\n    icon?: ThemeSupporting<ImageProps | SVGIcon>;\n    gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nexport interface ContentListProps {\n    list: ContentItemProps[];\n    size: ContentSize;\n    theme?: ContentTheme;\n}\n\nexport interface ContentBlockProps {\n    title?: TitleItemBaseProps | string;\n    titleId?: string;\n    text?: string;\n    textId?: string;\n    additionalInfo?: string;\n    links?: LinkProps[];\n    buttons?: ButtonProps[];\n    size?: ContentSize;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n    theme?: ContentTheme;\n    list?: ContentItemProps[];\n    controlPosition?: 'default' | 'bottom';\n}\n\nexport enum PCShareSocialNetwork {\n    Vk = 'vk',\n    Telegram = 'telegram',\n    Twitter = 'twitter',\n    Facebook = 'facebook',\n    LinkedIn = 'linkedin',\n}\n\nexport interface ShareBlockProps {\n    items: PCShareSocialNetwork[];\n    title?: string;\n}\n\nexport enum FormBlockDataTypes {\n    YANDEX = 'yandex',\n    HUBSPOT = 'hubspot',\n}\n\nexport enum FormBlockDirection {\n    FormContent = 'form-content',\n    ContentForm = 'content-form',\n    Center = 'center',\n}\n\nexport interface FormBlockYandexData {\n    yandex: ThemeSupporting<YandexFormProps>;\n}\n\nexport interface FormBlockHubspotData {\n    hubspot: ThemeSupporting<HubspotFormProps>;\n}\n\nexport type FormBlockData = FormBlockYandexData | FormBlockHubspotData;\n\nexport interface FormBlockProps {\n    formData: FormBlockData;\n    title?: string;\n    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;\n    direction?: FormBlockDirection;\n    background?: ThemeSupporting<BackgroundImageProps>;\n}\n\n//block models\nexport type HeaderBlockModel = {\n    type: BlockType.HeaderBlock;\n} & HeaderBlockProps;\n\nexport type SliderOldBlockModel = {\n    type: BlockType.SliderOldBlock;\n} & SliderOldProps;\n\nexport type ExtendedFeaturesBlockModel = {\n    type: BlockType.ExtendedFeaturesBlock;\n} & ExtendedFeaturesProps;\n\nexport type PromoFeaturesBlockModel = {\n    type: BlockType.PromoFeaturesBlock;\n} & PromoFeaturesProps;\n\nexport type QuestionsBlockModel = {\n    type: BlockType.QuestionsBlock;\n} & QuestionsProps;\n\nexport type FoldableListBlockModel = {\n    type: BlockType.FoldableListBlock;\n} & FoldableListProps;\n\nexport type BannerBlockModel = {\n    type: BlockType.BannerBlock;\n} & BannerBlockProps;\n\nexport type CompaniesBlockModel = {\n    type: BlockType.CompaniesBlock;\n} & CompaniesBlockProps;\n\nexport type MediaBlockModel = {\n    type: BlockType.MediaBlock;\n} & MediaBlockProps;\n\nexport type MapBlockModel = {\n    type: BlockType.MapBlock;\n} & MapBlockProps;\n\nexport type InfoBlockModel = {\n    type: BlockType.InfoBlock;\n} & InfoBlockProps;\n\nexport type TableBlockModel = {\n    type: BlockType.TableBlock;\n} & TableBlockProps;\n\nexport type TabsBlockModel = {\n    type: BlockType.TabsBlock;\n} & TabsBlockProps;\n\nexport type CardLayoutBlockModel = {\n    type: BlockType.CardLayoutBlock;\n} & CardLayoutBlockProps;\n\nexport type FilterBlockModel = {\n    type: BlockType.FilterBlock;\n} & FilterBlockProps;\n\nexport type IconsBlockModel = {\n    type: BlockType.IconsBlock;\n} & IconsBlockProps;\n\nexport type HeaderSliderBlockModel = {\n    type: BlockType.HeaderSliderBlock;\n} & HeaderSliderBlockProps;\n\nexport type ContentLayoutBlockModel = {\n    type: BlockType.ContentLayoutBlock;\n} & ContentLayoutBlockProps;\n\nexport type ShareBLockModel = {\n    type: BlockType.ShareBlock;\n} & ShareBlockProps;\n\nexport type FormBlockModel = {\n    type: BlockType.FormBlock;\n} & FormBlockProps;\n\nexport type SliderBlockModel = {\n    type: BlockType.SliderBlock;\n} & SliderProps;\n\ntype BlockModels =\n    | SliderOldBlockModel\n    | SliderBlockModel\n    | ExtendedFeaturesBlockModel\n    | PromoFeaturesBlockModel\n    | QuestionsBlockModel\n    | FoldableListBlockModel\n    | BannerBlockModel\n    | CompaniesBlockModel\n    | MediaBlockModel\n    | MapBlockModel\n    | InfoBlockModel\n    | TableBlockModel\n    | TabsBlockModel\n    | HeaderBlockModel\n    | IconsBlockModel\n    | HeaderSliderBlockModel\n    | CardLayoutBlockModel\n    | ContentLayoutBlockModel\n    | ShareBLockModel\n    | FilterBlockModel\n    | FormBlockModel;\n\nexport type Block = BlockModels & BlockBaseProps;\n"]}
+{"version":3,"file":"blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/blocks.ts"],"names":[],"mappings":";;;AA4CA,IAAY,SAuBX;AAvBD,WAAY,SAAS;IACjB,wDAA2C,CAAA;IAC3C,8DAAiD,CAAA;IACjD,kBAAkB;IAClB,gDAAmC,CAAA;IACnC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,kDAAqC,CAAA;IACrC,wDAA2C,CAAA;IAC3C,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;AAC5B,CAAC,EAvBW,SAAS,yBAAT,SAAS,QAuBpB;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACtC,QAAA,gBAAgB,GAAG,CAAC,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;AAgCrF,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,qCAArB,qBAAqB,QAKhC;AAED,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,0BAAV,UAAU,QAIrB;AA0UD,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,oCAApB,oBAAoB,QAM/B;AAOD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {\n    AnchorProps,\n    Animatable,\n    BackgroundImageProps,\n    ButtonProps,\n    CardBorder,\n    ContentSize,\n    ContentTextSize,\n    ContentTheme,\n    FileLinkProps,\n    GravityIconProps,\n    HeaderBreadCrumbsProps,\n    HeaderImageSize,\n    HeaderOffset,\n    HeaderWidth,\n    ImageDeviceProps,\n    ImageProps,\n    Justify,\n    LegendTableMarkerType,\n    LinkProps,\n    MapProps,\n    MediaDirection,\n    MediaProps,\n    MediaView,\n    TextSize,\n    TextTheme,\n    ThemedImage,\n    ThemedMediaProps,\n    ThemedMediaVideoProps,\n    TitleItemBaseProps,\n    TitleItemProps,\n    WithBorder,\n    YandexFormProps,\n} from './common';\nimport {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';\n\nexport enum BlockType {\n    PromoFeaturesBlock = 'promo-features-block',\n    ExtendedFeaturesBlock = 'extended-features-block',\n    /** @deprecated */\n    SliderOldBlock = 'slider-old-block',\n    SliderBlock = 'slider-block',\n    QuestionsBlock = 'questions-block',\n    FoldableListBlock = 'foldable-list-block',\n    BannerBlock = 'banner-block',\n    CompaniesBlock = 'companies-block',\n    MediaBlock = 'media-block',\n    InfoBlock = 'info-block',\n    TableBlock = 'table-block',\n    TabsBlock = 'tabs-block',\n    HeaderSliderBlock = 'header-slider-block',\n    HeaderBlock = 'header-block',\n    IconsBlock = 'icons-block',\n    CardLayoutBlock = 'card-layout-block',\n    ContentLayoutBlock = 'content-layout-block',\n    ShareBlock = 'share-block',\n    MapBlock = 'map-block',\n    FilterBlock = 'filter-block',\n    FormBlock = 'form-block',\n}\n\nexport const BlockTypes = Object.values(BlockType);\nexport const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];\n\nexport interface Childable {\n    children?: SubBlock[];\n}\n\n//block props\nexport interface BlockBaseProps {\n    anchor?: AnchorProps;\n    visible?: GridColumnSize;\n    /** @deprecated */\n    resetPaddings?: boolean;\n    indent?: {\n        top?: IndentValue;\n        bottom?: IndentValue;\n    };\n    qa?: string;\n}\n\nexport interface LoadableProps {\n    source: string;\n    /**\n     * @deprecated Will be moved to params\n     */\n    serviceId?: number;\n    params?: Record<string, string | number | boolean | object>;\n}\n\nexport interface LoadableChildren {\n    loadable?: LoadableProps;\n}\n\nexport enum SliderBreakpointNames {\n    Sm = 'sm',\n    Md = 'md',\n    Lg = 'lg',\n    Xl = 'xl',\n}\n\nexport enum SliderType {\n    MediaCard = 'media-card',\n    HeaderCard = 'header-card',\n    FullscreenCard = 'fullscreen-card',\n}\n\nexport type SliderBreakpointParams = Record<SliderBreakpointNames, number>;\nexport type SlidesToShow = Partial<SliderBreakpointParams> | number;\n\nexport interface SliderOldProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface SliderProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface HeaderSliderBlockProps extends Omit<SliderOldProps, 'title' | 'description'> {\n    items: HeaderBlockProps[];\n}\n\ninterface HeaderBackgroundProps {\n    /** @deprecated replaced by Media Props image */\n    url?: string;\n    /** @deprecated replaced by Media Props image */\n    disableCompress?: boolean;\n}\n\nexport interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {\n    fullWidth?: boolean;\n    fullWidthMedia?: boolean;\n}\n\nexport type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;\n\nexport interface HeaderBlockVideoIframe {\n    src: string;\n    autoplay?: boolean;\n    previewImg?: string;\n    height?: number;\n}\n\nexport interface HeaderBlockProps {\n    title: string;\n    overtitle?: string | JSX.Element;\n    description?: string;\n    additionalInfo?: string;\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];\n    width?: HeaderWidth;\n    /** @deprecated imageSize now depends on width */\n    imageSize?: HeaderImageSize;\n    /**\n     * @deprecated used only on the main page\n     * TODO: delete after the possibility to remove padding-bottom in the block\n     */\n    offset?: HeaderOffset;\n    image?: ThemedImage;\n    video?: ThemedMediaVideoProps;\n    videoIframe?: HeaderBlockVideoIframe;\n    mediaView?: MediaView;\n    centered?: boolean;\n    background?: ThemedHeaderBlockBackground;\n    theme?: 'light' | 'dark';\n    verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';\n    breadcrumbs?: HeaderBreadCrumbsProps;\n    status?: JSX.Element;\n    renderTitle?: (title: string) => React.ReactNode;\n}\n\nexport interface ExtendedFeaturesItem\n    extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {\n    title: string;\n    label?: string;\n    icon?: ThemedImage;\n    /** @deprecated **/\n    link?: LinkProps;\n}\n\nexport interface ExtendedFeaturesProps extends Animatable {\n    items: ExtendedFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n}\n\nexport interface PromoFeaturesItem {\n    title: string;\n    text: string;\n    theme?: 'accent' | 'accent-light' | 'primary';\n    media?: ThemeSupporting<MediaProps>;\n}\n\nexport interface PromoFeaturesProps extends Animatable {\n    items: PromoFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    theme?: 'grey' | 'default';\n}\n\nexport interface QuestionItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n}\n\nexport interface QuestionsProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: QuestionItem[];\n}\n\nexport interface QuestionBlockItemProps extends QuestionItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface FoldableListItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n}\n\nexport interface FoldableListProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: FoldableListItem[];\n}\n\nexport interface FoldableListBlockItemProps extends FoldableListItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface BannerBlockProps extends BannerCardProps, Animatable {}\n\nexport interface CompaniesBlockProps extends Animatable {\n    title: string;\n    description?: string;\n    images: ThemeSupporting<ImageDeviceProps>;\n}\n\nexport interface MediaBaseBlockProps extends Animatable, MediaContentProps {\n    direction?: MediaDirection;\n    mobileDirection?: MediaDirection;\n    largeMedia?: boolean;\n    mediaOnly?: boolean;\n    mediaOnlyColSizes?: GridColumnSizesType;\n}\n\nexport interface MediaContentProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {\n    description?: string;\n    /** @deprecated  Use array of buttons from ContentBlockProps instead**/\n    button?: ButtonProps;\n}\n\nexport interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {\n    media: ThemeSupporting<MediaProps>;\n}\n\nexport interface MapBlockProps extends MediaBaseBlockProps, WithBorder {\n    map: MapProps;\n}\n\nexport interface InfoBlockProps {\n    theme?: TextTheme;\n    backgroundColor?: ThemeSupporting<string>;\n    /** @deprecated **/\n    title?: string;\n    /** @deprecated **/\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];\n    /** @deprecated **/\n    sectionsTitle?: string;\n    /** @deprecated **/\n    links?: Pick<LinkProps, 'text' | 'url'>[];\n    leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n    rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n}\n\nexport interface TableProps {\n    content: string[][];\n    legend?: string[];\n    hideLegend?: boolean;\n    justify?: Justify[];\n    marker?: LegendTableMarkerType;\n    /**\n     * Only as accessible name, not displayed explicitly\n     */\n    caption?: string;\n}\n\nexport interface TableBlockProps {\n    title: string;\n    table: TableProps;\n}\n\nexport interface TabsBlockItem\n    extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,\n        WithBorder {\n    tabName: string;\n    /**\n     * @deprecated Use array links from ContentBlockProps instead\n     */\n    link?: LinkProps;\n    image?: ThemedImage;\n    caption?: string;\n    media?: ThemedMediaProps;\n}\n\nexport interface TabsBlockProps extends Animatable {\n    title?: TitleItemProps | string;\n    description?: string;\n    tabsColSizes?: GridColumnSizesType;\n    centered?: boolean;\n    direction?: MediaDirection;\n    items: TabsBlockItem[];\n    contentSize?: ContentSize;\n}\n\nexport interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {\n    title?: TitleItemProps | string;\n    titleClassName?: string;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n    background?: ThemeSupporting<\n        BackgroundImageProps & {\n            border?: CardBorder;\n        }\n    >;\n}\n\nexport type FilterTag = {\n    id: string;\n    label: string;\n};\n\nexport type FilterItem = {\n    tags: string[];\n    card: SubBlockModels;\n};\n\nexport interface FilterBlockProps extends Animatable, LoadableChildren {\n    title?: TitleItemProps | string;\n    description?: string;\n    tags: FilterTag[];\n    items: FilterItem[];\n    tagButtonSize?: ButtonSize;\n    allTag?: boolean | string;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n}\n\nexport interface IconsBlockItemProps extends AnalyticsEventsBase {\n    url: string;\n    text: string;\n    src: ThemeSupporting<string>;\n}\n\nexport interface IconsBlockProps {\n    title?: string;\n    description?: string;\n    size?: 's' | 'm' | 'l';\n    items: IconsBlockItemProps[];\n    colSizes?: GridColumnSizesType;\n}\n\ninterface ContentLayoutBlockParams {\n    size?: ContentSize;\n    background?: ThemeSupporting<BackgroundImageProps>;\n    centered?: boolean;\n    theme?: ContentTheme;\n    textWidth?: ContentTextSize;\n}\n\nexport interface ContentLayoutBlockProps extends ContentLayoutBlockParams {\n    textContent: ContentBlockProps;\n    fileContent?: FileLinkProps[];\n}\n\nexport type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;\n\nexport interface ContentItemProps {\n    title?: string;\n    text?: string;\n    icon?: ThemeSupporting<ImageProps | SVGIcon>;\n    gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nexport interface ContentListProps {\n    list: ContentItemProps[];\n    size: ContentSize;\n    theme?: ContentTheme;\n}\n\nexport interface ContentBlockProps {\n    title?: TitleItemBaseProps | string;\n    titleId?: string;\n    text?: string;\n    textId?: string;\n    additionalInfo?: string;\n    links?: LinkProps[];\n    buttons?: ButtonProps[];\n    size?: ContentSize;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n    theme?: ContentTheme;\n    list?: ContentItemProps[];\n    controlPosition?: 'default' | 'bottom';\n}\n\nexport enum PCShareSocialNetwork {\n    Vk = 'vk',\n    Telegram = 'telegram',\n    Twitter = 'twitter',\n    Facebook = 'facebook',\n    LinkedIn = 'linkedin',\n}\n\nexport interface ShareBlockProps {\n    items: PCShareSocialNetwork[];\n    title?: string;\n}\n\nexport enum FormBlockDataTypes {\n    YANDEX = 'yandex',\n    HUBSPOT = 'hubspot',\n}\n\nexport enum FormBlockDirection {\n    FormContent = 'form-content',\n    ContentForm = 'content-form',\n    Center = 'center',\n}\n\nexport interface FormBlockYandexData {\n    yandex: ThemeSupporting<YandexFormProps>;\n}\n\nexport interface FormBlockHubspotData {\n    hubspot: ThemeSupporting<HubspotFormProps>;\n}\n\nexport type FormBlockData = FormBlockYandexData | FormBlockHubspotData;\n\nexport interface FormBlockProps {\n    formData: FormBlockData;\n    title?: string;\n    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;\n    direction?: FormBlockDirection;\n    background?: ThemeSupporting<BackgroundImageProps>;\n}\n\n//block models\nexport type HeaderBlockModel = {\n    type: BlockType.HeaderBlock;\n} & HeaderBlockProps;\n\nexport type SliderOldBlockModel = {\n    type: BlockType.SliderOldBlock;\n} & SliderOldProps;\n\nexport type ExtendedFeaturesBlockModel = {\n    type: BlockType.ExtendedFeaturesBlock;\n} & ExtendedFeaturesProps;\n\nexport type PromoFeaturesBlockModel = {\n    type: BlockType.PromoFeaturesBlock;\n} & PromoFeaturesProps;\n\nexport type QuestionsBlockModel = {\n    type: BlockType.QuestionsBlock;\n} & QuestionsProps;\n\nexport type FoldableListBlockModel = {\n    type: BlockType.FoldableListBlock;\n} & FoldableListProps;\n\nexport type BannerBlockModel = {\n    type: BlockType.BannerBlock;\n} & BannerBlockProps;\n\nexport type CompaniesBlockModel = {\n    type: BlockType.CompaniesBlock;\n} & CompaniesBlockProps;\n\nexport type MediaBlockModel = {\n    type: BlockType.MediaBlock;\n} & MediaBlockProps;\n\nexport type MapBlockModel = {\n    type: BlockType.MapBlock;\n} & MapBlockProps;\n\nexport type InfoBlockModel = {\n    type: BlockType.InfoBlock;\n} & InfoBlockProps;\n\nexport type TableBlockModel = {\n    type: BlockType.TableBlock;\n} & TableBlockProps;\n\nexport type TabsBlockModel = {\n    type: BlockType.TabsBlock;\n} & TabsBlockProps;\n\nexport type CardLayoutBlockModel = {\n    type: BlockType.CardLayoutBlock;\n} & CardLayoutBlockProps;\n\nexport type FilterBlockModel = {\n    type: BlockType.FilterBlock;\n} & FilterBlockProps;\n\nexport type IconsBlockModel = {\n    type: BlockType.IconsBlock;\n} & IconsBlockProps;\n\nexport type HeaderSliderBlockModel = {\n    type: BlockType.HeaderSliderBlock;\n} & HeaderSliderBlockProps;\n\nexport type ContentLayoutBlockModel = {\n    type: BlockType.ContentLayoutBlock;\n} & ContentLayoutBlockProps;\n\nexport type ShareBLockModel = {\n    type: BlockType.ShareBlock;\n} & ShareBlockProps;\n\nexport type FormBlockModel = {\n    type: BlockType.FormBlock;\n} & FormBlockProps;\n\nexport type SliderBlockModel = {\n    type: BlockType.SliderBlock;\n} & SliderProps;\n\ntype BlockModels =\n    | SliderOldBlockModel\n    | SliderBlockModel\n    | ExtendedFeaturesBlockModel\n    | PromoFeaturesBlockModel\n    | QuestionsBlockModel\n    | FoldableListBlockModel\n    | BannerBlockModel\n    | CompaniesBlockModel\n    | MediaBlockModel\n    | MapBlockModel\n    | InfoBlockModel\n    | TableBlockModel\n    | TabsBlockModel\n    | HeaderBlockModel\n    | IconsBlockModel\n    | HeaderSliderBlockModel\n    | CardLayoutBlockModel\n    | ContentLayoutBlockModel\n    | ShareBLockModel\n    | FilterBlockModel\n    | FormBlockModel;\n\nexport type Block = BlockModels & BlockBaseProps;\n"]}

package/build/esm/blocks/Header/Header.css

@@ -145,6 +145,13 @@ unpredictable css rules order in build */
   object-fit: cover;
   border-radius: var(--pc-border-radius);
 }
+.pc-header-block__video-iframe {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  transform: translateY(-50%);
+}
 .pc-header-block__breadcrumbs {
   position: absolute;
   top: 16px;
@@ -220,6 +227,12 @@ unpredictable css rules order in build */
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.pc-header-block_media-view_full .pc-header-block__video-iframe {
+  top: 0;
+  bottom: 0;
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  transform: none;
+}
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
     left: 0;

package/build/esm/blocks/Header/Header.js

@@ -21,11 +21,11 @@ const Background = ({ background, isMobile }) => {
 };
 const FullWidthBackground = ({ background }) => (_jsx("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
 export const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, contentInnerClassName, } = props;
+    const { title, overtitle, description, buttons, image, video, videoIframe, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, contentInnerClassName, } = props;
     const windowWidth = useWindowWidth();
     const isMobile = windowWidth <= BREAKPOINTS.sm;
     const theme = useTheme();
-    const hasRightSideImage = Boolean((image || video) && !centered);
+    const hasRightSideImage = Boolean((image || video || videoIframe) && !centered);
     const curImageSize = imageSize || getImageSize(width);
     const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
     let curVerticalOffset = verticalOffset;
@@ -35,7 +35,8 @@ export const HeaderBlock = (props) => {
     const backgroundThemed = background && getThemedValue(background, theme);
     const imageThemed = image && getThemedValue(image, theme);
     const videoThemed = video && getThemedValue(video, theme);
-    const mediaWithMicrodata = mergeVideoMicrodata({ video: videoThemed, image: imageThemed }, { name: title, description });
+    const { src: videoIframeSrc, ...videoIframeProps } = videoIframe ?? {};
+    const mediaWithMicrodata = mergeVideoMicrodata({ video: videoThemed, image: imageThemed, videoIframe: videoIframeSrc, ...videoIframeProps }, { name: title, description });
     const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;
     const titleId = useUniqId();
     return (_jsxs("header", { className: b({
@@ -56,7 +57,7 @@ export const HeaderBlock = (props) => {
                                                         } }) })), buttons && (_jsx("div", { className: b('buttons'), "data-qa": "header-buttons", children: buttons.map((button, index) => (_jsx(RouterLink, { href: button.url, children: _jsx(Button, { className: b('button'), size: "xl", extraProps: {
                                                                 'aria-describedby': titleId,
                                                                 ...button.extraProps,
-                                                            }, ...button }, index) }, index))) })), children] }) }) }), hasRightSideImage && (_jsx(Media, { className: b('media', { [curImageSize]: true }, mediaClassName), videoClassName: b('video'), imageClassName: b('image'), ...mediaWithMicrodata }))] }) })] })] }));
+                                                            }, ...button }, index) }, index))) })), children] }) }) }), hasRightSideImage && (_jsx(Media, { className: b('media', { [curImageSize]: true }, mediaClassName), videoClassName: b('video'), imageClassName: b('image'), youtubeClassName: b('video-iframe'), ...mediaWithMicrodata }))] }) })] })] }));
 };
 export default HeaderBlock;
 //# sourceMappingURL=Header.js.map