@salutejs/plasma-new-hope 0.88.0-canary.1223.9398061354.0 → 0.88.0-canary.1224.9413433725.0

package/styled-components/es/components/Calendar/Calendar.tokens.js

@@ -9,51 +9,87 @@ export var classes = {
   selectableItem: 'item-selectable',
   selectedItem: 'item-selected',
   currentItem: 'item-current',
-  hoveredItem: 'item-hovered'
+  hoveredItem: 'item-hovered',
+  doubleHeaderDate: 'double-header-date',
+  doubleHeaderLastDateWrapper: 'double-header--last-date-wrapper'
 };
 export var tokens = {
-  calendarBackgroundColor: '--plasma-calendar-background',
-  calendarHeaderArrowContainerWidth: '--plasma-calendar-arrow-container-width',
-  calendarItemBorderRadius: '--plasma-calendar-item-border-radius',
-  calendarSelectedItemBackground: '--plasma-calendar-selected-item-background',
-  calendarSelectedItemColor: '--plasma-calendar-selected-item-color',
-  calendarSelectableItemBackgroundHover: '--plasma-calendar-selectable-item-bg-hover',
-  calendarCurrentItemBorderColor: '--plasma-calendar-current-item-border-color',
-  calendarCurrentItemBackgroundHover: '--plasma-calendar-current-item-bg-hover',
-  calendarCurrentItemColorHover: '--plasma-calendar-current-item-color-hover',
-  calendarCurrentItemChildBackgroundHover: '--plasma-calendar-current-item-child-bg-hover',
-  calendarActiveItemBackground: '--plasma-calendar-active-item-bg',
-  calendarActiveItemColor: '--plasma-calendar-active-item-color',
-  calendarHoveredItemBackground: '--plasma-calendar-hovered-item-bg',
-  calendarHoveredItemColor: '--plasma-calendar-hovered-item-color',
-  calendarSeparatorBackground: '--plasma-calendar-separator-background',
-  calendarRangeBackground: '--plasma-calendar-range-background',
-  calendarOutlineFocusColor: '--plasma-calendar-outline-focus-color',
-  calendarContentPrimaryColor: '--plasma-calendar-content-primary-color',
-  calendarContentSecondaryColor: '--plasma-calendar-content-secondary-color',
-  calendarHeaderFontFamily: '--plasma-calendar-header-font-family',
-  calendarHeaderFontSize: '--plasma-calendar-header-font-size',
-  calendarHeaderFontStyle: '--plasma-calendar-header-font-style',
-  calendarHeaderFontLetterSpacing: '--plasma-calendar-header-font-letter-spacing',
-  calendarHeaderFontLineHeight: '--plasma-calendar-header-line-height',
-  calendarHeaderFontWeight: '--plasma-calendar-header-font-weight',
-  calendarHeaderFontWeightBold: '--plasma-calendar-header-font-weight-bold',
+  calendarWidth: '--plasma-calendar-width',
+  calendarHeight: '--plasma-calendar-height',
+  /* Токены размера сетки лет */
+  calendarYearsPadding: '--plasma-calendar-years-padding',
+  calendarYearItemBorderRadius: '--plasma-calendar-year-item-border-radius',
+  calendarYearItemWidth: '--plasma-calendar-year-item-width',
+  calendarYearItemHeight: '--plasma-calendar-year-item-height',
   calendarYearFontFamily: '--plasma-calendar-year-font-family',
   calendarYearFontSize: '--plasma-calendar-year-font-size',
   calendarYearFontStyle: '--plasma-calendar-year-font-style',
   calendarYearFontLetterSpacing: '--plasma-calendar-year-font-letter-spacing',
   calendarYearFontLineHeight: '--plasma-calendar-year-line-height',
   calendarYearFontWeight: '--plasma-calendar-year-font-weight',
+  calendarYearSelectedFontWeight: '--plasma-calendar-year-selected-font-weight',
+  /* Токены размера сетки месяцев */
+  calendarMonthsPadding: '--plasma-calendar-months-padding',
+  calendarMonthItemBorderRadius: '--plasma-calendar-month-item-border-radius',
+  calendarMonthItemWidth: '--plasma-calendar-month-item-width',
+  calendarMonthItemHeight: '--plasma-calendar-month-item-height',
   calendarMonthFontFamily: '--plasma-calendar-month-font-family',
   calendarMonthFontSize: '--plasma-calendar-month-font-size',
   calendarMonthFontStyle: '--plasma-calendar-month-font-style',
   calendarMonthFontLetterSpacing: '--plasma-calendar-month-font-letter-spacing',
   calendarMonthFontLineHeight: '--plasma-calendar-month-line-height',
   calendarMonthFontWeight: '--plasma-calendar-month-font-weight',
+  calendarMonthSelectedFontWeight: '--plasma-calendar-month-selected-font-weight',
+  /* Токены размера сетки дней */
+  calendarDaysPadding: '--plasma-calendar-days-padding',
+  calendarDayItemBorderRadius: '--plasma-calendar-day-item-border-radius',
+  calendarDayItemWidth: '--plasma-calendar-day-item-width',
+  calendarDayItemHeight: '--plasma-calendar-day-item-height',
   calendarDayFontFamily: '--plasma-calendar-day-font-family',
   calendarDayFontSize: '--plasma-calendar-day-font-size',
   calendarDayFontStyle: '--plasma-calendar-day-font-style',
   calendarDayFontLetterSpacing: '--plasma-calendar-day-font-letter-spacing',
   calendarDayFontLineHeight: '--plasma-calendar-day-line-height',
-  calendarDayFontWeight: '--plasma-calendar-day-font-weight'
+  calendarDayFontWeight: '--plasma-calendar-day-font-weight',
+  calendarDaySelectedFontWeight: '--plasma-calendar-day-selected-font-weight',
+  calendarDayOfWeekColor: '--plasma-calendar-day-of-the-week-color',
+  /* Токены шапки календаря */
+  calendarHeaderArrowGap: '--plasma-calendar-arrow-container-gap',
+  calendarHeaderPadding: '--plasma-calendar-header-padding',
+  calendarHeaderDateGap: '--plasma-calendar-header-date-gap',
+  calendarHeaderFontFamily: '--plasma-calendar-header-font-family',
+  calendarHeaderFontSize: '--plasma-calendar-header-font-size',
+  calendarHeaderFontStyle: '--plasma-calendar-header-font-style',
+  calendarHeaderFontLetterSpacing: '--plasma-calendar-header-font-letter-spacing',
+  calendarHeaderFontLineHeight: '--plasma-calendar-header-line-height',
+  calendarHeaderFontWeight: '--plasma-calendar-header-font-weight',
+  calendarHeaderFontWeightBold: '--plasma-calendar-header-font-weight-bold',
+  /* Токены стрелок навигации календаря */
+  iconButtonColor: '--plasma-calendar-icon-button-color',
+  iconButtonBackgroundColor: '--plasma-calendar-icon-button-background',
+  iconButtonColorHover: '--plasma-calendar-icon-button-color-hover',
+  iconButtonBackgroundColorHover: '--plasma-calendar-icon-button-background-hover',
+  iconButtonColorActive: '--plasma-calendar-icon-button-color-active',
+  iconButtonBackgroundColorActive: '--plasma-calendar-icon-button-background-active',
+  iconButtonHeight: '--plasma-calendar-icon-button-height',
+  iconButtonWidth: '--plasma-calendar-icon-button-width',
+  iconButtonPadding: '--plasma-calendar-icon-button-padding',
+  iconButtonRadius: '--plasma-calendar-icon-button-radius',
+  calendarBackgroundColor: '--plasma-calendar-background',
+  calendarSelectedItemBackground: '--plasma-calendar-selected-item-background',
+  calendarSelectedItemColor: '--plasma-calendar-selected-item-color',
+  calendarSelectableItemBackgroundHover: '--plasma-calendar-selectable-item-bg-hover',
+  calendarCurrentItemBorderColor: '--plasma-calendar-current-item-border-color',
+  calendarCurrentItemBackgroundHover: '--plasma-calendar-current-item-bg-hover',
+  calendarCurrentItemColorHover: '--plasma-calendar-current-item-color-hover',
+  calendarCurrentItemChildBackgroundHover: '--plasma-calendar-current-item-child-bg-hover',
+  calendarActiveItemBackground: '--plasma-calendar-active-item-bg',
+  calendarActiveItemColor: '--plasma-calendar-active-item-color',
+  calendarHoveredItemBackground: '--plasma-calendar-hovered-item-bg',
+  calendarHoveredItemColor: '--plasma-calendar-hovered-item-color',
+  calendarSeparatorBackground: '--plasma-calendar-separator-background',
+  calendarRangeBackground: '--plasma-calendar-range-background',
+  calendarOutlineFocusColor: '--plasma-calendar-outline-focus-color',
+  calendarContentPrimaryColor: '--plasma-calendar-content-primary-color',
+  calendarContentSecondaryColor: '--plasma-calendar-content-secondary-color'
 };

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
-import React, { useCallback, useMemo, useReducer, useState, forwardRef } from 'react';
+import React, { useCallback, useMemo, useReducer, useState, forwardRef, useEffect } from 'react';
 import { getInitialState, reducer } from '../store/reducer';
 import { ActionType, CalendarState } from '../store/types';
 import { isValueUpdate, YEAR_RENDER_COUNT } from '../utils';
@@ -213,6 +213,11 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       });
       onKeyDown(event);
     }, [onKeyDown]);
+    useEffect(function () {
+      if (!prevValue) {
+        setPrevValue(value);
+      }
+    }, [value, prevValue]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,
       "aria-label": "\u0412\u044B\u0431\u043E\u0440 \u0434\u0430\u0442\u044B"
@@ -223,6 +228,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       "aria-live": "assertive",
       "aria-relevant": "additions"
     }, "\u0414\u0430\u043B\u0435\u0435 \u043D\u0435\u0442 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u0434\u0430\u0442."), /*#__PURE__*/React.createElement(CalendarHeader, {
+      size: rest.size,
       firstDate: date,
       startYear: startYear,
       type: calendarState,

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.styles.js

@@ -2,7 +2,8 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'styled-components';
 import styled from 'styled-components';
-export var StyledCalendar = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    user-select: none;\n    z-index: 1;\n\n    width: 19.5rem;\n    height: 19.5rem;\n"])));
+import { tokens } from '../Calendar.tokens';
+export var StyledCalendar = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    user-select: none;\n    z-index: 1;\n\n    width: var(", ");\n    height: var(", ");\n"])), tokens.calendarWidth, tokens.calendarHeight);
 export var IsOutOfRange = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1xkgu4c-0"
 })(["position:absolute;padding:0;margin:0;height:0;width:0;border:0;overflow:hidden;clip:rect(0 0 0 0);"]);

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -137,6 +137,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       "aria-label": "\u0412\u044B\u0431\u043E\u0440 \u0434\u0430\u0442\u044B"
     }, rest), /*#__PURE__*/React.createElement(CalendarHeader, {
       isDouble: true,
+      size: rest.size,
       firstDate: firstDate,
       secondDate: secondDate,
       onPrev: handlePrev,

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js

@@ -3,10 +3,10 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { css } from 'styled-components';
 import styled from 'styled-components';
 import { tokens } from '../Calendar.tokens';
-export var StyledCalendar = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    user-select: none;\n    z-index: 1;\n\n    display: flex;\n    flex-direction: column;\n\n    width: 39rem;\n    height: 19.5rem;\n"])));
+export var StyledCalendar = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    user-select: none;\n    z-index: 1;\n\n    display: flex;\n    flex-direction: column;\n\n    width: var(", ");\n    height: var(", ");\n"])), tokens.calendarWidth, tokens.calendarHeight);
 export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1dp3a9f-0"
-})(["background-color:var(", ");min-width:0.063rem;margin:0.5rem 0 1.5rem;"], tokens.calendarSeparatorBackground);
+})(["background-color:var(", ");min-width:0.063rem;margin:0.5rem 1rem 0 1rem;"], tokens.calendarSeparatorBackground);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1dp3a9f-1"
 })(["display:flex;"]);

package/styled-components/es/components/Calendar/hooks/useDays.js

@@ -227,5 +227,5 @@ export var useDays = function useDays(date, value, eventList, disabledList, min,
       return getMatrix(modifiedDays);
     }
     return getMatrix(days);
-  }, [date, value, eventList, disabledList, max, min]);
+  }, [date, value, eventList, disabledList, max, min, includeEdgeDates]);
 };

package/styled-components/es/components/Calendar/mixins/active.js

@@ -0,0 +1,6 @@
+export var addActive = function addActive(args) {
+  var activeBackground = args.activeBackground,
+    activeColor = args.activeColor,
+    activeFontWeight = args.activeFontWeight;
+  return "\n        &:active {\n            background-color: ".concat(activeBackground, ";\n            color: ").concat(activeColor, ";\n            font-weight: ").concat(activeFontWeight, ";\n        }\n    ");
+};

package/styled-components/es/components/Calendar/mixins/flex.js

@@ -0,0 +1,2 @@
+export var flexCenter = "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n";
+export var flexSpaceBetween = "\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n";

package/styled-components/es/components/Calendar/mixins/index.js

@@ -1,27 +1,3 @@
-import styled from 'styled-components';
-import { tokens } from '../Calendar.tokens';
-import { addFocus } from '../../../mixins';
-export var flexCenter = "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n";
-export var flexSpaceBetween = "\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n";
-
-/**
- * Миксин для установки синтетического фокуса на выбранной кнопке.
- */
-export var buttonFocus = /*#__PURE__*/styled.button.withConfig({
-  componentId: "plasma-new-hope__sc-1tntqjy-0"
-})(["border:none;background-color:transparent;padding:0;outline:none;", ";"], /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: '0.563rem'
-}));
-
-/**
- * Миксины для изменения стиля выбранного дня.
- */
-var active = "\n    &:active {\n        background-color: var(--calendar_private-active-background);\n        color: var(--calendar_private-active-color);\n        font-weight: var(--plasma-typo-body-s-bold-font-weight);\n    }\n";
-
-/*
- *  Если использовать токены и классы из ./tokens rollup ругается на этот миксин
- */
-export var selectedMixin = /*#__PURE__*/"\n    outline: none;\n    cursor: pointer;\n\n    &:hover:not(.item-selected) {\n        background-color: var(--calendar_private-selectable-background-hover);\n        \n        ".concat(String(active), ";\n    };\n\n    &.item-selected {\n        border: 0;\n        background-color: var(--calendar_private-selected-background);\n        color: var(--calendar_private-selected-color);\n        cursor: default;\n        font-weight: var(--plasma-typo-body-s-bold-font-weight);\n    };\n\n    &.item-current {\n        border: 0.063rem solid var(--calendar_private-current-border-color);\n\n        &:not(.item-selected):hover {\n            background-color: var(--calendar_private-current-background-hover);\n            color: var(--calendar_private-current-color-hover);\n\n            & > div:first-of-type {\n                background-color: var(--calendar_private-current-child-background-hover);\n                min-width: var(--calendar_private-selected-min-width);\n                min-height: var(--calendar_private-selected-min-height);\n            }\n        \n            ").concat(String(active), ";\n        }\n    };\n\n    &.item-hovered, &.item-hovered:hover {\n        background-color: var(--calendar_private-hovered-background);\n        color: var(--calendar_private-hovered-color);\n        cursor: pointer;\n        font-weight: var(--plasma-typo-body-s-bold-font-weight);\n        ").concat(String(active), ";\n    }\n\n    ").concat( /*#__PURE__*/String(active), ";\n");
+export { addActive } from './active';
+export { addSelected } from './selected';
+export * from './flex';

