@gravity-ui/page-constructor 4.28.0 → 4.29.0

package/build/cjs/blocks/Header/Header.css

@@ -20,6 +20,9 @@ unpredictable css rules order in build */
   position: relative;
   height: 100%;
 }
+.pc-header-block__content_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);

package/build/cjs/blocks/Share/Share.js

@@ -31,7 +31,11 @@ const Share = ({ items, title }) => {
             const url = (0, utils_1.getAbsolutePath)(hostname, pathname);
             const socialUrl = (0, utils_1.getShareLink)(url, type);
             const icon = icons[type];
-            return (react_1.default.createElement(uikit_1.Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            const urlTitle = (0, i18n_1.default)(`${type}-title`);
+            const buttonLabel = (0, i18n_1.default)(`${type}-label`);
+            return (react_1.default.createElement(uikit_1.Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick, title: urlTitle, extraProps: {
+                    'aria-label': buttonLabel,
+                } }, icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 exports.default = Share;

package/build/cjs/blocks/Share/i18n/en.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Share"
+  "constructor-share": "Share",
+  "facebook-title": "Opens in a new tab",
+  "twitter-title": "Opens in a new tab",
+  "linkedin-title": "Opens in a new tab",
+  "vk-title": "Opens in a new tab",
+  "telegram-title": "Opens in a new tab",
+  "facebook-label": "Facebook logo",
+  "twitter-label": "Twitter logo",
+  "linkedin-label": "LinkedIn logo",
+  "vk-label": "VK logo",
+  "telegram-label": "Telegram logo"
 }

package/build/cjs/blocks/Share/i18n/ru.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Поделиться"
+  "constructor-share": "Поделиться",
+  "facebook-title": "Откроется в новой вкладке",
+  "twitter-title": "Откроется в новой вкладке",
+  "linkedin-title": "Откроется в новой вкладке",
+  "vk-title": "Откроется в новой вкладке",
+  "telegram-title": "Откроется в новой вкладке",
+  "facebook-label": "Facebook лого",
+  "twitter-label": "Twitter лого",
+  "linkedin-label": "LinkedIn лого",
+  "vk-label": "VK лого",
+  "telegram-label": "Telegram лого"
 }

package/build/cjs/components/Author/Author.js

@@ -4,14 +4,20 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
+const utils_2 = require("../Media/Image/utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('author');
 const Author = (props) => {
     const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
+    const isAvatarJSX = react_1.default.isValidElement(avatar);
+    let avatarProps = {};
+    if (!isAvatarJSX && avatar) {
+        avatarProps = (0, utils_2.getMediaImage)(avatar);
+    }
     return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": qa },
-        avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, typeof avatar === 'string' ? react_1.default.createElement(index_1.Image, { src: avatar }) : avatar)),
+        avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : react_1.default.createElement(index_1.Image, Object.assign({}, avatarProps)))),
         react_1.default.createElement("div", { className: b('label') },
             react_1.default.createElement("div", { className: b('name') }, name),
             description && react_1.default.createElement("div", { className: b('description') }, description))));

package/build/cjs/components/Author/schema.d.ts

@@ -17,8 +17,18 @@ export declare const author: {
                         contentType: string;
                     };
                     avatar: {
-                        type: string;
-                        pattern: string;
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                            optionName: string;
+                        })[];
                     };
                     description: {
                         type: string;

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

@@ -11,6 +11,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     qa?: string;
+    extraProps?: React.HTMLAttributes<HTMLElement>;
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/cjs/components/CardBase/CardBase.js

@@ -15,7 +15,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
@@ -54,10 +54,7 @@ const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
-        react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: {
-                draggable: false,
-                onDragStart: (e) => e.preventDefault(),
-            }, qa: qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: Object.assign({ draggable: false, onDragStart: (e) => e.preventDefault() }, extraProps), qa: qa }, cardContent))) : (react_1.default.createElement("div", Object.assign({ className: fullClassName, "data-qa": qa }, extraProps), cardContent));
 };
 exports.Layout = Layout;
 exports.Layout.Header = Header;

package/build/cjs/components/Image/Image.js

@@ -7,7 +7,6 @@ const projectSettingsContext_1 = require("../../context/projectSettingsContext")
 const utils_1 = require("../../utils");
 const imageCompress_1 = require("../../utils/imageCompress");
 const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase"));
