@salutejs/plasma-new-hope 0.106.0-canary.1302.9970585539.0 → 0.106.0-dev.0

package/{emotion/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.js → styled-components/cjs/components/Calendar/ui/CalendarDayItem/CalendarDayItem.js}

@@ -4,23 +4,22 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DateStructureItem = void 0;
+exports.CalendarDayItem = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _utils = /*#__PURE__*/require("../../../../utils");
 var _Calendar = /*#__PURE__*/require("../../Calendar.tokens");
-var _DateStructureItem = /*#__PURE__*/require("./DateStructureItem.styles");
-var _excluded = ["children", "isFocused", "dayOfWeek", "disabled", "isCurrent", "isSelected", "isDayInCurrentMonth", "isDouble", "inRange", "isHovered", "sideInRange", "eventList", "day", "monthIndex", "year", "onClick", "onMouseOver", "onFocus", "disabledArrowKey", "disabledMonths"];
+var _CalendarDayItem = /*#__PURE__*/require("./CalendarDayItem.styles");
+var _excluded = ["isFocused", "dayOfWeek", "disabled", "isCurrent", "isSelected", "isDayInCurrentMonth", "isDouble", "inRange", "isHovered", "sideInRange", "eventList", "day", "monthIndex", "year", "onClick", "onMouseOver", "onFocus", "disabledArrowKey", "disabledMonths"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
- * Компонент элемента даты в сетке календаря.
+ * Компонент дня в календаре.
  */
-var DateStructureItem = exports.DateStructureItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
-  var children = _ref.children,
-    isFocused = _ref.isFocused,
+var CalendarDayItem = exports.CalendarDayItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
+  var isFocused = _ref.isFocused,
     dayOfWeek = _ref.dayOfWeek,
     disabled = _ref.disabled,
     isCurrent = _ref.isCurrent,
@@ -42,21 +41,20 @@ var DateStructureItem = exports.DateStructureItem = /*#__PURE__*/(0, _react.memo
     disabledMonths = _ref.disabledMonths,
     rest = _objectWithoutProperties(_ref, _excluded);
   var selectableClass = !dayOfWeek && !disabled ? _Calendar.classes.selectableItem : undefined;
-  var selectedClass = isDayInCurrentMonth && isSelected ? _Calendar.classes.selectedItem : undefined;
-  var currentClass = isDayInCurrentMonth && isCurrent ? _Calendar.classes.currentItem : undefined;
-  var hoveredClass = isDayInCurrentMonth && isHovered ? _Calendar.classes.hoveredItem : undefined;
+  var selectedClass = isSelected ? _Calendar.classes.selectedItem : undefined;
+  var currentClass = isCurrent ? _Calendar.classes.currentItem : undefined;
+  var hoveredClass = isHovered ? _Calendar.classes.hoveredItem : undefined;
   var dayOfWeekClass = dayOfWeek ? _Calendar.classes.dayOfWeek : undefined;
-  var dayInCurrentMonthClass = isDayInCurrentMonth ? _Calendar.classes.dayInCurrentMonth : undefined;
-  var disabledClass = disabled && !isCurrent ? _Calendar.classes.disabled : undefined;
-  var disabledCurrentClass = disabled && isCurrent ? _Calendar.classes.disabledCurrent : undefined;
-  var sideInRangeLeft = isDayInCurrentMonth && sideInRange === 'left' ? _Calendar.classes.sideLeft : undefined;
-  var sideInRangeRight = isDayInCurrentMonth && sideInRange === 'right' ? _Calendar.classes.sideRight : undefined;
-  var sideInRangeClass = isDayInCurrentMonth && sideInRange ? _Calendar.classes.sideInRange : undefined;
-  var inRangeStyle = isDayInCurrentMonth && inRange ? _Calendar.classes.inRange : undefined;
+  var disabledClass = disabled && !isCurrent ? _Calendar.classes.dayDisabled : undefined;
+  var disabledCurrentClass = disabled && isCurrent ? _Calendar.classes.dayDisabledCurrent : undefined;
+  var sideInRangeLeft = sideInRange === 'left' ? _Calendar.classes.daySideLeft : undefined;
+  var sideInRangeRight = sideInRange === 'right' ? _Calendar.classes.daySideRight : undefined;
+  var sideInRangeClass = sideInRange ? _Calendar.classes.daySideInRange : undefined;
+  var inRangeStyle = inRange ? _Calendar.classes.dayInRange : undefined;
   var sideOffset = !isSelected && isCurrent ? -1 : 0;
-  return /*#__PURE__*/_react["default"].createElement(_DateStructureItem.StyledItemRoot, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_CalendarDayItem.StyledDayRoot, _extends({
     ref: outerRef,
-    className: (0, _utils.cx)(dayOfWeekClass, selectableClass, selectedClass, currentClass, disabledClass, disabledCurrentClass, hoveredClass, dayInCurrentMonthClass),
+    className: (0, _utils.cx)(dayOfWeekClass, selectableClass, selectedClass, currentClass, disabledClass, disabledCurrentClass, hoveredClass),
     tabIndex: isFocused ? 0 : -1,
     dayOfWeek: dayOfWeek,
     isCurrent: isCurrent,
@@ -76,13 +74,13 @@ var DateStructureItem = exports.DateStructureItem = /*#__PURE__*/(0, _react.memo
     "aria-selected": isSelected,
     "aria-disabled": disabled,
     "aria-describedby": disabled ? 'withShift' : undefined
-  }, rest), /*#__PURE__*/_react["default"].createElement(_DateStructureItem.StyledItem, {
+  }, rest), /*#__PURE__*/_react["default"].createElement(_CalendarDayItem.StyledDay, {
     className: (0, _utils.cx)(sideInRangeClass, sideInRangeLeft, sideInRangeRight, inRangeStyle),
     offset: sideOffset
-  }, children), /*#__PURE__*/_react["default"].createElement(_DateStructureItem.StyledEvents, {
+  }, day), /*#__PURE__*/_react["default"].createElement(_CalendarDayItem.StyledEvents, {
     "aria-hidden": true
   }, [eventList[0], eventList[1], eventList[2]].map(function (event, i) {
-    return event && /*#__PURE__*/_react["default"].createElement(_DateStructureItem.StyledEvent, _extends({
+    return event && /*#__PURE__*/_react["default"].createElement(_CalendarDayItem.StyledEvent, _extends({
       key: "".concat(event.date, "-").concat(i)
     }, event));
   })));

package/styled-components/cjs/components/Calendar/ui/{DateStructureItem/DateStructureItem.styles.js → CalendarDayItem/CalendarDayItem.styles.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledItemRoot = exports.StyledItem = exports.StyledEvents = exports.StyledEvent = void 0;
+exports.StyledEvents = exports.StyledEvent = exports.StyledDayRoot = exports.StyledDay = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Calendar = /*#__PURE__*/require("../../Calendar.tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
@@ -15,30 +15,34 @@ var inRange = function inRange() {
 var sideInRange = function sideInRange() {
   return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 0.75rem;\n        height: calc(100% - 0.125rem);\n        background: var(".concat(_Calendar.tokens.calendarRangeBackground, ");\n    }\n");
 };
-var StyledItem = exports.StyledItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-14wxiia-0"
-})(["border-radius:calc(var(", ") - 0.125rem);", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], _Calendar.innerTokens.dateStructureBorderRadius, /*#__PURE__*/String(_mixins2.flexCenter), /*#__PURE__*/String(_Calendar.classes.inRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(_Calendar.classes.sideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(_Calendar.classes.sideLeft), function (_ref) {
+var StyledDay = exports.StyledDay = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-2y5uj0-0"
+})(["border-radius:calc(var(", ") - 0.125rem);", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], _Calendar.tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(_mixins2.flexCenter), /*#__PURE__*/String(_Calendar.classes.dayInRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(_Calendar.classes.daySideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(_Calendar.classes.daySideLeft), function (_ref) {
   var offset = _ref.offset;
   return "".concat(offset, "px");
-}, /*#__PURE__*/String(_Calendar.classes.sideRight), function (_ref2) {
+}, /*#__PURE__*/String(_Calendar.classes.daySideRight), function (_ref2) {
   var offset = _ref2.offset;
   return "".concat(offset, "px");
 });
-var disabledItem = function disabledItem() {
+var disabledDay = function disabledDay() {
   return "\n    cursor: not-allowed;\n    opacity: 0.4;\n";
 };
-var disabledCurrentItem = function disabledCurrentItem() {
-  return "\n    ".concat(disabledItem(), ";\n");
+var disabledCurrentDay = function disabledCurrentDay() {
+  return "\n    ".concat(disabledDay(), ";\n");
 };
-var StyledItemRoot = exports.StyledItemRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-14wxiia-1"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-width:var(", ");min-height:var(", ");border-radius:var(", ");", ";color:", ";&.", "{", ";", ";&.", "{", ";}}&.", ":not(.", "){", ";}&.", "{color:var(", ");}&.", "{", ";}&.", "{", ";}&.", "{& > .", ":before{width:calc(100% + 2px);height:100%;}& > .", ":before{width:100%;right:-1px;left:unset;}& > .", ":before{width:100%;left:-1px;right:unset;}}"], _Calendar.innerTokens.dateStructureFontFamily, _Calendar.innerTokens.dateStructureFontSize, _Calendar.innerTokens.dateStructureFontStyle, _Calendar.innerTokens.dateStructureFontWeight, _Calendar.innerTokens.dateStructureFontLetterSpacing, _Calendar.innerTokens.dateStructureFontLineHeight, _Calendar.innerTokens.dateStructureWidth, _Calendar.innerTokens.dateStructureHeight, _Calendar.innerTokens.dateStructureBorderRadius, /*#__PURE__*/String(_mixins2.flexCenter), function (_ref3) {
+var StyledDayRoot = exports.StyledDayRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-2y5uj0-1"
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-width:var(", ");min-height:var(", ");border-radius:var(", ");", ";color:", ";visibility:", ";&.", "{", ";", ";&.", "{", ";}}&.", "{color:var(", ");}&.", "{", ";}&.", "{", ";}&.", "{& > .", ":before{width:calc(100% + 2px);height:100%;}& > .", ":before{width:100%;right:-1px;left:unset;}& > .", ":before{width:100%;left:-1px;right:unset;}}"], _Calendar.tokens.calendarDayFontFamily, _Calendar.tokens.calendarDayFontSize, _Calendar.tokens.calendarDayFontStyle, _Calendar.tokens.calendarDayFontWeight, _Calendar.tokens.calendarDayFontLetterSpacing, _Calendar.tokens.calendarDayFontLineHeight, _Calendar.tokens.calendarDayItemWidth, _Calendar.tokens.calendarDayItemHeight, _Calendar.tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(_mixins2.flexCenter), function (_ref3) {
   var isDayInCurrentMonth = _ref3.isDayInCurrentMonth;
   return isDayInCurrentMonth ? "var(".concat(_Calendar.tokens.calendarContentPrimaryColor, ")") : "var(".concat(_Calendar.tokens.calendarContentSecondaryColor, ")");
+}, function (_ref4) {
+  var isDayInCurrentMonth = _ref4.isDayInCurrentMonth,
+    isDouble = _ref4.isDouble;
+  return !isDayInCurrentMonth && isDouble ? 'hidden' : 'visible';
 }, /*#__PURE__*/String(_Calendar.classes.selectableItem), /*#__PURE__*/(0, _mixins2.addSelected)({
-  minWidth: /*#__PURE__*/"calc(var(".concat(_Calendar.innerTokens.dateStructureWidth, ") - 0.25rem)"),
-  minHeight: /*#__PURE__*/"calc(var(".concat(_Calendar.innerTokens.dateStructureHeight, ") - 0.25rem)"),
-  selectedFontWeight: /*#__PURE__*/"var(".concat(_Calendar.innerTokens.dateStructureSelectedFontWeight, ")"),
+  minWidth: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarDayItemWidth, ") - 0.25rem)"),
+  minHeight: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarDayItemHeight, ") - 0.25rem)"),
+  selectedFontWeight: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarDaySelectedFontWeight, ")"),
   selectedBackground: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarSelectedItemBackground, ")"),
   selectedColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarSelectedItemColor, ")"),
   selectableBackgroundHover: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarSelectableItemBackgroundHover, ")"),
@@ -49,24 +53,20 @@ var StyledItemRoot = exports.StyledItemRoot = /*#__PURE__*/_styledComponents["de
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Calendar.innerTokens.dateStructureBorderRadius, ") + 0.125rem)")
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarDayItemBorderRadius, ") + 0.125rem)")
 }), _Calendar.classes.currentItem, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.1875rem',
   outlineColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Calendar.innerTokens.dateStructureBorderRadius, ") + 0.125rem)")
-}), _Calendar.classes.dayInCurrentMonth, _Calendar.classes.disabled, /*#__PURE__*/(0, _mixins2.addActive)({
-  activeBackground: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarActiveItemBackground, ")"),
-  activeColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarActiveItemColor, ")"),
-  activeFontWeight: /*#__PURE__*/"var(".concat(_Calendar.innerTokens.dateStructureSelectedFontWeight, ")")
-}), _Calendar.classes.dayOfWeek, _Calendar.tokens.calendarDayOfWeekColor, _Calendar.classes.disabled, /*#__PURE__*/disabledItem(), _Calendar.classes.disabledCurrent, /*#__PURE__*/disabledCurrentItem(), _Calendar.classes.currentItem, _Calendar.classes.inRange, _Calendar.classes.sideRight, _Calendar.classes.sideLeft);
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarDayItemBorderRadius, ") + 0.125rem)")
+}), _Calendar.classes.dayOfWeek, _Calendar.tokens.calendarDayOfWeekColor, _Calendar.classes.dayDisabled, /*#__PURE__*/disabledDay(), _Calendar.classes.dayDisabledCurrent, /*#__PURE__*/disabledCurrentDay(), _Calendar.classes.currentItem, _Calendar.classes.dayInRange, _Calendar.classes.daySideRight, _Calendar.classes.daySideLeft);
 var StyledEvents = exports.StyledEvents = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-14wxiia-2"
