@megafon/ui-core 6.0.0-beta.1 → 6.0.0-beta.3

package/dist/es/components/Banner/Banner.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;display:inline-block;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}@media screen and (min-width:1024px){.mfui-banner .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;left:50%;position:absolute;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;justify-content:center;padding:6px 10px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width:1024px){.mfui-banner__pagination{bottom:16px}}.mfui-banner__pagination_bottom-offset{bottom:60px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner__pagination_theme_light{background-color:var(--stcWhite20)}.mfui-banner__pagination_theme_dark{background-color:var(--stcBlack20)}.mfui-banner_radius_rounded,.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}.mfui-banner_background-color_green{background-color:var(--brandGreen)}.mfui-banner_background-color_purple{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0{background-color:var(--spbSky0)}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner .mfui-banner__arrow__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner .mfui-banner__arrow__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}

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

@@ -24,8 +24,6 @@ type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
-    /** Прокрутка с зацикливанием */
-    loop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         swiper?: string;
@@ -35,6 +33,7 @@ export interface IBannerProps {
         arrowNext?: string;
         pagination?: string;
         dot?: string;
+        noSwiping?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -52,18 +51,25 @@ export interface IBannerProps {
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */
     autoPlayDelay?: number;
+    /** Прокрутка с зацикливанием */
+    loop?: boolean;
     /** Пауза автоматической прокрутки при наведении курсора на компонент */
     pauseOnHover?: boolean;
     /** Фоновый цвет */
     backgroundColor?: BackgroundColorType;
     /** Радиус границы */
     radius?: RadiusType;
-    /** Цветовая тема навигации */
+    /** Цветовая тема навигации (не используется) */
     navTheme?: NavThemeType;
     /** Цветовая тема стрелок */
     arrowTheme?: ArrowThemeType;
     /** Автоматическая высота слайдов */
     autoHeight?: boolean;
+    /** Не увеличивать время прокрутки при взаимодействии с баннером */
+    noIncreaseAutoplayDelay?: boolean;
+    /** Показать часть следующего слайда */
+    showNextSlide?: boolean;
+    children?: React.ReactNode;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
@@ -74,7 +80,6 @@ export interface IBannerProps {
     onDotClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
     onChange?: (index: number) => void;
-    children?: React.ReactNode;
 }
 declare const Banner: React.FC<IBannerProps>;
 export default Banner;

package/dist/es/components/Banner/Banner.js

@@ -8,6 +8,7 @@ import { Autoplay } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import BannerDot from "./BannerDot";
+import SLIDES_SETTINGS from "./slidesSettings";
 import "./Banner.css";
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
@@ -38,6 +39,7 @@ var Banner = function Banner(_ref) {
   var className = _ref.className,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
     _ref$withPaginationBo = _ref.withPaginationBottomOffset,
     withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
     _ref$autoPlay = _ref.autoPlay,
@@ -46,26 +48,27 @@ var Banner = function Banner(_ref) {
     autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
     _ref$loop = _ref.loop,
     loop = _ref$loop === void 0 ? false : _ref$loop,
-    _ref$navTheme = _ref.navTheme,
-    navTheme = _ref$navTheme === void 0 ? NavTheme.LIGHT : _ref$navTheme,
-    _ref$arrowTheme = _ref.arrowTheme,
-    arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.DARK : _ref$arrowTheme,
+    _ref$pauseOnHover = _ref.pauseOnHover,
+    pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
     _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
     _ref$radius = _ref.radius,
     radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
+    _ref$arrowTheme = _ref.arrowTheme,
+    arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.DARK : _ref$arrowTheme,
     _ref$autoHeight = _ref.autoHeight,
     autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
+    noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
+    showNextSlide = _ref.showNextSlide,
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? [] : _ref$children,
     getSwiper = _ref.getSwiper,
     onNextClick = _ref.onNextClick,
     onPrevClick = _ref.onPrevClick,
     onDotClick = _ref.onDotClick,
-    onChange = _ref.onChange,
-    dataAttrs = _ref.dataAttrs,
-    _ref$pauseOnHover = _ref.pauseOnHover,
-    pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
+    onChange = _ref.onChange;
+  var isSingleSlide = React.Children.count(children) === 1;
+  var canAutoPlay = autoPlay && !isSingleSlide;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTouch = _React$useState2[0],
@@ -82,7 +85,7 @@ var Banner = function Banner(_ref) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     isEnd = _React$useState8[0],
     setEnd = _React$useState8[1];
-  var _React$useState9 = React.useState(autoPlay),
+  var _React$useState9 = React.useState(canAutoPlay),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     isAutoPlaying = _React$useState10[0],
     setAutoPlaying = _React$useState10[1];
@@ -98,14 +101,13 @@ var Banner = function Banner(_ref) {
     _React$useState16 = _slicedToArray(_React$useState15, 2),
     isIncreasedDelay = _React$useState16[0],
     setIsIncreasedDelay = _React$useState16[1];
-  var isSingleSlide = React.Children.count(children) === 1;
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
   var dotTimerDelay = delay / 1000;
   var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
       autoplay = _ref2.autoplay;
-    if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
+    if (_typeof(params.autoplay) !== 'object' || !canAutoPlay || noIncreaseAutoplayDelay) {
       return;
     }
     autoplay.stop();
@@ -114,7 +116,7 @@ var Banner = function Banner(_ref) {
     setDelay(autoPlayDelay * 3);
     setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlay, autoPlayDelay]);
+  }, [canAutoPlay, autoPlayDelay, noIncreaseAutoplayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -172,7 +174,7 @@ var Banner = function Banner(_ref) {
   }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
-    if (!pauseOnHover || !autoPlay) {
+    if (!pauseOnHover || !canAutoPlay) {
       return;
     }
     rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
@@ -183,36 +185,16 @@ var Banner = function Banner(_ref) {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
       setAutoPlaying(true);
     });
-  }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn({
-      'nav-theme': navTheme,
-      'auto-height': autoHeight,
-      'background-color': backgroundColor,
-      'no-touch': !isTouch,
-      radius: radius
-    }, className),
-    ref: rootRef
-  }), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
-    className: cn('swiper', [classes.swiper]),
-    loop: loop,
-    autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
-    onSwiper: handleSwiper,
-    onReachBeginning: handleReachBeginning,
-    onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge,
-    onSlideChange: handleSlideChange,
-    onTouchEnd: increaseAutoplayDelay,
-    modules: [Autoplay],
-    watchSlidesProgress: true
-  }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
-      className: cn('slide', [classes.slide]),
-      key: i
-    }), /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
-      hasBottomOffset: !isSingleSlide
-    }));
-  })), !isSingleSlide && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
+  }, [canAutoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
+  React.useEffect(function () {
+    setAutoPlaying(canAutoPlay);
+    if (canAutoPlay) {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+      return;
+    }
+    swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+  }, [canAutoPlay, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
+  var renderNavArrows = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
     className: cn('arrow', {
       prev: true,
       theme: arrowTheme
@@ -235,12 +217,12 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: arrowTheme
-  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }));
+  var renderPagination = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
-      theme: navTheme,
       'bottom-offset': withPaginationBottomOffset
     }, [classes.pagination])
