@gravity-ui/page-constructor 5.18.1-alpha.2 → 5.18.1-alpha.3

package/build/esm/navigation/containers/Layout/Layout.js

@@ -4,6 +4,7 @@ import Navigation from '../../components/Navigation/Navigation';
 import './Layout.css';
 const b = block('layout');
 const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
-    navigation && (React.createElement(Navigation, { data: navigation.header, logo: navigation.logo, className: b('navigation') })),
+    navigation &&
+        (navigation.renderNavigation ? (navigation.renderNavigation()) : (React.createElement(Navigation, { data: navigation.header, logo: navigation.logo, className: b('navigation') }))),
     React.createElement("main", { className: b('content') }, children)));
 export default Layout;

package/build/esm/navigation/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/esm/navigation/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/esm/navigation/hooks/useActiveNavItem.d.ts

@@ -0,0 +1,26 @@
+import { NavigationItemModel } from '../../models';
+declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemModel[], rightItems?: NavigationItemModel[]) => {
+    activeItemId: string | undefined;
+    leftItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[];
+    rightItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[] | undefined;
+    onActiveItemChange: (id?: string) => void;
+};
+export default useActiveNavItem;

package/build/esm/navigation/hooks/useActiveNavItem.js

@@ -0,0 +1,13 @@
+import { useMemo, useState } from 'react';
+import { getNavigationItemWithIconSize } from '../utils';
+const useActiveNavItem = (iconSize, leftItems, rightItems) => {
+    const [activeItemId, setActiveItemId] = useState(undefined);
+    const getNavigationItem = getNavigationItemWithIconSize(iconSize);
+    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
+    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
+    const onActiveItemChange = (id) => {
+        setActiveItemId(id);
+    };
+    return { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange };
+};
+export default useActiveNavItem;

package/build/esm/navigation/hooks/useShowBorder.d.ts

@@ -0,0 +1,2 @@
+declare const useShowBorder: (withBorder: boolean, withBorderOnScroll: boolean) => boolean[];
+export default useShowBorder;

package/build/esm/navigation/hooks/useShowBorder.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { debounce } from 'lodash';
+const useShowBorder = (withBorder, withBorderOnScroll) => {
+    const [showBorder, setShowBorder] = useState(withBorder);
+    useEffect(() => {
+        if (!withBorderOnScroll)
+            return () => { };
+        const showBorderOnScroll = () => {
+            if (!withBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+        const scrollHandler = debounce(showBorderOnScroll, 20);
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => window.removeEventListener('scroll', scrollHandler);
+    });
+    return [showBorder];
+};
+export default useShowBorder;

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

@@ -1 +1,15 @@
+export * from './components/Navigation/Navigation';
+export * from './components/DesktopNavigation/DesktopNavigation';
+export * from './components/MobileNavigation/MobileNavigation';
+export * from './components/MobileMenuButton/MobileMenuButton';
+export * from './components/NavigationList/NavigationList';
+export * from './components/NavigationListItem/NavigationListItem';
+export * from './components/NavigationItem/';
+export * from './components/NavigationItem/NavigationItem';
+export * from './components/NavigationPopup/NavigationPopup';
+export * from './components/SocialIcon/SocialIcon';
+export * from './components/Logo/Logo';
+export * from './hooks';
+export * from './models';
+export * from './utils';
 export { default as Navigation } from './components/Standalone';

package/build/esm/navigation/index.js

@@ -1 +1,15 @@
+export * from './components/Navigation/Navigation';
+export * from './components/DesktopNavigation/DesktopNavigation';
+export * from './components/MobileNavigation/MobileNavigation';
+export * from './components/MobileMenuButton/MobileMenuButton';
+export * from './components/NavigationList/NavigationList';
+export * from './components/NavigationListItem/NavigationListItem';
+export * from './components/NavigationItem/';
+export * from './components/NavigationItem/NavigationItem';
+export * from './components/NavigationPopup/NavigationPopup';
+export * from './components/SocialIcon/SocialIcon';
+export * from './components/Logo/Logo';
+export * from './hooks';
+export * from './models';
+export * from './utils';
 export { default as Navigation } from './components/Standalone';

package/build/esm/navigation/models.d.ts

@@ -44,6 +44,7 @@ export interface DesktopNavigationProps extends MobileMenuButtonProps, ActiveIte
     logo: ThemedNavigationLogoData;
     leftItemsWithIconSize: NavigationItemModel[];
     rightItemsWithIconSize?: NavigationItemModel[];
+    customMobileHeaderItems?: NavigationItemModel[];
 }
 export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps {
     isOpened?: boolean;

package/build/esm/schema/constants.d.ts

@@ -796,6 +796,14 @@ export declare const cardSchemas: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 } & {
                     optionName: string;
@@ -1541,11 +1549,17 @@ export declare const cardSchemas: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
                 type: string;
             };
+            videoIframe: {
+                type: string;
+            };
             parallax: {
                 type: string;
             };
@@ -1579,7 +1593,8 @@ export declare const cardSchemas: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

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

@@ -203,6 +203,9 @@ export declare const VideoProps: {
         ariaLabel: {
             type: string;
         };
+        contain: {
+            type: string;
+        };
     };
 };
 export declare const ThemeProps: {
@@ -365,6 +368,9 @@ export declare const BackgroundProps: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         height: {
@@ -1129,11 +1135,17 @@ export declare const MediaProps: {
             ariaLabel: {
                 type: string;
             };
+            contain: {
+                type: string;
+            };
         };
     };
     youtube: {
         type: string;
     };
+    videoIframe: {
+        type: string;
+    };
     parallax: {
         type: string;
     };
@@ -1245,7 +1257,8 @@ export declare const MediaProps: {
         })[];
     };
     ratio: {
-        type: string;
+        type: string[];
+        pattern: string;
     };
     iframe: {
         type: string;

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

@@ -160,6 +160,9 @@ export const VideoProps = {
         ariaLabel: {
             type: 'string',
         },
+        contain: {
+            type: 'boolean',
+        },
     },
 };
 export const ThemeProps = {
@@ -522,6 +525,9 @@ export const MediaProps = {
     youtube: {
         type: 'string',
     },
+    videoIframe: {
+        type: 'string',
+    },
     parallax: {
         type: 'boolean',
     },
@@ -539,7 +545,8 @@ export const MediaProps = {
         anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
     },
     ratio: {
-        type: 'number',
+        type: ['number', 'string'],
+        pattern: '^auto$',
     },
     iframe: Object.assign({}, IframeProps),
     margins: {

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

@@ -45,6 +45,14 @@ export declare const BackgroundCard: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 } & {
                     optionName: string;

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

@@ -5,7 +5,7 @@ import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = 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) {
@@ -18,8 +18,8 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         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: buttonTheme, size: "xl", text: text, url: url, target: target }))),
+                url && (React.createElement(RouterLink, { href: url },
+                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text !== null && text !== void 0 ? 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/Content/Content.css

@@ -148,12 +148,12 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__title a:hover {
   color: var(--g-color-text-dark-secondary);
 }
-.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__links),
 .pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__buttons),
-.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__links),
 .pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__buttons),
-.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__links),
 .pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__buttons),
-.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__link) {
+.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__links) {
   margin-bottom: auto;
 }

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

@@ -234,16 +234,18 @@ unpredictable css rules order in build */
 }
 .pc-hubspot-form .hs-richtext p {
   color: var(--g-color-text-primary);
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
-  font-weight: var(--g-text-body-font-weight);
   margin: 20px 0;
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
-  font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
 }
 .pc-hubspot-form .legal-consent-container {
@@ -274,9 +276,10 @@ unpredictable css rules order in build */
   order: 4;
 }
 .pc-hubspot-form .hs-error-msg {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
-  font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
   display: block;
 }
@@ -333,9 +336,10 @@ unpredictable css rules order in build */
   border: 1px solid var(--g-color-line-generic);
 }
 .pc-hubspot-form .hs_recaptcha div {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
-  font-weight: var(--g-text-body-font-weight);
 }
 .pc-hubspot-form_mobile .hs-richtext,
 .pc-hubspot-form_mobile .hs-form-field,

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

@@ -1,4 +1,4 @@
-.pc-image-card_border_shadow {
+a.pc-image-card_border_shadow, .pc-image-card_border_shadow {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
@@ -58,4 +58,37 @@ unpredictable css rules order in build */
 }
 .pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
   padding-bottom: 24px;
+}
+
+a.pc-image-card {
+  color: inherit;
+  text-decoration: none;
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+a.pc-image-card:hover, a.pc-image-card:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+a.pc-image-card_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+a.pc-image-card_border_line, a.pc-image-card_border_none {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_line:hover, a.pc-image-card_border_none:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_shadow:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow:hover {
+  background-color: var(--pc-color-base-float-hover);
 }

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

@@ -22,7 +22,7 @@ const ImageCard = (props) => {
             React.createElement(Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
         hasContent && (React.createElement("div", { className: b('content') },
             React.createElement(Content, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: CONTENT_COL_SIZES, controlPosition: areControlsInFooter ? 'bottom' : 'default' })))));
-    return url ? (React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
+    return url ? (React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, style: { backgroundColor }, extraProps: {
             draggable: false,
             onDragStart: (e) => e.preventDefault(),
         } }, cardContent)) : (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));

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

@@ -157,11 +157,17 @@ export declare const LayoutItem: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
                 type: string;
             };
+            videoIframe: {
+                type: string;
+            };
             parallax: {
                 type: string;
             };
@@ -273,7 +279,8 @@ export declare const LayoutItem: {
                 })[];
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

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

@@ -14,4 +14,4 @@ export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['lin
     tabIndex?: number | undefined;
 }[] | undefined;
 export declare const hasFullscreen: ({ dataLens, image }: MediaProps) => boolean;
-export declare const showFullscreenIcon: ({ youtube }: MediaProps) => boolean;
+export declare const showFullscreenIcon: ({ youtube, videoIframe }: MediaProps) => boolean;

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

@@ -3,4 +3,4 @@ export const hasFullscreen = ({ dataLens, image }) => {
     // datalens and slider media card don't support fullscreen mode
     return !(dataLens || Array.isArray(image));
 };
-export const showFullscreenIcon = ({ youtube }) => !youtube;
+export const showFullscreenIcon = ({ youtube, videoIframe }) => !(youtube || videoIframe);

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

@@ -240,11 +240,17 @@ export declare const MediaCardBlock: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
                 type: string;
             };
+            videoIframe: {
+                type: string;
+            };
             parallax: {
                 type: string;
             };
@@ -278,7 +284,8 @@ export declare const MediaCardBlock: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

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

@@ -49,7 +49,7 @@ export function typograf(text, lang = 'ru') {
         en: ['en-US', 'ru'],
     };
     const tp = new Typograf({
-        locale: localeByLang[lang],
+        locale: localeByLang[lang] || lang,
         htmlEntity: { type: 'name' },
     });
     enableRules(tp);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.18.1-alpha.2",
+  "version": "5.18.1-alpha.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -80,6 +80,7 @@
     "test:watch": "jest --watchAll",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
@@ -87,8 +88,8 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^3.0.0",
-    "@gravity-ui/dynamic-forms": "^4.0.0",
+    "@gravity-ui/components": "^3.8.0",
+    "@gravity-ui/dynamic-forms": "^4.11.0",
     "@gravity-ui/i18n": "^1.3.0",
     "@react-spring/web": "^9.7.3",
     "ajv": "^8.12.0",
@@ -125,11 +126,11 @@
     "@commitlint/config-conventional": "^17.1.0",
     "@diplodoc/transform": "^4.10.8",
     "@gravity-ui/eslint-config": "^2.2.0",
-    "@gravity-ui/icons": "^2.8.1",
+    "@gravity-ui/icons": "^2.10.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.2.0",
+    "@gravity-ui/uikit": "^6.23.1",
     "@playwright/experimental-ct-react": "^1.45.3",
     "@playwright/test": "^1.45.3",
     "@storybook/addon-actions": "8.0.5",
@@ -202,6 +203,8 @@
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.9.4",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-svgr": "^4.2.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-shell-plugin-next": "^2.3.1"

package/server/models/constructor-items/common.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
+import React, { CSSProperties, DetailedHTMLProps, HTMLProps, ImgHTMLAttributes, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps } from '../common';
@@ -96,8 +96,9 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageInfoProps extends Pick<HTMLProps<HTMLImageElement>, 'aria-describedby'> {
+export interface ImageInfoProps extends Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
     alt?: string;
+    fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
 }
 export interface ImageObjectProps extends ImageInfoProps {
@@ -126,6 +127,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
+    contain?: boolean;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
@@ -178,9 +180,12 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
-    ratio?: number;
+    ratio?: number | 'auto';
     previewImg?: string;
 }
+export interface MediaComponentVideoIframeProps {
+    videoIframe: string;
+}
 export interface MediaComponentYoutubeProps {
     youtube: string;
     previewImg?: string;
@@ -200,7 +205,7 @@ export interface MediaComponentIframeProps {
     iframe: IframeProps;
     margins?: boolean;
 }
-export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
+export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {

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

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/server/models/navigation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ThemeSupporting } from '../utils';
 import { ButtonProps, ImageProps } from './constructor-items';
 export declare enum NavigationItemType {
@@ -69,6 +70,12 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    /**
+     * Items for the navigation header on mobile devices.
+     * They are located to the right of the Logo and to the left of the MobileMenuButton.
+     * @type {NavigationItemModel[]}
+     */
+    customMobileHeaderItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
     withBorderOnScroll?: boolean;
@@ -90,4 +97,5 @@ export interface NavigationData {
     logo: ThemedNavigationLogoData;
     header: HeaderData;
     footer?: FooterData;
+    renderNavigation?: () => React.ReactNode;
 }

package/server/text-transform/utils.js

@@ -66,7 +66,7 @@ function typograf(text, lang = 'ru') {
         en: ['en-US', 'ru'],
     };
     const tp = new typograf_1.default({
-        locale: localeByLang[lang],
+        locale: localeByLang[lang] || lang,
         htmlEntity: { type: 'name' },
     });
     enableRules(tp);

package/styles/variables.scss

@@ -37,6 +37,7 @@ $animationDuration: 300ms;
 
 //colors
 $videoPlayButtonGrey: #eff2f8;
+$videoPlayerBg: #000;
 $secondary: var(--g-color-text-secondary);
 $lightSecondary: var(--g-color-text-light-secondary);