@gravity-ui/page-constructor 4.41.1-alpha.0 → 4.42.1

package/build/esm/components/ContentList/ContentList.css

@@ -1,8 +1,5 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-content-list_size_l {
-  margin-top: 24px;
-}
 .pc-content-list_size_l .pc-content-list__title {
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
@@ -15,19 +12,19 @@ unpredictable css rules order in build */
   margin-bottom: 1px;
   margin-right: 12px;
 }
-.pc-content-list_size_l .pc-content-list__icon_without_title {
+.pc-content-list_size_l .pc-content-list__item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.pc-content-list_size_l .pc-content-list__item_without-title:not(:last-child) {
+  margin-bottom: 12px;
+}
+.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__icon {
   width: 20px;
   height: 20px;
   margin-top: 0;
   margin-bottom: 0;
   margin-right: 8px;
 }
-.pc-content-list_size_l .pc-content-list__item:not(:last-child) {
-  margin-bottom: 16px;
-}
-.pc-content-list_size_s {
-  margin-top: 16px;
-}
 .pc-content-list_size_s .pc-content-list__title {
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);
@@ -40,12 +37,6 @@ unpredictable css rules order in build */
   margin-bottom: 2px;
   margin-right: 8px;
 }
-.pc-content-list_size_s .pc-content-list__icon_without_title {
-  width: 18px;
-  height: 18px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
 .pc-content-list_size_s .pc-content-list__text {
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
@@ -53,6 +44,15 @@ unpredictable css rules order in build */
 .pc-content-list_size_s .pc-content-list__item:not(:last-child) {
   margin-bottom: 12px;
 }
+.pc-content-list_size_s .pc-content-list__item_without-title:not(:last-child) {
+  margin-bottom: 8px;
+}
+.pc-content-list_size_s .pc-content-list__item_without-title .pc-content-list__icon {
+  width: 18px;
+  height: 18px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .pc-content-list__icon {
   display: block;
 }

package/build/esm/components/ContentList/ContentList.js

@@ -19,8 +19,8 @@ const ContentList = ({ list, size = 'l', qa }) => {
     const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
     return (React.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
-        return (React.createElement("div", { className: b('item'), key: uuidv4() },
-            React.createElement(ItemIcon, { icon: icon, className: b('icon', { without_title: !title }), qa: qaAttributes.image }),
+        return (React.createElement("div", { className: b('item', { 'without-title': !title }), key: uuidv4() },
+            React.createElement(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image }),
             React.createElement("div", null,
                 title &&
                     React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, React.createElement(YFMWrapper, { content: title, modifiers: { constructor: true } })),

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

@@ -29,6 +29,7 @@ export declare const subBlockMap: {
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
+    "price-card": (props: import("./models").PriceCardProps) => JSX.Element;
 };
 export declare const navItemMap: {
     button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;

package/build/esm/constructor-items.js

@@ -2,7 +2,7 @@ import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, Exten
 import { BlockType, NavigationItemType, SubBlockType } from './models';
 import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
 import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
-import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceDetailed, Quote, } from './sub-blocks';
+import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
@@ -34,6 +34,7 @@ export const subBlockMap = {
     [SubBlockType.BasicCard]: BasicCard,
     [SubBlockType.Content]: Content,
     [SubBlockType.Quote]: Quote,
+    [SubBlockType.PriceCard]: PriceCard,
 };
 export const navItemMap = {
     [NavigationItemType.Button]: NavigationButton,

package/build/esm/editor/components/CodeEditor/CodeEditor.css

@@ -4,17 +4,14 @@
   overflow: hidden;
 }
 .pc-code-editor_fullscreen {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   z-index: 1000;
   background: var(--g-color-base-background);
 }
-.pc-code-editor_fullscreen .pc-code-editor__header {
-  margin-top: var(--pc-editor-header-height);
-}
 .pc-code-editor__code {
   width: 100%;
   height: 100%;

package/build/esm/editor/components/CodeEditor/CodeEditor.d.ts

@@ -2,12 +2,12 @@ import { PageContent } from '../../../models';
 import { CodeEditorMessageProps } from '../../utils/validation';
 import './CodeEditor.css';
 interface CodeEditorProps {
-    content: PageContent;
+    code: string;
     fullscreenModeOn: boolean;
     validator: (code: string) => CodeEditorMessageProps;
     onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;
     onChange: (content: PageContent) => void;
     message?: CodeEditorMessageProps;
 }
-export declare const CodeEditor: ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }: CodeEditorProps) => JSX.Element;
+export declare const CodeEditor: ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }: CodeEditorProps) => JSX.Element;
 export {};

package/build/esm/editor/components/CodeEditor/CodeEditor.js

@@ -1,27 +1,30 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { ChevronsCollapseUpRight, ChevronsExpandUpRight } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
-import yaml from 'js-yaml';
+import debounce from 'lodash/debounce';
 import MonacoEditor from 'react-monaco-editor';
+import { Theme } from '../../../models';
 import { block } from '../../../utils';
+import { EditorContext } from '../../context';
 import { parseCode } from '../../utils/code';
 import { options } from './constants';
 import './CodeEditor.css';
 const b = block('code-editor');
-export const CodeEditor = ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }) => {
-    const value = useMemo(() => yaml.dump(content), [content]);
-    const [message, setMessage] = useState(() => validator(value));
-    const onChangeWithValidation = useCallback((code) => {
-        const validationResult = validator(code);
+export const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
+    const [message, setMessage] = useState(() => validator(code));
+    const { theme = Theme.Light } = useContext(EditorContext);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onChangeWithValidation = useCallback(debounce((newCode) => {
+        const validationResult = validator(newCode);
         setMessage(validationResult);
-        onChange(parseCode(code));
-    }, [onChange, validator]);
+        onChange(parseCode(newCode));
+    }, 200), [onChange, validator]);
     return (React.createElement("div", { className: b({ fullscreen: fullscreenModeOn }) },
         React.createElement("div", { className: b('header') },
             React.createElement(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn) },
                 React.createElement(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }))),
         React.createElement("div", { className: b('code') },
-            React.createElement(MonacoEditor, { key: String(fullscreenModeOn), value: value, language: "yaml", options: options, onChange: onChangeWithValidation, theme: "vs" })),
+            React.createElement(MonacoEditor, { key: String(fullscreenModeOn), value: code, language: "yaml", options: options, onChange: onChangeWithValidation, theme: theme === Theme.Dark ? 'vs-dark' : 'vs' })),
         React.createElement("div", { className: b('footer') }, message && (React.createElement("div", { className: b('message-container') },
             React.createElement("div", { className: b('message', { status: message.status }) }, message.text))))));
 };

