@megafon/ui-core 7.4.1 → 7.6.0

package/dist/es/components/Badges/NotificationBadge/NotificationBadge.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium b__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
+h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}

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

@@ -19,7 +19,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import * as React from 'react';
-import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
+import { START_DATE, END_DATE, useDatepicker } from '@datepicker-react/hooks';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import { addMonths, subMonths } from 'date-fns';
 import differenceInDays from 'date-fns/differenceInDays';
@@ -47,15 +47,6 @@ export var CalendarDirectionTypes = {
   FUTURE: 'future',
   BOTH: 'both'
 };
-var weekdayLabelFormat = function weekdayLabelFormat(date) {
-  return formatDate(date, 'EEEEEE');
-};
-var dayLabelFormat = function dayLabelFormat(date) {
-  return formatDate(date, 'd');
-};
-var monthLabelFormat = function monthLabelFormat(date) {
-  return formatDate(date, 'LLLL');
-};
 var generateMonthsData = function generateMonthsData(pastMonthsCount, futureMonthsCount, direction) {
   var months = [];
   var currentDate = new Date();
@@ -303,18 +294,6 @@ var Calendar = function Calendar(_ref) {
     return monthsArray.map(function (_ref2) {
       var month = _ref2.month,
         year = _ref2.year;
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      var _useMonth = useMonth({
-          year: year,
-          month: month,
-          firstDayOfWeek: firstDayOfWeek,
-          dayLabelFormat: dayLabelFormat,
-          weekdayLabelFormat: weekdayLabelFormat,
-          monthLabelFormat: monthLabelFormat
-        }),
-        days = _useMonth.days,
-        weekdayLabels = _useMonth.weekdayLabels,
-        monthLabel = _useMonth.monthLabel;
       var isPrevMonthDisabled = !!minBookingDate && isSameMonth(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
       var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
@@ -328,14 +307,15 @@ var Calendar = function Calendar(_ref) {
           arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
         },
         year: year,
-        weekdayLabels: weekdayLabels,
-        monthLabel: monthLabel,
+        month: month,
+        firstDayOfWeek: firstDayOfWeek,
         isPrevMonthDisabled: isModernType || isPrevMonthDisabled,
         isNextMonthDisabled: isModernType || isNextMonthDisabled,
         goToPreviousMonth: goToPreviousMonths,
         goToNextMonth: goToNextMonths,
-        isModern: isModernType
-      }, renderDays(days)));
+        isModern: isModernType,
+        renderDays: renderDays
+      }));
     });
   };
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FirstDayOfWeek, MonthType } from '@datepicker-react/hooks';
+import { FirstDayOfWeek, MonthType, UseMonthResult } from '@datepicker-react/hooks';
 import './Month.scss';
 export interface IMonthPickerProps {
     firstDayOfWeek: FirstDayOfWeek;
@@ -16,12 +16,12 @@ export interface IMonthProps {
     isPrevMonthDisabled: boolean;
     isNextMonthDisabled: boolean;
     year: number;
-    monthLabel: string;
-    weekdayLabels: string[];
+    month: number;
+    firstDayOfWeek?: FirstDayOfWeek;
     goToPreviousMonth: () => void;
     goToNextMonth: () => void;
     isModern?: boolean;
-    children?: React.ReactNode;
+    renderDays: (days: UseMonthResult['days']) => React.ReactNode;
 }
 declare const Month: React.FC<IMonthProps>;
 export default Month;

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

@@ -2,7 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import { useMonth } from '@datepicker-react/hooks';
 import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import format from 'date-fns/format';
+import ruLocale from 'date-fns/locale/ru';
 import "./Month.css";
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -22,19 +25,45 @@ var ArrowRight = function ArrowRight(props) {
     clipRule: "evenodd"
   }));
 };
