@megafon/ui-core 5.9.2 → 5.10.1

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.10.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.10.0...@megafon/ui-core@5.10.1) (2024-04-24)
+
+
+### Bug Fixes
+
+* **banner:** fix children background ([a6e3d12](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/a6e3d127dd5b73dcea4d54e96e95ae8189f61824))
+
+
+
+
+
+# [5.10.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.9.2...@megafon/ui-core@5.10.0) (2024-04-22)
+
+
+### Bug Fixes
+
+* **sliders:** fix bugs ([2992a34](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2992a348fab99cc65a190a2892262e7e4b65b693))
+* **snackbartimer:** update color timer value ([911fb68](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/911fb681d36db1e89c43d10f7899fb6038336a36))
+* **tooltip:** add border ([ba4461f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ba4461ff86b98a021dca47b7836e2cd2c05cbfcd))
+
+
+### Features
+
+* **banner:** update Banner component ([a2fde9e](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/a2fde9ebda0993ac9cefe80e61d40780d2b20452))
+* **bannerdot:** update BannerDot component ([22b03d6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/22b03d61f19304d242229f8c8d925bcd1adb7da4))
+* **button:** add new prop for Button component ([98fb1bd](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/98fb1bd8964ddd76866074d2b8f5890b99253b97))
+* **contentview:** add classes props ([2871dd6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2871dd6dd836762da0e9c8c21c07ba445361e6b2))
+* **navarrow:** add new theme for NavArrow component ([aff36c6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/aff36c6e055bbe708fc45d0cbe22e3a4a3669850))
+* **pricebadge:** add new themes for PriceBadge component ([e521f40](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/e521f405f8b2bc78bd15da5555c397b098f5c81d))
+
+
+
+
+
 ## [5.9.2](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.9.1...@megafon/ui-core@5.9.2) (2024-04-11)
 
 

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css

@@ -64,6 +64,21 @@
 .mfui-price-badge_theme_red .mfui-price-badge__icon {
   fill: var(--fury);
 }
+.mfui-price-badge_theme_light {
+  background-color: var(--stcWhite20);
+}
+.mfui-price-badge_theme_dark {
+  background-color: var(--stcBlack20);
+}
+.mfui-price-badge_theme_light .mfui-price-badge__text,
+.mfui-price-badge_theme_dark .mfui-price-badge__text {
+  font-weight: 400;
+  color: var(--stcWhite);
+}
+.mfui-price-badge_theme_light .mfui-price-badge__icon,
+.mfui-price-badge_theme_dark .mfui-price-badge__icon {
+  fill: var(--stcWhite);
+}
 .mfui-price-badge_size_big {
   padding: 12px 12px 12px 4px;
   font-size: 15px;

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -5,6 +5,8 @@ export declare const PriceBadgeTheme: {
     readonly GREY: "grey";
     readonly GREEN: "green";
     readonly ORANGE: "orange";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
 };
 export declare const PriceBadgeIcon: {
     readonly TIMER: "timer";

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js

@@ -117,7 +117,9 @@ export var PriceBadgeTheme = {
   RED: 'red',
   GREY: 'grey',
   GREEN: 'green',
-  ORANGE: 'orange'
+  ORANGE: 'orange',
+  LIGHT: 'light',
+  DARK: 'dark'
 };
 export var PriceBadgeIcon = {
   TIMER: 'timer',

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

@@ -1,31 +1,19 @@
 .mfui-banner {
   position: relative;
-  overflow: hidden;
 }
 .mfui-banner .swiper-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
+.mfui-banner__swiper {
+  overflow: hidden;
+}
 .mfui-banner__slide {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   height: 500px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-banner__slide {
-    height: 540px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-banner__slide {
-    -webkit-backface-visibility: hidden;
-            backface-visibility: hidden;
-    opacity: 0;
-    -webkit-transition: opacity 0.2s;
-    transition: opacity 0.2s;
-  }
-}
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
   .mfui-banner__slide {
     height: 420px;
@@ -50,14 +38,24 @@
   position: absolute;
   top: 50%;
   z-index: 10;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  translate: 0 -50%;
+  -webkit-transition: scale 0.2s linear;
+  transition: scale 0.2s linear;
 }
 @media screen and (max-width: 767px) {
   .mfui-banner__arrow {
     display: none;
   }
 }
+.mfui-banner__arrow_theme_white {
+  width: 64px;
+  height: 64px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-banner__arrow_theme_white {
+    display: none;
+  }
+}
 .mfui-banner__arrow_prev {
   left: 12px;
 }
@@ -94,33 +92,44 @@
     right: 20px;
   }
 }
+.mfui-banner__arrow_prev.mfui-banner__arrow_theme_white {
+  left: 0;
+  translate: -50% -50%;
+}
+.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 {
   position: absolute;
-  bottom: 16px;
+  bottom: 24px;
   left: 50%;
   z-index: 10;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  gap: 8px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding: 6px;
+  padding: 6px 10px;
   border-radius: 12px;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
-.mfui-banner__pagination_theme_light {
-  background-color: transparent;
-}
-.mfui-banner__pagination_theme_green {
-  background-color: var(--brandGreen);
-}
-.mfui-banner__pagination_theme_dark {
-  background-color: var(--stcBlack20);
+@media screen and (min-width: 1024px) {
+  .mfui-banner__pagination {
+    bottom: 16px;
+  }
 }
 .mfui-banner__pagination_bottom-offset {
   bottom: 60px;
@@ -145,10 +154,31 @@
     bottom: 72px;
   }
 }
-.mfui-banner__dot {
-  width: 12px;
-  height: 12px;
+.mfui-banner__pagination_theme_light {
+  background-color: var(--stcWhite20);
+}
+.mfui-banner__pagination_theme_dark {
+  background-color: var(--stcBlack20);
+}
+.mfui-banner_radius_rounded {
+  border-radius: 24px;
+}
+.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 0%, #F6F2F9 100%);
+}
+.mfui-banner_background-color_light {
+  background-color: #F6F2F9;
 }
-.mfui-banner__dot:not(:last-child) {
-  margin-right: 8px;
+.mfui-banner_background-color_spbSky0 {
+  background-color: var(--spbSky0);
 }

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

@@ -1,8 +1,23 @@
 import * as React from 'react';
+import SwiperCore from 'swiper';
+import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
 import './Banner.less';
+export declare const BackgroundColor: {
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly GRADIENT: "gradient";
+    readonly LIGHT: "light";
+};
+declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+export declare const Radius: {
+    readonly CORNERS: "corners";
+    readonly ROUNDED: "rounded";
+};
+export declare type RadiusType = typeof Radius[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
-    readonly GREEN: "green";
     readonly DARK: "dark";
 };
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
@@ -13,8 +28,13 @@ export interface IBannerProps {
     loop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
+        swiper?: string;
         slide?: string;
         arrow?: string;
+        arrowPrev?: string;
+        arrowNext?: string;
+        pagination?: string;
+        dot?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -34,10 +54,18 @@ export interface IBannerProps {
     autoPlayDelay?: number;
     /** Пауза автоматической прокрутки при наведении курсора на компонент */
     pauseOnHover?: boolean;
+    /** Фоновый цвет */
+    backgroundColor?: BackgroundColorType;
+    /** Радиус границы */
+    radius?: RadiusType;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
+    /** Цветовая тема стрелок */
+    arrowTheme?: ArrowThemeType;
     /** Автоматическая высота слайдов */
     autoHeight?: boolean;
+    /** Ref на swiper */
+    getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке "назад" (должен быть обернут в useCallback) */

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

@@ -4,17 +4,28 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.values.js";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import SwiperCore, { Autoplay } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
-import "./Banner.css";
 import BannerDot from "./BannerDot";
+import "./Banner.css";
 SwiperCore.use([Autoplay]);
+export var BackgroundColor = {
+  TRANSPARENT: 'transparent',
+  GREEN: 'green',
+  PURPLE: 'purple',
+  SPB_SKY_0: 'spbSky0',
+  GRADIENT: 'gradient',
+  LIGHT: 'light'
+};
+export var Radius = {
+  CORNERS: 'corners',
+  ROUNDED: 'rounded'
+};
 export var NavTheme = {
   LIGHT: 'light',
-  GREEN: 'green',
   DARK: 'dark'
 };
 
@@ -42,11 +53,18 @@ var Banner = function Banner(_ref) {
       _ref$loop = _ref.loop,
       loop = _ref$loop === void 0 ? false : _ref$loop,
       _ref$navTheme = _ref.navTheme,
-      navTheme = _ref$navTheme === void 0 ? 'light' : _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$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$autoHeight = _ref.autoHeight,
       autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? [] : _ref$children,
+      getSwiper = _ref.getSwiper,
       onNextClick = _ref.onNextClick,
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
@@ -55,44 +73,49 @@ var Banner = function Banner(_ref) {
       _ref$pauseOnHover = _ref.pauseOnHover,
       pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
 
-  var _React$useState = React.useState(),
+  var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      swiperInstance = _React$useState2[0],
-      setSwiperInstance = _React$useState2[1];
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
 
-  var _React$useState3 = React.useState(true),
+  var _React$useState3 = React.useState(),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isBeginning = _React$useState4[0],
-      setBeginning = _React$useState4[1];
+      swiperInstance = _React$useState4[0],
+      setSwiperInstance = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = React.useState(true),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isEnd = _React$useState6[0],
-      setEnd = _React$useState6[1];
+      isBeginning = _React$useState6[0],
+      setBeginning = _React$useState6[1];
 
-  var _React$useState7 = React.useState(autoPlay),
+  var _React$useState7 = React.useState(false),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isAutoPlaying = _React$useState8[0],
-      setAutoPlaying = _React$useState8[1];
+      isEnd = _React$useState8[0],
+      setEnd = _React$useState8[1];
 
-  var _React$useState9 = React.useState(0),
+  var _React$useState9 = React.useState(autoPlay),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      activeIndex = _React$useState10[0],
-      setActiveIndex = _React$useState10[1];
+      isAutoPlaying = _React$useState10[0],
+      setAutoPlaying = _React$useState10[1];
 
-  var _React$useState11 = React.useState(autoPlayDelay),
+  var _React$useState11 = React.useState(0),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      delay = _React$useState12[0],
-      setDelay = _React$useState12[1];
+      activeIndex = _React$useState12[0],
+      setActiveIndex = _React$useState12[1];
 
-  var _React$useState13 = React.useState(false),
+  var _React$useState13 = React.useState(autoPlayDelay),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      isIncreasedDelay = _React$useState14[0],
-      setIsIncreasedDelay = _React$useState14[1];
+      delay = _React$useState14[0],
+      setDelay = _React$useState14[1];
+
+  var _React$useState15 = React.useState(false),
+      _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 navArrowTheme = navTheme === NavTheme.DARK ? ArrowTheme.DARK : ArrowTheme.PURPLE;
   var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
@@ -162,6 +185,13 @@ var Banner = function Banner(_ref) {
     setActiveIndex(realIndex);
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
+  var handleSwiper = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+    getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
+  }, [getSwiper]);
+  React.useEffect(function () {
+    setTouch(detectTouch());
+  }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
 
@@ -181,15 +211,18 @@ var Banner = function Banner(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme,
-      'auto-height': autoHeight
+      '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'),
+    className: cn('swiper', [classes.swiper]),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
     watchSlidesVisibility: true,
-    onSwiper: setSwiperInstance,
+    onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
@@ -197,58 +230,68 @@ var Banner = function Banner(_ref) {
     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), {
-      key: i,
-      className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
-    }), child);
-  })), /*#__PURE__*/React.createElement(NavArrow, {
+      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, {
+    className: cn('arrow', {
+      prev: true,
+      theme: arrowTheme
+    }, [classes.arrow, classes.arrowPrev]),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
     },
-    className: cn('arrow', {
-      prev: true
-    }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
-    theme: navArrowTheme
+    theme: arrowTheme
   }), /*#__PURE__*/React.createElement(NavArrow, {
+    className: cn('arrow', {
+      next: true,
+      theme: arrowTheme
+    }, [classes.arrow, classes.arrowNext]),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
     },
-    className: cn('arrow', {
-      next: true
-    }, [classes.arrow]),
     view: "next",
     onClick: handleNextClick,
     disabled: !loop && isEnd,
-    theme: navArrowTheme
+    theme: arrowTheme
   }), /*#__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) {
     return /*#__PURE__*/React.createElement(BannerDot, {
+      className: cn('dot', [classes.dot]),
       dataAttrs: {
         root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
       },
       key: i,
-      className: cn('dot'),
       index: i,
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
+      theme: navTheme,
       onClick: handleDotClick
     });
-  })));
+  }))));
 };
 
 Banner.propTypes = {
   className: PropTypes.string,
   loop: PropTypes.bool,
   classes: PropTypes.shape({
-    slide: PropTypes.string
+    swiper: PropTypes.string,
+    slide: PropTypes.string,
+    arrow: PropTypes.string,
+    arrowPrev: PropTypes.string,
+    arrowNext: PropTypes.string,
+    pagination: PropTypes.string,
+    dot: PropTypes.string
   }),
-  withPaginationBottomOffset: PropTypes.bool,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     swiper: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -258,11 +301,16 @@ Banner.propTypes = {
     pagination: PropTypes.objectOf(PropTypes.string.isRequired),
     dot: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
+  withPaginationBottomOffset: PropTypes.bool,
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   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,
+  getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
   onDotClick: PropTypes.func,

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

@@ -1,4 +1,5 @@
 .mfui-banner-dot {
+  position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -11,60 +12,65 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 2px;
-  border-radius: 50%;
   cursor: pointer;
 }
 .mfui-banner-dot:before {
   content: '';
   display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
+  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);
+}
 .mfui-banner-dot_active {
-  padding: 0;
   cursor: default;
 }
 .mfui-banner-dot_active:before {
-  background-color: var(--stcWhite);
+  width: 24px;
 }
 .mfui-banner-dot_active.mfui-banner-dot_timer:before {
-  display: none;
+  background-color: var(--stcWhite50);
 }
 .mfui-banner-dot__timer {
+  position: absolute;
   display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
+  width: 24px;
+  height: 8px;
+  border-radius: 4px;
 }
-.mfui-banner-dot__timer-circle {
+.mfui-banner-dot__timer-inner {
   -webkit-transform: scale(-1, 1);
           transform: scale(-1, 1);
   -webkit-transform-origin: center;
           transform-origin: center;
   -webkit-animation: timer linear;
           animation: timer linear;
-  fill: var(--stcWhite50);
-  stroke: var(--base);
-  stroke-width: 100;
-  stroke-dasharray: 1000;
 }
 @-webkit-keyframes timer {
   0% {
-    stroke-dashoffset: -350;
+    width: 100%;
   }
   100% {
-    stroke-dashoffset: 0;
+    width: 0;
   }
 }
 @keyframes timer {
   0% {
-    stroke-dashoffset: -350;
+    width: 100%;
   }
   100% {
-    stroke-dashoffset: 0;
+    width: 0;
   }
 }

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

@@ -1,15 +1,22 @@
 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>;
-        circle?: Record<string, string>;
+        inner?: Record<string, string>;
     };
     onClick: (index: number) => void;
 }