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

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderBlock = exports.HeaderProperties = void 0;
+exports.HeaderBlock = exports.HeaderProperties = exports.HeaderBackgroundProps = void 0;
 const common_1 = require("../../schema/validators/common");
 const utils_1 = require("../../schema/validators/utils");
-const HeaderMedia = {
+const schema_1 = require("../../components/Image/schema");
+exports.HeaderBackgroundProps = {
     type: 'object',
     additionalProperties: false,
     required: [],
-    properties: Object.assign(Object.assign({}, common_1.MediaProps), { fullWidth: { type: 'boolean' } }),
+    properties: Object.assign(Object.assign({}, common_1.MediaProps), { fullWidth: { type: 'boolean' }, fullWidthMedia: { type: 'boolean' } }),
 };
 exports.HeaderProperties = {
     title: {
@@ -28,7 +29,7 @@ exports.HeaderProperties = {
         type: 'string',
         enum: ['default', 'large'],
     },
-    image: (0, common_1.withTheme)(common_1.ImageProps),
+    image: (0, common_1.withTheme)(schema_1.ImageProps),
     video: (0, common_1.withTheme)(common_1.VideoProps),
     backLink: {
         type: 'object',
@@ -50,22 +51,7 @@ exports.HeaderProperties = {
         type: 'string',
         enum: ['s', 'm', 'l', 'xl'],
     },
-    background: (0, common_1.withTheme)({
-        oneOf: [
-            HeaderMedia,
-            {
-                type: 'object',
-                additionalProperties: false,
-                properties: {
-                    color: { type: 'string' },
-                    url: { type: 'string' },
-                    disableCompress: { type: 'boolean' },
-                    fullWidth: { type: 'boolean' },
-                    fullWidthMedia: { type: 'boolean' },
-                },
-            },
-        ],
-    }),
+    background: (0, common_1.withTheme)(exports.HeaderBackgroundProps),
     theme: {
         type: 'string',
         enum: ['default', 'dark'],

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

@@ -151,19 +151,35 @@ export declare const HeaderSliderBlock: {
                         };
                         background: {
                             oneOf: ({
-                                oneOf: ({
-                                    type: string;
-                                    additionalProperties: boolean;
-                                    required: never[];
-                                    properties: {
-                                        fullWidth: {
-                                            type: string;
-                                        };
-                                        color: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    fullWidth: {
+                                        type: string;
+                                    };
+                                    fullWidthMedia: {
+                                        type: string;
+                                    };
+                                    color: {
+                                        type: string;
+                                    };
+                                    image: {
+                                        anyOf: ({
+                                            oneOf: ({
+                                                type: string;
+                                                properties: {
+                                                    when: {
+                                                        type: string;
+                                                    };
+                                                };
+                                            } | {
+                                                type: string;
+                                                pattern: string;
+                                            })[];
+                                        } | {
                                             type: string;
-                                        };
-                                        image: {
-                                            anyOf: ({
+                                            items: {
                                                 oneOf: ({
                                                     type: string;
                                                     properties: {
@@ -175,139 +191,104 @@ export declare const HeaderSliderBlock: {
                                                     type: string;
                                                     pattern: string;
                                                 })[];
-                                            } | {
+                                            };
+                                        })[];
+                                    };
+                                    video: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: string[];
+                                        properties: {
+                                            src: {
                                                 type: string;
                                                 items: {
-                                                    oneOf: ({
-                                                        type: string;
-                                                        properties: {
-                                                            when: {
-                                                                type: string;
-                                                            };
-                                                        };
-                                                    } | {
-                                                        type: string;
-                                                        pattern: string;
-                                                    })[];
-                                                };
-                                            })[];
-                                        };
-                                        video: {
-                                            type: string;
-                                            additionalProperties: boolean;
-                                            required: string[];
-                                            properties: {
-                                                src: {
-                                                    type: string;
-                                                    items: {
-                                                        type: string;
-                                                    };
-                                                };
-                                                loop: {
-                                                    anyOf: ({
-                                                        type: string;
-                                                        additionalProperties: boolean;
-                                                        required: string[];
-                                                        properties: {
-                                                            start: {
-                                                                type: string;
-                                                            };
-                                                            end: {
-                                                                type: string;
-                                                            };
-                                                        };
-                                                    } | {
-                                                        type: string;
-                                                    })[];
-                                                };
-                                                type: {
-                                                    type: string;
-                                                    enum: string[];
-                                                };
-                                                muted: {
-                                                    type: string;
-                                                };
-                                                playing: {
-                                                    type: string;
-                                                };
-                                                elapsedTime: {
                                                     type: string;
                                                 };
-                                                playIcon: {
+                                            };
+                                            loop: {
+                                                anyOf: ({
                                                     type: string;
                                                     additionalProperties: boolean;
+                                                    required: string[];
                                                     properties: {
-                                                        type: {
+                                                        start: {
                                                             type: string;
-                                                            enum: string[];
                                                         };
-                                                        theme: {
-                                                            type: string;
-                                                            enum: string[];
-                                                        };
-                                                        text: {
+                                                        end: {
                                                             type: string;
                                                         };
                                                     };
-                                                };
-                                                controls: {
+                                                } | {
                                                     type: string;
-                                                    enum: string[];
-                                                };
+                                                })[];
                                             };
-                                        };
-                                        youtube: {
-                                            type: string;
-                                        };
-                                        parallax: {
-                                            type: string;
-                                        };
-                                        height: {
-                                            type: string;
-                                        };
-                                        previewImg: {
-                                            type: string;
-                                        };
-                                        dataLens: {
-                                            oneOf: ({
+                                            type: {
+                                                type: string;
+                                                enum: string[];
+                                            };
+                                            muted: {
+                                                type: string;
+                                            };
+                                            playing: {
+                                                type: string;
+                                            };
+                                            elapsedTime: {
+                                                type: string;
+                                            };
+                                            playIcon: {
                                                 type: string;
                                                 additionalProperties: boolean;
-                                                required: string[];
                                                 properties: {
-                                                    id: {
+                                                    type: {
                                                         type: string;
+                                                        enum: string[];
                                                     };
                                                     theme: {
                                                         type: string;
                                                         enum: string[];
                                                     };
+                                                    text: {
+                                                        type: string;
+                                                    };
                                                 };
-                                            } | {
+                                            };
+                                            controls: {
                                                 type: string;
-                                            })[];
+                                                enum: string[];
+                                            };
                                         };
                                     };
-                                } | {
-                                    type: string;
-                                    additionalProperties: boolean;
-                                    properties: {
-                                        color: {
-                                            type: string;
-                                        };
-                                        url: {
-                                            type: string;
-                                        };
-                                        disableCompress: {
-                                            type: string;
-                                        };
-                                        fullWidth: {
+                                    youtube: {
+                                        type: string;
+                                    };
+                                    parallax: {
+                                        type: string;
+                                    };
+                                    height: {
+                                        type: string;
+                                    };
+                                    previewImg: {
+                                        type: string;
+                                    };
+                                    dataLens: {
+                                        oneOf: ({
                                             type: string;
-                                        };
-                                        fullWidthMedia: {
+                                            additionalProperties: boolean;
+                                            required: string[];
+                                            properties: {
+                                                id: {
+                                                    type: string;
+                                                };
+                                                theme: {
+                                                    type: string;
+                                                    enum: string[];
+                                                };
+                                            };
+                                        } | {
                                             type: string;
-                                        };
+                                        })[];
                                     };
-                                })[];
+                                };
                             } | {
                                 type: string;
                                 additionalProperties: boolean;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -13,6 +13,7 @@ const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components
 const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
 const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('TabsBlock');
 const TabsBlock = ({ items, title, description, animated }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
@@ -23,7 +24,7 @@ const TabsBlock = ({ items, title, description, animated }) => {
     let imageProps;
     if (activeTabData) {
         const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
-        imageProps = typeof themedImage === 'string' ? { src: themedImage } : themedImage;
+        imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
@@ -36,7 +37,7 @@ const TabsBlock = ({ items, title, description, animated }) => {
                 } },
                 (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
                 imageProps && (react_1.default.createElement(react_1.Fragment, null,
-                    react_1.default.createElement(FullscreenImage_1.default, { imageClassName: b('image'), src: (imageProps && imageProps.src) || 'default_image', alt: imageProps && imageProps.alt, disableCompress: imageProps === null || imageProps === void 0 ? void 0 : imageProps.disableCompress }),
+                    react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
                     activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
                 react_1.default.createElement("div", { className: b('content-wrapper', {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = exports.tabsItem = void 0;
 const utils_1 = require("../../schema/validators/utils");
 const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../../components/Image/schema");
 exports.tabsItem = {
     type: 'object',
     additionalProperties: false,
@@ -27,7 +28,7 @@ exports.tabsItem = {
         //TODO deprecated
         link: common_1.LinkProps,
         links: (0, utils_1.filteredArray)(common_1.LinkProps),
-        image: (0, common_1.withTheme)(common_1.ImageProps),
+        image: (0, common_1.withTheme)(schema_1.ImageProps),
     },
 };
 exports.TabsBlock = {

package/build/cjs/components/BackgroundImage/BackgroundImage.js

@@ -6,9 +6,9 @@ const utils_1 = require("../../utils");
 const Image_1 = (0, tslib_1.__importDefault)(require("../Image/Image"));
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, alt, disableCompress, className, imageClassName, style, hide } = props;
+    const { children, src, desktop, className, imageClassName, style, hide } = props;
     return (react_1.default.createElement("div", { className: b(null, className), style: style },
-        src && !hide && (react_1.default.createElement(Image_1.default, { className: b('img', imageClassName), src: src, alt: alt, disableCompress: disableCompress })),
+        (src || desktop) && !hide && react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && react_1.default.createElement("div", { className: b('container') }, children)));
 };
 exports.default = BackgroundImage;

package/build/cjs/components/BackgroundMedia/BackgroundMedia.css

@@ -10,6 +10,7 @@ unpredictable css rules order in build */
   margin: 0 auto;
   max-width: 1440px;
   text-align: center;
+  height: 100%;
 }
 .pc-BackgroundMedia__image {
   height: 100%;
@@ -17,6 +18,7 @@ unpredictable css rules order in build */
 }
 .pc-BackgroundMedia__video {
   position: relative;
+  height: 100%;
 }
 .pc-BackgroundMedia__video video {
   position: absolute;

package/build/cjs/components/BackgroundMedia/BackgroundMedia.js

@@ -11,7 +11,7 @@ const BackgroundMedia = (_a) => {
     var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = (0, tslib_1.__rest)(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
-            parallax, video: isMobile ? undefined : video }, props)))));
+        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign(Object.assign({}, props), { height: 720, color,
+            parallax, video: isMobile ? undefined : video })))));
 };
 exports.default = BackgroundMedia;

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

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-import { ImageProps } from '../Image/Image';
-export interface FullScreenImageProps extends ImageProps {
+import { ImageOwnProps } from '../Image/Image';
+export interface FullScreenImageProps extends ImageOwnProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;

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

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

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

@@ -3,21 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
+const constants_1 = require("../../constants");
+const checkWebP = (src) => {
+    return src.endsWith('.webp') ? src : src + '.webp';
+};
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src, alt, disableCompress, style, className, onClick } = props;
+    const { src, alt, disableCompress, tablet, desktop, mobile, style, className, onClick } = props;
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
-    if (!src) {
+    const imageSrc = src || desktop;
+    if (!imageSrc) {
         return null;
     }
     // TODO: Temporary solution for .svg images
     const disableWebp = projectSettings.disableCompress ||
         disableCompress ||
-        src.endsWith('.svg') ||
+        imageSrc.endsWith('.svg') ||
         imgLoadingError;
-    const webp = src.endsWith('.webp') ? src : src + '.webp';
     return (react_1.default.createElement("picture", null,
-        disableWebp ? null : react_1.default.createElement("source", { srcSet: webp, type: "image/webp" }),
-        react_1.default.createElement("img", { className: className, src: src, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+        mobile && (react_1.default.createElement(react_1.Fragment, null,
+            !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
+            react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),
+        tablet && (react_1.default.createElement(react_1.Fragment, null,
+            !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(tablet), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` })),
+            react_1.default.createElement("source", { srcSet: tablet, media: `(max-width: ${constants_1.BREAKPOINTS.md}px)` }))),
+        desktop && !disableWebp && react_1.default.createElement("source", { srcSet: checkWebP(imageSrc), type: "image/webp" }),
+        react_1.default.createElement("img", { className: className, src: imageSrc, alt: alt, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
 };
 exports.default = Image;

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

@@ -0,0 +1,56 @@
+export declare const urlPattern = "^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$";
+export declare const ImageDeviceProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        desktop: {
+            type: string;
+            pattern: string;
+        };
+        tablet: {
+            type: string;
+            pattern: string;
+        };
+        mobile: {
+            type: string;
+            pattern: string;
+        };
+        alt: {
+            type: string;
+        };
+        disableCompress: {
+            type: 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;
+    })[];
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = exports.urlPattern = void 0;
+const utils_1 = require("../../schema/validators/utils");
+exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
+exports.ImageDeviceProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['desktop', 'mobile'],
+    properties: {
+        desktop: { type: 'string', pattern: exports.urlPattern },
+        tablet: {
+            type: 'string',
+            pattern: exports.urlPattern,
+        },
+        mobile: {
+            type: 'string',
+            pattern: exports.urlPattern,
+        },
+        alt: {
+            type: 'string',
+        },
+        disableCompress: {
+            type: 'boolean',
+        },
+    },
+};
+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)),
+        (0, utils_1.filteredItem)(Object.assign({}, exports.ImageDeviceProps)),
+    ],
+};

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

@@ -14,7 +14,7 @@ const b = (0, utils_1.block)('link-block');
 function getArrowSize(size) {
     switch (size) {
         case 'l':
-            return 14;
+            return 20;
         case 'm':
             return 12;
         case 's':

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

@@ -36,16 +36,16 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const imageSlider = (imageArray) => (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => {
         const itemData = (0, utils_1.getMediaImage)(item);
-        return (react_1.default.createElement(FullscreenImage_1.default, { key: itemData.src, src: itemData.src, alt: itemData.alt, imageClassName: imageClass, imageStyle: { height } }));
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
     })));
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_1.getMediaImage)(oneImage);
         return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
-            react_1.default.createElement(BackgroundImage_1.default, { className: imageClass, src: imageData.src, style: { height }, disableCompress: imageData.disableCompress })));
+            react_1.default.createElement(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {
         const imageData = (0, utils_1.getMediaImage)(oneImage);
-        return (react_1.default.createElement(Image_1.default, { className: imageClass, src: imageData.src, alt: imageData.alt, style: { height }, disableCompress: imageData.disableCompress }));
+        return react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps } from './common';
+import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { BannerCardProps, SubBlock } from './sub-blocks';
@@ -78,8 +78,9 @@ export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'des
     items: HeaderBlockProps[];
 }
 interface HeaderBackgroundProps {
-    color?: string;
+    /** @deprecated replaced by Media Props image */
     url?: string;
+    /** @deprecated replaced by Media Props image */
     disableCompress?: boolean;
 }
 export interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {
@@ -151,12 +152,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
     title: string;
-    images: ThemeSupporting<{
-        desktop: string;
-        tablet: string;
-        mobile: string;
-        alt?: string;
-    }>;
+    images: ThemeSupporting<ImageDeviceProps>;
 }
 export interface MediaContentProps {
     title: string;