@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/cjs/components/Calendar/Calendar.md

@@ -0,0 +1,276 @@
+### Календарь с заданной датой
+
+```jsx harmony
+const [date, setDate] = React.useState("01.11.2021");
+
+<Calendar
+  value={date}
+  onValueChange={setDate}
+/>
+```
+
+### initialMonth и initialYear
+Вне зависимости от того, какая дата выбрана в календаре в данный момент - можно изменить отображение начального года и месяца с помощью пропов `initialMonth` и `initialYear`
+
+```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
+const [date, setDate] = React.useState("11.12.2021");
+const initialMonth = 7;
+const initialYear = 2000;
+
+<div style={{ display: 'flex' }}>
+  <Calendar
+    value={date}
+    onValueChange={setDate}
+    initialMonth={initialMonth}
+    initialYear={initialYear}
+  />
+  <div style={{ fontSize: '16px' }}>
+    <p>Выбранная дата: {date}</p>
+    <p>Начальный месяц: {initialMonth}</p>
+    <p>Начальный год: {initialYear}</p>
+  </div>
+</div>
+```
+
+### isHoliday
+
+В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
+
+```jsx harmony
+import * as DatePickerHelpers from '@skbkontur/react-ui/components/DatePicker/DatePickerHelpers';
+
+const [date, setDate] = React.useState();
+
+const createRandomHolidays = () => {
+  const holidays = new Array(10);
+  const today = new Date();
+
+  for (let index = 0; index < holidays.length; index++) {
+    const day = new Date(today.setDate(today.getDate() + 1 + index).valueOf());
+
+    const holiday = {
+      date: day.getDate(),
+      month: day.getMonth(),
+      year: day.getFullYear(),
+    };
+
+    holidays[index] = DatePickerHelpers.formatDate(holiday);
+  }
+
+  return holidays;
+};
+const holidays = createRandomHolidays();
+
+const isHoliday = (day, isWeekend) => {
+  const today = new Date();
+  const holiday = {
+    date: today.getDate(),
+    month: today.getMonth(),
+    year: today.getFullYear(),
+  };
+
+  if (holidays.includes(day)) {
+    return !isWeekend;
+  }
+
+  return isWeekend;
+};
+
+<Calendar isHoliday={isHoliday} value={date} onValueChange={setDate} />;
+```
+
+### Высота
+Календарю можно задать кастомную высоту с помощью переменной темы `calendarWrapperHeight`
+
+- Базовая высота календаря - `330px`
+- Максимальная высота календаря - `450px`
+
+```jsx harmony
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+const [date, setDate] = React.useState("01.11.2021");
+const theme = React.useContext(ThemeContext);
+
+<ThemeContext.Provider
+  value={ThemeFactory.create({ calendarWrapperHeight: '450px' }, theme)}
+  >
+  <Calendar
+    value={date}
+    onValueChange={setDate}
+  />
+</ThemeContext.Provider>
+```
+
+### Кастомный рендер дня
+Для кастомнизации дней в календаре используется метод `renderDay` и компонент [Calendar.Day](#/Components/Calendar/Calendar.Day)
+
+```jsx harmony
+import { Tooltip, Hint, CalendarDay } from '@skbkontur/react-ui';
+
+const initialValue = "02.09.2023";
+
+const [value, setValue] = React.useState(initialValue);
+
+const renderDay = (props) => {
+  const [date, month, year] = props.date.split('.').map(Number);
+
+  if (month == 9 && date > 12 && date < 16) {
+    return (
+      <Tooltip render={() => "Кастомный день"}>
+        <CalendarDay {...props} style={{ background: 'darkgray' }} />
+      </Tooltip>
+    );
+  }
+
+  if (month == 8 && date == 20) {
+    return (
+      <Hint text={date} pos="right middle">
+        <CalendarDay {...props}>
+          <b style={{color: 'orange'}}>#</b>
+        </CalendarDay>
+      </Hint>
+    );
+  }
+
+  return <CalendarDay {...props} />
+};
+
+<Calendar
+  value={value}
+  onValueChange={setValue}
+  renderDay={renderDay}
+/>;
+```
+
+### Календарь с ценами
+Пример с кастомизацией темы и кастомным рендером дня.
+
+```jsx harmony
+import { CalendarDay } from '@skbkontur/react-ui';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+const theme = React.useContext(ThemeContext);
+
+function renderDay(props) {
+  const [date, month] = props.date.split('.').map(Number);
+  const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
+  const randomPrice = Math.round((date / month) * 1000);
+
+  return (
+    <CalendarDay {...props}>
+      <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
+      <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
+        {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.tokenTextColorDisabled }}>—</span>}
+      </div>
+    </CalendarDay>
+  );
+}
+
+const [value, setValue] = React.useState(null);
+
+<ThemeContext.Provider
+  value={ThemeFactory.create({
+    calendarCellWidth: '56px',
+    calendarCellHeight: '56px',
+    calendarCellLineHeight: '1.5',
+    calendarWrapperHeight: '600px',
+    calendarCellBorderRadius: '8px'
+  }, theme)}
+>
+  <Calendar value={value} renderDay={renderDay} onValueChange={setValue} />
+</ThemeContext.Provider>
+```
+
+### Локали по умолчанию
+
+```typescript static
+interface CalendarLocale {
+  months?: string[];
+  selectMonthAriaLabel?: string;
+  selectYearAriaLabel?: string;
+  selectChosenAriaLabel?: string;
+  dayCellChooseDateAriaLabel?: string;
+}
+
+const ru_RU = {
+  months: [
+    'Январь',
+    'Февраль',
+    'Март',
+    'Апрель',
+    'Май',
+    'Июнь',
+    'Июль',
+    'Август',
+    'Сентябрь',
+    'Октябрь',
+    'Ноябрь',
+    'Декабрь',
+  ],
+  selectMonthAriaLabel: 'месяц',
+  selectYearAriaLabel: 'год',
+  selectChosenAriaLabel: 'Выбранный',
+  dayCellChooseDateAriaLabel: 'Выбрать дату',
+};
+
+const en_GB = {
+  months: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  selectMonthAriaLabel: 'месяц',
+  selectYearAriaLabel: 'год',
+  selectChosenAriaLabel: 'Выбранный',
+  dayCellChooseDateAriaLabel: 'Выбрать дату',
+};
+```
+
+
+### Скролл к месяцу
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const initialValue = "02.09.2023";
+const [value, setValue] = React.useState(initialValue);
+const calendarRef = React.useRef(null);
+
+<>
+  <Gapped gap={8} verticalAlign="top">
+    <Calendar
+      value={value}
+      ref={calendarRef}
+      onValueChange={setValue}
+    />
+
+    <Gapped vertical gap={8}>
+      <Button onClick={() => calendarRef.current.scrollToMonth(1, 2023)}>
+        I квартал
+      </Button>
+      <Button onClick={() => calendarRef.current.scrollToMonth(4, 2023)}>
+        II квартал
+      </Button>
+      <Button onClick={() => calendarRef.current.scrollToMonth(7, 2023)}>
+        III квартал
+      </Button>
+      <Button onClick={() => calendarRef.current.scrollToMonth(10, 2023)}>
+        IV квартал
+      </Button>
+    </Gapped>
+  </Gapped>
+</>;
+```

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     wrapper(): string;
     separator(t: Theme): string;

package/cjs/components/Calendar/Calendar.styles.js

@@ -1,36 +1,33 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
 
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    var width = parseInt(t.calendarCellWidth) * 7;
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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,
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root(t) {
-        var width = parseInt(t.calendarCellWidth) * 7;
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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.calendarBorderRadius,
-        t.textColorDefault,
+    t.calendarPaddingX,
+    width);
 
-        t.calendarPaddingX,
-        width);
 
+  },
 
-      },
+  wrapper: function wrapper() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: 14px;\n      position: relative;\n      overflow: hidden;\n    "])));
 
-      wrapper: function wrapper() {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        font-size: 14px;\n        position: relative;\n        overflow: hidden;\n      "])));
 
 
 
+  },
 
-      },
+  separator: function separator(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", ";\n      margin: 0 ", ";\n    "])),
+    t.calendarBottomSeparatorBorder,
+    t.calendarMonthTitleMarginX);
 
-      separator: function separator(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border-bottom: ", ";\n        margin: 0 ", ";\n      "])),
-        t.calendarBottomSeparatorBorder,
-        t.calendarMonthTitleMarginX);
-
-      }
-    }));};
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","getStyles","exports","emotion","memoizeStyle","root","t","width","parseInt","calendarCellWidth","css","_taggedTemplateLiteralLoose2","default","calendarBg","calendarBorderRadius","textColorDefault","calendarPaddingX","wrapper","separator","calendarBottomSeparatorBorder","calendarMonthTitleMarginX"],"sources":["Calendar.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      const width = parseInt(t.calendarCellWidth) * 7;\n      return emotion.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 emotion.css`\n        font-size: 14px;\n        position: relative;\n        overflow: hidden;\n      `;\n    },\n\n    separator(t: Theme) {\n      return emotion.css`\n        border-bottom: ${t.calendarBottomSeparatorBorder};\n        margin: 0 ${t.calendarMonthTitleMarginX};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGlD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,IAAMC,KAAK,GAAGC,QAAQ,CAACF,CAAC,CAACG,iBAAiB,CAAC,GAAG,CAAC;QAC/C,OAAON,OAAO,CAACO,GAAG,CAAAZ,eAAA,KAAAA,eAAA,OAAAa,4BAAA,CAAAC,OAAA;QACFN,CAAC,CAACO,UAAU;;QAETP,CAAC,CAACQ,oBAAoB;QAC9BR,CAAC,CAACS,gBAAgB;;QAEdT,CAAC,CAACU,gBAAgB;QACtBT,KAAK;;;MAGlB,CAAC;;MAEDU,OAAO,WAAAA,QAAA,EAAG;QACR,OAAOd,OAAO,CAACO,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;;;;;MAKpB,CAAC;;MAEDM,SAAS,WAAAA,UAACZ,CAAQ,EAAE;QAClB,OAAOH,OAAO,CAACO,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;QACCN,CAAC,CAACa,6BAA6B;QACpCb,CAAC,CAACc,yBAAyB;;MAE3C;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","styles","exports","memoizeStyle","root","t","width","parseInt","calendarCellWidth","css","_taggedTemplateLiteralLoose2","default","calendarBg","calendarBorderRadius","textColorDefault","calendarPaddingX","wrapper","separator","calendarBottomSeparatorBorder","calendarMonthTitleMarginX"],"sources":["Calendar.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\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"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,IAAMC,KAAK,GAAGC,QAAQ,CAACF,CAAC,CAACG,iBAAiB,CAAC,GAAG,CAAC;IAC/C,WAAOC,YAAG,EAAAX,eAAA,KAAAA,eAAA,OAAAY,4BAAA,CAAAC,OAAA;IACMN,CAAC,CAACO,UAAU;;IAETP,CAAC,CAACQ,oBAAoB;IAC9BR,CAAC,CAACS,gBAAgB;;IAEdT,CAAC,CAACU,gBAAgB;IACtBT,KAAK;;;EAGlB,CAAC;;EAEDU,OAAO,WAAAA,QAAA,EAAG;IACR,WAAOP,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;;EAKZ,CAAC;;EAEDM,SAAS,WAAAA,UAACZ,CAAQ,EAAE;IAClB,WAAOI,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACSN,CAAC,CAACa,6BAA6B;IACpCb,CAAC,CAACc,yBAAyB;;EAE3C;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Calendar/CalendarDay.js

@@ -1,9 +1,9 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.CalendarDay = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
 var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
 var _locale = require("../DatePicker/locale");
 var _InternalDate = require("../../lib/date/InternalDate");
 var _locale2 = require("../../lib/locale");
@@ -59,9 +59,6 @@ var CalendarDay = exports.CalendarDay = /*#__PURE__*/(0, _react.memo)(
     ref)
     {var _cx, _cx2;var isToday = _ref.isToday,isSelected = _ref.isSelected,isDisabled = _ref.isDisabled,isWeekend = _ref.isWeekend,date = _ref.date,onDayClick = _ref.onDayClick,onClick = _ref.onClick,children = _ref.children,className = _ref.className,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
       var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
-      var emotion = (0, _RenderEnvironmentContext.useEmotion)();
-      var cx = emotion.cx;
-      var styles = (0, _DayCellView.getStyles)(emotion);
 
       var _useContext = (0, _react.useContext)(_locale2.LocaleContext),langCode = _useContext.langCode;
       var internalDate = new _InternalDate.InternalDate({ langCode: langCode, value: date });
@@ -88,18 +85,18 @@ var CalendarDay = exports.CalendarDay = /*#__PURE__*/(0, _react.memo)(
           tabIndex: -1,
           disabled: isDisabled,
           onClick: handleClick,
-          className: cx((_cx = {}, _cx[
+          className: (0, _Emotion.cx)((_cx = {}, _cx[
 
-          styles.day(theme)] = true, _cx[
-          styles.selected(theme)] = isSelected, _cx[
-          styles.weekend(theme)] = isWeekend, _cx),
+          _DayCellView.styles.day(theme)] = true, _cx[
+          _DayCellView.styles.selected(theme)] = isSelected, _cx[
+          _DayCellView.styles.weekend(theme)] = isWeekend, _cx),
 
           className
           ) },
         (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ selected: isSelected }),
         rest), /*#__PURE__*/
 
-        _react.default.createElement("span", { className: cx((_cx2 = {}, _cx2[styles.todayCaption(theme)] = isToday, _cx2)) }, caption)
+        _react.default.createElement("span", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_DayCellView.styles.todayCaption(theme)] = isToday, _cx2)) }, caption)
         ));
 
     }

