@skbkontur/react-ui 0.0.0-1b188ff0e7 → 0.0.0-1da9bba033

package/components/Calendar/MonthView/MonthView.js

@@ -3,14 +3,51 @@ import { DateSelect } from "../../../internal/DateSelect";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { cx } from "../../../lib/theming/Emotion";
+import { useResponsiveLayout } from "../../../components/ResponsiveLayout";
 import { styles } from "../MonthView.styles";
 import { themeConfig } from "../config";
 import * as CDS from "../CalendarDateShape";
 import { CalendarDataTids } from "../Calendar";
+export var getMinMonth = function getMinMonth(year, minDate) {
+  var min = 0;
+
+  for (var i = 0; i < 12; ++i) {
+    if (minDate && CDS.isGreaterOrEqual({
+      date: 31,
+      month: i,
+      year: year
+    }, minDate)) {
+      min = i;
+      break;
+    }
+  }
+
+  return min;
+};
+export var getMaxMonth = function getMaxMonth(year, maxDate) {
+  var max = 11;
+
+  for (var i = 11; i >= 0; --i) {
+    if (maxDate && CDS.isLessOrEqual({
+      date: 1,
+      month: i,
+      year: year
+    }, maxDate)) {
+      max = i;
+      break;
+    }
+  }
+
+  return max;
+};
 export function MonthView(props) {
-  var _cx;
+  var _cx, _cx2;
 
   var theme = useContext(ThemeContext);
+
+  var _useResponsiveLayout = useResponsiveLayout(),
+      isMobile = _useResponsiveLayout.isMobile;
+
   var children = props.children,
       height = props.height,
       isFirstInYear = props.isFirstInYear,
@@ -33,44 +70,9 @@ export function MonthView(props) {
   var yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;
   var monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;
   var yearSelectDisabled = top > 40 || isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT;
-
-  var getMinMonth = function getMinMonth(value) {
-    var min = 0;
-
-    for (var i = 0; i < 12; ++i) {
-      if (minDate && CDS.isGreaterOrEqual({
-        date: 31,
-        month: i,
-        year: value
-      }, minDate)) {
-        min = i;
-        break;
-      }
-    }
-
-    return min;
-  };
-
-  var getMaxMonth = function getMaxMonth(value) {
-    var max = 11;
-
-    for (var i = 11; i >= 0; --i) {
-      if (maxDate && CDS.isLessOrEqual({
-        date: 1,
-        month: i,
-        year: value
-      }, maxDate)) {
-        max = i;
-        break;
-      }
-    }
-
-    return max;
-  };
-
   return /*#__PURE__*/React.createElement("div", {
     "data-tid": CalendarDataTids.month,
-    className: styles.month(theme),
+    className: cx((_cx = {}, _cx[styles.month(theme)] = true, _cx[styles.monthMobile()] = isMobile, _cx)),
     style: {
       top: top
     },
@@ -79,7 +81,7 @@ export function MonthView(props) {
     style: {
       top: headerTop
     },
-    className: cx((_cx = {}, _cx[styles.header()] = true, _cx[styles.headerSticky(theme)] = isHeaderSticky, _cx))
+    className: cx((_cx2 = {}, _cx2[styles.header()] = true, _cx2[styles.headerSticky(theme)] = isHeaderSticky, _cx2))
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       borderBottomColor: borderBottomColor
@@ -90,13 +92,13 @@ export function MonthView(props) {
     className: styles.headerMonth(theme)
   }, /*#__PURE__*/React.createElement(DateSelect, {
     disabled: monthSelectDisabled,
-    width: 85,
+    width: isMobile ? '6em' : 85,
     type: "month",
     value: month,
     onValueChange: onMonthSelect,
     ref: !monthSelectDisabled ? monthSelectRef : undefined,
-    minValue: getMinMonth(year),
-    maxValue: getMaxMonth(year)
+    minValue: getMinMonth(year, minDate),
+    maxValue: getMaxMonth(year, maxDate)
   })), isYearVisible && /*#__PURE__*/React.createElement("div", {
     "data-tid": CalendarDataTids.headerYear,
     className: styles.headerYear(theme),
@@ -105,7 +107,7 @@ export function MonthView(props) {
     }
   }, /*#__PURE__*/React.createElement(DateSelect, {
     disabled: yearSelectDisabled,
-    width: 50,
+    width: isMobile ? '3.5em' : 50,
     type: "year",
     value: year,
     minValue: minDate ? minDate.year : undefined,

package/components/Calendar/MonthView/MonthView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MonthView.tsx"],"names":["React","useContext","DateSelect","ThemeContext","ColorFunctions","cx","styles","themeConfig","CDS","CalendarDataTids","MonthView","props","theme","children","height","isFirstInYear","isLastInYear","maxDate","minDate","month","top","year","onMonthSelect","onYearSelect","monthSelectRef","yearSelectRef","isTopNegative","isHeaderSticky","headerTop","Math","min","MONTH_TITLE_HEIGHT","alpha","borderBottomColor","fade","calendarMonthTitleBorderBottomColor","isYearVisible","yearTop","monthSelectDisabled","yearSelectDisabled","getMinMonth","value","i","isGreaterOrEqual","date","getMaxMonth","max","isLessOrEqual","header","headerSticky","monthTitle","headerMonth","undefined","headerYear"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport { DateSelect } from '../../internal/DateSelect';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MonthView.styles';\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDataTids } from './Calendar';\n\ninterface MonthViewProps {\n  children: React.ReactNode;\n  firstDayOffset: number;\n  height: number;\n  isFirstInYear?: boolean;\n  isLastInYear?: boolean;\n  maxDate?: CDS.CalendarDateShape;\n  minDate?: CDS.CalendarDateShape;\n  month: number;\n  top: number;\n  year: number;\n  onMonthSelect: (month: number) => void;\n  onYearSelect: (month: number) => void;\n  monthSelectRef: (select: DateSelect | null) => void;\n  yearSelectRef: (select: DateSelect | null) => void;\n}\n\nexport function MonthView(props: MonthViewProps) {\n  const theme = useContext(ThemeContext);\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\n    maxDate,\n    minDate,\n    month,\n    top,\n    year,\n    onMonthSelect,\n    onYearSelect,\n    monthSelectRef,\n    yearSelectRef,\n  } = props;\n\n  const isTopNegative = top <= 0;\n  const isHeaderSticky = isTopNegative && height >= -top;\n  const headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;\n  const alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;\n  const borderBottomColor = ColorFunctions.fade(theme.calendarMonthTitleBorderBottomColor, alpha);\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 40 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  const getMinMonth = (value: number) => {\n    let min = 0;\n    for (let i = 0; i < 12; ++i) {\n      if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year: value }, minDate)) {\n        min = i;\n        break;\n      }\n    }\n    return min;\n  };\n\n  const getMaxMonth = (value: number) => {\n    let max = 11;\n    for (let i = 11; i >= 0; --i) {\n      if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year: value }, maxDate)) {\n        max = i;\n        break;\n      }\n    }\n    return max;\n  };\n\n  return (\n    <div data-tid={CalendarDataTids.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>\n      <div\n        style={{ top: headerTop }}\n        className={cx({\n          [styles.header()]: true,\n          [styles.headerSticky(theme)]: isHeaderSticky,\n        })}\n      >\n        <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>\n          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>\n            <DateSelect\n              disabled={monthSelectDisabled}\n              width={85}\n              type=\"month\"\n              value={month}\n              onValueChange={onMonthSelect}\n              ref={!monthSelectDisabled ? monthSelectRef : undefined}\n              minValue={getMinMonth(year)}\n              maxValue={getMaxMonth(year)}\n            />\n          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\n              <DateSelect\n                disabled={yearSelectDisabled}\n                width={50}\n                type=\"year\"\n                value={year}\n                minValue={minDate ? minDate.year : undefined}\n                maxValue={maxDate ? maxDate.year : undefined}\n                onValueChange={onYearSelect}\n                ref={!yearSelectDisabled ? yearSelectRef : undefined}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["MonthView.tsx"],"names":["React","useContext","DateSelect","ThemeContext","ColorFunctions","cx","useResponsiveLayout","styles","themeConfig","CDS","CalendarDataTids","getMinMonth","year","minDate","min","i","isGreaterOrEqual","date","month","getMaxMonth","maxDate","max","isLessOrEqual","MonthView","props","theme","isMobile","children","height","isFirstInYear","isLastInYear","top","onMonthSelect","onYearSelect","monthSelectRef","yearSelectRef","isTopNegative","isHeaderSticky","headerTop","Math","MONTH_TITLE_HEIGHT","alpha","borderBottomColor","fade","calendarMonthTitleBorderBottomColor","isYearVisible","yearTop","monthSelectDisabled","yearSelectDisabled","monthMobile","header","headerSticky","monthTitle","headerMonth","undefined","headerYear"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport { DateSelect } from '../../internal/DateSelect';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout';\nimport { Nullable } from '../..//typings/utility-types';\n\nimport { styles } from './MonthView.styles';\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDataTids } from './Calendar';\n\nexport const getMinMonth = (year: number, minDate: Nullable<CDS.CalendarDateShape>) => {\n  let min = 0;\n  for (let i = 0; i < 12; ++i) {\n    if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year }, minDate)) {\n      min = i;\n      break;\n    }\n  }\n  return min;\n};\n\nexport const getMaxMonth = (year: number, maxDate: Nullable<CDS.CalendarDateShape>) => {\n  let max = 11;\n  for (let i = 11; i >= 0; --i) {\n    if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year }, maxDate)) {\n      max = i;\n      break;\n    }\n  }\n  return max;\n};\n\ninterface MonthViewProps {\n  children: React.ReactNode;\n  firstDayOffset: number;\n  height: number;\n  isFirstInYear?: boolean;\n  isLastInYear?: boolean;\n  maxDate?: CDS.CalendarDateShape;\n  minDate?: CDS.CalendarDateShape;\n  month: number;\n  top: number;\n  year: number;\n  onMonthSelect: (month: number) => void;\n  onYearSelect: (month: number) => void;\n  monthSelectRef: (select: DateSelect | null) => void;\n  yearSelectRef: (select: DateSelect | null) => void;\n}\n\nexport function MonthView(props: MonthViewProps) {\n  const theme = useContext(ThemeContext);\n  const { isMobile } = useResponsiveLayout();\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\n    maxDate,\n    minDate,\n    month,\n    top,\n    year,\n    onMonthSelect,\n    onYearSelect,\n    monthSelectRef,\n    yearSelectRef,\n  } = props;\n\n  const isTopNegative = top <= 0;\n  const isHeaderSticky = isTopNegative && height >= -top;\n  const headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;\n  const alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;\n  const borderBottomColor = ColorFunctions.fade(theme.calendarMonthTitleBorderBottomColor, alpha);\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 40 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 40 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  return (\n    <div\n      data-tid={CalendarDataTids.month}\n      className={cx({ [styles.month(theme)]: true, [styles.monthMobile()]: isMobile })}\n      style={{ top }}\n      key={month + '-' + year}\n    >\n      <div\n        style={{ top: headerTop }}\n        className={cx({\n          [styles.header()]: true,\n          [styles.headerSticky(theme)]: isHeaderSticky,\n        })}\n      >\n        <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>\n          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>\n            {\n              <DateSelect\n                disabled={monthSelectDisabled}\n                width={isMobile ? '6em' : 85}\n                type=\"month\"\n                value={month}\n                onValueChange={onMonthSelect}\n                ref={!monthSelectDisabled ? monthSelectRef : undefined}\n                minValue={getMinMonth(year, minDate)}\n                maxValue={getMaxMonth(year, maxDate)}\n              />\n            }\n          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\n              {\n                <DateSelect\n                  disabled={yearSelectDisabled}\n                  width={isMobile ? '3.5em' : 50}\n                  type=\"year\"\n                  value={year}\n                  minValue={minDate ? minDate.year : undefined}\n                  maxValue={maxDate ? maxDate.year : undefined}\n                  onValueChange={onYearSelect}\n                  ref={!yearSelectDisabled ? yearSelectRef : undefined}\n                />\n              }\n            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}

package/components/Calendar/MonthView.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { DateSelect } from '../../internal/DateSelect';
+import { Nullable } from '../..//typings/utility-types';
 import * as CDS from './CalendarDateShape';
+export declare const getMinMonth: (year: number, minDate: Nullable<CDS.CalendarDateShape>) => number;
+export declare const getMaxMonth: (year: number, maxDate: Nullable<CDS.CalendarDateShape>) => number;
 interface MonthViewProps {
     children: React.ReactNode;
     firstDayOffset: number;

package/components/Calendar/MonthView.styles/MonthView.styles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
@@ -11,19 +11,33 @@ export var styles = memoizeStyle({
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ", " 0 ", ";\n    "])), t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
   },
   month: function month(t) {
-    var width = parseInt(t.calendarCellSize) * 7;
+    var width = parseInt(t.calendarCellWidth) * 7;
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: ", "px;\n    "])), width);
   },
+  monthMobile: function monthMobile() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n    "])));
+  },
   header: function header() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
   },
   headerSticky: function headerSticky(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      z-index: 2;\n    "])), t.calendarMonthHeaderStickedBgColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      z-index: 2;\n    "])), t.calendarMonthHeaderStickedBgColor);
   },
   monthTitle: function monthTitle(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border-bottom: 1px solid ", ";\n      font-weight: ", ";\n      margin: 0 ", " ", ";\n      line-height: ", ";\n    "])), t.calendarMonthTitleBorderBottomColor, t.dateSelectFontWeight, t.calendarMonthTitleMarginX, t.calendarMonthTitleMarginBottom, t.calendarMonthTitleLineHeight);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      border-bottom: 1px solid ", ";\n      font-weight: ", ";\n      margin: 0 ", " ", ";\n      line-height: ", ";\n    "])), t.calendarMonthTitleBorderBottomColor, t.dateSelectFontWeight, t.calendarMonthTitleMarginX, t.calendarMonthTitleMarginBottom, t.calendarMonthTitleLineHeight);
   },