package/build/esm/editor/containers/Editor/Editor.d.ts

@@ -1,2 +1,2 @@
 import { EditorProps } from '../../types';
-export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, ...rest }: EditorProps) => JSX.Element;
+export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => JSX.Element;

package/build/esm/editor/containers/Editor/Editor.js

@@ -12,13 +12,15 @@ import { useCodeValidator } from '../../hooks/useCodeValidator';
 import { useMainState } from '../../store/main';
 import { useSettingsState } from '../../store/settings';
 import { ViewModeItem } from '../../types';
+import { FormTab } from '../../types/index';
 import { addCustomDecorator, checkIsMobile, getBlockId } from '../../utils';
 import { Form } from '../Form/Form';
 export const Editor = (_a) => {
-    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
     const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useMainState(rest);
-    const { viewMode, theme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
+    const { viewMode, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
     const isEditingMode = viewMode === ViewModeItem.Edititng;
+    const isCodeOnlyMode = codeFullscreeModeOn && formTab === FormTab.Code && viewMode === ViewModeItem.Edititng;
     const transformedContent = useMemo(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
     const schema = useMemo(() => generateDefaultSchema(customSchema), [customSchema]);
     const codeValidator = useCodeValidator(schema);
@@ -49,19 +51,28 @@ export const Editor = (_a) => {
             content: transformedContent,
             custom: rest.custom,
         },
-        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme }),
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme: constructorTheme }),
         deviceEmulationSettings,