+var formatDate = function formatDate(date, pattern) {
+  var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ruLocale;
+  return format(date, pattern, {
+    locale: locale
+  });
+};
+var weekdayLabelFormat = function weekdayLabelFormat(date) {
+  return formatDate(date, 'EEEEEE');
+};
+var dayLabelFormat = function dayLabelFormat(date) {
+  return formatDate(date, 'd');
+};
+var monthLabelFormat = function monthLabelFormat(date) {
+  return formatDate(date, 'LLLL');
+};
 var cn = cnCreate('mfui-month');
 var Month = function Month(_ref) {
   var dataAttrs = _ref.dataAttrs,
     isPrevMonthDisabled = _ref.isPrevMonthDisabled,
     isNextMonthDisabled = _ref.isNextMonthDisabled,
     year = _ref.year,
-    monthLabel = _ref.monthLabel,
-    weekdayLabels = _ref.weekdayLabels,
+    month = _ref.month,
+    firstDayOfWeek = _ref.firstDayOfWeek,
     goToPreviousMonth = _ref.goToPreviousMonth,
     goToNextMonth = _ref.goToNextMonth,
     _ref$isModern = _ref.isModern,
     isModern = _ref$isModern === void 0 ? false : _ref$isModern,
-    children = _ref.children;
+    renderDays = _ref.renderDays;
+  var _useMonth = useMonth({
+      year: year,
+      month: month,
+      firstDayOfWeek: firstDayOfWeek,
+      dayLabelFormat: dayLabelFormat,
+      weekdayLabelFormat: weekdayLabelFormat,
+      monthLabelFormat: monthLabelFormat
+    }),
+    days = _useMonth.days,
+    weekdayLabels = _useMonth.weekdayLabels,
+    monthLabel = _useMonth.monthLabel;
   var handleArrowLeftClick = function handleArrowLeftClick(e) {
     if (checkEventIsClickOrEnterPress(e)) {
       !isPrevMonthDisabled && goToPreviousMonth();
@@ -83,6 +112,6 @@ var Month = function Month(_ref) {
     }, dayLabel);
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('days')
-  }, children));
+  }, renderDays(days)));
 };
 export default Month;

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

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

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

@@ -32,7 +32,9 @@ export interface ICheckboxProps {
     error?: boolean;
     /** Дополнительный контент справа */
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
-    children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    /** Отключить нижний отступ */
+    disableBottomMargin?: boolean;
+    children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
     /** Обработчик изменения значения */
     onChange?: (checked: boolean) => void;
 }

package/dist/es/components/Checkbox/Checkbox.js

@@ -29,6 +29,8 @@ var Checkbox = function Checkbox(_ref) {
     extraContent = _ref.extraContent,
     dataAttrs = _ref.dataAttrs,
     classes = _ref.classes,
+    _ref$disableBottomMar = _ref.disableBottomMargin,
+    disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
     onChange = _ref.onChange;
   var isTouch = detectTouch();
   var _React$useState = React.useState(checked),
@@ -50,7 +52,9 @@ var Checkbox = function Checkbox(_ref) {
       color: color,
       checked: isChecked,
       disabled: disabled,
-      error: error
+      error: error,
+      'bottom-margin': !disableBottomMargin,
+      single: !children && !extraContent
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])

package/dist/es/components/Row/Row.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

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

