@gravity-ui/page-constructor 1.2.4 → 1.2.5-alpha.0

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

@@ -81,17 +81,21 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageObjectProps {
-    src: string;
+export interface ImageInfoProps {
     alt?: string;
     disableCompress?: boolean;
 }
-export declare type ImageProps = string | ImageObjectProps;
+export interface ImageObjectProps extends ImageInfoProps {
+    src: string;
+}
+export interface ImageDeviceProps extends ImageInfoProps {
+    desktop: string;
+    mobile: string;
+    tablet?: string;
+}
+export declare type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export declare type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
-    src?: string;
-    alt?: string;
-    disableCompress?: boolean;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;

package/build/cjs/models/guards.d.ts

@@ -1,5 +1,4 @@
-import { Block, ConstructorItem, HeaderBlockBackground } from './';
-import { MediaProps, MetrikaGoal, NewMetrikaGoal } from './index';
+import { Block, ConstructorItem } from './';
+import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
 export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
-export declare function headerHasMediaBackground(background: HeaderBlockBackground): background is MediaProps;

package/build/cjs/models/guards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.headerHasMediaBackground = exports.isNewMetrikaFormat = exports.isBlock = void 0;
+exports.isNewMetrikaFormat = exports.isBlock = void 0;
 const _1 = require("./");
 function isBlock(block) {
     return block.type in _1.BlockTypes;
@@ -10,7 +10,3 @@ function isNewMetrikaFormat(metrika) {
     return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
 }
 exports.isNewMetrikaFormat = isNewMetrikaFormat;
-function headerHasMediaBackground(background) {
-    return 'image' in background || 'video' in background || 'youtube' in background;
-}
-exports.headerHasMediaBackground = headerHasMediaBackground;

package/build/cjs/schema/validators/common.d.ts

@@ -19,7 +19,6 @@ export declare const sizeNumber: {
     minimum: number;
 };
 export declare const contentThemes: string[];
-export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
 export declare const BaseProps: {
     type: {};
     when: {};
@@ -159,36 +158,6 @@ export declare const JustifyProps: {
     type: string;
     enum: string[];
 };
-export declare const ImageObjectProps: {
-    type: string;
-    additionalProperties: boolean;
-    required: string[];
-    properties: {
-        src: {
-            type: string;
-            pattern: string;
-        };
-        alt: {
-            type: string;
-        };
-        disableCompress: {
-            type: string;
-        };
-    };
-};
-export declare const ImageProps: {
-    oneOf: ({
-        type: string;
-        properties: {
-            when: {
-                type: string;
-            };
-        };
-    } | {
-        type: string;
-        pattern: string;
-    })[];
-};
 export declare const DataLensObjectProps: {
     type: string;
     additionalProperties: boolean;

package/build/cjs/schema/validators/common.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.ImageProps = exports.ImageObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.PlayIconProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.urlPattern = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
-const utils_1 = require("./utils");
+exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.PlayIconProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
 const pixel_1 = require("./pixel");
 const models_1 = require("../../models");
+const schema_1 = require("../../components/Image/schema");
 exports.mediaDirection = ['media-content', 'content-media'];
 exports.textSize = ['s', 'm', 'l'];
 exports.containerSizesArray = ['sm', 'md', 'lg', 'xl', 'all'];
@@ -18,7 +18,6 @@ exports.fileLinkTypes = ['vertical', 'horizontal'];
 exports.dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
 exports.sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
 exports.contentThemes = ['default', 'dark', 'light'];
-exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
 exports.BaseProps = {
     type: {},
     when: {},
@@ -130,32 +129,6 @@ exports.JustifyProps = {
     type: 'string',
     enum: ['start', 'center', 'end'],
 };
-exports.ImageObjectProps = {
-    type: 'object',
-    additionalProperties: false,
-    required: ['src'],
-    properties: {
-        src: {
-            type: 'string',
-            pattern: exports.urlPattern,
-        },
-        alt: {
-            type: 'string',
-        },
-        disableCompress: {
-            type: 'boolean',
-        },
-    },
-};
-exports.ImageProps = {
-    oneOf: [
-        {
-            type: 'string',
-            pattern: exports.urlPattern,
-        },
-        (0, utils_1.filteredItem)(Object.assign({}, exports.ImageObjectProps)),
-    ],
-};
 exports.DataLensObjectProps = {
     type: 'object',
     additionalProperties: false,
@@ -172,7 +145,7 @@ exports.DataLensProps = {
 };
 exports.BackgroundProps = {
     additionalProperties: false,
-    properties: Object.assign(Object.assign({}, exports.AnimatableProps), { image: exports.ImageProps, color: {
+    properties: Object.assign(Object.assign({}, exports.AnimatableProps), { image: schema_1.ImageProps, color: {
             type: 'string',
         }, video: exports.VideoProps, height: {
             type: 'number',
@@ -241,7 +214,7 @@ exports.authorItem = {
         },
         avatar: {
             type: 'string',
-            pattern: exports.urlPattern,
+            pattern: schema_1.urlPattern,
         },
         description: {
             type: 'string',
@@ -441,7 +414,7 @@ exports.MediaProps = {
         type: 'string',
     },
     image: {
-        anyOf: [exports.ImageProps, { type: 'array', items: exports.ImageProps }],
+        anyOf: [schema_1.ImageProps, { type: 'array', items: schema_1.ImageProps }],
     },
     video: exports.VideoProps,
     youtube: {

package/build/cjs/sub-blocks/BackgroundCard/schema.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const common_1 = require("../../schema/validators/common");
 const schema_1 = require("../../components/CardBase/schema");
 const schema_2 = require("../Content/schema");
+const schema_3 = require("../../components/Image/schema");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
 const BackgroundCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size']);
 exports.BackgroundCard = {
@@ -13,7 +14,7 @@ exports.BackgroundCard = {
         required: ['title', 'text'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), schema_1.CardBase), BackgroundCardContentProps), { url: {
                 type: 'string',
-            }, background: (0, common_1.withTheme)(common_1.ImageObjectProps), backgroundColor: {
+            }, background: (0, common_1.withTheme)(schema_3.ImageObjectProps), backgroundColor: {
                 type: 'string',
             }, paddingBottom: {
                 type: 'string',

package/build/cjs/sub-blocks/BasicCard/BasicCard.js

@@ -13,7 +13,7 @@ const BasicCard = (props) => {
     const iconProps = icon && (0, utils_2.getMediaImage)(icon);
     return (react_1.default.createElement(CardBase_1.default, { className: b(), url: url, border: border },
         react_1.default.createElement(CardBase_1.default.Content, null,
-            iconProps && (react_1.default.createElement(Image_1.default, { src: iconProps.src, alt: iconProps.alt, className: b('icon'), disableCompress: iconProps.disableCompress })),
+            iconProps && react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon') })),
             react_1.default.createElement(__1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));
 };
 exports.default = BasicCard;

package/build/cjs/sub-blocks/BasicCard/schema.js

@@ -6,6 +6,7 @@ const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
 const common_1 = require("../../schema/validators/common");
 const schema_1 = require("../../components/CardBase/schema");
 const schema_2 = require("../Content/schema");
+const schema_3 = require("../../components/Image/schema");
 const BasicCardContentProps = lodash_1.default.omit(schema_2.ContentBase, ['size', 'theme']);
 exports.BasicCard = {
     'basic-card': {
@@ -13,6 +14,6 @@ exports.BasicCard = {
         required: ['url'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), schema_1.CardBase), BasicCardContentProps), { url: {
                 type: 'string',
-            }, icon: common_1.ImageProps }),
+            }, icon: schema_3.ImageProps }),
     },
 };

package/build/cjs/sub-blocks/Partner/Partner.js

@@ -9,7 +9,7 @@ const Partner = ({ text, logo, url, border }) => {
     const logoData = typeof logo === 'string' ? { src: logo } : logo;
     return (react_1.default.createElement(components_1.CardBase, { url: url, target: "_blank", className: b(), border: border },
         react_1.default.createElement(components_1.CardBase.Content, null,
-            react_1.default.createElement(components_1.Image, { className: b('logo'), src: logoData.src, alt: logoData.alt }),
+            react_1.default.createElement(components_1.Image, Object.assign({ className: b('logo') }, logoData)),
             react_1.default.createElement(components_1.HTML, null, text))));
 };
 exports.default = Partner;

package/build/cjs/sub-blocks/Partner/schema.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PartnerBlock = void 0;
 const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../../components/Image/schema");
 exports.PartnerBlock = {
     partner: {
         additionalProperties: false,
         required: ['text', 'logo', 'url'],
         properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
                 type: 'string',
-            }, logo: common_1.ImageProps, url: {
+            }, logo: schema_1.ImageProps, url: {
                 type: 'string',
             } }),
     },

package/build/cjs/sub-blocks/Quote/Quote.js

@@ -7,12 +7,13 @@ const utils_1 = require("../../utils");
 const models_1 = require("../../models");
 const components_1 = require("../../components");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const imageThemed = (0, utils_1.getThemedValue)(image, theme);
-    const imageData = typeof imageThemed === 'string' ? { src: imageThemed } : imageThemed;
+    const imageData = (0, utils_2.getMediaImage)(imageThemed);
     const renderFooter = Boolean(author || url) && (react_1.default.createElement("div", { className: b('author-wrapper') },
         author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line })),
         url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }) }, buttonText))));
@@ -25,6 +26,6 @@ const Quote = (props) => {
                         react_1.default.createElement(components_1.HTML, null, text)))),
             renderFooter),
         react_1.default.createElement("div", { className: b('image-wrapper') },
-            react_1.default.createElement(components_1.Image, { src: imageData.src, alt: imageData.alt, className: b('image') }))));
+            react_1.default.createElement(components_1.Image, Object.assign({}, imageData, { className: b('image') })))));
 };
 exports.default = Quote;

