@gravity-ui/page-constructor 6.6.1 → 7.0.0-alpha.1

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

@@ -1,19 +1,26 @@
 import * as React from 'react';
-import { QAProps } from "../../models/common.js";
-export interface HTMLProps {
-    children?: string;
+import { ClassNameProps, QAProps, TagName } from "../../models/common.js";
+export interface HTMLExtraProps {
+    tagName?: TagName;
+    contentPosition?: 'start' | 'end';
+    contentClassName?: string;
+    onlyContent?: boolean;
+}
+export interface HTMLProps extends HTMLExtraProps, React.PropsWithChildren, QAProps, ClassNameProps {
+    content?: string;
     block?: boolean;
-    className?: string;
     itemProp?: string;
     id?: string;
 }
-declare const HTML: ({ children, block, className, itemProp, id, qa, }: React.PropsWithChildren<HTMLProps & QAProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ content, children, block, className, contentClassName, qa, contentPosition, tagName, onlyContent, ...rest }: HTMLProps) => React.DOMElement<{
+    itemProp?: string;
+    id?: string;
     dangerouslySetInnerHTML: {
-        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & Iterable<React.ReactNode>) | (string & React.ReactPortal);
+        __html: string;
     };
     className: string | undefined;
-    itemProp: string | undefined;
-    id: string | undefined;
     'data-qa': string | undefined;
+}, Element> | React.DetailedReactHTMLElement<{
+    className: string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/esm/components/HTML/HTML.js

@@ -1,16 +1,25 @@
 import * as React from 'react';
-import { hasBlockTag } from "../../utils/index.js";
-const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
-    if (!children) {
-        return null;
+import { selectTagName } from "../../utils/index.js";
+const HTML = ({ content, children, block = false, className, contentClassName, qa, contentPosition = 'start', tagName = 'span', onlyContent = false, ...rest }) => {
+    const renderedContent = React.useMemo(() => {
+        return content
+            ? React.createElement(selectTagName({ content, block, tagName, children }), {
+                dangerouslySetInnerHTML: { __html: content },
+                className: contentClassName,
+                'data-qa': qa,
+                ...rest,
+            })
+            : null;
+    }, [block, children, content, contentClassName, qa, rest, tagName]);
+    if (onlyContent) {
+        return renderedContent;
     }
-    return React.createElement(block || hasBlockTag(children) ? 'div' : 'span', {
-        dangerouslySetInnerHTML: { __html: children },
-        className,
-        itemProp,
-        id,
-        'data-qa': qa,
-    });
+    if (children) {
+        return React.createElement(tagName, {
+            className,
+        }, contentPosition === 'start' ? renderedContent : null, children, contentPosition === 'end' ? renderedContent : null);
+    }
+    return renderedContent;
 };
 export default HTML;
 //# sourceMappingURL=HTML.js.map

package/build/esm/components/HTML/HTML.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.js","sourceRoot":"../../../../src","sources":["components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,WAAW,EAAC,6BAAoB;AAUxC,MAAM,IAAI,GAAG,CAAC,EACV,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,SAAS,EACT,QAAQ,EACR,EAAE,EACF,EAAE,GACyC,EAAE,EAAE;IAC/C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE;QACxE,uBAAuB,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;QAC3C,SAAS;QACT,QAAQ;QACR,EAAE;QACF,SAAS,EAAE,EAAE;KAChB,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {QAProps} from '../../models/common';\nimport {hasBlockTag} from '../../utils';\n\nexport interface HTMLProps {\n    children?: string;\n    block?: boolean;\n    className?: string;\n    itemProp?: string;\n    id?: string;\n}\n\nconst HTML = ({\n    children,\n    block = false,\n    className,\n    itemProp,\n    id,\n    qa,\n}: React.PropsWithChildren<HTMLProps & QAProps>) => {\n    if (!children) {\n        return null;\n    }\n\n    return React.createElement(block || hasBlockTag(children) ? 'div' : 'span', {\n        dangerouslySetInnerHTML: {__html: children},\n        className,\n        itemProp,\n        id,\n        'data-qa': qa,\n    });\n};\n\nexport default HTML;\n"]}
+{"version":3,"file":"HTML.js","sourceRoot":"../../../../src","sources":["components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,6BAAoB;AAmB1C,MAAM,IAAI,GAAG,CAAC,EACV,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,SAAS,EACT,gBAAgB,EAChB,EAAE,EACF,eAAe,GAAG,OAAO,EACzB,OAAO,GAAG,MAAM,EAChB,WAAW,GAAG,KAAK,EACnB,GAAG,IAAI,EACC,EAAE,EAAE;IACZ,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,OAAO;YACV,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAC,CAAC,EAAE;gBACpE,uBAAuB,EAAE,EAAC,MAAM,EAAE,OAAO,EAAC;gBAC1C,SAAS,EAAE,gBAAgB;gBAC3B,SAAS,EAAE,EAAE;gBACb,GAAG,IAAI;aACV,CAAC;YACJ,CAAC,CAAC,IAAI,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpE,IAAI,WAAW,EAAE,CAAC;QACd,OAAO,eAAe,CAAC;IAC3B,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,KAAK,CAAC,aAAa,CACtB,OAAO,EACP;YACI,SAAS;SACZ,EACD,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,EACpD,QAAQ,EACR,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CACrD,CAAC;IACN,CAAC;IAED,OAAO,eAAe,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ClassNameProps, QAProps, TagName} from '../../models/common';\nimport {selectTagName} from '../../utils';\n\nexport interface HTMLExtraProps {\n    tagName?: TagName;\n    contentPosition?: 'start' | 'end';\n    contentClassName?: string;\n    onlyContent?: boolean;\n}\nexport interface HTMLProps\n    extends HTMLExtraProps,\n        React.PropsWithChildren,\n        QAProps,\n        ClassNameProps {\n    content?: string;\n    block?: boolean;\n    itemProp?: string;\n    id?: string;\n}\n\nconst HTML = ({\n    content,\n    children,\n    block = false,\n    className,\n    contentClassName,\n    qa,\n    contentPosition = 'start',\n    tagName = 'span',\n    onlyContent = false,\n    ...rest\n}: HTMLProps) => {\n    const renderedContent = React.useMemo(() => {\n        return content\n            ? React.createElement(selectTagName({content, block, tagName, children}), {\n                  dangerouslySetInnerHTML: {__html: content},\n                  className: contentClassName,\n                  'data-qa': qa,\n                  ...rest,\n              })\n            : null;\n    }, [block, children, content, contentClassName, qa, rest, tagName]);\n\n    if (onlyContent) {\n        return renderedContent;\n    }\n\n    if (children) {\n        return React.createElement(\n            tagName,\n            {\n                className,\n            },\n            contentPosition === 'start' ? renderedContent : null,\n            children,\n            contentPosition === 'end' ? renderedContent : null,\n        );\n    }\n\n    return renderedContent;\n};\n\nexport default HTML;\n"]}

package/build/esm/components/Media/Image/Image.d.ts

@@ -4,6 +4,7 @@ export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
     fullscreen?: boolean;
+    fullscreenClassName?: string;
     onLoad?: () => void;
 }
 interface InnerImageProps {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { animated, config, useSpring } from '@react-spring/web';
 import debounce from "lodash/debounce.js";
-import SliderBlock from "../../../blocks/Slider/Slider.js";
+import { SliderBlock } from "../../../blocks/index.js";
 import { SliderType } from "../../../models/index.js";
 import { block, getQaAttrubutes } from "../../../utils/index.js";
 import BackgroundImage from "../../BackgroundImage/BackgroundImage.js";
@@ -13,7 +13,7 @@ import './Image.css';
 const b = block('media-component-image');
 export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
+    const { parallax, height, imageClassName, fullscreenClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
     const image = Array.isArray(props.image) && disableImageSliderForArrayInput
         ? props.image[0]
         : props.image;
@@ -39,9 +39,9 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const renderFullscreenImage = (item) => {
+    const renderFullscreenImage = (item, sliderData) => {
         const itemData = getMediaImage(item);
-        return (_jsx(FullscreenImage, { ...itemData, imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage }, itemData.alt));
+        return (_jsx(FullscreenImage, { ...itemData, imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData }, itemData.alt));
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
@@ -53,7 +53,9 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (_jsx(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard, children: imageArray.map((item, index) => (_jsx(React.Fragment, { children: fullscreenItem ? renderFullscreenImage(item) : imageOnly(item) }, index))) }));
+        return (_jsx(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard, children: imageArray.map((item, index) => (_jsx(React.Fragment, { children: fullscreenItem
+                    ? renderFullscreenImage(item, { items: imageArray, initialIndex: index })
+                    : imageOnly(item) }, index))) }));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC7E,OAAO,QAAQ,2BAAwB;AAEvC,OAAO,WAAW,yCAAsC;AACxD,OAAO,EAAgD,UAAU,EAAC,iCAAwB;AAC1F,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,gCAAuB;AACtD,OAAO,eAAe,iDAA8C;AACpE,OAAO,eAAe,iDAA8C;AACpE,OAAO,SAAS,6BAA0B;AAE1C,OAAO,EAAC,aAAa,EAAC,mBAAgB;AAEtC,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,uBAAuB,CAAC,CAAC;AAezC,MAAM,CAAC,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAEnD,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IACnC,MAAM,EACF,QAAQ,EACR,MAAM,EACN,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,+BAA+B,EAC/B,EAAE,EACF,MAAM,GACT,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GACP,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,+BAA+B;QACzD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAEtB,MAAM,YAAY,GAAG,eAAe,CAChC,EAAE,EACF,kBAAkB,EAClB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,cAAc,CACjB,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,EAAC,aAAa,EAAC,EAAE,gBAAgB,CAAC,GAAG,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC;QACzD,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC,QAAQ;KAC1B,CAAC,CAAC,CAAC;IAEJ,IAAI,mBAAmB,GAA2C,EAAE,CAAC;IAErE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACtD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YAEnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;YACrE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACxE,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,EAAE,CAAC;QACX,MAAM,aAAa,GAAG,CAAC,CAAC;QACxB,gBAAgB,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,MAAM,IAAI,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAC,CAAC,CAAC;QACvF,mBAAmB,GAAG,aAAa,CAAC,EAAE,CAClC,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,MAAM,CAAC,KAAK,CAAC,GAAG,aAAa,KAAK,CAC/D,CAAC;IACN,CAAC;IAED,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,EAAE,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAC,EAAE,cAAc,CAAC,CAAC;IAE/F,MAAM,qBAAqB,GAAG,CAAC,IAAgB,EAAE,EAAE;QAC/C,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;QAErC,OAAO,CACH,KAAC,eAAe,OAER,QAAQ,EACZ,cAAc,EAAE,UAAU,EAC1B,UAAU,EAAE,EAAC,MAAM,EAAC,EACpB,EAAE,EAAE,YAAY,CAAC,eAAe,IAJ3B,QAAQ,CAAC,GAAG,CAKnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;QAC7C,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,KAAC,QAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,mBAAmB,EAAC,aAAW,YAAY,CAAC,OAAO,YAChF,KAAC,eAAe,OACR,SAAS,EACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,eAAe,GAClC,GACS,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,QAAoB,EAAE,EAAE;QACvC,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,KAAC,SAAS,OACF,SAAS,EACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,SAAS,EAC1B,MAAM,EAAE,MAAM,GAChB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,UAAwB,EAAE,EAAE;QAC7C,MAAM,cAAc,GAAG,UAAU,KAAK,SAAS,IAAI,UAAU,CAAC;QAE9D,OAAO,CACH,KAAC,WAAW,IAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,SAAS,YACnD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,CAAC,QAAQ,cACV,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAD9C,KAAK,CAET,CACpB,CAAC,GACQ,CACjB,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACb,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACpE,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport SliderBlock from '../../../blocks/Slider/Slider';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n    imageClassName?: string;\n    isBackground?: boolean;\n    fullscreen?: boolean;\n    onLoad?: () => void;\n}\n\ninterface InnerImageProps {\n    hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n    const {\n        parallax,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        video,\n        fullscreen,\n        disableImageSliderForArrayInput,\n        qa,\n        onLoad,\n    } = props;\n    const image =\n        Array.isArray(props.image) && disableImageSliderForArrayInput\n            ? props.image[0]\n            : props.image;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'fullscreen-image',\n        'animate',\n        'background-image',\n        'image-view',\n        'slider-block',\n    );\n    const [scrollY, setScrollY] = React.useState(0);\n    const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n        springScrollY: 0,\n        config: config.molasses,\n    }));\n\n    let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n    React.useEffect(() => {\n        if (parallax) {\n            const handleScroll = () => setScrollY(window.scrollY);\n            const debouncedHandler = debounce(handleScroll, 5);\n\n            window.addEventListener('scroll', debouncedHandler, {passive: true});\n            return () => window.removeEventListener('scroll', debouncedHandler);\n        }\n\n        return () => {};\n    });\n\n    if (parallax) {\n        const parallaxLevel = 2;\n        springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n        parallaxInterpolate = springScrollY.to(\n            (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n        );\n    }\n\n    const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n    const renderFullscreenImage = (item: ImageProps) => {\n        const itemData = getMediaImage(item);\n\n        return (\n            <FullscreenImage\n                key={itemData.alt}\n                {...itemData}\n                imageClassName={imageClass}\n                imageStyle={{height}}\n                qa={qaAttributes.fullscreenImage}\n            />\n        );\n    };\n\n    const imageBackground = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n                <BackgroundImage\n                    {...imageData}\n                    className={imageClass}\n                    style={{height}}\n                    qa={qaAttributes.backgroundImage}\n                />\n            </animated.div>\n        );\n    };\n\n    const imageOnly = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <ImageView\n                {...imageData}\n                className={imageClass}\n                style={{height}}\n                qa={qaAttributes.imageView}\n                onLoad={onLoad}\n            />\n        );\n    };\n\n    const imageSlider = (imageArray: ImageProps[]) => {\n        const fullscreenItem = fullscreen === undefined || fullscreen;\n\n        return (\n            <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n                {imageArray.map((item, index) => (\n                    <React.Fragment key={index}>\n                        {fullscreenItem ? renderFullscreenImage(item) : imageOnly(item)}\n                    </React.Fragment>\n                ))}\n            </SliderBlock>\n        );\n    };\n\n    if (Array.isArray(image)) {\n        return imageSlider(image);\n    }\n\n    if (fullscreen) {\n        return renderFullscreenImage(image);\n    }\n\n    return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n    imageClassName?: string;\n    isBackground?: boolean;\n    fullscreen?: boolean;\n    fullscreenClassName?: string;\n    onLoad?: () => void;\n}\n\ninterface InnerImageProps {\n    hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n    const {\n        parallax,\n        height,\n        imageClassName,\n        fullscreenClassName,\n        isBackground,\n        hasVideoFallback,\n        video,\n        fullscreen,\n        disableImageSliderForArrayInput,\n        qa,\n        onLoad,\n    } = props;\n    const image =\n        Array.isArray(props.image) && disableImageSliderForArrayInput\n            ? props.image[0]\n            : props.image;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'fullscreen-image',\n        'animate',\n        'background-image',\n        'image-view',\n        'slider-block',\n    );\n    const [scrollY, setScrollY] = React.useState(0);\n    const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n        springScrollY: 0,\n        config: config.molasses,\n    }));\n\n    let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n    React.useEffect(() => {\n        if (parallax) {\n            const handleScroll = () => setScrollY(window.scrollY);\n            const debouncedHandler = debounce(handleScroll, 5);\n\n            window.addEventListener('scroll', debouncedHandler, {passive: true});\n            return () => window.removeEventListener('scroll', debouncedHandler);\n        }\n\n        return () => {};\n    });\n\n    if (parallax) {\n        const parallaxLevel = 2;\n        springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n        parallaxInterpolate = springScrollY.to(\n            (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n        );\n    }\n\n    const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n    const renderFullscreenImage = (\n        item: ImageProps,\n        sliderData?: FullscreenImageProps['sliderData'],\n    ) => {\n        const itemData = getMediaImage(item);\n\n        return (\n            <FullscreenImage\n                key={itemData.alt}\n                {...itemData}\n                imageClassName={imageClass}\n                modalImageClass={fullscreenClassName}\n                imageStyle={{height}}\n                qa={qaAttributes.fullscreenImage}\n                sliderData={sliderData}\n            />\n        );\n    };\n\n    const imageBackground = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n                <BackgroundImage\n                    {...imageData}\n                    className={imageClass}\n                    style={{height}}\n                    qa={qaAttributes.backgroundImage}\n                />\n            </animated.div>\n        );\n    };\n\n    const imageOnly = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <ImageView\n                {...imageData}\n                className={imageClass}\n                style={{height}}\n                qa={qaAttributes.imageView}\n                onLoad={onLoad}\n            />\n        );\n    };\n\n    const imageSlider = (imageArray: ImageProps[]) => {\n        const fullscreenItem = fullscreen === undefined || fullscreen;\n\n        return (\n            <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n                {imageArray.map((item, index) => (\n                    <React.Fragment key={index}>\n                        {fullscreenItem\n                            ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n                            : imageOnly(item)}\n                    </React.Fragment>\n                ))}\n            </SliderBlock>\n        );\n    };\n\n    if (Array.isArray(image)) {\n        return imageSlider(image);\n    }\n\n    if (fullscreen) {\n        return renderFullscreenImage(image);\n    }\n\n    return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}

