@megafon/ui-core 5.15.0 → 5.17.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.17.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.16.0...@megafon/ui-core@5.17.0) (2024-07-01)
+
+
+### Bug Fixes
+
+* **banner:** fix banner height ([fead67b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/fead67bcee5e1da3bb77a567952ff8514ea8a86d))
+* **banner:** fix banner height ([b2315de](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/b2315de6ce1bd08dacf3f80bdf9d07a45de480b5))
+* **snackbar:** timer margin ([0008718](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0008718c43bca5efd2e08933e0c0061860ac5a14))
+
+
+### Features
+
+* **banner, imagebanner:** update components ([c6e8d6b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c6e8d6bf308a6d179b768aceba23e564d17f3d64))
+* **listdata:** create component ListData ([75ad1d5](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/75ad1d5476245e723a635e8d17da9ea7418657dc))
+* **search:** update props data attr ([861d0f5](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/861d0f58d477c36855b8d94d3472c0c3994c4890))
+
+
+
+
+
+# [5.16.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.15.0...@megafon/ui-core@5.16.0) (2024-06-26)
+
+
+### Bug Fixes
+
+* **carousel:** unsibscribe throttle ([c595b66](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c595b66d2ecff5b071ffd69c7ffb22dd18b8e9ca))
+* **contentview:** add new props to component ContentView ([8780d37](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/8780d37b9699b336dd5575403f9e8e6aee95113e))
+* **radiobutton:** fix hover on touch devices ([fecbc40](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/fecbc4023a545835e4a3995feec1caac1c3e0253))
+
+
+### Features
+
+* **accordion:** add new prop titleTag for change title tag, add classes.title prop" ([6f265f5](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6f265f53bbd552957454405d8c95cbe1549c72dd))
+
+
+
+
+
 # [5.15.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.14.1...@megafon/ui-core@5.15.0) (2024-06-17)
 
 

package/dist/es/colors/colorsData.js

@@ -110,6 +110,9 @@ var colors = {
         name: 'Exclusive',
         code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
+      }, {
+        name: 'Scrim',
+        code: 'gradientScrim'
       }]
     }
   },

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

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { IHeaderProps } from '../Header/Header';
 import './Accordion.less';
 export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
+    /** Заголовок */
+    titleTag?: IHeaderProps['as'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */
@@ -17,6 +20,7 @@ export interface IAccordionProps {
         openedClass?: string;
         collapse?: string;
         titleWrap?: string;
+        title?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Accordion/Accordion.js

@@ -22,6 +22,8 @@ var cn = cnCreate('mfui-accordion');
 var Accordion = function Accordion(_ref) {
   var rootRef = _ref.rootRef,
       title = _ref.title,
+      _ref$titleTag = _ref.titleTag,
+      titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$hasMicrodata = _ref.hasMicrodata,
@@ -33,6 +35,7 @@ var Accordion = function Accordion(_ref) {
       rootPropsClasses = _ref$classes.root,
       collapsePropsClasses = _ref$classes.collapse,
       titleWrapPropsClasses = _ref$classes.titleWrap,
+      titlePropsClasses = _ref$classes.title,
       dataAttrs = _ref.dataAttrs,
       onClickAccordion = _ref.onClickAccordion,
       children = _ref.children;
@@ -88,8 +91,9 @@ var Accordion = function Accordion(_ref) {
   }, hasMicrodata && {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(Header, {
-    as: "h5",
-    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+    as: titleTag,
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
+    className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
@@ -107,6 +111,7 @@ Accordion.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
   isOpened: PropTypes.bool,
   hasMicrodata: PropTypes.bool,
   className: PropTypes.string,
@@ -114,7 +119,8 @@ Accordion.propTypes = {
     openedClass: PropTypes.string,
     root: PropTypes.string,
     collapse: PropTypes.string,
-    titleWrap: PropTypes.string
+    titleWrap: PropTypes.string,
+    title: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

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

@@ -6,6 +6,9 @@
   display: -ms-flexbox;
   display: flex;
 }
+.mfui-banner .mfui-banner__swiper-container {
+  position: relative;
+}
 .mfui-banner__swiper {
   overflow: hidden;
 }
@@ -24,16 +27,18 @@
     height: 400px;
   }
 }
-.mfui-banner_auto-height .mfui-banner__slide {
-  height: auto;
+.mfui-banner__slide-content {
+  margin-right: -1px;
+  border-right: 1px solid transparent;
 }
-@media screen and (min-width: 1024px) {
-  .mfui-banner .swiper-slide-visible {
-    opacity: 1;
-    -webkit-transition: opacity 0.4s;
-    transition: opacity 0.4s;
+@media screen and (max-width: 1023px) {
+  .mfui-banner__slide-content {
+    height: 100%;
   }
 }
+.mfui-banner_auto-height .mfui-banner__slide {
+  height: auto;
+}
 .mfui-banner__arrow {
   position: absolute;
   top: 50%;
@@ -107,32 +112,27 @@
   scale: 1.125;
 }
 .mfui-banner__pagination {
-  position: absolute;
-  bottom: 24px;
   left: 50%;
   z-index: 10;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 8px;
+  gap: 12px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding: 6px 10px;
-  border-radius: 12px;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-}
-@media screen and (min-width: 1024px) {
-  .mfui-banner__pagination {
-    bottom: 16px;
-  }
+  margin-top: 32px;
 }
 .mfui-banner__pagination_bottom-offset {
+  position: absolute;
   bottom: 60px;
+  left: 50%;
+  z-index: 10;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-banner__pagination_bottom-offset {
@@ -154,31 +154,42 @@
     bottom: 72px;
   }
 }
-.mfui-banner__pagination_theme_light {
-  background-color: var(--stcWhite20);
+.mfui-banner_radius_rounded .mfui-banner__swiper {
+  border-radius: 24px;
 }
-.mfui-banner__pagination_theme_dark {
-  background-color: var(--stcBlack20);
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide .mfui-banner__swiper {
+    margin-right: -16px;
+    margin-left: -16px;
+    padding-right: 32px;
+    padding-left: 16px;
+    border-radius: 0;
+  }
 }
-.mfui-banner_radius_rounded {
-  border-radius: 24px;
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide .mfui-banner__slide-content {
+    margin-right: 0;
+    border-right: none;
+  }
 }
-.mfui-banner_radius_rounded .mfui-banner__swiper {
-  border-radius: 24px;
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content {
+    border-radius: 24px;
+  }
 }
-.mfui-banner_background-color_green {
+.mfui-banner_background-color_green .mfui-banner__swiper {
   background-color: var(--brandGreen);
 }
-.mfui-banner_background-color_purple {
+.mfui-banner_background-color_purple .mfui-banner__swiper {
   background-color: var(--brandPurple);
 }
-.mfui-banner_background-color_gradient {
+.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 0%, #F6F2F9 100%);
 }
-.mfui-banner_background-color_light {
+.mfui-banner_background-color_light .mfui-banner__swiper {
   background-color: #F6F2F9;
 }
-.mfui-banner_background-color_spbSky0 {
+.mfui-banner_background-color_spbSky0 .mfui-banner__swiper {
   background-color: var(--spbSky0);
 }

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

@@ -24,8 +24,6 @@ declare 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,24 @@ 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;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

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

@@ -10,6 +10,7 @@ import SwiperCore, { Autoplay } from 'swiper';
 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";
 SwiperCore.use([Autoplay]);
 export var BackgroundColor = {
@@ -44,6 +45,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,
@@ -52,26 +54,25 @@ 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 _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -121,7 +122,7 @@ var Banner = function Banner(_ref) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
+    if (_typeof(params.autoplay) !== 'object' || !autoPlay || noIncreaseAutoplayDelay) {
       return;
     }
 
@@ -131,7 +132,7 @@ var Banner = function Banner(_ref) {
     setDelay(autoPlayDelay * 3);
     setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlay, autoPlayDelay]);
+  }, [autoPlay, autoPlayDelay, noIncreaseAutoplayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -208,34 +209,17 @@ var Banner = function Banner(_ref) {
       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,
-    watchSlidesVisibility: true,
-    onSwiper: handleSwiper,
-    onReachBeginning: handleReachBeginning,
-    onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge,
-    onSlideChange: handleSlideChange,
-    onTouchEnd: increaseAutoplayDelay
-  }), 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, {
+  React.useEffect(function () {
+    setAutoPlaying(autoPlay);
+
+    if (autoPlay) {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+      return;
+    }
+
+    swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+  }, [autoPlay, 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
@@ -258,9 +242,9 @@ 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) {
@@ -274,15 +258,45 @@ 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: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesVisibility: true,
+    noSwipingClass: classes.noSwiping,
+    breakpoints: showNextSlide ? SLIDES_SETTINGS : undefined,
+    onSwiper: handleSwiper,
+    onReachBeginning: handleReachBeginning,
+    onReachEnd: handleReachEnd,
+    onFromEdge: handleFromEdge,
+    onSlideChange: handleSlideChange,
+    onTouchEnd: increaseAutoplayDelay
+  }), 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);
 };
 
 Banner.propTypes = {
   className: PropTypes.string,
-  loop: PropTypes.bool,
   classes: PropTypes.shape({
     swiper: PropTypes.string,
     slide: PropTypes.string,
@@ -290,7 +304,8 @@ Banner.propTypes = {
     arrowPrev: PropTypes.string,
     arrowNext: PropTypes.string,
     pagination: PropTypes.string,
-    dot: PropTypes.string
+    dot: PropTypes.string,
+    noSwiping: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -304,12 +319,15 @@ Banner.propTypes = {
   withPaginationBottomOffset: PropTypes.bool,
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
+  loop: PropTypes.bool,
   pauseOnHover: PropTypes.bool,
   backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
   radius: PropTypes.oneOf(Object.values(Radius)),
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
   arrowTheme: PropTypes.oneOf(Object.values(ArrowTheme)),
   autoHeight: PropTypes.bool,
+  noIncreaseAutoplayDelay: PropTypes.bool,
+  showNextSlide: PropTypes.bool,
   getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,

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

@@ -11,6 +11,7 @@
           justify-content: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  margin: -2px;
   padding: 2px;
   cursor: pointer;
 }
@@ -20,33 +21,25 @@
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  background-color: var(--stcWhite50);
-}
-.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);
+  background-color: var(--spbSky2);
 }
 .mfui-banner-dot_active {
   cursor: default;
 }
 .mfui-banner-dot_active:before {
-  width: 24px;
+  width: 20px;
+  background-color: var(--brandGreen);
+}
+.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
+  fill: var(--brandGreen);
 }
 .mfui-banner-dot_active.mfui-banner-dot_timer:before {
-  background-color: var(--stcWhite50);
+  background-color: var(--spbSky2);
 }
 .mfui-banner-dot__timer {
   position: absolute;
   display: block;
-  width: 24px;
+  width: 20px;
   height: 8px;
   border-radius: 4px;
 }

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

@@ -1,18 +1,11 @@
 import * as React from 'react';
 import './BannerDot.less';
-export declare const BannerDotTheme: {
-    readonly LIGHT: "light";
-    readonly DARK: "dark";
-};
-declare 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

@@ -1,13 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./BannerDot.css";
-export var BannerDotTheme = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
 var cn = cnCreate('mfui-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
@@ -17,8 +12,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);
@@ -26,21 +19,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"
@@ -58,7 +50,6 @@ BannerDot.propTypes = {
   isActive: PropTypes.bool.isRequired,
   showTimer: PropTypes.bool.isRequired,
   timerDelay: PropTypes.number.isRequired,
-  theme: PropTypes.oneOf(Object.values(BannerDotTheme)),
   onClick: PropTypes.func.isRequired
 };
 export default BannerDot;

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

@@ -0,0 +1,5 @@
+import type { SwiperOptions } from 'swiper';
+declare const SLIDES_SETTINGS: {
+    [width: number]: SwiperOptions;
+};
+export default SLIDES_SETTINGS;

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

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

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

@@ -447,6 +447,9 @@
 .mfui-button_content-type_icon-text .mfui-button__icon {
   margin-right: 4px;
 }
+.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 {
   width: -webkit-fit-content;
   width: -moz-fit-content;

package/dist/es/components/Carousel/Carousel.js

@@ -261,6 +261,7 @@ var Carousel = function Carousel(_ref) {
     var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
     window.addEventListener('resize', windowResizeHandlerThrottled);
     return function () {
+      windowResizeHandlerThrottled.cancel();
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
   }, [slidesSettings, swiperInstance]);