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

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

@@ -0,0 +1,309 @@
+"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.TextColor = exports.ButtonColor = exports.VideoType = exports.ClassName = void 0;
+
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.symbol.description");
+
+require("core-js/modules/es.array.concat");
+
+require("core-js/modules/es.object.values");
+
+require("core-js/modules/es.string.link");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ClassName;
+exports.ClassName = ClassName;
+
+(function (ClassName) {
+  ClassName["BUTTON"] = "button";
+  ClassName["LINK"] = "link";
+})(ClassName || (exports.ClassName = ClassName = {}));
+
+var typographyConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+        className: cn('value'),
+        as: "h3",
+        color: "inherit"
+      }, children);
+    }
+  }
+};
+var VideoType = {
+  YOUTUBE: 'youtube',
+  VIDEO: 'video'
+};
+exports.VideoType = VideoType;
+var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+exports.ButtonColor = ButtonColor;
+var TextColor = {
+  BLACK: 'black',
+  WHITE: 'white'
+};
+exports.TextColor = TextColor;
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-video-banner');
+
+var VideoBanner = function VideoBanner(_ref2) {
+  var dataAttrs = _ref2.dataAttrs,
+      className = _ref2.className,
+      _ref2$classes = _ref2.classes,
+      classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+      rootRef = _ref2.rootRef,
+      videoSrc = _ref2.videoSrc,
+      videoType = _ref2.videoType,
+      imageMobile = _ref2.imageMobile,
+      imageTablet = _ref2.imageTablet,
+      _ref2$imageDesktop = _ref2.imageDesktop,
+      imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+      _ref2$imageDesktopWid = _ref2.imageDesktopWide,
+      imageDesktopWide = _ref2$imageDesktopWid === void 0 ? '' : _ref2$imageDesktopWid,
+      content = _ref2.content,
+      _ref2$isMuted = _ref2.isMuted,
+      isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
+      breadcrumbs = _ref2.breadcrumbs;
+
+  var _React$useState = _react["default"].useState(true),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(imageMobile),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      imageSrc = _React$useState4[0],
+      setImageSrc = _React$useState4[1];
+
+  var isVideoData = !!videoSrc && !!videoType;
+  var isRenderVideo = !isMobile && isVideoData;
+
+  var renderContent = _react["default"].useCallback(function (_ref3) {
+    var title = _ref3.title,
+        description = _ref3.description,
+        buttonTitle = _ref3.buttonTitle,
+        buttonHref = _ref3.buttonHref,
+        buttonDownload = _ref3.buttonDownload,
+        _ref3$buttonColor = _ref3.buttonColor,
+        buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
+        onButtonClick = _ref3.onButtonClick,
+        onLinkClick = _ref3.onLinkClick,
+        _ref3$textColor = _ref3.textColor,
+        textColor = _ref3$textColor === void 0 ? TextColor.BLACK : _ref3$textColor,
+        textColorMobile = _ref3.textColorMobile,
+        linkTitle = _ref3.linkTitle,
+        linkUrl = _ref3.linkUrl,
+        linkDownload = _ref3.linkDownload,
+        cost = _ref3.cost;
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
+      className: cn('grid'),
+      guttersLeft: "medium"
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+      mobile: "12",
+      tablet: "7",
+      desktop: "7",
+      wide: "6"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('content', {
+        'text-color': textColor,
+        'text-color-mobile': textColorMobile
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      className: cn('title'),
+      as: "h1",
+      color: "inherit"
+    }, title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('text')
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      as: "h5",
+      color: "inherit",
+      className: cn('description')
+    }, description), cost && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('cost')
+    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('btns-wrapper')
+    }, buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      className: cn(ClassName.BUTTON, [classes.button]),
+      theme: buttonColor,
+      href: buttonHref,
+      onClick: onButtonClick,
+      download: buttonDownload
+    }, buttonTitle), linkTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+      className: cn(ClassName.LINK, [classes.link]),
+      href: linkUrl,
+      download: linkDownload,
+      onClick: onLinkClick
+    }, linkTitle)))));
+  }, []);
+
+  var renderVideo = _react["default"].useCallback(function () {
+    switch (videoType) {
+      case VideoType.YOUTUBE:
+        {
+          var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
+          var autoplay = '&autoplay=1';
+          var mute = "&mute=".concat(isMuted ? 1 : 0);
+          var loop = '&loop=1';
+          var rel = '&rel=0';
+          var controls = '&controls=0';
+          var info = '&showinfo=0e';
+          var policy = '&iv_load_policy=3';
+          var playlist = "&playlist=".concat(videoSrc);
+          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(info).concat(policy).concat(playlist);
+          return /*#__PURE__*/_react["default"].createElement("iframe", {
+            title: "iframe",
+            className: cn('video'),
+            src: src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay"
+          });
+        }
+
+      case VideoType.VIDEO:
+        {
+          return /*#__PURE__*/_react["default"].createElement("video", {
+            className: cn('video'),
+            autoPlay: true,
+            loop: true,
+            muted: isMuted
+          }, /*#__PURE__*/_react["default"].createElement("source", {
+            src: videoSrc,
+            type: "video/mp4"
+          }));
+        }
+
+      default:
+        {
+          return null;
+        }
+    }
+  }, [videoType, videoSrc, isMuted]);
+
+  _react["default"].useEffect(function () {
+    var getImageSrc = function getImageSrc() {
+      var windowWidth = window.innerWidth;
+
+      switch (true) {
+        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_MIDDLE_START:
+          return imageDesktopWide;
+
+        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_SMALL_START && windowWidth <= _uiHelpers.breakpoints.DESKTOP_SMALL_END:
+          return imageDesktop;
+
+        case windowWidth >= _uiHelpers.breakpoints.MOBILE_BIG_START && windowWidth <= _uiHelpers.breakpoints.MOBILE_BIG_END:
+          return imageTablet;
+
+        default:
+          return imageMobile;
+      }
+    };
+
+    var resizeHandler = function resizeHandler() {
+      setIsMobile(window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START);
+      setImageSrc(getImageSrc());
+    };
+
+    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
+    resizeHandler();
+    window.addEventListener('resize', resizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, []);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('wrapper')
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
+    className: cn('breadcrumbs'),
+    items: breadcrumbs,
+    color: content === null || content === void 0 ? void 0 : content.textColor,
+    classes: {
+      item: classes.breadcrumbs
+    }
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    },
+    className: cn('background-image')
+  }))));
+};
+
+VideoBanner.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string,
+    breadcrumbs: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  videoSrc: PropTypes.string,
+  videoType: PropTypes.oneOf(Object.values(VideoType)),
+  content: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    buttonTitle: PropTypes.string,
+    buttonHref: PropTypes.string,
+    buttonDownload: PropTypes.bool,
+    buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+    onButtonClick: PropTypes.func,
+    onLinkClick: PropTypes.func,
+    textColor: PropTypes.oneOf(Object.values(TextColor)),
+    textColorMobile: PropTypes.oneOf(Object.values(TextColor)),
+    linkTitle: PropTypes.string,
+    linkUrl: PropTypes.string,
+    linkDownload: PropTypes.bool,
+    cost: PropTypes.string
+  }),
+  isMuted: PropTypes.bool,
+  imageMobile: PropTypes.string.isRequired,
+  imageTablet: PropTypes.string.isRequired,
+  imageDesktop: PropTypes.string,
+  imageDesktopWide: PropTypes.string,
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired)
+};
+var _default = VideoBanner;
+exports["default"] = _default;

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