package/styled-components/es/components/Calendar/mixins/selected.js

@@ -0,0 +1,23 @@
+import { classes } from '../Calendar.tokens';
+import { addActive } from './active';
+export var addSelected = function addSelected(args) {
+  var minWidth = args.minWidth,
+    minHeight = args.minHeight,
+    selectedFontWeight = args.selectedFontWeight,
+    selectedBackground = args.selectedBackground,
+    selectedColor = args.selectedColor,
+    selectableBackgroundHover = args.selectableBackgroundHover,
+    currentBorderColor = args.currentBorderColor,
+    currentBackgroundHover = args.currentBackgroundHover,
+    currentColorHover = args.currentColorHover,
+    currentChildBackgroundHover = args.currentChildBackgroundHover,
+    hoveredBackground = args.hoveredBackground,
+    hoveredColor = args.hoveredColor,
+    activeBackground = args.activeBackground,
+    activeColor = args.activeColor;
+  return "\n        outline: none;\n        cursor: pointer;\n\n        &:hover {\n            background-color: ".concat(selectableBackgroundHover, ";\n        };\n        \n\n        &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n            background-color: ").concat(hoveredBackground, ";\n            color: ").concat(hoveredColor, ";\n            cursor: pointer;\n            font-weight: ").concat(selectedFontWeight, ";\n        }\n\n        &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n            border: 0;\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: default;\n            font-weight: ").concat(selectedFontWeight, ";\n        };\n        \n        ").concat(addActive({
+    activeBackground: activeBackground,
+    activeColor: activeColor,
+    activeFontWeight: selectedFontWeight
+  }), ";\n\n        &.").concat(classes.currentItem, " {\n            border: 0.063rem solid ").concat(currentBorderColor, ";\n\n            &.").concat(classes.selectedItem, " {\n                background-color: initial;\n                color: ").concat(selectedColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n\n            &:not(.").concat(classes.selectedItem, "):hover {\n                background-color: ").concat(currentBackgroundHover, ";\n                color: ").concat(currentColorHover, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(currentChildBackgroundHover, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n\n                &:active > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                }\n            }\n\n            &.").concat(classes.hoveredItem, ":not(.").concat(classes.selectedItem, "):hover {\n                background-color: initial;\n                color: ").concat(hoveredColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(hoveredBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n        };\n    ");
+};

package/styled-components/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js

@@ -1,31 +1,28 @@
 import styled from 'styled-components';
-import { flexCenter, selectedMixin } from '../../mixins';
 import { classes, tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
+import { addSelected, flexCenter } from '../../mixins';
 var inRange = function inRange() {
-  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 2.5rem;\n        height: 1.875rem;\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
+  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 100%;\n        height: calc(100% - 0.125rem);\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
 };
 var sideInRange = function sideInRange() {
-  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 0.313rem;\n        height: 1.875rem;\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
+  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(tokens.calendarRangeBackground, ");\n    }\n");
 };
 export var StyledDay = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2y5uj0-0"
-})(["border-radius:0.375rem;", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(classes.dayInRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(classes.daySideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(classes.daySideLeft), function (_ref) {
+})(["border-radius:var(", ");", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(classes.dayInRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(classes.daySideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(classes.daySideLeft), function (_ref) {
   var offset = _ref.offset;
   return "".concat(offset, "px");
 }, /*#__PURE__*/String(classes.daySideRight), function (_ref2) {
   var offset = _ref2.offset;
   return "".concat(offset, "px");
 });
-var dayOfWeek = function dayOfWeek() {
-  return "\n    color: var(--plasma-colors-tertiary);\n";
-};
 var disabledDay = function disabledDay() {
   return "\n    cursor: not-allowed;\n    opacity: 0.4;\n\n    ".concat(addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
-    outlineRadius: '0.563rem'
+    outlineRadius: "calc(var(".concat(tokens.calendarDayItemBorderRadius, ") - 0.125rem)")
   }), ";\n");
 };
 var disabledCurrentDay = function disabledCurrentDay() {
@@ -33,19 +30,34 @@ var disabledCurrentDay = function disabledCurrentDay() {
 };
 export var StyledDayRoot = /*#__PURE__*/styled.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:2.5rem;min-height:2rem;border-radius:var(", ");", ";color:", ";visibility:", ";&.", "{--calendar_private-selected-min-width:2.25rem;--calendar_private-selected-min-height:1.75rem;--calendar_private-selected-background:var(", ");--calendar_private-selected-color:var(", ");--calendar_private-selectable-background-hover:var(", ");--calendar_private-current-border-color:var(", ");--calendar_private-current-background-hover:var(", ");--calendar_private-current-color-hover:var(", ");--calendar_private-current-child-background-hover:var(", ");--calendar_private-active-background:var(", ");--calendar_private-active-color:var(", ");--calendar_private-hovered-background:var(", ");--calendar_private-hovered-color:var(", ");", ";", ";}&.", "{", ";}&.", "{", ";}&.", "{", ";}"], tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontWeight, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), function (_ref3) {
+})(["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(", ");}&.", "{", ";}&.", "{", ";}"], tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontWeight, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(flexCenter), function (_ref3) {
   var isDayInCurrentMonth = _ref3.isDayInCurrentMonth;
   return isDayInCurrentMonth ? "var(".concat(tokens.calendarContentPrimaryColor, ")") : "var(".concat(tokens.calendarContentSecondaryColor, ")");
 }, function (_ref4) {
   var isDayInCurrentMonth = _ref4.isDayInCurrentMonth,
     isDouble = _ref4.isDouble;
   return !isDayInCurrentMonth && isDouble ? 'hidden' : 'visible';
-}, /*#__PURE__*/String(classes.selectableItem), tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, /*#__PURE__*/addFocus({
+}, /*#__PURE__*/String(classes.selectableItem), /*#__PURE__*/addSelected({
+  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemWidth, ") - 0.25rem)"),
+  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemHeight, ") - 0.25rem)"),
+  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarDaySelectedFontWeight, ")"),
+  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
+  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
+  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
+  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
+  currentBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBackgroundHover, ")"),
+  currentColorHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemColorHover, ")"),
+  currentChildBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemChildBackgroundHover, ")"),
+  hoveredBackground: /*#__PURE__*/"var(".concat(tokens.calendarHoveredItemBackground, ")"),
+  hoveredColor: /*#__PURE__*/"var(".concat(tokens.calendarHoveredItemColor, ")"),
+  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
+  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
+}), /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.063rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: '0.563rem'
-}), /*#__PURE__*/String(selectedMixin), /*#__PURE__*/String(classes.dayOfWeek), /*#__PURE__*/dayOfWeek(), /*#__PURE__*/String(classes.dayDisabled), /*#__PURE__*/disabledDay(), /*#__PURE__*/String(classes.dayDisabledCurrent), /*#__PURE__*/disabledCurrentDay());
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") - 0.125rem)")
+}), classes.dayOfWeek, tokens.calendarDayOfWeekColor, classes.dayDisabled, /*#__PURE__*/disabledDay(), classes.dayDisabledCurrent, /*#__PURE__*/disabledCurrentDay());
 export var StyledEvents = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2y5uj0-2"
 })(["display:flex;position:absolute;bottom:0.25rem;"]);

