@megafon/ui-core 6.9.0 → 6.10.0

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

@@ -126,6 +126,32 @@
           justify-content: center;
   margin-top: 32px;
 }
+.mfui-v6-banner__pagination_position_top-in {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  width: 100%;
+  margin-top: 0;
+  padding: 0 24px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-banner__pagination_position_top-in {
+    padding: 0 80px;
+  }
+}
+.mfui-v6-banner__pagination_type_flat {
+  gap: 4px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-banner__pagination_type_flat {
+    gap: 10px;
+  }
+}
+.mfui-v6-banner__pagination_align_left {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
 .mfui-v6-banner__pagination_bottom-offset {
   position: absolute;
   bottom: 60px;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import SwiperCore from 'swiper';
 import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
+import type { PaginationThemeType, PaginationType } from './BannerDot';
 import './Banner.less';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
@@ -21,6 +22,11 @@ export declare const NavTheme: {
     readonly DARK: "dark";
 };
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+export declare const PaginationPositionType: {
+    readonly BOTTOM_OUT: "bottom-out";
+    readonly TOP_IN: "top-in";
+};
+declare type PaginationPositionType = typeof PaginationPositionType[keyof typeof PaginationPositionType];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -44,7 +50,17 @@ export interface IBannerProps {
         arrowNext?: Record<string, string>;
         pagination?: Record<string, string>;
         dot?: Record<string, string>;
+        dotSvg?: Record<string, string>;
+        dotInner?: Record<string, string>;
     };
+    /** Выравнивание блока пагинации */
+    paginationAlign?: 'center' | 'left';
+    /** Цветовая тема пагинации */
+    paginationTheme?: PaginationThemeType;
+    /** Тип кнопок пагинации */
+    paginationType?: PaginationType;
+    /** Расположение пагинации */
+    paginationPosition?: PaginationPositionType;
     /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
     withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */

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

@@ -9,7 +9,7 @@ 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 BannerDot from "./BannerDot";
+import BannerDot, { PaginationButtonType, PaginationTheme } from "./BannerDot";
 import SLIDES_SETTINGS from "./slidesSettings";
 import "./Banner.css";
 SwiperCore.use([Autoplay]);
@@ -29,6 +29,10 @@ export var NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
+export var PaginationPositionType = {
+  BOTTOM_OUT: 'bottom-out',
+  TOP_IN: 'top-in'
+};
 
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
@@ -46,6 +50,10 @@ var Banner = function Banner(_ref) {
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
+      paginationAlign = _ref.paginationAlign,
+      paginationTheme = _ref.paginationTheme,
+      paginationType = _ref.paginationType,
+      paginationPosition = _ref.paginationPosition,
       _ref$withPaginationBo = _ref.withPaginationBottomOffset,
       withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
       _ref$autoPlay = _ref.autoPlay,
@@ -248,19 +256,26 @@ var Banner = function Banner(_ref) {
   }));
   var renderPagination = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
+      type: paginationType,
+      align: paginationAlign,
+      position: paginationPosition,
       '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: {
-        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1)),
+        svg: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotSvg, i + 1)),
+        inner: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotInner, i + 1))
       },
       key: i,
       index: i,
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
+      type: paginationType,
+      theme: paginationTheme,
       onClick: handleDotClick
     });
   }));
