@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/dist/lib/components/TextBox/TextBox.js

@@ -0,0 +1,70 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _uiCore = require("@megafon/ui-core");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-text-box');
+
+var TextBox = function TextBox(_ref) {
+  var _ref$textCenter = _ref.textCenter,
+      textCenter = _ref$textCenter === void 0 ? false : _ref$textCenter,
+      _ref$centeringWithLim = _ref.centeringWithLimitedWidth,
+      centeringWithLimitedWidth = _ref$centeringWithLim === void 0 ? false : _ref$centeringWithLim,
+      _ref$isFullWidth = _ref.isFullWidth,
+      isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      rootRef = _ref.rootRef,
+      className = _ref.className,
+      children = _ref.children;
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('content')
+    }, children);
+  };
+
+  var renderTextBoxWithGrid = function renderTextBoxWithGrid() {
+    return /*#__PURE__*/React.createElement(_uiCore.Grid, {
+      hAlign: centeringWithLimitedWidth ? 'center' : 'left'
+    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+      wide: "8",
+      desktop: "10",
+      tablet: "12",
+      mobile: "12"
+    }, renderContent()));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      'text-center': textCenter
+    }, [className]),
+    ref: rootRef
+  }, isFullWidth ? renderContent() : renderTextBoxWithGrid());
+};
+
+TextBox.propTypes = {
+  textCenter: PropTypes.bool,
+  centeringWithLimitedWidth: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string
+};
+var _default = TextBox;
+exports["default"] = _default;

package/dist/lib/components/TextBox/TextBoxPicture.css

@@ -0,0 +1,24 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-text-box-picture_margin_default {
+  margin: 16px 0;
+}
+.mfui-beta-text-box-picture_margin_big-top {
+  margin: 24px 0 16px;
+}
+.mfui-beta-text-box-picture_margin_big-bottom {
+  margin: 16px 0 24px;
+}
+.mfui-beta-text-box-picture_margin_big-vertical {
+  margin: 24px 0;
+}
+.mfui-beta-text-box-picture__img {
+  display: block;
+  max-width: 100%;
+  border: 1px solid #EDEDED;
+}

package/dist/lib/components/TextBox/TextBoxPicture.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import './TextBoxPicture.less';
+export declare const pictureMarginTypes: {
+    readonly DEFAULT: "default";
+    readonly BIG_TOP: "big-top";
+    readonly BIG_BOTTOM: "big-bottom";
+    readonly BIG_VERTICAL: "big-vertical";
+};
+declare type PictureMarginTypesType = typeof pictureMarginTypes[keyof typeof pictureMarginTypes];
+export interface ITextBoxPictureProps {
+    /** URL картинки */
+    url: string;
+    /** Значение вертикальных отступов */
+    margin?: PictureMarginTypesType;
+}
+declare const TextBoxPicture: React.FC<ITextBoxPictureProps>;
+export default TextBoxPicture;

package/dist/lib/components/TextBox/TextBoxPicture.js

@@ -0,0 +1,48 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.pictureMarginTypes = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var pictureMarginTypes = {
+  DEFAULT: 'default',
+  BIG_TOP: 'big-top',
+  BIG_BOTTOM: 'big-bottom',
+  BIG_VERTICAL: 'big-vertical'
+};
+exports.pictureMarginTypes = pictureMarginTypes;
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-text-box-picture');
+
+var TextBoxPicture = function TextBoxPicture(_ref) {
+  var url = _ref.url,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? pictureMarginTypes.DEFAULT : _ref$margin;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      margin: margin
+    })
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('img'),
+    src: url
+  }));
+};
+
+TextBoxPicture.propTypes = {
+  url: PropTypes.string.isRequired,
+  margin: PropTypes.oneOf([pictureMarginTypes.DEFAULT, pictureMarginTypes.BIG_TOP, pictureMarginTypes.BIG_BOTTOM, pictureMarginTypes.BIG_VERTICAL])
+};
+var _default = TextBoxPicture;
+exports["default"] = _default;

package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css

@@ -9,6 +9,9 @@ h5 {
   font-family: inherit;
   color: #333333;
 }
+.mfui-beta-title-description-box__item_header {
+  white-space: pre-wrap;
+}
 .mfui-beta-title-description-box__item:not(:last-child) {
   margin-bottom: 16px;
 }
@@ -18,3 +21,11 @@ h5 {
 .mfui-beta-title-description-box_h-align_center {
   text-align: center;
 }
+.mfui-beta-title-description-box__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-beta-title-description-box__description :last-child {
+  margin-bottom: 0 !important;
+}

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

@@ -1,15 +1,21 @@
 import * as React from 'react';
 import './TitleDescriptionBox.less';
 export interface ITitleDescriptionBoxProps {
-    /** Custom className */
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс корневого элемента */
     className?: string;
-    /** Title */
-    title?: string;
-    /** Description */
-    description?: string;
-    /** Text color */
+    /** Заголовок */
+    title?: string | React.ReactNode[] | React.ReactNode;
+    /** Описание */
+    description?: string | React.ReactNode[] | React.ReactNode;
+    /** Цвет текста */
     textColor?: 'white';
-    /** Horizontal alignment */
+    /** Горизонтальное выравнивание */
     hAlign?: 'center';
 }
 declare const TitleDescriptionBox: React.FC<ITitleDescriptionBoxProps>;

package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -2,10 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.symbol.description");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,49 +11,73 @@ require("core-js/modules/es.symbol");
 
 require("core-js/modules/es.symbol.description");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-title-description-box');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-title-description-box');
 
 var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
-  var title = _ref.title,
+  var dataAttrs = _ref.dataAttrs,
+      title = _ref.title,
       description = _ref.description,
       textColor = _ref.textColor,
       hAlign = _ref.hAlign,
+      rootRef = _ref.rootRef,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+  var renderDescription = React.useCallback(function () {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+        className: cn('item'),
+        hasMargin: false,
+        color: "inherit"
+      }, description);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description')
+    }, description);
+  }, [description]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     className: cn({
       'h-align': hAlign,
       'text-color': textColor
-    }, className)
-  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    }, className),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
     hAlign: hAlign
   }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
     wide: "8",
     desktop: "10"
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
-    className: cn('item'),
+    className: cn('item', {
+      header: true
+    }),
     as: "h2",
     color: "inherit"
-  }, title), description && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-    className: cn('item'),
-    hasMargin: false,
-    color: "inherit"
-  }, description))));
+  }, title), description && renderDescription())));
 };
 
 TitleDescriptionBox.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   className: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
   hAlign: PropTypes.oneOf(['center']),
   textColor: PropTypes.oneOf(['white'])
 };

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

@@ -0,0 +1,216 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-video-banner {
+  position: relative;
+  overflow: hidden;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-beta-video-banner {
+    margin-right: -80px;
+    margin-left: -80px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-banner {
+    margin-right: -64px;
+    margin-left: -64px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-banner {
+    margin-right: -48px;
+    margin-left: -48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner {
+    margin-right: -16px;
+    margin-left: -16px;
+  }
+}
+.mfui-beta-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-beta-video-banner__wrapper {
+    height: 562px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-banner__wrapper {
+    height: 500px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 52px;
+    padding-bottom: 52px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 64px;
+    padding-bottom: 64px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__wrapper {
+    max-height: 488px;
+    padding-top: 42px;
+    padding-bottom: 42px;
+  }
+}
+.mfui-beta-video-banner__background-image,
+.mfui-beta-video-banner__video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.mfui-beta-video-banner__background-image {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.mfui-beta-video-banner__content {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@media screen and (min-width: 1440px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(562px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(500px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(440px - 2 * 52px);
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(440px - 2 * 64px);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__content {
+    max-height: calc(488px - 2 * 42px);
+  }
+}
+.mfui-beta-video-banner__content_text-color_black {
+  color: #333333;
+}
+.mfui-beta-video-banner__content_text-color_white {
+  color: #FFFFFF;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__content_text-color-mobile_black {
+    color: #333333;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__content_text-color-mobile_white {
+    color: #FFFFFF;
+  }
+}
+.mfui-beta-video-banner__description {
+  margin-bottom: 32px;
+  white-space: pre-wrap;
+}
+.mfui-beta-video-banner__title {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__title {
+    margin-bottom: 20px;
+  }
+}
+.mfui-beta-video-banner__title,
+.mfui-beta-video-banner__text {
+  white-space: pre-wrap;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__title,
+  .mfui-beta-video-banner__text {
+    text-align: center;
+  }
+}
+.mfui-beta-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-beta-video-banner__btns-wrapper {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+@media screen and (max-width: 479px) {
+  .mfui-beta-video-banner__btns-wrapper {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-beta-video-banner__link,
+.mfui-beta-video-banner__button {
+  margin: 24px 10px 0;
+}
+.mfui-beta-video-banner__cost {
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 18px;
+}
+.mfui-beta-video-banner__value {
+  display: inline;
+  margin: 0 3px;
+}
+.mfui-beta-video-banner__content,
+.mfui-beta-video-banner__breadcrumbs {
+  z-index: 1;
+}
+.mfui-beta-video-banner__breadcrumbs {
+  position: absolute;
+  top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-banner__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-beta-video-banner__grid {
+  width: 100%;
+}

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

@@ -0,0 +1,90 @@
+import React, { Ref } from 'react';
+import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
+import './VideoBanner.less';
+declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare enum ClassName {
+    BUTTON = "button",
+    LINK = "link"
+}
+export declare const VideoType: {
+    readonly YOUTUBE: "youtube";
+    readonly VIDEO: "video";
+};
+declare type VideoType = typeof VideoType[keyof typeof VideoType];
+export declare const ButtonColor: {
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+export declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
+export declare const TextColor: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export interface IContent {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description: string;
+    /** Текст кнопки */
+    buttonTitle?: string;
+    /** Ссылка на кнопке */
+    buttonHref?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Цвет кнопки */
+    buttonColor?: ButtonColorType;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Цвет текста */
+    textColor?: TextColorType;
+    /** Цвет текста на мобильном разрешении */
+    textColorMobile?: TextColorType;
+    /** Текст ссылки */
+    linkTitle?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Добавляет атрибут download для тега <a> компонента TextLink */
+    linkDownload?: boolean;
+    /** Строка со стоимостью услуги */
+    cost?: string;
+}
+interface IVideoBannerProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        breadcrumbs?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Данные для блока с контентом */
+    content?: IContent;
+    /** Источник видео. */
+    videoSrc?: string;
+    /** Тип видео */
+    videoType?: VideoType;
+    /** Наличие звука в видео */
+    isMuted?: boolean;
+    /** Изображение для мобильного разрешения */
+    imageMobile: string;
+    /** Изображение для планшетного разрешения */
+    imageTablet: string;
+    /** Изображение для компьютерного разрешения */
+    imageDesktop?: string;
+    /** Изображение для большого компьютерного разрешения */
+    imageDesktopWide?: string;
+    /** Хлебные крошки */
+    breadcrumbs?: BreadCrumbsItemsType;
+}
+declare const VideoBanner: React.FC<IVideoBannerProps>;
+export default VideoBanner;