package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
 import { flexCenter } from '../../mixins';
+import { tokens } from '../../Calendar.tokens';
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-3ydwr5-0"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledCalendarDays = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-3ydwr5-1"
-})(["outline:none;padding:0.5rem 1rem 1.5rem;box-sizing:border-box;"]);
+})(["outline:none;padding:var(", ");box-sizing:border-box;"], tokens.calendarDaysPadding);
 export var StyledCalendarDaysHint = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-3ydwr5-2"
 })(["display:none;"]);

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

@@ -1,9 +1,9 @@
-var _IconDisclosureLeft, _IconDisclosureRight;
 import React, { useCallback, useMemo } from 'react';
-import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
-import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledHeader, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
+import { classes } from '../../Calendar.tokens';
+import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
 
 /**
  * Компонент шапки календаря.
@@ -13,6 +13,7 @@ export var CalendarHeader = function CalendarHeader(_ref) {
     type = _ref$type === void 0 ? 'Days' : _ref$type,
     _ref$startYear = _ref.startYear,
     startYear = _ref$startYear === void 0 ? 0 : _ref$startYear,
+    size = _ref.size,
     firstDate = _ref.firstDate,
     secondDate = _ref.secondDate,
     isDouble = _ref.isDouble,
@@ -32,42 +33,50 @@ export var CalendarHeader = function CalendarHeader(_ref) {
       return '';
     }
     if (type === CalendarState.Days) {
-      return "".concat(MONTH_NAMES[date.monthIndex], " ").concat(date.year);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderDate, null, MONTH_NAMES[date.monthIndex]), /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
+        size: size === 'xs' ? 'xs' : 's'
+      })));
     }
     if (type === CalendarState.Months) {
-      return "".concat(date.year);
+      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
+        size: size === 'xs' ? 'xs' : 's'
+      }));
     }
     if (type === CalendarState.Years) {
-      return "".concat(startYear, "\u2014").concat(startYear + YEAR_RENDER_COUNT - 1);
+      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, startYear, "\u2014", startYear + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
+        size: size === 'xs' ? 'xs' : 's'
+      }));
     }
     return '';
-  }, [type, startYear]);
+  }, [type, startYear, size]);
   var currentCalendarType = getCalendarType(isDouble ? CalendarState.Days : type);
   var PreviousButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledArrow, {
-      type: "button",
       "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 ".concat(currentCalendarType),
-      tabIndex: 0,
       onClick: function onClick() {
         return onPrev();
       }
-    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, null)));
-  }, [currentCalendarType, onPrev]);
+    }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
+      size: size === 'xs' ? 'xs' : 's'
+    }));
+  }, [currentCalendarType, size, onPrev]);
   var NextButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledArrow, {
-      type: "button",
       "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 ".concat(currentCalendarType),
-      tabIndex: 0,
       onClick: function onClick() {
         return onNext();
       }
-    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React.createElement(IconDisclosureRight, null)));
-  }, [currentCalendarType, onNext]);
-  return /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isDouble ? /*#__PURE__*/React.createElement(StyledNavigation, null, PreviousButton, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
+    }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+      size: size === 'xs' ? 'xs' : 's'
+    }));
+  }, [currentCalendarType, size, onNext]);
+  return /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isDouble ? /*#__PURE__*/React.createElement(StyledNavigation, null, /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, null, PreviousButton, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
     "aria-live": "polite"
-  }, getHeaderContent(firstDate)), /*#__PURE__*/React.createElement(StyledHeaderDouble, {
+  }, getHeaderContent(firstDate))), /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, {
+    className: classes.doubleHeaderLastDateWrapper
+  }, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
     "aria-live": "polite"
