@gravity-ui/page-constructor 5.31.2 → 6.0.0-alpha.0

package/build/cjs/blocks/validators.d.ts

@@ -10,6 +10,7 @@ export * from './Info/schema';
 export * from './Media/schema';
 export * from './PromoFeaturesBlock/schema';
 export * from './Questions/schema';
+export * from './SliderOld/schema';
 export * from './Slider/schema';
 export * from './Table/schema';
 export * from './Share/schema';

package/build/cjs/blocks/validators.js

@@ -13,6 +13,7 @@ tslib_1.__exportStar(require("./Info/schema"), exports);
 tslib_1.__exportStar(require("./Media/schema"), exports);
 tslib_1.__exportStar(require("./PromoFeaturesBlock/schema"), exports);
 tslib_1.__exportStar(require("./Questions/schema"), exports);
+tslib_1.__exportStar(require("./SliderOld/schema"), exports);
 tslib_1.__exportStar(require("./Slider/schema"), exports);
 tslib_1.__exportStar(require("./Table/schema"), exports);
 tslib_1.__exportStar(require("./Share/schema"), exports);

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

@@ -37,10 +37,6 @@ unpredictable css rules order in build */
   margin-bottom: 2px;
   margin-right: 8px;
 }
-.pc-content-list_size_s .pc-content-list__text {
-  font-size: var(--g-text-body-1-font-size);
-  line-height: var(--g-text-body-1-line-height);
-}
 .pc-content-list_size_s .pc-content-list__item:not(:last-child) {
   margin-bottom: 12px;
 }
@@ -77,6 +73,11 @@ unpredictable css rules order in build */
 .pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
   color: var(--g-color-text-light-secondary);
 }
