@megafon/ui-core 6.2.1 → 7.0.0-beta.1

package/dist/es/components/Badges/{components/PromoBadge → PromoBadge}/PromoBadge.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './PromoBadge.less';
+import './PromoBadge.scss';
 export declare const PromoBadgeColors: {
     readonly '137C': "137c";
     readonly BRAND_PURPLE_20: "brand-purple-20";
@@ -9,12 +9,12 @@ export declare const PromoBadgeColors: {
     readonly WARM_RED: "warm-red";
     readonly GRADIENT_PURPLE: "gradient-purple";
 };
-declare type PromoBadgeColorsType = typeof PromoBadgeColors[keyof typeof PromoBadgeColors];
+type PromoBadgeColorsType = (typeof PromoBadgeColors)[keyof typeof PromoBadgeColors];
 export declare const PromoBadgeSize: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
 };
-declare type PromoBadgeSizeType = typeof PromoBadgeSize[keyof typeof PromoBadgeSize];
+type PromoBadgeSizeType = (typeof PromoBadgeSize)[keyof typeof PromoBadgeSize];
 export declare const PromoBadgeTypes: {
     readonly HIT: "hit";
     readonly NEW: "new";
@@ -23,7 +23,7 @@ export declare const PromoBadgeTypes: {
     readonly USER_CHOICE: "user-choice";
     readonly INTERESTS: "interests";
 };
-declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
+type PromoBadgeTypesType = (typeof PromoBadgeTypes)[keyof typeof PromoBadgeTypes];
 export interface IPromoBadgeProps {
     /** Цвет промо-бэйджа */
     color?: PromoBadgeColorsType;

package/dist/es/components/Badges/{components/PromoBadge → PromoBadge}/PromoBadge.js

@@ -1,8 +1,6 @@
 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 "./PromoBadge.css";
 export var PromoBadgeColors = {
   '137C': '137c',
@@ -16,8 +14,8 @@ export var PromoBadgeColors = {
 export var PromoBadgeSize = {
   SMALL: 'small',
   MEDIUM: 'medium'
-}; // DEPRECATED
-
+};
+// DEPRECATED
 export var PromoBadgeTypes = {
   HIT: 'hit',
   NEW: 'new',
@@ -27,16 +25,15 @@ export var PromoBadgeTypes = {
   INTERESTS: 'interests'
 };
 var cn = cnCreate('mfui-promo-badge');
-
 var PromoBadge = function PromoBadge(_ref) {
   var color = _ref.color,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
-      className = _ref.className,
-      children = _ref.children,
-      dataAttrs = _ref.dataAttrs;
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
+    className = _ref.className,
+    children = _ref.children,
+    dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
@@ -47,15 +44,4 @@ var PromoBadge = function PromoBadge(_ref) {
     className: cn('text')
   }, children));
 };
-
-PromoBadge.propTypes = {
-  color: PropTypes.oneOf(Object.values(PromoBadgeColors)),
-  // DEPRECATED
-  type: PropTypes.oneOf(Object.values(PromoBadgeTypes)),
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
-};
 export default PromoBadge;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-timer-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--base);border:1px solid var(--spbSky1);border-radius:12px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow:hidden;padding:1px 8px 1px 2px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-timer-badge_theme_grey .mfui-timer-badge__text{color:var(--spbSky3)}.mfui-timer-badge_theme_grey .mfui-timer-badge__icon{fill:var(--spbSky3)}.mfui-timer-badge_theme_red .mfui-timer-badge__text{color:var(--fury)}.mfui-timer-badge_theme_red .mfui-timer-badge__icon{fill:var(--fury)}.mfui-timer-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px;margin-left:2px}.mfui-timer-badge__icon{height:20px;width:20px}.mfui-timer-badge__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-timer-badge__icon-container_shadow:before{border-radius:50%;-webkit-box-shadow:0 0 6px var(--fury);box-shadow:0 0 6px var(--fury);content:"";height:16px;left:2px;position:absolute;top:2px;width:16px}

package/dist/{lib/components/Badges/components → es/components/Badges}/TimerBadge/TimerBadge.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import './TimerBadge.less';
+import * as React from 'react';
+import './TimerBadge.scss';
 export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */

package/dist/es/components/Badges/{components/TimerBadge → TimerBadge}/TimerBadge.js

@@ -1,14 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.date.now.js";
-import "core-js/modules/es.date.to-string.js";
 import "core-js/modules/web.timers.js";
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-import Timer from "./Timer/Timer";
+import Timer from "./components/Timer/Timer";
 import "./TimerBadge.css";
-
 var TimerIcon = function TimerIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -18,7 +15,6 @@ var TimerIcon = function TimerIcon(props) {
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
   }));
 };
-
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
 export var TIMEOUT = 1000;
@@ -27,43 +23,38 @@ var TimerBadgeTheme = {
   GREY: 'grey'
 };
 var cn = cnCreate('mfui-timer-badge');
-
 var TimerBadge = function TimerBadge(_ref) {
   var expirationDate = _ref.expirationDate,
-      _ref$countdownStart = _ref.countdownStart,
-      countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
-      _ref$hasPrefix = _ref.hasPrefix,
-      hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
-      _ref$countdownText = _ref.countdownText,
-      countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
-      _ref$expirationDateTe = _ref.expirationDateText,
-      expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
-      className = _ref.className,
-      dataAttrs = _ref.dataAttrs;
+    _ref$countdownStart = _ref.countdownStart,
+    countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
+    _ref$hasPrefix = _ref.hasPrefix,
+    hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
+    _ref$countdownText = _ref.countdownText,
+    countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
+    _ref$expirationDateTe = _ref.expirationDateText,
+    expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
   var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
-
-  var _useState = useState(remainingTime),
-      _useState2 = _slicedToArray(_useState, 2),
-      actualRemainingTime = _useState2[0],
-      setActualRemainingTime = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showCountdown = _useState4[0],
-      setShowCountdown = _useState4[1];
-
+  var _React$useState = React.useState(remainingTime),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actualRemainingTime = _React$useState2[0],
+    setActualRemainingTime = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showCountdown = _React$useState4[0],
+    setShowCountdown = _React$useState4[1];
   var isLastHour = actualRemainingTime < SECONDS_IN_HOUR;
   var isTimeExpired = actualRemainingTime < 1;
   var theme = showCountdown ? TimerBadgeTheme.RED : TimerBadgeTheme.GREY;
   var additionalText = showCountdown ? countdownText : expirationDateText;
-  useEffect(function () {
+  React.useEffect(function () {
     setShowCountdown(actualRemainingTime < countdownStart);
   }, [actualRemainingTime, countdownStart]);
-  useEffect(function () {
+  React.useEffect(function () {
     if (isTimeExpired) {
       return undefined;
     }
-
     var timeoutId = window.setTimeout(function () {
       return setActualRemainingTime(actualRemainingTime - 1);
     }, TIMEOUT);
@@ -93,19 +84,4 @@ var TimerBadge = function TimerBadge(_ref) {
     }
   })));
 };
-
-TimerBadge.propTypes = {
-  expirationDate: PropTypes.instanceOf(Date).isRequired,
-  countdownStart: PropTypes.number,
-  hasPrefix: PropTypes.bool,
-  countdownText: PropTypes.string,
-  expirationDateText: PropTypes.string,
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    text: PropTypes.objectOf(PropTypes.string.isRequired),
-    timer: PropTypes.objectOf(PropTypes.string.isRequired),
-    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
 export default TimerBadge;

package/dist/es/components/Badges/{components/TimerBadge → TimerBadge/components}/Timer/Timer.js

@@ -1,70 +1,54 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.math.trunc.js";
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.math.trunc.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import format from 'date-fns/format';
 import ruLocale from 'date-fns/locale/ru';
-import * as PropTypes from 'prop-types';
 var SECONDS_IN_DAY = 86400;
 var SECONDS_IN_HOUR = 3600;
 var SECONDS_IN_MINUTE = 60;
-
 var formatDate = function formatDate(date, pattern) {
   return format(date, pattern, {
     locale: ruLocale
   });
 };
-
 export var getCountdownText = function getCountdownText() {
   var remainingTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var isMoreHourAndLessDay = remainingTime >= SECONDS_IN_HOUR && remainingTime < SECONDS_IN_DAY;
-
   var truncTime = function truncTime() {
     var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     return Math.trunc(remainingTime / divider);
   };
-
   switch (true) {
     case remainingTime <= 0:
       {
         return '';
       }
-
     case remainingTime < SECONDS_IN_MINUTE:
       {
         var seconds = truncTime();
         return "".concat(seconds, " \u0441\u0435\u043A");
       }
-
     case remainingTime < SECONDS_IN_HOUR:
       {
         var minutes = truncTime(SECONDS_IN_MINUTE);
         return "".concat(minutes, " \u043C\u0438\u043D");
       }
-
     case isMoreHourAndLessDay:
       {
         var hours = truncTime(SECONDS_IN_HOUR);
         var secondsLeft = remainingTime - hours * SECONDS_IN_HOUR;
-
         var _minutes = Math.trunc(secondsLeft / SECONDS_IN_MINUTE);
-
         return _minutes ? "".concat(hours, " \u0447 ").concat(_minutes, " \u043C\u0438\u043D") : "".concat(hours, " \u0447");
       }
-
     case remainingTime >= SECONDS_IN_DAY:
       {
         var days = truncTime(SECONDS_IN_DAY);
-
         var _secondsLeft = remainingTime - days * SECONDS_IN_DAY;
-
         var _hours = Math.trunc(_secondsLeft / SECONDS_IN_HOUR);
-
         return _hours ? "".concat(days, " \u0434\u043D ").concat(_hours, " \u0447") : "".concat(days, " \u0434\u043D");
       }
-
     default:
       {
         return '';
@@ -72,25 +56,14 @@ export var getCountdownText = function getCountdownText() {
   }
 };
 var cn = cnCreate('mfui-timer');
-
 var Timer = function Timer(_ref) {
   var actualRemainingTime = _ref.actualRemainingTime,
-      expirationDate = _ref.expirationDate,
-      showCountdown = _ref.showCountdown,
-      additionalText = _ref.additionalText,
-      dataAttrs = _ref.dataAttrs;
+    expirationDate = _ref.expirationDate,
+    showCountdown = _ref.showCountdown,
+    additionalText = _ref.additionalText,
+    dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn()
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), additionalText && /*#__PURE__*/React.createElement("span", null, additionalText, " "), /*#__PURE__*/React.createElement("span", null, showCountdown ? getCountdownText(actualRemainingTime) : formatDate(expirationDate, 'dd MMMM yyyy')));
 };
-
-Timer.propTypes = {
-  expirationDate: PropTypes.instanceOf(Date).isRequired,
-  actualRemainingTime: PropTypes.number.isRequired,
-  showCountdown: PropTypes.bool.isRequired,
-  additionalText: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
 export default Timer;

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import SwiperCore from 'swiper';
 import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
-import './Banner.less';
+import './Banner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -10,17 +10,17 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+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 type RadiusType = (typeof Radius)[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -69,6 +69,7 @@ export interface IBannerProps {
     noIncreaseAutoplayDelay?: boolean;
     /** Показать часть следующего слайда */
     showNextSlide?: boolean;
+    children?: React.ReactNode;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */