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

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

@@ -1,12 +1,14 @@
+import "core-js/modules/es.array.concat";
+import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.object.values";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-import cnCreate from "../../utils/cnCreate";
-import "./Button.css";
 import Preloader, { PreloaderColors } from "../Preloader/Preloader";
-import detectTouch from "../../utils/detectTouch";
-import filterDataAttrs from "./../../utils/dataAttrs";
+import "./Button.css";
 
 var Arrow = function Arrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -31,12 +33,19 @@ export var ButtonSizes = {
   MEDIUM: 'medium',
   LARGE: 'large'
 };
+var Content;
+
+(function (Content) {
+  Content["TEXT"] = "text";
+  Content["ICON"] = "icon";
+  Content["ICON_TEXT"] = "icon-text";
+})(Content || (Content = {}));
 
 var getLoaderSize = function getLoaderSize(size) {
   return size === ButtonSizes.SMALL ? ButtonSizes.SMALL : ButtonSizes.MEDIUM;
 };
 
-var cn = cnCreate('mfui-beta-button');
+var cn = cnCreate('mfui-button');
 
 var Button = function Button(_ref) {
   var _ref$classes = _ref.classes;
@@ -51,6 +60,7 @@ var Button = function Button(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'primary' : _ref$type,
       href = _ref.href,
+      download = _ref.download,
       target = _ref.target,
       rel = _ref.rel,
       _ref$actionType = _ref.actionType,
@@ -67,15 +77,18 @@ var Button = function Button(_ref) {
       showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
       _ref$showArrow = _ref.showArrow,
       showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
-      iconLeft = _ref.iconLeft,
+      icon = _ref.icon,
       disabled = _ref.disabled,
       children = _ref.children,
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
-  var isTouch = React.useMemo(function () {
-    return detectTouch();
-  }, []);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
+
   var ElementType = href ? 'a' : 'button';
   var handleClick = React.useCallback(function (e) {
     if (disabled) {
@@ -103,18 +116,34 @@ var Button = function Button(_ref) {
         return PreloaderColors.DEFAULT;
     }
   }, [type, theme, loaderWhite]);
-  var renderChildren = React.useMemo(function () {
+  var renderedContent = React.useMemo(function () {
+    if (!children && !icon) {
+      return null;
+    }
+
     return /*#__PURE__*/React.createElement("div", {
       className: cn('content', contentClassName)
-    }, iconLeft && /*#__PURE__*/React.createElement("div", {
+    }, icon && /*#__PURE__*/React.createElement("div", {
       className: cn('icon')
-    }, iconLeft), /*#__PURE__*/React.createElement("span", {
+    }, icon), children && /*#__PURE__*/React.createElement("span", {
       className: cn('text')
-    }, children), !iconLeft && showArrow && /*#__PURE__*/React.createElement(Arrow, {
+    }, children), !icon && showArrow && /*#__PURE__*/React.createElement(Arrow, {
       className: cn('icon-arrow')
     }));
-  }, [iconLeft, contentClassName, showArrow, children]);
-  var renderLoader = React.useMemo(function () {
+  }, [contentClassName, showArrow, icon, children]);
+  var contentType = React.useMemo(function () {
+    switch (true) {
+      case icon && !children:
+        return Content.ICON;
+
+      case icon && !!children:
+        return Content.ICON_TEXT;
+
+      default:
+        return Content.TEXT;
+    }
+  }, [icon, children]);
+  var renderedLoader = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(Preloader, {
       color: loaderColor,
       sizeAll: getLoaderSize(sizeAll),
@@ -137,8 +166,14 @@ var Button = function Button(_ref) {
     if (target && target !== '_self') {
       return 'noreferrer noopener';
     }
+
+    return undefined;
   };
 
+  var classNameValue = Array.isArray(className) ? [].concat(_toConsumableArray(className), [rootClassName]) : [className, rootClassName];
+  React.useEffect(function () {
+    setTouch(detectTouch());
+  }, []);
   return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
     className: cn({
       type: type,
@@ -151,9 +186,11 @@ var Button = function Button(_ref) {
       'size-mobile': sizeMobile,
       'full-width': fullWidth,
       loading: showLoader,
-      'no-touch': !isTouch
-    }, [className, rootClassName]),
+      'no-touch': !isTouch,
+      'content-type': contentType
+    }, classNameValue),
     href: href,
+    download: !!href && download,
     target: href ? target : undefined,
     rel: setRelAttribute(),
     type: href ? undefined : actionType,
@@ -162,7 +199,7 @@ var Button = function Button(_ref) {
     ref: buttonRef
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner', innerClassName)
-  }, !showLoader && children && renderChildren, showLoader && renderLoader));
+  }, !showLoader ? renderedContent : renderedLoader));
 };
 
 Button.propTypes = {
@@ -174,6 +211,7 @@ Button.propTypes = {
   theme: PropTypes.oneOf(Object.values(ButtonThemes)),
   type: PropTypes.oneOf(Object.values(ButtonTypes)),
   href: PropTypes.string,
+  download: PropTypes.bool,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   rel: PropTypes.string,
   actionType: PropTypes.oneOf(['button', 'reset', 'submit']),
@@ -185,7 +223,7 @@ Button.propTypes = {
   fullWidth: PropTypes.bool,
   showLoader: PropTypes.bool,
   showArrow: PropTypes.bool,
-  iconLeft: PropTypes.element,
+  icon: PropTypes.element,
   disabled: PropTypes.bool,
   dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({

package/dist/es/components/Calendar/Calendar.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-calendar {
+.mfui-calendar {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;

package/dist/es/components/Calendar/Calendar.js

@@ -21,14 +21,19 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import React, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import "./Calendar.css";
-import cnCreate from "../../utils/cnCreate";
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
-import { format, isEqual, isAfter, isBefore, isSameMonth } from 'date-fns';
+import { cnCreate } from '@megafon/ui-helpers';
+import differenceInDays from 'date-fns/differenceInDays';
+import format from 'date-fns/format';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isEqual from 'date-fns/isEqual';
+import isSameMonth from 'date-fns/isSameMonth';
 import ruLocale from 'date-fns/locale/ru';
-import Month from "./components/Month/Month";
+import PropTypes from 'prop-types';
 import Day from "./components/Day/Day";
+import Month from "./components/Month/Month";
+import "./Calendar.css";
 
 var formatDate = function formatDate(date, pattern) {
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ruLocale;
@@ -49,7 +54,7 @@ var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
 
-var cn = cnCreate('mfui-beta-calendar');
+var cn = cnCreate('mfui-calendar');
 
 var Calendar = function Calendar(_ref) {
   var _ref$isSingleDate = _ref.isSingleDate,
@@ -80,12 +85,19 @@ var Calendar = function Calendar(_ref) {
       calendarState = _useState2[0],
       setCalendarState = _useState2[1];
 
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hoveredDate = _useState4[0],
+      setHoveredDate = _useState4[1];
+
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
 
   var _a = useDatepicker(_extends({
-    onDatesChange: function onDatesChange() {},
+    onDatesChange: function onDatesChange() {
+      return undefined;
+    },
     numberOfMonths: 1,
     minBookingDate: minBookingDate,
     maxBookingDate: maxBookingDate,
@@ -108,7 +120,7 @@ var Calendar = function Calendar(_ref) {
     var isStartChose = stateFocusedInput === START_DATE;
     var isEndChose = stateFocusedInput === END_DATE;
     var isEndDateChose = stateStartDate && isEndChose;
-    var isStartDatePeriodNarrow = stateStartDate && stateEndDate && isEndChose && isAfter(date, stateStartDate) && !isAfter(date, stateEndDate);
+    var isPeriodNarrow = stateStartDate && stateEndDate && isAfter(date, stateStartDate) && isBefore(date, stateEndDate);
     var isStartDateClick = stateStartDate && isEqual(stateStartDate || 0, date);
     var isEndDateClick = stateEndDate && isEqual(stateEndDate || 0, date);
     var isClickBeforeChosenEndDate = stateEndDate && isEndChose && !isAfter(date, stateEndDate || 0);
@@ -122,11 +134,15 @@ var Calendar = function Calendar(_ref) {
           startDate: date
         });
 
-      case isStartDatePeriodNarrow:
-        return _extends(_extends({}, calendarState), {
-          endDate: date,
-          focusedInput: START_DATE
-        });
+      case isPeriodNarrow:
+        {
+          var isCloserToStart = stateStartDate && stateEndDate && differenceInDays(stateStartDate, date) >= differenceInDays(date, stateEndDate);
+          return _extends(_extends({}, calendarState), {
+            startDate: isCloserToStart ? date : stateStartDate,
+            endDate: isCloserToStart ? stateEndDate : date,
+            focusedInput: START_DATE
+          });
+        }
 
       case isStartDateChose:
         return {
@@ -149,6 +165,14 @@ var Calendar = function Calendar(_ref) {
     }
   };
 
+  var isDateHighlighted = function isDateHighlighted(date) {
+    if (!stateStartDate || !!stateEndDate || isSingleDate) {
+      return false;
+    }
+
+    return !!stateStartDate && !!hoveredDate && isAfter(hoveredDate, date) && isBefore(stateStartDate, date);
+  };
+
   var handleDaySelect = function handleDaySelect(date) {
     var nextState = getCalendarState(date);
     var nextStartDate = nextState.startDate,
@@ -157,6 +181,14 @@ var Calendar = function Calendar(_ref) {
     onChange && onChange(nextStartDate, nextEndDate);
   };
 
+  var handleDateHover = function handleDateHover(date) {
+    return setHoveredDate(date);
+  };
+
+  var handleDateMouseLeave = function handleDateMouseLeave() {
+    return setHoveredDate(undefined);
+  };
+
   var renderDays = function renderDays(days) {
     return days.map(function (day, index) {
       if (_typeof(day) === 'object') {
@@ -174,7 +206,10 @@ var Calendar = function Calendar(_ref) {
           key: formatDate(date, 'dd-MM-yyyy'),
           dayLabel: dayLabel
         }, pickerProps, {
-          onDateSelect: handleDaySelect
+          onDateSelect: handleDaySelect,
+          onDateHover: handleDateHover,
+          onMouseLeave: handleDateMouseLeave,
+          isBetween: isDateHighlighted(date)
         }));
       }
 

package/dist/es/components/Calendar/components/Day/Day.css

@@ -5,23 +5,20 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-day {
-  font-size: 12px;
-  line-height: 16px;
+.mfui-day {
+  position: relative;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
   width: 32px;
   height: 32px;
-  padding: 0;
-  line-height: 24px;
-  color: #333333;
+  padding: 0 10px 8px 0;
   border: none;
-  border-radius: 50%;
+  color: #333333;
+  line-height: 24px;
+  text-decoration: none;
   background-color: rgba(0, 0, 0, 0);
-  cursor: pointer;
   outline: none;
-  text-decoration: none;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -29,85 +26,110 @@ h5 {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-size: 12px;
+  line-height: 16px;
 }
-.mfui-beta-day:hover:not(.mfui-beta-day_active):not(.mfui-beta-day_between):not(.mfui-beta-day:disabled) {
-  border-radius: 50%;
+.mfui-day:last-child {
+  padding-right: 0;
+}
+.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,
+.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
+.mfui-day_active:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  border-radius: 50% !important;
+  color: #333333;
   background-color: #F6F6F6;
 }
-.mfui-beta-day:disabled {
+.mfui-day:not(:disabled):not(.mfui-day_active):hover:after {
+  color: #333333;
+  background-color: #F6F6F6;
+}
+.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
+.mfui-day_active:after {
+  background-color: #00B956;
+}
+.mfui-day_disabled {
   cursor: default;
   opacity: 0.3;
+  pointer-events: none;
 }
-.mfui-beta-day:not(:disabled):hover,
-.mfui-beta-day:not(:disabled):focus,
-.mfui-beta-day_active {
-  position: relative;
-  border-radius: 50% !important;
+.mfui-day_active,
+.mfui-day:not(:disabled):not(.mfui-day_active):focus {
   color: #FFFFFF;
-  background-color: #00B956;
-}
-.mfui-beta-day:not(:disabled):not(.mfui-beta-day_active):hover {
-  background-color: #F6F6F6;
-  color: #333333;
 }
-.mfui-beta-day_active + .mfui-beta-day_active:before {
+.mfui-day_active + .mfui-day_active:before,
+.mfui-day_between:hover + .mfui-day:not(.mfui-day_monday).mfui-day_active:before {
   content: '';
-  display: block;
   position: absolute;
-  background-color: #EDEDED;
-  height: 32px;
-  width: 32px;
   top: 0;
   left: -22px;
   z-index: -1;
+  display: block;
+  width: 32px;
+  height: 32px;
+  background-color: #EDEDED;
 }
-.mfui-beta-day_between {
+.mfui-day_between {
   position: relative;
-  background-color: #EDEDED;
   border-radius: 0;
 }
-.mfui-beta-day_between:before {
+.mfui-day_between:before {
   content: '';
-  display: block;
   position: absolute;
-  z-index: -1;
   top: 0;
   left: -22px;
-  padding: 0 20px;
+  z-index: -1;
+  display: block;
   height: 32px;
+  padding: 0 20px;
   background-color: #EDEDED;
 }
-.mfui-beta-day_between:after {
+.mfui-day_between:after {
   content: '';
-  display: block;
   position: absolute;
-  z-index: -1;
   top: 0;
-  right: -25px;
+  right: -16px;
+  z-index: -1;
+  display: block;
   width: 40px;
   height: 32px;
   background-color: #EDEDED;
 }
-.mfui-beta-day_sunday,
-.mfui-beta-day_last {
+.mfui-day_sunday,
+.mfui-day_last {
+  border-radius: 50%;
+}
+.mfui-day_sunday:after,
+.mfui-day_last:after {
+  right: 10px;
+  width: 32px;
   border-radius: 50%;
 }
-.mfui-beta-day_sunday:after,
-.mfui-beta-day_last:after {
-  display: none !important;
+.mfui-day_last:after {
+  right: 0;
 }
-.mfui-beta-day_monday,
-.mfui-beta-day_first {
+.mfui-day_monday,
+.mfui-day_first {
   border-radius: 50%;
 }
-.mfui-beta-day_monday:before,
-.mfui-beta-day_first:before {
-  display: none !important;
+.mfui-day_monday:before,
+.mfui-day_first:before {
+  left: 0;
+  width: 32px;
+  padding: 0;
+  border-radius: 50%;
 }
-.mfui-beta-day_sunday.mfui-beta-day_first {
+.mfui-day_sunday.mfui-day_first {
   border-radius: 50%;
 }
-.mfui-beta-day__label {
+.mfui-day__label {
   position: relative;
   z-index: 99;
 }

package/dist/es/components/Calendar/components/Day/Day.d.ts

@@ -12,8 +12,10 @@ export interface IDayPickerProps {
     onDateFocus: (date: Date) => void;
 }
 export declare type DayType = {
+    isBetween?: boolean;
     dayLabel?: string;
     date: Date;
+    onMouseLeave?: () => void;
 };
 export declare type IDayProps = IDayPickerProps & DayType;
 declare const Day: React.FC<IDayProps>;

package/dist/es/components/Calendar/components/Day/Day.js

@@ -17,17 +17,23 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useDay } from '@datepicker-react/hooks';
-import cnCreate from "../../../../utils/cnCreate";
+import { cnCreate } from '@megafon/ui-helpers';
+import isFirstDayOfMonth from 'date-fns/isFirstDayOfMonth';
+import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
+import isMonday from 'date-fns/isMonday';
+import isSunday from 'date-fns/isSunday';
+import PropTypes from 'prop-types';
 import "./Day.css";
-import { isSunday, isMonday, isLastDayOfMonth, isFirstDayOfMonth } from 'date-fns';
-var cn = cnCreate('mfui-beta-day');
+var cn = cnCreate('mfui-day');
 
 var Day = function Day(_a) {
-  var dayLabel = _a.dayLabel,
+  var _a$isBetween = _a.isBetween,
+      isBetween = _a$isBetween === void 0 ? false : _a$isBetween,
+      dayLabel = _a.dayLabel,
       date = _a.date,
-      pickerProps = __rest(_a, ["dayLabel", "date"]);
+      onMouseLeave = _a.onMouseLeave,
+      pickerProps = __rest(_a, ["isBetween", "dayLabel", "date", "onMouseLeave"]);
 
   var dayRef = React.useRef(null);
 
@@ -45,19 +51,25 @@ var Day = function Day(_a) {
 
   var modClasses = {
     active: isSelectedStartOrEnd,
-    between: isSelected && !isSelectedStartOrEnd,
+    disabled: isDateDisabled,
+    between: isBetween || isSelected && !isSelectedStartOrEnd,
     sunday: isSunday(date),
     monday: isMonday(date),
     first: !isSelectedStartOrEnd && isFirstDayOfMonth(date),
     last: !isSelectedStartOrEnd && isLastDayOfMonth(date)
   };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    onMouseLeave && onMouseLeave();
+  };
+
   return /*#__PURE__*/React.createElement("button", {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseEnter: onMouseEnter,
+    onMouseLeave: handleMouseLeave,
     tabIndex: tabIndex,
     type: "button",
-    disabled: isDateDisabled,
     ref: dayRef,
     className: cn(modClasses)
   }, /*#__PURE__*/React.createElement("span", {

package/dist/es/components/Calendar/components/Month/Month.css

@@ -5,10 +5,9 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-month {
+.mfui-month {
   position: relative;
-  padding: 28px 0;
-  width: 284px;
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -19,70 +18,71 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  z-index: 1;
+  width: 284px;
+  padding: 28px 0;
 }
-.mfui-beta-month__header {
+.mfui-month__header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 282px;
   margin-bottom: 20px;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
   text-transform: capitalize;
 }
-.mfui-beta-month__header svg {
+.mfui-month__header svg {
   height: 24.5px;
-  fill: #333333;
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  fill: #333333;
 }
-.mfui-beta-month__title {
+.mfui-month__title {
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
   width: 224px;
   text-align: center;
 }
-.mfui-beta-month__weekday-labels {
+.mfui-month__weekday-labels {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  -webkit-column-gap: 22px;
-     -moz-column-gap: 22px;
-          column-gap: 22px;
   width: 272px;
   padding-bottom: 13px;
   border-bottom: 1px solid #EDEDED;
+  -webkit-column-gap: 22px;
+     -moz-column-gap: 22px;
+          column-gap: 22px;
 }
-.mfui-beta-month__weekday {
+.mfui-month__weekday {
   font-size: 12px;
   line-height: 16px;
-  color: #333333;
-  font-weight: 600;
-  text-transform: capitalize;
-  text-align: center;
   width: 20px;
   height: 16px;
+  color: #333333;
+  font-weight: 600;
   line-height: 24px;
+  text-align: center;
+  text-transform: capitalize;
 }
-.mfui-beta-month__days {
+.mfui-month__days {
   display: grid;
+  grid-template-columns: repeat(7, 1fr);
   width: 284px;
   margin-top: 8px;
-  grid-template-columns: repeat(7, 1fr);
-  -webkit-column-gap: 10px;
-     -moz-column-gap: 10px;
-          column-gap: 10px;
-  row-gap: 8px;
+  -webkit-column-gap: 0;
+     -moz-column-gap: 0;
+          column-gap: 0;
+  row-gap: 0;
 }
-svg.mfui-beta-month__arrow_disabled {
+svg.mfui-month__arrow_disabled {
   cursor: default;
   opacity: 0.5;
 }

package/dist/es/components/Calendar/components/Month/Month.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import './Month.less';
 import { FirstDayOfWeek, MonthType } from '@datepicker-react/hooks';
+import './Month.less';
 export interface IMonthPickerProps {
     firstDayOfWeek: FirstDayOfWeek;
     activeMonths: MonthType[];

package/dist/es/components/Calendar/components/Month/Month.js

@@ -2,9 +2,9 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import PropTypes from 'prop-types';
-import cnCreate from "../../../../utils/cnCreate";
+import { cnCreate } from '@megafon/ui-helpers';
 import "./Month.css";
+import PropTypes from 'prop-types';
 
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -26,7 +26,7 @@ var ArrowRight = function ArrowRight(props) {
   }));
 };
 
-var cn = cnCreate('mfui-beta-month');
+var cn = cnCreate('mfui-month');
 
 var Month = function Month(_ref) {
   var isPrevMonthDisabled = _ref.isPrevMonthDisabled,