+.pc-content-list_size_s.pc-content-list_size_s .pc-content-list__text {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+
 .pc-content-list__icon {
   display: block;
 }

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

@@ -26,7 +26,7 @@ const ContentList = ({ list, size = 'l', qa, theme }) => {
             react_1.default.createElement("div", null,
                 title &&
                     react_1.default.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, react_1.default.createElement(YFMWrapper_1.default, { content: title, modifiers: { constructor: true } })),
-                text && (react_1.default.createElement(YFMWrapper_1.default, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
+                text && (react_1.default.createElement(YFMWrapper_1.default, { contentClassName: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
     })));
 };
 exports.default = ContentList;

package/build/cjs/components/FullscreenImage/FullscreenImage.css

@@ -6,12 +6,31 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__image-wrapper {
   position: relative;
 }
-.pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__icon-wrapper {
+.pc-fullscreen-image__image-wrapper:hover .pc-fullscreen-image__expand-icon-wrapper {
   opacity: 1;
 }
 .pc-fullscreen-image__modal-content {
   position: relative;
   border-radius: var(--pc-border-radius);
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content-wrapper {
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content_loaded {
+  max-width: fit-content;
+}
+.pc-fullscreen-image__modal_with-slider .g-modal__content-wrapper {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  justify-content: center;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
+  background-color: transparent;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__expand-icon-wrapper, .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__close-icon-wrapper {
+  opacity: 1;
 }
 .pc-fullscreen-image__modal-image {
   display: block;
@@ -19,10 +38,32 @@ unpredictable css rules order in build */
   max-height: 70vh;
   overflow: hidden;
 }
+.pc-fullscreen-image__modal-slider {
+  max-width: 100vw;
+  width: 100%;
+  height: 100vh;
+}
+.pc-fullscreen-image__modal-slider_item {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pc-fullscreen-image__modal-slider_item-image {
+  display: block;
+  margin: auto;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  margin-top: 40px;
+  max-height: calc(100vh - 120px);
+  max-width: 100%;
+  object-fit: contain;
+  object-position: center;
+}
 .pc-fullscreen-image__modal .g-modal__content, .pc-fullscreen-image__modal-image {
   border-radius: var(--pc-border-radius);
 }
-.pc-fullscreen-image__icon-wrapper {
+.pc-fullscreen-image__expand-icon-wrapper {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -35,9 +76,45 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: var(--g-color-base-simple-hover-solid);
+  cursor: pointer;
+  opacity: 0;
+  transition: 0.3s;
   position: absolute;
   right: 16px;
   top: 16px;
+}
+.pc-fullscreen-image__expand-icon-wrapper:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-fullscreen-image__expand-icon-wrapper:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-fullscreen-image__expand-icon-wrapper:focus {
+  opacity: 1;
+}
+@media (max-width: 769px) {
+  .pc-fullscreen-image__expand-icon-wrapper {
+    opacity: 1;
+  }
+}
+.pc-fullscreen-image__close-icon-wrapper {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 8px;
@@ -45,36 +122,37 @@ unpredictable css rules order in build */
   cursor: pointer;
   opacity: 0;
   transition: 0.3s;
+  z-index: 1001;
+  position: absolute;
+  right: 24px;
+  top: 24px;
 }
-.pc-fullscreen-image__icon-wrapper:focus {
+.pc-fullscreen-image__close-icon-wrapper:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-fullscreen-image__icon-wrapper:focus:not(:focus-visible) {
+.pc-fullscreen-image__close-icon-wrapper:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-fullscreen-image__icon-wrapper:focus {
+.pc-fullscreen-image__close-icon-wrapper:focus {
   opacity: 1;
 }
+@media (max-width: 769px) {
+  .pc-fullscreen-image__close-icon-wrapper {
+    opacity: 1;
+  }
+}
 .pc-fullscreen-image__icon {
   color: var(--g-color-text-hint);
 }
 .pc-fullscreen-image__icon_hover:hover {
   color: var(--g-color-text-secondary);
 }
-@media (max-width: 1185px) {
-  .pc-fullscreen-image__modal-image {
-    width: 100%;
-  }
-}
-@media (max-width: 1081px) {
-  .pc-fullscreen-image__image {
-    pointer-events: none;
-  }
-  .pc-fullscreen-image__icon-wrapper {
-    display: none;
+@media (max-width: 769px) {
+  .pc-fullscreen-image__modal .g-modal__content-wrapper {
+    margin: 8px;
   }
-  .pc-fullscreen-image__modal {
-    display: none !important; /* stylelint-disable-line declaration-no-important */
+  .pc-fullscreen-image__modal_with-slider .g-modal__content-wrapper {
+    margin: 0;
   }
 }

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

@@ -1,10 +1,15 @@
 import { CSSProperties, HTMLProps } from 'react';
+import { ImageProps as ModelImageProps } from '../../models';
 import { ImageProps } from '../Image/Image';
 export interface FullscreenImageProps extends ImageProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;
     extraProps?: HTMLProps<HTMLDivElement>;
+    sliderData?: {
+        items: ModelImageProps[];
+        initialIndex: number;
+    };
 }
 declare const FullscreenImage: (props: FullscreenImageProps) => JSX.Element;
 export default FullscreenImage;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -4,25 +4,39 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const blocks_1 = require("../../blocks");
+const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const utils_2 = require("../Media/Image/utils");
 const i18n_1 = require("./i18n");
 const b = (0, utils_1.block)('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 24;
 const FullscreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.i18n)('img-alt'), extraProps } = props;
+    const { imageClassName, sliderData, modalImageClass, imageStyle, alt = (0, i18n_1.i18n)('img-alt'), extraProps, } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [sliderLoaded, setSliderLoaded] = (0, react_1.useState)(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
+    (0, react_1.useEffect)(() => {
+        if (sliderData && !isOpened) {
+            setSliderLoaded(false);
+        }
+    }, [isOpened, sliderData]);
+    const handleSliderImageLoad = () => {
+        setSliderLoaded(true);
+    };
     return (react_1.default.createElement("div", Object.assign({ className: b() }, extraProps),
         react_1.default.createElement("div", { className: b('image-wrapper') },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
-            react_1.default.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
+            react_1.default.createElement("button", { className: b('expand-icon-wrapper'), onClick: openModal },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
-        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content') },
-            react_1.default.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close') },
+        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }) },
+            react_1.default.createElement("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close') },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
-            react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) }))))));
+            sliderData ? (react_1.default.createElement("div", { className: b('modal-slider') },
+                react_1.default.createElement(blocks_1.SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: models_1.SliderType.FullscreenCard }, sliderData.items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('modal-slider_item') },
+                    react_1.default.createElement(Image_1.default, Object.assign({ onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper') }, (0, utils_2.getMediaImage)(item))))))))) : (react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 exports.default = FullscreenImage;

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

@@ -1,19 +1,26 @@
-import React from 'react';
-import { QAProps } from '../../models/common';
-export interface HTMLProps {
-    children?: string;
+import React, { PropsWithChildren } from 'react';
+import { ClassNameProps, QAProps, TagName } from '../../models/common';
+export interface HTMLExtraProps {
+    tagName?: TagName;
+    contentPosition?: 'start' | 'end';
+    contentClassName?: string;
+    onlyContent?: boolean;
+}
+export interface HTMLProps extends HTMLExtraProps, 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 | undefined;
+    id?: string | undefined;
     dangerouslySetInnerHTML: {
-        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (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/cjs/components/HTML/HTML.js

@@ -1,18 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const HTML = ({ children, block = false, className, itemProp, id, qa, }) => {
-    if (!children) {
-        return null;
+const HTML = (_a) => {
+    var { content, children, block = false, className, contentClassName, qa, contentPosition = 'start', tagName = 'span', onlyContent = false } = _a, rest = tslib_1.__rest(_a, ["content", "children", "block", "className", "contentClassName", "qa", "contentPosition", "tagName", "onlyContent"]);
+    const renderedContent = (0, react_1.useMemo)(() => {
+        return content
+            ? react_1.default.createElement((0, utils_1.selectTagName)({ content, block, tagName, children }), Object.assign({ dangerouslySetInnerHTML: { __html: content }, className: contentClassName, 'data-qa': qa }, rest))
+            : null;
+    }, [block, children, content, contentClassName, qa, rest, tagName]);
+    if (onlyContent) {
+        return renderedContent;
     }
-    return react_1.default.createElement(block || (0, utils_1.hasBlockTag)(children) ? 'div' : 'span', {
-        dangerouslySetInnerHTML: { __html: children },
-        className,
-        itemProp,
-        id,
-        'data-qa': qa,
-    });
+    if (children) {
+        return react_1.default.createElement(tagName, {
+            className,
+        }, contentPosition === 'start' ? renderedContent : null, children, contentPosition === 'end' ? renderedContent : null);
+    }
+    return renderedContent;
 };
 exports.default = HTML;

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

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

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const web_1 = require("@react-spring/web");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const Slider_1 = tslib_1.__importDefault(require("../../../blocks/Slider/Slider"));
+const blocks_1 = require("../../../blocks");
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../../BackgroundImage/BackgroundImage"));
@@ -15,7 +15,7 @@ const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-image');
 exports.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;
@@ -41,9 +41,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 = (0, utils_2.getMediaImage)(item);
-        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData })));
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
@@ -56,7 +56,9 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
+        return (react_1.default.createElement(blocks_1.SliderBlock, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem
+            ? renderFullscreenImage(item, { items: imageArray, initialIndex: index })
+            : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

package/build/cjs/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/cjs/components/Media/Media.d.ts

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

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

@@ -14,14 +14,14 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, 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] = (0, react_1.useState)(false);
     const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "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 }));
         }
         if (video) {
             const videoProps = {
@@ -69,6 +69,7 @@ const Media = (props) => {
         isBackground,
         hasVideoFallback,
         fullscreen,
+        isFullscreenImageCover,
         qaAttributes.image,
         qaAttributes.video,
         onImageLoad,

package/build/cjs/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/cjs/components/MetaInfo/MetaInfo.js

@@ -5,5 +5,5 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('meta-info');
-const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, contentClassName: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 exports.default = MetaInfo;

package/build/cjs/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/cjs/components/Table/Table.js

@@ -25,7 +25,9 @@ class Table extends react_1.default.Component {
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
+        return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.YFMWrapper, { tagName: "span", content: cell, modifiers: {
+                constructor: true,
+            } }))))))))));
     }
     renderMarker(type, cell) {
         return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }, type === 'tick' ? (react_1.default.createElement(uikit_1.Icon, { size: 20, className: b('marker_tick', { check: Number(cell) === 1 }), data: Number(cell) === 1 ? icons_1.Check : icons_1.Minus })) : null));
@@ -33,7 +35,7 @@ class Table extends react_1.default.Component {
     renderLegend(legend, marker) {
         return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
+            react_1.default.createElement(__1.YFMWrapper, { contentClassName: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

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

@@ -96,22 +96,24 @@ 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;
 }
-.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/cjs/components/Title/TitleItem.js

@@ -29,7 +29,9 @@ const TitleItem = (props) => {
     const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const textMarkup = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(__1.HTML, { className: b('text') }, text),
+        react_1.default.createElement(__1.YFMWrapper, { className: b('text'), contentClassName: b('text'), content: text, modifiers: {
+                constructor: true,
+            } }),
         custom && (react_1.default.createElement(react_1.default.Fragment, null,
             "\u00A0",
             react_1.default.createElement("span", { className: b('custom') }, custom)))));

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

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

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -8,5 +8,8 @@ const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const yfm = (0, utils_1.cn)('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
+const YFMWrapper = (_a) => {
+    var { contentClassName, modifiers, children } = _a, rest = tslib_1.__rest(_a, ["contentClassName", "modifiers", "children"]);
+    return (react_1.default.createElement(components_1.HTML, Object.assign({ contentClassName: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, contentClassName) }, rest), children));
+};
 exports.default = YFMWrapper;

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

@@ -1,5 +1,5 @@
 export declare const blockMap: {
-    "slider-block": (props: import("react").PropsWithChildren<import("./blocks/Slider/Slider").SliderProps>) => JSX.Element;
+    "slider-old-block": (props: import("react").PropsWithChildren<import("./blocks/SliderOld/SliderOld").SliderOldProps>) => JSX.Element;
     "extended-features-block": ({ title, description, items, colSizes, animated, }: import("./models").ExtendedFeaturesProps) => JSX.Element;
     "promo-features-block": (props: import("./models").PromoFeaturesProps) => JSX.Element;
     "questions-block": (props: import("./models").QuestionsProps) => JSX.Element;
@@ -18,7 +18,7 @@ export declare const blockMap: {
     "map-block": ({ map, border, disableShadow, ...props }: import("./models").MapBlockProps) => JSX.Element;
     "filter-block": import("react").FC<import("./models").FilterBlockProps>;
     "form-block": import("react").FC<import("./models").FormBlockProps>;
-    "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
+    "slider-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/Slider/Slider").SliderProps>) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/cjs/constructor-items.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
 const tslib_1 = require("tslib");
 const blocks_1 = require("./blocks");
-const unstable_1 = require("./blocks/unstable");
 const models_1 = require("./models");
 const NavigationItem_1 = require("./navigation/components/NavigationItem");
 const SocialIcon_1 = tslib_1.__importDefault(require("./navigation/components/SocialIcon/SocialIcon"));
 const sub_blocks_1 = require("./sub-blocks");
 exports.blockMap = {
-    [models_1.BlockType.SliderBlock]: blocks_1.SliderBlock,
+    [models_1.BlockType.SliderOldBlock]: blocks_1.SliderOldBlock,
     [models_1.BlockType.ExtendedFeaturesBlock]: blocks_1.ExtendedFeaturesBlock,
     [models_1.BlockType.PromoFeaturesBlock]: blocks_1.PromoFeaturesBlock,
     [models_1.BlockType.QuestionsBlock]: blocks_1.QuestionsBlock,
@@ -28,8 +27,7 @@ exports.blockMap = {
     [models_1.BlockType.MapBlock]: blocks_1.MapBlock,
     [models_1.BlockType.FilterBlock]: blocks_1.FilterBlock,
     [models_1.BlockType.FormBlock]: blocks_1.FormBlock,
-    // unstable
-    [models_1.BlockType.SliderNewBlock]: unstable_1.SliderNewBlock,
+    [models_1.BlockType.SliderBlock]: blocks_1.SliderBlock,
 };
 exports.subBlockMap = {
     [models_1.SubBlockType.Divider]: sub_blocks_1.Divider,

package/build/cjs/editor/data/templates/{slider-new-block.json → slider-old-block.json}

@@ -1,8 +1,8 @@
 {
   "template": {
-    "type": "slider-new-block",
+    "type": "slider-old-block",
     "title": {
-      "text": "Slider new",
+      "text": "Slider",
       "url": "https://example.com"
     },
     "children": [

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

@@ -50,3 +50,4 @@ export type AnalyticsEventsProp = AnalyticsEvent | AnalyticsEvent[];
 export interface AnalyticsEventsBase {
     analyticsEvents?: AnalyticsEventsProp;
 }
+export type TagName = 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'section' | 'p';