-    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme]);
+        theme: editorTheme,
+    }), [
+        providerProps,
+        rest.custom,
+        viewMode,
+        transformedContent,
+        deviceEmulationSettings,
+        constructorTheme,
+        editorTheme,
+    ]);
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
     return (React.createElement(EditorContext.Provider, { value: context },
-        React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
+        React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate, theme: constructorTheme, onThemeChange: onThemeUpdate },
             isEditingMode && (React.createElement(Layout.Left, null,
                 React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, activeTab: formTab, codeFullscreeModeOn: codeFullscreeModeOn, schema: schema, codeValidator: codeValidator, onActiveTabUpdate: onFormTabUpdate, onCodeFullscreeModeOnUpdate: onCodeFullscreeModeOnUpdate, onSelect: onSelect }))),
-            React.createElement(Layout.Right, null,
+            !isCodeOnlyMode && (React.createElement(Layout.Right, null,
                 React.createElement(ErrorBoundary, { key: errorBoundaryState },
-                    React.createElement(PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),
+                    React.createElement(PageConstructorProvider, Object.assign({}, providerProps, { theme: constructorTheme }),
                         React.createElement(PageConstructor, Object.assign({}, outgoingProps)))),
-                isEditingMode && React.createElement(AddBlock, { onAdd: onAdd })))));
+                isEditingMode && React.createElement(AddBlock, { onAdd: onAdd }))))));
 };

package/build/esm/editor/containers/Form/Form.js

@@ -7,6 +7,7 @@ import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
 import { PagePropsForm } from '../../components/PagePropsForm/PagePropsForm';
 import useFormSpec from '../../hooks/useFormSpec';
 import { FormTab } from '../../types';
