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

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

@@ -2,26 +2,53 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-var _defaultSlidesSetting;
-
-import "core-js/modules/es.array.is-array.js";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.values.js";
-import React from 'react';
+import * as React from 'react';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
-import * as PropTypes from 'prop-types';
-import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
-import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
+import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import useGradient from "./useGradient";
 import "./Carousel.css";
-SwiperCore.use([Autoplay, Pagination, EffectFade]);
+var Autoplay = null;
+var Pagination = null;
+var EffectFade = null;
+var Swiper = null;
+var SwiperSlide = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  var SwiperAll = require('swiper/react');
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  var Modules = require('swiper/modules');
+  Swiper = SwiperAll.Swiper;
+  SwiperSlide = SwiperAll.SwiperSlide;
+  Autoplay = Modules.Autoplay;
+  Pagination = Modules.Pagination;
+  EffectFade = Modules.EffectFade;
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.       \n        For more information about server-side rendering\n        please check the Carousel component documentation at:\n        https://ui.megafon.ru/components/carousel\n    ");
+}
 export var NavTheme = {
   LIGHT: 'light',
   GREEN: 'green'
@@ -41,7 +68,6 @@ var GradientTheme = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2'
 };
-
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -50,87 +76,80 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
     stopOnLastSlide: true
   };
 };
-
-var defaultSlidesSettings = (_defaultSlidesSetting = {}, _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_SMALL_START, {
+var defaultSlidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_BIG_START, {
+}), breakpoints.MOBILE_BIG_START, {
   slidesPerView: 3,
   spaceBetween: 20
-}), _defineProperty(_defaultSlidesSetting, breakpoints.DESKTOP_MIDDLE_START, {
+}), breakpoints.DESKTOP_MIDDLE_START, {
   slidesPerView: 4,
   spaceBetween: 20
-}), _defaultSlidesSetting);
+});
 var cn = cnCreate('mfui-carousel');
-
 var Carousel = function Carousel(_ref) {
   var rootRef = _ref.rootRef,
-      className = _ref.className,
-      _ref$classes = _ref.classes;
-  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootClass = _ref$classes.root,
-      innerIndentsClass = _ref$classes.innerIndents,
-      prevClass = _ref$classes.prev,
-      nextClass = _ref$classes.next,
-      containerClass = _ref$classes.container,
-      containerModifier = _ref$classes.containerModifier,
-      slideClass = _ref$classes.slide,
-      dataAttrs = _ref.dataAttrs,
-      _ref$slidesSettings = _ref.slidesSettings,
-      slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
-      _ref$autoPlay = _ref.autoPlay,
-      autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-      _ref$autoPlayDelay = _ref.autoPlayDelay,
-      autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
-      _ref$loop = _ref.loop,
-      loop = _ref$loop === void 0 ? false : _ref$loop,
-      _ref$transitionSpeed = _ref.transitionSpeed,
-      transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
-      threshold = _ref.threshold,
-      _ref$initialSlide = _ref.initialSlide,
-      initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
-      _ref$disableTouchMove = _ref.disableTouchMove,
-      disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
-      _ref$centeredSlides = _ref.centeredSlides,
-      centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
-      _ref$navTheme = _ref.navTheme,
-      navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
-      _ref$effectTheme = _ref.effectTheme,
-      effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
-      noSwipingSelector = _ref.noSwipingSelector,
-      children = _ref.children,
-      pagination = _ref.pagination,
-      getSwiper = _ref.getSwiper,
-      onNextClick = _ref.onNextClick,
-      onPrevClick = _ref.onPrevClick,
-      onChange = _ref.onChange,
-      _ref$slideToClickedSl = _ref.slideToClickedSlide,
-      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
-      _ref$gradient = _ref.gradient,
-      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
-      _ref$gradientColor = _ref.gradientColor,
-      gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
-
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClass = _ref$classes2.root,
+    innerIndentsClass = _ref$classes2.innerIndents,
+    prevClass = _ref$classes2.prev,
+    nextClass = _ref$classes2.next,
+    containerClass = _ref$classes2.container,
+    containerModifier = _ref$classes2.containerModifier,
+    slideClass = _ref$classes2.slide,
+    dataAttrs = _ref.dataAttrs,
+    _ref$slidesSettings = _ref.slidesSettings,
+    slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    _ref$autoPlayDelay = _ref.autoPlayDelay,
+    autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop,
+    _ref$transitionSpeed = _ref.transitionSpeed,
+    transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
+    threshold = _ref.threshold,
+    _ref$initialSlide = _ref.initialSlide,
+    initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
+    _ref$disableTouchMove = _ref.disableTouchMove,
+    disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
+    _ref$centeredSlides = _ref.centeredSlides,
+    centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
+    _ref$navTheme = _ref.navTheme,
+    navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
+    _ref$effectTheme = _ref.effectTheme,
+    effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
+    noSwipingSelector = _ref.noSwipingSelector,
+    children = _ref.children,
+    pagination = _ref.pagination,
+    getSwiper = _ref.getSwiper,
+    onNextClick = _ref.onNextClick,
+    onPrevClick = _ref.onPrevClick,
+    onChange = _ref.onChange,
+    _ref$slideToClickedSl = _ref.slideToClickedSlide,
+    slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
+    _ref$gradient = _ref.gradient,
+    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+    _ref$gradientColor = _ref.gradientColor,
+    gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
   var _React$useState = React.useState(),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      swiperInstance = _React$useState2[0],
-      setSwiperInstance = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    swiperInstance = _React$useState2[0],
+    setSwiperInstance = _React$useState2[1];
   var _React$useState3 = React.useState(true),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isBeginning = _React$useState4[0],
-      setBeginning = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isBeginning = _React$useState4[0],
+    setBeginning = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isEnd = _React$useState6[0],
-      setEnd = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isEnd = _React$useState6[0],
+    setEnd = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isLocked = _React$useState8[0],
-      setLocked = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isLocked = _React$useState8[0],
+    setLocked = _React$useState8[1];
   var childrenLen = Array.isArray(children) ? children.length : 0;
   var prevChildrenLen = usePrevious(childrenLen) || 0;
   var isChildrenLenDiff = childrenLen !== prevChildrenLen;
@@ -141,14 +160,12 @@ var Carousel = function Carousel(_ref) {
   });
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
-        autoplay = _ref2.autoplay;
-
+      autoplay = _ref2.autoplay;
     if (_typeof(params.autoplay) !== 'object' || !autoplay.running) {
       return;
     }
-
-    autoplay.stop(); // eslint-disable-next-line no-param-reassign
-
+    autoplay.stop();
+    // eslint-disable-next-line no-param-reassign
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -156,7 +173,6 @@ var Carousel = function Carousel(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
@@ -165,7 +181,6 @@ var Carousel = function Carousel(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
@@ -180,9 +195,8 @@ var Carousel = function Carousel(_ref) {
   }, []);
   var handleReachEnd = React.useCallback(function (_ref3) {
     var params = _ref3.params,
-        autoplay = _ref3.autoplay;
+      autoplay = _ref3.autoplay;
     setEnd(true);
-
     if (!params.loop && autoplay.running) {
       autoplay.stop();
     }
@@ -193,41 +207,45 @@ var Carousel = function Carousel(_ref) {
   }, []);
   var handleSlideChange = React.useCallback(function (_ref4) {
     var realIndex = _ref4.realIndex,
-        previousIndex = _ref4.previousIndex,
-        params = _ref4.params;
+      previousIndex = _ref4.previousIndex,
+      params = _ref4.params;
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
   }, [onChange]);
-
   var handleRootClick = function handleRootClick(e) {
     var elem = e.target;
     var isBullet = elem.classList.contains('swiper-pagination-bullet');
-
     if (isBullet && swiperInstance) {
       increaseAutoplayDelay(swiperInstance);
     }
   };
-
   var handleNavDisplay = function handleNavDisplay(swiper) {
     setBeginning(swiper.isBeginning);
     setEnd(swiper.isEnd);
     setLocked(swiper.isBeginning && swiper.isEnd);
-  }; // https://github.com/nolimits4web/Swiper/issues/2346
-
-
+  };
+  // https://github.com/nolimits4web/Swiper/issues/2346
   var handleSwiperResize = React.useCallback(function () {
     throttle(function (swiper) {
       handleNavDisplay(swiper);
-
       if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
-        swiper.slides.css('width', '');
+        var _iterator = _createForOfIteratorHelper(swiper.slides),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var slide = _step.value;
+            slide.style.width = '';
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
       }
     }, throttleTime.resize);
   }, []);
-
   var handleSlideFocus = function handleSlideFocus(index) {
     return function (e) {
       var _a;
-
       if (loop) {
         // for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
         // because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
@@ -238,26 +256,21 @@ var Carousel = function Carousel(_ref) {
         swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(realIndex);
         return;
       }
-
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
     };
   };
-
   var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
     if (e.nativeEvent.target.closest(".".concat(cn()))) {
       e.nativeEvent.preventDefault();
     }
   };
-
   React.useEffect(function () {
     if (!swiperInstance) {
       return undefined;
     }
-
     var windowResizeHandler = function windowResizeHandler() {
       return handleNavDisplay(swiperInstance);
     };
-
     var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
     window.addEventListener('resize', windowResizeHandlerThrottled);
     return function () {
@@ -270,6 +283,19 @@ var Carousel = function Carousel(_ref) {
       handleNavDisplay(swiperInstance);
     }
   }, [isChildrenLenDiff, swiperInstance]);
+  if (!Swiper || !Autoplay || !SwiperSlide) {
+    return null;
+  }
+  var swiperModules = [];
+  if (Autoplay) {
+    swiperModules.push(Autoplay);
+  }
+  if (Pagination) {
+    swiperModules.push(Pagination);
+  }
+  if (EffectFade) {
+    swiperModules.push(EffectFade);
+  }
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
@@ -286,8 +312,9 @@ var Carousel = function Carousel(_ref) {
       'gradient-color': gradient && gradientColor
     }, [innerIndentsClass, containerClass]),
     breakpoints: slidesSettings,
-    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
     watchOverflow: true,
+    modules: swiperModules,
     loop: loop,
     pagination: _extends({
       clickable: true
@@ -344,58 +371,4 @@ var Carousel = function Carousel(_ref) {
     theme: ArrowTheme.PURPLE
   }));
 };
-
-Carousel.propTypes = {
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    innerIndents: PropTypes.string,
-    container: PropTypes.string,
-    containerModifier: PropTypes.string,
-    prev: PropTypes.string,
-    next: PropTypes.string,
-    slide: PropTypes.string
-  }),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    slider: PropTypes.objectOf(PropTypes.string.isRequired),
-    prev: PropTypes.objectOf(PropTypes.string.isRequired),
-    next: PropTypes.objectOf(PropTypes.string.isRequired),
-    slide: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  slidesSettings: PropTypes.objectOf(checkBreakpointsPropTypes({
-    slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
-    spaceBetween: PropTypes.number.isRequired,
-    slidesPerGroup: PropTypes.number
-  })),
-  pagination: PropTypes.shape({
-    el: PropTypes.string,
-    bulletElement: PropTypes.string,
-    dynamicBullets: PropTypes.string,
-    clickable: PropTypes.bool,
-    renderBullet: PropTypes.func,
-    bulletClass: PropTypes.string,
-    bulletActiveClass: PropTypes.string,
-    modifierClass: PropTypes.string
-  }),
-  loop: PropTypes.bool,
-  threshold: PropTypes.number,
-  autoPlay: PropTypes.bool,
-  autoPlayDelay: PropTypes.number,
-  disableTouchMove: PropTypes.bool,
-  centeredSlides: PropTypes.bool,
-  transitionSpeed: PropTypes.number,
-  navTheme: PropTypes.oneOf(Object.values(NavTheme)),
-  effectTheme: PropTypes.oneOf(Object.values(EffectTheme)),
-  noSwipingSelector: PropTypes.string,
-  getSwiper: PropTypes.func,
-  onNextClick: PropTypes.func,
-  onPrevClick: PropTypes.func,
-  onChange: PropTypes.func,
-  gradient: PropTypes.oneOfType([PropTypes.bool]),
-  gradientColor: PropTypes.oneOf(Object.values(GradientTheme))
-};
 export default Carousel;

package/dist/es/components/Carousel/checkBreakpointsPropTypes.d.ts

@@ -1,4 +1,4 @@
-declare type ObjectType = {
+type ObjectType = {
     [key: string]: unknown;
 };
 declare const checkBreakpointsPropTypes: (settingsPropTypes: ObjectType) => (object: ObjectType, key: string, componentName: string) => Error | null;

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

@@ -1,17 +1,14 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import "core-js/modules/es.number.constructor.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.number.constructor.js";
 import * as PropTypes from 'prop-types';
-
 var checkBreakpointsPropTypes = function checkBreakpointsPropTypes(settingsPropTypes) {
   return function (object, key, componentName) {
     if (!object[Number(key)]) {
       return new Error("Invalid key name 'breakpoints.".concat(key, "' of type ").concat(_typeof(key), " supplied to ").concat(componentName, ", expected number"));
     }
-
     PropTypes.checkPropTypes(settingsPropTypes, object[key], 'prop', componentName);
     return null;
   };
 };
-
 export default checkBreakpointsPropTypes;

package/dist/es/components/Carousel/useGradient.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import SwiperCore from 'swiper';
 import { SlidesSettingsType } from './Carousel';
-declare type SwiperConfig = {
+type SwiperConfig = {
     instance: SwiperCore | undefined;
     slidesSettings: SlidesSettingsType;
     isLocked: boolean;

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

@@ -5,30 +5,26 @@ import throttle from 'lodash.throttle';
 import throttleTime from "../../constants/throttleTime";
 export default (function (gradient, swiper) {
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      slidesGap = _useState2[0],
-      setSlidesGap = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    slidesGap = _useState2[0],
+    setSlidesGap = _useState2[1];
   var swiperInstance = swiper.instance,
-      slidesSettings = swiper.slidesSettings,
-      isLocked = swiper.isLocked;
+    slidesSettings = swiper.slidesSettings,
+    isLocked = swiper.isLocked;
   var isGradientEnable = gradient && !isLocked;
   useEffect(function () {
     var isTouch = window.innerWidth < breakpoints.DESKTOP_SMALL_START;
     var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
-
     if (!isPossibleToSetGap) {
       return undefined;
     }
-
-    var setCurrenSlidesGap = function setCurrenSlidesGap() {
-      var currentBreakpoint = swiperInstance.getBreakpoint(slidesSettings);
+    var setCurrentSlidesGap = function setCurrentSlidesGap() {
+      var currentBreakpoint = swiperInstance.currentBreakpoint;
       var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
       setSlidesGap(currentSpaceBetweenValue);
     };
-
-    setCurrenSlidesGap();
-    var throttledHandler = throttle(setCurrenSlidesGap, throttleTime.resize);
+    setCurrentSlidesGap();
+    var throttledHandler = throttle(setCurrentSlidesGap, throttleTime.resize);
     window.addEventListener('resize', throttledHandler);
     return function () {
       window.removeEventListener('resize', throttledHandler);

package/dist/es/components/Checkbox/Checkbox.css

@@ -1,150 +1 @@
-.mfui-checkbox {
-  margin: 0 5px 12px 5px;
-}
-.mfui-checkbox__inner {
-  position: relative;
-  display: inline-block;
-}
-.mfui-checkbox__label {
-  display: inline;
-  cursor: pointer;
-}
-.mfui-checkbox__input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-.mfui-checkbox__custom-input {
-  position: absolute;
-  left: 0;
-  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;
-  width: 20px;
-  height: 20px;
-  border: 2px solid;
-  border-radius: 4px;
-  -webkit-transition: border-color, background-color;
-  transition: border-color, background-color;
-  -webkit-transition-duration: 0.3s;
-          transition-duration: 0.3s;
-}
-.mfui-checkbox__custom-input:focus {
-  outline: none;
-}
-.mfui-checkbox__icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  opacity: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.mfui-checkbox__extra-content {
-  position: relative;
-  left: 8px;
-  display: inline-block;
-  margin-top: -2px;
-  margin-right: -20px;
-  vertical-align: middle;
-}
-.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border: none;
-}
-.mfui-checkbox_checked .mfui-checkbox__icon {
-  opacity: 1;
-}
-.mfui-checkbox_font-size_regular {
-  font-size: 15px;
-  line-height: 24px;
-}
-.mfui-checkbox_font-size_regular .mfui-checkbox__inner {
-  padding: 4px 15px 4px 33px;
-}
-.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
-  top: 6px;
-}
-.mfui-checkbox_font-size_small {
-  font-size: 12px;
-  line-height: 16px;
-}
-.mfui-checkbox_font-size_small .mfui-checkbox__inner {
-  padding: 1px 15px 4px 33px;
-}
-.mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
-  top: 0;
-}
-.mfui-checkbox_color_dark .mfui-checkbox__custom-input {
-  border-color: var(--spbSky2);
-}
-.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  border-color: var(--buttonHoverGreen);
-}
-.mfui-checkbox_color_dark .mfui-checkbox__icon {
-  fill: var(--stcWhite);
-}
-.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border-color: var(--brandGreen);
-  background-color: var(--brandGreen);
-}
-.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  background-color: var(--buttonHoverGreen);
-}
-.mfui-checkbox_color_light {
-  color: var(--stcWhite);
-}
-.mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: var(--stcWhite);
-  background-color: var(--stcWhite);
-}
-.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  border-color: var(--buttonHoverGrey);
-  background-color: var(--buttonHoverGrey);
-}
-.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border-color: var(--brandGreen);
-  color: var(--stcWhite);
-  background-color: var(--stcWhite);
-}
-.mfui-checkbox_disabled .mfui-checkbox__label {
-  color: var(--spbSky3);
-  cursor: default;
-  pointer-events: none;
-}
-.mfui-checkbox_disabled .mfui-checkbox__custom-input {
-  border-color: var(--spbSky2);
-  background-color: var(--spbSky1);
-}
-.mfui-checkbox_disabled .mfui-checkbox__icon {
-  fill: var(--stcWhite);
-}
-.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
-  color: var(--stcWhite50);
-}
-.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
-  background-color: var(--spbSky2);
-}
-.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: var(--fury);
-}
-.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
-.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
-.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--buttonDown);
-  background-color: var(--buttonDown);
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-checkbox{margin:0 5px 12px}.mfui-checkbox__inner{display:inline-block;position:relative}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:32px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding:4px 15px 4px 33px}.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input{top:6px}.mfui-checkbox_font-size_small{font-size:12px;line-height:16px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding:1px 15px 4px 33px}.mfui-checkbox_font-size_small .mfui-checkbox__custom-input{top:0}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}