+  componentId: "plasma-new-hope__sc-2y5uj0-2"
 })(["display:flex;position:absolute;bottom:0.25rem;"]);
 var StyledEvent = exports.StyledEvent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-14wxiia-3"
-})(["margin:0 0.063rem;width:0.188rem;height:0.188rem;border-radius:50%;background-color:", ";"], function (_ref4) {
-  var _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? 'var(--plasma-colors-accent)' : _ref4$color;
+  componentId: "plasma-new-hope__sc-2y5uj0-3"
+})(["margin:0 0.063rem;width:0.188rem;height:0.188rem;border-radius:50%;background-color:", ";"], function (_ref5) {
+  var _ref5$color = _ref5.color,
+    color = _ref5$color === void 0 ? 'var(--plasma-colors-accent)' : _ref5$color;
   return color;
 });

package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js

@@ -8,15 +8,11 @@ exports.CalendarDays = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _hooks = /*#__PURE__*/require("../../hooks");
 var _utils = /*#__PURE__*/require("../../utils");
-var _DateStructureItem = /*#__PURE__*/require("../DateStructureItem/DateStructureItem");
-var _Calendar = /*#__PURE__*/require("../../Calendar.tokens");
+var _CalendarDayItem = /*#__PURE__*/require("../CalendarDayItem/CalendarDayItem");
 var _CalendarDays = /*#__PURE__*/require("./CalendarDays.styles");
 var _StyledCalendarDaysHi;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -43,22 +39,13 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
     onHoverDay = _ref.onHoverDay,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