package/build/cjs/sub-blocks/Quote/schema.js

@@ -2,20 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Quote = void 0;
 const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../../components/Image/schema");
 exports.Quote = {
     quote: {
         additionalProperties: false,
         required: ['text', 'image', 'logo'],
         properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
                 type: 'string',
-            }, image: (0, common_1.withTheme)(common_1.ImageProps), logo: {
+            }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: {
                 type: 'string',
-                pattern: common_1.urlPattern,
+                pattern: schema_1.urlPattern,
             }, color: {
                 type: 'string',
             }, url: {
                 type: 'string',
-                pattern: common_1.urlPattern,
+                pattern: schema_1.urlPattern,
             }, theme: common_1.ThemeProps, author: common_1.authorItem }),
     },
 };

package/build/cjs/sub-blocks/TutorialCard/TutorialCard.js

@@ -8,8 +8,8 @@ const components_1 = require("../../components/");
 const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('tutorial-card');
 function iconElement(icon, title) {
-    const { src, alt = title, disableCompress } = (0, utils_2.getMediaImage)(icon !== null && icon !== void 0 ? icon : {});
-    return react_1.default.createElement(components_1.Image, { src: src, alt: alt, className: b('icon'), disableCompress: disableCompress });
+    const image = (0, utils_2.getMediaImage)(icon !== null && icon !== void 0 ? icon : {});
+    return react_1.default.createElement(components_1.Image, Object.assign({}, image, { alt: title, className: b('icon') }));
 }
 const TutorialCard = (props) => {
     const { url, title, text, border, icon } = props;

package/build/cjs/sub-blocks/TutorialCard/schema.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TutorialCard = void 0;
 const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../../components/Image/schema");
 exports.TutorialCard = {
     'tutorial-card': {
         additionalProperties: false,
@@ -12,6 +13,6 @@ exports.TutorialCard = {
                 type: 'string',
             }, text: {
                 type: 'string',
-            }, icon: common_1.ImageProps }),
+            }, icon: schema_1.ImageProps }),
     },
 };

package/build/esm/blocks/Companies/Companies.js

@@ -1,21 +1,17 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import { BREAKPOINTS } from '../../constants';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { Image } from '../../components';
 import './Companies.css';
 const b = block('companies-block');
 export const CompaniesBlock = ({ title, images, animated }) => {
     const { themeValue: theme } = useContext(ThemeValueContext);
     const themedImages = getThemedValue(images, theme) || {};
-    const { desktop, mobile, tablet, alt } = themedImages;
     return (React.createElement(AnimateBlock, { className: b(), offset: 150, animate: animated },
         React.createElement("div", { className: b('content') },
             React.createElement("h2", { className: b('title') }, title),
             React.createElement("div", { className: b('images') },
-                React.createElement("picture", null,
-                    React.createElement("source", { srcSet: desktop, media: `(min-width: ${BREAKPOINTS.md}px)` }),
-                    React.createElement("source", { srcSet: tablet, media: `(min-width: ${BREAKPOINTS.sm}px)` }),
-                    React.createElement("img", { className: b('image'), srcSet: mobile, alt: alt }))))));
+                React.createElement(Image, Object.assign({}, themedImages))))));
 };
 export default CompaniesBlock;

package/build/esm/blocks/ContentLayout/schema.js

@@ -1,6 +1,7 @@
 import { ContentBlock } from '../../sub-blocks/Content/schema';
 import { filteredArray } from '../../schema/validators/utils';
-import { contentSizes, contentTextWidth, contentThemes, FileLinkProps, ImageObjectProps, BlockBaseProps, } from '../../schema/validators/common';
+import { contentSizes, contentTextWidth, contentThemes, FileLinkProps, BlockBaseProps, } from '../../schema/validators/common';
+import { ImageObjectProps } from '../../components/Image/schema';
 export const ContentLayoutBlock = {
     'content-layout-block': {
         additionalProperties: false,

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

@@ -9,6 +9,7 @@ unpredictable css rules order in build */
   margin: 16px 0;
 }
 .pc-header-block_full-width {
+  --pc-border-radius: 0;
   padding: 16px 0;
   margin: 0 0 16px;
 }
@@ -124,6 +125,16 @@ unpredictable css rules order in build */
   top: 16px;
   z-index: 11;
 }
+.pc-header-block__background-media {
+  height: 100%;
+}
+.pc-header-block__background-media > div {
+  height: 100%;
+  width: 100%;
+}
+.pc-header-block__background-media > div:not(.pc-header-block__video) {
+  position: absolute;
+}
 .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
   position: absolute;
   top: 0;
@@ -142,19 +153,12 @@ unpredictable css rules order in build */
 .pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
   max-width: none;
 }
-.pc-header-block__background.pc-header-block__background_full-width-media .pc-header-block__background-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media .pc-header-block__background-media {
-  height: 100%;
-}
 .pc-header-block__background.pc-header-block__background_full-width-media video, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media video {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
-.pc-header-block__background_full-width-media {
-  --pc-border-radius: 0;
-}
 .pc-header-block__background_full-width {
-  --pc-border-radius: 0;
   left: 0;
   transform: none;
   max-width: none;
@@ -190,9 +194,6 @@ unpredictable css rules order in build */
   .pc-header-block_has-media .pc-header-block__content {
     padding-top: 48px;
   }
-  .pc-header-block_has-background .pc-header-block__background-img {
-    display: none;
-  }
   .pc-header-block .pc-header-block__content_vertical-offset_s, .pc-header-block .pc-header-block__content_vertical-offset_m, .pc-header-block .pc-header-block__content_vertical-offset_l, .pc-header-block .pc-header-block__content_vertical-offset_xl {
     padding: calc(96px - 16px) 0;
   }

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

@@ -1,40 +1,40 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
-import { headerHasMediaBackground } from '../../models/guards';
-import { Button, Media, BackgroundMedia, BackgroundImage, RouterLink, HTML } from '../../components';
+import { Button, Media, RouterLink, HTML } from '../../components';
 import { Grid, Row, Col } from '../../grid';
 import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
+import { MobileContext } from '../../context/mobileContext';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { getMediaImage } from '../../components/Media/Image/utils';
 import './Header.css';
 const b = block('header-block');
-const Background = ({ background }) => {
-    const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
-    return headerHasMediaBackground(background) ? (React.createElement(BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (React.createElement(BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
+const Background = ({ background, isMobile }) => {
+    const { url, image, fullWidthMedia, video, color } = background;
+    const imageObject = url ? getMediaImage(url) : image;
+    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
+    return (React.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (React.createElement(Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })))));
 };
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : 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, breadcrumbs, status, children, } = props;
+    const isMobile = useContext(MobileContext);
     const { themeValue: theme } = useContext(ThemeValueContext);
-    const hasMedia = Boolean(image || video);
+    const hasRightSideImage = Boolean(image || video);
     const curImageSize = imageSize || getImageSize(width);
-    const titleSizes = hasMedia ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
+    const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
     let curVerticalOffset = verticalOffset;
-    if (hasMedia && !verticalOffset) {
+    if (hasRightSideImage && !verticalOffset) {
         curVerticalOffset = 'm';
     }
     const backgroundThemed = background && getThemedValue(background, theme);
     const imageThemed = image && getThemedValue(image, theme);
     const videoThemed = video && getThemedValue(video, theme);
-    const fullWidth = Boolean(backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth);
-    return (React.createElement("header", { className: b({
-            ['has-media']: hasMedia,
-            ['has-background']: Boolean(background),
-            ['full-width']: fullWidth,
-        }, className) },
+    const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    return (React.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
         backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
-        backgroundThemed && React.createElement(Background, { background: backgroundThemed }),
+        backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         React.createElement(Grid, { containerClass: b('container-fluid') },
             breadcrumbs && (React.createElement(Row, { className: b('breadcrumbs') },
                 React.createElement(Col, null,
@@ -59,6 +59,6 @@ export const HeaderBlock = (props) => {
                                     buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
                                         React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
                                 children))),
-                    hasMedia && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
+                    hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };
 export default HeaderBlock;