-const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
@@ -16,7 +15,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (react
     react_1.default.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src: imageSrc, alt = (0, i18n_1.default)('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
     const src = imageSrc || desktop;
     if (!src) {

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

@@ -32,7 +32,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        return (react_1.default.createElement(ReactPlayer_1.default, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
     }, [
         video,
         height,

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

@@ -11,5 +11,6 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     ratio?: number;
     children?: React.ReactNode;
 }
-export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
+type ReactPlayerBlockRefType = ReactPlayerBlockHandler | undefined;
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockRefType>>;
 export default ReactPlayerBlock;

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

@@ -48,9 +48,19 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ReactPlayerControls);
-    (0, react_1.useImperativeHandle)(originRef, () => ({
-        pause: () => setIsPlaying(false),
-    }));
+    (0, react_1.useImperativeHandle)(originRef, () => {
+        if (!playerRef) {
+            return;
+        }
+        const videoInstance = playerRef.getInternalPlayer();
+        const { play, pause, addEventListener } = videoInstance;
+        // eslint-disable-next-line consistent-return
+        return {
+            play: play.bind(videoInstance),
+            pause: pause.bind(videoInstance),
+            addEventListener: addEventListener.bind(videoInstance),
+        };
+    }, [playerRef]);
     (0, react_1.useEffect)(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);

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

@@ -1,4 +1,3 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler {
-    pause: () => void;
+export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
 }

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

@@ -251,7 +251,7 @@ export interface AuthorItem {
     firstName: string;
     secondName: string;
     description?: string;
-    avatar?: string | JSX.Element;
+    avatar?: ImageProps | JSX.Element;
 }
 export interface HeaderBreadCrumbsProps extends ClassNameProps {
     items: {

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

@@ -64,7 +64,7 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
 export interface QuoteProps extends Themable, CardBaseProps {
     text: string;
     image: ThemedImage;
-    logo: string;
+    logo: ImageProps;
     color?: string;
     url?: string;
     author?: AuthorItem;

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

@@ -144,8 +144,18 @@ export declare const cardSchemas: {
                 })[];
             };
             logo: {
-                type: string;
-                pattern: string;
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
             };
             color: {
                 type: string;
@@ -173,8 +183,18 @@ export declare const cardSchemas: {
                         contentType: string;
                     };
                     avatar: {
-                        type: string;
-                        pattern: string;
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                            optionName: string;
+                        })[];
                     };
                     description: {
                         type: string;

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

@@ -517,8 +517,18 @@ export declare const authorItem: {
             contentType: string;
         };
         avatar: {
-            type: string;
-            pattern: string;
+            oneOf: ({
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            } | {
+                type: string;
+                pattern: string;
+                optionName: string;
+            })[];
         };
         description: {
             type: string;

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

@@ -270,10 +270,7 @@ exports.authorItem = {
             type: 'string',
             contentType: 'text',
         },
-        avatar: {
-            type: 'string',
-            pattern: schema_1.imageUrlPattern,
-        },
+        avatar: schema_1.ImageProps,
         description: {
             type: 'string',
             contentType: 'yfm',

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

@@ -20,10 +20,11 @@ const Quote = (props) => {
     const renderFooter = Boolean(author || url) && (react_1.default.createElement("div", { className: b('author-wrapper') },
         author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line })),
         url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
+    const logoProps = (0, utils_1.getMediaImage)(logo);
     return (react_1.default.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         react_1.default.createElement("div", { key: text, className: b('content-wrapper') },
             react_1.default.createElement("div", null,
-                react_1.default.createElement(components_1.Image, { className: b('logo'), src: logo }),
+                react_1.default.createElement(components_1.Image, Object.assign({ className: b('logo') }, logoProps)),
                 react_1.default.createElement("div", { className: b('content') },
                     react_1.default.createElement("span", { className: b('text') },
                         react_1.default.createElement(components_1.HTML, null, text)))),

package/build/cjs/sub-blocks/Quote/schema.d.ts

@@ -32,8 +32,18 @@ export declare const Quote: {
                 })[];
             };
             logo: {
-                type: string;
-                pattern: string;
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
             };
             color: {
                 type: string;
@@ -61,8 +71,18 @@ export declare const Quote: {
                         contentType: string;
                     };
                     avatar: {
-                        type: string;
-                        pattern: string;
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                            optionName: string;
+                        })[];
                     };
                     description: {
                         type: string;

package/build/cjs/sub-blocks/Quote/schema.js

@@ -10,10 +10,7 @@ exports.Quote = {
         properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
                 type: 'string',
                 contentType: 'text',
-            }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: {
-                type: 'string',
-                pattern: schema_1.imageUrlPattern,
-            }, color: {
+            }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: schema_1.ImageProps, color: {
                 type: 'string',
             }, url: {
                 type: 'string',

package/build/cjs/text-transform/transformers.js

@@ -44,7 +44,9 @@ function transformBlock(lang, blocksConfig, block, plugins) {
         });
     }
     if ('children' in block && block.children) {
-        block.children = transformBlocks(block.children, lang, blocksConfig);
+        block.children = transformBlocks(block.children, lang, blocksConfig, {
+            plugins,
+        });
     }
     return block;
 }

package/build/esm/blocks/Header/Header.css

@@ -20,6 +20,9 @@ unpredictable css rules order in build */
   position: relative;
   height: 100%;
 }
+.pc-header-block__content_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);

package/build/esm/blocks/Share/Share.js

@@ -29,7 +29,11 @@ const Share = ({ items, title }) => {
             const url = getAbsolutePath(hostname, pathname);
             const socialUrl = getShareLink(url, type);
             const icon = icons[type];
-            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            const urlTitle = i18n(`${type}-title`);
+            const buttonLabel = i18n(`${type}-label`);
+            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick, title: urlTitle, extraProps: {
+                    'aria-label': buttonLabel,
+                } }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 export default Share;

package/build/esm/blocks/Share/i18n/en.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Share"
+  "constructor-share": "Share",
+  "facebook-title": "Opens in a new tab",
+  "twitter-title": "Opens in a new tab",
+  "linkedin-title": "Opens in a new tab",
+  "vk-title": "Opens in a new tab",
+  "telegram-title": "Opens in a new tab",
+  "facebook-label": "Facebook logo",
+  "twitter-label": "Twitter logo",
+  "linkedin-label": "LinkedIn logo",
+  "vk-label": "VK logo",
+  "telegram-label": "Telegram logo"
 }

package/build/esm/blocks/Share/i18n/ru.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Поделиться"
+  "constructor-share": "Поделиться",
+  "facebook-title": "Откроется в новой вкладке",
+  "twitter-title": "Откроется в новой вкладке",
+  "linkedin-title": "Откроется в новой вкладке",
+  "vk-title": "Откроется в новой вкладке",
+  "telegram-title": "Откроется в новой вкладке",
+  "facebook-label": "Facebook лого",
+  "twitter-label": "Twitter лого",
+  "linkedin-label": "LinkedIn лого",
+  "vk-label": "VK лого",
+  "telegram-label": "Telegram лого"
 }

