@megafon/ui-core 2.0.0-beta.96 → 2.0.0

package/dist/es/index.js

@@ -1,24 +1,19 @@
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as Banner } from "./components/Banner/Banner";
 export { default as BannerDot } from "./components/Banner/BannerDot";
-export { default as breakpoints } from "./constants/breakpoints";
 export { default as Button } from "./components/Button/Button";
 export { default as Calendar } from "./components/Calendar/Calendar";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as checkBreakpointsPropTypes } from "./components/Carousel/checkBreakpointsPropTypes";
-export { default as cnCreate } from "./utils/cnCreate";
 export { default as Collapse } from "./components/Collapse/Collapse";
 export { default as ContentArea } from "./components/ContentArea/ContentArea";
-export { default as convert } from "./utils/convert";
 export { default as Counter } from "./components/Counter/Counter";
-export { default as dataAttrs } from "./utils/dataAttrs";
 export { default as Day } from "./components/Calendar/components/Day/Day";
-export { default as detectTouch } from "./utils/detectTouch";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as GridColumn } from "./components/Grid/GridColumn";
 export { default as Header } from "./components/Header/Header";
-export { default as IconButton } from "./components/IconButton/IconButton";
+export { default as helpers } from "./components/Pagination/helpers";
 export { default as InputLabel } from "./components/InputLabel/InputLabel";
 export { default as Link } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
@@ -27,6 +22,10 @@ export { default as Logo } from "./components/Logo/Logo";
 export { default as Month } from "./components/Calendar/components/Month/Month";
 export { default as NavArrow } from "./components/NavArrow/NavArrow";
 export { default as Notification } from "./components/Notification/Notification";
+export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as PaginationButton } from "./components/Pagination/components/PaginationButton/PaginationButton";
+export { default as PaginationButtons } from "./components/Pagination/components/PaginationButtons/PaginationButtons";
+export { default as PaginationNavigation } from "./components/Pagination/components/PaginationNavigation/PaginationNavigation";
 export { default as Paragraph } from "./components/Paragraph/Paragraph";
 export { default as Preloader } from "./components/Preloader/Preloader";
 export { default as RadioButton } from "./components/RadioButton/RadioButton";
@@ -37,6 +36,6 @@ export { default as Tab } from "./components/Tabs/Tab";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as TextField } from "./components/TextField/TextField";
 export { default as TextLink } from "./components/TextLink/TextLink";
-export { default as throttleTime } from "./constants/throttleTime";
 export { default as Tile } from "./components/Tile/Tile";
-export { default as Tooltip } from "./components/Tooltip/Tooltip";
+export { default as Tooltip } from "./components/Tooltip/Tooltip";
+export { default as usePagination } from "./components/Pagination/usePagination";