-  }), React.Children.map(children, function (_, i) {
+  }), children && React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(BannerDot, {
       className: cn('dot', [classes.dot]),
       dataAttrs: {
@@ -251,9 +233,41 @@ var Banner = function Banner(_ref) {
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
-      theme: navTheme,
       onClick: handleDotClick
     });
-  }))));
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'auto-height': autoHeight,
+      'background-color': backgroundColor,
+      'no-touch': !isTouch,
+      radius: radius,
+      'show-next-slide': showNextSlide
+    }, className),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('swiper-container')
+  }, /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
+    className: cn('swiper', [classes.swiper]),
+    loop: loop,
+    autoplay: canAutoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesProgress: true,
+    noSwipingClass: classes.noSwiping,
+    breakpoints: showNextSlide ? SLIDES_SETTINGS : undefined,
+    onSwiper: handleSwiper,
+    onReachBeginning: handleReachBeginning,
+    onReachEnd: handleReachEnd,
+    onFromEdge: handleFromEdge,
+    onSlideChange: handleSlideChange,
+    onTouchEnd: increaseAutoplayDelay,
+    modules: [Autoplay]
+  }), children && React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
+      className: cn('slide', [classes.slide]),
+      key: i
+    }), /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
+      className: cn('slide-content', [child === null || child === void 0 ? void 0 : child.props.className])
+    }));
+  })), !isSingleSlide && renderNavArrows), !isSingleSlide && renderPagination);
 };
 export default Banner;