package/build/esm/components/Author/Author.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AuthorType } from '../../models';
 import { block } from '../../utils';
+import { getMediaImage } from '../Media/Image/utils';
 import { Image } from '../index';
 import './Author.css';
 const b = block('author');
@@ -8,8 +9,13 @@ const Author = (props) => {
     const { author, className, authorContainerClassName, type = AuthorType.Column, qa } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
+    const isAvatarJSX = React.isValidElement(avatar);
+    let avatarProps = {};
+    if (!isAvatarJSX && avatar) {
+        avatarProps = getMediaImage(avatar);
+    }
     return (React.createElement("div", { className: b({ type }, className), "data-qa": qa },
-        avatar && (React.createElement("div", { className: b('avatar', authorContainerClassName) }, typeof avatar === 'string' ? React.createElement(Image, { src: avatar }) : avatar)),
+        avatar && (React.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : React.createElement(Image, Object.assign({}, avatarProps)))),
         React.createElement("div", { className: b('label') },
             React.createElement("div", { className: b('name') }, name),
             description && React.createElement("div", { className: b('description') }, description))));

package/build/esm/components/Author/schema.d.ts

@@ -17,8 +17,18 @@ export declare const author: {
                         contentType: string;
                     };
                     avatar: {
-                        type: string;
-                        pattern: string;
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                            optionName: string;
+                        })[];
                     };
                     description: {
                         type: string;

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

@@ -12,6 +12,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     qa?: string;
+    extraProps?: React.HTMLAttributes<HTMLElement>;
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -12,7 +12,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
@@ -51,10 +51,7 @@ export const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
-        React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: {
-                draggable: false,
-                onDragStart: (e) => e.preventDefault(),
-            }, qa: qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: Object.assign({ draggable: false, onDragStart: (e) => e.preventDefault() }, extraProps), qa: qa }, cardContent))) : (React.createElement("div", Object.assign({ className: fullClassName, "data-qa": qa }, extraProps), cardContent));
 };
 Layout.Header = Header;
 Layout.Content = Content;

package/build/esm/components/Image/Image.js

@@ -4,7 +4,6 @@ import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { getQaAttrubutes } from '../../utils';
 import { isCompressible } from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
-import i18n from './i18n';
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
@@ -13,7 +12,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React
     React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {

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

@@ -30,7 +30,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (React.createElement(ReactPlayerBlock, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
     }, [
         video,
         height,

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

@@ -12,5 +12,6 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     ratio?: number;
     children?: React.ReactNode;
 }
-export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
+type ReactPlayerBlockRefType = ReactPlayerBlockHandler | undefined;
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockRefType>>;
 export default ReactPlayerBlock;

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

@@ -45,9 +45,19 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
-    useImperativeHandle(originRef, () => ({
-        pause: () => setIsPlaying(false),
-    }));
+    useImperativeHandle(originRef, () => {
+        if (!playerRef) {
+            return;
+        }
+        const videoInstance = playerRef.getInternalPlayer();
+        const { play, pause, addEventListener } = videoInstance;
+        // eslint-disable-next-line consistent-return
+        return {
+            play: play.bind(videoInstance),
+            pause: pause.bind(videoInstance),
+            addEventListener: addEventListener.bind(videoInstance),
+        };
+    }, [playerRef]);
     useEffect(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);

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

@@ -1,4 +1,3 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler {
-    pause: () => void;
+export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
 }

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

@@ -251,7 +251,7 @@ export interface AuthorItem {
     firstName: string;
     secondName: string;
     description?: string;
-    avatar?: string | JSX.Element;
+    avatar?: ImageProps | JSX.Element;
 }
 export interface HeaderBreadCrumbsProps extends ClassNameProps {
     items: {

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

@@ -64,7 +64,7 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
 export interface QuoteProps extends Themable, CardBaseProps {
     text: string;
     image: ThemedImage;
-    logo: string;
+    logo: ImageProps;
     color?: string;
     url?: string;
     author?: AuthorItem;