@gravity-ui/page-constructor 5.28.5 → 5.28.7-alpha.0

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -11,6 +11,7 @@ const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrappe
 const constants_1 = require("../../constants");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const b = (0, utils_1.block)('PromoFeaturesBlock');
 const breakpointColumns = {
     [constants_1.BREAKPOINTS.lg]: 3,
@@ -28,6 +29,10 @@ const PromoFeaturesBlock = (props) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = (0, utils_1.getThemedValue)(media, globalTheme);
+            const allProps = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+                name: cardTitle,
+                description: text,
+            });
             return (react_1.default.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -36,7 +41,7 @@ const PromoFeaturesBlock = (props) => {
                     react_1.default.createElement("h3", { className: b('card-title') }, cardTitle),
                     react_1.default.createElement("div", { className: b('card-text') },
                         react_1.default.createElement(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }))),
-                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, themedMedia))));
+                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, allProps))));
         }))));
 };
 exports.default = PromoFeaturesBlock;

package/build/cjs/blocks/Questions/Questions.js

@@ -21,7 +21,7 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: models_1.FaqMicrodataValues.PageType },
+    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: models_1.FaqMicrodataValues.PageType, itemID: models_1.FaqMicrodataValues.PageId },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
                 react_1.default.createElement("div", { className: b('title') },

package/build/cjs/blocks/Questions/models.d.ts

@@ -1,5 +1,6 @@
 export declare const FaqMicrodataValues: {
     readonly PageType: "https://schema.org/FAQPage";
+    readonly PageId: "/faq";
     readonly QuestionType: "https://schema.org/Question";
     readonly QuestionProp: "mainEntity";
     readonly QuestionNameProp: "name";

package/build/cjs/blocks/Questions/models.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FaqMicrodataValues = void 0;
 exports.FaqMicrodataValues = {
     PageType: 'https://schema.org/FAQPage',
+    PageId: '/faq',
     QuestionType: 'https://schema.org/Question',
     QuestionProp: 'mainEntity',
     QuestionNameProp: 'name',

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

@@ -15,6 +15,7 @@ const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrappe
 const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const TabsTextContent_1 = tslib_1.__importDefault(require("./TabsTextContent/TabsTextContent"));
 const b = (0, utils_2.block)('tabs-block');
 const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
@@ -70,7 +71,10 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         }, className: b('col', { centered: centered }) },
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
             react_1.default.createElement("div", { ref: ref },
-                react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+                react_1.default.createElement(Media_1.default, Object.assign({}, (0, microdata_1.mergeVideoMicrodata)((0, utils_2.getThemedValue)(activeTabData.media, theme), {
+                    name: activeTabData.tabName,
+                    description: activeTabData.caption,
+                }), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId },

package/build/cjs/components/ContentList/ContentList.css

@@ -53,6 +53,30 @@ unpredictable css rules order in build */
   margin-top: 0;
   margin-bottom: 0;
 }
+.pc-content-list_theme_light .pc-content-list__item *,
+.pc-content-list_theme_light .pc-content-list__item .yfm,
+.pc-content-list_theme_light .pc-content-list__item .yfm * {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a {
+  color: var(--g-color-text-dark-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-dark-secondary);
+}
+.pc-content-list_theme_dark .pc-content-list__item *,
+.pc-content-list_theme_dark .pc-content-list__item .yfm,
+.pc-content-list_theme_dark .pc-content-list__item .yfm * {
+  color: var(--g-color-text-light-primary);
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a {
+  color: var(--g-color-text-light-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-light-secondary);
+}
 .pc-content-list__icon {
   display: block;
 }

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

@@ -1,4 +1,4 @@
 import { ContentListProps } from '../../models';
 import { QAProps } from '../../models/common';
-declare const ContentList: ({ list, size, qa }: ContentListProps & QAProps) => JSX.Element;
+declare const ContentList: ({ list, size, qa, theme }: ContentListProps & QAProps) => JSX.Element;
 export default ContentList;

package/build/cjs/components/ContentList/ContentList.js

@@ -17,9 +17,9 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size = 'l', qa }) => {
+const ContentList = ({ list, size = 'l', qa, theme }) => {
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['image', 'title', 'text']);
-    return (react_1.default.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
+    return (react_1.default.createElement("div", { className: b({ size, theme }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
         return (react_1.default.createElement("div", { className: b('item', { 'without-title': !title }), key: (0, uuid_1.v4)() },
             react_1.default.createElement(ContentListItemIcon_1.default, { icon: icon, className: b('icon'), qa: qaAttributes.image }),

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Media = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const innerContext_1 = require("../../context/innerContext");
 const utils_1 = require("../../utils");
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
@@ -12,8 +13,9 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
+    const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
@@ -80,7 +82,14 @@ const Media = (props) => {
         autoplay,
         margins,
     ]);
-    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
+    const videoMicrodataScript = (0, react_1.useMemo)(() => {
+        var _a;
+        const json = JSON.stringify(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, videoMicrodata));
+        return video || youtube || videoIframe ? (react_1.default.createElement("script", { type: "application/ld+json" }, json)) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 exports.Media = Media;
 exports.default = exports.Media;

package/build/cjs/components/ReactPlayer/ReactPlayer.css

@@ -70,6 +70,9 @@ unpredictable css rules order in build */
 .pc-ReactPlayer_contain video {
   object-fit: contain;
 }
+.pc-ReactPlayer_auto-ratio video {
+  object-fit: cover;
+}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -235,6 +235,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             wrapper: !currentHeight,
             controls,
             contain,
+            'auto-ratio': autoRatio,
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
                 ? undefined

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,5 +1,5 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -10,6 +10,9 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    microdata?: {
+        contentUpdatedDate: string;
+    };
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -20,7 +20,7 @@ const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -37,8 +37,9 @@ const Constructor = (props) => {
             customization: {
                 decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
             },
+            microdata,
         },
-    }), [custom, shouldRenderBlock]);
+    }), [custom, shouldRenderBlock, microdata]);
     const theme = (0, theme_1.useTheme)();
     const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);

package/build/cjs/context/innerContext/InnerContext.d.ts

@@ -11,5 +11,8 @@ export interface InnerContextType {
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/cjs/context/innerContext/InnerContext.js

@@ -10,4 +10,5 @@ exports.InnerContext = react_1.default.createContext({
     navigationBlockTypes: [],
     itemMap: {},
     navItemMap: {},
+    microdata: {},
 });

package/build/cjs/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "offsets" | "orders" | "visible" | "alignSelf" | "justifyContent" | "reset"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -207,6 +207,14 @@ export interface MediaComponentIframeProps {
 }
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
+    videoMicrodata?: {
+        name?: string;
+        description?: string;
+        duration?: string;
+        uploadDate?: string;
+        contentUrl?: string;
+        thumbnailUrl?: string;
+    };
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;

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

@@ -87,9 +87,6 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,
-.pc-content_theme_dark .pc-content__list *,
-.pc-content_theme_dark .pc-content__list .yfm,
-.pc-content_theme_dark .pc-content__list .yfm *,
 .pc-content_theme_dark .pc-content__links a {
   color: var(--g-color-text-light-primary);
 }
@@ -104,13 +101,11 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__notice .yfm a:hover {
   color: var(--g-color-text-light-primary);
 }
-.pc-content_theme_dark .pc-content__text .yfm a,
-.pc-content_theme_dark .pc-content__list .yfm a {
+.pc-content_theme_dark .pc-content__text .yfm a {
   color: var(--g-color-text-light-primary);
   text-decoration: underline;
 }
-.pc-content_theme_dark .pc-content__text .yfm a:hover,
-.pc-content_theme_dark .pc-content__list .yfm a:hover {
+.pc-content_theme_dark .pc-content__text .yfm a:hover {
   color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__title a {
@@ -124,9 +119,6 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__title *,
 .pc-content_theme_light .pc-content__text .yfm,
 .pc-content_theme_light .pc-content__text .yfm *,
-.pc-content_theme_light .pc-content__list *,
-.pc-content_theme_light .pc-content__list .yfm,
-.pc-content_theme_light .pc-content__list .yfm *,
 .pc-content_theme_light .pc-content__links a {
   color: var(--g-color-text-dark-primary);
 }
@@ -141,13 +133,11 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__notice .yfm a:hover {
   color: var(--g-color-text-dark-primary);
 }
-.pc-content_theme_light .pc-content__text .yfm a,
-.pc-content_theme_light .pc-content__list .yfm a {
+.pc-content_theme_light .pc-content__text .yfm a {
   color: var(--g-color-text-dark-primary);
   text-decoration: underline;
 }
-.pc-content_theme_light .pc-content__text .yfm a:hover,
-.pc-content_theme_light .pc-content__list .yfm a:hover {
+.pc-content_theme_light .pc-content__text .yfm a:hover {
   color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__title a {

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

@@ -31,7 +31,7 @@ const Content = (props) => {
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),
         (list === null || list === void 0 ? void 0 : list.length) ? (react_1.default.createElement("div", { className: b('list') },
-            react_1.default.createElement(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list }))) : null,
+            react_1.default.createElement(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list, theme: theme }))) : null,
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
             react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,

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

@@ -6,6 +6,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('layout-item');
@@ -23,8 +24,14 @@ const LayoutItem = (_a) => {
         }
         const themedMedia = (0, utils_1.getThemedValue)(media, theme);
         return fullscreen && (0, utils_2.hasFullscreen)(themedMedia) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(themedMedia) }, (_a = {}) => {
+            var _b;
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
-            return (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+                name: typeof content.title === 'string'
+                    ? content.title
+                    : (_b = content.title) === null || _b === void 0 ? void 0 : _b.text,
+                description: content.text,
+            }), fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
         })) : (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (react_1.default.createElement("div", { className: b(null, className) },

package/build/cjs/utils/microdata.d.ts

@@ -0,0 +1,2 @@
+import { MediaProps } from '../models';
+export declare const mergeVideoMicrodata: (values?: MediaProps, newValues?: MediaProps['videoMicrodata']) => MediaProps;

package/build/cjs/utils/microdata.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeVideoMicrodata = void 0;
+const mergeVideoMicrodata = (values = {}, newValues = {}) => (Object.assign(Object.assign({}, values), { videoMicrodata: Object.assign(Object.assign({}, newValues), (values.videoMicrodata || {})) }));
+exports.mergeVideoMicrodata = mergeVideoMicrodata;

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -8,6 +8,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { BREAKPOINTS } from '../../constants';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata } from '../../utils/microdata';
 import './PromoFeaturesBlock.css';
 const b = block('PromoFeaturesBlock');
 const breakpointColumns = {
@@ -26,6 +27,10 @@ const PromoFeaturesBlock = (props) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = getThemedValue(media, globalTheme);
+            const allProps = mergeVideoMicrodata(themedMedia, {
+                name: cardTitle,
+                description: text,
+            });
             return (React.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -34,7 +39,7 @@ const PromoFeaturesBlock = (props) => {
                     React.createElement("h3", { className: b('card-title') }, cardTitle),
                     React.createElement("div", { className: b('card-text') },
                         React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
-                media && React.createElement(Media, Object.assign({ className: b('card-media') }, themedMedia))));
+                media && React.createElement(Media, Object.assign({ className: b('card-media') }, allProps))));
         }))));
 };
 export default PromoFeaturesBlock;

package/build/esm/blocks/Questions/Questions.js

@@ -19,7 +19,7 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
+    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType, itemID: FaqMicrodataValues.PageId },
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },

package/build/esm/blocks/Questions/models.d.ts

@@ -1,5 +1,6 @@
 export declare const FaqMicrodataValues: {
     readonly PageType: "https://schema.org/FAQPage";
+    readonly PageId: "/faq";
     readonly QuestionType: "https://schema.org/Question";
     readonly QuestionProp: "mainEntity";
     readonly QuestionNameProp: "name";

package/build/esm/blocks/Questions/models.js

@@ -1,5 +1,6 @@
 export const FaqMicrodataValues = {
     PageType: 'https://schema.org/FAQPage',
+    PageId: '/faq',
     QuestionType: 'https://schema.org/Question',
     QuestionProp: 'mainEntity',
     QuestionNameProp: 'name',

package/build/esm/blocks/Tabs/Tabs.js

@@ -11,6 +11,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { useTheme } from '../../context/theme';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata } from '../../utils/microdata';
 import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
 const b = block('tabs-block');
@@ -67,7 +68,10 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         }, className: b('col', { centered: centered }) },
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
             React.createElement("div", { ref: ref },
-                React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+                React.createElement(Media, Object.assign({}, mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), {
+                    name: activeTabData.tabName,
+                    description: activeTabData.caption,
+                }), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId },

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