package/dist/es/components/Banner/BannerDot.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;justify-content:center;padding:2px}.mfui-banner-dot:before{background-color:var(--stcWhite50);border-radius:4px;content:"";display:block;height:8px;width:8px}.mfui-banner-dot_theme_light.mfui-banner-dot_active:before{background-color:var(--stcWhite)}.mfui-banner-dot_theme_light.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--stcWhite)}.mfui-banner-dot_theme_dark.mfui-banner-dot_active:before{background-color:var(--brandGreen)}.mfui-banner-dot_theme_dark.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active{cursor:default}.mfui-banner-dot_active:before{width:24px}.mfui-banner-dot_active.mfui-banner-dot_timer:before{background-color:var(--stcWhite50)}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;position:absolute;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;justify-content:center;margin:-2px;padding:2px}.mfui-banner-dot:before{background-color:var(--spbSky2);border-radius:4px;content:"";display:block;height:8px;width:8px}.mfui-banner-dot_active{cursor:default}.mfui-banner-dot_active:before{background-color:var(--brandGreen);width:24px}.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active.mfui-banner-dot_timer:before{background-color:var(--spbSky2)}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;position:absolute;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}

package/dist/es/components/Banner/BannerDot.d.ts

@@ -1,18 +1,11 @@
 import * as React from 'react';
 import './BannerDot.scss';