@@ -23,6 +23,8 @@ export interface IRowProps {
     target?: '_self' | '_blank';
     /** rel - аргумент тега <a> */
     rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дочерние элементы: Badges, Switcher, Selector */

package/dist/es/components/Row/Row.js

@@ -30,6 +30,8 @@ var Row = function Row(_ref) {
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
     rel = _ref.rel,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -47,7 +49,8 @@ var Row = function Row(_ref) {
       size: size,
       view: backgroundView,
       pointer: isActive,
-      'has-arrow': showArrow && !showLoader
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
     }, [className, classes.root]),
     href: href,
     target: href ? target : undefined,
@@ -65,7 +68,8 @@ var Row = function Row(_ref) {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    as: isSmallSize ? 'h5' : 'h3'
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
   }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/dist/es/components/ValueField/ValueField.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import './ValueField.scss';
+export declare const Field: {
+    readonly LINE: "line";
+    readonly INPUT: "input";
+};
+export type FieldType = (typeof Field)[keyof typeof Field];
+export interface IValueField {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Значение */
+    value?: string | number;
+    /** Отображаемый текст при отсутствии значения */
+    placeholder?: string;
+    /** Префикс для значения */
+    valuePrefix?: string;
+    /** Единица измерения значения */
+    valueUnit?: string;
+    /** Позиционирование */
+    position?: 'left' | 'right';
+    /** Цветовая тема */
+    theme?: 'default' | 'gray' | 'color';
+    /** Тип поля */
+    fieldType?: FieldType;
+    /** Отключение поля ввода */
+    disabled?: boolean;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Обработчик потери фокуса */
+    onBlur?: () => void;
+}
+declare const ValueField: React.FC<IValueField>;
+export default ValueField;

package/dist/es/components/ValueField/ValueField.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.trim.js";
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./ValueField.css";
+export var Field = {
+  LINE: 'line',
+  INPUT: 'input'
+};
+var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
+var sanitizeValue = function sanitizeValue(value) {
+  if (typeof value === 'string' && value.trim() === '') {
+    return null;
+  }
+  return value;
+};
+var cn = cnCreate('mfui-value-field');
+var ValueField = function ValueField(_ref) {
+  var className = _ref.className,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    valuePrefix = _ref.valuePrefix,
+    valueUnit = _ref.valueUnit,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'left' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    _ref$fieldType = _ref.fieldType,
+    fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
+    disabled = _ref.disabled,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  var _a;
+  var _useState = useState(value !== null && value !== void 0 ? value : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var currentValue = isControlled ? value : inputValue;
+  var inputRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var isFieldInput = fieldType === Field.INPUT;
+  var RootElement = isFieldInput ? 'label' : 'div';
+  var handleInputBlur = function handleInputBlur() {
+    setIsFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  };
+  var handleInputFocus = function handleInputFocus() {
+    setIsFocused(true);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    !isControlled && setInputValue(e.target.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _a;
+    if (e.key === 'Enter') {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+      return;
+    }
+    if (charsAllowedByNumberInput.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  useEffect(function () {
+    !isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
+  }, [isControlled, value]);
+  return /*#__PURE__*/React.createElement(RootElement, _extends({
+    className: cn({
+      interactive: isFieldInput,
+      theme: theme,
+      position: position,
+      focus: isFocused,
+      disabled: disabled
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
+    className: cn('prefix')
+  }, valuePrefix), /*#__PURE__*/React.createElement("div", {
+    className: cn('box')
+  }, isFieldInput && /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('input'),
+    type: "number",
+    value: currentValue,
+    placeholder: placeholder,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    onKeyDown: handleKeyDown,
+    disabled: disabled
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('line')
+  }, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
+    className: cn('unit')
+  }, valueUnit));
+};
+export default ValueField;

package/dist/es/index.d.ts

@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
 export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';
 export { default as utils } from './components/Modal/utils/utils';
+export { default as ValueField } from './components/ValueField/ValueField';

package/dist/es/index.js

@@ -76,4 +76,5 @@ export { default as UploadFileItemIcon } from "./components/UploadForm/UploadFil
 export { default as useDragAndDrop } from "./components/UploadForm/UploadField/components/useDragAndDrop";
 export { default as useGradient } from "./components/Carousel/useGradient";
 export { default as usePagination } from "./components/Pagination/usePagination";
-export { default as utils } from "./components/Modal/utils/utils";
+export { default as utils } from "./components/Modal/utils/utils";
+export { default as ValueField } from "./components/ValueField/ValueField";

package/dist/lib/components/Badges/NotificationBadge/NotificationBadge.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium b__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
+h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}

package/dist/lib/components/Calendar/Calendar.js

@@ -56,15 +56,6 @@ var CalendarDirectionTypes = exports.CalendarDirectionTypes = {
   FUTURE: 'future',
   BOTH: 'both'
 };
-var weekdayLabelFormat = function weekdayLabelFormat(date) {
-  return formatDate(date, 'EEEEEE');
-};
-var dayLabelFormat = function dayLabelFormat(date) {
-  return formatDate(date, 'd');
-};
-var monthLabelFormat = function monthLabelFormat(date) {
-  return formatDate(date, 'LLLL');
-};
 var generateMonthsData = function generateMonthsData(pastMonthsCount, futureMonthsCount, direction) {
   var months = [];
   var currentDate = new Date();
@@ -312,18 +303,6 @@ var Calendar = function Calendar(_ref) {
     return monthsArray.map(function (_ref2) {
       var month = _ref2.month,
         year = _ref2.year;
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      var _useMonth = (0, _hooks.useMonth)({
-          year: year,
-          month: month,
-          firstDayOfWeek: firstDayOfWeek,
-          dayLabelFormat: dayLabelFormat,
-          weekdayLabelFormat: weekdayLabelFormat,
-          monthLabelFormat: monthLabelFormat
-        }),
-        days = _useMonth.days,
-        weekdayLabels = _useMonth.weekdayLabels,
-        monthLabel = _useMonth.monthLabel;
       var isPrevMonthDisabled = !!minBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), maxBookingDate);
       var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
@@ -337,14 +316,15 @@ var Calendar = function Calendar(_ref) {
           arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
         },
         year: year,
-        weekdayLabels: weekdayLabels,
-        monthLabel: monthLabel,
+        month: month,
+        firstDayOfWeek: firstDayOfWeek,
         isPrevMonthDisabled: isModernType || isPrevMonthDisabled,
         isNextMonthDisabled: isModernType || isNextMonthDisabled,
         goToPreviousMonth: goToPreviousMonths,
         goToNextMonth: goToNextMonths,
-        isModern: isModernType
-      }, renderDays(days)));
+        isModern: isModernType,
+        renderDays: renderDays
+      }));
     });
   };
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {

package/dist/lib/components/Calendar/components/_Month/Month.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FirstDayOfWeek, MonthType } from '@datepicker-react/hooks';
+import { FirstDayOfWeek, MonthType, UseMonthResult } from '@datepicker-react/hooks';
 import './Month.scss';
 export interface IMonthPickerProps {
     firstDayOfWeek: FirstDayOfWeek;
@@ -16,12 +16,12 @@ export interface IMonthProps {
     isPrevMonthDisabled: boolean;
     isNextMonthDisabled: boolean;
     year: number;
-    monthLabel: string;
-    weekdayLabels: string[];
+    month: number;
+    firstDayOfWeek?: FirstDayOfWeek;
     goToPreviousMonth: () => void;
     goToNextMonth: () => void;
     isModern?: boolean;
-    children?: React.ReactNode;
+    renderDays: (days: UseMonthResult['days']) => React.ReactNode;
 }
 declare const Month: React.FC<IMonthProps>;
 export default Month;

package/dist/lib/components/Calendar/components/_Month/Month.js

@@ -9,7 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@datepicker-react/hooks");
 var _uiHelpers = require("@megafon/ui-helpers");
+var _format = _interopRequireDefault(require("date-fns/format"));
+var _ru = _interopRequireDefault(require("date-fns/locale/ru"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -31,19 +34,45 @@ var ArrowRight = function ArrowRight(props) {
     clipRule: "evenodd"
   }));
 };
