@megafon/ui-shared 6.3.0 → 7.0.0-beta.1

package/dist/lib/components/TextWithIcon/TextWithIcon.js

@@ -1,47 +1,33 @@
 "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); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _uiCore = require("@megafon/ui-core");
-
 var _uiHelpers = require("@megafon/ui-helpers");
-
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 }; }
-
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var testIdPrefix = 'TextWithIcon';
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon');
-
 var TextWithIcon = function TextWithIcon(_ref) {
   var title = _ref.title,
-      rootRef = _ref.rootRef,
-      dataAttrs = _ref.dataAttrs,
-      className = _ref.className,
-      _ref$isFullWidth = _ref.isFullWidth,
-      isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
-      children = _ref.children;
-
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    _ref$isFullWidth = _ref.isFullWidth,
+    isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
+    children = _ref.children;
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
       className: cn('header'),
       as: "h5"
     }, title), children);
   };
-
   var renderContentWithGrid = function renderContentWithGrid() {
     return /*#__PURE__*/React.createElement(_uiCore.Grid, {
       dataAttrs: {
@@ -56,24 +42,9 @@ var TextWithIcon = function TextWithIcon(_ref) {
       wide: '6'
     }, renderContent()));
   };
-
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn([className]),
     ref: rootRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
 };
-
-TextWithIcon.propTypes = {
-  title: PropTypes.string,
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
-  isFullWidth: PropTypes.bool,
-  className: PropTypes.string
-};
-var _default = TextWithIcon;
-exports["default"] = _default;
+var _default = exports["default"] = TextWithIcon;

package/dist/lib/components/TextWithIcon/TextWithIconItem.css

@@ -1,29 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-text-with-icon-item {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.mfui-text-with-icon-item:not(:first-of-type) {
-  margin-top: 12px;
-}
-.mfui-text-with-icon-item__svg-icon {
-  width: 44px;
-  min-width: 44px;
-  height: 44px;
-  min-height: 44px;
-  margin-right: 16px;
-  padding: 6px;
-  border: 1px solid var(--spbSky2);
-  border-radius: 50%;
-  overflow: hidden;
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-text-with-icon-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-text-with-icon-item:not(:first-of-type){margin-top:12px}.mfui-text-with-icon-item__svg-icon{-webkit-box-sizing:border-box;box-sizing:border-box;height:40px;margin-right:12px;min-height:40px;min-width:40px;overflow:hidden;width:40px}.mfui-text-with-icon-item_icon-background_stroke .mfui-text-with-icon-item__svg-icon{border:1px solid var(--spbSky2);border-radius:50%;padding:3px}.mfui-text-with-icon-item_icon-background_gray .mfui-text-with-icon-item__svg-icon{background-color:var(--spbSky0);border-radius:50%;padding:4px}

package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TextWithIconItem.less';
+import './TextWithIconItem.scss';
 export interface ITextWithIconItem {
     /** Дополнительные классы для внутренних элементов */
     classes?: {
@@ -10,6 +10,8 @@ export interface ITextWithIconItem {
     text: string | string[];
     /** Иконка */
     icon: React.ReactNode;
+    /** Фон для иконки */
+    iconBackground?: 'no' | 'stroke' | 'gray';
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/lib/components/TextWithIcon/TextWithIconItem.js

@@ -1,52 +1,42 @@
 "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); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 require("core-js/modules/es.array.is-array.js");
-
 require("core-js/modules/es.array.map.js");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _uiHelpers = require("@megafon/ui-helpers");
-
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 }; }
-
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var testIdPrefix = 'TextWithIconItem';
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon-item');
-
 var TextWithIconItem = function TextWithIconItem(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      text = _ref.text,
-      icon = _ref.icon,
-      rootRef = _ref.rootRef,
-      dataAttrs = _ref.dataAttrs;
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    text = _ref.text,
+    icon = _ref.icon,
+    _ref$iconBackground = _ref.iconBackground,
+    iconBackground = _ref$iconBackground === void 0 ? 'no' : _ref$iconBackground,
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs;
   var renderText = React.useMemo(function () {
     if (Array.isArray(text)) {
       return text.map(function (item) {
         return (0, _uiHelpers.convert)(item, _uiHelpers.textConvertConfig);
       });
     }
-
     return (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig);
   }, [text]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn([className]),
+    className: cn({
+      'icon-background': iconBackground
+    }, [className]),
     ref: rootRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon', [classes.icon]),
@@ -56,17 +46,4 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
     "data-testid": "".concat(testIdPrefix, "-text")
   }, renderText));
 };
-
-TextWithIconItem.propTypes = {
-  text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
-  icon: PropTypes.node.isRequired,
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  className: PropTypes.string
-};
-var _default = TextWithIconItem;
-exports["default"] = _default;
+var _default = exports["default"] = TextWithIconItem;

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

@@ -1,31 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-title-description-box {
-  font-family: inherit;
-  color: var(--content);
-}
-.mfui-title-description-box__item_header {
-  white-space: pre-wrap;
-}
-.mfui-title-description-box__item:not(:last-child) {
-  margin-bottom: 16px;
-}
-.mfui-title-description-box_text-color_white {
-  color: var(--stcWhite);
-}
-.mfui-title-description-box_h-align_center {
-  text-align: center;
-}
-.mfui-title-description-box__description {
-  font-size: 15px;
-  line-height: 24px;
-  font-weight: 400;
-}
-.mfui-title-description-box__description :last-child {
-  margin-bottom: 0 !important;
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-title-description-box{color:var(--content),.mfui-title-description-box __item_header;font-family:inherit;color-white-space:pre-wrap}.mfui-title-description-box__item:not(:last-child){margin-bottom:16px}.mfui-title-description-box_text-color_white{color:var(--stcWhite)}.mfui-title-description-box_h-align_center{text-align:center}.mfui-title-description-box__description{font-size:15px;font-weight:400;line-height:24px}.mfui-title-description-box__description :last-child{margin-bottom:0!important}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TitleDescriptionBox.less';
+import './TitleDescriptionBox.scss';
 export interface ITitleDescriptionBoxProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

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

@@ -1,43 +1,29 @@
 "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); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.symbol.description.js");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _uiCore = require("@megafon/ui-core");
-
 var _uiHelpers = require("@megafon/ui-helpers");
-
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 }; }
-
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var testIdPrefix = 'TitleDescriptionBox';
 var cn = (0, _uiHelpers.cnCreate)('mfui-title-description-box');