+
+  /* Note: this could've been
+   * display: grid;
+   * grid-template-columns: repeat(7, minmax(0, 1fr));
+   */
   monthDayGrid: function monthDayGrid(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n    "])), t.calendarCellLineHeight);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "])), t.calendarCellLineHeight, t.calendarGridRowSpacing);
+  },
+  monthDayRow: function monthDayRow(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "])), t.calendarGridRowSpacing);
+  },
+  nativeSelect: function nativeSelect() {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: -12px;\n      right: 0;\n      bottom: -8px;\n      left: 0;\n      cursor: pointer;\n      appearance: none;\n      opacity: 0;\n      border: none;\n    "])));
   }
 });

package/components/Calendar/MonthView.styles/MonthView.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MonthView.styles.ts"],"names":["css","memoizeStyle","styles","headerMonth","t","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","headerYear","month","width","parseInt","calendarCellSize","header","headerSticky","calendarMonthHeaderStickedBgColor","monthTitle","calendarMonthTitleBorderBottomColor","dateSelectFontWeight","calendarMonthTitleMarginX","calendarMonthTitleMarginBottom","calendarMonthTitleLineHeight","monthDayGrid","calendarCellLineHeight"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,WADiC,uBACrBC,CADqB,EACX;AACpB,WAAOJ,GAAP;;AAEaI,IAAAA,CAAC,CAACC,4BAFf,EAEiDD,CAAC,CAACE,+BAFnD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBH,CARsB,EAQZ;AACnB,WAAOJ,GAAP;;;;AAIaI,IAAAA,CAAC,CAACC,4BAJf,EAIiDD,CAAC,CAACE,+BAJnD;;AAMD,GAfgC;;AAiBjCE,EAAAA,KAjBiC,iBAiB3BJ,CAjB2B,EAiBjB;AACd,QAAMK,KAAK,GAAGC,QAAQ,CAACN,CAAC,CAACO,gBAAH,CAAR,GAA+B,CAA7C;AACA,WAAOX,GAAP;;AAEWS,IAAAA,KAFX;;AAID,GAvBgC;;AAyBjCG,EAAAA,MAzBiC,oBAyBxB;AACP,WAAOZ,GAAP;;;AAGD,GA7BgC;;AA+BjCa,EAAAA,YA/BiC,wBA+BpBT,CA/BoB,EA+BV;AACrB,WAAOJ,GAAP;AACsBI,IAAAA,CAAC,CAACU,iCADxB;;;AAID,GApCgC;;AAsCjCC,EAAAA,UAtCiC,sBAsCtBX,CAtCsB,EAsCZ;AACnB,WAAOJ,GAAP;AAC6BI,IAAAA,CAAC,CAACY,mCAD/B;AAEiBZ,IAAAA,CAAC,CAACa,oBAFnB;AAGcb,IAAAA,CAAC,CAACc,yBAHhB,EAG6Cd,CAAC,CAACe,8BAH/C;AAIiBf,IAAAA,CAAC,CAACgB,4BAJnB;;AAMD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBjB,CA/CoB,EA+CV;AACrB,WAAOJ,GAAP;AACiBI,IAAAA,CAAC,CAACkB,sBADnB;;AAGD,GAnDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  headerMonth(t: Theme) {\n    return css`\n      display: inline-block;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  headerYear(t: Theme) {\n    return css`\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  month(t: Theme) {\n    const width = parseInt(t.calendarCellSize) * 7;\n    return css`\n      position: absolute;\n      width: ${width}px;\n    `;\n  },\n\n  header() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  headerSticky(t: Theme) {\n    return css`\n      background-color: ${t.calendarMonthHeaderStickedBgColor};\n      z-index: 2;\n    `;\n  },\n\n  monthTitle(t: Theme) {\n    return css`\n      border-bottom: 1px solid ${t.calendarMonthTitleBorderBottomColor};\n      font-weight: ${t.dateSelectFontWeight};\n      margin: 0 ${t.calendarMonthTitleMarginX} ${t.calendarMonthTitleMarginBottom};\n      line-height: ${t.calendarMonthTitleLineHeight};\n    `;\n  },\n\n  monthDayGrid(t: Theme) {\n    return css`\n      line-height: ${t.calendarCellLineHeight};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MonthView.styles.ts"],"names":["css","memoizeStyle","styles","headerMonth","t","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","headerYear","month","width","parseInt","calendarCellWidth","monthMobile","header","headerSticky","calendarMonthHeaderStickedBgColor","monthTitle","calendarMonthTitleBorderBottomColor","dateSelectFontWeight","calendarMonthTitleMarginX","calendarMonthTitleMarginBottom","calendarMonthTitleLineHeight","monthDayGrid","calendarCellLineHeight","calendarGridRowSpacing","monthDayRow","nativeSelect"],"mappings":"uRAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,WADiC,uBACrBC,CADqB,EACX;AACpB,WAAOJ,GAAP;;AAEaI,IAAAA,CAAC,CAACC,4BAFf,EAEiDD,CAAC,CAACE,+BAFnD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBH,CARsB,EAQZ;AACnB,WAAOJ,GAAP;;;;AAIaI,IAAAA,CAAC,CAACC,4BAJf,EAIiDD,CAAC,CAACE,+BAJnD;;AAMD,GAfgC;;AAiBjCE,EAAAA,KAjBiC,iBAiB3BJ,CAjB2B,EAiBjB;AACd,QAAMK,KAAK,GAAGC,QAAQ,CAACN,CAAC,CAACO,iBAAH,CAAR,GAAgC,CAA9C;AACA,WAAOX,GAAP;;AAEWS,IAAAA,KAFX;;AAID,GAvBgC;;AAyBjCG,EAAAA,WAzBiC,yBAyBnB;AACZ,WAAOZ,GAAP;;;AAGD,GA7BgC;;AA+BjCa,EAAAA,MA/BiC,oBA+BxB;AACP,WAAOb,GAAP;;;AAGD,GAnCgC;;AAqCjCc,EAAAA,YArCiC,wBAqCpBV,CArCoB,EAqCV;AACrB,WAAOJ,GAAP;AACsBI,IAAAA,CAAC,CAACW,iCADxB;;;AAID,GA1CgC;;AA4CjCC,EAAAA,UA5CiC,sBA4CtBZ,CA5CsB,EA4CZ;AACnB,WAAOJ,GAAP;AAC6BI,IAAAA,CAAC,CAACa,mCAD/B;AAEiBb,IAAAA,CAAC,CAACc,oBAFnB;AAGcd,IAAAA,CAAC,CAACe,yBAHhB,EAG6Cf,CAAC,CAACgB,8BAH/C;AAIiBhB,IAAAA,CAAC,CAACiB,4BAJnB;;AAMD,GAnDgC;;AAqDjC;AACF;AACA;AACA;AACEC,EAAAA,YAzDiC,wBAyDpBlB,CAzDoB,EAyDV;AACrB,WAAOJ,GAAP;AACiBI,IAAAA,CAAC,CAACmB,sBADnB;;;AAIanB,IAAAA,CAAC,CAACoB,sBAJf;;AAMD,GAhEgC;;AAkEjCC,EAAAA,WAlEiC,uBAkErBrB,CAlEqB,EAkEX;AACpB,WAAOJ,GAAP;;;;;AAKkBI,IAAAA,CAAC,CAACoB,sBALpB;;;AAQD,GA3EgC;;AA6EjCE,EAAAA,YA7EiC,0BA6ElB;AACb,WAAO1B,GAAP;;;;;;;;;;;AAWD,GAzFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  headerMonth(t: Theme) {\n    return css`\n      display: inline-block;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  headerYear(t: Theme) {\n    return css`\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  month(t: Theme) {\n    const width = parseInt(t.calendarCellWidth) * 7;\n    return css`\n      position: absolute;\n      width: ${width}px;\n    `;\n  },\n\n  monthMobile() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  header() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  headerSticky(t: Theme) {\n    return css`\n      background-color: ${t.calendarMonthHeaderStickedBgColor};\n      z-index: 2;\n    `;\n  },\n\n  monthTitle(t: Theme) {\n    return css`\n      border-bottom: 1px solid ${t.calendarMonthTitleBorderBottomColor};\n      font-weight: ${t.dateSelectFontWeight};\n      margin: 0 ${t.calendarMonthTitleMarginX} ${t.calendarMonthTitleMarginBottom};\n      line-height: ${t.calendarMonthTitleLineHeight};\n    `;\n  },\n\n  /* Note: this could've been\n   * display: grid;\n   * grid-template-columns: repeat(7, minmax(0, 1fr));\n   */\n  monthDayGrid(t: Theme) {\n    return css`\n      line-height: ${t.calendarCellLineHeight};\n      display: flex;\n      flex-direction: column;\n      padding: ${t.calendarGridRowSpacing} 0px;\n    `;\n  },\n\n  monthDayRow(t: Theme) {\n    return css`\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ${t.calendarGridRowSpacing};\n      }\n    `;\n  },\n\n  nativeSelect() {\n    return css`\n      position: absolute;\n      top: -12px;\n      right: 0;\n      bottom: -8px;\n      left: 0;\n      cursor: pointer;\n      appearance: none;\n      opacity: 0;\n      border: none;\n    `;\n  },\n});\n"]}

