@megafon/ui-shared 7.2.1 → 7.4.0

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -1 +1 @@
-@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before{color:var(--content)}.mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before{color:var(--stcBlack)}.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before{color:var(--stcWhite)}.mfui-breadcrumbs__item{margin-right:10px;padding-left:26px;position:relative}.mfui-breadcrumbs__item:before{content:"→";left:0;position:absolute;top:-1px}.mfui-breadcrumbs__item:first-child{padding-left:0}.mfui-breadcrumbs__item:first-child:before{display:none}.mfui-breadcrumbs__item:last-child{pointer-events:none}
+@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before{color:var(--content)}.mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before{color:var(--stcBlack)}.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before{color:var(--stcWhite)}.mfui-breadcrumbs_margin-top{margin-top:24px}.mfui-breadcrumbs__item{margin-right:10px;padding-left:26px;position:relative}.mfui-breadcrumbs__item:before{content:"→";left:0;position:absolute;top:-1px}.mfui-breadcrumbs__item:first-child{padding-left:0}.mfui-breadcrumbs__item:first-child:before{display:none}.mfui-breadcrumbs__item:last-child{pointer-events:none}

package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -16,6 +16,10 @@ export type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -3,6 +3,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolutions from "../../hooks/useResolutions";
 import BreadcrumbsItem from "./components/BreadcrumbsItem";
 import "./Breadcrumbs.css";
 var isObjectElement = function isObjectElement(item) {
@@ -18,10 +19,20 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     _ref$hasMicrodata = _ref.hasMicrodata,
-    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+    _ref$disabledOnMobile = _ref.disabledOnMobile,
+    disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+    _ref$hasMarginTop = _ref.hasMarginTop,
+    hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+  var _useResolutions = useResolutions(),
+    isMobile = _useResolutions.isMobile;
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts

@@ -24,7 +24,9 @@ export interface IButtonLinkBoxProps {
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Цвет кнопки */
-    buttonColor?: 'green' | 'purple';
+    buttonColor?: 'green' | 'purple' | 'green-soft' | 'purple-soft' | 'black';
+    /** Тип кнопки */
+    buttonType?: 'primary' | 'outline';
     /** Target свойство кнопки */
     buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
     /** Rel - атрибут тега <a> для кнопки */

package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js

@@ -13,6 +13,8 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     buttonDownload = _ref.buttonDownload,
     _ref$buttonColor = _ref.buttonColor,
     buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+    _ref$buttonType = _ref.buttonType,
+    buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
     buttonRel = _ref.buttonRel,
     linkTitle = _ref.linkTitle,
     linkUrl = _ref.linkUrl,
@@ -40,6 +42,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     className: classes.button,
     href: buttonUrl,
     theme: buttonColor,
+    type: buttonType,
     onClick: onButtonClick,
     target: buttonTarget,
     download: buttonDownload,

package/dist/es/components/ImageBanner/ImageBanner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}@media screen and (min-width:1024px){.mfui-image-banner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:420px}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;max-width:672px;width:50%}}.mfui-image-banner__picture_v-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-image-banner__picture_v-align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__image{display:block;max-height:150px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__image{max-height:230px}}@media screen and (min-width:1024px){.mfui-image-banner__image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-image-banner__content{z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media screen and (max-width:1023px){.mfui-image-banner__content{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (min-width:1024px){.mfui-image-banner__content{padding:0 80px;width:50%}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-image-banner__value{display:inline;margin:0 4px}@media screen and (max-width:1023px),screen and (min-width:1024px) and (max-width:1279px){.mfui-image-banner__value{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (max-width:767px){.mfui-image-banner__children{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-image-banner__children{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:1023px){.mfui-image-banner__badges-container{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 80px}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_has-image .mfui-image-banner__content{padding-right:0}.mfui-image-banner_full-width .mfui-image-banner__image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}
+h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}@media screen and (min-width:1024px){.mfui-image-banner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:420px}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;max-width:672px;width:50%}}.mfui-image-banner__picture_v-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-image-banner__picture_v-align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__image{display:block;max-height:150px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__image{max-height:230px}}@media screen and (min-width:1024px){.mfui-image-banner__image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-image-banner__content{z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media screen and (max-width:1023px){.mfui-image-banner__content{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (min-width:1024px){.mfui-image-banner__content{padding:0 80px;width:50%}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-image-banner__value{display:inline;margin:0 4px}@media screen and (max-width:1023px),screen and (min-width:1024px) and (max-width:1279px){.mfui-image-banner__value{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (max-width:767px){.mfui-image-banner__children{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-image-banner__children{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:1023px){.mfui-image-banner__badges-container{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_margin-top{margin-top:24px}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 80px}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_has-image .mfui-image-banner__content{padding-right:0}.mfui-image-banner_full-width .mfui-image-banner__image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}

package/dist/es/components/ImageBanner/ImageBanner.d.ts

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     children?: React.ReactNode;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -85,6 +85,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     isImageFullWidth = _ref2.isImageFullWidth,
     badges = _ref2.badges,
     adBlock = _ref2.adBlock,
+    _ref2$hasMarginTop = _ref2.hasMarginTop,
+    hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
     _ref2$children = _ref2.children,
     children = _ref2$children === void 0 ? [] : _ref2$children;
   var _React$useState = React.useState(false),
@@ -150,6 +152,7 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
+      'margin-top': hasMarginTop,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef

package/dist/es/components/PageTitle/PageTitle.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__breadcrumbs{margin-top:32px}@media screen and (max-width:767px){.mfui-page-title__breadcrumbs{display:none}}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
+h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}

package/dist/es/components/PageTitle/PageTitle.js

@@ -50,6 +50,8 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
+    hasMarginTop: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-video-banner{overflow:hidden;position:relative}@media screen and (min-width:1280px){.mfui-video-banner{margin-left:-80px;margin-right:-80px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner{margin-left:-64px;margin-right:-64px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner{margin-left:-48px;margin-right:-48px}}@media screen and (max-width:767px){.mfui-video-banner{margin-left:-16px;margin-right:-16px}}.mfui-video-banner_bottom-shadow:after{background:-webkit-gradient(linear,left top,left bottom,color-stop(95.25%,hsla(0,0%,100%,0)),to(rgba(0,0,0,.024)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 95.25%,rgba(0,0,0,.024));bottom:0;content:"";height:100%;position:absolute;right:0;width:100%}.mfui-video-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:400px}@media screen and (min-width:1440px){.mfui-video-banner__wrapper{height:562px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__wrapper{height:500px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:52px;padding-top:52px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:64px;padding-top:64px}}@media screen and (max-width:767px){.mfui-video-banner__wrapper{max-height:488px;padding-bottom:42px;padding-top:42px}}.mfui-video-banner__background-image,.mfui-video-banner__video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mfui-video-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-video-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}@media screen and (min-width:1440px){.mfui-video-banner__content{max-height:422px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__content{max-height:360px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__content{max-height:336px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__content{max-height:312px}}@media screen and (max-width:767px){.mfui-video-banner__content{max-height:404px}}.mfui-video-banner__content_text-color_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color_white{color:var(--stcWhite)}@media screen and (max-width:767px){.mfui-video-banner__content_text-color-mobile_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color-mobile_white{color:var(--stcWhite)}}.mfui-video-banner__description{margin-bottom:32px;white-space:pre-wrap}.mfui-video-banner__title{margin-bottom:24px}@media screen and (max-width:767px){.mfui-video-banner__title{margin-bottom:20px}}.mfui-video-banner__text,.mfui-video-banner__title{white-space:pre-wrap}@media screen and (max-width:767px){.mfui-video-banner__text,.mfui-video-banner__title{text-align:center}}.mfui-video-banner__btns-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:-24px -10px 0}@media screen and (max-width:767px){.mfui-video-banner__btns-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:479px){.mfui-video-banner__btns-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mfui-video-banner__button,.mfui-video-banner__link{margin:24px 10px 0}.mfui-video-banner__cost{font-size:12px;line-height:18px;margin-bottom:18px}.mfui-video-banner__value{display:inline;margin:0 3px}.mfui-video-banner__breadcrumbs,.mfui-video-banner__content{z-index:1}.mfui-video-banner__breadcrumbs{position:absolute;top:32px}@media screen and (max-width:767px){.mfui-video-banner__breadcrumbs{display:none}}.mfui-video-banner__grid{width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-video-banner{overflow:hidden;position:relative}@media screen and (min-width:1280px){.mfui-video-banner{margin-left:-80px;margin-right:-80px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner{margin-left:-64px;margin-right:-64px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner{margin-left:-48px;margin-right:-48px}}@media screen and (max-width:767px){.mfui-video-banner{margin-left:-16px;margin-right:-16px}}.mfui-video-banner_bottom-shadow:after{background:-webkit-gradient(linear,left top,left bottom,color-stop(95.25%,hsla(0,0%,100%,0)),to(rgba(0,0,0,.024)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 95.25%,rgba(0,0,0,.024));bottom:0;content:"";height:100%;position:absolute;right:0;width:100%}.mfui-video-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:400px}@media screen and (min-width:1440px){.mfui-video-banner__wrapper{height:562px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__wrapper{height:500px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:52px;padding-top:52px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:64px;padding-top:64px}}@media screen and (max-width:767px){.mfui-video-banner__wrapper{max-height:488px;padding-bottom:42px;padding-top:42px}}.mfui-video-banner__background-image,.mfui-video-banner__video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mfui-video-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-video-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}@media screen and (min-width:1440px){.mfui-video-banner__content{max-height:422px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__content{max-height:360px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__content{max-height:336px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__content{max-height:312px}}@media screen and (max-width:767px){.mfui-video-banner__content{max-height:404px}}.mfui-video-banner__content_text-color_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color_white{color:var(--stcWhite)}@media screen and (max-width:767px){.mfui-video-banner__content_text-color-mobile_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color-mobile_white{color:var(--stcWhite)}}.mfui-video-banner__description{margin-bottom:32px;white-space:pre-wrap}.mfui-video-banner__title{margin-bottom:24px}@media screen and (max-width:767px){.mfui-video-banner__title{margin-bottom:20px}}.mfui-video-banner__text,.mfui-video-banner__title{white-space:pre-wrap}@media screen and (max-width:767px){.mfui-video-banner__text,.mfui-video-banner__title{text-align:center}}.mfui-video-banner__btns-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:-24px -10px 0}@media screen and (max-width:767px){.mfui-video-banner__btns-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:479px){.mfui-video-banner__btns-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mfui-video-banner__button,.mfui-video-banner__link{margin:24px 10px 0}.mfui-video-banner__cost{font-size:12px;line-height:18px;margin-bottom:18px}.mfui-video-banner__value{display:inline;margin:0 3px}.mfui-video-banner__breadcrumbs,.mfui-video-banner__content{z-index:1}.mfui-video-banner__breadcrumbs{position:absolute;top:32px}.mfui-video-banner__grid{width:100%}

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -213,6 +213,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-video-block{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-video-block,.mfui-video-block__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-video-block__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:767px){.mfui-video-block__content{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-block__content{margin-top:32px}}@media screen and (min-width:1024px){.mfui-video-block__content{height:100%;margin-right:20px;padding-right:20px}.mfui-video-block__content_position-right{margin:0 0 0 20px;padding:0 0 0 20px}}.mfui-video-block__header{margin-bottom:24px}@media screen and (max-width:1023px){.mfui-video-block__header{margin-bottom:16px}}.mfui-video-block__description{font-size:15px;font-weight:400;line-height:24px}.mfui-video-block__button{-ms-flex-item-align:start;align-self:flex-start;margin-top:32px;max-width:100%}@media screen and (max-width:767px){.mfui-video-block__button{-ms-flex-item-align:center;align-self:center}}.mfui-video-block__video{-o-object-fit:contain;object-fit:contain;width:100%}.mfui-video-block__video_fix-background{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-video-block__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-video-block{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-video-block,.mfui-video-block__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-video-block__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:767px){.mfui-video-block__content{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-block__content{margin-top:32px}}@media screen and (min-width:1024px){.mfui-video-block__content{height:100%;margin-right:20px;padding-right:20px}.mfui-video-block__content_position-right{margin:0 0 0 20px;padding:0 0 0 20px}}.mfui-video-block__header{margin-bottom:24px}@media screen and (max-width:1023px){.mfui-video-block__header{margin-bottom:16px}}.mfui-video-block__description{font-size:15px;font-weight:400;line-height:24px}.mfui-video-block__button{-ms-flex-item-align:start;align-self:flex-start;margin-top:32px;max-width:100%}@media screen and (max-width:767px){.mfui-video-block__button{-ms-flex-item-align:center;align-self:center}}.mfui-video-block__video{-o-object-fit:contain;object-fit:contain;width:100%}.mfui-video-block__video_fix-background{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-video-block__rutube,.mfui-video-block__vk,.mfui-video-block__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}

package/dist/es/components/VideoBlock/VideoBlock.d.ts

@@ -18,6 +18,8 @@ export interface IContent {
 }
 export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
     readonly VIDEO: "video";
 };
 type VideoType = (typeof VideoTypes)[keyof typeof VideoTypes];
@@ -41,7 +43,7 @@ export interface IVideoBlockProps {
     content?: IContent;
     /** Тип видео */
     videoType?: VideoType;
-    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
     videoSrc: string;
     /** Наличие звука в видео */
     isMuted?: boolean;

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.date.to-json.js";
+import "core-js/modules/es.json.stringify.js";
 import * as React from 'react';
 import { Header, Button, Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
 import "./VideoBlock.css";
 export var VideoTypes = {
   YOUTUBE: 'youtube',
+  RUTUBE: 'rutube',
+  VK: 'vk',
   VIDEO: 'video'
 };
 export var testIdPrefix = 'VideoBlock';
@@ -33,6 +38,33 @@ var VideoBlock = function VideoBlock(_ref) {
     playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
     _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
     fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
+  var rutubeRef = React.useRef(null);
+  var autoPlayRutube = function autoPlayRutube() {
+    var current = rutubeRef.current;
+    if (current == null) {
+      return;
+    }
+    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
+      var _a;
+      var _entries = _slicedToArray(entries, 1),
+        entry = _entries[0];
+      if (entry && entry.isIntersecting) {
+        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+          type: 'player:play',
+          data: {}
+        }), '*');
+        obs.disconnect();
+      }
+    }, {
+      threshold: 0.5
+    }).observe(current);
+  };
+  React.useEffect(function () {
+    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
+      return;
+    }
+    autoPlayRutube();
+  }, [isAutoplay, videoType]);
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -62,6 +94,47 @@ var VideoBlock = function VideoBlock(_ref) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
+      case VideoTypes.RUTUBE:
+        {
+          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('rutube')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            ref: rutubeRef,
+            src: _src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+      case VideoTypes.VK:
+        {
+          var _videoSrc$split = videoSrc.split('_'),
+            _videoSrc$split2 = _slicedToArray(_videoSrc$split, 2),
+            oid = _videoSrc$split2[0],
+            id = _videoSrc$split2[1];
+          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
+          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
+          var _src2 = "".concat(_url).concat(_autoplay);
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('vk')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            src: _src2,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
       case VideoTypes.VIDEO:
         {
           return (

package/dist/lib/components/Breadcrumbs/Breadcrumbs.css

@@ -1 +1 @@
-@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before{color:var(--content)}.mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before{color:var(--stcBlack)}.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before{color:var(--stcWhite)}.mfui-breadcrumbs__item{margin-right:10px;padding-left:26px;position:relative}.mfui-breadcrumbs__item:before{content:"→";left:0;position:absolute;top:-1px}.mfui-breadcrumbs__item:first-child{padding-left:0}.mfui-breadcrumbs__item:first-child:before{display:none}.mfui-breadcrumbs__item:last-child{pointer-events:none}
+@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before{color:var(--content)}.mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before{color:var(--stcBlack)}.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before{color:var(--stcWhite)}.mfui-breadcrumbs_margin-top{margin-top:24px}.mfui-breadcrumbs__item{margin-right:10px;padding-left:26px;position:relative}.mfui-breadcrumbs__item:before{content:"→";left:0;position:absolute;top:-1px}.mfui-breadcrumbs__item:first-child{padding-left:0}.mfui-breadcrumbs__item:first-child:before{display:none}.mfui-breadcrumbs__item:last-child{pointer-events:none}

package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -16,6 +16,10 @@ export type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -10,6 +10,7 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.string.link.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
+var _useResolutions2 = _interopRequireDefault(require("../../hooks/useResolutions"));
 var _BreadcrumbsItem = _interopRequireDefault(require("./components/BreadcrumbsItem"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -27,10 +28,20 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     _ref$hasMicrodata = _ref.hasMicrodata,
-    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+    _ref$disabledOnMobile = _ref.disabledOnMobile,
+    disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+    _ref$hasMarginTop = _ref.hasMarginTop,
+    hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+  var _useResolutions = (0, _useResolutions2["default"])(),
+    isMobile = _useResolutions.isMobile;
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts

@@ -24,7 +24,9 @@ export interface IButtonLinkBoxProps {
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Цвет кнопки */
-    buttonColor?: 'green' | 'purple';
+    buttonColor?: 'green' | 'purple' | 'green-soft' | 'purple-soft' | 'black';
+    /** Тип кнопки */
+    buttonType?: 'primary' | 'outline';
     /** Target свойство кнопки */
     buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
     /** Rel - атрибут тега <a> для кнопки */

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js

@@ -22,6 +22,8 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     buttonDownload = _ref.buttonDownload,
     _ref$buttonColor = _ref.buttonColor,
     buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+    _ref$buttonType = _ref.buttonType,
+    buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
     buttonRel = _ref.buttonRel,
     linkTitle = _ref.linkTitle,
     linkUrl = _ref.linkUrl,
@@ -49,6 +51,7 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
     className: classes.button,
     href: buttonUrl,
     theme: buttonColor,
+    type: buttonType,
     onClick: onButtonClick,
     target: buttonTarget,
     download: buttonDownload,

package/dist/lib/components/ImageBanner/ImageBanner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}@media screen and (min-width:1024px){.mfui-image-banner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:420px}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;max-width:672px;width:50%}}.mfui-image-banner__picture_v-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-image-banner__picture_v-align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__image{display:block;max-height:150px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__image{max-height:230px}}@media screen and (min-width:1024px){.mfui-image-banner__image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-image-banner__content{z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media screen and (max-width:1023px){.mfui-image-banner__content{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (min-width:1024px){.mfui-image-banner__content{padding:0 80px;width:50%}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-image-banner__value{display:inline;margin:0 4px}@media screen and (max-width:1023px),screen and (min-width:1024px) and (max-width:1279px){.mfui-image-banner__value{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (max-width:767px){.mfui-image-banner__children{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-image-banner__children{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:1023px){.mfui-image-banner__badges-container{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 80px}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_has-image .mfui-image-banner__content{padding-right:0}.mfui-image-banner_full-width .mfui-image-banner__image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}
+h1,h2,h3,h4,h5{margin:0}.mfui-image-banner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}@media screen and (min-width:1024px){.mfui-image-banner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:420px}}.mfui-image-banner__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:1024px){.mfui-image-banner__picture{height:100%;max-width:672px;width:50%}}.mfui-image-banner__picture_v-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-image-banner__picture_v-align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-image-banner__picture_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-image-banner__image{display:block;max-height:150px;max-width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__image{max-height:230px}}@media screen and (min-width:1024px){.mfui-image-banner__image{max-height:100%;-o-object-fit:contain;object-fit:contain}}.mfui-image-banner__content{z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media screen and (max-width:1023px){.mfui-image-banner__content{padding:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-image-banner__content{text-align:center}}@media screen and (min-width:1024px){.mfui-image-banner__content{padding:0 80px;width:50%}}.mfui-image-banner__description{margin-top:16px;white-space:pre-wrap}.mfui-image-banner__cost{font-size:15px;font-weight:500;line-height:24px;margin-top:16px}.mfui-image-banner__value{display:inline;margin:0 4px}@media screen and (max-width:1023px),screen and (min-width:1024px) and (max-width:1279px){.mfui-image-banner__value{line-height:21px}}.mfui-image-banner__text,.mfui-image-banner__title{white-space:pre-wrap}.mfui-image-banner__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}@media screen and (max-width:767px){.mfui-image-banner__children{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media screen and (min-width:768px){.mfui-image-banner__children{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (min-width:1024px){.mfui-image-banner__children{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:1023px){.mfui-image-banner__badges-container{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}}.mfui-image-banner__badges{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:16px}.mfui-image-banner__ad-block{margin:0 0 16px auto}@media screen and (min-width:1024px){.mfui-image-banner__ad-block{position:absolute;right:24px;top:24px}}.mfui-image-banner_margin-top{margin-top:24px}.mfui-image-banner_radius_rounded{border-radius:24px}@media screen and (min-width:1024px){.mfui-image-banner_auto-height .mfui-image-banner__content{padding:48px 80px}.mfui-image-banner_auto-height{height:auto}.mfui-image-banner_has-image .mfui-image-banner__content{padding-right:0}.mfui-image-banner_full-width .mfui-image-banner__image{bottom:0;display:block;max-width:unset;position:absolute;right:0}.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}}.mfui-image-banner_background-color_green{background-color:var(--brandGreen)}.mfui-image-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-image-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-image-banner_background-color_light{background-color:#f6f2f9}.mfui-image-banner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-image-banner_text-color_light .mfui-image-banner__content{color:var(--stcWhite)}.mfui-image-banner_text-color_dark .mfui-image-banner__content{color:var(--stcBlack)}

package/dist/lib/components/ImageBanner/ImageBanner.d.ts

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     children?: React.ReactNode;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -94,6 +94,8 @@ var ImageBanner = function ImageBanner(_ref2) {
     isImageFullWidth = _ref2.isImageFullWidth,
     badges = _ref2.badges,
     adBlock = _ref2.adBlock,
+    _ref2$hasMarginTop = _ref2.hasMarginTop,
+    hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
     _ref2$children = _ref2.children,
     children = _ref2$children === void 0 ? [] : _ref2$children;
   var _React$useState = React.useState(false),
@@ -159,6 +161,7 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
+      'margin-top': hasMarginTop,
       radius: radius
     }, [className, classes.root]),
     ref: rootRef

package/dist/lib/components/PageTitle/PageTitle.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__breadcrumbs{margin-top:32px}@media screen and (max-width:767px){.mfui-page-title__breadcrumbs{display:none}}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
+h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}

package/dist/lib/components/PageTitle/PageTitle.js

@@ -59,6 +59,8 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
+    hasMarginTop: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {

package/dist/lib/components/VideoBanner/VideoBanner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-video-banner{overflow:hidden;position:relative}@media screen and (min-width:1280px){.mfui-video-banner{margin-left:-80px;margin-right:-80px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner{margin-left:-64px;margin-right:-64px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner{margin-left:-48px;margin-right:-48px}}@media screen and (max-width:767px){.mfui-video-banner{margin-left:-16px;margin-right:-16px}}.mfui-video-banner_bottom-shadow:after{background:-webkit-gradient(linear,left top,left bottom,color-stop(95.25%,hsla(0,0%,100%,0)),to(rgba(0,0,0,.024)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 95.25%,rgba(0,0,0,.024));bottom:0;content:"";height:100%;position:absolute;right:0;width:100%}.mfui-video-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:400px}@media screen and (min-width:1440px){.mfui-video-banner__wrapper{height:562px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__wrapper{height:500px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:52px;padding-top:52px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:64px;padding-top:64px}}@media screen and (max-width:767px){.mfui-video-banner__wrapper{max-height:488px;padding-bottom:42px;padding-top:42px}}.mfui-video-banner__background-image,.mfui-video-banner__video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mfui-video-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-video-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}@media screen and (min-width:1440px){.mfui-video-banner__content{max-height:422px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__content{max-height:360px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__content{max-height:336px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__content{max-height:312px}}@media screen and (max-width:767px){.mfui-video-banner__content{max-height:404px}}.mfui-video-banner__content_text-color_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color_white{color:var(--stcWhite)}@media screen and (max-width:767px){.mfui-video-banner__content_text-color-mobile_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color-mobile_white{color:var(--stcWhite)}}.mfui-video-banner__description{margin-bottom:32px;white-space:pre-wrap}.mfui-video-banner__title{margin-bottom:24px}@media screen and (max-width:767px){.mfui-video-banner__title{margin-bottom:20px}}.mfui-video-banner__text,.mfui-video-banner__title{white-space:pre-wrap}@media screen and (max-width:767px){.mfui-video-banner__text,.mfui-video-banner__title{text-align:center}}.mfui-video-banner__btns-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:-24px -10px 0}@media screen and (max-width:767px){.mfui-video-banner__btns-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:479px){.mfui-video-banner__btns-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mfui-video-banner__button,.mfui-video-banner__link{margin:24px 10px 0}.mfui-video-banner__cost{font-size:12px;line-height:18px;margin-bottom:18px}.mfui-video-banner__value{display:inline;margin:0 3px}.mfui-video-banner__breadcrumbs,.mfui-video-banner__content{z-index:1}.mfui-video-banner__breadcrumbs{position:absolute;top:32px}@media screen and (max-width:767px){.mfui-video-banner__breadcrumbs{display:none}}.mfui-video-banner__grid{width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-video-banner{overflow:hidden;position:relative}@media screen and (min-width:1280px){.mfui-video-banner{margin-left:-80px;margin-right:-80px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner{margin-left:-64px;margin-right:-64px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner{margin-left:-48px;margin-right:-48px}}@media screen and (max-width:767px){.mfui-video-banner{margin-left:-16px;margin-right:-16px}}.mfui-video-banner_bottom-shadow:after{background:-webkit-gradient(linear,left top,left bottom,color-stop(95.25%,hsla(0,0%,100%,0)),to(rgba(0,0,0,.024)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 95.25%,rgba(0,0,0,.024));bottom:0;content:"";height:100%;position:absolute;right:0;width:100%}.mfui-video-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:400px}@media screen and (min-width:1440px){.mfui-video-banner__wrapper{height:562px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__wrapper{height:500px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:52px;padding-top:52px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:64px;padding-top:64px}}@media screen and (max-width:767px){.mfui-video-banner__wrapper{max-height:488px;padding-bottom:42px;padding-top:42px}}.mfui-video-banner__background-image,.mfui-video-banner__video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mfui-video-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-video-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}@media screen and (min-width:1440px){.mfui-video-banner__content{max-height:422px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__content{max-height:360px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__content{max-height:336px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__content{max-height:312px}}@media screen and (max-width:767px){.mfui-video-banner__content{max-height:404px}}.mfui-video-banner__content_text-color_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color_white{color:var(--stcWhite)}@media screen and (max-width:767px){.mfui-video-banner__content_text-color-mobile_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color-mobile_white{color:var(--stcWhite)}}.mfui-video-banner__description{margin-bottom:32px;white-space:pre-wrap}.mfui-video-banner__title{margin-bottom:24px}@media screen and (max-width:767px){.mfui-video-banner__title{margin-bottom:20px}}.mfui-video-banner__text,.mfui-video-banner__title{white-space:pre-wrap}@media screen and (max-width:767px){.mfui-video-banner__text,.mfui-video-banner__title{text-align:center}}.mfui-video-banner__btns-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:-24px -10px 0}@media screen and (max-width:767px){.mfui-video-banner__btns-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:479px){.mfui-video-banner__btns-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mfui-video-banner__button,.mfui-video-banner__link{margin:24px 10px 0}.mfui-video-banner__cost{font-size:12px;line-height:18px;margin-bottom:18px}.mfui-video-banner__value{display:inline;margin:0 3px}.mfui-video-banner__breadcrumbs,.mfui-video-banner__content{z-index:1}.mfui-video-banner__breadcrumbs{position:absolute;top:32px}.mfui-video-banner__grid{width:100%}

package/dist/lib/components/VideoBanner/VideoBanner.js

@@ -221,6 +221,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__PURE__*/React.createElement(_uiCore.ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,

package/dist/lib/components/VideoBlock/VideoBlock.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-video-block{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-video-block,.mfui-video-block__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-video-block__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:767px){.mfui-video-block__content{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-block__content{margin-top:32px}}@media screen and (min-width:1024px){.mfui-video-block__content{height:100%;margin-right:20px;padding-right:20px}.mfui-video-block__content_position-right{margin:0 0 0 20px;padding:0 0 0 20px}}.mfui-video-block__header{margin-bottom:24px}@media screen and (max-width:1023px){.mfui-video-block__header{margin-bottom:16px}}.mfui-video-block__description{font-size:15px;font-weight:400;line-height:24px}.mfui-video-block__button{-ms-flex-item-align:start;align-self:flex-start;margin-top:32px;max-width:100%}@media screen and (max-width:767px){.mfui-video-block__button{-ms-flex-item-align:center;align-self:center}}.mfui-video-block__video{-o-object-fit:contain;object-fit:contain;width:100%}.mfui-video-block__video_fix-background{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-video-block__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}
+h1,h2,h3,h4,h5{margin:0}.mfui-video-block{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-video-block,.mfui-video-block__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-video-block__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:767px){.mfui-video-block__content{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-block__content{margin-top:32px}}@media screen and (min-width:1024px){.mfui-video-block__content{height:100%;margin-right:20px;padding-right:20px}.mfui-video-block__content_position-right{margin:0 0 0 20px;padding:0 0 0 20px}}.mfui-video-block__header{margin-bottom:24px}@media screen and (max-width:1023px){.mfui-video-block__header{margin-bottom:16px}}.mfui-video-block__description{font-size:15px;font-weight:400;line-height:24px}.mfui-video-block__button{-ms-flex-item-align:start;align-self:flex-start;margin-top:32px;max-width:100%}@media screen and (max-width:767px){.mfui-video-block__button{-ms-flex-item-align:center;align-self:center}}.mfui-video-block__video{-o-object-fit:contain;object-fit:contain;width:100%}.mfui-video-block__video_fix-background{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-video-block__rutube,.mfui-video-block__vk,.mfui-video-block__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}

package/dist/lib/components/VideoBlock/VideoBlock.d.ts

@@ -18,6 +18,8 @@ export interface IContent {
 }
 export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
     readonly VIDEO: "video";
 };
 type VideoType = (typeof VideoTypes)[keyof typeof VideoTypes];
@@ -41,7 +43,7 @@ export interface IVideoBlockProps {
     content?: IContent;
     /** Тип видео */
     videoType?: VideoType;
-    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
     videoSrc: string;
     /** Наличие звука в видео */
     isMuted?: boolean;

package/dist/lib/components/VideoBlock/VideoBlock.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.testIdPrefix = exports["default"] = exports.VideoTypes = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.date.to-json.js");
+require("core-js/modules/es.json.stringify.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -17,6 +20,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var VideoTypes = exports.VideoTypes = {
   YOUTUBE: 'youtube',
+  RUTUBE: 'rutube',
+  VK: 'vk',
   VIDEO: 'video'
 };
 var testIdPrefix = exports.testIdPrefix = 'VideoBlock';
@@ -42,6 +47,33 @@ var VideoBlock = function VideoBlock(_ref) {
     playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
     _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
     fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
+  var rutubeRef = React.useRef(null);
+  var autoPlayRutube = function autoPlayRutube() {
+    var current = rutubeRef.current;
+    if (current == null) {
+      return;
+    }
+    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
+      var _a;
+      var _entries = (0, _slicedToArray2["default"])(entries, 1),
+        entry = _entries[0];
+      if (entry && entry.isIntersecting) {
+        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+          type: 'player:play',
+          data: {}
+        }), '*');
+        obs.disconnect();
+      }
+    }, {
+      threshold: 0.5
+    }).observe(current);
+  };
+  React.useEffect(function () {
+    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
+      return;
+    }
+    autoPlayRutube();
+  }, [isAutoplay, videoType]);
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -71,6 +103,47 @@ var VideoBlock = function VideoBlock(_ref) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
+      case VideoTypes.RUTUBE:
+        {
+          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('rutube')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            ref: rutubeRef,
+            src: _src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+      case VideoTypes.VK:
+        {
+          var _videoSrc$split = videoSrc.split('_'),
+            _videoSrc$split2 = (0, _slicedToArray2["default"])(_videoSrc$split, 2),
+            oid = _videoSrc$split2[0],
+            id = _videoSrc$split2[1];
+          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
+          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
+          var _src2 = "".concat(_url).concat(_autoplay);
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('vk')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            src: _src2,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
       case VideoTypes.VIDEO:
         {
           return /*#__PURE__*/(

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "7.2.1",
+    "version": "7.4.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^7.1.1",
+        "@megafon/ui-core": "^7.2.1",
         "@megafon/ui-helpers": "^3.1.1",
-        "@megafon/ui-icons": "^3.0.2",
+        "@megafon/ui-icons": "^3.2.0",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "884456a8e9c55e1a47f5c4b1dc75082fb1de96c4"
+    "gitHead": "30ed829a286373798a4328c575e1b23f8b726b41"
 }