@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-5e1c3.0

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

@@ -1,6 +1,6 @@
-/** Правила — в `Calendar.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    wrapper: string;
-    separator: string;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(t: Theme): string;
+    wrapper(): string;
+    separator(t: Theme): string;
 }>;

package/components/Calendar/Calendar.styles.js

@@ -1,8 +1,22 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `Calendar.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    root: 'react-ui-Calendar-root',
-    wrapper: 'react-ui-Calendar-wrapper',
-    separator: 'react-ui-Calendar-separator',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function (t) {
+            var width = parseInt(t.calendarCellWidth) * 7;
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      box-sizing: content-box;\n      border-radius: ", ";\n      color: ", ";\n      display: block;\n      padding: 0 ", ";\n      width: ", "px;\n      touch-action: none;\n    "], ["\n      background: ", ";\n      box-sizing: content-box;\n      border-radius: ", ";\n      color: ", ";\n      display: block;\n      padding: 0 ", ";\n      width: ", "px;\n      touch-action: none;\n    "])), t.calendarBg, t.calendarBorderRadius, t.textColorDefault, t.calendarPaddingX, width);
+        },
+        wrapper: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-size: 14px;\n      position: relative;\n      overflow: hidden;\n    "], ["\n      font-size: 14px;\n      position: relative;\n      overflow: hidden;\n    "])));
+        },
+        separator: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-bottom: ", ";\n      margin: 0 ", ";\n    "], ["\n      border-bottom: ", ";\n      margin: 0 ", ";\n    "])), t.calendarBottomSeparatorBorder, t.calendarMonthTitleMarginX);
+        },
+    });
 });
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=Calendar.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.js","sourceRoot":"","sources":["Calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,8DAA8D;AAC9D,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,2BAA2B;IACpC,SAAS,EAAE,6BAA6B;CACzC,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `Calendar.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-Calendar-root',\n  wrapper: 'react-ui-Calendar-wrapper',\n  separator: 'react-ui-Calendar-separator',\n});\n"]}
+{"version":3,"file":"Calendar.styles.js","sourceRoot":"","sources":["Calendar.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,IAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAChD,OAAO,GAAG,oRAAA,sBACM,EAAY,0DAET,EAAsB,kBAC9B,EAAkB,6CAEd,EAAkB,kBACtB,EAAK,sCAEf,KARe,CAAC,CAAC,UAAU,EAET,CAAC,CAAC,oBAAoB,EAC9B,CAAC,CAAC,gBAAgB,EAEd,CAAC,CAAC,gBAAgB,EACtB,KAAK,EAEd;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uJAAA,oFAIT,KAAC;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,8HAAA,yBACS,EAA+B,qBACpC,EAA2B,SACxC,KAFkB,CAAC,CAAC,6BAA6B,EACpC,CAAC,CAAC,yBAAyB,EACvC;QACJ,CAAC;KACF,CAAC;AA7B8D,CA6B9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    const width = parseInt(t.calendarCellWidth) * 7;\n    return css`\n      background: ${t.calendarBg};\n      box-sizing: content-box;\n      border-radius: ${t.calendarBorderRadius};\n      color: ${t.textColorDefault};\n      display: block;\n      padding: 0 ${t.calendarPaddingX};\n      width: ${width}px;\n      touch-action: none;\n    `;\n  },\n\n  wrapper() {\n    return css`\n      font-size: 14px;\n      position: relative;\n      overflow: hidden;\n    `;\n  },\n\n  separator(t: Theme) {\n    return css`\n      border-bottom: ${t.calendarBottomSeparatorBorder};\n      margin: 0 ${t.calendarMonthTitleMarginX};\n    `;\n  },\n}));\n"]}

package/components/Calendar/CalendarDay.js

@@ -26,8 +26,7 @@ import { InternalDate } from '../../lib/date/InternalDate.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
 import { LocaleContext } from '../../lib/locale/index.js';
 import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';
 import { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';
@@ -42,6 +41,7 @@ export var CalendarDay = memo(forwardRefAndName('CalendarDay', function Calendar
     var _b, _c;
     var isToday = _a.isToday, isSelected = _a.isSelected, isDisabled = _a.isDisabled, isWeekend = _a.isWeekend, date = _a.date, onDayClick = _a.onDayClick, onClick = _a.onClick, children = _a.children, className = _a.className, rest = __rest(_a, ["isToday", "isSelected", "isDisabled", "isWeekend", "date", "onDayClick", "onClick", "children", "className"]);
     var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var themeGTE6_1 = isThemeGTE(theme, '6.1');
     var langCode = useContext(LocaleContext).langCode;
@@ -55,15 +55,11 @@ export var CalendarDay = memo(forwardRefAndName('CalendarDay', function Calendar
     var day = internalDate.getComponentsLikeNumber().date;
     var caption = children !== null && children !== void 0 ? children : day;
     return (React.createElement("button", __assign({ ref: ref, "data-tid": CalendarDataTids.dayCell, "aria-label": ariaLabel, tabIndex: -1, disabled: isDisabled, onClick: handleClick, className: cx((_b = {},
-            _b[styles.day()] = true,
-            // Пустой токен отключает объявление целиком — см. пояснение в
-            // DayCellView.styles.ts. Решение по значению остаётся в JS.
-            _b[styles.dayHoverColor()] = Boolean(theme.calendarCellHoverColor),
-            _b[styles.dayActiveHoverColor()] = Boolean(theme.calendarCellActiveHoverColor),
-            _b[styles.weekend()] = isWeekend,
-            _b[styles.selected()] = isSelected,
-            _b[styles.selected6_1()] = isSelected && themeGTE6_1,
+            _b[styles.day(theme)] = true,
+            _b[styles.weekend(theme)] = isWeekend,
+            _b[styles.selected(theme)] = isSelected,
+            _b[styles.selected6_1(theme)] = isSelected && themeGTE6_1,
             _b), className) }, getVisualStateDataAttributes({ selected: isSelected }), rest),
-        React.createElement("span", { className: cx((_c = {}, _c[styles.todayCaption()] = isToday, _c)) }, caption)));
+        React.createElement("span", { className: cx((_c = {}, _c[styles.todayCaption(theme)] = isToday, _c)) }, caption)));
 }));
 //# sourceMappingURL=CalendarDay.js.map

package/components/Calendar/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.js","sourceRoot":"","sources":["CalendarDay.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useCallback, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { InternalDate } from '../../lib/date/InternalDate.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { LocaleContext } from '../../lib/locale/index.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';\nimport { getStyles } from './DayCellView.styles.js';\nimport { CalendarDataTids } from './tids.js';\n\nexport interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /** Устанавливает, является ли день текущим. */\n  isToday?: boolean;\n\n  /** Устанавливает, является ли день выбранным. */\n  isSelected?: boolean;\n\n  /** Устанавливает, является ли день недоступным. */\n  isDisabled?: boolean;\n\n  /** Устанавливает, является ли день выходным. */\n  isWeekend?: boolean;\n\n  /** Задаёт день. */\n  date: string;\n\n  /** Событие нажатия на день. Необходима для внутренней работы [календаря](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_date-components-calendar--docs). Не предназначена для переопределения. Вместо этого, следует использовать стандартный `onClick`.\n   * @internal @ignore\n   */\n  onDayClick: () => void;\n}\n\n/**\n * Компонент дня из [блока календаря](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_date-components-calendar--docs).\n *\n * @visibleName Calendar.Day\n */\nexport const CalendarDay = memo(\n  forwardRefAndName(\n    'CalendarDay',\n    function CalendarDay(\n      {\n        isToday,\n        isSelected,\n        isDisabled,\n        isWeekend,\n        date,\n        onDayClick,\n        onClick,\n        children,\n        className,\n        ...rest\n      }: PropsWithChildren<CalendarDayProps>,\n      ref: React.Ref<HTMLButtonElement>,\n    ) {\n      const theme = useContext(ThemeContext);\n      const styles = useStyles(getStyles);\n      const themeGTE6_1 = isThemeGTE(theme, '6.1');\n\n      const { langCode } = useContext(LocaleContext);\n      const internalDate = new InternalDate({ langCode, value: date });\n\n      const locale = useLocaleForControl('Calendar', DatePickerLocaleHelper);\n      const ariaLabel = `${locale.dayCellChooseDateAriaLabel}: ${internalDate.toA11YFormat()}`;\n\n      const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n        (e) => {\n          onDayClick();\n          onClick?.(e);\n        },\n        [onDayClick, onClick],\n      );\n\n      const { date: day } = internalDate.getComponentsLikeNumber();\n      const caption = children ?? day;\n\n      return (\n        <button\n          ref={ref}\n          data-tid={CalendarDataTids.dayCell}\n          aria-label={ariaLabel}\n          tabIndex={-1}\n          disabled={isDisabled}\n          onClick={handleClick}\n          className={cx(\n            {\n              [styles.day()]: true,\n              // Пустой токен отключает объявление целиком — см. пояснение в\n              // DayCellView.styles.ts. Решение по значению остаётся в JS.\n              [styles.dayHoverColor()]: Boolean(theme.calendarCellHoverColor),\n              [styles.dayActiveHoverColor()]: Boolean(theme.calendarCellActiveHoverColor),\n              [styles.weekend()]: isWeekend,\n              [styles.selected()]: isSelected,\n              [styles.selected6_1()]: isSelected && themeGTE6_1,\n            },\n            className,\n          )}\n          {...getVisualStateDataAttributes({ selected: isSelected })}\n          {...rest}\n        >\n          <span className={cx({ [styles.todayCaption()]: isToday })}>{caption}</span>\n        </button>\n      );\n    },\n  ),\n);\n"]}
+{"version":3,"file":"CalendarDay.js","sourceRoot":"","sources":["CalendarDay.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useCallback, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { InternalDate } from '../../lib/date/InternalDate.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { LocaleContext } from '../../lib/locale/index.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';\nimport { getStyles } from './DayCellView.styles.js';\nimport { CalendarDataTids } from './tids.js';\n\nexport interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /** Устанавливает, является ли день текущим. */\n  isToday?: boolean;\n\n  /** Устанавливает, является ли день выбранным. */\n  isSelected?: boolean;\n\n  /** Устанавливает, является ли день недоступным. */\n  isDisabled?: boolean;\n\n  /** Устанавливает, является ли день выходным. */\n  isWeekend?: boolean;\n\n  /** Задаёт день. */\n  date: string;\n\n  /** Событие нажатия на день. Необходима для внутренней работы [календаря](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_date-components-calendar--docs). Не предназначена для переопределения. Вместо этого, следует использовать стандартный `onClick`.\n   * @internal @ignore\n   */\n  onDayClick: () => void;\n}\n\n/**\n * Компонент дня из [блока календаря](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_date-components-calendar--docs).\n *\n * @visibleName Calendar.Day\n */\nexport const CalendarDay = memo(\n  forwardRefAndName(\n    'CalendarDay',\n    function CalendarDay(\n      {\n        isToday,\n        isSelected,\n        isDisabled,\n        isWeekend,\n        date,\n        onDayClick,\n        onClick,\n        children,\n        className,\n        ...rest\n      }: PropsWithChildren<CalendarDayProps>,\n      ref: React.Ref<HTMLButtonElement>,\n    ) {\n      const theme = useContext(ThemeContext);\n      const { cx } = useEmotion();\n      const styles = useStyles(getStyles);\n      const themeGTE6_1 = isThemeGTE(theme, '6.1');\n\n      const { langCode } = useContext(LocaleContext);\n      const internalDate = new InternalDate({ langCode, value: date });\n\n      const locale = useLocaleForControl('Calendar', DatePickerLocaleHelper);\n      const ariaLabel = `${locale.dayCellChooseDateAriaLabel}: ${internalDate.toA11YFormat()}`;\n\n      const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n        (e) => {\n          onDayClick();\n          onClick?.(e);\n        },\n        [onDayClick, onClick],\n      );\n\n      const { date: day } = internalDate.getComponentsLikeNumber();\n      const caption = children ?? day;\n\n      return (\n        <button\n          ref={ref}\n          data-tid={CalendarDataTids.dayCell}\n          aria-label={ariaLabel}\n          tabIndex={-1}\n          disabled={isDisabled}\n          onClick={handleClick}\n          className={cx(\n            {\n              [styles.day(theme)]: true,\n              [styles.weekend(theme)]: isWeekend,\n              [styles.selected(theme)]: isSelected,\n              [styles.selected6_1(theme)]: isSelected && themeGTE6_1,\n            },\n            className,\n          )}\n          {...getVisualStateDataAttributes({ selected: isSelected })}\n          {...rest}\n        >\n          <span className={cx({ [styles.todayCaption(theme)]: isToday })}>{caption}</span>\n        </button>\n      );\n    },\n  ),\n);\n"]}

package/components/Calendar/DayCellView.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React, { useCallback, useContext } from 'react';
 import { InternalDateTransformer } from '../../lib/date/InternalDateTransformer.js';
 import { useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { CalendarContext } from './CalendarContext.js';
 import * as CDS from './CalendarDateShape.js';
 import { CalendarDay } from './CalendarDay.js';
@@ -21,6 +22,7 @@ export var DayCellView = function (props) {
     var date = props.date;
     var _c = useContext(CalendarContext), value = _c.value, minDate = _c.minDate, maxDate = _c.maxDate, isHoliday = _c.isHoliday, renderDay = _c.renderDay, today = _c.today, onDateClick = _c.onDateClick;
     var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var isDisabled = !CDS.isBetween(date, minDate, maxDate);
     var humanDateString = InternalDateTransformer.dateToHumanString(date);
     var dayClickHandler = useCallback(function () {
@@ -35,6 +37,6 @@ export var DayCellView = function (props) {
         onDayClick: dayClickHandler,
     };
     var dayElement = (_b = renderDay === null || renderDay === void 0 ? void 0 : renderDay(dayProps)) !== null && _b !== void 0 ? _b : React.createElement(CalendarDay, __assign({}, dayProps));
-    return React.createElement("div", { className: styles.cell() }, dayElement);
+    return React.createElement("div", { className: styles.cell(theme) }, dayElement);
 };
 //# sourceMappingURL=DayCellView.js.map

package/components/Calendar/DayCellView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayCellView.js","sourceRoot":"","sources":["DayCellView.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,GAAG,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;;IACzC,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACjB,IAAA,KAAwE,UAAU,CAAC,eAAe,CAAC,EAAjG,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAgC,CAAC;IAC1G,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,IAAM,UAAU,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAE1D,IAAM,eAAe,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAExE,IAAM,eAAe,GAAG,WAAW,CAAC;QAClC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,IAAM,QAAQ,GAAqB;QACjC,OAAO,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACnD,UAAU,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACtD,UAAU,YAAA;QACV,SAAS,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,mCAAI,IAAI,CAAC,SAAS;QACzE,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,eAAe;KAC5B,CAAC;IAEF,IAAM,UAAU,GAAmC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,QAAQ,CAAC,mCAAI,oBAAC,WAAW,eAAK,QAAQ,EAAI,CAAC;IAE1G,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAG,UAAU,CAAO,CAAC;AAC3D,CAAC,CAAC","sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport type { ReactElement } from 'react';\n\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport * as CDS from './CalendarDateShape.js';\nimport { CalendarDay } from './CalendarDay.js';\nimport type { CalendarDayProps } from './CalendarDay.js';\nimport { getStyles } from './DayCellView.styles.js';\nimport type { DayCellViewModel } from './DayCellViewModel.js';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps): React.JSX.Element => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\n  const styles = useStyles(getStyles);\n\n  const isDisabled = !CDS.isBetween(date, minDate, maxDate);\n\n  const humanDateString = InternalDateTransformer.dateToHumanString(date);\n\n  const dayClickHandler = useCallback(() => {\n    onDateClick?.(date);\n  }, [onDateClick, date]);\n\n  const dayProps: CalendarDayProps = {\n    isToday: Boolean(today && CDS.isEqual(date, today)),\n    isSelected: Boolean(value && CDS.isEqual(date, value)),\n    isDisabled,\n    isWeekend: isHoliday?.(humanDateString, date.isWeekend) ?? date.isWeekend,\n    date: humanDateString,\n    onDayClick: dayClickHandler,\n  };\n\n  const dayElement: ReactElement<CalendarDayProps> = renderDay?.(dayProps) ?? <CalendarDay {...dayProps} />;\n\n  return <div className={styles.cell()}>{dayElement}</div>;\n};\n"]}
+{"version":3,"file":"DayCellView.js","sourceRoot":"","sources":["DayCellView.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,GAAG,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;;IACzC,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IACjB,IAAA,KAAwE,UAAU,CAAC,eAAe,CAAC,EAAjG,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAgC,CAAC;IAC1G,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAM,UAAU,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAE1D,IAAM,eAAe,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAExE,IAAM,eAAe,GAAG,WAAW,CAAC;QAClC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,IAAM,QAAQ,GAAqB;QACjC,OAAO,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACnD,UAAU,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACtD,UAAU,YAAA;QACV,SAAS,EAAE,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,mCAAI,IAAI,CAAC,SAAS;QACzE,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,eAAe;KAC5B,CAAC;IAEF,IAAM,UAAU,GAAmC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,QAAQ,CAAC,mCAAI,oBAAC,WAAW,eAAK,QAAQ,EAAI,CAAC;IAE1G,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,UAAU,CAAO,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport type { ReactElement } from 'react';\n\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport * as CDS from './CalendarDateShape.js';\nimport { CalendarDay } from './CalendarDay.js';\nimport type { CalendarDayProps } from './CalendarDay.js';\nimport { getStyles } from './DayCellView.styles.js';\nimport type { DayCellViewModel } from './DayCellViewModel.js';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps): React.JSX.Element => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\n  const styles = useStyles(getStyles);\n  const theme = useContext(ThemeContext);\n\n  const isDisabled = !CDS.isBetween(date, minDate, maxDate);\n\n  const humanDateString = InternalDateTransformer.dateToHumanString(date);\n\n  const dayClickHandler = useCallback(() => {\n    onDateClick?.(date);\n  }, [onDateClick, date]);\n\n  const dayProps: CalendarDayProps = {\n    isToday: Boolean(today && CDS.isEqual(date, today)),\n    isSelected: Boolean(value && CDS.isEqual(date, value)),\n    isDisabled,\n    isWeekend: isHoliday?.(humanDateString, date.isWeekend) ?? date.isWeekend,\n    date: humanDateString,\n    onDayClick: dayClickHandler,\n  };\n\n  const dayElement: ReactElement<CalendarDayProps> = renderDay?.(dayProps) ?? <CalendarDay {...dayProps} />;\n\n  return <div className={styles.cell(theme)}>{dayElement}</div>;\n};\n"]}

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

@@ -1,11 +1,9 @@
-/** Правила — в `DayCellView.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    cell: string;
-    day: string;
-    dayHoverColor: string;
-    dayActiveHoverColor: string;
-    selected: string;
-    selected6_1: string;
-    weekend: string;
-    todayCaption: string;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    cell(t: Theme): string;
+    day(t: Theme): string;
+    selected(t: Theme): string;
+    selected6_1(t: Theme): string;
+    weekend(t: Theme): string;
+    todayCaption(t: Theme): string;
 }>;

package/components/Calendar/DayCellView.styles.js

@@ -1,13 +1,31 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `DayCellView.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    cell: 'react-ui-DayCellView-cell',
-    day: 'react-ui-DayCellView-day',
-    dayHoverColor: 'react-ui-DayCellView-dayHoverColor',
-    dayActiveHoverColor: 'react-ui-DayCellView-dayActiveHoverColor',
-    selected: 'react-ui-DayCellView-selected',
-    selected6_1: 'react-ui-DayCellView-selected6_1',
-    weekend: 'react-ui-DayCellView-weekend',
-    todayCaption: 'react-ui-DayCellView-todayCaption',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        cell: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex: 1 1 ", ";\n      height: ", ";\n    "], ["\n      flex: 1 1 ", ";\n      height: ", ";\n    "])), t.calendarCellWidth, t.calendarCellHeight);
+        },
+        day: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ";\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border: 1px solid transparent;\n      font-size: ", ";\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ", ";\n      border-radius: ", ";\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:enabled:not([data-visual-state-selected]) {\n        background-color: ", ";\n        color: ", ";\n      }\n    "], ["\n      ", ";\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border: 1px solid transparent;\n      font-size: ", ";\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ", ";\n      border-radius: ", ";\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:enabled:not([data-visual-state-selected]) {\n        background-color: ", ";\n        color: ", ";\n      }\n    "])), resetButton(), t.calendarCellBg, t.calendarCellFontSize, t.calendarCellLineHeight, t.calendarCellBorderRadius, t.calendarCellHoverBgColor, t.calendarCellHoverColor, t.calendarCellPressedBgColor, t.calendarCellActiveHoverColor);
+        },
+        selected: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), t.calendarCellSelectedBgColor, t.calendarCellSelectedFontColor);
+        },
+        selected6_1: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n        }\n      }\n    "], ["\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n          color: ", ";\n        }\n      }\n    "])), t.calendarCellSelectedBgColor, t.calendarCellSelectedFontColor);
+        },
+        weekend: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.calendarCellWeekendColor);
+        },
+        todayCaption: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-bottom: 2px;\n      border-bottom: ", ";\n    "], ["\n      padding-bottom: 2px;\n      border-bottom: ", ";\n    "])), t.calendarCellTodayBorder);
+        },
+    });
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=DayCellView.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DayCellView.styles.js","sourceRoot":"","sources":["DayCellView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,iEAAiE;AACjE,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,2BAA2B;IACjC,GAAG,EAAE,0BAA0B;IAC/B,aAAa,EAAE,oCAAoC;IACnD,mBAAmB,EAAE,0CAA0C;IAC/D,QAAQ,EAAE,+BAA+B;IACzC,WAAW,EAAE,kCAAkC;IAC/C,OAAO,EAAE,8BAA8B;IACvC,YAAY,EAAE,mCAAmC;CAClD,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `DayCellView.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  cell: 'react-ui-DayCellView-cell',\n  day: 'react-ui-DayCellView-day',\n  dayHoverColor: 'react-ui-DayCellView-dayHoverColor',\n  dayActiveHoverColor: 'react-ui-DayCellView-dayActiveHoverColor',\n  selected: 'react-ui-DayCellView-selected',\n  selected6_1: 'react-ui-DayCellView-selected6_1',\n  weekend: 'react-ui-DayCellView-weekend',\n  todayCaption: 'react-ui-DayCellView-todayCaption',\n});\n"]}
+{"version":3,"file":"DayCellView.styles.js","sourceRoot":"","sources":["DayCellView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,uHAAA,oBACI,EAAmB,mBACrB,EAAoB,SAC/B,KAFa,CAAC,CAAC,iBAAiB,EACrB,CAAC,CAAC,kBAAkB,EAC9B;QACJ,CAAC;QACD,GAAG,YAAC,CAAQ;YACV,OAAO,GAAG,2hCAAA,UACN,EAAa,kEAID,EAAgB,4DAEjB,EAAsB,2HAKpB,EAAwB,0BACtB,EAA0B,6YAiBnB,EAA0B,sBACrC,EAAwB,gOAUf,EAA4B,oBACvC,EAA8B,kBAE1C,KA3CG,WAAW,EAAE,EAID,CAAC,CAAC,cAAc,EAEjB,CAAC,CAAC,oBAAoB,EAKpB,CAAC,CAAC,sBAAsB,EACtB,CAAC,CAAC,wBAAwB,EAiBnB,CAAC,CAAC,wBAAwB,EACrC,CAAC,CAAC,sBAAsB,EAUf,CAAC,CAAC,0BAA0B,EACvC,CAAC,CAAC,4BAA4B,EAEzC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,OAAO,GAAG,8HAAA,4BACY,EAA6B,kBACxC,EAA+B,SACzC,KAFqB,CAAC,CAAC,2BAA2B,EACxC,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;QAED,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,4MAAA,kFAGgB,EAA6B,sBACxC,EAA+B,6BAG7C,KAJyB,CAAC,CAAC,2BAA2B,EACxC,CAAC,CAAC,6BAA6B,EAG5C;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,+FAAA,iBACC,EAA0B,SACpC,KADU,CAAC,CAAC,wBAAwB,EACnC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,mIAAA,qDAES,EAAyB,SAC3C,KADkB,CAAC,CAAC,uBAAuB,EAC1C;QACJ,CAAC;KACF,CAAC;AArF8D,CAqF9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  cell(t: Theme) {\n    return css`\n      flex: 1 1 ${t.calendarCellWidth};\n      height: ${t.calendarCellHeight};\n    `;\n  },\n  day(t: Theme) {\n    return css`\n      ${resetButton()};\n      width: 100%;\n      height: 100%;\n\n      background: ${t.calendarCellBg};\n      border: 1px solid transparent;\n      font-size: ${t.calendarCellFontSize};\n      padding: 0;\n      text-align: center;\n      user-select: none;\n      position: relative;\n      line-height: ${t.calendarCellLineHeight};\n      border-radius: ${t.calendarCellBorderRadius};\n      transition:\n        0.15s ease background-color,\n        0.15s ease opacity;\n\n      // Expand the clickable area\n      &:before {\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${t.calendarCellHoverBgColor};\n          color: ${t.calendarCellHoverColor};\n          cursor: pointer;\n        }\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n      &:active:enabled:not([data-visual-state-selected]) {\n        background-color: ${t.calendarCellPressedBgColor};\n        color: ${t.calendarCellActiveHoverColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      background-color: ${t.calendarCellSelectedBgColor};\n      color: ${t.calendarCellSelectedFontColor};\n    `;\n  },\n\n  selected6_1(t: Theme) {\n    return css`\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${t.calendarCellSelectedBgColor};\n          color: ${t.calendarCellSelectedFontColor};\n        }\n      }\n    `;\n  },\n\n  weekend(t: Theme) {\n    return css`\n      color: ${t.calendarCellWeekendColor};\n    `;\n  },\n\n  todayCaption(t: Theme) {\n    return css`\n      padding-bottom: 2px;\n      border-bottom: ${t.calendarCellTodayBorder};\n    `;\n  },\n}));\n"]}

package/components/Calendar/Month.js

@@ -91,20 +91,24 @@ var MonthDayGrid = /** @class */ (function (_super) {
         return this.props.days !== nextProps.days;
     };
     MonthDayGrid.prototype.render = function () {
-        this.styles = getStyles();
-        this.cellStyles = getCellStyles();
-        return this.renderMain();
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        this.cellStyles = getCellStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
     MonthDayGrid.prototype.renderMain = function () {
         var _this = this;
-        var leadingDays = Array.from({ length: this.props.offset }, function (_, i) { return (React.createElement("div", { key: "leading_".concat(i), className: _this.cellStyles.cell() })); });
+        var leadingDays = Array.from({ length: this.props.offset }, function (_, i) { return (React.createElement("div", { key: "leading_".concat(i), className: _this.cellStyles.cell(_this.theme) })); });
         var trailingOffset = DAYS_PER_WEEK - ((this.props.offset + this.props.days.length) % DAYS_PER_WEEK);
-        var trailingDays = Array.from({ length: trailingOffset }, function (_, i) { return (React.createElement("div", { key: "trailing_".concat(i), className: _this.cellStyles.cell() })); });
+        var trailingDays = Array.from({ length: trailingOffset }, function (_, i) { return (React.createElement("div", { key: "trailing_".concat(i), className: _this.cellStyles.cell(_this.theme) })); });
         var days = this.props.days.map(function (day) {
             return React.createElement(DayCellView, { date: day, key: "".concat(day.date, ".").concat(day.month, ".").concat(day.year) });
         });
         var weeks = divideToWeeks(leadingDays.concat(days, trailingDays));
-        return (React.createElement("div", { className: this.styles.monthDayGrid() }, weeks.map(function (week, i) { return (React.createElement("div", { className: _this.styles.monthDayRow(), key: "week_".concat(i) }, week)); })));
+        return (React.createElement("div", { className: this.styles.monthDayGrid(this.theme) }, weeks.map(function (week, i) { return (React.createElement("div", { className: _this.styles.monthDayRow(_this.theme), key: "week_".concat(i) }, week)); })));
     };
     MonthDayGrid = __decorate([
         withRenderEnvironment

package/components/Calendar/Month.js.map

@@ -1 +1 @@
-{"version":3,"file":"Month.js","sourceRoot":"","sources":["Month.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport type { DateSelect } from '../../internal/DateSelect/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport * as CalendarScrollEvents from './CalendarScrollEvents.js';\nimport { DayCellView } from './DayCellView.js';\nimport { getStyles as getCellStyles } from './DayCellView.styles.js';\nimport type { DayCellViewModel } from './DayCellViewModel.js';\nimport { MonthView } from './MonthView.js';\nimport { getStyles } from './MonthView.styles.js';\nimport type { MonthViewModel } from './MonthViewModel.js';\n\ninterface MonthProps {\n  top: number;\n  month: MonthViewModel;\n  onMonthYearChange: (monthNative: number, year: number) => void;\n}\n\nexport class Month extends React.Component<MonthProps> {\n  private theme!: Theme;\n\n  private monthSelect: DateSelect | null = null;\n  private yearSelect: DateSelect | null = null;\n\n  public shouldComponentUpdate(nextProps: MonthProps) {\n    if (this.props.top !== nextProps.top) {\n      return true;\n    }\n\n    return this.props.month !== nextProps.month;\n  }\n\n  public componentDidMount() {\n    CalendarScrollEvents.addListener(this.closeSelects);\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): JSX.Element {\n    const { month, top } = this.props;\n    return (\n      <MonthView\n        firstDayOffset={month.offset}\n        height={month.getHeight(this.theme)}\n        isFirstInYear={month.isFirstInYear}\n        isLastInYear={month.isLastInYear}\n        month={month.month}\n        top={top}\n        year={month.year}\n        onMonthSelect={this.handleMonthSelect}\n        onYearSelect={this.handleYearSelect}\n        monthSelectRef={this.monthRef}\n        yearSelectRef={this.yearRef}\n      >\n        {this.renderCells()}\n      </MonthView>\n    );\n  }\n\n  private renderCells(): JSX.Element {\n    return <MonthDayGrid days={this.props.month.days} offset={this.props.month.offset} />;\n  }\n\n  private closeSelects = (): void => {\n    if (this.monthSelect) {\n      this.monthSelect.close();\n    }\n    if (this.yearSelect) {\n      this.yearSelect.close();\n    }\n  };\n\n  private monthRef = (monthSelect: DateSelect | null): void => {\n    this.monthSelect = monthSelect;\n  };\n\n  private yearRef = (yearSelect: DateSelect | null): void => {\n    this.yearSelect = yearSelect;\n  };\n\n  private handleMonthSelect = (month: number): void => {\n    this.props.onMonthYearChange(month, this.props.month.year);\n  };\n\n  private handleYearSelect = (year: number): void => {\n    this.props.onMonthYearChange(this.props.month.month, year);\n  };\n}\n\nconst DAYS_PER_WEEK = 7;\n\ninterface MonthDayGridProps {\n  days: DayCellViewModel[];\n  offset: number;\n}\n\n@withRenderEnvironment\nclass MonthDayGrid extends React.Component<MonthDayGridProps> {\n  private styles!: ReturnType<typeof getStyles>;\n  private cellStyles!: ReturnType<typeof getCellStyles>;\n\n  public shouldComponentUpdate(nextProps: MonthDayGridProps) {\n    return this.props.days !== nextProps.days;\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles();\n    this.cellStyles = getCellStyles();\n\n    return this.renderMain();\n  }\n\n  public renderMain(): JSX.Element {\n    const leadingDays = Array.from({ length: this.props.offset }, (_, i) => (\n      <div key={`leading_${i}`} className={this.cellStyles.cell()} />\n    ));\n    const trailingOffset = DAYS_PER_WEEK - ((this.props.offset + this.props.days.length) % DAYS_PER_WEEK);\n    const trailingDays = Array.from({ length: trailingOffset }, (_, i) => (\n      <div key={`trailing_${i}`} className={this.cellStyles.cell()} />\n    ));\n    const days = this.props.days.map((day) => {\n      return <DayCellView date={day} key={`${day.date}.${day.month}.${day.year}`} />;\n    });\n    const weeks = divideToWeeks(leadingDays.concat(days, trailingDays));\n    return (\n      <div className={this.styles.monthDayGrid()}>\n        {weeks.map((week, i) => (\n          <div className={this.styles.monthDayRow()} key={`week_${i}`}>\n            {week}\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n\nfunction divideToWeeks<T>(days: T[]): T[][] {\n  const weeks: T[][] = [];\n  for (let i = 0; i < days.length; i += DAYS_PER_WEEK) {\n    const week = days.slice(i, i + DAYS_PER_WEEK);\n    weeks.push(week);\n  }\n  return weeks;\n}\n"]}
+{"version":3,"file":"Month.js","sourceRoot":"","sources":["Month.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,KAAK,oBAAoB,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD;IAA2B,yBAA2B;IAAtD;;QAGU,iBAAW,GAAsB,IAAI,CAAC;QACtC,gBAAU,GAAsB,IAAI,CAAC;QAkDrC,kBAAY,GAAG;YACrB,IAAI,KAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,KAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;YACD,IAAI,KAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,KAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,WAA8B;YAChD,KAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QACjC,CAAC,CAAC;QAEM,aAAO,GAAG,UAAC,UAA6B;YAC9C,KAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC/B,CAAC,CAAC;QAEM,uBAAiB,GAAG,UAAC,KAAa;YACxC,KAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEM,sBAAgB,GAAG,UAAC,IAAY;YACtC,KAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7D,CAAC,CAAC;;IACJ,CAAC;IAxEQ,qCAAqB,GAA5B,UAA6B,SAAqB;QAChD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,CAAC;IAC9C,CAAC;IAEM,iCAAiB,GAAxB;QACE,oBAAoB,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAEM,sBAAM,GAAb;QAAA,iBASC;QARC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,0BAAU,GAAjB;QACQ,IAAA,KAAiB,IAAI,CAAC,KAAK,EAAzB,KAAK,WAAA,EAAE,GAAG,SAAe,CAAC;QAClC,OAAO,CACL,oBAAC,SAAS,IACR,cAAc,EAAE,KAAK,CAAC,MAAM,EAC5B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EACnC,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,aAAa,EAAE,IAAI,CAAC,iBAAiB,EACrC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,cAAc,EAAE,IAAI,CAAC,QAAQ,EAC7B,aAAa,EAAE,IAAI,CAAC,OAAO,IAE1B,IAAI,CAAC,WAAW,EAAE,CACT,CACb,CAAC;IACJ,CAAC;IAEO,2BAAW,GAAnB;QACE,OAAO,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAI,CAAC;IACxF,CAAC;IA0BH,YAAC;AAAD,CAAC,AA9ED,CAA2B,KAAK,CAAC,SAAS,GA8EzC;;AAED,IAAM,aAAa,GAAG,CAAC,CAAC;AAQxB;IAA2B,gCAAkC;IAA7D;;IA8CA,CAAC;IAxCQ,4CAAqB,GAA5B,UAA6B,SAA4B;QACvD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IAC5C,CAAC;IAEM,6BAAM,GAAb;QAAA,iBAYC;QAXC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE9C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,iCAAU,GAAjB;QAAA,iBAqBC;QApBC,IAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACtE,6BAAK,GAAG,EAAE,kBAAW,CAAC,CAAE,EAAE,SAAS,EAAE,KAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,GAAI,CAC1E,EAFuE,CAEvE,CAAC,CAAC;QACH,IAAM,cAAc,GAAG,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,aAAa,CAAC,CAAC;QACtG,IAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CACpE,6BAAK,GAAG,EAAE,mBAAY,CAAC,CAAE,EAAE,SAAS,EAAE,KAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,GAAI,CAC3E,EAFqE,CAErE,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG;YACnC,OAAO,oBAAC,WAAW,IAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,UAAG,GAAG,CAAC,IAAI,cAAI,GAAG,CAAC,KAAK,cAAI,GAAG,CAAC,IAAI,CAAE,GAAI,CAAC;QACjF,CAAC,CAAC,CAAC;QACH,IAAM,KAAK,GAAG,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;QACpE,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IACjD,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,CAAC,IAAK,OAAA,CACtB,6BAAK,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,WAAW,CAAC,KAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,eAAQ,CAAC,CAAE,IAClE,IAAI,CACD,CACP,EAJuB,CAIvB,CAAC,CACE,CACP,CAAC;IACJ,CAAC;IA7CG,YAAY;QADjB,qBAAqB;OAChB,YAAY,CA8CjB;IAAD,mBAAC;CAAA,AA9CD,CAA2B,KAAK,CAAC,SAAS,GA8CzC;AAED,SAAS,aAAa,CAAI,IAAS;IACjC,IAAM,KAAK,GAAU,EAAE,CAAC;IACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC;QACpD,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC;QAC9C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport type { DateSelect } from '../../internal/DateSelect/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport * as CalendarScrollEvents from './CalendarScrollEvents.js';\nimport { DayCellView } from './DayCellView.js';\nimport { getStyles as getCellStyles } from './DayCellView.styles.js';\nimport type { DayCellViewModel } from './DayCellViewModel.js';\nimport { MonthView } from './MonthView.js';\nimport { getStyles } from './MonthView.styles.js';\nimport type { MonthViewModel } from './MonthViewModel.js';\n\ninterface MonthProps {\n  top: number;\n  month: MonthViewModel;\n  onMonthYearChange: (monthNative: number, year: number) => void;\n}\n\nexport class Month extends React.Component<MonthProps> {\n  private theme!: Theme;\n\n  private monthSelect: DateSelect | null = null;\n  private yearSelect: DateSelect | null = null;\n\n  public shouldComponentUpdate(nextProps: MonthProps) {\n    if (this.props.top !== nextProps.top) {\n      return true;\n    }\n\n    return this.props.month !== nextProps.month;\n  }\n\n  public componentDidMount() {\n    CalendarScrollEvents.addListener(this.closeSelects);\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): JSX.Element {\n    const { month, top } = this.props;\n    return (\n      <MonthView\n        firstDayOffset={month.offset}\n        height={month.getHeight(this.theme)}\n        isFirstInYear={month.isFirstInYear}\n        isLastInYear={month.isLastInYear}\n        month={month.month}\n        top={top}\n        year={month.year}\n        onMonthSelect={this.handleMonthSelect}\n        onYearSelect={this.handleYearSelect}\n        monthSelectRef={this.monthRef}\n        yearSelectRef={this.yearRef}\n      >\n        {this.renderCells()}\n      </MonthView>\n    );\n  }\n\n  private renderCells(): JSX.Element {\n    return <MonthDayGrid days={this.props.month.days} offset={this.props.month.offset} />;\n  }\n\n  private closeSelects = (): void => {\n    if (this.monthSelect) {\n      this.monthSelect.close();\n    }\n    if (this.yearSelect) {\n      this.yearSelect.close();\n    }\n  };\n\n  private monthRef = (monthSelect: DateSelect | null): void => {\n    this.monthSelect = monthSelect;\n  };\n\n  private yearRef = (yearSelect: DateSelect | null): void => {\n    this.yearSelect = yearSelect;\n  };\n\n  private handleMonthSelect = (month: number): void => {\n    this.props.onMonthYearChange(month, this.props.month.year);\n  };\n\n  private handleYearSelect = (year: number): void => {\n    this.props.onMonthYearChange(this.props.month.month, year);\n  };\n}\n\nconst DAYS_PER_WEEK = 7;\n\ninterface MonthDayGridProps {\n  days: DayCellViewModel[];\n  offset: number;\n}\n\n@withRenderEnvironment\nclass MonthDayGrid extends React.Component<MonthDayGridProps> {\n  private styles!: ReturnType<typeof getStyles>;\n  private cellStyles!: ReturnType<typeof getCellStyles>;\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  public shouldComponentUpdate(nextProps: MonthDayGridProps) {\n    return this.props.days !== nextProps.days;\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n    this.cellStyles = getCellStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): JSX.Element {\n    const leadingDays = Array.from({ length: this.props.offset }, (_, i) => (\n      <div key={`leading_${i}`} className={this.cellStyles.cell(this.theme)} />\n    ));\n    const trailingOffset = DAYS_PER_WEEK - ((this.props.offset + this.props.days.length) % DAYS_PER_WEEK);\n    const trailingDays = Array.from({ length: trailingOffset }, (_, i) => (\n      <div key={`trailing_${i}`} className={this.cellStyles.cell(this.theme)} />\n    ));\n    const days = this.props.days.map((day) => {\n      return <DayCellView date={day} key={`${day.date}.${day.month}.${day.year}`} />;\n    });\n    const weeks = divideToWeeks(leadingDays.concat(days, trailingDays));\n    return (\n      <div className={this.styles.monthDayGrid(this.theme)}>\n        {weeks.map((week, i) => (\n          <div className={this.styles.monthDayRow(this.theme)} key={`week_${i}`}>\n            {week}\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n\nfunction divideToWeeks<T>(days: T[]): T[][] {\n  const weeks: T[][] = [];\n  for (let i = 0; i < days.length; i += DAYS_PER_WEEK) {\n    const week = days.slice(i, i + DAYS_PER_WEEK);\n    weeks.push(week);\n  }\n  return weeks;\n}\n"]}

package/components/Calendar/MonthView.js

@@ -1,8 +1,7 @@
 import React, { useContext } from 'react';
 import { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';
 import { DateSelect } from '../../internal/DateSelect/index.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { CalendarContext } from './CalendarContext.js';
 import * as CDS from './CalendarDateShape.js';
@@ -32,6 +31,7 @@ export var getMaxMonth = function (year, maxDate) {
 export function MonthView(props) {
     var _a, _b;
     var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var _c = useContext(CalendarContext), minDate = _c.minDate, maxDate = _c.maxDate;
     var isMobile = useResponsiveLayout().isMobile;
@@ -45,15 +45,15 @@ export function MonthView(props) {
     var yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;
     var monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;
     var yearSelectDisabled = top > 52 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);
-    return (React.createElement("div", { "data-tid": CalendarDataTids.month, className: cx((_a = {}, _a[styles.month()] = true, _a[styles.monthMobile()] = isMobile, _a)), style: { top: top }, key: month + '-' + year },
+    return (React.createElement("div", { "data-tid": CalendarDataTids.month, className: cx((_a = {}, _a[styles.month(theme)] = true, _a[styles.monthMobile()] = isMobile, _a)), style: { top: top }, key: month + '-' + year },
         React.createElement("div", { style: { top: headerTop }, className: cx((_b = {},
                 _b[styles.header()] = true,
-                _b[styles.headerSticky()] = isHeaderSticky,
+                _b[styles.headerSticky(theme)] = isHeaderSticky,
                 _b)) },
-            React.createElement("div", { style: { borderBottomColor: borderBottomColor }, className: styles.monthTitle() },
-                React.createElement("div", { "data-tid": CalendarDataTids.headerMonth, className: styles.headerMonth() },
+            React.createElement("div", { style: { borderBottomColor: borderBottomColor }, className: styles.monthTitle(theme) },
+                React.createElement("div", { "data-tid": CalendarDataTids.headerMonth, className: styles.headerMonth(theme) },
                     React.createElement(DateSelect, { disabled: monthSelectDisabled, width: isMobile ? '6em' : 85, type: "month", value: month, onValueChange: onMonthSelect, ref: !monthSelectDisabled ? monthSelectRef : undefined, minValue: getMinMonth(year, minDate), maxValue: getMaxMonth(year, maxDate) })),
-                isYearVisible && (React.createElement("div", { "data-tid": CalendarDataTids.headerYear, className: styles.headerYear(), style: { top: yearTop } },
+                isYearVisible && (React.createElement("div", { "data-tid": CalendarDataTids.headerYear, className: styles.headerYear(theme), style: { top: yearTop } },
                     React.createElement(DateSelect, { disabled: yearSelectDisabled, width: isMobile ? '3.5em' : 50, type: "year", value: year, minValue: minDate ? minDate.year : undefined, maxValue: maxDate ? maxDate.year : undefined, onValueChange: onYearSelect, ref: !yearSelectDisabled ? yearSelectRef : undefined }))))),
         children));
 }

package/components/Calendar/MonthView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthView.js","sourceRoot":"","sources":["MonthView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport type { Nullable } from '../..//typings/utility-types.js';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';\nimport { DateSelect } from '../../internal/DateSelect/index.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport * as CDS from './CalendarDateShape.js';\nimport { themeConfig } from './config.js';\nimport { getStyles } from './MonthView.styles.js';\nimport { CalendarDataTids } from './tids.js';\n\nexport const getMinMonth = (year: number, minDate: Nullable<CDS.CalendarDateShape>): number => {\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>): number => {\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  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): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const styles = useStyles(getStyles);\n  const { minDate, maxDate } = useContext(CalendarContext);\n  const { isMobile } = useResponsiveLayout();\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\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 = `color-mix(in srgb, ${theme.calendarMonthTitleBorderBottomColor}, transparent ${Math.max(alpha, 0)}%)`;\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 52 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  return (\n    <div\n      data-tid={CalendarDataTids.month}\n      className={cx({ [styles.month()]: 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()]: isHeaderSticky,\n        })}\n      >\n        <div style={{ borderBottomColor }} className={styles.monthTitle()}>\n          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth()}>\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          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear()} style={{ top: yearTop }}>\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            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"MonthView.js","sourceRoot":"","sources":["MonthView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport type { Nullable } from '../..//typings/utility-types.js';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';\nimport { DateSelect } from '../../internal/DateSelect/index.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport * as CDS from './CalendarDateShape.js';\nimport { themeConfig } from './config.js';\nimport { getStyles } from './MonthView.styles.js';\nimport { CalendarDataTids } from './tids.js';\n\nexport const getMinMonth = (year: number, minDate: Nullable<CDS.CalendarDateShape>): number => {\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>): number => {\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  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): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const { minDate, maxDate } = useContext(CalendarContext);\n  const { isMobile } = useResponsiveLayout();\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\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 = `color-mix(in srgb, ${theme.calendarMonthTitleBorderBottomColor}, transparent ${Math.max(alpha, 0)}%)`;\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 52 || (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            <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          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\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            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}

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

@@ -1,13 +1,13 @@
-/** Правила — в `MonthView.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    headerMonth: string;
-    headerYear: string;
-    month: string;
-    monthMobile: string;
-    header: string;
-    headerSticky: string;
-    monthTitle: string;
-    monthDayGrid: string;
-    monthDayRow: string;
-    nativeSelect: string;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    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/MonthView.styles.js

@@ -1,15 +1,47 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `MonthView.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    headerMonth: 'react-ui-MonthView-headerMonth',
-    headerYear: 'react-ui-MonthView-headerYear',
-    month: 'react-ui-MonthView-month',
-    monthMobile: 'react-ui-MonthView-monthMobile',
-    header: 'react-ui-MonthView-header',
-    headerSticky: 'react-ui-MonthView-headerSticky',
-    monthTitle: 'react-ui-MonthView-monthTitle',
-    monthDayGrid: 'react-ui-MonthView-monthDayGrid',
-    monthDayRow: 'react-ui-MonthView-monthDayRow',
-    nativeSelect: 'react-ui-MonthView-nativeSelect',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        headerMonth: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-block;\n      padding: ", " 0 ", ";\n    "], ["\n      display: inline-block;\n      padding: ", " 0 ", ";\n    "])), t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
+        },
+        headerYear: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ", " 0 ", ";\n    "], ["\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ", " 0 ", ";\n    "])), t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
+        },
+        month: function (t) {
+            var width = parseInt(t.calendarCellWidth) * 7;
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      width: ", "px;\n    "], ["\n      position: absolute;\n      width: ", "px;\n    "])), width);
+        },
+        monthMobile: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+        },
+        header: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+        },
+        headerSticky: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      z-index: 2;\n    "], ["\n      background-color: ", ";\n      z-index: 2;\n    "])), t.calendarMonthHeaderStickedBgColor);
+        },
+        monthTitle: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      border-bottom: 1px solid ", ";\n      font-weight: ", ";\n      margin: 0 ", " ", ";\n      line-height: ", ";\n    "], ["\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 (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "], ["\n      line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "])), t.calendarCellLineHeight, t.calendarGridRowSpacing);
+        },
+        monthDayRow: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "], ["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "])), t.calendarGridRowSpacing);
+        },
+        nativeSelect: function () {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\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      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    "])));
+        },
+    });
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 //# sourceMappingURL=MonthView.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthView.styles.js","sourceRoot":"","sources":["MonthView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,+DAA+D;AAC/D,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,WAAW,EAAE,gCAAgC;IAC7C,UAAU,EAAE,+BAA+B;IAC3C,KAAK,EAAE,0BAA0B;IACjC,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,2BAA2B;IACnC,YAAY,EAAE,iCAAiC;IAC/C,UAAU,EAAE,+BAA+B;IAC3C,YAAY,EAAE,iCAAiC;IAC/C,WAAW,EAAE,gCAAgC;IAC7C,YAAY,EAAE,iCAAiC;CAChD,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `MonthView.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  headerMonth: 'react-ui-MonthView-headerMonth',\n  headerYear: 'react-ui-MonthView-headerYear',\n  month: 'react-ui-MonthView-month',\n  monthMobile: 'react-ui-MonthView-monthMobile',\n  header: 'react-ui-MonthView-header',\n  headerSticky: 'react-ui-MonthView-headerSticky',\n  monthTitle: 'react-ui-MonthView-monthTitle',\n  monthDayGrid: 'react-ui-MonthView-monthDayGrid',\n  monthDayRow: 'react-ui-MonthView-monthDayRow',\n  nativeSelect: 'react-ui-MonthView-nativeSelect',\n});\n"]}
+{"version":3,"file":"MonthView.styles.js","sourceRoot":"","sources":["MonthView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,sIAAA,iDAEG,EAA8B,KAAM,EAAiC,SACjF,KADY,CAAC,CAAC,4BAA4B,EAAM,CAAC,CAAC,+BAA+B,EAChF;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,kLAAA,6FAIG,EAA8B,KAAM,EAAiC,SACjF,KADY,CAAC,CAAC,4BAA4B,EAAM,CAAC,CAAC,+BAA+B,EAChF;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,IAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAChD,OAAO,GAAG,4HAAA,4CAEC,EAAK,WACf,KADU,KAAK,EACd;QACJ,CAAC;QAED,WAAW;YACT,OAAO,GAAG,+FAAA,4BAET,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,6HAAA,4BACY,EAAmC,4BAExD,KAFqB,CAAC,CAAC,iCAAiC,EAEvD;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,iMAAA,mCACmB,EAAqC,wBACjD,EAAsB,qBACzB,EAA2B,GAAI,EAAgC,wBAC5D,EAA8B,SAC9C,KAJ4B,CAAC,CAAC,mCAAmC,EACjD,CAAC,CAAC,oBAAoB,EACzB,CAAC,CAAC,yBAAyB,EAAI,CAAC,CAAC,8BAA8B,EAC5D,CAAC,CAAC,4BAA4B,EAC7C;QACJ,CAAC;QAED;;;WAGG;QACH,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,oLAAA,uBACO,EAAwB,yEAG5B,EAAwB,aACpC,KAJgB,CAAC,CAAC,sBAAsB,EAG5B,CAAC,CAAC,sBAAsB,EACnC;QACJ,CAAC;QAED,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,6LAAA,sGAKQ,EAAwB,kBAEzC,KAFiB,CAAC,CAAC,sBAAsB,EAExC;QACJ,CAAC;QAED,YAAY;YACV,OAAO,GAAG,0QAAA,qMAUT,KAAC;QACJ,CAAC;KACF,CAAC;AA1F8D,CA0F9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\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/Center/Center.d.ts

@@ -24,6 +24,7 @@ export declare class Center extends React.Component<CenterProps> {
     private getProps;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private emotion;
     private cx;
     private styles;
     render(): React.JSX.Element;

package/components/Center/Center.js

@@ -75,7 +75,7 @@ var Center = /** @class */ (function (_super) {
     }
     Center_1 = Center;
     Center.prototype.render = function () {
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.getProps()), this.renderMain));
     };
     var Center_1;