@megafon/ui-core 2.0.0-beta.99 → 2.1.2

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import "./PaginationButton.css";
+var cn = cnCreate('mfui-pagination-button');
+
+var PaginationButton = function PaginationButton(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+      className = _ref.className,
+      children = _ref.children,
+      onClick = _ref.onClick,
+      value = _ref.value;
+
+  var handleClick = function handleClick() {
+    onClick && onClick(value);
+  };
+
+  return /*#__PURE__*/React.createElement("button", {
+    className: cn({
+      active: isActive,
+      theme: theme
+    }, className),
+    disabled: disabled,
+    onClick: handleClick,
+    type: "button"
+  }, children);
+};
+
+PaginationButton.propTypes = {
+  disabled: PropTypes.bool,
+  isActive: PropTypes.bool,
+  theme: PropTypes.oneOf(['default', 'light']),
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+export default PaginationButton;

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.css

@@ -0,0 +1,10 @@
+.mfui-pagination-buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-pagination-buttons__button {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  margin: 0 4px;
+}

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './PaginationButtons.less';
+interface IPaginationButtons {
+    items: Array<string | number>;
+    theme?: 'default' | 'light';
+    activeButton: number;
+    hiddenButton: string;
+    onClick: (value?: number | string) => void;
+}
+declare const PaginationButtons: React.FC<IPaginationButtons>;
+export default PaginationButtons;

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.js

@@ -0,0 +1,58 @@
+import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import PaginationButton from "../PaginationButton/PaginationButton";
+import "./PaginationButtons.css";
+
+var NothingIcon = function NothingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M7 9a1 1 0 11-1 1 1 1 0 011-1zm2 1a1 1 0 101-1 1 1 0 00-1 1zm3 0a1 1 0 101-1 1 1 0 00-1 1z"
+  }));
+};
+
+var cn = cnCreate('mfui-pagination-buttons');
+
+var PaginationButtons = function PaginationButtons(_ref) {
+  var items = _ref.items,
+      theme = _ref.theme,
+      onClick = _ref.onClick,
+      activeButton = _ref.activeButton,
+      hiddenButton = _ref.hiddenButton;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, items.map(function (pageNumber, index) {
+    var isHiddenButton = hiddenButton === pageNumber;
+
+    if (isHiddenButton) {
+      return /*#__PURE__*/React.createElement(PaginationButton, {
+        className: cn('button'),
+        disabled: true,
+        key: index,
+        theme: theme
+      }, /*#__PURE__*/React.createElement(NothingIcon, null));
+    }
+
+    var isActive = pageNumber === activeButton;
+    return /*#__PURE__*/React.createElement(PaginationButton, {
+      isActive: isActive,
+      key: index,
+      className: cn('button'),
+      onClick: onClick,
+      value: pageNumber,
+      theme: theme
+    }, pageNumber);
+  }));
+};
+
+PaginationButtons.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired).isRequired,
+  theme: PropTypes.oneOf(['default', 'light']),
+  activeButton: PropTypes.number.isRequired,
+  hiddenButton: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+export default PaginationButtons;

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.css

@@ -0,0 +1,17 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-pagination-navigation_direction_left .mfui-pagination-navigation__icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.mfui-pagination-navigation svg {
+  width: 100%;
+}
+.mfui-pagination-navigation:disabled svg {
+  opacity: 0.25;
+}

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './PaginationNavigation.less';
+interface IPaginationNavigation {
+    direction?: 'left' | 'right';
+    theme?: 'default' | 'light';
+    disabled?: boolean;
+    isActive?: boolean;
+    className?: string;
+    onClick?: (value?: number | string) => void;
+}
+declare const PaginationNavigation: React.FC<IPaginationNavigation>;
+export default PaginationNavigation;

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import PaginationButton from "../PaginationButton/PaginationButton";
+import "./PaginationNavigation.css";
+
+var ArrowRightIcon = function ArrowRightIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+  }));
+};
+
+var cn = cnCreate('mfui-pagination-navigation');
+
+var PaginationNavigation = function PaginationNavigation(_ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'right' : _ref$direction,
+      theme = _ref.theme,
+      disabled = _ref.disabled,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(PaginationButton, {
+    className: cn({
+      direction: direction
+    }, className),
+    disabled: disabled,
+    isActive: isActive,
+    theme: theme,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(ArrowRightIcon, {
+    className: cn('icon')
+  }));
+};
+
+PaginationNavigation.propTypes = {
+  direction: PropTypes.oneOf(['left', 'right']),
+  theme: PropTypes.oneOf(['default', 'light']),
+  disabled: PropTypes.bool,
+  isActive: PropTypes.bool,
+  className: PropTypes.string,
+  onClick: PropTypes.func
+};
+export default PaginationNavigation;

package/dist/es/components/Pagination/helpers.d.ts

@@ -0,0 +1,2 @@
+declare const getRange: (from: any, to: any, step?: number) => number[];
+export default getRange;

package/dist/es/components/Pagination/helpers.js

@@ -0,0 +1,14 @@
+var getRange = function getRange(from, to) {
+  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var i = from;
+  var range = [];
+
+  while (i <= to) {
+    range.push(i);
+    i += step;
+  }
+
+  return range;
+};
+
+export default getRange;

package/dist/es/components/Pagination/usePagination.d.ts

@@ -0,0 +1,7 @@
+export declare const Button: {
+    HIDDEN: string;
+    FIRST: number;
+};
+export declare const MOBILE_RESOLUTION = 360;
+declare const usePagination: (totalPages: number, activePage: number) => (string | number)[];
+export default usePagination;

package/dist/es/components/Pagination/usePagination.js

@@ -0,0 +1,87 @@
+import "core-js/modules/es.array.concat";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+import getRange from "./helpers";
+export var Button = {
+  HIDDEN: 'HIDDEN',
+  FIRST: 1
+};
+var NeighbourCount = {
+  MOBILE: 0,
+  MAIN: 1
+};
+var BUTTON_RATIO = 5;
+export var MOBILE_RESOLUTION = 360;
+
+var getItems = function getItems(_ref) {
+  var totalPages = _ref.totalPages,
+      activePage = _ref.activePage,
+      maxButtonsCount = _ref.maxButtonsCount,
+      neighbourCount = _ref.neighbourCount;
+  var isMoreThenMaxBtnsCount = totalPages > maxButtonsCount;
+  var lastPage = totalPages;
+
+  if (!isMoreThenMaxBtnsCount) {
+    return getRange(Button.FIRST, lastPage);
+  }
+
+  var hasLeftHiddenBtns = activePage > Math.ceil(maxButtonsCount / 2);
+  var hasRightHiddenBtns = lastPage > activePage + neighbourCount + 2;
+
+  switch (true) {
+    case !hasLeftHiddenBtns && hasRightHiddenBtns:
+      {
+        var range = getRange(Button.FIRST, maxButtonsCount - 2);
+        return [].concat(_toConsumableArray(range), [Button.HIDDEN, lastPage]);
+      }
+
+    case hasLeftHiddenBtns && !hasRightHiddenBtns:
+      {
+        var _range = getRange(totalPages - (2 + 2 * neighbourCount), totalPages);
+
+        return [Button.FIRST, Button.HIDDEN].concat(_toConsumableArray(_range));
+      }
+
+    default:
+      {
+        var _range2 = getRange(activePage - neighbourCount, activePage + neighbourCount);
+
+        return [Button.FIRST, Button.HIDDEN].concat(_toConsumableArray(_range2), [Button.HIDDEN, lastPage]);
+      }
+  }
+};
+
+var usePagination = function usePagination(totalPages, activePage) {
+  var _React$useState = React.useState(NeighbourCount.MAIN),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      neighbourCount = _React$useState2[0],
+      setNeighbourCount = _React$useState2[1];
+
+  var maxButtonsCount = 2 * neighbourCount + BUTTON_RATIO;
+  var paginationItems = getItems({
+    totalPages: totalPages,
+    activePage: activePage,
+    maxButtonsCount: maxButtonsCount,
+    neighbourCount: neighbourCount
+  });
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      var isMobile = window.innerWidth <= MOBILE_RESOLUTION;
+      var value = isMobile ? NeighbourCount.MOBILE : NeighbourCount.MAIN;
+      setNeighbourCount(value);
+    };
+
+    handleResize();
+    var handleResizeThrottled = throttle(handleResize, throttleTime.resize);
+    window.addEventListener('resize', handleResizeThrottled);
+    return function () {
+      window.removeEventListener('resize', handleResizeThrottled);
+    };
+  }, []);
+  return paginationItems;
+};
+
+export default usePagination;

package/dist/es/components/Paragraph/Paragraph.css

@@ -5,54 +5,57 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-paragraph {
+.mfui-paragraph {
   font-family: inherit;
   margin: 0;
+  font-weight: 400;
 }
-.mfui-beta-paragraph_align_left {
+.mfui-paragraph_align_left {
   text-align: left;
 }
-.mfui-beta-paragraph_align_center {
+.mfui-paragraph_align_center {
   text-align: center;
 }
-.mfui-beta-paragraph_align_right {
+.mfui-paragraph_align_right {
   text-align: right;
 }
-.mfui-beta-paragraph_size_regular {
+.mfui-paragraph_size_regular {
   font-size: 15px;
   line-height: 24px;
 }
-.mfui-beta-paragraph_size_small {
+.mfui-paragraph_size_small {
   font-size: 12px;
   line-height: 16px;
 }
-.mfui-beta-paragraph_has-margin {
+.mfui-paragraph_has-margin {
   margin: 0 0 16px;
 }
-.mfui-beta-paragraph_color_green {
+.mfui-paragraph_color_green {
   color: #00B956;
 }
-.mfui-beta-paragraph_color_purple {
+.mfui-paragraph_color_purple {
   color: #731982;
 }
-.mfui-beta-paragraph_color_clearWhite {
+.mfui-paragraph_color_base,
+.mfui-paragraph_color_clearWhite {
   color: #FFFFFF;
 }
-.mfui-beta-paragraph_color_spbSky0 {
+.mfui-paragraph_color_spbSky0 {
   color: #F6F6F6;
 }
-.mfui-beta-paragraph_color_spbSky1 {
+.mfui-paragraph_color_spbSky1 {
   color: #EDEDED;
 }
-.mfui-beta-paragraph_color_spbSky2 {
+.mfui-paragraph_color_spbSky2 {
   color: #D8D8D8;
 }
-.mfui-beta-paragraph_color_freshAsphalt {
+.mfui-paragraph_color_content,
+.mfui-paragraph_color_freshAsphalt {
   color: #333333;
 }
-.mfui-beta-paragraph_color_fullBlack {
+.mfui-paragraph_color_fullBlack {
   color: #000000;
 }
-.mfui-beta-paragraph_color_inherit {
+.mfui-paragraph_color_inherit {
   color: inherit;
 }

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

@@ -1,5 +1,21 @@
 import * as React from 'react';
 import './Paragraph.less';
+declare const COLORS: {
+    GREEN: string;
+    PURPLE: string;
+    BASE: string;
+    SPB_SKY_0: string;
+    SPB_SKY_1: string;
+    SPB_SKY_2: string;
+    CONTENT: string;
+    FULL_BLACK: string;
+    INHERIT: string;
+    /** @deprecated */
+    CLEAR_WHITE: string;
+    /** @deprecated */
+    FRESH_ASPHALT: string;
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
     /** Выравнивание по горизонтали */
     align?: 'left' | 'center' | 'right';
@@ -8,7 +24,7 @@ export interface IParagraphProps {
     /** Вертикальный отступ (включен по умолчанию) */
     hasMargin?: boolean;
     /** Цвет текста */
-    color?: 'green' | 'purple' | 'clearWhite' | 'spbSky0' | 'spbSky1' | 'spbSky2' | 'freshAsphalt' | 'fullBlack' | 'inherit';
+    color?: ColorType;
     /** Дополнительный класс корневого элемента */
     className?: string;
 }

package/dist/es/components/Paragraph/Paragraph.js

@@ -1,8 +1,29 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.array.includes";
+import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.includes";
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Paragraph.css";
-import cnCreate from "../../utils/cnCreate";
-var cn = cnCreate('mfui-beta-paragraph');
+var COLORS = {
+  GREEN: 'green',
+  PURPLE: 'purple',
+  BASE: 'base',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2',
+  CONTENT: 'content',
+  FULL_BLACK: 'fullBlack',
+  INHERIT: 'inherit',
+
+  /** @deprecated */
+  CLEAR_WHITE: 'clearWhite',
+
+  /** @deprecated */
+  FRESH_ASPHALT: 'freshAsphalt'
+};
+var cn = cnCreate('mfui-paragraph');
 
 var Paragraph = function Paragraph(_ref) {
   var _ref$size = _ref.size,
@@ -28,6 +49,24 @@ Paragraph.propTypes = {
   align: PropTypes.oneOf(['left', 'center', 'right']),
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
-  color: PropTypes.oneOf(['green', 'purple', 'clearWhite', 'spbSky0', 'spbSky1', 'spbSky2', 'freshAsphalt', 'fullBlack', 'inherit'])
+  color: function color(props, propName, componentName) {
+    var deprecatedBlackValue = COLORS.FRESH_ASPHALT;
+    var deprecatedWhiteValue = COLORS.CLEAR_WHITE;
+    var propValue = props[propName];
+
+    if (propValue && !Object.values(COLORS).includes(propValue)) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n            expected one of [").concat(Object.values(COLORS), "]"));
+    }
+
+    if (propValue && props[propName] === deprecatedBlackValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
+    }
+
+    if (propValue && props[propName] === deprecatedWhiteValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(COLORS.BASE, "'"));
+    }
+
+    return null;
+  }
 };
 export default Paragraph;

package/dist/es/components/Preloader/Preloader.css

@@ -5,143 +5,143 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-preloader {
+.mfui-preloader {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-preloader__item {
-  position: relative;
-}
-.mfui-beta-preloader__item:before {
-  content: '';
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  border-radius: 50px;
-  will-change: transform;
-}
-.mfui-beta-preloader_size-all_small .mfui-beta-preloader__item {
+.mfui-preloader_size-all_small .mfui-preloader__item {
   width: 6px;
   height: 6px;
 }
-.mfui-beta-preloader_size-all_small .mfui-beta-preloader__item:not(:last-child) {
+.mfui-preloader_size-all_small .mfui-preloader__item:not(:last-child) {
   margin-right: 3px;
 }
-.mfui-beta-preloader_size-all_medium .mfui-beta-preloader__item {
+.mfui-preloader_size-all_medium .mfui-preloader__item {
   width: 12px;
   height: 12px;
 }
-.mfui-beta-preloader_size-all_medium .mfui-beta-preloader__item:not(:last-child) {
+.mfui-preloader_size-all_medium .mfui-preloader__item:not(:last-child) {
   margin-right: 6px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-preloader_size-wide_small .mfui-beta-preloader__item {
+  .mfui-preloader_size-wide_small .mfui-preloader__item {
     width: 6px;
     height: 6px;
   }
-  .mfui-beta-preloader_size-wide_small .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-wide_small .mfui-preloader__item:not(:last-child) {
     margin-right: 3px;
   }
-  .mfui-beta-preloader_size-wide_medium .mfui-beta-preloader__item {
+  .mfui-preloader_size-wide_medium .mfui-preloader__item {
     width: 12px;
     height: 12px;
   }
-  .mfui-beta-preloader_size-wide_medium .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-wide_medium .mfui-preloader__item:not(:last-child) {
     margin-right: 6px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-preloader_size-desktop_small .mfui-beta-preloader__item {
+  .mfui-preloader_size-desktop_small .mfui-preloader__item {
     width: 6px;
     height: 6px;
   }
-  .mfui-beta-preloader_size-desktop_small .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-desktop_small .mfui-preloader__item:not(:last-child) {
     margin-right: 3px;
   }
-  .mfui-beta-preloader_size-desktop_medium .mfui-beta-preloader__item {
+  .mfui-preloader_size-desktop_medium .mfui-preloader__item {
     width: 12px;
     height: 12px;
   }
-  .mfui-beta-preloader_size-desktop_medium .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-desktop_medium .mfui-preloader__item:not(:last-child) {
     margin-right: 6px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-preloader_size-tablet_small .mfui-beta-preloader__item {
+  .mfui-preloader_size-tablet_small .mfui-preloader__item {
     width: 6px;
     height: 6px;
   }
-  .mfui-beta-preloader_size-tablet_small .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-tablet_small .mfui-preloader__item:not(:last-child) {
     margin-right: 3px;
   }
-  .mfui-beta-preloader_size-tablet_medium .mfui-beta-preloader__item {
+  .mfui-preloader_size-tablet_medium .mfui-preloader__item {
     width: 12px;
     height: 12px;
   }
-  .mfui-beta-preloader_size-tablet_medium .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-tablet_medium .mfui-preloader__item:not(:last-child) {
     margin-right: 6px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-preloader_size-mobile_small .mfui-beta-preloader__item {
+  .mfui-preloader_size-mobile_small .mfui-preloader__item {
     width: 6px;
     height: 6px;
   }
-  .mfui-beta-preloader_size-mobile_small .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-mobile_small .mfui-preloader__item:not(:last-child) {
     margin-right: 3px;
   }
-  .mfui-beta-preloader_size-mobile_medium .mfui-beta-preloader__item {
+  .mfui-preloader_size-mobile_medium .mfui-preloader__item {
     width: 12px;
     height: 12px;
   }
-  .mfui-beta-preloader_size-mobile_medium .mfui-beta-preloader__item:not(:last-child) {
+  .mfui-preloader_size-mobile_medium .mfui-preloader__item:not(:last-child) {
     margin-right: 6px;
   }
 }
-.mfui-beta-preloader_color_default .mfui-beta-preloader__item:before {
+.mfui-preloader__item {
+  position: relative;
+}
+.mfui-preloader__item:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50px;
+  will-change: transform;
+}
+.mfui-preloader_color_default .mfui-preloader__item:before {
   -webkit-animation: scaling 1s linear infinite;
           animation: scaling 1s linear infinite;
 }
-.mfui-beta-preloader_color_default .mfui-beta-preloader__item_first:before {
+.mfui-preloader_color_default .mfui-preloader__item_first:before {
   background-color: #00B956;
 }
-.mfui-beta-preloader_color_default .mfui-beta-preloader__item_second:before {
+.mfui-preloader_color_default .mfui-preloader__item_second:before {
+  background-color: #00B956;
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
-  background-color: #00B956;
 }
-.mfui-beta-preloader_color_default .mfui-beta-preloader__item_third:before {
+.mfui-preloader_color_default .mfui-preloader__item_third:before {
+  background-color: #731982;
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
-  background-color: #731982;
 }
-.mfui-beta-preloader_color_black .mfui-beta-preloader__item:before {
-  -webkit-animation: opacityScaling 1s linear infinite;
-          animation: opacityScaling 1s linear infinite;
+.mfui-preloader_color_black .mfui-preloader__item:before {
   background-color: #000000;
   opacity: 0.35;
+  -webkit-animation: opacityScaling 1s linear infinite;
+          animation: opacityScaling 1s linear infinite;
 }
-.mfui-beta-preloader_color_black .mfui-beta-preloader__item_second:before {
+.mfui-preloader_color_black .mfui-preloader__item_second:before {
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
 }
-.mfui-beta-preloader_color_black .mfui-beta-preloader__item_third:before {
+.mfui-preloader_color_black .mfui-preloader__item_third:before {
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }
-.mfui-beta-preloader_color_white .mfui-beta-preloader__item:before {
+.mfui-preloader_color_white .mfui-preloader__item:before {
+  background-color: #FFFFFF;
   -webkit-animation: scaling 1s linear infinite;
           animation: scaling 1s linear infinite;
-  background-color: #FFFFFF;
 }
-.mfui-beta-preloader_color_white .mfui-beta-preloader__item_second:before {
+.mfui-preloader_color_white .mfui-preloader__item_second:before {
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
 }
-.mfui-beta-preloader_color_white .mfui-beta-preloader__item_third:before {
+.mfui-preloader_color_white .mfui-preloader__item_third:before {
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }