@gravity-ui/page-constructor 4.49.2 → 4.51.0

package/build/cjs/components/IconWrapper/IconWrapper.css

@@ -0,0 +1,24 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-icon-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.pc-icon-wrapper_icon-position_left {
+  flex-direction: row;
+}
+.pc-icon-wrapper__icon {
+  max-width: 100%;
+  margin-bottom: 12px;
+  height: 32px;
+  object-fit: contain;
+  display: block;
+}
+.pc-icon-wrapper__icon_icon-position_left {
+  height: 22px;
+  width: 22px;
+  margin: 1px 12px 1px 0px;
+}
+.pc-icon-wrapper_content_left.pc-icon-wrapper_content_left {
+  flex: 1 0 0;
+}

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

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { IconWrapperProps } from '../../models';
+declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps>) => JSX.Element;
+export default IconWrapper;

package/build/cjs/components/IconWrapper/IconWrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../utils");
+const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const utils_2 = require("../Media/Image/utils");
+const b = (0, utils_1.block)('icon-wrapper');
+const IconWrapper = (props) => {
+    const { icon, children } = props;
+    if (!icon) {
+        return react_1.default.createElement(react_1.Fragment, null, children);
+    }
+    const iconProps = (0, utils_2.getMediaImage)(icon.value);
+    const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
+    return (react_1.default.createElement("div", { className: b({ ['icon-position']: iconPosition }) },
+        iconProps && (react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon', { ['icon-position']: iconPosition }) }))),
+        react_1.default.createElement("div", { className: b({ ['content']: iconPosition }) }, children)));
+};
+exports.default = IconWrapper;

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

@@ -36,5 +36,6 @@ export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export { default as ContentList } from './ContentList/ContentList';
 export { default as InnerForm } from './InnerForm/InnerForm';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerForm = exports.ContentList = exports.FullscreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.IconWrapper = exports.InnerForm = exports.ContentList = exports.FullscreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -80,3 +80,5 @@ var ContentList_1 = require("./ContentList/ContentList");
 Object.defineProperty(exports, "ContentList", { enumerable: true, get: function () { return __importDefault(ContentList_1).default; } });
 var InnerForm_1 = require("./InnerForm/InnerForm");
 Object.defineProperty(exports, "InnerForm", { enumerable: true, get: function () { return __importDefault(InnerForm_1).default; } });
+var IconWrapper_1 = require("./IconWrapper/IconWrapper");
+Object.defineProperty(exports, "IconWrapper", { enumerable: true, get: function () { return __importDefault(IconWrapper_1).default; } });

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

@@ -24,7 +24,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;

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

@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
-import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
 import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
@@ -108,7 +108,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
-    mediaView?: 'fit' | 'full';
+    mediaView?: MediaView;
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';

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

@@ -293,6 +293,7 @@ export interface TitleItemBaseProps {
     custom?: string | ReactNode;
     onClick?: () => void;
 }
+export type MediaView = 'fit' | 'full';
 export type MediaBorder = 'shadow' | 'line' | 'none';
 export type CardBorder = MediaBorder;
 export interface CardBaseProps {

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AnalyticsEventsBase, PixelEvent } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -28,6 +28,13 @@ export declare enum IconPosition {
     Top = "top",
     Left = "left"
 }
+export interface PositionedIcon {
+    value: ImageProps;
+    position?: IconPosition;
+}
+export interface IconWrapperProps {
+    icon?: PositionedIcon;
+}
 export declare const SubBlockTypes: SubBlockType[];
 export interface DividerProps {
     size?: DividerSize;
@@ -106,7 +113,8 @@ export interface BannerCardProps {
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
+    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
 }
@@ -123,10 +131,11 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
 }
 export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
-    media: MediaProps;
+    media?: MediaProps;
     metaInfo?: string[];
     border?: boolean;
     fullscreen?: boolean;
+    icon?: PositionedIcon;
 }
 export type DividerModel = {
     type: SubBlockType.Divider;

package/build/cjs/sub-blocks/BannerCard/BannerCard.css

@@ -87,6 +87,9 @@ unpredictable css rules order in build */
   object-fit: cover;
   object-position: left;
 }
+.pc-banner-card_media-view_fit .pc-banner-card__image img {
+  object-fit: contain;
+}
 @media (max-width: 576px) {
   .pc-banner-card__image {
     display: none;

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

@@ -8,13 +8,13 @@ const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('banner-card');
 const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = (0, theme_1.useTheme)();
     const contentStyle = {};
     if (color) {
         contentStyle.backgroundColor = (0, utils_1.getThemedValue)(color, theme);
     }
-    return (react_1.default.createElement("div", { className: b({ theme: textTheme }) },
+    return (react_1.default.createElement("div", { className: b({ theme: textTheme, ['media-view']: mediaView }) },
         react_1.default.createElement("div", { className: b('content'), style: contentStyle },
             react_1.default.createElement("div", { className: b('info') },
                 react_1.default.createElement("div", { className: b('text') },
@@ -22,7 +22,7 @@ const BannerCard = (props) => {
                         react_1.default.createElement(components_1.HTML, null, title)),
                     subtitle && (react_1.default.createElement(components_1.YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
                 react_1.default.createElement(components_1.RouterLink, { href: url },
-                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target }))),
+                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
             react_1.default.createElement(components_1.BackgroundImage, { className: b('image'), src: (0, utils_1.getThemedValue)(image, theme), disableCompress: disableCompress }))));
 };
 exports.BannerCard = BannerCard;

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

@@ -2,27 +2,4 @@
 unpredictable css rules order in build */
 .pc-basic-card.pc-basic-card {
   min-height: auto;
-}
-
-.pc-basic-card__icon {
-  max-width: 100%;
-  margin-bottom: 12px;
-  height: 32px;
-  object-fit: contain;
-  display: block;
-}
-.pc-basic-card__icon_icon-position_left {
-  height: 22px;
-  width: 22px;
-  margin: 1px 12px 1px 0px;
-}
-.pc-basic-card__content {
-  display: flex;
-  flex-direction: column;
-}
-.pc-basic-card__content_icon-position_left {
-  flex-direction: row;
-}
-.pc-basic-card_content-layout_left.pc-basic-card_content-layout_left {
-  flex: 1 0 0;
 }

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

@@ -3,22 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const __1 = require("../");
 const CardBase_1 = tslib_1.__importDefault(require("../../components/CardBase/CardBase"));
-const Image_1 = tslib_1.__importDefault(require("../../components/Image/Image"));
-const utils_1 = require("../../components/Media/Image/utils");
+const IconWrapper_1 = tslib_1.__importDefault(require("../../components/IconWrapper/IconWrapper"));
 const sub_blocks_1 = require("../../models/constructor-items/sub-blocks");
-const utils_2 = require("../../utils");
-const b = (0, utils_2.block)('basic-card');
+const utils_1 = require("../../utils");
+const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
+const b = (0, utils_1.block)('basic-card');
 const BasicCard = (props) => {
     const { title, text, icon, additionalInfo, links, buttons, iconPosition = sub_blocks_1.IconPosition.Top } = props, cardParams = tslib_1.__rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons", "iconPosition"]);
-    const iconProps = icon && (0, utils_1.getMediaImage)(icon);
     const titleId = (0, uikit_1.useUniqId)();
     const descriptionId = (0, uikit_1.useUniqId)();
     return (react_1.default.createElement(CardBase_1.default, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
         react_1.default.createElement(CardBase_1.default.Content, null,
-            react_1.default.createElement("div", { className: b('content', { ['icon-position']: iconPosition }) },
-                iconProps && (react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon', { ['icon-position']: iconPosition }) }))),
-                react_1.default.createElement(__1.Content, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s", className: b({ ['content-layout']: iconPosition }) })))));
+            react_1.default.createElement(IconWrapper_1.default, { icon: icon ? { value: icon, position: iconPosition } : undefined },
+                react_1.default.createElement(Content_1.default, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 } })))));
 };
 exports.default = BasicCard;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.css

@@ -13,4 +13,7 @@ unpredictable css rules order in build */
 }
 .pc-layout-item__content {
   margin: 16px 16px 0 0;
+}
+.pc-layout-item__content_no-media {
+  margin: 0;
 }

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,3 +1,3 @@
 import { LayoutItemProps } from '../../models';
-declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: LayoutItemProps) => JSX.Element;
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, }: LayoutItemProps) => JSX.Element;
 export default LayoutItem;

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

@@ -2,20 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const __1 = require("..");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
+const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullscreen, className, analyticsEvents } = _a;
-    return (react_1.default.createElement("div", { className: b(null, className) },
-        fullscreen && (0, utils_2.hasFullscreen)(media) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(media) }, (_a = {}) => {
+    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents } = _a;
+    const contentProps = Object.assign(Object.assign({}, content), { links: (0, utils_2.getLayoutItemLinks)(links), size: 's', colSizes: { all: 12, md: 12 } });
+    const renderMedia = () => {
+        if (!media) {
+            return null;
+        }
+        return fullscreen && (0, utils_2.hasFullscreen)(media) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(media) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
             return (react_1.default.createElement(components_1.Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
-        })) : (react_1.default.createElement(components_1.Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents }))),
+        })) : (react_1.default.createElement(components_1.Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
+    };
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        renderMedia(),
         metaInfo && react_1.default.createElement(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }),
-        react_1.default.createElement("div", { className: b('content') },
-            react_1.default.createElement(__1.Content, Object.assign({}, content, { links: (0, utils_2.getLayoutItemLinks)(links), size: "s", colSizes: { all: 12, md: 12 } })))));
+        react_1.default.createElement("div", { className: b('content', { 'no-media': !media }) },
+            react_1.default.createElement(components_1.IconWrapper, { icon: icon },
+                react_1.default.createElement(Content_1.default, Object.assign({}, contentProps))))));
 };
 exports.default = LayoutItem;

package/build/esm/components/IconWrapper/IconWrapper.css

@@ -0,0 +1,24 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-icon-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.pc-icon-wrapper_icon-position_left {
+  flex-direction: row;
+}
+.pc-icon-wrapper__icon {
+  max-width: 100%;
+  margin-bottom: 12px;
+  height: 32px;
+  object-fit: contain;
+  display: block;
+}
+.pc-icon-wrapper__icon_icon-position_left {
+  height: 22px;
+  width: 22px;
+  margin: 1px 12px 1px 0px;
+}
+.pc-icon-wrapper_content_left.pc-icon-wrapper_content_left {
+  flex: 1 0 0;
+}

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { IconWrapperProps } from '../../models';
+import './IconWrapper.css';
+declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps>) => JSX.Element;
+export default IconWrapper;

package/build/esm/components/IconWrapper/IconWrapper.js

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react';
+import { block } from '../../utils';
+import Image from '../Image/Image';
+import { getMediaImage } from '../Media/Image/utils';
+import './IconWrapper.css';
+const b = block('icon-wrapper');
+const IconWrapper = (props) => {
+    const { icon, children } = props;
+    if (!icon) {
+        return React.createElement(Fragment, null, children);
+    }
+    const iconProps = getMediaImage(icon.value);
+    const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
+    return (React.createElement("div", { className: b({ ['icon-position']: iconPosition }) },
+        iconProps && (React.createElement(Image, Object.assign({}, iconProps, { className: b('icon', { ['icon-position']: iconPosition }) }))),
+        React.createElement("div", { className: b({ ['content']: iconPosition }) }, children)));
+};
+export default IconWrapper;

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

@@ -36,5 +36,6 @@ export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export { default as ContentList } from './ContentList/ContentList';
 export { default as InnerForm } from './InnerForm/InnerForm';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/esm/components/index.js

@@ -36,3 +36,4 @@ export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export { default as ContentList } from './ContentList/ContentList';
 export { default as InnerForm } from './InnerForm/InnerForm';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';

package/build/esm/constructor-items.d.ts

@@ -24,7 +24,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;

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

@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
-import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
 import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
@@ -108,7 +108,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
-    mediaView?: 'fit' | 'full';
+    mediaView?: MediaView;
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';

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

@@ -293,6 +293,7 @@ export interface TitleItemBaseProps {
     custom?: string | ReactNode;
     onClick?: () => void;
 }
+export type MediaView = 'fit' | 'full';
 export type MediaBorder = 'shadow' | 'line' | 'none';
 export type CardBorder = MediaBorder;
 export interface CardBaseProps {

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AnalyticsEventsBase, PixelEvent } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -28,6 +28,13 @@ export declare enum IconPosition {
     Top = "top",
     Left = "left"
 }
+export interface PositionedIcon {
+    value: ImageProps;
+    position?: IconPosition;
+}
+export interface IconWrapperProps {
+    icon?: PositionedIcon;
+}
 export declare const SubBlockTypes: SubBlockType[];
 export interface DividerProps {
     size?: DividerSize;
@@ -106,7 +113,8 @@ export interface BannerCardProps {
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
+    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
 }
@@ -123,10 +131,11 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
 }
 export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
-    media: MediaProps;
+    media?: MediaProps;
     metaInfo?: string[];
     border?: boolean;
     fullscreen?: boolean;
+    icon?: PositionedIcon;
 }
 export type DividerModel = {
     type: SubBlockType.Divider;

package/build/esm/sub-blocks/BannerCard/BannerCard.css

@@ -87,6 +87,9 @@ unpredictable css rules order in build */
   object-fit: cover;
   object-position: left;
 }
+.pc-banner-card_media-view_fit .pc-banner-card__image img {
+  object-fit: contain;
+}
 @media (max-width: 576px) {
   .pc-banner-card__image {
     display: none;

package/build/esm/sub-blocks/BannerCard/BannerCard.js

@@ -5,13 +5,13 @@ import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = useTheme();
     const contentStyle = {};
     if (color) {
         contentStyle.backgroundColor = getThemedValue(color, theme);
     }
-    return (React.createElement("div", { className: b({ theme: textTheme }) },
+    return (React.createElement("div", { className: b({ theme: textTheme, ['media-view']: mediaView }) },
         React.createElement("div", { className: b('content'), style: contentStyle },
             React.createElement("div", { className: b('info') },
                 React.createElement("div", { className: b('text') },
@@ -19,7 +19,7 @@ export const BannerCard = (props) => {
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
                 React.createElement(RouterLink, { href: url },
-                    React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target }))),
+                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;

package/build/esm/sub-blocks/BasicCard/BasicCard.css

@@ -2,27 +2,4 @@
 unpredictable css rules order in build */
 .pc-basic-card.pc-basic-card {
   min-height: auto;
-}
-
-.pc-basic-card__icon {
-  max-width: 100%;
-  margin-bottom: 12px;
-  height: 32px;
-  object-fit: contain;
-  display: block;
-}
-.pc-basic-card__icon_icon-position_left {
-  height: 22px;
-  width: 22px;
-  margin: 1px 12px 1px 0px;
-}
-.pc-basic-card__content {
-  display: flex;
-  flex-direction: column;
-}
-.pc-basic-card__content_icon-position_left {
-  flex-direction: row;
-}
-.pc-basic-card_content-layout_left.pc-basic-card_content-layout_left {
-  flex: 1 0 0;
 }

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

@@ -1,23 +1,20 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
-import { Content } from '../';
 import CardBase from '../../components/CardBase/CardBase';
-import Image from '../../components/Image/Image';
-import { getMediaImage } from '../../components/Media/Image/utils';
+import IconWrapper from '../../components/IconWrapper/IconWrapper';
 import { IconPosition } from '../../models/constructor-items/sub-blocks';
 import { block } from '../../utils';
+import Content from '../Content/Content';
 import './BasicCard.css';
 const b = block('basic-card');
 const BasicCard = (props) => {
     const { title, text, icon, additionalInfo, links, buttons, iconPosition = IconPosition.Top } = props, cardParams = __rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons", "iconPosition"]);
-    const iconProps = icon && getMediaImage(icon);
     const titleId = useUniqId();
     const descriptionId = useUniqId();
     return (React.createElement(CardBase, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
         React.createElement(CardBase.Content, null,
-            React.createElement("div", { className: b('content', { ['icon-position']: iconPosition }) },
-                iconProps && (React.createElement(Image, Object.assign({}, iconProps, { className: b('icon', { ['icon-position']: iconPosition }) }))),
-                React.createElement(Content, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s", className: b({ ['content-layout']: iconPosition }) })))));
+            React.createElement(IconWrapper, { icon: icon ? { value: icon, position: iconPosition } : undefined },
+                React.createElement(Content, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 } })))));
 };
 export default BasicCard;

package/build/esm/sub-blocks/LayoutItem/LayoutItem.css

@@ -13,4 +13,7 @@ unpredictable css rules order in build */
 }
 .pc-layout-item__content {
   margin: 16px 16px 0 0;
+}
+.pc-layout-item__content_no-media {
+  margin: 0;
 }

package/build/esm/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,4 +1,4 @@
 import { LayoutItemProps } from '../../models';
 import './LayoutItem.css';
-declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: LayoutItemProps) => JSX.Element;
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, }: LayoutItemProps) => JSX.Element;
 export default LayoutItem;

package/build/esm/sub-blocks/LayoutItem/LayoutItem.js

@@ -1,20 +1,28 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { Content } from '..';
-import { FullscreenMedia, Media, MetaInfo } from '../../components';
+import { FullscreenMedia, IconWrapper, Media, MetaInfo } from '../../components';
 import { block } from '../../utils';
+import Content from '../Content/Content';
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
 const b = block('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullscreen, className, analyticsEvents } = _a;
-    return (React.createElement("div", { className: b(null, className) },
-        fullscreen && hasFullscreen(media) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(media) }, (_a = {}) => {
+    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents } = _a;
+    const contentProps = Object.assign(Object.assign({}, content), { links: getLayoutItemLinks(links), size: 's', colSizes: { all: 12, md: 12 } });
+    const renderMedia = () => {
+        if (!media) {
+            return null;
+        }
+        return fullscreen && hasFullscreen(media) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(media) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
             return (React.createElement(Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
-        })) : (React.createElement(Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents }))),
+        })) : (React.createElement(Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
+    };
+    return (React.createElement("div", { className: b(null, className) },
+        renderMedia(),
         metaInfo && React.createElement(MetaInfo, { items: metaInfo, className: b('meta-info') }),
-        React.createElement("div", { className: b('content') },
-            React.createElement(Content, Object.assign({}, content, { links: getLayoutItemLinks(links), size: "s", colSizes: { all: 12, md: 12 } })))));
+        React.createElement("div", { className: b('content', { 'no-media': !media }) },
+            React.createElement(IconWrapper, { icon: icon },
+                React.createElement(Content, Object.assign({}, contentProps))))));
 };
 export default LayoutItem;