package/build/esm/components/Media/Media.css

@@ -8,4 +8,8 @@ unpredictable css rules order in build */
   overflow: hidden;
   display: flex;
   align-items: center;
+}
+.pc-Media__fullscreen-image-cover {
+  object-fit: cover;
+  object-position: top;
 }

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

@@ -4,6 +4,7 @@ import { VideoAdditionProps } from "./Video/Video.js";
 import './Media.css';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
+    isFullscreenImageCover?: boolean;
     youtubeClassName?: string;
     autoplay?: boolean;
     onImageLoad?: () => void;

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

@@ -12,14 +12,14 @@ import Video from "./Video/Video.js";
 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, videoMicrodata, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, isFullscreenImageCover, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = React.useState(false);
     const { microdata } = React.useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = React.useMemo(() => {
         let result = [];
         if (image) {
-            result.push(_jsx(Image, { parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }, "image"));
+            result.push(_jsx(Image, { parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, fullscreenClassName: isFullscreenImageCover ? b('fullscreen-image-cover') : undefined, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }, "image"));
         }
         if (video) {
             const videoProps = {
@@ -67,6 +67,7 @@ export const Media = (props) => {
         isBackground,
         hasVideoFallback,
         fullscreen,
+        isFullscreenImageCover,
         qaAttributes.image,
         qaAttributes.video,
         onImageLoad,

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

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["components/Media/Media.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../context/innerContext';\nimport {MediaProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport {sanitizeMicrodata} from '../../utils/microdata';\nimport IframeVideoBlock from '../VideoBlock/VideoBlock';\n\nimport DataLens from './DataLens/DataLens';\nimport FullscreenVideo from './FullscreenVideo/FullscreenVideo';\nimport Iframe from './Iframe/Iframe';\nimport Image, {ImageAdditionProps} from './Image/Image';\nimport Video, {VideoAdditionProps} from './Video/Video';\n\nimport './Media.scss';\n\nconst b = block('Media');\n\nexport interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {\n    className?: string;\n    youtubeClassName?: string;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nexport const Media = (props: MediaAllProps) => {\n    const {\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        color,\n        height,\n        previewImg,\n        parallax = false,\n        fullscreen,\n        analyticsEvents,\n        className,\n        imageClassName,\n        videoClassName,\n        youtubeClassName,\n        disableImageSliderForArrayInput,\n        playVideo = true,\n        isBackground,\n        playButton,\n        customBarControlsClassName,\n        qa,\n        ratio,\n        autoplay,\n        onImageLoad,\n        iframe,\n        margins,\n        videoMicrodata,\n    } = props;\n\n    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);\n    const {microdata} = React.useContext(InnerContext);\n\n    const qaAttributes = getQaAttrubutes(qa, 'video');\n\n    const content = React.useMemo(() => {\n        let result: React.ReactElement | React.ReactElement[] = [];\n\n        if (image) {\n            result.push(\n                <Image\n                    key=\"image\"\n                    parallax={parallax}\n                    image={image}\n                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}\n                    height={height}\n                    imageClassName={imageClassName}\n                    isBackground={isBackground}\n                    video={video}\n                    hasVideoFallback={hasVideoFallback}\n                    fullscreen={fullscreen}\n                    qa={qaAttributes.image}\n                    onLoad={onImageLoad}\n                />,\n            );\n        }\n\n        if (video) {\n            const videoProps = {\n                key: 'video',\n                video,\n                videoClassName,\n                height,\n                analyticsEvents,\n                playVideo,\n                previewImg,\n                playButton,\n                customBarControlsClassName,\n                hasVideoFallback,\n                setHasVideoFallback,\n                ratio,\n            };\n\n            if (fullscreen) {\n                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);\n            } else {\n                result.push(<Video {...videoProps} qa={qaAttributes.video} />);\n            }\n        }\n\n        if (youtube || videoIframe) {\n            result = (\n                <IframeVideoBlock\n                    className={b('youtube', youtubeClassName)}\n                    record={youtube}\n                    videoIframe={videoIframe}\n                    attributes={{color: 'white', rel: '0'}}\n                    previewImg={previewImg}\n                    height={height}\n                    fullscreen={fullscreen}\n                    analyticsEvents={analyticsEvents}\n                    autoplay={autoplay}\n                    onImageLoad={onImageLoad}\n                />\n            );\n        }\n\n        if (dataLens) {\n            result = <DataLens dataLens={dataLens} />;\n        }\n\n        if (iframe) {\n            result = <Iframe iframe={iframe} margins={margins} />;\n        }\n\n        return result;\n    }, [\n        image,\n        video,\n        videoIframe,\n        youtube,\n        dataLens,\n        iframe,\n        parallax,\n        disableImageSliderForArrayInput,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        fullscreen,\n        qaAttributes.image,\n        qaAttributes.video,\n        onImageLoad,\n        videoClassName,\n        analyticsEvents,\n        playVideo,\n        previewImg,\n        playButton,\n        customBarControlsClassName,\n        ratio,\n        youtubeClassName,\n        autoplay,\n        margins,\n    ]);\n\n    const videoMicrodataScript = React.useMemo(() => {\n        const {name, description} = videoMicrodata || {};\n        const json = JSON.stringify({\n            '@context': 'http://schema.org/',\n            '@type': 'VideoObject',\n            uploadDate: microdata?.contentUpdatedDate,\n            contentUrl: video?.src?.[0] || videoIframe || youtube,\n            thumbnailUrl: previewImg,\n            ...(videoMicrodata || {}),\n            name: name ? sanitizeMicrodata(name) : name,\n            description: description ? sanitizeMicrodata(description) : description,\n        });\n\n        return video || youtube || videoIframe ? (\n            <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />\n        ) : null;\n    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);\n\n    return (\n        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>\n            {videoMicrodataScript}\n            {content}\n        </div>\n    );\n};\n\nexport default Media;\n"]}
+{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["components/Media/Media.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,4CAAmC;AAExD,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,6BAAoB;AACnD,OAAO,EAAC,iBAAiB,EAAC,iCAA8B;AACxD,OAAO,gBAAgB,oCAAiC;AAExD,OAAO,QAAQ,+BAA4B;AAC3C,OAAO,eAAe,6CAA0C;AAChE,OAAO,MAAM,2BAAwB;AACrC,OAAO,KAA2B,yBAAsB;AACxD,OAAO,KAA2B,yBAAsB;AAExD,OAAO,aAAa,CAAC;AAErB,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAUzB,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC1C,MAAM,EACF,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,QAAQ,EACR,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,sBAAsB,EACtB,eAAe,EACf,SAAS,EACT,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,+BAA+B,EAC/B,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,OAAO,EACP,cAAc,GACjB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,EAAC,SAAS,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,MAAM,GAA8C,EAAE,CAAC;QAE3D,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,CAAC,IAAI,CACP,KAAC,KAAK,IAEF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,+BAA+B,EAAE,+BAA+B,EAChE,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EACf,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,EAEpE,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,EAAE,EAAE,YAAY,CAAC,KAAK,EACtB,MAAM,EAAE,WAAW,IAdf,OAAO,CAeb,CACL,CAAC;QACN,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,UAAU,GAAG;gBACf,GAAG,EAAE,OAAO;gBACZ,KAAK;gBACL,cAAc;gBACd,MAAM;gBACN,eAAe;gBACf,SAAS;gBACT,UAAU;gBACV,UAAU;gBACV,0BAA0B;gBAC1B,gBAAgB;gBAChB,mBAAmB;gBACnB,KAAK;aACR,CAAC;YAEF,IAAI,UAAU,EAAE,CAAC;gBACb,MAAM,CAAC,IAAI,CAAC,KAAC,eAAe,OAAK,UAAU,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CAAC,CAAC;YAC7E,CAAC;iBAAM,CAAC;gBACJ,MAAM,CAAC,IAAI,CAAC,KAAC,KAAK,OAAK,UAAU,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CAAC,CAAC;YACnE,CAAC;QACL,CAAC;QAED,IAAI,OAAO,IAAI,WAAW,EAAE,CAAC;YACzB,MAAM,GAAG,CACL,KAAC,gBAAgB,IACb,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,gBAAgB,CAAC,EACzC,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,EAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAC,EACtC,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GAC1B,CACL,CAAC;QACN,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,GAAG,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAC9C,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACT,MAAM,GAAG,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;QAC1D,CAAC;QAED,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE;QACC,KAAK;QACL,KAAK;QACL,WAAW;QACX,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,+BAA+B;QAC/B,MAAM;QACN,cAAc;QACd,YAAY;QACZ,gBAAgB;QAChB,UAAU;QACV,sBAAsB;QACtB,YAAY,CAAC,KAAK;QAClB,YAAY,CAAC,KAAK;QAClB,WAAW;QACX,cAAc;QACd,eAAe;QACf,SAAS;QACT,UAAU;QACV,UAAU;QACV,0BAA0B;QAC1B,KAAK;QACL,gBAAgB;QAChB,QAAQ;QACR,OAAO;KACV,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC5C,MAAM,EAAC,IAAI,EAAE,WAAW,EAAC,GAAG,cAAc,IAAI,EAAE,CAAC;QACjD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;YACxB,UAAU,EAAE,oBAAoB;YAChC,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,SAAS,EAAE,kBAAkB;YACzC,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,OAAO;YACrD,YAAY,EAAE,UAAU;YACxB,GAAG,CAAC,cAAc,IAAI,EAAE,CAAC;YACzB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;YAC3C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW;SAC1E,CAAC,CAAC;QAEH,OAAO,KAAK,IAAI,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,CACrC,iBAAQ,IAAI,EAAC,qBAAqB,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,GAAI,CACjF,CAAC,CAAC,CAAC,IAAI,CAAC;IACb,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7F,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAE,KAAK,EAAC,aAAW,EAAE,aAC3E,oBAAoB,EACpB,OAAO,IACN,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../context/innerContext';\nimport {MediaProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport {sanitizeMicrodata} from '../../utils/microdata';\nimport IframeVideoBlock from '../VideoBlock/VideoBlock';\n\nimport DataLens from './DataLens/DataLens';\nimport FullscreenVideo from './FullscreenVideo/FullscreenVideo';\nimport Iframe from './Iframe/Iframe';\nimport Image, {ImageAdditionProps} from './Image/Image';\nimport Video, {VideoAdditionProps} from './Video/Video';\n\nimport './Media.scss';\n\nconst b = block('Media');\n\nexport interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {\n    className?: string;\n    isFullscreenImageCover?: boolean;\n    youtubeClassName?: string;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nexport const Media = (props: MediaAllProps) => {\n    const {\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        color,\n        height,\n        previewImg,\n        parallax = false,\n        fullscreen,\n        isFullscreenImageCover,\n        analyticsEvents,\n        className,\n        imageClassName,\n        videoClassName,\n        youtubeClassName,\n        disableImageSliderForArrayInput,\n        playVideo = true,\n        isBackground,\n        playButton,\n        customBarControlsClassName,\n        qa,\n        ratio,\n        autoplay,\n        onImageLoad,\n        iframe,\n        margins,\n        videoMicrodata,\n    } = props;\n\n    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);\n    const {microdata} = React.useContext(InnerContext);\n\n    const qaAttributes = getQaAttrubutes(qa, 'video');\n\n    const content = React.useMemo(() => {\n        let result: React.ReactElement | React.ReactElement[] = [];\n\n        if (image) {\n            result.push(\n                <Image\n                    key=\"image\"\n                    parallax={parallax}\n                    image={image}\n                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}\n                    height={height}\n                    imageClassName={imageClassName}\n                    fullscreenClassName={\n                        isFullscreenImageCover ? b('fullscreen-image-cover') : undefined\n                    }\n                    isBackground={isBackground}\n                    video={video}\n                    hasVideoFallback={hasVideoFallback}\n                    fullscreen={fullscreen}\n                    qa={qaAttributes.image}\n                    onLoad={onImageLoad}\n                />,\n            );\n        }\n\n        if (video) {\n            const videoProps = {\n                key: 'video',\n                video,\n                videoClassName,\n                height,\n                analyticsEvents,\n                playVideo,\n                previewImg,\n                playButton,\n                customBarControlsClassName,\n                hasVideoFallback,\n                setHasVideoFallback,\n                ratio,\n            };\n\n            if (fullscreen) {\n                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);\n            } else {\n                result.push(<Video {...videoProps} qa={qaAttributes.video} />);\n            }\n        }\n\n        if (youtube || videoIframe) {\n            result = (\n                <IframeVideoBlock\n                    className={b('youtube', youtubeClassName)}\n                    record={youtube}\n                    videoIframe={videoIframe}\n                    attributes={{color: 'white', rel: '0'}}\n                    previewImg={previewImg}\n                    height={height}\n                    fullscreen={fullscreen}\n                    analyticsEvents={analyticsEvents}\n                    autoplay={autoplay}\n                    onImageLoad={onImageLoad}\n                />\n            );\n        }\n\n        if (dataLens) {\n            result = <DataLens dataLens={dataLens} />;\n        }\n\n        if (iframe) {\n            result = <Iframe iframe={iframe} margins={margins} />;\n        }\n\n        return result;\n    }, [\n        image,\n        video,\n        videoIframe,\n        youtube,\n        dataLens,\n        iframe,\n        parallax,\n        disableImageSliderForArrayInput,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        fullscreen,\n        isFullscreenImageCover,\n        qaAttributes.image,\n        qaAttributes.video,\n        onImageLoad,\n        videoClassName,\n        analyticsEvents,\n        playVideo,\n        previewImg,\n        playButton,\n        customBarControlsClassName,\n        ratio,\n        youtubeClassName,\n        autoplay,\n        margins,\n    ]);\n\n    const videoMicrodataScript = React.useMemo(() => {\n        const {name, description} = videoMicrodata || {};\n        const json = JSON.stringify({\n            '@context': 'http://schema.org/',\n            '@type': 'VideoObject',\n            uploadDate: microdata?.contentUpdatedDate,\n            contentUrl: video?.src?.[0] || videoIframe || youtube,\n            thumbnailUrl: previewImg,\n            ...(videoMicrodata || {}),\n            name: name ? sanitizeMicrodata(name) : name,\n            description: description ? sanitizeMicrodata(description) : description,\n        });\n\n        return video || youtube || videoIframe ? (\n            <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />\n        ) : null;\n    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);\n\n    return (\n        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>\n            {videoMicrodataScript}\n            {content}\n        </div>\n    );\n};\n\nexport default Media;\n"]}

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -6,6 +6,6 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
 }
-.pc-meta-info__item:not(:first-child) {
+.pc-meta-info__item.pc-meta-info__item:not(:first-child) {
   margin-left: 16px;
 }

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -3,6 +3,6 @@ import { block } from "../../utils/index.js";
 import { YFMWrapper } from "../index.js";
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (_jsx("h4", { className: b(null, className), children: items.map((metaInfoItem) => (_jsx(YFMWrapper, { content: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } }, metaInfoItem))) }));
+const MetaInfo = ({ items, className }) => (_jsx("h4", { className: b(null, className), children: items.map((metaInfoItem) => (_jsx(YFMWrapper, { content: metaInfoItem, contentClassName: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } }, metaInfoItem))) }));
 export default MetaInfo;
 //# sourceMappingURL=MetaInfo.js.map

package/build/esm/components/MetaInfo/MetaInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetaInfo.js","sourceRoot":"../../../../src","sources":["components/MetaInfo/MetaInfo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,UAAU,EAAC,oBAAiB;AAEpC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAM7B,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAAiB,EAAE,EAAE,CAAC,CACrD,aAAI,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CACzB,KAAC,UAAU,IACP,OAAO,EAAE,YAAY,EAErB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAC,IAFpD,YAAY,CAGnB,CACL,CAAC,GACD,CACR,CAAC;AACF,eAAe,QAAQ,CAAC","sourcesContent":["import {ClassNameProps} from '../../models';\nimport {block} from '../../utils';\nimport {YFMWrapper} from '../index';\n\nimport './MetaInfo.scss';\n\nconst b = block('meta-info');\n\nexport interface MetaInfpoProps extends ClassNameProps {\n    items: string[];\n}\n\nconst MetaInfo = ({items, className}: MetaInfpoProps) => (\n    <h4 className={b(null, className)}>\n        {items.map((metaInfoItem) => (\n            <YFMWrapper\n                content={metaInfoItem}\n                key={metaInfoItem}\n                className={b('item')}\n                modifiers={{constructor: true, constructorMetaInfo: true}}\n            />\n        ))}\n    </h4>\n);\nexport default MetaInfo;\n"]}
+{"version":3,"file":"MetaInfo.js","sourceRoot":"../../../../src","sources":["components/MetaInfo/MetaInfo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,EAAC,UAAU,EAAC,oBAAiB;AAEpC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAM7B,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAAiB,EAAE,EAAE,CAAC,CACrD,aAAI,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CACzB,KAAC,UAAU,IACP,OAAO,EAAE,YAAY,EAErB,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,EAC3B,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAC,IAFpD,YAAY,CAGnB,CACL,CAAC,GACD,CACR,CAAC;AACF,eAAe,QAAQ,CAAC","sourcesContent":["import {ClassNameProps} from '../../models';\nimport {block} from '../../utils';\nimport {YFMWrapper} from '../index';\n\nimport './MetaInfo.scss';\n\nconst b = block('meta-info');\n\nexport interface MetaInfpoProps extends ClassNameProps {\n    items: string[];\n}\n\nconst MetaInfo = ({items, className}: MetaInfpoProps) => (\n    <h4 className={b(null, className)}>\n        {items.map((metaInfoItem) => (\n            <YFMWrapper\n                content={metaInfoItem}\n                key={metaInfoItem}\n                contentClassName={b('item')}\n                modifiers={{constructor: true, constructorMetaInfo: true}}\n            />\n        ))}\n    </h4>\n);\nexport default MetaInfo;\n"]}

package/build/esm/components/Table/Table.css

@@ -74,9 +74,10 @@ unpredictable css rules order in build */
 .pc-table__legend-item + .pc-table__legend-item {
   margin-left: 32px;
 }
-.pc-table__legent-item-text {
+.pc-table__legent-item-text.pc-table__legent-item-text {
   margin-left: 6px;
 }
+
 @media (max-width: 577px) {
   .pc-table__cell {
     min-width: 120px;

package/build/esm/components/Table/Table.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Check, Minus } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
-import { HTML, YFMWrapper } from "../index.js";
+import { YFMWrapper } from "../index.js";
 import { block } from "../../utils/index.js";
 import './Table.css';
 function getMarkerId(index) {
@@ -22,13 +22,15 @@ export default class Table extends React.Component {
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (_jsx("div", { className: b('table'), role: 'rowgroup', children: content.map((row, i) => (_jsx("div", { className: b('row'), role: 'row', children: row.map((cell, j) => (_jsx("div", { className: b('cell', { justify: justify[j] }), role: 'cell', children: legend && i && j ? (this.renderMarker(marker, cell)) : (_jsx(HTML, { children: cell })) }, j))) }, i))) }));
+        return (_jsx("div", { className: b('table'), role: 'rowgroup', children: content.map((row, i) => (_jsx("div", { className: b('row'), role: 'row', children: row.map((cell, j) => (_jsx("div", { className: b('cell', { justify: justify[j] }), role: 'cell', children: legend && i && j ? (this.renderMarker(marker, cell)) : (_jsx(YFMWrapper, { tagName: "span", content: cell, modifiers: {
+                            constructor: true,
+                        } })) }, j))) }, i))) }));
     }
     renderMarker(type, cell) {
         return (_jsx("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }), children: type === 'tick' ? (_jsx(Icon, { size: 20, className: b('marker_tick', { check: Number(cell) === 1 }), data: Number(cell) === 1 ? Check : Minus })) : null }));
     }
     renderLegend(legend, marker) {
-        return (_jsx("div", { className: b('legend'), children: legend.map((item, index) => (_jsxs("div", { className: b('legend-item'), children: [this.renderMarker(marker, String(index)), _jsx(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) })] }, item))) }));
+        return (_jsx("div", { className: b('legend'), children: legend.map((item, index) => (_jsxs("div", { className: b('legend-item'), children: [this.renderMarker(marker, String(index)), _jsx(YFMWrapper, { contentClassName: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) })] }, item))) }));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

package/build/esm/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"../../../../src","sources":["components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Check, Minus} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {HTML, YFMWrapper} from '../';\nimport {ClassNameProps, Justify, LegendTableMarkerType, TableProps} from '../../models';\nimport {block} from '../../utils';\n\nimport './Table.scss';\n\nfunction getMarkerId(index: number): string | undefined {\n    if (isNaN(index)) {\n        return undefined;\n    }\n\n    return `marker-${index}`;\n}\n\nconst b = block('table');\n\nexport default class Table extends React.Component<TableProps & ClassNameProps> {\n    render() {\n        const {content, legend, hideLegend, marker = 'disk', className, caption} = this.props;\n\n        if (!content || !content.length || !content[0].length) {\n            return null;\n        }\n\n        return (\n            <div className={b(null, className)} role={'table'} aria-label={caption}>\n                {this.renderTable(content, marker, legend)}\n                {legend && !hideLegend && this.renderLegend(legend, marker)}\n            </div>\n        );\n    }\n\n    private renderTable(content: string[][], marker: LegendTableMarkerType, legend?: string[]) {\n        const justify = this.getDefaultJustify(content, this.props.justify);\n\n        return (\n            <div className={b('table')} role={'rowgroup'}>\n                {content.map((row, i) => (\n                    <div key={i} className={b('row')} role={'row'}>\n                        {row.map((cell, j) => (\n                            <div key={j} className={b('cell', {justify: justify[j]})} role={'cell'}>\n                                {legend && i && j ? (\n                                    this.renderMarker(marker, cell)\n                                ) : (\n                                    <HTML>{cell}</HTML>\n                                )}\n                            </div>\n                        ))}\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    private renderMarker(type: LegendTableMarkerType, cell: string) {\n        return (\n            <div\n                aria-labelledby={getMarkerId(Number(cell))}\n                className={b('marker', {type, index: String(cell)})}\n            >\n                {type === 'tick' ? (\n                    <Icon\n                        size={20}\n                        className={b('marker_tick', {check: Number(cell) === 1})}\n                        data={Number(cell) === 1 ? Check : Minus}\n                    />\n                ) : null}\n            </div>\n        );\n    }\n\n    private renderLegend(legend: string[], marker: LegendTableMarkerType) {\n        return (\n            <div className={b('legend')}>\n                {legend.map((item, index) => (\n                    <div key={item} className={b('legend-item')}>\n                        {this.renderMarker(marker, String(index))}\n                        <YFMWrapper\n                            className={b('legent-item-text')}\n                            content={item}\n                            modifiers={{constructor: true}}\n                            id={getMarkerId(index)}\n                        />\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    private getDefaultJustify(content: string[][], justify?: Justify[]) {\n        return justify || new Array(content[0].length).fill('center');\n    }\n}\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"../../../../src","sources":["components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Check, Minus} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {YFMWrapper} from '../';\nimport {ClassNameProps, Justify, LegendTableMarkerType, TableProps} from '../../models';\nimport {block} from '../../utils';\n\nimport './Table.scss';\n\nfunction getMarkerId(index: number): string | undefined {\n    if (isNaN(index)) {\n        return undefined;\n    }\n\n    return `marker-${index}`;\n}\n\nconst b = block('table');\n\nexport default class Table extends React.Component<TableProps & ClassNameProps> {\n    render() {\n        const {content, legend, hideLegend, marker = 'disk', className, caption} = this.props;\n\n        if (!content || !content.length || !content[0].length) {\n            return null;\n        }\n\n        return (\n            <div className={b(null, className)} role={'table'} aria-label={caption}>\n                {this.renderTable(content, marker, legend)}\n                {legend && !hideLegend && this.renderLegend(legend, marker)}\n            </div>\n        );\n    }\n\n    private renderTable(content: string[][], marker: LegendTableMarkerType, legend?: string[]) {\n        const justify = this.getDefaultJustify(content, this.props.justify);\n\n        return (\n            <div className={b('table')} role={'rowgroup'}>\n                {content.map((row, i) => (\n                    <div key={i} className={b('row')} role={'row'}>\n                        {row.map((cell, j) => (\n                            <div key={j} className={b('cell', {justify: justify[j]})} role={'cell'}>\n                                {legend && i && j ? (\n                                    this.renderMarker(marker, cell)\n                                ) : (\n                                    <YFMWrapper\n                                        tagName=\"span\"\n                                        content={cell}\n                                        modifiers={{\n                                            constructor: true,\n                                        }}\n                                    />\n                                )}\n                            </div>\n                        ))}\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    private renderMarker(type: LegendTableMarkerType, cell: string) {\n        return (\n            <div\n                aria-labelledby={getMarkerId(Number(cell))}\n                className={b('marker', {type, index: String(cell)})}\n            >\n                {type === 'tick' ? (\n                    <Icon\n                        size={20}\n                        className={b('marker_tick', {check: Number(cell) === 1})}\n                        data={Number(cell) === 1 ? Check : Minus}\n                    />\n                ) : null}\n            </div>\n        );\n    }\n\n    private renderLegend(legend: string[], marker: LegendTableMarkerType) {\n        return (\n            <div className={b('legend')}>\n                {legend.map((item, index) => (\n                    <div key={item} className={b('legend-item')}>\n                        {this.renderMarker(marker, String(index))}\n                        <YFMWrapper\n                            contentClassName={b('legent-item-text')}\n                            content={item}\n                            modifiers={{constructor: true}}\n                            id={getMarkerId(index)}\n                        />\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    private getDefaultJustify(content: string[][], justify?: Justify[]) {\n        return justify || new Array(content[0].length).fill('center');\n    }\n}\n"]}

package/build/esm/components/Title/TitleItem.css

@@ -103,22 +103,25 @@ unpredictable css rules order in build */
 .pc-title-item__link:hover .pc-title-item__arrow_size_s {
   margin-left: 8px;
 }
-.pc-title-item__text {
+.pc-title-item__text.pc-title-item__text {
   white-space: normal;
+  font-size: inherit;
+  line-height: inherit;
 }
-.pc-title-item__text a {
+.pc-title-item__text.pc-title-item__text a {
   outline: none;
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
-.utilityfocus .pc-title-item__text a:focus {
+.utilityfocus .pc-title-item__text.pc-title-item__text a:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-title-item__text a:hover, .pc-title-item__text a:active {
+.pc-title-item__text.pc-title-item__text a:hover, .pc-title-item__text.pc-title-item__text a:active {
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+
 .pc-title-item__wrapper {
   white-space: nowrap;
 }

package/build/esm/components/Title/TitleItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { HTML, ToggleArrow } from "../index.js";
+import { ToggleArrow, YFMWrapper } from "../index.js";
 import { LocationContext } from "../../context/locationContext/index.js";
 import { MobileContext } from "../../context/mobileContext/index.js";
 import { block, getHeaderTag, getLinkProps } from "../../utils/index.js";
@@ -26,7 +26,9 @@ const TitleItem = (props) => {
     const isMobile = React.useContext(MobileContext);
     const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
     const { hostname } = React.useContext(LocationContext);
-    const textMarkup = (_jsxs(React.Fragment, { children: [_jsx(HTML, { className: b('text'), children: text }), custom && (_jsxs(React.Fragment, { children: ["\u00A0", _jsx("span", { className: b('custom'), children: custom })] }))] }));
+    const textMarkup = (_jsxs(React.Fragment, { children: [_jsx(YFMWrapper, { className: b('text'), contentClassName: b('text'), content: text, modifiers: {
+                    constructor: true,
+                } }), custom && (_jsxs(React.Fragment, { children: ["\u00A0", _jsx("span", { className: b('custom'), children: custom })] }))] }));
     let content;
     const insideClickableContent = (_jsxs("span", { className: b('wrapper'), children: [textMarkup, "\u00A0", _jsx(ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })] }));
     if (!url && !onClick) {

package/build/esm/components/Title/TitleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {HTML, ToggleArrow} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n    switch (size) {\n        case 'xs':\n            return 13;\n        case 's':\n            return 16;\n        case 'sm':\n        case 'm':\n            return isMobile ? 22 : 24;\n        case 'l':\n            return isMobile ? 26 : 38;\n        default:\n            return 20;\n    }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps {\n    className?: string;\n    onClick?: () => void;\n    resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    const {\n        textSize = 'm',\n        text,\n        anchor,\n        justify,\n        url,\n        onClick,\n        custom,\n        className,\n        qa,\n        resetMargin = true,\n        urlTitle,\n    } = props;\n\n    const {hostname} = React.useContext(LocationContext);\n    const textMarkup = (\n        <React.Fragment>\n            <HTML className={b('text')}>{text}</HTML>\n            {custom && (\n                <React.Fragment>\n                    &nbsp;\n                    <span className={b('custom')}>{custom}</span>\n                </React.Fragment>\n            )}\n        </React.Fragment>\n    );\n    let content: React.ReactNode;\n\n    const insideClickableContent = (\n        <span className={b('wrapper')}>\n            {textMarkup}\n            &nbsp;\n            <ToggleArrow\n                className={b('arrow', {size: textSize})}\n                size={getArrowSize(textSize, isMobile)}\n                type={'horizontal'}\n                iconType=\"navigation\"\n                open={false}\n            />\n        </span>\n    );\n\n    if (!url && !onClick) {\n        content = textMarkup;\n    } else if (url) {\n        content = (\n            <a\n                className={b('link')}\n                href={url}\n                {...getLinkProps(url, hostname)}\n                onClick={onClick}\n                title={urlTitle}\n            >\n                {insideClickableContent}\n            </a>\n        );\n    } else if (onClick) {\n        content = (\n            <button className={b('link')} onClick={onClick} title={urlTitle}>\n                {insideClickableContent}\n            </button>\n        );\n    }\n\n    return (\n        <React.Fragment>\n            {anchor && <Anchor id={anchor} className={b('anchor')} />}\n            {React.createElement(\n                getHeaderTag(textSize),\n                {\n                    className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n                    'data-qa': `${qa}-header`,\n                },\n                content,\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default TitleItem;\n"]}
+{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {ToggleArrow, YFMWrapper} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n    switch (size) {\n        case 'xs':\n            return 13;\n        case 's':\n            return 16;\n        case 'sm':\n        case 'm':\n            return isMobile ? 22 : 24;\n        case 'l':\n            return isMobile ? 26 : 38;\n        default:\n            return 20;\n    }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps {\n    className?: string;\n    onClick?: () => void;\n    resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    const {\n        textSize = 'm',\n        text,\n        anchor,\n        justify,\n        url,\n        onClick,\n        custom,\n        className,\n        qa,\n        resetMargin = true,\n        urlTitle,\n    } = props;\n\n    const {hostname} = React.useContext(LocationContext);\n    const textMarkup = (\n        <React.Fragment>\n            <YFMWrapper\n                className={b('text')}\n                contentClassName={b('text')}\n                content={text}\n                modifiers={{\n                    constructor: true,\n                }}\n            />\n            {custom && (\n                <React.Fragment>\n                    &nbsp;\n                    <span className={b('custom')}>{custom}</span>\n                </React.Fragment>\n            )}\n        </React.Fragment>\n    );\n    let content: React.ReactNode;\n\n    const insideClickableContent = (\n        <span className={b('wrapper')}>\n            {textMarkup}\n            &nbsp;\n            <ToggleArrow\n                className={b('arrow', {size: textSize})}\n                size={getArrowSize(textSize, isMobile)}\n                type={'horizontal'}\n                iconType=\"navigation\"\n                open={false}\n            />\n        </span>\n    );\n\n    if (!url && !onClick) {\n        content = textMarkup;\n    } else if (url) {\n        content = (\n            <a\n                className={b('link')}\n                href={url}\n                {...getLinkProps(url, hostname)}\n                onClick={onClick}\n                title={urlTitle}\n            >\n                {insideClickableContent}\n            </a>\n        );\n    } else if (onClick) {\n        content = (\n            <button className={b('link')} onClick={onClick} title={urlTitle}>\n                {insideClickableContent}\n            </button>\n        );\n    }\n\n    return (\n        <React.Fragment>\n            {anchor && <Anchor id={anchor} className={b('anchor')} />}\n            {React.createElement(\n                getHeaderTag(textSize),\n                {\n                    className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n                    'data-qa': `${qa}-header`,\n                },\n                content,\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default TitleItem;\n"]}

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -63,7 +63,7 @@ const VideoBlock = (props) => {
                 });
                 return url.href;
             }
-            catch (e) {
+            catch {
                 return src;
             }
         }

package/build/esm/components/VideoBlock/VideoBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBlock.js","sourceRoot":"../../../../src","sources":["components/VideoBlock/VideoBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon, useActionHandlers, useUniqId} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport {v4 as uuidv4} from 'uuid';\n\nimport {useAnalytics} from '../../hooks/useAnalytics';\nimport {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';\nimport {block, getPageSearchParams} from '../../utils';\nimport Image from '../Image/Image';\n\nimport {i18n} from './i18n';\n\nimport './VideoBlock.scss';\n\nconst RECORD_URL = 'https://www.youtube.com/embed/';\nconst STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';\nconst RECORD_RE = /[0-9A-Za-z_-]{11}/;\nconst STREAM_RE = /[0-9A-Za-z_-]{23,25}/;\nconst AUTOPLAY_DELAY = 300;\n\nexport const AUTOPLAY_ATTRIBUTES = {\n    autoplay: 1,\n    mute: 1,\n};\nconst NO_AUTOPLAY_ATTRIBUTES = {\n    autoplay: 0,\n};\n\nconst b = block('VideoBlock');\n\nfunction getYoutubeVideoSrc(stream?: string, record?: string) {\n    if (!stream && !record) {\n        return null;\n    }\n\n    const [videoLink, url, re] = stream\n        ? [stream, STREAM_URL, STREAM_RE]\n        : [record, RECORD_URL, RECORD_RE];\n    const match = videoLink?.match(re);\n    let src;\n\n    if (match && match.length) {\n        src = url + match[0];\n    }\n\n    return src;\n}\n\nexport function getHeight(width: number): number {\n    return (width / 16) * 9;\n}\n\nexport interface VideoBlockProps extends AnalyticsEventsBase {\n    id?: string;\n    stream?: string;\n    record?: string;\n    videoIframe?: string;\n    attributes?: Record<string, string>;\n    className?: string;\n    previewImg?: string;\n    playButton?: React.ReactNode;\n    playButtonId?: string;\n    height?: number;\n    fullscreen?: boolean;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nconst VideoBlock = (props: VideoBlockProps) => {\n    const {\n        stream,\n        record,\n        videoIframe,\n        attributes,\n        className,\n        id,\n        previewImg,\n        playButton,\n        playButtonId,\n        height,\n        fullscreen,\n        analyticsEvents,\n        autoplay,\n        onImageLoad,\n    } = props;\n    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);\n\n    const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [hidePreview, setHidePreview] = React.useState(false);\n    const [currentHeight, setCurrentHeight] = React.useState(height || undefined);\n    const fullId = React.useMemo(() => id || uuidv4(), [id]);\n    const buttonId = useUniqId();\n\n    const [isPlaying, setIsPlaying] = React.useState(!previewImg);\n\n    const iframeSrc = React.useMemo(() => {\n        if (src && isPlaying) {\n            try {\n                const url = new URL(src);\n                const searchParams = getPageSearchParams({\n                    ...(attributes || {}),\n                    ...(previewImg || autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES),\n                });\n\n                searchParams.forEach((value, key) => {\n                    url.searchParams.set(key, value);\n                });\n\n                return url.href;\n            } catch (e) {\n                return src;\n            }\n        }\n\n        return undefined;\n    }, [attributes, autoplay, isPlaying, previewImg, src]);\n\n    const onPreviewClick = React.useCallback(() => {\n        handleAnalytics(analyticsEvents);\n\n        setIsPlaying(true);\n\n        setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);\n    }, [handleAnalytics, analyticsEvents]);\n\n    const {onKeyDown: onPreviewKeyDown} = useActionHandlers(onPreviewClick);\n\n    React.useEffect(() => {\n        const updateSize = debounce(() => {\n            setCurrentHeight(\n                ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined,\n            );\n        }, 100);\n\n        updateSize();\n        window.addEventListener('resize', updateSize, {passive: true});\n        return () => {\n            window.removeEventListener('resize', updateSize);\n        };\n    }, [height]);\n\n    const iframeContent = React.useMemo(() => {\n        return (\n            <iframe\n                id={fullId}\n                src={iframeSrc}\n                width=\"100%\"\n                height=\"100%\"\n                title={i18n('iframe-title')}\n                frameBorder=\"0\"\n                allowFullScreen={true}\n                scrolling=\"no\"\n                allow=\"autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock\"\n                loading=\"lazy\"\n            />\n        );\n    }, [fullId, iframeSrc]);\n\n    React.useEffect(() => {\n        setHidePreview(false);\n    }, [src]);\n\n    if (!src) {\n        return null;\n    }\n\n    return (\n        <div className={b(null, className)} style={{height: currentHeight}} ref={ref}>\n            {iframeContent}\n            {previewImg && !hidePreview && !fullscreen && (\n                <div\n                    className={b('preview')}\n                    onClick={onPreviewClick}\n                    onKeyDown={onPreviewKeyDown}\n                    role=\"button\"\n                    tabIndex={0}\n                    aria-labelledby={playButton ? playButtonId : buttonId}\n                >\n                    <Image\n                        src={previewImg}\n                        className={b('image')}\n                        containerClassName={b('image-wrapper')}\n                        onLoad={onImageLoad}\n                    />\n                    {playButton || (\n                        <button title=\"Play\" id={buttonId} className={b('button')}>\n                            <Icon className={b('icon')} data={PlayFill} size={24} />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default VideoBlock;\n"]}
+{"version":3,"file":"VideoBlock.js","sourceRoot":"../../../../src","sources":["components/VideoBlock/VideoBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon, useActionHandlers, useUniqId} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport {v4 as uuidv4} from 'uuid';\n\nimport {useAnalytics} from '../../hooks/useAnalytics';\nimport {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';\nimport {block, getPageSearchParams} from '../../utils';\nimport Image from '../Image/Image';\n\nimport {i18n} from './i18n';\n\nimport './VideoBlock.scss';\n\nconst RECORD_URL = 'https://www.youtube.com/embed/';\nconst STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';\nconst RECORD_RE = /[0-9A-Za-z_-]{11}/;\nconst STREAM_RE = /[0-9A-Za-z_-]{23,25}/;\nconst AUTOPLAY_DELAY = 300;\n\nexport const AUTOPLAY_ATTRIBUTES = {\n    autoplay: 1,\n    mute: 1,\n};\nconst NO_AUTOPLAY_ATTRIBUTES = {\n    autoplay: 0,\n};\n\nconst b = block('VideoBlock');\n\nfunction getYoutubeVideoSrc(stream?: string, record?: string) {\n    if (!stream && !record) {\n        return null;\n    }\n\n    const [videoLink, url, re] = stream\n        ? [stream, STREAM_URL, STREAM_RE]\n        : [record, RECORD_URL, RECORD_RE];\n    const match = videoLink?.match(re);\n    let src;\n\n    if (match && match.length) {\n        src = url + match[0];\n    }\n\n    return src;\n}\n\nexport function getHeight(width: number): number {\n    return (width / 16) * 9;\n}\n\nexport interface VideoBlockProps extends AnalyticsEventsBase {\n    id?: string;\n    stream?: string;\n    record?: string;\n    videoIframe?: string;\n    attributes?: Record<string, string>;\n    className?: string;\n    previewImg?: string;\n    playButton?: React.ReactNode;\n    playButtonId?: string;\n    height?: number;\n    fullscreen?: boolean;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nconst VideoBlock = (props: VideoBlockProps) => {\n    const {\n        stream,\n        record,\n        videoIframe,\n        attributes,\n        className,\n        id,\n        previewImg,\n        playButton,\n        playButtonId,\n        height,\n        fullscreen,\n        analyticsEvents,\n        autoplay,\n        onImageLoad,\n    } = props;\n    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);\n\n    const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [hidePreview, setHidePreview] = React.useState(false);\n    const [currentHeight, setCurrentHeight] = React.useState(height || undefined);\n    const fullId = React.useMemo(() => id || uuidv4(), [id]);\n    const buttonId = useUniqId();\n\n    const [isPlaying, setIsPlaying] = React.useState(!previewImg);\n\n    const iframeSrc = React.useMemo(() => {\n        if (src && isPlaying) {\n            try {\n                const url = new URL(src);\n                const searchParams = getPageSearchParams({\n                    ...(attributes || {}),\n                    ...(previewImg || autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES),\n                });\n\n                searchParams.forEach((value, key) => {\n                    url.searchParams.set(key, value);\n                });\n\n                return url.href;\n            } catch {\n                return src;\n            }\n        }\n\n        return undefined;\n    }, [attributes, autoplay, isPlaying, previewImg, src]);\n\n    const onPreviewClick = React.useCallback(() => {\n        handleAnalytics(analyticsEvents);\n\n        setIsPlaying(true);\n\n        setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);\n    }, [handleAnalytics, analyticsEvents]);\n\n    const {onKeyDown: onPreviewKeyDown} = useActionHandlers(onPreviewClick);\n\n    React.useEffect(() => {\n        const updateSize = debounce(() => {\n            setCurrentHeight(\n                ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined,\n            );\n        }, 100);\n\n        updateSize();\n        window.addEventListener('resize', updateSize, {passive: true});\n        return () => {\n            window.removeEventListener('resize', updateSize);\n        };\n    }, [height]);\n\n    const iframeContent = React.useMemo(() => {\n        return (\n            <iframe\n                id={fullId}\n                src={iframeSrc}\n                width=\"100%\"\n                height=\"100%\"\n                title={i18n('iframe-title')}\n                frameBorder=\"0\"\n                allowFullScreen={true}\n                scrolling=\"no\"\n                allow=\"autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock\"\n                loading=\"lazy\"\n            />\n        );\n    }, [fullId, iframeSrc]);\n\n    React.useEffect(() => {\n        setHidePreview(false);\n    }, [src]);\n\n    if (!src) {\n        return null;\n    }\n\n    return (\n        <div className={b(null, className)} style={{height: currentHeight}} ref={ref}>\n            {iframeContent}\n            {previewImg && !hidePreview && !fullscreen && (\n                <div\n                    className={b('preview')}\n                    onClick={onPreviewClick}\n                    onKeyDown={onPreviewKeyDown}\n                    role=\"button\"\n                    tabIndex={0}\n                    aria-labelledby={playButton ? playButtonId : buttonId}\n                >\n                    <Image\n                        src={previewImg}\n                        className={b('image')}\n                        containerClassName={b('image-wrapper')}\n                        onLoad={onImageLoad}\n                    />\n                    {playButton || (\n                        <button title=\"Play\" id={buttonId} className={b('button')}>\n                            <Icon className={b('icon')} data={PlayFill} size={24} />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default VideoBlock;\n"]}

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

@@ -1,10 +1,12 @@
+import * as React from 'react';
 import { ClassNameProps, Modifiers } from "../../models/index.js";
 import { QAProps } from "../../models/common.js";
-export interface YFMWrapperProps extends ClassNameProps, QAProps {
+import { HTMLExtraProps } from "../HTML/HTML.js";
+export interface YFMWrapperProps extends React.PropsWithChildren, ClassNameProps, QAProps, HTMLExtraProps, React.HTMLProps<{}> {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
     id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, id, qa }: YFMWrapperProps) => import("react/jsx-runtime").JSX.Element;
+declare const YFMWrapper: ({ contentClassName, modifiers, children, ...rest }: YFMWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default YFMWrapper;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
-in your project via global 'yfm' class */
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from "../index.js";
 import { cn } from "../../utils/index.js";
 const yfm = cn('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (_jsx(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa, children: content }));
+const YFMWrapper = ({ contentClassName, modifiers, children, ...rest }) => (
+// @ts-ignore HTML component accepts children prop in actual usage
+_jsx(HTML, { contentClassName: yfm(modifiers ? toSnakeCase(modifiers) : {}, contentClassName), ...rest, children: children }));
 export default YFMWrapper;
 //# sourceMappingURL=YFMWrapper.js.map

package/build/esm/components/YFMWrapper/YFMWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"YFMWrapper.js","sourceRoot":"../../../../src","sources":["components/YFMWrapper/YFMWrapper.tsx"],"names":[],"mappings":";AAAA;yCACyC;AACzC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAC,oBAAyB;AAGtC,OAAO,EAAC,EAAE,EAAC,6BAAoB;AAE/B,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAStB,MAAM,UAAU,GAAG,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAkB,EAAE,EAAE,CAAC,CACvF,KAAC,IAAI,IACD,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,EAClE,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,YAEL,OAAO,GACL,CACV,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["/* we won't use 'pc' class prefix here to let you opportunity to define yfm styles\nin your project via global 'yfm' class */\nimport toSnakeCase from 'snakecase-keys';\n\nimport {HTML} from '../../components';\nimport {ClassNameProps, Modifiers} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {cn} from '../../utils';\n\nconst yfm = cn('yfm');\n\nexport interface YFMWrapperProps extends ClassNameProps, QAProps {\n    content: string;\n    modifiers?: Modifiers;\n    itemProp?: string;\n    id?: string;\n}\n\nconst YFMWrapper = ({content, modifiers, className, itemProp, id, qa}: YFMWrapperProps) => (\n    <HTML\n        className={yfm(modifiers ? toSnakeCase(modifiers) : {}, className)}\n        itemProp={itemProp}\n        id={id}\n        qa={qa}\n    >\n        {content}\n    </HTML>\n);\n\nexport default YFMWrapper;\n"]}
+{"version":3,"file":"YFMWrapper.js","sourceRoot":"../../../../src","sources":["components/YFMWrapper/YFMWrapper.tsx"],"names":[],"mappings":";AAIA,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAC,oBAAyB;AAGtC,OAAO,EAAC,EAAE,EAAC,6BAAoB;AAG/B,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AActB,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAkB,EAAE,EAAE,CAAC;AACtF,kEAAkE;AAClE,KAAC,IAAI,IACD,gBAAgB,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,gBAAgB,CAAC,KAC5E,IAAI,YAEP,QAAQ,GACN,CACV,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["/* we won't use 'pc' class prefix here to let you opportunity to define yfm styles\nin your project via global 'yfm' class */\nimport * as React from 'react';\n\nimport toSnakeCase from 'snakecase-keys';\n\nimport {HTML} from '../../components';\nimport {ClassNameProps, Modifiers} from '../../models';\nimport {QAProps} from '../../models/common';\nimport {cn} from '../../utils';\nimport {HTMLExtraProps} from '../HTML/HTML';\n\nconst yfm = cn('yfm');\n\nexport interface YFMWrapperProps\n    extends React.PropsWithChildren,\n        ClassNameProps,\n        QAProps,\n        HTMLExtraProps,\n        React.HTMLProps<{}> {\n    content: string;\n    modifiers?: Modifiers;\n    itemProp?: string;\n    id?: string;\n}\n\nconst YFMWrapper = ({contentClassName, modifiers, children, ...rest}: YFMWrapperProps) => (\n    // @ts-ignore HTML component accepts children prop in actual usage\n    <HTML\n        contentClassName={yfm(modifiers ? toSnakeCase(modifiers) : {}, contentClassName)}\n        {...rest}\n    >\n        {children}\n    </HTML>\n);\n\nexport default YFMWrapper;\n"]}

package/build/esm/components/YandexForm/YandexForm.js

@@ -84,7 +84,7 @@ const YandexForm = (props) => {
                 handleSubmit();
             }
         }
-        catch (error) {
+        catch {
             return;
         }
     }, [yaFormOrigin, id, onLoad, handleSubmit]);