@megafon/ui-core 6.0.1 → 6.1.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.0.1...@megafon/ui-core@6.1.0) (2024-08-19)
+
+
+### Bug Fixes
+
+* **banner:** fix size of arrows in banner ([8f8cce6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/8f8cce6f854ab38961481610059ce70593930d40))
+
+
+### Features
+
+* **calendar:** add new props to component Calendar ([9295261](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/92952617c9f6090691d1911372669657afb993e3))
+
+
+
+
+
 ## [6.0.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@6.0.0...@megafon/ui-core@6.0.1) (2024-08-05)
 
 **Note:** Version bump only for package @megafon/ui-core

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

@@ -39,7 +39,7 @@
 .mfui-banner_auto-height .mfui-banner__slide {
   height: auto;
 }
-.mfui-banner__arrow {
+.mfui-banner .mfui-banner__arrow {
   position: absolute;
   top: 50%;
   z-index: 10;
@@ -48,60 +48,60 @@
   transition: scale 0.2s linear;
 }
 @media screen and (max-width: 767px) {
-  .mfui-banner__arrow {
+  .mfui-banner .mfui-banner__arrow {
     display: none;
   }
 }
-.mfui-banner__arrow_theme_white {
+.mfui-banner .mfui-banner__arrow_theme_white {
   width: 64px;
   height: 64px;
 }
 @media screen and (max-width: 1023px) {
-  .mfui-banner__arrow_theme_white {
+  .mfui-banner .mfui-banner__arrow_theme_white {
     display: none;
   }
 }
-.mfui-banner__arrow_prev {
+.mfui-banner .mfui-banner__arrow_prev {
   left: 12px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-banner__arrow_prev {
+  .mfui-banner .mfui-banner__arrow_prev {
     left: 8px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-banner__arrow_prev {
+  .mfui-banner .mfui-banner__arrow_prev {
     left: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-banner__arrow_prev {
+  .mfui-banner .mfui-banner__arrow_prev {
     left: 20px;
   }
 }
-.mfui-banner__arrow_next {
+.mfui-banner .mfui-banner__arrow_next {
   right: 12px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-banner__arrow_next {
+  .mfui-banner .mfui-banner__arrow_next {
     right: 8px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-banner__arrow_next {
+  .mfui-banner .mfui-banner__arrow_next {
     right: 16px;
   }
 }
 @media screen and (min-width: 1280px) {
-  .mfui-banner__arrow_next {
+  .mfui-banner .mfui-banner__arrow_next {
     right: 20px;
   }
 }
-.mfui-banner__arrow_prev.mfui-banner__arrow_theme_white {
+.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white {
   left: 0;
   translate: -50% -50%;
 }
-.mfui-banner__arrow_next.mfui-banner__arrow_theme_white {
+.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white {
   right: 0;
   translate: 50% -50%;
 }

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

@@ -3,3 +3,22 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
+.mfui-calendar_modern {
+  display: block;
+  width: 364px;
+  height: 304px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.mfui-calendar_modern::-webkit-scrollbar {
+  width: 16px;
+}
+.mfui-calendar_modern::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  border-radius: 16px;
+  background-color: #D8D8D8;
+  background-clip: padding-box;
+}
+.mfui-calendar_modern::-webkit-scrollbar-thumb:hover {
+  background-color: #999999;
+}

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

@@ -1,5 +1,16 @@
 import React from 'react';
 import './Calendar.less';
+export declare const CalendarTypes: {
+    readonly CLASSIC: "Classic";
+    readonly MODERN: "Modern";
+};
+export declare const CalendarDirectionTypes: {
+    readonly PAST: "past";
+    readonly FUTURE: "future";
+    readonly BOTH: "both";
+};
+declare type CalendarTypesType = typeof CalendarTypes[keyof typeof CalendarTypes];
+declare type CalendarDirectionType = typeof CalendarDirectionTypes[keyof typeof CalendarDirectionTypes];
 export interface ICalendarProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -21,6 +32,14 @@ export interface ICalendarProps {
     minBookingDate?: Date;
     /** Блокирует возможность выбора дат после указанной (включительно) */
     maxBookingDate?: Date;
+    /** Тип компонента */
+    type?: CalendarTypesType;
+    /** Количество месяцев отображаемых перед текущим, не включая его (только для типа Modern) */
+    pastMonthsCount?: number;
+    /** Количество месяцев отображаемых после текущего, не включая его (только для типа Modern) */
+    futureMonthsCount?: number;
+    /** Направление, в котором отображаются месяцы в календаре (только для типа Modern) */
+    direction?: CalendarDirectionType;
     /** Обработчик изменения выбранного периода. При isSingleDate = true возвращается только startDate */
     onChange?: (startDate: Date | null, endDate: Date | null) => void;
 }

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

@@ -1,11 +1,16 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.array.reverse.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -23,6 +28,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { addMonths, subMonths } from 'date-fns';
 import differenceInDays from 'date-fns/differenceInDays';
 import format from 'date-fns/format';
 import isAfter from 'date-fns/isAfter';
@@ -42,6 +48,16 @@ var formatDate = function formatDate(date, pattern) {
   });
 };
 
+export var CalendarTypes = {
+  CLASSIC: 'Classic',
+  MODERN: 'Modern'
+};
+export var CalendarDirectionTypes = {
+  PAST: 'past',
+  FUTURE: 'future',
+  BOTH: 'both'
+};
+
 var weekdayLabelFormat = function weekdayLabelFormat(date) {
   return formatDate(date, 'EEEEEE');
 };
@@ -53,6 +69,45 @@ var dayLabelFormat = function dayLabelFormat(date) {
 var monthLabelFormat = function monthLabelFormat(date) {
   return formatDate(date, 'LLLL');
 };
+
+var generateMonthsData = function generateMonthsData(pastMonthsCount, futureMonthsCount, direction) {
+  var months = [];
+  var currentDate = new Date();
+  var currentMonth = {
+    year: currentDate.getFullYear(),
+    month: currentDate.getMonth()
+  };
+
+  if (direction === 'past' || direction === 'both') {
+    var pastMonths = Array.from({
+      length: pastMonthsCount
+    }, function (_, i) {
+      var monthDate = subMonths(currentDate, i + 1);
+      return {
+        year: monthDate.getFullYear(),
+        month: monthDate.getMonth()
+      };
+    }).reverse();
+    months = [].concat(_toConsumableArray(pastMonths), [currentMonth]);
+  } else {
+    months.push(currentMonth);
+  }
+
+  if (direction === 'future' || direction === 'both') {
+    var futureMonths = Array.from({
+      length: futureMonthsCount
+    }, function (_, i) {
+      var monthDate = addMonths(currentDate, i + 1);
+      return {
+        year: monthDate.getFullYear(),
+        month: monthDate.getMonth()
+      };
+    });
+    months = [].concat(_toConsumableArray(months), _toConsumableArray(futureMonths));
+  }
+
+  return months;
+};
 /* List of cases to check on component change:
 
 - Should correctly choose value and trigger callbacks with correct arguments on dates choose.
@@ -78,7 +133,15 @@ var Calendar = function Calendar(_ref) {
       className = _ref.className,
       onChange = _ref.onChange,
       minBookingDate = _ref.minBookingDate,
-      maxBookingDate = _ref.maxBookingDate;
+      maxBookingDate = _ref.maxBookingDate,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'Classic' : _ref$type,
+      _ref$pastMonthsCount = _ref.pastMonthsCount,
+      pastMonthsCount = _ref$pastMonthsCount === void 0 ? 1 : _ref$pastMonthsCount,
+      _ref$futureMonthsCoun = _ref.futureMonthsCount,
+      futureMonthsCount = _ref$futureMonthsCoun === void 0 ? 1 : _ref$futureMonthsCoun,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'past' : _ref$direction;
   var calendarStateFromProps = useMemo(function () {
     var isInitialDatesEqual = startDate && endDate && isEqual(startDate, endDate);
     var isStartFocus = !startDate || endDate && !isInitialDatesEqual;
@@ -91,6 +154,9 @@ var Calendar = function Calendar(_ref) {
       focusedInput: isStartFocus ? START_DATE : END_DATE
     };
   }, [startDate, endDate, isSingleDate, minBookingDate, maxBookingDate]);
+  var monthsData = useMemo(function () {
+    return generateMonthsData(pastMonthsCount, futureMonthsCount, direction);
+  }, [pastMonthsCount, futureMonthsCount, direction]);
 
   var _useState = useState(calendarStateFromProps),
       _useState2 = _slicedToArray(_useState, 2),
@@ -103,9 +169,11 @@ var Calendar = function Calendar(_ref) {
       setHoveredDate = _useState4[1];
 
   var isUserChoice = useRef(false);
+  var currentMonthRef = useRef(null);
   var stateStartDate = calendarState.startDate,
       stateEndDate = calendarState.endDate,
       stateFocusedInput = calendarState.focusedInput;
+  var isModernType = type === CalendarTypes.MODERN;
 
   var _a = useDatepicker(_extends({
     onDatesChange: function onDatesChange() {
@@ -131,6 +199,19 @@ var Calendar = function Calendar(_ref) {
     setCalendarState(calendarStateFromProps);
     !isUserChoice.current && propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calendarStateFromProps]);
+  useEffect(function () {
+    var _a, _b;
+
+    if (isModernType && direction !== 'future') {
+      var parentElement = (_a = currentMonthRef.current) === null || _a === void 0 ? void 0 : _a.parentNode;
+
+      if (parentElement && currentMonthRef.current) {
+        parentElement.scrollTo({
+          top: ((_b = currentMonthRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) * pastMonthsCount || 0
+        });
+      }
+    }
+  }, [isModernType, direction, pastMonthsCount]);
 
   var getCalendarState = function getCalendarState(date) {
     var isStartChose = stateFocusedInput === START_DATE;
@@ -144,6 +225,26 @@ var Calendar = function Calendar(_ref) {
     var isClickBeforeStartDate = stateStartDate && isEndChose && !isAfter(date, stateStartDate || 0);
     var isStartDateChose = isStartDateClick || isEndDateClick || isClickBeforeChosenEndDate || isClickAfterChosenEndDate || isClickBeforeStartDate;
 
+    if (isModernType) {
+      var resetEndDateCondition = isStartChose || !stateStartDate || !!stateEndDate;
+
+      if (resetEndDateCondition || isEndChose && stateStartDate && isBefore(date, stateStartDate)) {
+        return {
+          startDate: date,
+          endDate: null,
+          focusedInput: END_DATE
+        };
+      }
+
+      if (isEndChose && stateStartDate) {
+        return {
+          startDate: stateStartDate,
+          endDate: date,
+          focusedInput: START_DATE
+        };
+      }
+    }
+
     switch (true) {
       case isSingleDate:
         return _extends(_extends({}, calendarState), {
@@ -230,7 +331,8 @@ var Calendar = function Calendar(_ref) {
           onDateSelect: handleDaySelect,
           onDateHover: handleDateHover,
           onMouseLeave: handleDateMouseLeave,
-          isBetween: isDateHighlighted(date)
+          isBetween: isDateHighlighted(date),
+          isModern: isModernType
         }));
       }
 
@@ -242,7 +344,8 @@ var Calendar = function Calendar(_ref) {
   };
 
   var renderMonths = function renderMonths() {
-    return activeMonths.map(function (_ref2) {
+    var monthsArray = isModernType ? monthsData : activeMonths;
+    return monthsArray.map(function (_ref2) {
       var month = _ref2.month,
           year = _ref2.year;
 
@@ -261,7 +364,10 @@ var Calendar = function Calendar(_ref) {
 
       var isPrevMonthDisabled = !!minBookingDate && isSameMonth(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
-      return /*#__PURE__*/React.createElement(Month, {
+      var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: isCurrentMonth ? currentMonthRef : null
+      }, /*#__PURE__*/React.createElement(Month, {
         dataAttrs: {
           root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
           arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
@@ -271,16 +377,19 @@ var Calendar = function Calendar(_ref) {
         year: year,
         weekdayLabels: weekdayLabels,
         monthLabel: monthLabel,
-        isPrevMonthDisabled: isPrevMonthDisabled,
-        isNextMonthDisabled: isNextMonthDisabled,
+        isPrevMonthDisabled: isModernType || isPrevMonthDisabled,
+        isNextMonthDisabled: isModernType || isNextMonthDisabled,
         goToPreviousMonth: goToPreviousMonths,
-        goToNextMonth: goToNextMonths
-      }, renderDays(days));
+        goToNextMonth: goToNextMonths,
+        isModern: isModernType
+      }, renderDays(days)));
     });
   };
 
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn([className])
+    className: cn([className], {
+      modern: isModernType
+    })
   }), renderMonths());
 };
 
@@ -298,6 +407,10 @@ Calendar.propTypes = {
   endDate: PropTypes.instanceOf(Date),
   minBookingDate: PropTypes.instanceOf(Date),
   maxBookingDate: PropTypes.instanceOf(Date),
+  type: PropTypes.oneOf(Object.values(CalendarTypes)),
+  pastMonthsCount: PropTypes.number,
+  futureMonthsCount: PropTypes.number,
+  direction: PropTypes.oneOf(Object.values(CalendarDirectionTypes)),
   onChange: PropTypes.func
 };
 export default Calendar;

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

@@ -28,7 +28,8 @@
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):hover:after,
 .mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
-.mfui-day_active:after {
+.mfui-day_active:after,
+.mfui-day_active-modern:after {
   content: '';
   position: absolute;
   top: 0;
@@ -40,12 +41,20 @@
   color: var(--content);
   background-color: var(--spbSky0);
 }
+.mfui-day_active-modern:after {
+  width: 38px;
+  height: 38px;
+}
+.mfui-day_active-modern:hover:after {
+  background-color: var(--brandGreen) !important;
+}
 .mfui-day:not(:disabled):not(.mfui-day_active):hover:after {
   color: var(--content);
   background-color: var(--spbSky0);
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
-.mfui-day_active:after {
+.mfui-day_active:after,
+.mfui-day_active-modern:after {
   background-color: var(--brandGreen);
 }
 .mfui-day_disabled {
@@ -54,6 +63,7 @@
   pointer-events: none;
 }
 .mfui-day_active,
+.mfui-day_active-modern,
 .mfui-day:not(:disabled):not(.mfui-day_active):focus {
   color: var(--stcWhite);
 }
@@ -126,3 +136,108 @@
   position: relative;
   z-index: 99;
 }
+.mfui-day_modern {
+  width: 38.29px;
+  height: 38px;
+}
+.mfui-day_modern:not(:disabled):not(.mfui-day_modern_active-modern):hover:after,
+.mfui-day_modern:not(:disabled):not(.mfui-day_modern_active-modern):focus:after,
+.mfui-day_modern_active-modern:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 38px;
+  height: 38px;
+  border-radius: 50% !important;
+  color: var(--content);
+  background-color: var(--spbSky0);
+}
+.mfui-day_modern:not(:disabled):not(.mfui-day_modern_active-modern):hover:after {
+  color: var(--content);
+  background-color: var(--spbSky0);
+}
+.mfui-day_modern:not(:disabled):not(.mfui-day_modern_active-modern):focus:after,
+.mfui-day_modern_active-modern:after {
+  background-color: var(--brandGreen);
+}
+.mfui-day_active-modern,
+.mfui-day:not(:disabled):focus {
+  color: var(--stcWhite);
+}
+.mfui-day_active-modern + .mfui-day_active-modern:before,
+.mfui-day_between-modern:hover + .mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -22px;
+  z-index: -1;
+  display: block;
+  width: 40px;
+  height: 38px;
+  background-color: var(--spbSky1);
+}
+.mfui-day_between-modern {
+  position: relative;
+  border-radius: 0;
+}
+.mfui-day_between-modern:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -28px;
+  z-index: -1;
+  display: block;
+  height: 38px;
+  padding: 0 29px;
+  background-color: var(--spbSky1);
+}
+.mfui-day_between-modern:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -18px;
+  z-index: -1;
+  display: block;
+  width: 45px;
+  height: 38px;
+  background-color: var(--spbSky1);
+}
+.mfui-day_sunday-modern,
+.mfui-day_last-modern {
+  border-radius: 50%;
+}
+.mfui-day_sunday-modern:before,
+.mfui-day_last-modern:before {
+  padding-left: 20px;
+}
+.mfui-day_sunday-modern:after,
+.mfui-day_last-modern:after {
+  right: 10px;
+  width: 38.29px;
+  border-radius: 50%;
+}
+.mfui-day_last-modern:after {
+  right: 0;
+}
+.mfui-day_monday-modern,
+.mfui-day_first-modern {
+  border-radius: 50%;
+}
+.mfui-day_monday-modern:before,
+.mfui-day_first-modern:before {
+  left: 0;
+  width: 38px;
+  padding: 0;
+  border-radius: 50%;
+}
+.mfui-day_sunday-modern.mfui-day_first-modern {
+  border-radius: 50%;
+}
+.mfui-day__label_modern {
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 24px;
+  text-align: center;
+}

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

@@ -18,6 +18,7 @@ export declare type DayType = {
     isBetween?: boolean;
     dayLabel?: string;
     date: Date;
+    isModern?: boolean;
     onMouseLeave?: () => void;
 };
 export declare type IDayProps = IDayPickerProps & DayType;

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

@@ -33,8 +33,10 @@ var Day = function Day(_a) {
       isBetween = _a$isBetween === void 0 ? false : _a$isBetween,
       dayLabel = _a.dayLabel,
       date = _a.date,
+      _a$isModern = _a.isModern,
+      isModern = _a$isModern === void 0 ? false : _a$isModern,
       onMouseLeave = _a.onMouseLeave,
-      pickerProps = __rest(_a, ["dataAttrs", "isBetween", "dayLabel", "date", "onMouseLeave"]);
+      pickerProps = __rest(_a, ["dataAttrs", "isBetween", "dayLabel", "date", "isModern", "onMouseLeave"]);
 
   var dayRef = React.useRef(null);
 
@@ -50,15 +52,26 @@ var Day = function Day(_a) {
       onMouseEnter = _useDay.onMouseEnter,
       tabIndex = _useDay.tabIndex;
 
-  var modClasses = {
-    active: isSelectedStartOrEnd,
+  var modernClasses = {
+    modern: isModern,
     disabled: isDateDisabled,
+    'active-modern': isSelectedStartOrEnd,
+    'between-modern': isBetween || isSelected && !isSelectedStartOrEnd,
+    'sunday-modern': isSunday(date),
+    'monday-modern': isMonday(date),
+    'first-modern': !isSelectedStartOrEnd && isFirstDayOfMonth(date),
+    'last-modern': !isSelectedStartOrEnd && isLastDayOfMonth(date)
+  };
+  var classicClasses = {
+    active: isSelectedStartOrEnd,
     between: isBetween || isSelected && !isSelectedStartOrEnd,
     sunday: isSunday(date),
     monday: isMonday(date),
     first: !isSelectedStartOrEnd && isFirstDayOfMonth(date),
-    last: !isSelectedStartOrEnd && isLastDayOfMonth(date)
+    last: !isSelectedStartOrEnd && isLastDayOfMonth(date),
+    disabled: isDateDisabled
   };
+  var modClasses = isModern ? modernClasses : classicClasses;
 
   var handleMouseLeave = function handleMouseLeave() {
     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
@@ -74,7 +87,9 @@ var Day = function Day(_a) {
     ref: dayRef,
     className: cn(modClasses)
   }), /*#__PURE__*/React.createElement("span", {
-    className: cn('label')
+    className: cn('label', {
+      modern: isModern
+    })
   }, dayLabel));
 };
 
@@ -85,6 +100,7 @@ Day.propTypes = {
   dayLabel: PropTypes.string,
   date: PropTypes.instanceOf(Date).isRequired,
   focusedDate: PropTypes.instanceOf(Date),
+  isModern: PropTypes.bool,
   isDateSelected: PropTypes.func.isRequired,
   isDateHovered: PropTypes.func.isRequired,
   isFirstOrLastSelectedDate: PropTypes.func.isRequired,

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

@@ -79,3 +79,57 @@ svg.mfui-month__arrow_disabled {
   cursor: default;
   opacity: 0.5;
 }
+.mfui-month_modern {
+  width: 344px;
+  padding: 0 0 24px;
+}
+.mfui-month_modern .mfui-month__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 328px;
+  margin-bottom: 16px;
+  text-transform: capitalize;
+}
+.mfui-month_modern .mfui-month__title {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  width: 224px;
+  margin: 0 auto;
+  text-align: center;
+}
+.mfui-month_modern .mfui-month__weekday-labels {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 328px;
+  padding-bottom: 0;
+  border-bottom: none;
+  -webkit-column-gap: 8px;
+     -moz-column-gap: 8px;
+          column-gap: 8px;
+}
+.mfui-month_modern .mfui-month__weekday {
+  width: 20px;
+  height: 24px;
+  margin: 0 auto;
+  color: var(--spbSky3);
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 24px;
+  text-align: center;
+  text-transform: capitalize;
+}
+.mfui-month_modern .mfui-month__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 328px;
+  margin-top: 10px;
+  -webkit-column-gap: 0;
+     -moz-column-gap: 0;
+          column-gap: 0;
+  row-gap: 0;
+}

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

@@ -20,6 +20,7 @@ export interface IMonthProps {
     weekdayLabels: string[];
     goToPreviousMonth: () => void;
     goToNextMonth: () => void;
+    isModern?: boolean;
 }
 declare const Month: React.FC<IMonthProps>;
 export default Month;