@gravity-ui/page-constructor 4.49.1 → 4.50.0

package/build/cjs/blocks/FilterBlock/FilterBlock.css

@@ -43,4 +43,7 @@ unpredictable css rules order in build */
 }
 .row .pc-filter-block__block-container.row {
   margin: 0px;
+}
+.pc-filter-block__cards-container {
+  width: 100%;
 }

package/build/cjs/blocks/FilterBlock/FilterBlock.js

@@ -36,7 +36,7 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         react_1.default.createElement(grid_1.Row, { className: b('block-container') },
-            react_1.default.createElement(__1.CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+            react_1.default.createElement(__1.CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container') }, cards.map((card, index) => {
                 const key = (0, utils_1.getBlockKey)(card, index);
                 return react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key, key: key });
             })))));

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/sub-blocks.d.ts

@@ -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;
@@ -123,10 +130,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/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/cjs/text-transform/config.js

@@ -321,4 +321,16 @@ exports.config = {
             parser: (0, common_1.createItemsParser)(['text']),
         },
     ],
+    [models_1.BlockType.FormBlock]: [
+        {
+            fields: ['textContent'],
+            transformer: common_1.yfmTransformer,
+            parser: parseContentLayout,
+        },
+        {
+            fields: ['textContent'],
+            transformer: common_1.typografTransformer,
+            parser: parseContentLayoutTitle,
+        },
+    ],
 };

package/build/esm/blocks/FilterBlock/FilterBlock.css

@@ -43,4 +43,7 @@ unpredictable css rules order in build */
 }
 .row .pc-filter-block__block-container.row {
   margin: 0px;
+}
+.pc-filter-block__cards-container {
+  width: 100%;
 }

package/build/esm/blocks/FilterBlock/FilterBlock.js

@@ -34,7 +34,7 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             React.createElement(Col, null,
                 React.createElement(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         React.createElement(Row, { className: b('block-container') },
-            React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+            React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container') }, cards.map((card, index) => {
                 const key = getBlockKey(card, index);
                 return React.createElement(ConstructorItem, { data: card, blockKey: key, key: key });
             })))));

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/sub-blocks.d.ts

@@ -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;
@@ -123,10 +130,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/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;

package/build/esm/text-transform/config.js

@@ -318,4 +318,16 @@ export const config = {
             parser: createItemsParser(['text']),
         },
     ],
+    [BlockType.FormBlock]: [
+        {
+            fields: ['textContent'],
+            transformer: yfmTransformer,
+            parser: parseContentLayout,
+        },
+        {
+            fields: ['textContent'],
+            transformer: typografTransformer,
+            parser: parseContentLayoutTitle,
+        },
+    ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.49.1",
+  "version": "4.50.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/sub-blocks.d.ts

@@ -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;
@@ -123,10 +130,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/server/text-transform/config.js

@@ -331,4 +331,16 @@ exports.config = {
             parser: (0, common_1.createItemsParser)(['text']),
         },
     ],
+    [models_1.BlockType.FormBlock]: [
+        {
+            fields: ['textContent'],
+            transformer: common_1.yfmTransformer,
+            parser: parseContentLayout,
+        },
+        {
+            fields: ['textContent'],
+            transformer: common_1.typografTransformer,
+            parser: parseContentLayoutTitle,
+        },
+    ],
 };