-
 var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
   var dataAttrs = _ref.dataAttrs,
-      title = _ref.title,
-      description = _ref.description,
-      textColor = _ref.textColor,
-      align = _ref.align,
-      rootRef = _ref.rootRef,
-      className = _ref.className;
+    title = _ref.title,
+    description = _ref.description,
+    textColor = _ref.textColor,
+    align = _ref.align,
+    rootRef = _ref.rootRef,
+    className = _ref.className;
   var renderDescription = React.useCallback(function () {
     if (typeof description === 'string') {
       return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
@@ -51,7 +37,6 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
         }
       }, description);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: cn('description'),
       "data-testid": "".concat(testIdPrefix, "-description-node")
@@ -81,19 +66,4 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
     color: "inherit"
   }, title), description && renderDescription())));
 };
-
-TitleDescriptionBox.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  className: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
-  align: PropTypes.oneOf(['center']),
-  textColor: PropTypes.oneOf(['white'])
-};
-var _default = TitleDescriptionBox;
-exports["default"] = _default;
+var _default = exports["default"] = TitleDescriptionBox;

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

@@ -1,225 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-video-banner {
-  position: relative;
-  overflow: hidden;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-video-banner {
-    margin-right: -80px;
-    margin-left: -80px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-video-banner {
-    margin-right: -64px;
-    margin-left: -64px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-video-banner {
-    margin-right: -48px;
-    margin-left: -48px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-video-banner {
-    margin-right: -16px;
-    margin-left: -16px;
-  }
-}
-.mfui-video-banner_bottom-shadow:after {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 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-top: 52px;
-    padding-bottom: 52px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-video-banner__wrapper {
-    max-height: 440px;
-    padding-top: 64px;
-    padding-bottom: 64px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-video-banner__wrapper {
-    max-height: 488px;
-    padding-top: 42px;
-    padding-bottom: 42px;
-  }
-}
-.mfui-video-banner__background-image,
-.mfui-video-banner__video {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-.mfui-video-banner__background-image {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-.mfui-video-banner__content {
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-@media screen and (min-width: 1440px) {
-  .mfui-video-banner__content {
-    max-height: calc(562px - 2 * 70px);
-  }
-}
-@media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-video-banner__content {
-    max-height: calc(500px - 2 * 70px);
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-video-banner__content {
-    max-height: calc(440px - 2 * 52px);
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-video-banner__content {
-    max-height: calc(440px - 2 * 64px);
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-video-banner__content {
-    max-height: calc(488px - 2 * 42px);
-  }
-}
-.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);
-  }
-}
-@media screen and (max-width: 767px) {
-  .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__title,
-.mfui-video-banner__text {
-  white-space: pre-wrap;
-}
-@media screen and (max-width: 767px) {
-  .mfui-video-banner__title,
-  .mfui-video-banner__text {
-    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__link,
-.mfui-video-banner__button {
-  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__content,
-.mfui-video-banner__breadcrumbs {
-  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}@media screen and (max-width:767px){.mfui-video-banner__breadcrumbs{display:none}}.mfui-video-banner__grid{width:100%}

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

@@ -1,7 +1,7 @@
-import React, { Ref } from 'react';
+import * as React from 'react';
 import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
-import './VideoBanner.less';
-export declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+import './VideoBanner.scss';
+export type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
 export declare const testIdPrefix = "VideoBanner";
 export declare enum ClassName {
     BUTTON = "button",
@@ -11,17 +11,17 @@ export declare const VideoType: {
     readonly YOUTUBE: "youtube";
     readonly VIDEO: "video";
 };
-declare type VideoType = typeof VideoType[keyof typeof VideoType];
+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 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];
+type TextColorType = (typeof TextColor)[keyof typeof TextColor];
 export interface IContent {
     /** Заголовок */
     title: string;
@@ -80,7 +80,7 @@ export interface IVideoBannerProps {
         video?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Данные для блока с контентом */
     content?: IContent;
     /** Источник видео. */