package/cjs/components/Calendar/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_RenderEnvironmentContext","_useLocaleForControl","_ThemeContext","_locale","_InternalDate","_locale2","_getVisualStateDataAttributes","_forwardRefAndName","_DayCellView","_Calendar","_excluded","CalendarDay","exports","memo","forwardRefAndName","_ref","ref","_cx","_cx2","isToday","isSelected","isDisabled","isWeekend","date","onDayClick","onClick","children","className","rest","_objectWithoutPropertiesLoose2","default","theme","useContext","ThemeContext","emotion","useEmotion","cx","styles","getStyles","_useContext","LocaleContext","langCode","internalDate","InternalDate","value","locale","useLocaleForControl","DatePickerLocaleHelper","ariaLabel","dayCellChooseDateAriaLabel","toA11YFormat","handleClick","useCallback","e","_internalDate$getComp","getComponentsLikeNumber","day","caption","createElement","_extends2","CalendarDataTids","dayCell","tabIndex","disabled","selected","weekend","getVisualStateDataAttributes","todayCaption"],"sources":["CalendarDay.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useContext, memo, useCallback } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale';\nimport { InternalDate } from '../../lib/date/InternalDate';\nimport { LocaleContext } from '../../lib/locale';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { getStyles } from './DayCellView.styles';\nimport { CalendarDataTids } from './Calendar';\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  /** Задает функцию, которая вызывается при клике на день. Необходима для внутренней работы Calendar. Не предназначена для переопределения. Вместо этого, следует использовать стандартный `onClick`.\n   * @internal @ignore\n   */\n  onDayClick: () => void;\n}\n\n/**\n * Компонент дня `CalendarDay` из Calendar.\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 emotion = useEmotion();\n      const { cx } = emotion;\n      const styles = getStyles(emotion);\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.selected(theme)]: isSelected,\n              [styles.weekend(theme)]: isWeekend,\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useLocaleForControl","_ThemeContext","_Emotion","_locale","_InternalDate","_locale2","_getVisualStateDataAttributes","_forwardRefAndName","_DayCellView","_Calendar","_excluded","CalendarDay","exports","memo","forwardRefAndName","_ref","ref","_cx","_cx2","isToday","isSelected","isDisabled","isWeekend","date","onDayClick","onClick","children","className","rest","_objectWithoutPropertiesLoose2","default","theme","useContext","ThemeContext","_useContext","LocaleContext","langCode","internalDate","InternalDate","value","locale","useLocaleForControl","DatePickerLocaleHelper","ariaLabel","dayCellChooseDateAriaLabel","toA11YFormat","handleClick","useCallback","e","_internalDate$getComp","getComponentsLikeNumber","day","caption","createElement","_extends2","CalendarDataTids","dayCell","tabIndex","disabled","cx","styles","selected","weekend","getVisualStateDataAttributes","todayCaption"],"sources":["CalendarDay.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useContext, memo, useCallback } from 'react';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { DatePickerLocaleHelper } from '../DatePicker/locale';\nimport { InternalDate } from '../../lib/date/InternalDate';\nimport { LocaleContext } from '../../lib/locale';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { styles } from './DayCellView.styles';\nimport { CalendarDataTids } from './Calendar';\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  /** Задает функцию, которая вызывается при клике на день. Необходима для внутренней работы Calendar. Не предназначена для переопределения. Вместо этого, следует использовать стандартный `onClick`.\n   * @internal @ignore\n   */\n  onDayClick: () => void;\n}\n\n/**\n * Компонент дня `CalendarDay` из Calendar.\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\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.selected(theme)]: isSelected,\n              [styles.weekend(theme)]: isWeekend,\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"],"mappings":"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","ignoreList":[]}

package/cjs/components/Calendar/CalendarDay.md

@@ -0,0 +1,70 @@
+Компонент для отрисовки дня в Calendar. Полезен при использовании вместе с его пропом `renderDay`.
+
+### Базовый пример
+```jsx harmony
+import { CalendarDay, Gapped } from '@skbkontur/react-ui';
+
+const date = '20.05.2024';
+const style = { width: 32, height: 32 };
+
+<Gapped>
+  <CalendarDay style={style} date={date} />
+  <CalendarDay style={style} date={date} isToday={true} />
+  <CalendarDay style={style} date={date} isSelected={true} />
+  <CalendarDay style={style} date={date} isDisabled={true} />
+  <CalendarDay style={style} date={date} isWeekend={true} />
+  <CalendarDay style={style}><b>20</b></CalendarDay>
+</Gapped>
+```
+
+### Функции для сравнения строковых дат
+
+```jsx harmony
+const { isBetween, isEqual, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } = require('@skbkontur/react-ui/lib/date/comparison');
+
+const date_a = '10.03.2017';
+const date_b = '11.03.2017';
+
+const Table = ({ children }) => (
+  <table>
+    <thead>
+      <tr>
+        <td>Функция</td>
+        <td>Результат</td>
+      </tr>
+    </thead>
+    <tbody>
+      { children }
+    </tbody>
+  </table>
+)
+
+const Row = ({ code }) => (
+  <tr>
+    <td><code>{code}</code></td>
+    <td><code>{JSON.stringify(eval(code), null, 2)}</code></td>
+  </tr>
+);
+
+<Table>
+  <Row code={`isEqual("${date_a}", "${date_a}")`} />
+  <Row code={`isLess("${date_a}", "${date_b}")`} />
+  <Row code={`isLessOrEqual("${date_a}", "${date_b}")`} />
+  <Row code={`isGreater("${date_b}", "${date_a}")`} />
+  <Row code={`isGreaterOrEqual("${date_b}", "${date_a}")`} />
+  <Row code={`isBetween("${date_b}", "${date_a}", "${date_b}")`} />
+</Table>
+
+```
+
+```typescript static
+export function isEqual(left: string, right: string): boolean;
+export function isLess(left: string, right: string): boolean;
+export function isLessOrEqual(left: string, right: string): boolean;
+export function isGreater(left: string, right: string): boolean;
+export function isGreaterOrEqual(left: string, right: string): boolean;
+export function isBetween(
+  date: string,
+  left?: string,
+  right?: string,
+): boolean;

package/cjs/components/Calendar/DayCellView.js

@@ -1,7 +1,6 @@
 "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.DayCellView = void 0;
 var _react = _interopRequireWildcard(require("react"));
 
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _InternalDateTransformer = require("../../lib/date/InternalDateTransformer");
 
@@ -19,7 +18,6 @@ var _CalendarDay = require("./CalendarDay");
 var DayCellView = exports.DayCellView = function DayCellView(props) {var _isHoliday, _renderDay;
   var date = props.date;
   var _useContext = (0, _react.useContext)(_CalendarContext.CalendarContext),value = _useContext.value,minDate = _useContext.minDate,maxDate = _useContext.maxDate,isHoliday = _useContext.isHoliday,renderDay = _useContext.renderDay,today = _useContext.today,onDateClick = _useContext.onDateClick;
-  var styles = (0, _DayCellView.getStyles)((0, _RenderEnvironmentContext.useEmotion)());
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
 
   var isDisabled = !CDS.isBetween(date, minDate, maxDate);
@@ -41,5 +39,5 @@ var DayCellView = exports.DayCellView = function DayCellView(props) {var _isHoli
 
   var dayElement = (_renderDay = renderDay == null ? void 0 : renderDay(dayProps)) != null ? _renderDay : /*#__PURE__*/_react.default.createElement(_CalendarDay.CalendarDay, dayProps);
 
-  return /*#__PURE__*/_react.default.createElement("div", { className: styles.cell(theme) }, dayElement);
+  return /*#__PURE__*/_react.default.createElement("div", { className: _DayCellView.styles.cell(theme) }, dayElement);
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_RenderEnvironmentContext","_ThemeContext","_InternalDateTransformer","_DayCellView","_CalendarContext","CDS","_CalendarDay","DayCellView","exports","props","_isHoliday","_renderDay","date","_useContext","useContext","CalendarContext","value","minDate","maxDate","isHoliday","renderDay","today","onDateClick","styles","getStyles","useEmotion","theme","ThemeContext","isDisabled","isBetween","humanDateString","InternalDateTransformer","dateToHumanString","dayClickHandler","useCallback","dayProps","isToday","Boolean","isEqual","isSelected","isWeekend","onDayClick","dayElement","default","createElement","CalendarDay","className","cell"],"sources":["DayCellView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useCallback, useContext } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer';\n\nimport { getStyles } from './DayCellView.styles';\nimport { CalendarContext } from './CalendarContext';\nimport type { DayCellViewModel } from './DayCellViewModel';\nimport * as CDS from './CalendarDateShape';\nimport type { CalendarDayProps } from './CalendarDay';\nimport { CalendarDay } from './CalendarDay';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps) => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\n  const styles = getStyles(useEmotion());\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"],"mappings":";AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,yBAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,wBAAA,GAAAH,OAAA;;AAEA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;;AAEA,IAAAM,GAAA,GAAAP,uBAAA,CAAAC,OAAA;;AAEA,IAAAO,YAAA,GAAAP,OAAA;;;;;;AAMO,IAAMQ,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,KAAuB,EAAK,KAAAC,UAAA,EAAAC,UAAA;EACtD,IAAQC,IAAI,GAAKH,KAAK,CAAdG,IAAI;EACZ,IAAAC,WAAA,GAA8E,IAAAC,iBAAU,EAACC,gCAAe,CAAC,CAAjGC,KAAK,GAAAH,WAAA,CAALG,KAAK,CAAEC,OAAO,GAAAJ,WAAA,CAAPI,OAAO,CAAEC,OAAO,GAAAL,WAAA,CAAPK,OAAO,CAAEC,SAAS,GAAAN,WAAA,CAATM,SAAS,CAAEC,SAAS,GAAAP,WAAA,CAATO,SAAS,CAAEC,KAAK,GAAAR,WAAA,CAALQ,KAAK,CAAEC,WAAW,GAAAT,WAAA,CAAXS,WAAW;EACzE,IAAMC,MAAM,GAAG,IAAAC,sBAAS,EAAC,IAAAC,oCAAU,EAAC,CAAC,CAAC;EACtC,IAAMC,KAAK,GAAG,IAAAZ,iBAAU,EAACa,0BAAY,CAAC;;EAEtC,IAAMC,UAAU,GAAG,CAACvB,GAAG,CAACwB,SAAS,CAACjB,IAAI,EAAEK,OAAO,EAAEC,OAAO,CAAC;;EAEzD,IAAMY,eAAe,GAAGC,gDAAuB,CAACC,iBAAiB,CAACpB,IAAI,CAAC;;EAEvE,IAAMqB,eAAe,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACxCZ,WAAW,YAAXA,WAAW,CAAGV,IAAI,CAAC;EACrB,CAAC,EAAE,CAACU,WAAW,EAAEV,IAAI,CAAC,CAAC;;EAEvB,IAAMuB,QAA0B,GAAG;IACjCC,OAAO,EAAEC,OAAO,CAAChB,KAAK,IAAIhB,GAAG,CAACiC,OAAO,CAAC1B,IAAI,EAAES,KAAK,CAAC,CAAC;IACnDkB,UAAU,EAAEF,OAAO,CAACrB,KAAK,IAAIX,GAAG,CAACiC,OAAO,CAAC1B,IAAI,EAAEI,KAAK,CAAC,CAAC;IACtDY,UAAU,EAAVA,UAAU;IACVY,SAAS,GAAA9B,UAAA,GAAES,SAAS,oBAATA,SAAS,CAAGW,eAAe,EAAElB,IAAI,CAAC4B,SAAS,CAAC,YAAA9B,UAAA,GAAIE,IAAI,CAAC4B,SAAS;IACzE5B,IAAI,EAAEkB,eAAe;IACrBW,UAAU,EAAER;EACd,CAAC;;EAED,IAAMS,UAA0C,IAAA/B,UAAA,GAAGS,SAAS,oBAATA,SAAS,CAAGe,QAAQ,CAAC,YAAAxB,UAAA,gBAAId,MAAA,CAAA8C,OAAA,CAAAC,aAAA,CAACtC,YAAA,CAAAuC,WAAW,EAAKV,QAAW,CAAC;;EAEzG,oBAAOtC,MAAA,CAAA8C,OAAA,CAAAC,aAAA,UAAKE,SAAS,EAAEvB,MAAM,CAACwB,IAAI,CAACrB,KAAK,CAAE,IAAEgB,UAAgB,CAAC;AAC/D,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ThemeContext","_InternalDateTransformer","_DayCellView","_CalendarContext","CDS","_CalendarDay","DayCellView","exports","props","_isHoliday","_renderDay","date","_useContext","useContext","CalendarContext","value","minDate","maxDate","isHoliday","renderDay","today","onDateClick","theme","ThemeContext","isDisabled","isBetween","humanDateString","InternalDateTransformer","dateToHumanString","dayClickHandler","useCallback","dayProps","isToday","Boolean","isEqual","isSelected","isWeekend","onDayClick","dayElement","default","createElement","CalendarDay","className","styles","cell"],"sources":["DayCellView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useCallback, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { InternalDateTransformer } from '../../lib/date/InternalDateTransformer';\n\nimport { styles } from './DayCellView.styles';\nimport { CalendarContext } from './CalendarContext';\nimport type { DayCellViewModel } from './DayCellViewModel';\nimport * as CDS from './CalendarDateShape';\nimport type { CalendarDayProps } from './CalendarDay';\nimport { CalendarDay } from './CalendarDay';\n\nexport interface DayCellViewProps {\n  date: DayCellViewModel;\n}\n\nexport const DayCellView = (props: DayCellViewProps) => {\n  const { date } = props;\n  const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext);\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"],"mappings":";AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,wBAAA,GAAAF,OAAA;;AAEA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;;AAEA,IAAAK,GAAA,GAAAN,uBAAA,CAAAC,OAAA;;AAEA,IAAAM,YAAA,GAAAN,OAAA;;;;;;AAMO,IAAMO,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,KAAuB,EAAK,KAAAC,UAAA,EAAAC,UAAA;EACtD,IAAQC,IAAI,GAAKH,KAAK,CAAdG,IAAI;EACZ,IAAAC,WAAA,GAA8E,IAAAC,iBAAU,EAACC,gCAAe,CAAC,CAAjGC,KAAK,GAAAH,WAAA,CAALG,KAAK,CAAEC,OAAO,GAAAJ,WAAA,CAAPI,OAAO,CAAEC,OAAO,GAAAL,WAAA,CAAPK,OAAO,CAAEC,SAAS,GAAAN,WAAA,CAATM,SAAS,CAAEC,SAAS,GAAAP,WAAA,CAATO,SAAS,CAAEC,KAAK,GAAAR,WAAA,CAALQ,KAAK,CAAEC,WAAW,GAAAT,WAAA,CAAXS,WAAW;EACzE,IAAMC,KAAK,GAAG,IAAAT,iBAAU,EAACU,0BAAY,CAAC;;EAEtC,IAAMC,UAAU,GAAG,CAACpB,GAAG,CAACqB,SAAS,CAACd,IAAI,EAAEK,OAAO,EAAEC,OAAO,CAAC;;EAEzD,IAAMS,eAAe,GAAGC,gDAAuB,CAACC,iBAAiB,CAACjB,IAAI,CAAC;;EAEvE,IAAMkB,eAAe,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACxCT,WAAW,YAAXA,WAAW,CAAGV,IAAI,CAAC;EACrB,CAAC,EAAE,CAACU,WAAW,EAAEV,IAAI,CAAC,CAAC;;EAEvB,IAAMoB,QAA0B,GAAG;IACjCC,OAAO,EAAEC,OAAO,CAACb,KAAK,IAAIhB,GAAG,CAAC8B,OAAO,CAACvB,IAAI,EAAES,KAAK,CAAC,CAAC;IACnDe,UAAU,EAAEF,OAAO,CAAClB,KAAK,IAAIX,GAAG,CAAC8B,OAAO,CAACvB,IAAI,EAAEI,KAAK,CAAC,CAAC;IACtDS,UAAU,EAAVA,UAAU;IACVY,SAAS,GAAA3B,UAAA,GAAES,SAAS,oBAATA,SAAS,CAAGQ,eAAe,EAAEf,IAAI,CAACyB,SAAS,CAAC,YAAA3B,UAAA,GAAIE,IAAI,CAACyB,SAAS;IACzEzB,IAAI,EAAEe,eAAe;IACrBW,UAAU,EAAER;EACd,CAAC;;EAED,IAAMS,UAA0C,IAAA5B,UAAA,GAAGS,SAAS,oBAATA,SAAS,CAAGY,QAAQ,CAAC,YAAArB,UAAA,gBAAIb,MAAA,CAAA0C,OAAA,CAAAC,aAAA,CAACnC,YAAA,CAAAoC,WAAW,EAAKV,QAAW,CAAC;;EAEzG,oBAAOlC,MAAA,CAAA0C,OAAA,CAAAC,aAAA,UAAKE,SAAS,EAAEC,mBAAM,CAACC,IAAI,CAACtB,KAAK,CAAE,IAAEgB,UAAgB,CAAC;AAC/D,CAAC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     cell(t: Theme): string;
     day(t: Theme): string;
     selected(t: Theme): string;