-  var _useDays = (0, _hooks.useDays)({
-      date: currentDate,
-      value: value,
-      eventList: eventList,
-      disabledList: disabledList,
-      min: min,
-      max: max,
-      includeEdgeDates: includeEdgeDates
-    }),
+  var _useDays = (0, _hooks.useDays)(currentDate, value, eventList, disabledList, min, max, includeEdgeDates),
     _useDays2 = _slicedToArray(_useDays, 2),
     days = _useDays2[0],
     selected = _useDays2[1];
   var selectedRef = (0, _react.useRef)(selected);
   var onSetSelectedRef = (0, _react.useRef)(onSetSelected);
   var offset = isSecond ? _utils.ROW_STEP : 0;
-  var dayItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(_Calendar.innerTokens.dateStructureFontFamily), "var(".concat(_Calendar.tokens.calendarDayFontFamily, ")")), "".concat(_Calendar.innerTokens.dateStructureFontSize), "var(".concat(_Calendar.tokens.calendarDayFontSize, ")")), "".concat(_Calendar.innerTokens.dateStructureFontWeight), "var(".concat(_Calendar.tokens.calendarDayFontWeight, ")")), "".concat(_Calendar.innerTokens.dateStructureFontLineHeight), "var(".concat(_Calendar.tokens.calendarDayFontLineHeight, ")")), "".concat(_Calendar.innerTokens.dateStructureFontLetterSpacing), "var(".concat(_Calendar.tokens.calendarDayFontLetterSpacing, ")")), "".concat(_Calendar.innerTokens.dateStructureFontStyle), "var(".concat(_Calendar.tokens.calendarDayFontStyle, ")")), "".concat(_Calendar.innerTokens.dateStructureSelectedFontWeight), "var(".concat(_Calendar.tokens.calendarDaySelectedFontWeight, ")")), "".concat(_Calendar.innerTokens.dateStructureWidth), "var(".concat(_Calendar.tokens.calendarDayItemWidth, ")")), "".concat(_Calendar.innerTokens.dateStructureHeight), "var(".concat(_Calendar.tokens.calendarDayItemHeight, ")")), "".concat(_Calendar.innerTokens.dateStructureBorderRadius), "var(".concat(_Calendar.tokens.calendarDayItemBorderRadius, ")"));
   var getSelectedDate = (0, _react.useCallback)(function (event) {
     var _event$currentTarget$ = event.currentTarget.dataset,
       day = _event$currentTarget$.day,
@@ -94,11 +81,14 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
     }
     onHoverDay === null || onHoverDay === void 0 || onHoverDay(selectedDate);
   }, [getSelectedDate, onHoverDay, value]);