+import { useCode } from './hooks';
 import './Form.css';
 const b = block('editor-form');
 const tabsItems = Object.values(FormTab).map((tab) => ({
@@ -15,6 +16,7 @@ const tabsItems = Object.values(FormTab).map((tab) => ({
 }));
 export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
     const _a = content || {}, { blocks } = _a, page = __rest(_a, ["blocks"]);
+    const code = useCode({ activeTab, content, codeFullscreeModeOn });
     const spec = useFormSpec(schema);
     const { blocks: blocksSpec, page: pageSpec } = spec || {};
     let form;
@@ -37,7 +39,7 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, schem
             break;
         }
         case FormTab.Code: {
-            form = (React.createElement(CodeEditor, { content: content, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
+            form = (React.createElement(CodeEditor, { code: code, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
             break;
         }
     }

package/build/esm/editor/containers/Form/hooks.d.ts

@@ -0,0 +1,8 @@
+import { FormProps } from './Form';
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+export declare function useCode({ activeTab, content, codeFullscreeModeOn, }: Pick<FormProps, 'activeTab' | 'content' | 'codeFullscreeModeOn'>): string;

package/build/esm/editor/containers/Form/hooks.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import yaml from 'js-yaml';
+import usePreviousValue from '../../hooks/usePreviousValue';
+import { FormTab } from '../../types';
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+export function useCode({ activeTab, content, codeFullscreeModeOn, }) {
+    var _a;
+    const [code, setCode] = useState('');
+    const prevTab = usePreviousValue(activeTab);
+    const prevContentLength = usePreviousValue((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
+    const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);
+    useEffect(() => {
+        var _a;
+        const switchedToCodeEditing = activeTab !== prevTab && activeTab === FormTab.Code;
+        const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
+        const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
+        if (blocksCountChanged || switchedToCodeEditing || codeModeSwitched) {
+            setCode(yaml.dump(content, { lineWidth: -1 }));
+        }
+    }, [
+        activeTab,
+        prevTab,
+        content,
+        prevContentLength,
+        codeFullscreeModeOn,
+        prevCodeFullscreeModeOn,
+    ]);
+    return code;
+}

package/build/esm/editor/context.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { PageConstructorProps, PageConstructorProviderProps } from '../containers/PageConstructor';
+import { Theme } from '../models/common';
 import { EditorProps } from './types';
 export interface EditorContextType {
     constructorProps?: PageConstructorProps;
     providerProps?: PageConstructorProviderProps;
     deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
+    theme?: Theme;
 }
 export declare const EditorContext: React.Context<Partial<EditorContextType>>;

package/build/esm/editor/types/index.d.ts

@@ -1,5 +1,6 @@
 import { PageConstructorProps, PageConstructorProviderProps } from '../../containers/PageConstructor';
 import { BlockDecorationProps, PageContent } from '../../models';
+import { Theme } from '../../models/common';
 import { SchemaCustomConfig } from '../../schema';
 import { EditBlockActions } from '../components/EditBlock/EditBlock';
 export type EditorBlockId = number | string;
@@ -17,6 +18,7 @@ export interface EditorProps extends Required<Pick<PageConstructorProps, 'conten
     transformContent?: ContentTransformer;
     customSchema?: SchemaCustomConfig;
     deviceEmulationSettings?: DeviceEmulationSettings;
+    theme?: Theme;
 }
 export interface EditBlockEditorProps {
     isActive?: boolean;

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -2,12 +2,13 @@ import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import omit from 'lodash/omit';
 import { BlockIdContext } from '../../../context/blockIdContext';
-import { NavigationItemType } from '../../../models';
+import { NavigationItemType, NavigationItemTypes } from '../../../models';
 import { block } from '../../../utils';
 import { useNavigationItemMap } from './hooks/useNavigationItemMap';
 import './NavigationItem.css';
 const b = block('navigation-item');
 const ANALYTICS_ID = 'navigation';
+const nonComplexNavigationItemTypes = NavigationItemTypes.filter((type) => type !== NavigationItemType.Dropdown);
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
     const { type = NavigationItemType.Link } = data;
@@ -15,11 +16,13 @@ const NavigationItem = (_a) => {
     const Component = navItemMap[type];
     const componentProps = useMemo(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);
-        if (type !== NavigationItemType.Dropdown) {
+        if (nonComplexNavigationItemTypes.includes(type)) {
             return omit(componentProperties, 'hidePopup', 'isActive');
         }
-        return componentProperties;
-    }, [data, props, type]);
+        return NavigationItemTypes.includes(type)
+            ? componentProperties
+            : Object.assign(Object.assign({}, componentProperties), { menuLayout });
+    }, [data, props, type, menuLayout]);
     return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
         React.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
             React.createElement(Component, Object.assign({}, componentProps, { className: b('content', { type }) })))));

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

@@ -11,7 +11,7 @@ export declare const playIconThemes: string[];
 export declare const videoControlsTypes: MediaVideoControlsType[];
 export declare const fileLinkTypes: string[];
 export declare const dividerEnum: {
-    enum: (string | number)[];
+    enum: string[];
 };
 export declare const sizeNumber: {
     type: string;
@@ -835,6 +835,18 @@ export declare const BlockBaseProps: {
     context: {
         type: string;
     };
+    indent: {
+        type: string;
+        additionalProperties: boolean;
+        properties: {
+            top: {
+                enum: string[];
+            };
+            bottom: {
+                enum: string[];
+            };
+        };
+    };
     type: {};
     when: {
         type: string;

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

@@ -13,7 +13,7 @@ export const playIconTypes = ['default', 'text'];
 export const playIconThemes = ['blue', 'grey'];
 export const videoControlsTypes = [MediaVideoControlsType.Default, MediaVideoControlsType.Custom];
 export const fileLinkTypes = ['vertical', 'horizontal'];
-export const dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
+export const dividerEnum = { enum: ['0', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
 export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
 export const contentThemes = ['default', 'dark', 'light'];
 export const quoteTypes = Object.values(QuoteType);
@@ -453,6 +453,13 @@ export const BlockBaseProps = Object.assign(Object.assign({}, BaseProps), { anch
         type: 'boolean',
     }, context: {
         type: 'string',
+    }, indent: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            top: dividerEnum,
+            bottom: dividerEnum,
+        },
     } });
 export const TitleProps = {
     type: 'object',

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

@@ -73,6 +73,9 @@ unpredictable css rules order in build */
 .pc-content_size_s .pc-content__button {
   margin-top: 8px;
 }
+.pc-content_size_s .pc-content__list {
+  margin-top: 16px;
+}
 .pc-content_size_l .pc-content__text,
 .pc-content_size_l .pc-content__notice {
   margin-top: 12px;
@@ -91,6 +94,9 @@ unpredictable css rules order in build */
 .pc-content_size_l .pc-content__button {
   margin-top: 12px;
 }
+.pc-content_size_l .pc-content__list {
+  margin-top: 24px;
+}
 .pc-content_theme_dark {
   --g-color-line-focus: var(--pc-color-line-focus-dark);
 }

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

@@ -46,7 +46,8 @@ const Content = (props) => {
         title && (React.createElement(Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })),
         text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),
-        (list === null || list === void 0 ? void 0 : list.length) ? React.createElement(ContentList, { list: list, size: size, qa: qaAttributes.list }) : null,
+        (list === null || list === void 0 ? void 0 : list.length) ? (React.createElement("div", { className: b('list') },
+            React.createElement(ContentList, { list: list, size: size, qa: qaAttributes.list }))) : null,
         additionalInfo && (React.createElement("div", { className: b('notice') },
             React.createElement(YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,

package/build/esm/sub-blocks/Divider/schema.d.ts

@@ -6,7 +6,7 @@ export declare const Divider: {
                 type: string;
             };
             size: {
-                enum: (string | number)[];
+                enum: string[];
             };
             type: {};
             when: {

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

@@ -3,6 +3,10 @@ unpredictable css rules order in build */
 .pc-price-card {
   position: relative;
 }
+.pc-price-card.pc-price-card {
+  min-height: auto;
+}
+
 .pc-price-card__background {
   position: absolute;
   top: 0;
@@ -59,7 +63,8 @@ unpredictable css rules order in build */
   margin-left: 4px;
 }
 .pc-price-card__price-details {
-  margin-bottom: 12px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-price-card__main {
   flex: 1;
@@ -69,12 +74,28 @@ unpredictable css rules order in build */
   position: relative;
 }
 .pc-price-card__info {
-  margin-bottom: 24px;
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
+.pc-price-card__description:not(:last-child) {
+  margin-bottom: 12px;
+}
+.pc-price-card__links, .pc-price-card__buttons {
+  margin-top: 24px;
+}
 .pc-price-card__links > *:not(:last-child), .pc-price-card__buttons > *:not(:last-child) {
   margin-right: 16px;
+}
+.pc-price-card__link {
+  margin-top: 0;
+}
+@media (max-width: 769px) {
+  .pc-price-card__title, .pc-price-card__price {
+    margin-bottom: 16px;
+  }
+  .pc-price-card__links, .pc-price-card__buttons {
+    margin-top: 16px;
+  }
 }

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

@@ -19,13 +19,13 @@ const PriceCard = (props) => {
                                 "/ ",
                                 pricePeriod))),
                         priceDetails && (React.createElement("div", { className: b('price-details') }, priceDetails))),
-                    React.createElement("div", null, description),
+                    description && React.createElement("div", { className: b('description') }, description),
                     (list === null || list === void 0 ? void 0 : list.length) ? (React.createElement("div", { className: b('list') },
                         React.createElement(ContentList, { list: list.map((item) => ({
                                 icon: Check,
                                 text: item,
-                            })), size: "s" }))) : null),
+                            })), size: "l" }))) : null),
                 buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((button) => (React.createElement(Button, Object.assign({ key: button.url }, button)))))),
-                links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ key: link.url, textSize: "m" }, link))))))))));
+                links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link'), key: link.url, textSize: "m" }, link))))))))));
 };
 export default PriceCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.41.1-alpha.0",
+  "version": "4.42.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {