@megafon/ui-core 5.9.2 → 5.10.1

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

@@ -1,8 +1,13 @@
 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) {
@@ -12,6 +17,8 @@ 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);
@@ -19,20 +26,24 @@ 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
+      timer: showTimer,
+      theme: theme
     }, className),
     onClick: handleDotClick
   }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", _extends({
     className: cn('timer'),
-    viewBox: "0 0 100 100"
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.svg)), /*#__PURE__*/React.createElement("circle", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.circle), {
-    className: cn('timer-circle'),
+    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), {
+    className: cn('timer-inner'),
     style: {
       animationDuration: "".concat(timerDelay, "s")
     },
-    cx: "50",
-    cy: "50",
-    r: "50"
+    x: "0",
+    y: "0",
+    width: "300",
+    height: "100",
+    rx: "50",
+    ry: "50"
   }))));
 };
 
@@ -41,12 +52,13 @@ BannerDot.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     svg: PropTypes.objectOf(PropTypes.string.isRequired),
-    circle: PropTypes.objectOf(PropTypes.string.isRequired)
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   index: PropTypes.number.isRequired,
   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/Button/Button.css

@@ -736,6 +736,12 @@
   display: block;
   width: 100%;
 }
+@media screen and (max-width: 767px) {
+  .mfui-button_full-width-mobile {
+    display: block;
+    width: 100%;
+  }
+}
 .mfui-button.mfui-button_type_primary.mfui-button_disabled,
 .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:hover,

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

@@ -70,6 +70,8 @@ export interface IButtonProps {
     sizeMobile?: ButtonSizesType;
     /** Растянуть на полную ширину контейнера */
     fullWidth?: boolean;
+    /** Растянуть на полную ширину контейнера на разрешении экрана 0-767 */
+    fullWidthMobile?: boolean;
     /** Показать загрузку */
     showLoader?: boolean;
     /** Показать стелку */

package/dist/es/components/Button/Button.js

@@ -78,6 +78,8 @@ var Button = function Button(_ref) {
       sizeMobile = _ref.sizeMobile,
       _ref$fullWidth = _ref.fullWidth,
       fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$fullWidthMobile = _ref.fullWidthMobile,
+      fullWidthMobile = _ref$fullWidthMobile === void 0 ? false : _ref$fullWidthMobile,
       _ref$showLoader = _ref.showLoader,
       showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
       _ref$showArrow = _ref.showArrow,
@@ -203,6 +205,7 @@ var Button = function Button(_ref) {
       'size-tablet': sizeTablet,
       'size-mobile': sizeMobile,
       'full-width': fullWidth,
+      'full-width-mobile': fullWidthMobile,
       loading: showLoader,
       'no-touch': !isTouch,
       'content-type': contentType,
@@ -248,6 +251,7 @@ Button.propTypes = {
   sizeTablet: PropTypes.oneOf(Object.values(ButtonSizes)),
   sizeMobile: PropTypes.oneOf(Object.values(ButtonSizes)),
   fullWidth: PropTypes.bool,
+  fullWidthMobile: PropTypes.bool,
   showLoader: PropTypes.bool,
   showArrow: PropTypes.bool,
   icon: PropTypes.element,

package/dist/es/components/ContentView/ContentView.css

@@ -48,9 +48,15 @@
 }
 .mfui-content-view__title {
   font-weight: 500;
-  font-size: 20px;
-  line-height: 28px;
-  letter-spacing: 0.5px;
+  font-size: 18px;
+  line-height: 24px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-content-view__title {
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: 0.5px;
+  }
 }
 .mfui-content-view__text {
   font-size: 15px;
@@ -93,6 +99,5 @@
 }
 .mfui-content-view_fullscreen .mfui-content-view__buttons {
   margin-top: auto;
-  padding-top: 24px;
   padding-bottom: 24px;
 }

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

@@ -13,6 +13,12 @@ declare type ElementType = {
 export interface IContentViewProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        button?: string;
+        link?: string;
+    };
     /** Заголовок */
     title: string;
     /** Тип встроенного изображения */

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

@@ -9,6 +9,8 @@ var cn = cnCreate('mfui-content-view');
 
 var ContentView = function ContentView(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       title = _ref.title,
       type = _ref.type,
       _ref$alt = _ref.alt,
@@ -35,12 +37,13 @@ var ContentView = function ContentView(_ref) {
     src: src,
     alt: alt
   }), /*#__PURE__*/React.createElement("div", {
-    className: cn('title')
+    className: cn('title', [classes.title])
   }, title), !!children && /*#__PURE__*/React.createElement("div", {
     className: cn('text')
   }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
     className: cn('buttons')
   }, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(Button, {
+    className: cn('button', [classes.button]),
     href: buttonParams.href,
     target: buttonParams.target,
     onClick: buttonParams.onClick,
@@ -48,6 +51,7 @@ var ContentView = function ContentView(_ref) {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
     }
   }, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(Button, {
+    className: cn('link', [classes.link]),
     type: "text",
     href: linkParams.href,
     target: linkParams.target,

package/dist/es/components/NavArrow/NavArrow.css

@@ -45,3 +45,19 @@
 .mfui-nav-arrow_theme_dark:active {
   background-color: var(--buttonDown);
 }
+.mfui-nav-arrow_theme_white {
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-nav-arrow_theme_white:hover {
+  -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-nav-arrow_theme_white:active {
+  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+}
+.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon {
+  fill: var(--stcBlack);
+}

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

@@ -3,12 +3,13 @@ import './NavArrow.less';
 export declare const Theme: {
     readonly PURPLE: "purple";
     readonly DARK: "dark";
+    readonly WHITE: "white";
 };
 export declare const View: {
     readonly PREV: "prev";
     readonly NEXT: "next";
 };
-declare type ThemeType = typeof Theme[keyof typeof Theme];
+export declare type ThemeType = typeof Theme[keyof typeof Theme];
 declare type ViewType = typeof View[keyof typeof View];
 export interface INavArrowProps {
     dataAttrs?: {

package/dist/es/components/NavArrow/NavArrow.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.object.values.js";
 import * as React from 'react';
-import "./NavArrow.css";
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
+import "./NavArrow.css";
 
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -23,7 +23,8 @@ var ArrowRight = function ArrowRight(props) {
 
 export var Theme = {
   PURPLE: 'purple',
-  DARK: 'dark'
+  DARK: 'dark',
+  WHITE: 'white'
 };
 export var View = {
   PREV: 'prev',

package/dist/es/components/Sliders/Slider/Slider.css

@@ -104,6 +104,8 @@
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -webkit-appearance: none;
   background-color: var(--spbSky2);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb {
   width: 24px;
@@ -114,6 +116,7 @@
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -webkit-appearance: none;
   background-color: var(--spbSky2);
+  box-shadow: none;
 }
 .mfui-slider_disabled .mfui-slider__range-input::-ms-thumb {
   width: 24px;
@@ -124,4 +127,5 @@
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -webkit-appearance: none;
   background-color: var(--spbSky2);
+  box-shadow: none;
 }

package/dist/es/components/Sliders/Slider/Slider.js

@@ -16,7 +16,7 @@ var Slider = function Slider(_ref) {
       displayValueType = _ref.displayValueType,
       displayValueUnit = _ref.displayValueUnit,
       _ref$value = _ref.value,
-      outerRangeValue = _ref$value === void 0 ? 0 : _ref$value,
+      outerValue = _ref$value === void 0 ? 0 : _ref$value,
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
       _ref$isControlled = _ref.isControlled,
@@ -29,14 +29,14 @@ var Slider = function Slider(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       dataAttrs = _ref.dataAttrs,
       onChange = _ref.onChange;
-  var defaultRangeValue = outerRangeValue || minValue;
+  var outerRangeValue = getRangeValue(outerValue, minValue, maxValue, step);
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rawInputValue = _React$useState2[0],
       setRawInputValue = _React$useState2[1];
 
-  var _React$useState3 = React.useState(defaultRangeValue),
+  var _React$useState3 = React.useState(outerRangeValue),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       innerRangeValue = _React$useState4[0],
       setInnerRangeValue = _React$useState4[1];

package/dist/es/components/Sliders/SliderRange/SliderRange.css

@@ -129,6 +129,8 @@
   -webkit-appearance: none;
   pointer-events: auto;
   background-color: var(--spbSky2);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb {
   width: var(--thumbSize);
@@ -140,6 +142,7 @@
   -webkit-appearance: none;
   pointer-events: auto;
   background-color: var(--spbSky2);
+  box-shadow: none;
 }
 .mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb {
   width: var(--thumbSize);
@@ -151,4 +154,5 @@
   -webkit-appearance: none;
   pointer-events: auto;
   background-color: var(--spbSky2);
+  box-shadow: none;
 }

package/dist/es/components/Sliders/SliderRatio/SliderRatio.css

@@ -170,6 +170,8 @@
   pointer-events: auto;
   background-color: var(--spbSky2);
   background-image: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb {
   width: var(--thumbSize);
@@ -185,6 +187,7 @@
   pointer-events: auto;
   background-color: var(--spbSky2);
   background-image: none;
+  box-shadow: none;
 }
 .mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb {
   width: var(--thumbSize);
@@ -200,6 +203,7 @@
   pointer-events: auto;
   background-color: var(--spbSky2);
   background-image: none;
+  box-shadow: none;
 }
 .mfui-slider-ratio_disabled .mfui-slider-ratio__range-track {
   cursor: default;

package/dist/es/components/Sliders/SliderRatio/SliderRatio.js

@@ -45,10 +45,15 @@ var SliderRatio = function SliderRatio(_ref) {
 
   var stepCount = values.length - 1;
 
-  var _React$useState = React.useState(outerIndex),
+  var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      innerIndex = _React$useState2[0],
-      setInnerIndex = _React$useState2[1];
+      isPointerUpped = _React$useState2[0],
+      setIsPointerUpped = _React$useState2[1];
+
+  var _React$useState3 = React.useState(outerIndex),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      innerIndex = _React$useState4[0],
+      setInnerIndex = _React$useState4[1];
 
   var _React$useReducer = React.useReducer(inputReducer, {
     left: null,
@@ -58,10 +63,10 @@ var SliderRatio = function SliderRatio(_ref) {
       rawInputValue = _React$useReducer2[0],
       dispatchRawInputValue = _React$useReducer2[1];
 
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      rawRangeValue = _React$useState4[0],
-      setRawRangeValue = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      rawRangeValue = _React$useState6[0],
+      setRawRangeValue = _React$useState6[1];
 
   var currentIndex = isControlled ? outerIndex : innerIndex;
   var rangeValue = rawRangeValue !== null && rawRangeValue !== void 0 ? rawRangeValue : getRangeStepValue(stepCount, currentIndex);
@@ -86,11 +91,18 @@ var SliderRatio = function SliderRatio(_ref) {
   };
 
   var handleRangeInputChange = function handleRangeInputChange(e) {
+    // Cross browser fix: Firefox calls onChange after calling onPointerUp, but Chrome doesn't
+    if (isPointerUpped) {
+      setIsPointerUpped(false);
+      return;
+    }
+
     setRawRangeValue(Number(e.target.value));
   };
 
   var handleRangeInputPointerUp = function handleRangeInputPointerUp() {
     var newIndex = getIndexByRangeValue(rangeValue, stepCount);
+    setIsPointerUpped(true);
     setRawRangeValue(null);
     !isControlled && setInnerIndex(newIndex);
     newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));

package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css

@@ -5,7 +5,6 @@
   max-width: 45%;
   color: var(--content);
   font-weight: 400;
-  background-color: var(--base);
 }
 .mfui-slider-display-value_interactive {
   -webkit-box-align: center;
@@ -16,6 +15,7 @@
   border: 1px solid var(--spbSky2);
   border-radius: 12px;
   overflow: hidden;
+  background-color: var(--base);
   cursor: text;
 }
 .mfui-slider-display-value_interactive.mfui-slider-display-value:hover,

package/dist/es/components/Snackbar/SnackbarTimer/SnackbarTimer.css

@@ -5,6 +5,9 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-snackbar-timer {
+  color: var(--base);
+}
 @-webkit-keyframes snackbar-progress-bar {
   0% {
     stroke-dashoffset: 100;

package/dist/es/components/Snackbar/SnackbarTimer/SnackbarTimer.js

@@ -56,7 +56,7 @@ var SnackbarTimer = function SnackbarTimer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, isTimerType && /*#__PURE__*/React.createElement(Caption, {
-    color: "white",
+    color: "inherit",
     variant: "medium",
     hasMargin: false,
     className: cn('timer')

package/dist/es/components/Tooltip/Tooltip.css

@@ -180,6 +180,9 @@
 .mfui-tooltip_small .mfui-tooltip__close-button {
   top: auto;
 }
+.mfui-tooltip_theme_white .mfui-tooltip__content {
+  border: 1px solid var(--stcWhite10);
+}
 .mfui-tooltip_theme_red .mfui-tooltip__content,
 .mfui-tooltip_theme_blue .mfui-tooltip__content,
 .mfui-tooltip_theme_red .mfui-tooltip__arrow:before,

package/dist/lib/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/lib/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/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -135,7 +135,9 @@ var PriceBadgeTheme = {
   RED: 'red',
   GREY: 'grey',
   GREEN: 'green',
-  ORANGE: 'orange'
+  ORANGE: 'orange',
+  LIGHT: 'light',
+  DARK: 'dark'
 };
 exports.PriceBadgeTheme = PriceBadgeTheme;
 var PriceBadgeIcon = {

package/dist/lib/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);
 }