-export declare const BannerDotTheme: {
-    readonly LIGHT: "light";
-    readonly DARK: "dark";
-};
-type BannerDotThemeType = (typeof BannerDotTheme)[keyof typeof BannerDotTheme];
 export interface IBannerDotProps {
     className?: string;
     index: number;
     isActive: boolean;
     showTimer: boolean;
     timerDelay: number;
-    /** Цветовая тема */
-    theme?: BannerDotThemeType;
     dataAttrs?: {
         root?: Record<string, string>;
         svg?: Record<string, string>;

package/dist/es/components/Banner/BannerDot.js

@@ -2,10 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./BannerDot.css";
-export var BannerDotTheme = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
 var cn = cnCreate('mfui-banner-dot');
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
@@ -14,8 +10,6 @@ var BannerDot = function BannerDot(_ref) {
     isActive = _ref.isActive,
     showTimer = _ref.showTimer,
     timerDelay = _ref.timerDelay,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? BannerDotTheme.LIGHT : _ref$theme,
     onClick = _ref.onClick;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
@@ -23,21 +17,20 @@ var BannerDot = function BannerDot(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      timer: showTimer,
-      theme: theme
+      timer: showTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({
+  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
     className: cn('timer'),
-    viewBox: "0 0 300 100"
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    viewBox: "0 0 250 100"
+  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
     },
     x: "0",
     y: "0",
-    width: "300",
+    width: "250",
     height: "100",
     rx: "50",
     ry: "50"

package/dist/es/components/Banner/slidesSettings.d.ts

@@ -0,0 +1,7 @@
+declare const SLIDES_SETTINGS: {
+    [x: number]: {
+        slidesPerView: number;
+        spaceBetween: number;
+    };
+};
+export default SLIDES_SETTINGS;

package/dist/es/components/Banner/slidesSettings.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { breakpoints } from '@megafon/ui-helpers';
+var SLIDES_SETTINGS = _defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 1,
+  spaceBetween: 0
+});
+export default SLIDES_SETTINGS;

package/dist/es/components/Button/Button.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:30px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stcWhite);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;outline:none;overflow:hidden;padding:0 32px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-button svg{display:block;-webkit-transition:fill .3s;transition:fill .3s}.mfui-button_size-all_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-all_extra-small .mfui-button__icon,.mfui-button_size-all_extra-small .mfui-button__icon-arrow,.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-all_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-all_small .mfui-button__icon,.mfui-button_size-all_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-all_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-all_medium{height:52px;min-width:52px}.mfui-button_size-all_medium .mfui-button__icon,.mfui-button_size-all_medium .mfui-button__icon-arrow,.mfui-button_size-all_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-all_large{height:60px;min-width:60px}.mfui-button_size-all_large .mfui-button__icon,.mfui-button_size-all_large .mfui-button__icon-arrow,.mfui-button_size-all_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-all_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-all_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-all_large.mfui-buttonhas-arrow,.mfui-button_size-all_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-all_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-all_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-all_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}@media screen and (min-width:1024px){.mfui-button_size-desktop_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-desktop_extra-small .mfui-button__icon,.mfui-button_size-desktop_extra-small .mfui-button__icon-arrow,.mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-desktop_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-desktop_small .mfui-button__icon,.mfui-button_size-desktop_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-desktop_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-desktop_medium{height:52px;min-width:52px}.mfui-button_size-desktop_medium .mfui-button__icon,.mfui-button_size-desktop_medium .mfui-button__icon-arrow,.mfui-button_size-desktop_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-desktop_large{height:60px;min-width:60px}.mfui-button_size-desktop_large .mfui-button__icon,.mfui-button_size-desktop_large .mfui-button__icon-arrow,.mfui-button_size-desktop_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-desktop_large.mfui-buttonhas-arrow,.mfui-button_size-desktop_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}@media screen and (min-width:1280px){.mfui-button_size-wide_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-wide_extra-small .mfui-button__icon,.mfui-button_size-wide_extra-small .mfui-button__icon-arrow,.mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-wide_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-wide_small .mfui-button__icon,.mfui-button_size-wide_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-wide_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-wide_medium{height:52px;min-width:52px}.mfui-button_size-wide_medium .mfui-button__icon,.mfui-button_size-wide_medium .mfui-button__icon-arrow,.mfui-button_size-wide_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-wide_large{height:60px;min-width:60px}.mfui-button_size-wide_large .mfui-button__icon,.mfui-button_size-wide_large .mfui-button__icon-arrow,.mfui-button_size-wide_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-wide_large.mfui-buttonhas-arrow,.mfui-button_size-wide_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-button_size-tablet_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-tablet_extra-small .mfui-button__icon,.mfui-button_size-tablet_extra-small .mfui-button__icon-arrow,.mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-tablet_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-tablet_small .mfui-button__icon,.mfui-button_size-tablet_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-tablet_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-tablet_medium{height:52px;min-width:52px}.mfui-button_size-tablet_medium .mfui-button__icon,.mfui-button_size-tablet_medium .mfui-button__icon-arrow,.mfui-button_size-tablet_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-tablet_large{height:60px;min-width:60px}.mfui-button_size-tablet_large .mfui-button__icon,.mfui-button_size-tablet_large .mfui-button__icon-arrow,.mfui-button_size-tablet_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-tablet_large.mfui-buttonhas-arrow,.mfui-button_size-tablet_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-tablet_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-tablet_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-tablet_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}@media screen and (max-width:767px){.mfui-button_size-mobile_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-mobile_extra-small .mfui-button__icon,.mfui-button_size-mobile_extra-small .mfui-button__icon-arrow,.mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-mobile_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-mobile_small .mfui-button__icon,.mfui-button_size-mobile_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-mobile_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-mobile_medium{height:52px;min-width:52px}.mfui-button_size-mobile_medium .mfui-button__icon,.mfui-button_size-mobile_medium .mfui-button__icon-arrow,.mfui-button_size-mobile_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-mobile_large{height:60px;min-width:60px}.mfui-button_size-mobile_large .mfui-button__icon,.mfui-button_size-mobile_large .mfui-button__icon-arrow,.mfui-button_size-mobile_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-mobile_large.mfui-buttonhas-arrow,.mfui-button_size-mobile_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-mobile_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-mobile_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-mobile_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}.mfui-button:hover{text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-button:hover svg{-webkit-transition:fill .3s;transition:fill .3s}.mfui-button_disabled{cursor:default}.mfui-button__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;justify-content:center;vertical-align:top;width:100%}.mfui-button__text{margin-bottom:2px}.mfui-button__text_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-button__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-button__content_ellipsis{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;width:inherit}.mfui-button__content_show-loader{visibility:hidden}.mfui-button__preloader{position:absolute}.mfui-button__icon-arrow{height:32px;margin-left:4px;width:32px}.mfui-button_content-type_icon{padding:0}.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:4px}.mfui-button_type_text.mfui-button_theme_green{background-color:transparent;color:var(--brandGreen);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_green svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover{color:var(--buttonHoverGreen)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover svg{fill:var(--buttonHoverGreen)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_purple{background-color:transparent;color:var(--brandPurple);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_purple svg{fill:var(--brandPurple)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover{color:var(--buttonHoverPurple)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover svg{fill:var(--buttonHoverPurple)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_white{background-color:transparent;color:var(--stcWhite);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_white svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover{color:var(--buttonHoverGrey)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover svg{fill:var(--buttonHoverGrey)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_black{background-color:transparent;color:var(--stcBlack);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_black svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black{--stcBlack7:#818181}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover{color:var(--stcBlack7)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover svg{fill:var(--stcBlack7)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_danger{background-color:transparent;color:var(--fury);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_danger svg{fill:var(--fury)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover{color:var(--warmRedC)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover svg{fill:var(--warmRedC)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_primary.mfui-button_theme_green{background-color:var(--brandGreen);color:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_green svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):hover{background-color:var(--buttonHoverGreen)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):active{background-color:var(--buttonDown)}.mfui-button_type_primary.mfui-button_theme_green-soft{background-color:var(--brandGreen20);border:1px solid rgba(0,185,86,.2);color:var(--brandGreen)}.mfui-button_type_primary.mfui-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):hover{background-color:var(--buttonHoverGreenSoft)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active svg{fill:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_purple{background-color:var(--brandPurple);color:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_purple svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover{background-color:var(--buttonHoverPurple)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active{background-color:var(--buttonDown)}.mfui-button_type_primary.mfui-button_theme_purple-soft{background-color:var(--brandPurple20);border:1px solid rgba(115,25,130,.2);color:var(--brandPurple)}.mfui-button_type_primary.mfui-button_theme_purple-soft svg{fill:var(--brandPurple)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):hover{background-color:var(--buttonHoverPurpleSoft)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active svg{fill:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_white{background-color:var(--stcWhite);color:var(--stcBlack)}.mfui-button_type_primary.mfui-button_theme_white svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover{background-color:var(--buttonHoverGrey);color:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active svg{fill:var(--stcWhite)}.mfui-button_type_outline.mfui-button_theme_green{background-color:transparent;border:1px solid var(--brandGreen);color:var(--brandGreen)}.mfui-button_type_outline.mfui-button_theme_green svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):hover{background-color:var(--brandGreen7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active{background-color:var(--brandGreen14)}.mfui-button_type_outline.mfui-button_theme_green-soft{background-color:transparent;color:var(--brandGreen)}.mfui-button_type_outline.mfui-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):hover{background-color:var(--brandGreen7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):active{background-color:var(--brandGreen14)}.mfui-button_type_outline.mfui-button_theme_purple{background-color:transparent;border:1px solid var(--brandPurple);color:var(--brandPurple)}.mfui-button_type_outline.mfui-button_theme_purple svg{fill:var(--brandPurple)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple{--brandPurple7:rgba(115,25,130,.07);--brandPurple14:rgba(115,25,130,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):hover{background-color:var(--brandPurple7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):active{background-color:var(--brandPurple14)}.mfui-button_type_outline.mfui-button_theme_white{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite)}.mfui-button_type_outline.mfui-button_theme_white svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white{--stcWhite7:hsla(0,0%,100%,.07);--stcWhite14:hsla(0,0%,100%,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover{background-color:var(--stcWhite7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active{background-color:var(--stcWhite14)}.mfui-button_type_outline.mfui-button_theme_black{background-color:transparent;border:1px solid var(--stcBlack);color:var(--stcBlack)}.mfui-button_type_outline.mfui-button_theme_black svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black{--stcBlack7:rgba(51,51,51,.07);--stcBlack14:rgba(51,51,51,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover{background-color:var(--stcBlack7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active{background-color:var(--stcBlack14)}.mfui-button_full-width{display:block;width:100%}@media screen and (max-width:767px){.mfui-button_full-width-mobile{display:block;width:100%}}.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,.mfui-button.mfui-button_type_primary.mfui-button_disabled{background-color:var(--spbSky1);border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_primary.mfui-button_disabled svg{fill:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,.mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite50)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg{fill:var(--stcWhite50)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,.mfui-button.mfui-button_type_outline.mfui-button_disabled{background-color:transparent;border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_outline.mfui-button_disabled svg{fill:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover,.mfui-button.mfui-button_type_text.mfui-button_disabled{color:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_text.mfui-button_disabled svg{fill:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover,.mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled{background-color:transparent;color:var(--stcWhite)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg{fill:var(--stcWhite)}
+h1,h2,h3,h4,h5{margin:0}.mfui-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:30px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stcWhite);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;outline:none;overflow:hidden;padding:0 32px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-button svg{display:block;-webkit-transition:fill .3s;transition:fill .3s}.mfui-button_size-all_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-all_extra-small .mfui-button__icon,.mfui-button_size-all_extra-small .mfui-button__icon-arrow,.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-all_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-all_small .mfui-button__icon,.mfui-button_size-all_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-all_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-all_medium{height:52px;min-width:52px}.mfui-button_size-all_medium .mfui-button__icon,.mfui-button_size-all_medium .mfui-button__icon-arrow,.mfui-button_size-all_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-all_large{height:60px;min-width:60px}.mfui-button_size-all_large .mfui-button__icon,.mfui-button_size-all_large .mfui-button__icon-arrow,.mfui-button_size-all_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-all_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-all_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-all_large.mfui-buttonhas-arrow,.mfui-button_size-all_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-all_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-all_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-all_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}@media screen and (min-width:1024px){.mfui-button_size-desktop_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-desktop_extra-small .mfui-button__icon,.mfui-button_size-desktop_extra-small .mfui-button__icon-arrow,.mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-desktop_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-desktop_small .mfui-button__icon,.mfui-button_size-desktop_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-desktop_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-desktop_medium{height:52px;min-width:52px}.mfui-button_size-desktop_medium .mfui-button__icon,.mfui-button_size-desktop_medium .mfui-button__icon-arrow,.mfui-button_size-desktop_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-desktop_large{height:60px;min-width:60px}.mfui-button_size-desktop_large .mfui-button__icon,.mfui-button_size-desktop_large .mfui-button__icon-arrow,.mfui-button_size-desktop_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-desktop_large.mfui-buttonhas-arrow,.mfui-button_size-desktop_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}@media screen and (min-width:1280px){.mfui-button_size-wide_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-wide_extra-small .mfui-button__icon,.mfui-button_size-wide_extra-small .mfui-button__icon-arrow,.mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-wide_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-wide_small .mfui-button__icon,.mfui-button_size-wide_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-wide_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-wide_medium{height:52px;min-width:52px}.mfui-button_size-wide_medium .mfui-button__icon,.mfui-button_size-wide_medium .mfui-button__icon-arrow,.mfui-button_size-wide_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-wide_large{height:60px;min-width:60px}.mfui-button_size-wide_large .mfui-button__icon,.mfui-button_size-wide_large .mfui-button__icon-arrow,.mfui-button_size-wide_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-wide_large.mfui-buttonhas-arrow,.mfui-button_size-wide_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-button_size-tablet_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-tablet_extra-small .mfui-button__icon,.mfui-button_size-tablet_extra-small .mfui-button__icon-arrow,.mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-tablet_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-tablet_small .mfui-button__icon,.mfui-button_size-tablet_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-tablet_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-tablet_medium{height:52px;min-width:52px}.mfui-button_size-tablet_medium .mfui-button__icon,.mfui-button_size-tablet_medium .mfui-button__icon-arrow,.mfui-button_size-tablet_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-tablet_large{height:60px;min-width:60px}.mfui-button_size-tablet_large .mfui-button__icon,.mfui-button_size-tablet_large .mfui-button__icon-arrow,.mfui-button_size-tablet_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-tablet_large.mfui-buttonhas-arrow,.mfui-button_size-tablet_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-tablet_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-tablet_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-tablet_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}@media screen and (max-width:767px){.mfui-button_size-mobile_extra-small{font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 16px}.mfui-button_size-mobile_extra-small .mfui-button__icon,.mfui-button_size-mobile_extra-small .mfui-button__icon-arrow,.mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{height:20px;width:20px}.mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon{margin-right:2px}.mfui-button_size-mobile_small{height:40px;min-width:40px;padding:0 24px}.mfui-button_size-mobile_small .mfui-button__icon,.mfui-button_size-mobile_small .mfui-button__icon-arrow{height:20px;width:20px}.mfui-button_size-mobile_small.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-mobile_medium{height:52px;min-width:52px}.mfui-button_size-mobile_medium .mfui-button__icon,.mfui-button_size-mobile_medium .mfui-button__icon-arrow,.mfui-button_size-mobile_medium.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-mobile_large{height:60px;min-width:60px}.mfui-button_size-mobile_large .mfui-button__icon,.mfui-button_size-mobile_large .mfui-button__icon-arrow,.mfui-button_size-mobile_large.mfui-button_content-type_icon-text .mfui-button__icon{height:32px;width:32px}.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow{padding:0 8px}.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow .mfui-button__content{padding-left:12px}.mfui-button_size-mobile_large.mfui-buttonhas-arrow,.mfui-button_size-mobile_medium.mfui-buttonhas-arrow{padding:0 24px}.mfui-button_size-mobile_large.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-mobile_medium.mfui-buttonhas-arrow .mfui-button__content,.mfui-button_size-mobile_small.mfui-buttonhas-arrow .mfui-button__content{padding-left:16px}.mfui-button_type_text{padding:0}}.mfui-button:hover{text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-button:hover svg{-webkit-transition:fill .3s;transition:fill .3s}.mfui-button_disabled{cursor:default}.mfui-button__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;justify-content:center;vertical-align:top;width:100%}.mfui-button__text{margin-bottom:2px}.mfui-button__text_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-button__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-button__content_ellipsis{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;width:inherit}.mfui-button__content_show-loader{visibility:hidden}.mfui-button__preloader{position:absolute}.mfui-button__icon-arrow{height:32px;margin-left:4px;width:32px}.mfui-button_content-type_icon{padding:0}.mfui-button_content-type_icon-text .mfui-button__icon,.mfui-button_content-type_icon-text:not(.mfui-button_type_text) .mfui-button__text{margin-right:4px}.mfui-button_type_text.mfui-button_theme_green{background-color:transparent;color:var(--brandGreen);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_green svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover{color:var(--buttonHoverGreen)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover svg{fill:var(--buttonHoverGreen)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_purple{background-color:transparent;color:var(--brandPurple);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_purple svg{fill:var(--brandPurple)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover{color:var(--buttonHoverPurple)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover svg{fill:var(--buttonHoverPurple)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_white{background-color:transparent;color:var(--stcWhite);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_white svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover{color:var(--buttonHoverGrey)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover svg{fill:var(--buttonHoverGrey)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_black{background-color:transparent;color:var(--stcBlack);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_black svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black{--stcBlack7:#818181}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover{color:var(--stcBlack7)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover svg{fill:var(--stcBlack7)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_text.mfui-button_theme_danger{background-color:transparent;color:var(--fury);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-button_type_text.mfui-button_theme_danger svg{fill:var(--fury)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover{color:var(--warmRedC)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):hover svg{fill:var(--warmRedC)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active{color:var(--buttonDown)}.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_danger:not(.mfui-button_loading):active svg{fill:var(--buttonDown)}.mfui-button_type_primary.mfui-button_theme_green{background-color:var(--brandGreen);color:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_green svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):hover{background-color:var(--buttonHoverGreen)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):active{background-color:var(--buttonDown)}.mfui-button_type_primary.mfui-button_theme_green-soft{background-color:var(--brandGreen20);border:1px solid rgba(0,185,86,.2);color:var(--brandGreen)}.mfui-button_type_primary.mfui-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):hover{background-color:var(--buttonHoverGreenSoft)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active svg{fill:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_purple{background-color:var(--brandPurple);color:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_purple svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover{background-color:var(--buttonHoverPurple)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active{background-color:var(--buttonDown)}.mfui-button_type_primary.mfui-button_theme_purple-soft{background-color:var(--brandPurple20);border:1px solid rgba(115,25,130,.2);color:var(--brandPurple)}.mfui-button_type_primary.mfui-button_theme_purple-soft svg{fill:var(--brandPurple)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):hover{background-color:var(--buttonHoverPurpleSoft)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active svg{fill:var(--stcWhite)}.mfui-button_type_primary.mfui-button_theme_white{background-color:var(--stcWhite);color:var(--stcBlack)}.mfui-button_type_primary.mfui-button_theme_white svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover{background-color:var(--buttonHoverGrey);color:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active svg{fill:var(--stcWhite)}.mfui-button_type_outline.mfui-button_theme_green{background-color:transparent;border:1px solid var(--brandGreen);color:var(--brandGreen)}.mfui-button_type_outline.mfui-button_theme_green svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):hover{background-color:var(--brandGreen7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active{background-color:var(--brandGreen14)}.mfui-button_type_outline.mfui-button_theme_green-soft{background-color:transparent;color:var(--brandGreen)}.mfui-button_type_outline.mfui-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):hover{background-color:var(--brandGreen7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):active{background-color:var(--brandGreen14)}.mfui-button_type_outline.mfui-button_theme_purple{background-color:transparent;border:1px solid var(--brandPurple);color:var(--brandPurple)}.mfui-button_type_outline.mfui-button_theme_purple svg{fill:var(--brandPurple)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple{--brandPurple7:rgba(115,25,130,.07);--brandPurple14:rgba(115,25,130,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):hover{background-color:var(--brandPurple7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):active{background-color:var(--brandPurple14)}.mfui-button_type_outline.mfui-button_theme_white{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite)}.mfui-button_type_outline.mfui-button_theme_white svg{fill:var(--stcWhite)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white{--stcWhite7:hsla(0,0%,100%,.07);--stcWhite14:hsla(0,0%,100%,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover{background-color:var(--stcWhite7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active{background-color:var(--stcWhite14)}.mfui-button_type_outline.mfui-button_theme_black{background-color:transparent;border:1px solid var(--stcBlack);color:var(--stcBlack)}.mfui-button_type_outline.mfui-button_theme_black svg{fill:var(--stcBlack)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black{--stcBlack7:rgba(51,51,51,.07);--stcBlack14:rgba(51,51,51,.14)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover{background-color:var(--stcBlack7)}.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active{background-color:var(--stcBlack14)}.mfui-button_full-width{display:block;width:100%}@media screen and (max-width:767px){.mfui-button_full-width-mobile{display:block;width:100%}}.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,.mfui-button.mfui-button_type_primary.mfui-button_disabled{background-color:var(--spbSky1);border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_primary.mfui-button_disabled svg{fill:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,.mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite50)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg{fill:var(--stcWhite50)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,.mfui-button.mfui-button_type_outline.mfui-button_disabled{background-color:transparent;border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_outline.mfui-button_disabled svg{fill:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover,.mfui-button.mfui-button_type_text.mfui-button_disabled{color:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_text.mfui-button_disabled svg{fill:var(--spbSky3)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover,.mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled{background-color:transparent;color:var(--stcWhite)}.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active svg,.mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover svg,.mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg{fill:var(--stcWhite)}

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

@@ -22,6 +22,7 @@ export interface IContentViewProps {
         title?: string;
         button?: string;
         link?: string;
+        bgImage?: string;
     };
     /** Заголовок */
     title: string;

package/dist/es/components/ContentView/ContentView.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, convert, filterDataAttrs, titleConvertConfig } from '@megafon/ui-helpers';
 import Button from "../Button/Button";
 import "./ContentView.css";
 var cn = cnCreate('mfui-content-view');
@@ -29,14 +29,14 @@ var ContentView = function ContentView(_ref) {
   }, !!type && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.bgImage), {
     className: cn('bg-image', {
       type: type
-    })
+    }, [classes.bgImage])
   })), !!src && !type && /*#__PURE__*/React.createElement("img", {
     className: cn('image'),
     src: src,
     alt: alt
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('title', [classes.title])
-  }, title), !!children && /*#__PURE__*/React.createElement("div", {
+  }, convert(title, titleConvertConfig)), !!children && /*#__PURE__*/React.createElement("div", {
     className: cn('text')
   }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
     className: cn('buttons')

package/dist/es/components/ListData/ListData.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list-data{background-color:transparent;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:8px 16px 8px 12px;position:relative;text-decoration:none;-webkit-transition:background-color,opacity;transition:background-color,opacity;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-list-data,.mfui-list-data__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-list-data__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}.mfui-list-data__icon-container svg{fill:var(--content)}.mfui-list-data__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-list-data__icon-container_colored svg{fill:var(--brandGreen)}.mfui-list-data__icon{height:32px;min-width:32px;width:32px}.mfui-list-data__icon_small{height:20px;min-width:20px;width:20px}.mfui-list-data__header{display:grid;grid-template-columns:100%;margin-right:auto;padding-left:4px}.mfui-list-data__header_gap{padding-right:8px}.mfui-list-data__header_align{-ms-flex-item-align:end;align-self:flex-end}.mfui-list-data__title{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500;line-height:18px}.mfui-list-data__title-link{color:var(--content)}.mfui-list-data__sub-title{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-list-data__value-container{align-self:flex-start;display:grid;grid-template-columns:-webkit-min-content;grid-template-columns:min-content;padding-left:12px}.mfui-list-data__value{display:-webkit-box;font-size:15px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:18px;max-width:110px}.mfui-list-data__value_color_green{color:var(--brandGreen)}.mfui-list-data__sub-value{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:4px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-list-data__action-icon{fill:var(--spbSky3)}.mfui-list-data__action-icon_active{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:fill .3s;transition:fill .3s}.mfui-list-data__action-icon_active:hover{fill:var(--content)}.mfui-list-data__children_event-none{pointer-events:none}.mfui-list-data_active:not(.mfui-list-data_disabled){border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-list-data_active:not(.mfui-list-data_disabled):hover{background-color:var(--spbSky0)}.mfui-list-data_disabled{opacity:.5}.mfui-list-data_disabled .mfui-list-data__title-link{pointer-events:none}

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import './ListData.scss';
+type Target = '_self' | '_blank' | '_parent' | '_top';
+export type TitlePropsType = {
+    /** Текст заголовка */
+    text: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: Target;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare const ValueColors: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+};
+export type ValueColorsType = (typeof ValueColors)[keyof typeof ValueColors];
+declare const Actions: {
+    readonly DELETE: "delete";
+    readonly CONTROL: "control";
+};
+export type ActionsType = (typeof Actions)[keyof typeof Actions];
+export interface IListDataProps {
+    /** Заголовок */
+    title: string | TitlePropsType;
+    /** Подзаголовок */
+    subTitle?: string;
+    /** Значение */
+    value?: string;
+    /** Цвет */
+    valueColor?: ValueColorsType;
+    /** Дополнительное значение */
+    subValue?: string;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Фоновая заливка у иконки */
+    isIconColored?: boolean;
+    /** Аватар */
+    avatar?: JSX.Element;
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Элемент дополнительного действия */
+    actionType?: ActionsType;
+    /** Обработчик дополнительного действия */
+    onAction?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        actionIcon?: Record<string, string>;
+    };
+    /** Дочерние элементы: Button, Selector */
+    children?: React.ReactNode;
+}
+declare const ListData: React.FC<IListDataProps>;
+export default ListData;