package/dist/lib/colors/Colors.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .colors {
-  margin: 0 auto;
   max-width: 835px;
+  margin: 0 auto;
 }
 .colors__inner {
   display: -webkit-box;
@@ -47,9 +47,9 @@ h5 {
   margin-bottom: 24px;
 }
 .colors__color {
-  border-radius: 50%;
-  height: 48px;
   width: 48px;
+  height: 48px;
+  border-radius: 50%;
 }
 .colors__item_border .colors__color {
   border: 1px solid #E5E5E5;

package/dist/lib/colors/Colors.js

@@ -2,10 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.array.map");
-
-require("core-js/modules/es.function.name");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,12 +13,12 @@ require("core-js/modules/es.function.name");
 
 var React = _interopRequireWildcard(require("react"));
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var _Header = _interopRequireDefault(require("../components/Header/Header"));
 
 var _Paragraph = _interopRequireDefault(require("../components/Paragraph/Paragraph"));
 
-var _cnCreate = _interopRequireDefault(require("../utils/cnCreate"));
-
 var _colorsData = _interopRequireDefault(require("./colorsData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,7 +27,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var cn = (0, _cnCreate["default"])('colors');
+var cn = (0, _uiHelpers.cnCreate)('colors');
 
 var Colors = function Colors() {
   return /*#__PURE__*/React.createElement("div", {

package/dist/lib/colors/colorsData.js

@@ -40,7 +40,7 @@ var _default = [{
     name: '137C',
     value: '#FFA717'
   }, {
-    name: '311C',
+    name: 'Pantone311C',
     value: '#5BD9E5'
   }, {
     name: 'Reflex Blue',

package/dist/lib/components/Accordion/Accordion.css

@@ -5,40 +5,66 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-accordion {
+.mfui-accordion {
   border-top: 1px solid #D8D8D8;
-}
-.mfui-beta-accordion:last-child {
   border-bottom: 1px solid #D8D8D8;
 }
-.mfui-beta-accordion:not(.mfui-beta-accordion_open) .mfui-beta-accordion__title-wrap:hover {
+.mfui-accordion + .mfui-accordion {
+  border-top: none;
+}
+.mfui-accordion:not(.mfui-accordion_open) .mfui-accordion__title-wrap:hover {
   background: rgba(237, 237, 237, 0.5);
 }
-.mfui-beta-accordion.mfui-beta-accordion_open .mfui-beta-accordion__title-wrap {
+.mfui-accordion.mfui-accordion_open .mfui-accordion__title-wrap {
   background: #EDEDED;
 }
-.mfui-beta-accordion__title-wrap {
-  cursor: pointer;
+.mfui-accordion__title-wrap {
   position: relative;
-  padding: 24px 68px 24px 24px;
+  padding: 24px 52px 24px 16px;
+  cursor: pointer;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion__title-wrap {
+    padding: 24px 68px 24px 24px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-accordion__title-wrap {
+    padding: 24px 72px 24px 24px;
+  }
 }
-.mfui-beta-accordion__icon-box {
+.mfui-accordion__icon-box {
   position: absolute;
-  right: 20px;
   top: 50%;
+  right: 20px;
   width: 32px;
   height: 32px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;
 }
-.mfui-beta-accordion__content-inner {
-  padding: 0 68px 0 40px;
+.mfui-accordion__content-inner {
+  padding: 24px 16px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-accordion__content-inner {
+    padding: 24px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-accordion__content-inner {
+    padding: 24px 48px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-accordion__content-inner {
+    padding: 24px 40px;
+  }
 }
-.mfui-beta-accordion__content-inner_v-padding {
+.mfui-accordion__content-inner_v-padding {
   padding-top: 24px;
   padding-bottom: 24px;
 }
-.mfui-beta-accordion__icon {
+.mfui-accordion__icon {
   fill: #000000;
 }

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Accordion.less';
-export interface IAccordionProps {
+export interface IAccordionProps extends IFilterDataAttrs {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
-    title: string;
+    title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Вертикальные отступы */
@@ -11,11 +14,13 @@ export interface IAccordionProps {
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
+        openedClass?: string;
         root?: string;
         collapse?: string;
+        titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string) => void;
+    onClickAccordion?: (isOpened: boolean, title: string | React.ReactNode | React.ReactNode[]) => void;
 }
 declare const Accordion: React.FC<IAccordionProps>;
 export default Accordion;

package/dist/lib/components/Accordion/Accordion.js

@@ -13,40 +13,41 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var _Collapse = _interopRequireDefault(require("../Collapse/Collapse"));
 
 var _Header = _interopRequireDefault(require("../Header/Header"));
 
-var _Collapse = _interopRequireDefault(require("../Collapse/Collapse"));
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var ArrowUp = function ArrowUp(props) {
+var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20.8 20L16 15.2 11.2 20l-1.7-1.6L16 12l6.5 6.4z"
+    d: "M11.2 12l4.8 4.8 4.8-4.8 1.7 1.6L16 20l-6.5-6.4z"
   }));
 };
 
-var ArrowDown = function ArrowDown(props) {
+var ArrowUp = function ArrowUp(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11.2 12l4.8 4.8 4.8-4.8 1.7 1.6L16 20l-6.5-6.4z"
+    d: "M20.8 20L16 15.2 11.2 20l-1.7-1.6L16 12l6.5 6.4z"
   }));
 };
 
-var cn = (0, _cnCreate["default"])('mfui-beta-accordion');
+var cn = (0, _uiHelpers.cnCreate)('mfui-accordion');
 
 var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
+  var rootRef = _ref.rootRef,
+      title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$hasVerticalPaddi = _ref.hasVerticalPaddings,
@@ -54,8 +55,11 @@ var Accordion = function Accordion(_ref) {
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootPropsClasses = _ref$classes.root,
+  var openedClass = _ref$classes.openedClass,
+      rootPropsClasses = _ref$classes.root,
       collapsePropsClasses = _ref$classes.collapse,
+      titleWrapPropsClasses = _ref$classes.titleWrap,
+      dataAttrs = _ref.dataAttrs,
       onClickAccordion = _ref.onClickAccordion,
       children = _ref.children;
 
@@ -73,12 +77,14 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(!isOpenedState);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  var openedClassName = isOpenedState ? openedClass : undefined;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+    ref: rootRef,
     className: cn({
       open: isOpenedState
-    }, [className, rootPropsClasses])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('title-wrap'),
+    }, [className, rootPropsClasses, openedClassName])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle
   }, /*#__PURE__*/React.createElement(_Header["default"], {
     as: "h5"
@@ -96,14 +102,20 @@ var Accordion = function Accordion(_ref) {
 };
 
 Accordion.propTypes = {
-  title: PropTypes.string.isRequired,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
   hasVerticalPaddings: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
+    openedClass: PropTypes.string,
     root: PropTypes.string,
-    collapse: PropTypes.string
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string
   }),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onClickAccordion: PropTypes.func
 };
 var _default = Accordion;

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

@@ -5,108 +5,110 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-banner {
-  overflow: hidden;
+.mfui-banner {
   position: relative;
+  overflow: hidden;
 }
-.mfui-beta-banner .swiper-wrapper {
+.mfui-banner .swiper-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-banner__slide {
-  height: 500px;
+.mfui-banner__slide {
   -ms-flex-negative: 0;
       flex-shrink: 0;
+  height: 500px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-banner__slide {
+  .mfui-banner__slide {
     height: 540px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-banner__slide {
+  .mfui-banner__slide {
     height: 420px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-banner__slide {
+  .mfui-banner__slide {
     height: 400px;
   }
 }
-.mfui-beta-banner__arrow {
+.mfui-banner__arrow {
   position: absolute;
   top: 50%;
+  z-index: 10;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-.mfui-beta-banner__arrow_prev {
+.mfui-banner__arrow_prev {
   left: 12px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-banner__arrow_prev {
+  .mfui-banner__arrow_prev {
     left: 8px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-banner__arrow_prev {
+  .mfui-banner__arrow_prev {
     left: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-banner__arrow_prev {
+  .mfui-banner__arrow_prev {
     left: 20px;
   }
 }
-.mfui-beta-banner__arrow_next {
+.mfui-banner__arrow_next {
   right: 12px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-banner__arrow_next {
+  .mfui-banner__arrow_next {
     right: 8px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-banner__arrow_next {
+  .mfui-banner__arrow_next {
     right: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-banner__arrow_next {
+  .mfui-banner__arrow_next {
     right: 20px;
   }
 }
-.mfui-beta-banner__pagination {
+.mfui-banner__pagination {
   position: absolute;
   bottom: 16px;
   left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+  z-index: 10;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 6px;
   border-radius: 12px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
-.mfui-beta-banner__pagination_theme_light {
+.mfui-banner__pagination_theme_light {
   background-color: transparent;
 }
-.mfui-beta-banner__pagination_theme_green {
+.mfui-banner__pagination_theme_green {
   background-color: #00B956;
 }
-.mfui-beta-banner__pagination_theme_dark {
+.mfui-banner__pagination_theme_dark {
   background-color: rgba(0, 0, 0, 0.25);
 }
-.mfui-beta-banner__dot {
+.mfui-banner__dot {
   width: 12px;
   height: 12px;
 }
-.mfui-beta-banner__dot:not(:last-child) {
+.mfui-banner__dot:not(:last-child) {
   margin-right: 8px;
 }

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

@@ -11,6 +11,11 @@ export interface IBannerProps {
     className?: string;
     /** Прокрутка с зацикливанием */
     loop?: boolean;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        slide?: string;
+        arrow?: string;
+    };
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */

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

@@ -2,10 +2,6 @@
 
 function _typeof3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof3 = function _typeof3(obj) { return typeof obj; }; } else { _typeof3 = function _typeof3(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof3(obj); }
 
-require("core-js/modules/es.array.map");
-
-require("core-js/modules/es.object.values");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,9 +17,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _swiper = _interopRequireWildcard(require("swiper"));
 
@@ -57,10 +53,12 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   };
 };
 
-var cn = (0, _cnCreate["default"])('mfui-beta-banner');
+var cn = (0, _uiHelpers.cnCreate)('mfui-banner');
 
 var Banner = function Banner(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       _ref$autoPlay = _ref.autoPlay,
       autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
       _ref$autoPlayDelay = _ref.autoPlayDelay,
@@ -193,19 +191,19 @@ var Banner = function Banner(_ref) {
   }, React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
       key: i,
-      className: cn('slide')
+      className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
     }, child);
   })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
     className: cn('arrow', {
       prev: true
-    }),
+    }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
   }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
     className: cn('arrow', {
       next: true
-    }),
+    }, [classes.arrow]),
     view: "next",
     onClick: handleNextClick,
     disabled: !loop && isEnd,
@@ -230,6 +228,9 @@ var Banner = function Banner(_ref) {
 Banner.propTypes = {
   className: PropTypes.string,
   loop: PropTypes.bool,
+  classes: PropTypes.shape({
+    slide: PropTypes.string
+  }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),

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

@@ -5,9 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-banner-dot {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-banner-dot {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -17,47 +15,49 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   padding: 2px;
   border-radius: 50%;
   cursor: pointer;
 }
-.mfui-beta-banner-dot:before {
+.mfui-banner-dot:before {
   content: '';
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
-  background-color: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
 }
-.mfui-beta-banner-dot_active {
+.mfui-banner-dot_active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-banner-dot_active:before {
+.mfui-banner-dot_active:before {
   background-color: #FFFFFF;
 }
-.mfui-beta-banner-dot_active.mfui-beta-banner-dot_timer:before {
+.mfui-banner-dot_active.mfui-banner-dot_timer:before {
   display: none;
 }
-.mfui-beta-banner-dot__timer {
+.mfui-banner-dot__timer {
   display: block;
   width: 100%;
   height: 100%;
+  border-radius: 50%;
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
-  border-radius: 50%;
 }
-.mfui-beta-banner-dot__timer-circle {
-  fill: rgba(255, 255, 255, 0.5);
-  stroke: #FFFFFF;
-  stroke-width: 100;
-  stroke-dasharray: 1000;
-  -webkit-animation: timer linear;
-          animation: timer linear;
+.mfui-banner-dot__timer-circle {
   -webkit-transform: scale(-1, 1);
           transform: scale(-1, 1);
   -webkit-transform-origin: center;
           transform-origin: center;
+  -webkit-animation: timer linear;
+          animation: timer linear;
+  fill: rgba(255, 255, 255, 0.5);
+  stroke: #FFFFFF;
+  stroke-width: 100;
+  stroke-dasharray: 1000;
 }
 @-webkit-keyframes timer {
   0% {

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

@@ -9,17 +9,15 @@ exports["default"] = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var cn = (0, _cnCreate["default"])('mfui-beta-banner-dot');
+var cn = (0, _uiHelpers.cnCreate)('mfui-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,