@@ -0,0 +1,127 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-video-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-beta-video-block__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -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;
+  height: 100%;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-block__content {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-block__content {
+    margin-top: 32px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-beta-video-block__content {
+    margin-right: 20px;
+    padding-right: 20px;
+  }
+}
+.mfui-beta-video-block__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-beta-video-block__header {
+    margin-bottom: 16px;
+  }
+}
+.mfui-beta-video-block__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-beta-video-block__button {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  max-width: 100%;
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-block__button {
+    -ms-flex-item-align: center;
+        align-self: center;
+  }
+}
+.mfui-beta-video-block__video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.mfui-beta-video-block__video-wrapper {
+  height: 674px;
+  overflow: hidden;
+}
+@media screen and (min-width: 1440px) and (max-width: 1599px) {
+  .mfui-beta-video-block__video-wrapper {
+    height: 600px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-block__video-wrapper {
+    height: 524px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-block__video-wrapper {
+    height: 505px;
+  }
+}
+.mfui-beta-video-block__video-wrapper_with-content {
+  height: 468px;
+}
+@media screen and (min-width: 1440px) and (max-width: 1599px) {
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 415px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 363px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 328px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-video-block__video-wrapper,
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 379px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-video-block__video-wrapper,
+  .mfui-beta-video-block__video-wrapper_with-content {
+    height: 162px;
+  }
+}
+.mfui-beta-video-block__grid {
+  width: 100%;
+}

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

@@ -0,0 +1,49 @@
+import React, { Ref } from 'react';
+import './VideoBlock.less';
+export interface IContent {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description: string | React.ReactNode[] | React.ReactNode;
+    /** Текст кнопки */
+    buttonTitle: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Ссылка на кнопке */
+    href?: string;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+export declare const VideoTypes: {
+    readonly YOUTUBE: "youtube";
+    readonly VIDEO: "video";
+};
+declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
+export interface Props {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        description?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Данные для блока с контентом */
+    content?: IContent;
+    /** Тип видео */
+    videoType?: VideoType;
+    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    videoSrc: string;
+    /** Наличие звука в видео */
+    isMuted?: boolean;
+    /** Автоматическое проигрывание видео */
+    isAutoplay?: boolean;
+}
+declare const VideoBlock: React.FC<Props>;
+export default VideoBlock;

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

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VideoTypes = void 0;
+
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.symbol.description");
+
+require("core-js/modules/es.array.concat");
+
+require("core-js/modules/es.object.values");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var VideoTypes = {
+  YOUTUBE: 'youtube',
+  VIDEO: 'video'
+};
+exports.VideoTypes = VideoTypes;
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-video-block');
+
+var VideoBlock = function VideoBlock(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      content = _ref.content,
+      _ref$videoType = _ref.videoType,
+      videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
+      videoSrc = _ref.videoSrc,
+      _ref$isMuted = _ref.isMuted,
+      isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
+      _ref$isAutoplay = _ref.isAutoplay,
+      isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay;
+
+  var renderVideo = _react["default"].useCallback(function () {
+    switch (videoType) {
+      case VideoTypes.YOUTUBE:
+        {
+          var src = "https://www.youtube.com/embed/".concat(videoSrc, "?&autoplay=").concat(isAutoplay ? 1 : 0, "&mute=").concat(isMuted ? 1 : 0, "&loop=1&rel=0&controls=0&showinfo=0e&iv_load_policy=3&playlist=").concat(videoSrc);
+          return /*#__PURE__*/_react["default"].createElement("iframe", {
+            src: src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe"
+          });
+        }
+
+      case VideoTypes.VIDEO:
+        {
+          return /*#__PURE__*/_react["default"].createElement("video", {
+            className: cn('video'),
+            autoPlay: isAutoplay,
+            muted: isMuted,
+            controls: !isAutoplay,
+            loop: true
+          }, /*#__PURE__*/_react["default"].createElement("source", {
+            src: videoSrc,
+            type: "video/mp4"
+          }));
+        }
+
+      default:
+        {
+          return null;
+        }
+    }
+  }, [videoType, videoSrc]);
+
+  var renderContent = _react["default"].useCallback(function (_ref2) {
+    var title = _ref2.title,
+        description = _ref2.description,
+        href = _ref2.href,
+        buttonDownload = _ref2.buttonDownload,
+        buttonTitle = _ref2.buttonTitle,
+        onButtonClick = _ref2.onButtonClick;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('content')
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      as: "h2",
+      className: cn('header')
+    }, title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('description', [classes.description])
+    }, description), /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      className: cn('button', [classes.button]),
+      href: href,
+      onClick: onButtonClick,
+      download: buttonDownload
+    }, buttonTitle));
+  }, [content]);
+
+  var renderGridColumns = _react["default"].useCallback(function () {
+    var columns = [];
+    var columnWidth = content ? '7' : '10';
+
+    if (content) {
+      columns.push( /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+        all: "5",
+        tablet: "12",
+        mobile: "12",
+        orderTablet: "2",
+        orderMobile: "2",
+        key: 'column-content'
+      }, renderContent && renderContent(content)));
+    }
+
+    columns.push( /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+      all: columnWidth,
+      tablet: "12",
+      mobile: "12",
+      key: 'column-video'
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('video-wrapper', {
+        'with-content': !!content
+      })
+    }, renderVideo())));
+    return columns;
+  }, [renderContent, renderVideo, content]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
+    hAlign: "center",
+    className: cn('grid')
+  }, renderGridColumns()));
+};
+
+VideoBlock.propTypes = {
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    button: _propTypes["default"].string,
+    description: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  content: _propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+    href: _propTypes["default"].string,
+    buttonTitle: _propTypes["default"].string.isRequired,
+    buttonDownload: _propTypes["default"].bool,
+    onButtonClick: _propTypes["default"].func
+  }),
+  videoType: _propTypes["default"].oneOf(Object.values(VideoTypes)),
+  videoSrc: _propTypes["default"].string.isRequired,
+  isMuted: _propTypes["default"].bool,
+  isAutoplay: _propTypes["default"].bool
+};
+var _default = VideoBlock;
+exports["default"] = _default;

package/dist/lib/constants/throttleTime.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    resize: number;
+};
+export default _default;

package/dist/lib/constants/throttleTime.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  resize: 300
+};
+exports["default"] = _default;