-  }, getHeaderContent(secondDate)), NextButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
+  }, getHeaderContent(secondDate)), NextButton)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
     type: "button",
     "aria-live": "polite",
     id: "id-grid-label",

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

@@ -1,21 +1,39 @@
 import styled from 'styled-components';
-import { buttonFocus, flexCenter } from '../../mixins';
-import { tokens } from '../../Calendar.tokens';
+import { classes, tokens } from '../../Calendar.tokens';
+import { component, mergeConfig } from '../../../../engines';
+import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
+import { flexCenter } from '../../mixins';
+import { addFocus } from '../../../../mixins';
+var mergedIconButtonConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
+var IconButton = /*#__PURE__*/component(mergedIconButtonConfig);
 export var StyledCalendarHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-0"
-})(["padding:1rem 1.5rem 0;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight);
-export var StyledHeader = /*#__PURE__*/styled(buttonFocus).withConfig({
+})(["display:flex;justify-content:space-between;align-items:center;"]);
+export var StyledHeader = /*#__PURE__*/styled.button.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-1"
-})(["color:var(", ");cursor:pointer;padding:0.5rem 0;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarContentPrimaryColor, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight);
-export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
+})(["border:none;background-color:transparent;padding:0;outline:none;color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");padding:var(", ");cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;", ";"], tokens.calendarContentPrimaryColor, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: '0.563rem'
+}));
+export var StyledHeaderDate = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-2"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");margin-top:0;margin-bottom:0;padding:0.5rem 0;flex:1;", ";&:first-of-type{margin-right:3rem;}&:last-of-type{margin-left:3rem;}"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, /*#__PURE__*/String(flexCenter));
+})(["", ";pointer-events:none;"], flexCenter);
 export var StyledArrows = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-3"
-})(["padding:0.5rem 0;width:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarHeaderArrowContainerWidth);
-export var StyledArrow = /*#__PURE__*/styled(buttonFocus).withConfig({
+})(["display:flex;gap:var(", ");"], tokens.calendarHeaderArrowGap);
+
+// NOTE: переопределение токенов IconButton
+export var StyledArrow = /*#__PURE__*/styled(IconButton).withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-4"
-})(["display:flex;cursor:pointer;"]);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-5"
-})(["width:100%;", ";"], /*#__PURE__*/String(flexCenter));
+})(["width:100%;", ";"], flexCenter);
+export var StyledDoubleHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-186pzg3-6"
+})(["width:100%;display:grid;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
+export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
+  componentId: "plasma-new-hope__sc-186pzg3-7"
+})(["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;", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderDateGap, /*#__PURE__*/String(flexCenter));

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

@@ -60,7 +60,7 @@ export var CalendarMonths = function CalendarMonths(_ref) {
         isCurrent = _ref2.isCurrent,
         monthFullName = _ref2.monthFullName;
       var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = !isSelected && isCurrent ? classes.currentItem : undefined;
+      var currentClass = isCurrent ? classes.currentItem : undefined;
       return /*#__PURE__*/React.createElement(StyledMonthRoot, {
         id: "month-test-".concat(i, "-").concat(j),
         className: cx(selectedClass, currentClass, classes.selectableItem),

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

@@ -1,22 +1,36 @@
 import styled from 'styled-components';
-import { flexCenter, selectedMixin } from '../../mixins';
 import { tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
+import { addSelected, flexCenter } from '../../mixins';
 export var StyledCalendarMonths = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-0"
-})(["padding:0.5rem 1.5rem 1.5rem;box-sizing:border-box;"]);
+})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarMonthsPadding);
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-1"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledMonth = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-2"
-})(["border-radius:0.438rem;", ";"], /*#__PURE__*/String(flexCenter));
-var selectable = /*#__PURE__*/"\n    ".concat(addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.063rem',
-  outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: '0.563rem'
-}), ";\n\n    --calendar_private-selected-min-width: 5.25rem;\n    --calendar_private-selected-min-height: 3.25rem;\n    --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n    --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n    --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n    --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n    --calendar_private-active-color-hover: var(").concat(tokens.calendarActiveItemColor, ");\n    --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n    --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n\n    ").concat( /*#__PURE__*/String(selectedMixin), ";\n");
+})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter));
 export var StyledMonthRoot = /*#__PURE__*/styled.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:3.5rem;border-radius:var(", ");flex:1;", ";", ";"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(selectable));