+var formatDate = function formatDate(date, pattern) {
+  var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _ru["default"];
+  return (0, _format["default"])(date, pattern, {
+    locale: locale
+  });
+};
+var weekdayLabelFormat = function weekdayLabelFormat(date) {
+  return formatDate(date, 'EEEEEE');
+};
+var dayLabelFormat = function dayLabelFormat(date) {
+  return formatDate(date, 'd');
+};
+var monthLabelFormat = function monthLabelFormat(date) {
+  return formatDate(date, 'LLLL');
+};
 var cn = (0, _uiHelpers.cnCreate)('mfui-month');
 var Month = function Month(_ref) {
   var dataAttrs = _ref.dataAttrs,
     isPrevMonthDisabled = _ref.isPrevMonthDisabled,
     isNextMonthDisabled = _ref.isNextMonthDisabled,
     year = _ref.year,
-    monthLabel = _ref.monthLabel,
-    weekdayLabels = _ref.weekdayLabels,
+    month = _ref.month,
+    firstDayOfWeek = _ref.firstDayOfWeek,
     goToPreviousMonth = _ref.goToPreviousMonth,
     goToNextMonth = _ref.goToNextMonth,
     _ref$isModern = _ref.isModern,
     isModern = _ref$isModern === void 0 ? false : _ref$isModern,
-    children = _ref.children;
+    renderDays = _ref.renderDays;
+  var _useMonth = (0, _hooks.useMonth)({
+      year: year,
+      month: month,
+      firstDayOfWeek: firstDayOfWeek,
+      dayLabelFormat: dayLabelFormat,
+      weekdayLabelFormat: weekdayLabelFormat,
+      monthLabelFormat: monthLabelFormat
+    }),
+    days = _useMonth.days,
+    weekdayLabels = _useMonth.weekdayLabels,
+    monthLabel = _useMonth.monthLabel;
   var handleArrowLeftClick = function handleArrowLeftClick(e) {
     if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
       !isPrevMonthDisabled && goToPreviousMonth();
@@ -92,6 +121,6 @@ var Month = function Month(_ref) {
     }, dayLabel);
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('days')
-  }, children));
+  }, renderDays(days)));
 };
 var _default = exports["default"] = Month;

package/dist/lib/components/Checkbox/Checkbox.css

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

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

@@ -32,7 +32,9 @@ export interface ICheckboxProps {
     error?: boolean;
     /** Дополнительный контент справа */
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
-    children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    /** Отключить нижний отступ */
+    disableBottomMargin?: boolean;
+    children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
     /** Обработчик изменения значения */
     onChange?: (checked: boolean) => void;
 }

package/dist/lib/components/Checkbox/Checkbox.js

@@ -38,6 +38,8 @@ var Checkbox = function Checkbox(_ref) {
     extraContent = _ref.extraContent,
     dataAttrs = _ref.dataAttrs,
     classes = _ref.classes,
+    _ref$disableBottomMar = _ref.disableBottomMargin,
+    disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
     onChange = _ref.onChange;
   var isTouch = (0, _uiHelpers.detectTouch)();
   var _React$useState = React.useState(checked),
@@ -59,7 +61,9 @@ var Checkbox = function Checkbox(_ref) {
       color: color,
       checked: isChecked,
       disabled: disabled,
-      error: error
+      error: error,
+      'bottom-margin': !disableBottomMargin,
+      single: !children && !extraContent
     }, className)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])

package/dist/lib/components/Row/Row.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

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

@@ -23,6 +23,8 @@ export interface IRowProps {
     target?: '_self' | '_blank';
     /** rel - аргумент тега <a> */
     rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дочерние элементы: Badges, Switcher, Selector */

package/dist/lib/components/Row/Row.js

@@ -39,6 +39,8 @@ var Row = function Row(_ref) {
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
     rel = _ref.rel,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -56,7 +58,8 @@ var Row = function Row(_ref) {
       size: size,
       view: backgroundView,
       pointer: isActive,
-      'has-arrow': showArrow && !showLoader
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
     }, [className, classes.root]),
     href: href,
     target: href ? target : undefined,
@@ -74,7 +77,8 @@ var Row = function Row(_ref) {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(_Header["default"], {
     className: cn('title', [classes.title]),
-    as: isSmallSize ? 'h5' : 'h3'
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
   }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/dist/lib/components/ValueField/ValueField.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import './ValueField.scss';
+export declare const Field: {
+    readonly LINE: "line";
+    readonly INPUT: "input";
+};
+export type FieldType = (typeof Field)[keyof typeof Field];
+export interface IValueField {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Значение */
+    value?: string | number;
+    /** Отображаемый текст при отсутствии значения */
+    placeholder?: string;
+    /** Префикс для значения */
+    valuePrefix?: string;
+    /** Единица измерения значения */
+    valueUnit?: string;
+    /** Позиционирование */
+    position?: 'left' | 'right';
+    /** Цветовая тема */
+    theme?: 'default' | 'gray' | 'color';
+    /** Тип поля */
+    fieldType?: FieldType;
+    /** Отключение поля ввода */
+    disabled?: boolean;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Обработчик потери фокуса */
+    onBlur?: () => void;
+}
+declare const ValueField: React.FC<IValueField>;
+export default ValueField;

package/dist/lib/components/ValueField/ValueField.js

@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Field = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Field = exports.Field = {
+  LINE: 'line',
+  INPUT: 'input'
+};
+var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
+var sanitizeValue = function sanitizeValue(value) {
+  if (typeof value === 'string' && value.trim() === '') {
+    return null;
+  }
+  return value;
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-value-field');
+var ValueField = function ValueField(_ref) {
+  var className = _ref.className,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    valuePrefix = _ref.valuePrefix,
+    valueUnit = _ref.valueUnit,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'left' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    _ref$fieldType = _ref.fieldType,
+    fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
+    disabled = _ref.disabled,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  var _a;
+  var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : ''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var currentValue = isControlled ? value : inputValue;
+  var inputRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var isFieldInput = fieldType === Field.INPUT;
+  var RootElement = isFieldInput ? 'label' : 'div';
+  var handleInputBlur = function handleInputBlur() {
+    setIsFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  };
+  var handleInputFocus = function handleInputFocus() {
+    setIsFocused(true);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    !isControlled && setInputValue(e.target.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _a;
+    if (e.key === 'Enter') {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+      return;
+    }
+    if (charsAllowedByNumberInput.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  (0, _react.useEffect)(function () {
+    !isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
+  }, [isControlled, value]);
+  return /*#__PURE__*/React.createElement(RootElement, (0, _extends2["default"])({
+    className: cn({
+      interactive: isFieldInput,
+      theme: theme,
+      position: position,
+      focus: isFocused,
+      disabled: disabled
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
+    className: cn('prefix')
+  }, valuePrefix), /*#__PURE__*/React.createElement("div", {
+    className: cn('box')
+  }, isFieldInput && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('input'),
+    type: "number",
+    value: currentValue,
+    placeholder: placeholder,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    onKeyDown: handleKeyDown,
+    disabled: disabled
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('line')
+  }, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
+    className: cn('unit')
+  }, valueUnit));
+};
+var _default = exports["default"] = ValueField;

package/dist/lib/index.d.ts

@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
 export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';
 export { default as utils } from './components/Modal/utils/utils';
+export { default as ValueField } from './components/ValueField/ValueField';

package/dist/lib/index.js

@@ -429,6 +429,12 @@ Object.defineProperty(exports, "UploadFileItemIcon", {
     return _UploadFileItemIcon["default"];
   }
 });
+Object.defineProperty(exports, "ValueField", {
+  enumerable: true,
+  get: function get() {
+    return _ValueField["default"];
+  }
+});
 Object.defineProperty(exports, "checkBreakpointsPropTypes", {
   enumerable: true,
   get: function get() {
@@ -556,4 +562,5 @@ var _useDragAndDrop = _interopRequireDefault(require("./components/UploadForm/Up
 var _useGradient = _interopRequireDefault(require("./components/Carousel/useGradient"));
 var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
 var _utils = _interopRequireDefault(require("./components/Modal/utils/utils"));
+var _ValueField = _interopRequireDefault(require("./components/ValueField/ValueField"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "7.4.1",
+    "version": "7.6.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.3.0",
+        "@megafon/ui-icons": "^3.4.0",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "0e2e21bc1f63599d5c0c1c606178422e1d70e787"
+    "gitHead": "327dfbd92bc2d6dfd02455d92527ae27d9944207"
 }