package/components/Calendar/MonthView.styles.d.ts

@@ -3,8 +3,11 @@ export declare const styles: {
     headerMonth(t: Theme): string;
     headerYear(t: Theme): string;
     month(t: Theme): string;
+    monthMobile(): string;
     header(): string;
     headerSticky(t: Theme): string;
     monthTitle(t: Theme): string;
     monthDayGrid(t: Theme): string;
+    monthDayRow(t: Theme): string;
+    nativeSelect(): string;
 };

package/components/Calendar/MonthViewModel/MonthViewModel.js

@@ -1,4 +1,5 @@
 import { memo } from "../../../lib/memo";
+import { getMonthInHumanFormat } from "../CalendarUtils";
 import { themeConfig } from "../config";
 import { DayCellViewModel } from "../DayCellViewModel";
 
@@ -31,11 +32,12 @@ export var MonthViewModel = /*#__PURE__*/function () {
 
   _proto.getHeight = function getHeight(theme) {
     var _themeConfig = themeConfig(theme),
-        DAY_SIZE = _themeConfig.DAY_SIZE,
+        DAY_HEIGHT = _themeConfig.DAY_HEIGHT,
         MONTH_TITLE_OFFSET_HEIGHT = _themeConfig.MONTH_TITLE_OFFSET_HEIGHT,
-        MONTH_BOTTOM_MARGIN = _themeConfig.MONTH_BOTTOM_MARGIN;
+        MONTH_BOTTOM_MARGIN = _themeConfig.MONTH_BOTTOM_MARGIN,
+        CALENDAR_GRID_ROW_SPACING = _themeConfig.CALENDAR_GRID_ROW_SPACING;
 
-    return getMonthHeight(this.daysCount, this.offset, DAY_SIZE, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN);
+    return getMonthHeight(this.daysCount, this.offset, DAY_HEIGHT, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN, CALENDAR_GRID_ROW_SPACING);
   };
 
   function MonthViewModel(month, year) {
@@ -62,11 +64,12 @@ export var MonthViewModel = /*#__PURE__*/function () {
 MonthViewModel.create = memo(function (month, year) {
   return new MonthViewModel(month, year);
 });
-var getMonthHeight = memo(function (daysCount, offset, dayHeight, titleHeight, marginBottom) {
-  return Math.ceil((daysCount + offset) / 7) * dayHeight + titleHeight + marginBottom;
+var getMonthHeight = memo(function (daysCount, offset, dayHeight, titleHeight, marginBottom, rowSpacing) {
+  var weeks = Math.ceil((daysCount + offset) / 7);
+  return weeks * dayHeight + titleHeight + marginBottom + rowSpacing * 2 + rowSpacing * (weeks - 1);
 });
 var getMonthsDays = memo(function (month, year) {
-  return new Date(year, month + 1, 0).getDate();
+  return new Date(year, getMonthInHumanFormat(month), 0).getDate();
 });
 var getMonthOffset = memo(function (month, year) {
   var day = new Date(year, month, 1).getDay() - 1;

package/components/Calendar/MonthViewModel/MonthViewModel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MonthViewModel.ts"],"names":["memo","themeConfig","DayCellViewModel","getCurrentYear","month","year","Math","ceil","floor","getCurrentMonth","MonthViewModel","getHeight","theme","DAY_SIZE","MONTH_TITLE_OFFSET_HEIGHT","MONTH_BOTTOM_MARGIN","getMonthHeight","daysCount","offset","currentYear","currentMonth","getMonthsDays","getMonthOffset","isLastInYear","isFirstInYear","days","Array","from","length","_","i","isWeekend","create","dayHeight","titleHeight","marginBottom","Date","getDate","day","getDay"],"mappings":"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","sourcesContent":["import { memo } from '../../lib/memo';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { themeConfig } from './config';\nimport { DayCellViewModel } from './DayCellViewModel';\n\nconst getCurrentYear = (month: number, year: number) => {\n  if (month < 0) {\n    return year - Math.ceil(-month / 12);\n  }\n\n  if (month > 11) {\n    return year + Math.floor(month / 12);\n  }\n\n  return year;\n};\n\nconst getCurrentMonth = (month: number) => {\n  if (month < 0) {\n    return 12 + (month % 12);\n  }\n\n  if (month > 11) {\n    return month % 12;\n  }\n\n  return month;\n};\n\nexport class MonthViewModel {\n  public static create = memo((month: number, year: number): MonthViewModel => new MonthViewModel(month, year));\n\n  public readonly daysCount: number;\n\n  public readonly offset: number;\n\n  public readonly month: number;\n\n  public readonly year: number;\n\n  public readonly days: DayCellViewModel[];\n\n  // FIXME: shouldbe readonly\n  public isLastInYear: boolean;\n\n  // FIXME: shouldbe readonly\n  public isFirstInYear: boolean;\n\n  public getHeight(theme: Theme): number {\n    const { DAY_SIZE, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN } = themeConfig(theme);\n    return getMonthHeight(this.daysCount, this.offset, DAY_SIZE, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN);\n  }\n\n  private constructor(month: number, year: number) {\n    const currentYear = getCurrentYear(month, year);\n    const currentMonth = getCurrentMonth(month);\n\n    const daysCount = getMonthsDays(currentMonth, currentYear);\n    const offset = getMonthOffset(currentMonth, currentYear);\n    this.daysCount = daysCount;\n    this.offset = offset;\n    this.month = currentMonth;\n    this.year = currentYear;\n    this.isLastInYear = currentMonth === 11;\n    this.isFirstInYear = currentMonth === 0;\n    this.days = Array.from({ length: daysCount }, (_, i) => {\n      const isWeekend = (i + getMonthOffset(currentMonth, currentYear)) % 7 >= 5;\n      return DayCellViewModel.create(i + 1, currentMonth, currentYear, isWeekend);\n    });\n  }\n}\n\nconst getMonthHeight = memo(\n  (daysCount: number, offset: number, dayHeight: number, titleHeight: number, marginBottom: number) =>\n    Math.ceil((daysCount + offset) / 7) * dayHeight + titleHeight + marginBottom,\n);\nconst getMonthsDays = memo((month: number, year: number) => new Date(year, month + 1, 0).getDate());\n\nconst getMonthOffset = memo((month: number, year: number) => {\n  const day = new Date(year, month, 1).getDay() - 1;\n  if (day === -1) {\n    return 6;\n  }\n  return day;\n});\n"]}
+{"version":3,"sources":["MonthViewModel.ts"],"names":["memo","getMonthInHumanFormat","themeConfig","DayCellViewModel","getCurrentYear","month","year","Math","ceil","floor","getCurrentMonth","MonthViewModel","getHeight","theme","DAY_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","MONTH_BOTTOM_MARGIN","CALENDAR_GRID_ROW_SPACING","getMonthHeight","daysCount","offset","currentYear","currentMonth","getMonthsDays","getMonthOffset","isLastInYear","isFirstInYear","days","Array","from","length","_","i","isWeekend","create","dayHeight","titleHeight","marginBottom","rowSpacing","weeks","Date","getDate","day","getDay"],"mappings":"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","sourcesContent":["import { memo } from '../../lib/memo';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { getMonthInHumanFormat } from './CalendarUtils';\nimport { themeConfig } from './config';\nimport { DayCellViewModel } from './DayCellViewModel';\n\nconst getCurrentYear = (month: number, year: number) => {\n  if (month < 0) {\n    return year - Math.ceil(-month / 12);\n  }\n\n  if (month > 11) {\n    return year + Math.floor(month / 12);\n  }\n\n  return year;\n};\n\nconst getCurrentMonth = (month: number) => {\n  if (month < 0) {\n    return 12 + (month % 12);\n  }\n\n  if (month > 11) {\n    return month % 12;\n  }\n\n  return month;\n};\n\nexport class MonthViewModel {\n  public static create = memo((month: number, year: number): MonthViewModel => new MonthViewModel(month, year));\n\n  public readonly daysCount: number;\n\n  public readonly offset: number;\n\n  public readonly month: number;\n\n  public readonly year: number;\n\n  public readonly days: DayCellViewModel[];\n\n  // FIXME: shouldbe readonly\n  public isLastInYear: boolean;\n\n  // FIXME: shouldbe readonly\n  public isFirstInYear: boolean;\n\n  public getHeight(theme: Theme): number {\n    const { DAY_HEIGHT, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN, CALENDAR_GRID_ROW_SPACING } =\n      themeConfig(theme);\n    return getMonthHeight(\n      this.daysCount,\n      this.offset,\n      DAY_HEIGHT,\n      MONTH_TITLE_OFFSET_HEIGHT,\n      MONTH_BOTTOM_MARGIN,\n      CALENDAR_GRID_ROW_SPACING,\n    );\n  }\n\n  private constructor(month: number, year: number) {\n    const currentYear = getCurrentYear(month, year);\n    const currentMonth = getCurrentMonth(month);\n\n    const daysCount = getMonthsDays(currentMonth, currentYear);\n    const offset = getMonthOffset(currentMonth, currentYear);\n    this.daysCount = daysCount;\n    this.offset = offset;\n    this.month = currentMonth;\n    this.year = currentYear;\n    this.isLastInYear = currentMonth === 11;\n    this.isFirstInYear = currentMonth === 0;\n    this.days = Array.from({ length: daysCount }, (_, i) => {\n      const isWeekend = (i + getMonthOffset(currentMonth, currentYear)) % 7 >= 5;\n      return DayCellViewModel.create(i + 1, currentMonth, currentYear, isWeekend);\n    });\n  }\n}\n\nconst getMonthHeight = memo(\n  (\n    daysCount: number,\n    offset: number,\n    dayHeight: number,\n    titleHeight: number,\n    marginBottom: number,\n    rowSpacing: number,\n  ) => {\n    const weeks = Math.ceil((daysCount + offset) / 7);\n    return weeks * dayHeight + titleHeight + marginBottom + rowSpacing * 2 + rowSpacing * (weeks - 1);\n  },\n);\nconst getMonthsDays = memo((month: number, year: number) => new Date(year, getMonthInHumanFormat(month), 0).getDate());\n\nconst getMonthOffset = memo((month: number, year: number) => {\n  const day = new Date(year, month, 1).getDay() - 1;\n  if (day === -1) {\n    return 6;\n  }\n  return day;\n});\n"]}

package/components/Calendar/config/config.js

@@ -1,16 +1,18 @@
 import { memo } from "../../../lib/memo";
-var getConfig = memo(function (monthTitleLineHeight, monthTitlePaddingTop, monthTitlePaddingBottom, monthTitleMarginBottom, cellSize, wrapperHeight, monthMarginBottom, maxMonthsToAppendOnScroll) {
+var getConfig = memo(function (monthTitleLineHeight, monthTitlePaddingTop, monthTitlePaddingBottom, monthTitleMarginBottom, cellWidth, cellHeight, wrapperHeight, monthMarginBottom, maxMonthsToAppendOnScroll, calendarGridRowSpacing) {
   var monthTitleHeight = parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);
   return {
-    DAY_SIZE: parseInt(cellSize),
+    DAY_WIDTH: parseInt(cellWidth),
+    DAY_HEIGHT: parseInt(cellHeight),
     MONTH_TITLE_HEIGHT: monthTitleHeight,
     MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1,
     // + 1px separator line
     WRAPPER_HEIGHT: parseInt(wrapperHeight),
     MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),
-    MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll)
+    MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),
+    CALENDAR_GRID_ROW_SPACING: parseInt(calendarGridRowSpacing)
   };
 });
 export var themeConfig = function themeConfig(t) {
-  return getConfig(t.calendarMonthTitleLineHeight, t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom, t.calendarMonthTitleMarginBottom, t.calendarCellSize, t.calendarWrapperHeight, t.calendarMonthMarginBottom, t.calendarMaxMonthsToAppendOnScroll);
+  return getConfig(t.calendarMonthTitleLineHeight, t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom, t.calendarMonthTitleMarginBottom, t.calendarCellWidth, t.calendarCellHeight, t.calendarWrapperHeight, t.calendarMonthMarginBottom, t.calendarMaxMonthsToAppendOnScroll, t.calendarGridRowSpacing);
 };

package/components/Calendar/config/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["config.ts"],"names":["memo","getConfig","monthTitleLineHeight","monthTitlePaddingTop","monthTitlePaddingBottom","monthTitleMarginBottom","cellSize","wrapperHeight","monthMarginBottom","maxMonthsToAppendOnScroll","monthTitleHeight","parseInt","DAY_SIZE","MONTH_TITLE_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","WRAPPER_HEIGHT","MONTH_BOTTOM_MARGIN","MAX_MONTHS_TO_APPEND_ON_SCROLL","themeConfig","t","calendarMonthTitleLineHeight","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","calendarMonthTitleMarginBottom","calendarCellSize","calendarWrapperHeight","calendarMonthMarginBottom","calendarMaxMonthsToAppendOnScroll"],"mappings":";AACA,SAASA,IAAT,QAAqB,gBAArB;;AAEA,IAAMC,SAAS,GAAGD,IAAI;AACpB;AACEE,oBADF;AAEEC,oBAFF;AAGEC,uBAHF;AAIEC,sBAJF;AAKEC,QALF;AAMEC,aANF;AAOEC,iBAPF;AAQEC,yBARF;AASK;AACH,MAAMC,gBAAgB;AACpBC,EAAAA,QAAQ,CAACT,oBAAD,CAAR,GAAiCS,QAAQ,CAACR,oBAAD,CAAzC,GAAkEQ,QAAQ,CAACP,uBAAD,CAD5E;AAEA,SAAO;AACLQ,IAAAA,QAAQ,EAAED,QAAQ,CAACL,QAAD,CADb;AAELO,IAAAA,kBAAkB,EAAEH,gBAFf;AAGLI,IAAAA,yBAAyB,EAAEJ,gBAAgB,GAAGC,QAAQ,CAACN,sBAAD,CAA3B,GAAsD,CAH5E,EAG+E;AACpFU,IAAAA,cAAc,EAAEJ,QAAQ,CAACJ,aAAD,CAJnB;AAKLS,IAAAA,mBAAmB,EAAEL,QAAQ,CAACH,iBAAD,CALxB;AAMLS,IAAAA,8BAA8B,EAAEN,QAAQ,CAACF,yBAAD,CANnC,EAAP;;AAQD,CArBmB,CAAtB;;;AAwBA,OAAO,IAAMS,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD;AACzBlB,IAAAA,SAAS;AACPkB,IAAAA,CAAC,CAACC,4BADK;AAEPD,IAAAA,CAAC,CAACE,4BAFK;AAGPF,IAAAA,CAAC,CAACG,+BAHK;AAIPH,IAAAA,CAAC,CAACI,8BAJK;AAKPJ,IAAAA,CAAC,CAACK,gBALK;AAMPL,IAAAA,CAAC,CAACM,qBANK;AAOPN,IAAAA,CAAC,CAACO,yBAPK;AAQPP,IAAAA,CAAC,CAACQ,iCARK,CADgB,GAApB","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { memo } from '../../lib/memo';\n\nconst getConfig = memo(\n  (\n    monthTitleLineHeight: string,\n    monthTitlePaddingTop: string,\n    monthTitlePaddingBottom: string,\n    monthTitleMarginBottom: string,\n    cellSize: string,\n    wrapperHeight: string,\n    monthMarginBottom: string,\n    maxMonthsToAppendOnScroll: string,\n  ) => {\n    const monthTitleHeight =\n      parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);\n    return {\n      DAY_SIZE: parseInt(cellSize),\n      MONTH_TITLE_HEIGHT: monthTitleHeight,\n      MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line\n      WRAPPER_HEIGHT: parseInt(wrapperHeight),\n      MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),\n      MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),\n    };\n  },\n);\n\nexport const themeConfig = (t: Theme) =>\n  getConfig(\n    t.calendarMonthTitleLineHeight,\n    t.calendarMonthTitlePaddingTop,\n    t.calendarMonthTitlePaddingBottom,\n    t.calendarMonthTitleMarginBottom,\n    t.calendarCellSize,\n    t.calendarWrapperHeight,\n    t.calendarMonthMarginBottom,\n    t.calendarMaxMonthsToAppendOnScroll,\n  );\n"]}
+{"version":3,"sources":["config.ts"],"names":["memo","getConfig","monthTitleLineHeight","monthTitlePaddingTop","monthTitlePaddingBottom","monthTitleMarginBottom","cellWidth","cellHeight","wrapperHeight","monthMarginBottom","maxMonthsToAppendOnScroll","calendarGridRowSpacing","monthTitleHeight","parseInt","DAY_WIDTH","DAY_HEIGHT","MONTH_TITLE_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","WRAPPER_HEIGHT","MONTH_BOTTOM_MARGIN","MAX_MONTHS_TO_APPEND_ON_SCROLL","CALENDAR_GRID_ROW_SPACING","themeConfig","t","calendarMonthTitleLineHeight","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","calendarMonthTitleMarginBottom","calendarCellWidth","calendarCellHeight","calendarWrapperHeight","calendarMonthMarginBottom","calendarMaxMonthsToAppendOnScroll"],"mappings":";AACA,SAASA,IAAT,QAAqB,gBAArB;;AAEA,IAAMC,SAAS,GAAGD,IAAI;AACpB;AACEE,oBADF;AAEEC,oBAFF;AAGEC,uBAHF;AAIEC,sBAJF;AAKEC,SALF;AAMEC,UANF;AAOEC,aAPF;AAQEC,iBARF;AASEC,yBATF;AAUEC,sBAVF;AAWK;AACH,MAAMC,gBAAgB;AACpBC,EAAAA,QAAQ,CAACX,oBAAD,CAAR,GAAiCW,QAAQ,CAACV,oBAAD,CAAzC,GAAkEU,QAAQ,CAACT,uBAAD,CAD5E;AAEA,SAAO;AACLU,IAAAA,SAAS,EAAED,QAAQ,CAACP,SAAD,CADd;AAELS,IAAAA,UAAU,EAAEF,QAAQ,CAACN,UAAD,CAFf;AAGLS,IAAAA,kBAAkB,EAAEJ,gBAHf;AAILK,IAAAA,yBAAyB,EAAEL,gBAAgB,GAAGC,QAAQ,CAACR,sBAAD,CAA3B,GAAsD,CAJ5E,EAI+E;AACpFa,IAAAA,cAAc,EAAEL,QAAQ,CAACL,aAAD,CALnB;AAMLW,IAAAA,mBAAmB,EAAEN,QAAQ,CAACJ,iBAAD,CANxB;AAOLW,IAAAA,8BAA8B,EAAEP,QAAQ,CAACH,yBAAD,CAPnC;AAQLW,IAAAA,yBAAyB,EAAER,QAAQ,CAACF,sBAAD,CAR9B,EAAP;;AAUD,CAzBmB,CAAtB;;;AA4BA,OAAO,IAAMW,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD;AACzBtB,IAAAA,SAAS;AACPsB,IAAAA,CAAC,CAACC,4BADK;AAEPD,IAAAA,CAAC,CAACE,4BAFK;AAGPF,IAAAA,CAAC,CAACG,+BAHK;AAIPH,IAAAA,CAAC,CAACI,8BAJK;AAKPJ,IAAAA,CAAC,CAACK,iBALK;AAMPL,IAAAA,CAAC,CAACM,kBANK;AAOPN,IAAAA,CAAC,CAACO,qBAPK;AAQPP,IAAAA,CAAC,CAACQ,yBARK;AASPR,IAAAA,CAAC,CAACS,iCATK;AAUPT,IAAAA,CAAC,CAACZ,sBAVK,CADgB,GAApB","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { memo } from '../../lib/memo';\n\nconst getConfig = memo(\n  (\n    monthTitleLineHeight: string,\n    monthTitlePaddingTop: string,\n    monthTitlePaddingBottom: string,\n    monthTitleMarginBottom: string,\n    cellWidth: string,\n    cellHeight: string,\n    wrapperHeight: string,\n    monthMarginBottom: string,\n    maxMonthsToAppendOnScroll: string,\n    calendarGridRowSpacing: string,\n  ) => {\n    const monthTitleHeight =\n      parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);\n    return {\n      DAY_WIDTH: parseInt(cellWidth),\n      DAY_HEIGHT: parseInt(cellHeight),\n      MONTH_TITLE_HEIGHT: monthTitleHeight,\n      MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line\n      WRAPPER_HEIGHT: parseInt(wrapperHeight),\n      MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),\n      MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),\n      CALENDAR_GRID_ROW_SPACING: parseInt(calendarGridRowSpacing),\n    };\n  },\n);\n\nexport const themeConfig = (t: Theme) =>\n  getConfig(\n    t.calendarMonthTitleLineHeight,\n    t.calendarMonthTitlePaddingTop,\n    t.calendarMonthTitlePaddingBottom,\n    t.calendarMonthTitleMarginBottom,\n    t.calendarCellWidth,\n    t.calendarCellHeight,\n    t.calendarWrapperHeight,\n    t.calendarMonthMarginBottom,\n    t.calendarMaxMonthsToAppendOnScroll,\n    t.calendarGridRowSpacing,\n  );\n"]}

package/components/Calendar/index/index.js

@@ -1,2 +1,3 @@
 export * from "../Calendar";
+export * from "../CalendarDay";
 export * from "../CalendarDateShape";

package/components/Calendar/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './Calendar';\nexport * from './CalendarDateShape';\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './Calendar';\nexport * from './CalendarDay';\nexport * from './CalendarDateShape';\n"]}

package/components/Calendar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Calendar';
+export * from './CalendarDay';
 export * from './CalendarDateShape';

package/components/Calendar/locale/locales/en/en.js

@@ -1,3 +1,4 @@
 export var componentsLocales = {
-  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  dayCellChooseDateAriaLabel: 'Choose date'
 };

package/components/Calendar/locale/locales/en/en.js.map

@@ -1 +1 @@
-{"version":3,"sources":["en.ts"],"names":["componentsLocales","months"],"mappings":";;AAEA,OAAO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,MAAM,EAAE;AACN,WADM;AAEN,YAFM;AAGN,SAHM;AAIN,SAJM;AAKN,OALM;AAMN,QANM;AAON,QAPM;AAQN,UARM;AASN,aATM;AAUN,WAVM;AAWN,YAXM;AAYN,YAZM,CADuC,EAA1C","sourcesContent":["import { CalendarLocale } from '../types';\n\nexport const componentsLocales: CalendarLocale = {\n  months: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n};\n"]}
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","months","dayCellChooseDateAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,MAAM,EAAE;AACN,WADM;AAEN,YAFM;AAGN,SAHM;AAIN,SAJM;AAKN,OALM;AAMN,QANM;AAON,QAPM;AAQN,UARM;AASN,aATM;AAUN,WAVM;AAWN,YAXM;AAYN,YAZM,CADuC;;AAe/CC,EAAAA,0BAA0B,EAAE,aAfmB,EAA1C","sourcesContent":["import { CalendarLocale } from '../types';\n\nexport const componentsLocales: CalendarLocale = {\n  months: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  dayCellChooseDateAriaLabel: 'Choose date',\n};\n"]}

package/components/Calendar/locale/locales/ru/ru.js

@@ -1,3 +1,4 @@
 export var componentsLocales = {
-  months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
+  months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+  dayCellChooseDateAriaLabel: 'Выбрать дату'
 };

package/components/Calendar/locale/locales/ru/ru.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ru.ts"],"names":["componentsLocales","months"],"mappings":";;AAEA,OAAO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,MAAM,EAAE;AACN,UADM;AAEN,WAFM;AAGN,QAHM;AAIN,UAJM;AAKN,OALM;AAMN,QANM;AAON,QAPM;AAQN,UARM;AASN,YATM;AAUN,WAVM;AAWN,UAXM;AAYN,WAZM,CADuC,EAA1C","sourcesContent":["import { CalendarLocale } from '../types';\n\nexport const componentsLocales: CalendarLocale = {\n  months: [\n    'Январь',\n    'Февраль',\n    'Март',\n    'Апрель',\n    'Май',\n    'Июнь',\n    'Июль',\n    'Август',\n    'Сентябрь',\n    'Октябрь',\n    'Ноябрь',\n    'Декабрь',\n  ],\n};\n"]}
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","months","dayCellChooseDateAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,MAAM,EAAE;AACN,UADM;AAEN,WAFM;AAGN,QAHM;AAIN,UAJM;AAKN,OALM;AAMN,QANM;AAON,QAPM;AAQN,UARM;AASN,YATM;AAUN,WAVM;AAWN,UAXM;AAYN,WAZM,CADuC;;AAe/CC,EAAAA,0BAA0B,EAAE,cAfmB,EAA1C","sourcesContent":["import { CalendarLocale } from '../types';\n\nexport const componentsLocales: CalendarLocale = {\n  months: [\n    'Январь',\n    'Февраль',\n    'Март',\n    'Апрель',\n    'Май',\n    'Июнь',\n    'Июль',\n    'Август',\n    'Сентябрь',\n    'Октябрь',\n    'Ноябрь',\n    'Декабрь',\n  ],\n  dayCellChooseDateAriaLabel: 'Выбрать дату',\n};\n"]}

package/components/Calendar/locale/types.d.ts

@@ -1,3 +1,7 @@
 export interface CalendarLocale {
     months?: string[];
+    selectMonthAriaLabel?: string;
+    selectYearAriaLabel?: string;
+    selectChosenAriaLabel?: string;
+    dayCellChooseDateAriaLabel?: string;
 }

package/components/Center/Center/Center.js

@@ -60,6 +60,6 @@ var Center = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
   };
 
   return Center;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Center', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Center', _class2.displayName = 'Center', _class2.defaultProps = {
   align: 'center'
 }, _temp)) || _class;