-  var getRefs = function getRefs(element, isDayInCurrentMonth, i, j) {
+  var handleOnFocusDay = (0, _react.useCallback)(function () {
+    // заглушка будет убрана при реализации доступности
+  }, []);
+  var getRefs = (0, _react.useCallback)(function (element, isDayInCurrentMonth, i, j) {
     if (isDayInCurrentMonth) {
       outerRefs.current[i + offset][j] = element;
     }
-  };
+  }, [offset, outerRefs]);
   (0, _react.useEffect)(function () {
     if (selectedRef.current) {
       var _onSetSelectedRef$cur;
@@ -114,14 +104,13 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
   }, "\u0414\u043B\u044F \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u043C \u0434\u0430\u0442\u0430\u043C \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u043A\u043B\u0430\u0432\u0438\u0448\u0443 Shift.")), /*#__PURE__*/_react["default"].createElement(_CalendarDays.StyledFlex, {
     role: "row"
   }, _utils.SHORT_DAY_NAMES.map(function (name) {
-    return /*#__PURE__*/_react["default"].createElement(_DateStructureItem.DateStructureItem, {
+    return /*#__PURE__*/_react["default"].createElement(_CalendarDayItem.CalendarDayItem, {
       role: "columnheader",
       "aria-label": _utils.FULL_DAY_NAMES[name],
       key: name,
       dayOfWeek: true,
-      day: name,
-      style: dayItemTokens
-    }, name);
+      day: name
+    });
   })), days.map(function (day, i) {
     return /*#__PURE__*/_react["default"].createElement(_CalendarDays.StyledFlex, {
       role: "row",
@@ -137,12 +126,11 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
         _ref2$isOutOfMinMaxRa = _ref2.isOutOfMinMaxRange,
         isOutOfMinMaxRange = _ref2$isOutOfMinMaxRa === void 0 ? false : _ref2$isOutOfMinMaxRa,
         disabledArrowKey = _ref2.disabledArrowKey,
-        disabledDates = _ref2.disabledDates;
-      return /*#__PURE__*/_react["default"].createElement(_DateStructureItem.DateStructureItem, {
+        disabledMonths = _ref2.disabledMonths;
+      return /*#__PURE__*/_react["default"].createElement(_CalendarDayItem.CalendarDayItem, {
         ref: function ref(element) {
-          return getRefs(element, Boolean(isDayInCurrentMonth), i, j);
+          return getRefs(element, isDayInCurrentMonth, i, j);
         },
-        style: dayItemTokens,
         eventList: events,
         disabled: disabled,
         day: date.day,
@@ -158,11 +146,12 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
         sideInRange: (0, _utils.getSideInRange)(value, date, hoveredDay, isSelected),
         onClick: disabled ? undefined : handleOnChangeDay(i, j),
         onMouseOver: disabled ? undefined : handleOnHoverDay,
-        key: "StyledDay-".concat(i, "-").concat(j),
+        onFocus: handleOnFocusDay,
+        key: "StyledDay-".concat(j),
         role: "gridcell",
         disabledArrowKey: disabledArrowKey,
-        disabledMonths: disabledDates
-      }, date.day);
+        disabledMonths: disabledMonths
+      });
     }));
   }));
 };