@@ -318,9 +333,14 @@ Banner.propTypes = {
     arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowNext: PropTypes.objectOf(PropTypes.string.isRequired),
     pagination: PropTypes.objectOf(PropTypes.string.isRequired),
-    dot: PropTypes.objectOf(PropTypes.string.isRequired)
+    dot: PropTypes.objectOf(PropTypes.string.isRequired),
+    dotSvg: PropTypes.objectOf(PropTypes.string.isRequired),
+    dotInner: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
-  withPaginationBottomOffset: PropTypes.bool,
+  paginationAlign: PropTypes.oneOf(['center', 'left']),
+  paginationTheme: PropTypes.oneOf(Object.values(PaginationTheme)),
+  paginationType: PropTypes.oneOf(Object.values(PaginationButtonType)),
+  paginationPosition: PropTypes.oneOf(Object.values(PaginationPositionType)),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   loop: PropTypes.bool,

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

@@ -1,45 +1,82 @@
 .mfui-v6-banner-dot {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  margin: -2px;
-  padding: 2px;
-  cursor: pointer;
-}
-.mfui-v6-banner-dot:before {
-  content: '';
-  display: block;
   width: 8px;
   height: 8px;
   border-radius: 4px;
   background-color: var(--spbSky2);
+  cursor: pointer;
 }
 .mfui-v6-banner-dot_active {
-  cursor: default;
-}
-.mfui-v6-banner-dot_active:before {
-  width: 20px;
+  width: 24px;
   background-color: var(--brandGreen);
+  cursor: default;
+  -webkit-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
 }
 .mfui-v6-banner-dot_active .mfui-v6-banner-dot__timer-inner {
   fill: var(--brandGreen);
 }
-.mfui-v6-banner-dot_active.mfui-v6-banner-dot_timer:before {
+.mfui-v6-banner-dot_active.mfui-v6-banner-dot_has-timer {
   background-color: var(--spbSky2);
 }
+.mfui-v6-banner-dot_type_flat {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  width: auto;
+  height: 2px;
+  border-radius: 24px;
+}
+.mfui-v6-banner-dot_type_flat .mfui-v6-banner-dot__timer {
+  width: 100%;
+  height: 100%;
+}
+.mfui-v6-banner-dot_type_flat .mfui-v6-banner-dot__timer-inner {
+  width: 100%;
+  height: 100%;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-animation: timer-reversed linear;
+          animation: timer-reversed linear;
+}
+.mfui-v6-banner-dot_theme_light {
+  background-color: var(--stcWhite50);
+}
+.mfui-v6-banner-dot_theme_light .mfui-v6-banner-dot__timer {
+  background-color: var(--stcWhite50);
+}
+.mfui-v6-banner-dot_theme_light .mfui-v6-banner-dot__timer-inner {
+  fill: var(--stcWhite);
+}
+.mfui-v6-banner-dot_theme_light.mfui-v6-banner-dot_active {
+  background-color: var(--stcWhite);
+}
+.mfui-v6-banner-dot_theme_light.mfui-v6-banner-dot_has-timer {
+  background-color: transparent;
+}
+.mfui-v6-banner-dot_theme_dark {
+  background-color: var(--stcBlack10);
+}
+.mfui-v6-banner-dot_theme_dark .mfui-v6-banner-dot__timer {
+  background-color: var(--stcBlack10);
+}
+.mfui-v6-banner-dot_theme_dark .mfui-v6-banner-dot__timer-inner {
+  fill: var(--stcBlack);
+}
+.mfui-v6-banner-dot_theme_dark.mfui-v6-banner-dot_active {
+  background-color: var(--stcBlack);
+}
+.mfui-v6-banner-dot_theme_dark.mfui-v6-banner-dot_has-timer {
+  background-color: transparent;
+}
 .mfui-v6-banner-dot__timer {
   position: absolute;
+  top: 0;
+  left: 0;
   display: block;
-  width: 20px;
+  width: 24px;
   height: 8px;
   border-radius: 4px;
 }
@@ -67,3 +104,19 @@
     width: 0;
   }
 }
+@-webkit-keyframes timer-reversed {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes timer-reversed {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}

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

@@ -1,5 +1,16 @@
 import * as React from 'react';
 import './BannerDot.less';
+export declare const PaginationTheme: {
+    readonly DEFAULT: "default";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+export declare type PaginationThemeType = typeof PaginationTheme[keyof typeof PaginationTheme];
+export declare const PaginationButtonType: {
+    readonly DOT: "dot";
+    readonly FLAT: "flat";
+};
+export declare type PaginationType = typeof PaginationButtonType[keyof typeof PaginationButtonType];
 export interface IBannerDotProps {
     className?: string;
     index: number;
@@ -11,6 +22,8 @@ export interface IBannerDotProps {
         svg?: Record<string, string>;
         inner?: Record<string, string>;
     };
+    type?: PaginationType;
+    theme?: PaginationThemeType;
     onClick: (index: number) => void;
 }
 declare const BannerDot: React.FC<IBannerDotProps>;

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

@@ -1,8 +1,27 @@
 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";
+var DOT_VIEW_BOX = '0 0 250 100';
+var DOT_RECT_PROPS = {
+  x: '0',
+  y: '0',
+  width: '250',
+  height: '100',
+  rx: '50',
+  ry: '50'
+};
+export var PaginationTheme = {
+  DEFAULT: 'default',
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+export var PaginationButtonType = {
+  DOT: 'dot',
+  FLAT: 'flat'
+};
 var cn = cnCreate('mfui-v6-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
@@ -12,30 +31,32 @@ var BannerDot = function BannerDot(_ref) {
       isActive = _ref.isActive,
       showTimer = _ref.showTimer,
       timerDelay = _ref.timerDelay,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? PaginationButtonType.DOT : _ref$type,
+      theme = _ref.theme,
       onClick = _ref.onClick;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
   }, [onClick, index]);
+  var viewBox = type === PaginationButtonType.DOT ? DOT_VIEW_BOX : undefined;
+  var rectProps = type === PaginationButtonType.DOT ? DOT_RECT_PROPS : {};
+  var hasTimer = showTimer && isActive;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      timer: showTimer
+      type: type,
+      theme: theme,
+      'has-timer': hasTimer
     }, className),
     onClick: handleDotClick
-  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
+  }), hasTimer && /*#__PURE__*/React.createElement("svg", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg), {
     className: cn('timer'),
-    viewBox: "0 0 250 100"
-  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    viewBox: viewBox
+  }), /*#__PURE__*/React.createElement("rect", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), rectProps, {
     className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
-    },
-    x: "0",
-    y: "0",
-    width: "250",
-    height: "100",
-    rx: "50",
-    ry: "50"
+    }
   }))));
 };
 
@@ -50,6 +71,8 @@ BannerDot.propTypes = {
   isActive: PropTypes.bool.isRequired,
   showTimer: PropTypes.bool.isRequired,
   timerDelay: PropTypes.number.isRequired,
+  type: PropTypes.oneOf(Object.values(PaginationButtonType)),
+  theme: PropTypes.oneOf(Object.values(PaginationTheme)),
   onClick: PropTypes.func.isRequired
 };
 export default BannerDot;

package/dist/es/components/Search/Search.js

@@ -376,8 +376,15 @@ var Search = function Search(_ref) {
   };
 
   React.useEffect(function () {
+    return setSearchQuery(value);
+  }, [value]);
+  React.useEffect(function () {
+    if (value !== searchQuery) {
+      return;
+    }
+
     textareaResize();
-  }, [textareaResize]);
+  }, [searchQuery, value, textareaResize]);
   React.useEffect(function () {
     if (!resizerRef.current || !isTextarea || !showResizer) {
       return;
@@ -419,9 +426,6 @@ var Search = function Search(_ref) {
     resizerRef.current.addEventListener('mousedown', handleStartResize);
     resizerRef.current.addEventListener('touchstart', handleStartResize);
   }, [isTextarea, minTextareaHeight, showResizer]);
-  React.useEffect(function () {
-    return setSearchQuery(value);
-  }, [value]);
   React.useEffect(function () {
     debouncedOnChange.current = debounce(function (inputValue) {
       return onChange && onChange(inputValue);

package/dist/lib/components/Banner/Banner.css

@@ -126,6 +126,32 @@
           justify-content: center;
   margin-top: 32px;
 }
+.mfui-v6-banner__pagination_position_top-in {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  width: 100%;
+  margin-top: 0;
+  padding: 0 24px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-banner__pagination_position_top-in {
+    padding: 0 80px;
+  }
+}
+.mfui-v6-banner__pagination_type_flat {
+  gap: 4px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-banner__pagination_type_flat {
+    gap: 10px;
+  }
+}
+.mfui-v6-banner__pagination_align_left {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
 .mfui-v6-banner__pagination_bottom-offset {
   position: absolute;
   bottom: 60px;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import SwiperCore from 'swiper';
 import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
+import type { PaginationThemeType, PaginationType } from './BannerDot';
 import './Banner.less';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
@@ -21,6 +22,11 @@ export declare const NavTheme: {
     readonly DARK: "dark";
 };
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+export declare const PaginationPositionType: {
+    readonly BOTTOM_OUT: "bottom-out";
+    readonly TOP_IN: "top-in";
+};
+declare type PaginationPositionType = typeof PaginationPositionType[keyof typeof PaginationPositionType];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -44,7 +50,17 @@ export interface IBannerProps {
         arrowNext?: Record<string, string>;
         pagination?: Record<string, string>;
         dot?: Record<string, string>;
+        dotSvg?: Record<string, string>;
+        dotInner?: Record<string, string>;
     };
+    /** Выравнивание блока пагинации */
+    paginationAlign?: 'center' | 'left';
+    /** Цветовая тема пагинации */
+    paginationTheme?: PaginationThemeType;
+    /** Тип кнопок пагинации */
+    paginationType?: PaginationType;
+    /** Расположение пагинации */
+    paginationPosition?: PaginationPositionType;
     /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
     withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */

package/dist/lib/components/Banner/Banner.js

@@ -5,7 +5,7 @@ function _typeof3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "funct
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NavTheme = exports.Radius = exports.BackgroundColor = void 0;
+exports["default"] = exports.PaginationPositionType = exports.NavTheme = exports.Radius = exports.BackgroundColor = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,7 +29,7 @@ var _react2 = require("swiper/react");
 
 var _NavArrow = _interopRequireWildcard(require("../NavArrow/NavArrow"));
 
-var _BannerDot = _interopRequireDefault(require("./BannerDot"));
+var _BannerDot = _interopRequireWildcard(require("./BannerDot"));
 
 var _slidesSettings = _interopRequireDefault(require("./slidesSettings"));
 
@@ -60,6 +60,11 @@ var NavTheme = {
   DARK: 'dark'
 };
 exports.NavTheme = NavTheme;
+var PaginationPositionType = {
+  BOTTOM_OUT: 'bottom-out',
+  TOP_IN: 'top-in'
+};
+exports.PaginationPositionType = PaginationPositionType;
 
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
@@ -77,6 +82,10 @@ var Banner = function Banner(_ref) {
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
+      paginationAlign = _ref.paginationAlign,
+      paginationTheme = _ref.paginationTheme,
+      paginationType = _ref.paginationType,
+      paginationPosition = _ref.paginationPosition,
       _ref$withPaginationBo = _ref.withPaginationBottomOffset,
       withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
       _ref$autoPlay = _ref.autoPlay,
@@ -279,19 +288,26 @@ var Banner = function Banner(_ref) {
   }));
   var renderPagination = /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
+      type: paginationType,
+      align: paginationAlign,
+      position: paginationPosition,
       'bottom-offset': withPaginationBottomOffset
     }, [classes.pagination])
-  }), React.Children.map(children, function (_, i) {
+  }), children && React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(_BannerDot["default"], {
       className: cn('dot', [classes.dot]),
       dataAttrs: {
-        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1)),
+        svg: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotSvg, i + 1)),
+        inner: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dotInner, i + 1))
       },
       key: i,
       index: i,
       isActive: i === activeIndex,
       showTimer: showDotTimer,
       timerDelay: dotTimerDelay,
+      type: paginationType,
+      theme: paginationTheme,
       onClick: handleDotClick
     });
   }));
@@ -349,9 +365,14 @@ Banner.propTypes = {
     arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
     arrowNext: PropTypes.objectOf(PropTypes.string.isRequired),
     pagination: PropTypes.objectOf(PropTypes.string.isRequired),
-    dot: PropTypes.objectOf(PropTypes.string.isRequired)
+    dot: PropTypes.objectOf(PropTypes.string.isRequired),
+    dotSvg: PropTypes.objectOf(PropTypes.string.isRequired),
+    dotInner: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
-  withPaginationBottomOffset: PropTypes.bool,
+  paginationAlign: PropTypes.oneOf(['center', 'left']),
+  paginationTheme: PropTypes.oneOf(Object.values(_BannerDot.PaginationTheme)),
+  paginationType: PropTypes.oneOf(Object.values(_BannerDot.PaginationButtonType)),
+  paginationPosition: PropTypes.oneOf(Object.values(PaginationPositionType)),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   loop: PropTypes.bool,

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

@@ -1,45 +1,82 @@
 .mfui-v6-banner-dot {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  margin: -2px;
-  padding: 2px;
-  cursor: pointer;
-}
-.mfui-v6-banner-dot:before {
-  content: '';
-  display: block;
   width: 8px;
   height: 8px;
   border-radius: 4px;
   background-color: var(--spbSky2);
+  cursor: pointer;
 }
 .mfui-v6-banner-dot_active {
-  cursor: default;
-}
-.mfui-v6-banner-dot_active:before {
-  width: 20px;
+  width: 24px;
   background-color: var(--brandGreen);
+  cursor: default;
+  -webkit-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
 }
 .mfui-v6-banner-dot_active .mfui-v6-banner-dot__timer-inner {
   fill: var(--brandGreen);
 }
-.mfui-v6-banner-dot_active.mfui-v6-banner-dot_timer:before {
+.mfui-v6-banner-dot_active.mfui-v6-banner-dot_has-timer {
   background-color: var(--spbSky2);
 }
+.mfui-v6-banner-dot_type_flat {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  width: auto;
+  height: 2px;
+  border-radius: 24px;
+}
+.mfui-v6-banner-dot_type_flat .mfui-v6-banner-dot__timer {
+  width: 100%;
+  height: 100%;
+}
+.mfui-v6-banner-dot_type_flat .mfui-v6-banner-dot__timer-inner {
+  width: 100%;
+  height: 100%;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-animation: timer-reversed linear;
+          animation: timer-reversed linear;
+}
+.mfui-v6-banner-dot_theme_light {
+  background-color: var(--stcWhite50);
+}
+.mfui-v6-banner-dot_theme_light .mfui-v6-banner-dot__timer {
+  background-color: var(--stcWhite50);
+}
+.mfui-v6-banner-dot_theme_light .mfui-v6-banner-dot__timer-inner {
+  fill: var(--stcWhite);
+}
+.mfui-v6-banner-dot_theme_light.mfui-v6-banner-dot_active {
+  background-color: var(--stcWhite);
+}
+.mfui-v6-banner-dot_theme_light.mfui-v6-banner-dot_has-timer {
+  background-color: transparent;
+}
+.mfui-v6-banner-dot_theme_dark {
+  background-color: var(--stcBlack10);
+}
+.mfui-v6-banner-dot_theme_dark .mfui-v6-banner-dot__timer {
+  background-color: var(--stcBlack10);
+}
+.mfui-v6-banner-dot_theme_dark .mfui-v6-banner-dot__timer-inner {
+  fill: var(--stcBlack);
+}
+.mfui-v6-banner-dot_theme_dark.mfui-v6-banner-dot_active {
+  background-color: var(--stcBlack);
+}
+.mfui-v6-banner-dot_theme_dark.mfui-v6-banner-dot_has-timer {
+  background-color: transparent;
+}
 .mfui-v6-banner-dot__timer {
   position: absolute;
+  top: 0;
+  left: 0;
   display: block;
-  width: 20px;
+  width: 24px;
   height: 8px;
   border-radius: 4px;
 }
@@ -67,3 +104,19 @@
     width: 0;
   }
 }
+@-webkit-keyframes timer-reversed {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes timer-reversed {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}