@@ -53,6 +53,30 @@ unpredictable css rules order in build */
   margin-top: 0;
   margin-bottom: 0;
 }
+.pc-content-list_theme_light .pc-content-list__item *,
+.pc-content-list_theme_light .pc-content-list__item .yfm,
+.pc-content-list_theme_light .pc-content-list__item .yfm * {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a {
+  color: var(--g-color-text-dark-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-dark-secondary);
+}
+.pc-content-list_theme_dark .pc-content-list__item *,
+.pc-content-list_theme_dark .pc-content-list__item .yfm,
+.pc-content-list_theme_dark .pc-content-list__item .yfm * {
+  color: var(--g-color-text-light-primary);
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a {
+  color: var(--g-color-text-light-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-light-secondary);
+}
 .pc-content-list__icon {
   display: block;
 }

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

@@ -1,5 +1,5 @@
 import { ContentListProps } from '../../models';
 import { QAProps } from '../../models/common';
 import './ContentList.css';
-declare const ContentList: ({ list, size, qa }: ContentListProps & QAProps) => JSX.Element;
+declare const ContentList: ({ list, size, qa, theme }: ContentListProps & QAProps) => JSX.Element;
 export default ContentList;

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

@@ -15,9 +15,9 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size = 'l', qa }) => {
+const ContentList = ({ list, size = 'l', qa, theme }) => {
     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) => {
+    return (React.createElement("div", { className: b({ size, theme }), "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', { 'without-title': !title }), key: uuidv4() },
             React.createElement(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image }),

package/build/esm/components/Media/Media.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
+import { InnerContext } from '../../context/innerContext';
 import { block, getQaAttrubutes } from '../../utils';
 import IframeVideoBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
@@ -9,8 +10,9 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
+    const { microdata } = useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
@@ -77,6 +79,13 @@ export const Media = (props) => {
         autoplay,
         margins,
     ]);
-    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
+    const videoMicrodataScript = useMemo(() => {
+        var _a;
+        const json = JSON.stringify(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, videoMicrodata));
+        return video || youtube || videoIframe ? (React.createElement("script", { type: "application/ld+json" }, json)) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 export default Media;

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -70,6 +70,9 @@ unpredictable css rules order in build */
 .pc-ReactPlayer_contain video {
   object-fit: contain;
 }
+.pc-ReactPlayer_auto-ratio video {
+  object-fit: cover;
+}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -232,6 +232,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             wrapper: !currentHeight,
             controls,
             contain,
+            'auto-ratio': autoRatio,
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
         React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
                 ? undefined

package/build/esm/components/Title/TitleItem.d.ts

@@ -1,6 +1,6 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
 import './TitleItem.css';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -11,6 +11,9 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    microdata?: {
+        contentUpdatedDate: string;
+    };
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -18,7 +18,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
     const { context } = useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -35,8 +35,9 @@ export const Constructor = (props) => {
             customization: {
                 decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
             },
+            microdata,
         },
-    }), [custom, shouldRenderBlock]);
+    }), [custom, shouldRenderBlock, microdata]);
     const theme = useTheme();
     const header = getHeaderBlock(blocks, context.headerBlockTypes);
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);

package/build/esm/context/innerContext/InnerContext.d.ts

@@ -11,5 +11,8 @@ export interface InnerContextType {
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/esm/context/innerContext/InnerContext.js

@@ -6,4 +6,5 @@ export const InnerContext = React.createContext({
     navigationBlockTypes: [],
     itemMap: {},
     navItemMap: {},
+    microdata: {},
 });

package/build/esm/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "offsets" | "orders" | "visible" | "alignSelf" | "justifyContent" | "reset"> & React.RefAttributes<HTMLDivElement>>;