package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -10,7 +10,6 @@ var _Icon = /*#__PURE__*/require("../../../_Icon");
 var _types = /*#__PURE__*/require("../../store/types");
 var _utils = /*#__PURE__*/require("../../utils");
 var _Calendar = /*#__PURE__*/require("../../Calendar.tokens");
-var _reducer = /*#__PURE__*/require("../../store/reducer");
 var _CalendarHeader = /*#__PURE__*/require("./CalendarHeader.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -30,15 +29,14 @@ var CalendarHeader = exports.CalendarHeader = function CalendarHeader(_ref) {
     onNext = _ref.onNext,
     onUpdateCalendarState = _ref.onUpdateCalendarState;
   var handleCalendarState = (0, _react.useCallback)(function () {
-    var newSize = isDouble ? _reducer.sizeMap.Months["double"] : _reducer.sizeMap.Months.single;
     if (type === _types.CalendarState.Days) {
-      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(_types.CalendarState.Months, newSize);
+      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(_types.CalendarState.Months, [3, 2]);
     }
-    if (type === _types.CalendarState.Months || type === _types.CalendarState.Quarters) {
-      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(_types.CalendarState.Years, newSize);
+    if (type === _types.CalendarState.Months) {
+      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(_types.CalendarState.Years, [3, 2]);
     }
   }, [type, onUpdateCalendarState]);
-  var getHeaderContent = (0, _react.useCallback)(function (date, secondPart) {
+  var getHeaderContent = (0, _react.useCallback)(function (date) {
     if (!date) {
       return '';
     }
@@ -48,22 +46,21 @@ var CalendarHeader = exports.CalendarHeader = function CalendarHeader(_ref) {
         size: size === 'xs' ? 'xs' : 's'
       })));
     }
-    if (type === _types.CalendarState.Months || type === _types.CalendarState.Quarters) {
+    if (type === _types.CalendarState.Months) {
       return /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, date.year, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       }));
     }
     if (type === _types.CalendarState.Years) {
-      var yearValue = secondPart ? startYear + 12 : startYear;
-      return /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, yearValue, "\u2014", yearValue + _utils.YEAR_RENDER_COUNT - 1, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureDownFill, {
+      return /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, startYear, "\u2014", startYear + _utils.YEAR_RENDER_COUNT - 1, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       }));
     }
     return '';
   }, [type, startYear, size]);
-  var currentCalendarType = (0, _utils.getCalendarType)(type);
+  var currentCalendarType = (0, _utils.getCalendarType)(isDouble ? _types.CalendarState.Days : type);
   var PreviousButton = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledArrow, {
       "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 ".concat(currentCalendarType),
@@ -87,14 +84,12 @@ var CalendarHeader = exports.CalendarHeader = function CalendarHeader(_ref) {
     }));
   }, [currentCalendarType, size, onNext]);
   return /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledCalendarHeader, null, isDouble ? /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledNavigation, null, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledDoubleHeaderWrapper, null, PreviousButton, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDouble, {
-    onClick: handleCalendarState,
     "aria-live": "polite"
   }, getHeaderContent(firstDate))), /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledDoubleHeaderWrapper, {
     className: _Calendar.classes.doubleHeaderLastDateWrapper
   }, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDouble, {
-    onClick: handleCalendarState,
     "aria-live": "polite"
-  }, getHeaderContent(secondDate, true)), NextButton)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeader, {
+  }, getHeaderContent(secondDate)), NextButton)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeader, {
     type: "button",
     "aria-live": "polite",
     id: "id-grid-label",

package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -40,12 +40,7 @@ var StyledNavigation = exports.StyledNavigation = /*#__PURE__*/_styledComponents
 })(["width:100%;", ";"], _mixins.flexCenter);
 var StyledDoubleHeaderWrapper = exports.StyledDoubleHeaderWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-6"
-})(["width:100%;display:grid;align-items:center;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], _Calendar.tokens.iconButtonWidth, _Calendar.tokens.iconButtonWidth, StyledArrow, _Calendar.classes.doubleHeaderLastDateWrapper, StyledArrow);
-var StyledHeaderDouble = exports.StyledHeaderDouble = /*#__PURE__*/_styledComponents["default"].button.withConfig({
+})(["width:100%;display:grid;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], _Calendar.tokens.iconButtonWidth, _Calendar.tokens.iconButtonWidth, StyledArrow, _Calendar.classes.doubleHeaderLastDateWrapper, StyledArrow);
+var StyledHeaderDouble = exports.StyledHeaderDouble = /*#__PURE__*/_styledComponents["default"].h4.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-7"
-})(["border:none;background-color:transparent;padding:0;outline:none;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;height:fit-content;", ";", ";"], _Calendar.tokens.calendarHeaderFontFamily, _Calendar.tokens.calendarHeaderFontSize, _Calendar.tokens.calendarHeaderFontStyle, _Calendar.tokens.calendarHeaderFontWeightBold, _Calendar.tokens.calendarHeaderFontLetterSpacing, _Calendar.tokens.calendarHeaderFontLineHeight, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarHeaderDateGap, /*#__PURE__*/String(_mixins.flexCenter), /*#__PURE__*/(0, _mixins2.addFocus)({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: '0.563rem'
-}));
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;", ";"], _Calendar.tokens.calendarHeaderFontFamily, _Calendar.tokens.calendarHeaderFontSize, _Calendar.tokens.calendarHeaderFontStyle, _Calendar.tokens.calendarHeaderFontWeightBold, _Calendar.tokens.calendarHeaderFontLetterSpacing, _Calendar.tokens.calendarHeaderFontLineHeight, _Calendar.tokens.calendarHeaderDateGap, /*#__PURE__*/String(_mixins.flexCenter));

package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js

@@ -6,16 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CalendarMonths = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../../../utils");
 var _hooks = /*#__PURE__*/require("../../hooks");
 var _Calendar = /*#__PURE__*/require("../../Calendar.tokens");
-var _utils = /*#__PURE__*/require("../../utils");
-var _DateStructureItem = /*#__PURE__*/require("../DateStructureItem/DateStructureItem");
 var _CalendarMonths = /*#__PURE__*/require("./CalendarMonths.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -27,79 +23,30 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 var CalendarMonths = exports.CalendarMonths = function CalendarMonths(_ref) {
   var currentDate = _ref.date,
-    value = _ref.value,
     selectIndexes = _ref.selectIndexes,
-    eventList = _ref.eventList,
-    disabledList = _ref.disabledList,
-    min = _ref.min,
-    max = _ref.max,
     outerRefs = _ref.outerRefs,
-    isDouble = _ref.isDouble,
-    isSecond = _ref.isSecond,
-    hoveredMonth = _ref.hoveredMonth,
     onChangeMonth = _ref.onChangeMonth,
-    onHoverMonth = _ref.onHoverMonth,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
-  var _useMonths = (0, _hooks.useMonths)({
-      date: currentDate,
-      value: value,
-      eventList: eventList,
-      disabledList: disabledList,
-      min: min,
-      max: max
-    }),
+  var _useMonths = (0, _hooks.useMonths)(currentDate),
     _useMonths2 = _slicedToArray(_useMonths, 2),
     months = _useMonths2[0],
     selected = _useMonths2[1];
   var selectedRef = (0, _react.useRef)(selected);
   var onSetSelectedRef = (0, _react.useRef)(onSetSelected);
-  var offset = isSecond ? _utils.ROW_MONTH_STEP : 0;
-  var monthItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(_Calendar.innerTokens.dateStructureFontFamily), "var(".concat(_Calendar.tokens.calendarMonthFontFamily, ")")), "".concat(_Calendar.innerTokens.dateStructureFontSize), "var(".concat(_Calendar.tokens.calendarMonthFontSize, ")")), "".concat(_Calendar.innerTokens.dateStructureFontWeight), "var(".concat(_Calendar.tokens.calendarMonthFontWeight, ")")), "".concat(_Calendar.innerTokens.dateStructureFontLineHeight), "var(".concat(_Calendar.tokens.calendarMonthFontLineHeight, ")")), "".concat(_Calendar.innerTokens.dateStructureFontLetterSpacing), "var(".concat(_Calendar.tokens.calendarMonthFontLetterSpacing, ")")), "".concat(_Calendar.innerTokens.dateStructureFontStyle), "var(".concat(_Calendar.tokens.calendarMonthFontStyle, ")")), "".concat(_Calendar.innerTokens.dateStructureSelectedFontWeight), "var(".concat(_Calendar.tokens.calendarMonthSelectedFontWeight, ")")), "".concat(_Calendar.innerTokens.dateStructureWidth), "var(".concat(_Calendar.tokens.calendarMonthItemWidth, ")")), "".concat(_Calendar.innerTokens.dateStructureHeight), "var(".concat(_Calendar.tokens.calendarMonthItemHeight, ")")), "".concat(_Calendar.innerTokens.dateStructureBorderRadius), "var(".concat(_Calendar.tokens.calendarMonthItemBorderRadius, ")"));
-  var getSelectedDate = (0, _react.useCallback)(function (event) {
-    var _event$currentTarget$ = event.currentTarget.dataset,
-      day = _event$currentTarget$.day,
-      monthIndex = _event$currentTarget$.monthIndex,
-      year = _event$currentTarget$.year;
-    var selectedDate = {
-      day: Number(day),
-      monthIndex: Number(monthIndex),
-      year: Number(year)
-    };
-    if (!(0, _utils.canSelectDate)(selectedDate, value, disabledList)) {
-      return;
-    }
-    return selectedDate;
-  }, [disabledList, value]);
-  var handleOnChangeMonth = (0, _react.useCallback)(function (i, j) {
-    return function (event) {
-      /**
-       * нужно вызвать stopImmediatePropagation для случаев, когда
-       * обработчик события onClick навешивается снаружи.
-       * Как, например, в компоненте Popup
-       */
-      event.nativeEvent.stopImmediatePropagation();
-      var selectedDate = getSelectedDate(event);
-      if (!selectedDate) {
-        return;
-      }
-      onChangeMonth(selectedDate, [i + offset, j]);
-      if ((0, _utils.isSelectProcess)(value)) {
-        onHoverMonth === null || onHoverMonth === void 0 || onHoverMonth(undefined);
-      }
-    };
-  }, [getSelectedDate, onChangeMonth, offset, value, onHoverMonth]);
-  var handleOnHoverMonth = (0, _react.useCallback)(function (event) {
-    var selectedDate = getSelectedDate(event);
-    var isSelectedDone = Array.isArray(value) && value[0] && value[1];
-    if (!selectedDate || !Array.isArray(value) || isSelectedDone) {
-      return;
-    }
-    onHoverMonth === null || onHoverMonth === void 0 || onHoverMonth(selectedDate);
-  }, [getSelectedDate, onHoverMonth, value]);
+  var handleOnChangeMonth = (0, _react.useCallback)(function (event) {
+    /**
+     * нужно вызвать stopImmediatePropagation для случаев, когда
+     * обработчик события onClick навешивается снаружи.
+     * Как, например, в компоненте Popup
+     */
+    event.nativeEvent.stopImmediatePropagation();
+    var monthIndex = event.currentTarget.dataset.monthIndex;
+    onChangeMonth(Number(monthIndex));
+  }, [onChangeMonth]);
   var getRefs = (0, _react.useCallback)(function (element, i, j) {
-    outerRefs.current[i + offset][j] = element;
-  }, [offset, outerRefs]);
+    outerRefs.current[i][j] = element;
+  }, [outerRefs]);
   (0, _react.useEffect)(function () {
     if (selectedRef.current) {
       var _onSetSelectedRef$cur;
@@ -119,40 +66,23 @@ var CalendarMonths = exports.CalendarMonths = function CalendarMonths(_ref) {
         monthIndex = _ref2.monthIndex,
         isSelected = _ref2.isSelected,
         isCurrent = _ref2.isCurrent,
-        monthFullName = _ref2.monthFullName,
-        date = _ref2.date,
-        events = _ref2.events,
-        isOutOfMinMaxRange = _ref2.isOutOfMinMaxRange,
-        inRange = _ref2.inRange,
-        disabled = _ref2.disabled,
-        disabledArrowKey = _ref2.disabledArrowKey,
-        disabledDates = _ref2.disabledDates;
-      return /*#__PURE__*/_react["default"].createElement(_DateStructureItem.DateStructureItem, {
+        monthFullName = _ref2.monthFullName;
+      var selectedClass = isSelected ? _Calendar.classes.selectedItem : undefined;
+      var currentClass = isCurrent ? _Calendar.classes.currentItem : undefined;
+      return /*#__PURE__*/_react["default"].createElement(_CalendarMonths.StyledMonthRoot, {
+        id: "month-test-".concat(i, "-").concat(j),
+        className: (0, _utils.cx)(selectedClass, currentClass, _Calendar.classes.selectableItem),
         ref: function ref(element) {
           return getRefs(element, i, j);
         },
-        style: monthItemTokens,
-        eventList: events,
-        disabled: disabled,
-        day: date.day,
-        year: date.year,
-        monthIndex: monthIndex,
-        isFocused: i + offset === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[0]) && j === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[1]) && !isOutOfMinMaxRange,
-        isSelected: isSelected,
-        isCurrent: isCurrent,
-        isDouble: isDouble,
-        isHovered: (0, _utils.isSameDay)(date, hoveredMonth),
-        inRange: (0, _utils.getInRange)(value, date, hoveredMonth, inRange),
-        sideInRange: (0, _utils.getSideInRange)(value, date, hoveredMonth, isSelected),
-        onClick: disabled ? undefined : handleOnChangeMonth(i, j),
-        onMouseOver: disabled ? undefined : handleOnHoverMonth,
-        key: "StyledMonth-".concat(i, "-").concat(j),
+        tabIndex: i === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[0]) && j === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[1]) ? 0 : -1,
+        onClick: handleOnChangeMonth,
+        "data-month-index": monthIndex,
+        "aria-selected": isSelected,
         role: "gridcell",
-        "aria-label": monthFullName,
-        disabledArrowKey: disabledArrowKey,
-        disabledMonths: disabledDates,
-        isDayInCurrentMonth: true
-      }, monthName);
+        key: "StyledMonth-".concat(i, "-").concat(j),
+        "aria-label": monthFullName
+      }, /*#__PURE__*/_react["default"].createElement(_CalendarMonths.StyledMonth, null, monthName));
     }));
   }));
 };

package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js

@@ -3,14 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFlex = exports.StyledCalendarMonths = void 0;
+exports.StyledMonthRoot = exports.StyledMonth = exports.StyledFlex = exports.StyledCalendarMonths = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Calendar = /*#__PURE__*/require("../../Calendar.tokens");
-var _mixins = /*#__PURE__*/require("../../mixins");
+var _mixins = /*#__PURE__*/require("../../../../mixins");
+var _mixins2 = /*#__PURE__*/require("../../mixins");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var StyledCalendarMonths = exports.StyledCalendarMonths = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-0"
 })(["padding:var(", ");box-sizing:border-box;"], _Calendar.tokens.calendarMonthsPadding);
 var StyledFlex = exports.StyledFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-1"
-})(["", ";"], /*#__PURE__*/String(_mixins.flexCenter));
+})(["", ";"], /*#__PURE__*/String(_mixins2.flexCenter));
+var StyledMonth = exports.StyledMonth = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-mx5ps9-2"
+})(["border-radius:calc(var(", ") - 0.125rem);", ";"], _Calendar.tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(_mixins2.flexCenter));
+var StyledMonthRoot = exports.StyledMonthRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-mx5ps9-3"
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], _Calendar.tokens.calendarMonthFontFamily, _Calendar.tokens.calendarMonthFontSize, _Calendar.tokens.calendarMonthFontStyle, _Calendar.tokens.calendarMonthFontWeight, _Calendar.tokens.calendarMonthFontLetterSpacing, _Calendar.tokens.calendarMonthFontLineHeight, _Calendar.tokens.calendarMonthItemHeight, _Calendar.tokens.calendarMonthItemWidth, _Calendar.tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(_mixins2.flexCenter), /*#__PURE__*/(0, _mixins2.addSelected)({
+  minWidth: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarMonthItemWidth, ") - 0.25rem)"),
+  minHeight: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarMonthItemHeight, ") - 0.25rem)"),
+  selectedFontWeight: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarMonthSelectedFontWeight, ")"),
+  selectedBackground: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarSelectedItemBackground, ")"),
+  selectedColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarSelectedItemColor, ")"),
+  selectableBackgroundHover: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarSelectableItemBackgroundHover, ")"),
+  currentBorderColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarCurrentItemBorderColor, ")"),
+  activeBackground: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarActiveItemBackground, ")"),
+  activeColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarActiveItemColor, ")")
+}), /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
+}), _Calendar.classes.currentItem, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.1875rem',
+  outlineColor: /*#__PURE__*/"var(".concat(_Calendar.tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Calendar.tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
+}));