package/components/Center/Center/Center.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Center.tsx"],"names":["React","CommonWrapper","cx","rootNode","createPropsGetter","styles","CenterDataTids","root","Center","getProps","defaultProps","renderMain","props","align","rest","rootAlignLeft","rootAlignRight","spring","container","children","render","setRootNode","Component","__KONTUR_REACT_UI__"],"mappings":"yRAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAoD,6BAApD;;AAEA,SAASC,MAAT,QAAuB,iBAAvB;;;;;;;;;;;;;;;;;;AAkBA,OAAO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB,EAAvB;;;;;;;;;;AAWP,OAJA;AACA;AACA,GAEA,IAAaC,MAAb,GADCL,QACD;;;;AAMUM,IAAAA,QANV,GAMqBL,iBAAiB,CAACI,MAAM,CAACE,YAAR,CANtC;;;;;;;;;;;AAiBUC,IAAAA,UAjBV,GAiBuB,UAACC,KAAD,EAA2D;AAC9E,UAAQC,KAAR,GAA2BD,KAA3B,CAAQC,KAAR,CAAkBC,IAAlB,iCAA2BF,KAA3B;;AAEA;AACE;AACE,sBAAUN,cAAc,CAACC,IAD3B;AAEMO,QAAAA,IAFN;AAGE,UAAA,SAAS,EAAEZ,EAAE;AACVG,UAAAA,MAAM,CAACE,IAAP,EADU,IACM,IADN;AAEVF,UAAAA,MAAM,CAACU,aAAP,EAFU,IAEeF,KAAK,KAAK,MAFzB;AAGVR,UAAAA,MAAM,CAACW,cAAP,EAHU,IAGgBH,KAAK,KAAK,OAH1B,OAHf;;;AASE,sCAAM,SAAS,EAAER,MAAM,CAACY,MAAP,EAAjB,GATF;AAUE,sCAAM,SAAS,EAAEZ,MAAM,CAACa,SAAP,EAAjB,IAAsC,MAAKN,KAAL,CAAWO,QAAjD,CAVF,CADF;;;AAcD,KAlCH,oDAUSC,MAVT,GAUE,kBAAgB,CACd,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKZ,QAAL,EAAlD,GACG,KAAKE,UADR,CADF,CAKD,CAhBH,iBAA4BX,KAAK,CAACsB,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAGgBb,YAHhB,GAG6C,EACzCG,KAAK,EAAE,QADkC,EAH7C","sourcesContent":["import React from 'react';\n\nimport { Override } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\n\nimport { styles } from './Center.styles';\n\nexport type HorizontalAlign = 'left' | 'center' | 'right';\n\nexport interface CenterProps\n  extends CommonProps,\n    Override<\n      React.HTMLAttributes<HTMLDivElement>,\n      {\n        /**\n         * Определяет, как контент будет выровнен по горизонтали.\n         *\n         * **Допустимые значения**: `\"left\"`, `\"center\"`, `\"right\"`.\n         */\n        align?: HorizontalAlign;\n      }\n    > {}\n\nexport const CenterDataTids = {\n  root: 'Center__root',\n} as const;\n\ntype DefaultProps = Required<Pick<CenterProps, 'align'>>;\ntype DefaultizedCenterProps = DefaultizedProps<CenterProps, DefaultProps>;\n\n/**\n * Контейнер, который центрирует элементы внутри себя.\n */\n@rootNode\nexport class Center extends React.Component<CenterProps> {\n  public static __KONTUR_REACT_UI__ = 'Center';\n\n  public static defaultProps: DefaultProps = {\n    align: 'center',\n  };\n  private getProps = createPropsGetter(Center.defaultProps);\n\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n        {this.renderMain}\n      </CommonWrapper>\n    );\n  }\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedCenterProps>) => {\n    const { align, ...rest } = props;\n\n    return (\n      <div\n        data-tid={CenterDataTids.root}\n        {...rest}\n        className={cx({\n          [styles.root()]: true,\n          [styles.rootAlignLeft()]: align === 'left',\n          [styles.rootAlignRight()]: align === 'right',\n        })}\n      >\n        <span className={styles.spring()} />\n        <span className={styles.container()}>{this.props.children}</span>\n      </div>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["Center.tsx"],"names":["React","CommonWrapper","cx","rootNode","createPropsGetter","styles","CenterDataTids","root","Center","getProps","defaultProps","renderMain","props","align","rest","rootAlignLeft","rootAlignRight","spring","container","children","render","setRootNode","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"yRAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAoD,6BAApD;;AAEA,SAASC,MAAT,QAAuB,iBAAvB;;;;;;;;;;;;;;;;;;AAkBA,OAAO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB,EAAvB;;;;;;;;;;AAWP,OAJA;AACA;AACA,GAEA,IAAaC,MAAb,GADCL,QACD;;;;;AAOUM,IAAAA,QAPV,GAOqBL,iBAAiB,CAACI,MAAM,CAACE,YAAR,CAPtC;;;;;;;;;;;AAkBUC,IAAAA,UAlBV,GAkBuB,UAACC,KAAD,EAA2D;AAC9E,UAAQC,KAAR,GAA2BD,KAA3B,CAAQC,KAAR,CAAkBC,IAAlB,iCAA2BF,KAA3B;;AAEA;AACE;AACE,sBAAUN,cAAc,CAACC,IAD3B;AAEMO,QAAAA,IAFN;AAGE,UAAA,SAAS,EAAEZ,EAAE;AACVG,UAAAA,MAAM,CAACE,IAAP,EADU,IACM,IADN;AAEVF,UAAAA,MAAM,CAACU,aAAP,EAFU,IAEeF,KAAK,KAAK,MAFzB;AAGVR,UAAAA,MAAM,CAACW,cAAP,EAHU,IAGgBH,KAAK,KAAK,OAH1B,OAHf;;;AASE,sCAAM,SAAS,EAAER,MAAM,CAACY,MAAP,EAAjB,GATF;AAUE,sCAAM,SAAS,EAAEZ,MAAM,CAACa,SAAP,EAAjB,IAAsC,MAAKN,KAAL,CAAWO,QAAjD,CAVF,CADF;;;AAcD,KAnCH,oDAWSC,MAXT,GAWE,kBAAgB,CACd,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKZ,QAAL,EAAlD,GACG,KAAKE,UADR,CADF,CAKD,CAjBH,iBAA4BX,KAAK,CAACsB,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAEgBC,WAFhB,GAE8B,QAF9B,UAIgBd,YAJhB,GAI6C,EACzCG,KAAK,EAAE,QADkC,EAJ7C","sourcesContent":["import React from 'react';\n\nimport { Override } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\n\nimport { styles } from './Center.styles';\n\nexport type HorizontalAlign = 'left' | 'center' | 'right';\n\nexport interface CenterProps\n  extends CommonProps,\n    Override<\n      React.HTMLAttributes<HTMLDivElement>,\n      {\n        /**\n         * Определяет, как контент будет выровнен по горизонтали.\n         *\n         * **Допустимые значения**: `\"left\"`, `\"center\"`, `\"right\"`.\n         */\n        align?: HorizontalAlign;\n      }\n    > {}\n\nexport const CenterDataTids = {\n  root: 'Center__root',\n} as const;\n\ntype DefaultProps = Required<Pick<CenterProps, 'align'>>;\ntype DefaultizedCenterProps = DefaultizedProps<CenterProps, DefaultProps>;\n\n/**\n * Контейнер, который центрирует элементы внутри себя.\n */\n@rootNode\nexport class Center extends React.Component<CenterProps> {\n  public static __KONTUR_REACT_UI__ = 'Center';\n  public static displayName = 'Center';\n\n  public static defaultProps: DefaultProps = {\n    align: 'center',\n  };\n  private getProps = createPropsGetter(Center.defaultProps);\n\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n        {this.renderMain}\n      </CommonWrapper>\n    );\n  }\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedCenterProps>) => {\n    const { align, ...rest } = props;\n\n    return (\n      <div\n        data-tid={CenterDataTids.root}\n        {...rest}\n        className={cx({\n          [styles.root()]: true,\n          [styles.rootAlignLeft()]: align === 'left',\n          [styles.rootAlignRight()]: align === 'right',\n        })}\n      >\n        <span className={styles.spring()} />\n        <span className={styles.container()}>{this.props.children}</span>\n      </div>\n    );\n  };\n}\n"]}

package/components/Center/Center.d.ts

@@ -20,6 +20,7 @@ declare type DefaultProps = Required<Pick<CenterProps, 'align'>>;
  */
 export declare class Center extends React.Component<CenterProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
     private setRootNode;