+})(["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(", ");", ";", ";", ";"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthItemHeight, tokens.calendarMonthItemWidth, tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
+  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemWidth, ") - 0.25rem)"),
+  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemHeight, ") - 0.25rem)"),
+  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarMonthSelectedFontWeight, ")"),
+  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
+  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
+  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
+  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
+  currentBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBackgroundHover, ")"),
+  currentColorHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemColorHover, ")"),
+  currentChildBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemChildBackgroundHover, ")"),
+  hoveredBackground: /*#__PURE__*/"var(".concat(tokens.calendarHoveredItemBackground, ")"),
+  hoveredColor: /*#__PURE__*/"var(".concat(tokens.calendarHoveredItemColor, ")"),
+  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
+  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
+}), /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.063rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") - 0.125rem)")
+}));

package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.js

@@ -59,7 +59,7 @@ export var CalendarYears = function CalendarYears(_ref) {
         isSelected = _ref2.isSelected,
         isCurrent = _ref2.isCurrent;
       var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = !isSelected && isCurrent ? classes.currentItem : undefined;
+      var currentClass = isCurrent ? classes.currentItem : undefined;
       return /*#__PURE__*/React.createElement(StyledYearRoot, {
         className: cx(selectedClass, currentClass, classes.selectableItem),
         ref: function ref(element) {