@salutejs/plasma-new-hope 0.324.0-dev.0 → 0.325.0-canary.1972.15208152297.0

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -175,6 +175,9 @@ export const Default: StoryObj<StoryPropsDefault> = {
         valueSuccess: false,
         lang: 'ru',
         format: 'DD.MM.YYYY',
+        calendarContainerWidth: 0,
+        calendarContainerHeight: 0,
+        stretched: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -260,12 +263,8 @@ const StoryRange = ({
                 showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
             }
             onToggle={(is) => setIsOpen(is)}
-            onChangeFirstValue={(e, currentValue) => {
-                onChangeFirstValue(e, currentValue);
-            }}
-            onChangeSecondValue={(e, currentValue) => {
-                onChangeSecondValue(e, currentValue);
-            }}
+            onChangeFirstValue={onChangeFirstValue}
+            onChangeSecondValue={onChangeSecondValue}
             lang={lang}
             min={min}
             max={max}
@@ -301,6 +300,9 @@ export const Range: StoryObj<StoryPropsRange> = {
         secondTextfieldTextAfter: '',
         size: 'l',
         view: 'default',
+        calendarContainerWidth: 0,
+        calendarContainerHeight: 0,
+        stretched: false,
         isDoubleCalendar: false,
         closeAfterDateSelect: true,
         dividerVariant: 'dash',

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

@@ -13,7 +13,8 @@ export var classes = {
   hoveredItem: 'item-hovered',
   doubleHeaderDate: 'double-header-date',
   doubleHeaderLastDateWrapper: 'double-header--last-date-wrapper',
-  disabledPrevButton: 'disabled-prev-button'
+  disabledPrevButton: 'disabled-prev-button',
+  stretched: 'plasma-calendar-stretched'
 };
 export var innerTokens = {
   dateStructureFontFamily: '--plasma-calendar-date-structure-font-family',
@@ -23,20 +24,16 @@ export var innerTokens = {
   dateStructureFontLetterSpacing: '--plasma-calendar-date-structure-font-letter-spacing',
   dateStructureFontLineHeight: '--plasma-calendar-date-structure-line-height',
   dateStructureSelectedFontWeight: '--plasma-calendar-date-structure-selected-font-weight',
-  dateStructureWidth: '--plasma-calendar-date-structure-width',
-  dateStructureHeight: '--plasma-calendar-date-structure-height',
   dateStructureBorderRadius: '--plasma-calendar-date-structure-border-radius'
 };
 export var tokens = {
-  calendarWidth: '--plasma-calendar-width',
-  calendarHeight: '--plasma-calendar-height',
+  calendarContainerWidth: '--plasma-calendar-container-width',
+  calendarContainerHeight: '--plasma-calendar-container-height',
   calendarBorderWidth: '--plasma-calendar-border-width',
   calendarBorderColor: '--plasma-calendar-border-color',
   /* Токены размера сетки лет */
   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',
@@ -47,8 +44,6 @@ export var tokens = {
   /* Токены размера сетки дней */
   calendarQuartersPadding: '--plasma-calendar-quarters-padding',
   calendarQuarterItemBorderRadius: '--plasma-calendar-quarter-item-border-radius',
-  calendarQuarterItemWidth: '--plasma-calendar-quarter-item-width',
-  calendarQuarterItemHeight: '--plasma-calendar-quarter-item-height',
   calendarQuarterFontFamily: '--plasma-calendar-quarter-font-family',
   calendarQuarterFontSize: '--plasma-calendar-quarter-font-size',
   calendarQuarterFontStyle: '--plasma-calendar-quarter-font-style',
@@ -59,8 +54,6 @@ export var tokens = {
   /* Токены размера сетки месяцев */
   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',
@@ -71,8 +64,6 @@ export var tokens = {
   /* Токены размера сетки дней */
   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',

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

@@ -1,5 +1,9 @@
-var _excluded = ["value", "min", "max", "renderFromDate", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "locale"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "value", "min", "max", "renderFromDate", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "locale", "stretched", "onChangeValue"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -9,11 +13,13 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useMemo, useReducer, useState, forwardRef, useEffect } from 'react';
+import cls from 'classnames';
 import { getInitialState, reducer, sizeMap } from "../store/reducer";
 import { ActionType, CalendarState } from "../store/types";
 import { I18N, isValueUpdate } from "../utils";
 import { useKeyNavigation, useCalendarNavigation, useCalendarDateChange } from "../hooks";
 import { CalendarDays, CalendarHeader, CalendarMonths, CalendarQuarters, CalendarYears } from "../ui";
+import { classes } from "../Calendar.tokens";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { IsOutOfRange, StyledCalendar } from "./CalendarBase.styles";
@@ -22,7 +28,8 @@ import { IsOutOfRange, StyledCalendar } from "./CalendarBase.styles";
  */
 export var calendarBaseRoot = function calendarBaseRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
-    var externalValue = _ref.value,
+    var className = _ref.className,
+      externalValue = _ref.value,
       minDate = _ref.min,
       maxDate = _ref.max,
       renderFromDate = _ref.renderFromDate,
@@ -37,9 +44,10 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       disabledQuarterList = _ref.disabledQuarterList,
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
-      onChangeValue = _ref.onChangeValue,
       _ref$locale = _ref.locale,
       locale = _ref$locale === void 0 ? 'ru' : _ref$locale,
+      stretched = _ref.stretched,
+      onChangeValue = _ref.onChangeValue,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = useMemo(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -148,6 +156,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
     }, [value]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,
+      className: cls(className, _defineProperty({}, classes.stretched, stretched)),
       "aria-label": I18N.selectDate[locale]
     }, rest), isOutOfRange && /*#__PURE__*/React.createElement(IsOutOfRange, {
       key: outOfRangeKey,

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

@@ -2,8 +2,8 @@ var _templateObject;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 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    width: var(", ");\n    height: var(", ");\n    border: var(", ") solid var(", ");\n    box-sizing: border-box;\n"])), tokens.calendarWidth, tokens.calendarHeight, tokens.calendarBorderWidth, tokens.calendarBorderColor);
+import { classes, 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    border: var(", ") solid var(", ");\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    &.", " {\n        width: 100%;\n        height: 100%;\n    }\n"])), tokens.calendarContainerWidth, tokens.calendarContainerHeight, tokens.calendarBorderWidth, tokens.calendarBorderColor, classes.stretched);
 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

@@ -1,6 +1,10 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _StyledSeparator, _StyledSeparator2, _StyledSeparator3, _StyledSeparator4;
-var _excluded = ["value", "min", "max", "renderFromDate", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "locale"];
+var _excluded = ["className", "value", "min", "max", "renderFromDate", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "locale", "stretched", "onChangeValue"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -10,12 +14,14 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useState, useCallback, useMemo, forwardRef, useEffect, useReducer } from 'react';
+import cls from 'classnames';
 import { YEAR_RENDER_COUNT, getNextDate, isValueUpdate, I18N } from "../utils";
 import { useKeyNavigation, useCalendarNavigation, useCalendarDateChange } from "../hooks";
 import { CalendarDays, CalendarHeader, CalendarMonths, CalendarQuarters, CalendarYears } from "../ui";
 import { getInitialState, reducer, sizeMap } from "../store/reducer";
 import { ActionType, CalendarState } from "../store/types";
 import { IsOutOfRange } from "../CalendarBase/CalendarBase.styles";
+import { classes } from "../Calendar.tokens";
 import { base as viewCSS } from "./variations/_view/base";
 import { StyledCalendar, StyledSeparator, StyledWrapper } from "./CalendarDouble.styles";
 /**
@@ -23,7 +29,8 @@ import { StyledCalendar, StyledSeparator, StyledWrapper } from "./CalendarDouble
  */
 export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
-    var externalValue = _ref.value,
+    var className = _ref.className,
+      externalValue = _ref.value,
       minDate = _ref.min,
       maxDate = _ref.max,
       renderFromDate = _ref.renderFromDate,
@@ -38,9 +45,10 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       disabledQuarterList = _ref.disabledQuarterList,
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
-      onChangeValue = _ref.onChangeValue,
       _ref$locale = _ref.locale,
       locale = _ref$locale === void 0 ? 'ru' : _ref$locale,
+      stretched = _ref.stretched,
+      onChangeValue = _ref.onChangeValue,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = useMemo(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -205,6 +213,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
     }, [date, calendarState]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,
+      className: cls(className, _defineProperty({}, classes.stretched, stretched)),
       "aria-label": I18N.selectDate[locale]
     }, rest), isOutOfRange && /*#__PURE__*/React.createElement(IsOutOfRange, {
       key: outOfRangeKey,

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

@@ -2,11 +2,11 @@ var _templateObject;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 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: var(", ");\n    height: var(", ");\n"])), tokens.calendarWidth, tokens.calendarHeight);
+import { classes, 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: var(", ");\n    height: var(", ");\n\n    &.", " {\n        width: 100%;\n        height: 100%;\n    }\n"])), tokens.calendarContainerWidth, tokens.calendarContainerHeight, classes.stretched);
 export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1dp3a9f-0"
 })(["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;"]);
+})(["display:flex;height:100%;"]);

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { QUARTER_NAMES, getMatrix, isDateInRange, getDatesWithModifications, quarterDates, isSelectedMonth as isSelectedQuarter, isCurrentMonth as isCurrentQuarter } from "../utils";
+import { QUARTER_NAMES, getMatrix, isDateInRange, getDatesWithModifications, quarterDates, isSelectedMonth as isSelectedQuarter, isCurrentQuarter } from "../utils";
 import { CalendarState } from "../store/types";
 /**
  * Хук для получения списка месяцев.

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

@@ -8,12 +8,12 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 import { useDays } from "../../hooks";
 import { canSelectDate, FULL_DAY_NAMES, getInRange, getSideInRange, isSameDay, isSelectProcess, ROW_STEP, SHORT_DAY_NAMES, I18N } from "../../utils";
 import { DateStructureItem } from "../DateStructureItem/DateStructureItem";
 import { innerTokens, tokens } from "../../Calendar.tokens";
-import { StyledCalendarDays, StyledCalendarDaysHint, StyledFlex } from "./CalendarDays.styles";
+import { StyledCalendarDays, StyledCalendarDaysHint } from "./CalendarDays.styles";
 /**
  * Компонент дней в календаре.
  */
@@ -51,7 +51,7 @@ export var CalendarDays = function CalendarDays(_ref) {
   var selectedRef = useRef(selected);
   var onSetSelectedRef = useRef(onSetSelected);
   var offset = isSecond ? ROW_STEP : 0;
-  var dayItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarDayFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarDayFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarDayFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarDayFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarDayFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarDayFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarDaySelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarDayItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarDayItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarDayItemBorderRadius, ")"));
+  var dayItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarDayFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarDayFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarDayFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarDayFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarDayFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarDayFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarDaySelectedFontWeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarDayItemBorderRadius, ")"));
   var getSelectedDate = useCallback(function (event) {
     var _event$currentTarget$ = event.currentTarget.dataset,
       day = _event$currentTarget$.day,
@@ -108,9 +108,7 @@ export var CalendarDays = function CalendarDays(_ref) {
     onMouseLeave: handleMouseOutGrid
   }, /*#__PURE__*/React.createElement(StyledCalendarDaysHint, {
     id: "withShift"
-  }, I18N.navigationByShift[locale]), /*#__PURE__*/React.createElement(StyledFlex, {
-    role: "row"
-  }, SHORT_DAY_NAMES[locale].map(function (name) {
+  }, I18N.navigationByShift[locale]), /*#__PURE__*/React.createElement(React.Fragment, null, SHORT_DAY_NAMES[locale].map(function (name) {
     return /*#__PURE__*/React.createElement(DateStructureItem, {
       role: "columnheader",
       "aria-label": FULL_DAY_NAMES[locale][name],
@@ -120,8 +118,7 @@ export var CalendarDays = function CalendarDays(_ref) {
       style: dayItemTokens
     }, name);
   })), days.map(function (day, i) {
-    return /*#__PURE__*/React.createElement(StyledFlex, {
-      role: "row",
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: i
     }, day.map(function (_ref2, j) {
       var date = _ref2.date,

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

@@ -1,12 +1,8 @@
 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:var(", ");box-sizing:border-box;"], tokens.calendarDaysPadding);
+  componentId: "plasma-new-hope__sc-3ydwr5-0"
+})(["outline:none;padding:var(", ");box-sizing:border-box;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);width:100%;height:100%;"], tokens.calendarDaysPadding);
 export var StyledCalendarDaysHint = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-3ydwr5-2"
+  componentId: "plasma-new-hope__sc-3ydwr5-1"
 })(["display:none;"]);

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

@@ -8,12 +8,12 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 import { useMonths } from "../../hooks";
 import { innerTokens, tokens } from "../../Calendar.tokens";
 import { ROW_MONTH_STEP, canSelectDate, getInRange, getSideInRange, isSameDay, isSelectProcess } from "../../utils";
 import { DateStructureItem } from "../DateStructureItem/DateStructureItem";
-import { StyledCalendarMonths, StyledFlex } from "./CalendarMonths.styles";
+import { StyledCalendarMonths } from "./CalendarMonths.styles";
 
 /**
  * Компонент месяцев в календаре.
@@ -52,7 +52,7 @@ export var CalendarMonths = function CalendarMonths(_ref) {
   var selectedRef = useRef(selected);
   var onSetSelectedRef = useRef(onSetSelected);
   var offset = isSecond ? ROW_MONTH_STEP : 0;
-  var monthItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarMonthFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarMonthFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarMonthFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarMonthFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarMonthFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarMonthFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarMonthSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarMonthItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarMonthItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarMonthItemBorderRadius, ")"));
+  var monthItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarMonthFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarMonthFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarMonthFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarMonthFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarMonthFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarMonthFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarMonthSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarMonthItemBorderRadius, ")"));
   var getSelectedDate = useCallback(function (event) {
     var _event$currentTarget$ = event.currentTarget.dataset,
       day = _event$currentTarget$.day,
@@ -112,8 +112,7 @@ export var CalendarMonths = function CalendarMonths(_ref) {
     onKeyDown: onKeyDown,
     onMouseLeave: handleMouseOutGrid
   }, months.map(function (month, i) {
-    return /*#__PURE__*/React.createElement(StyledFlex, {
-      role: "row",
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: i
     }, month.map(function (_ref2, j) {
       var monthName = _ref2.monthName,

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

@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 import { tokens } from "../../Calendar.tokens";
-import { flexCenter } from "../../mixins";
 export var StyledCalendarMonths = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-0"
-})(["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));
+})(["padding:var(", ");box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);width:100%;height:100%;"], tokens.calendarMonthsPadding);

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

@@ -8,12 +8,12 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 import { useQuarters } from "../../hooks";
 import { innerTokens, tokens } from "../../Calendar.tokens";
 import { ROW_QUARTER_STEP, canSelectDate, getInRange, getSideInRange, isSameDay, isSelectProcess } from "../../utils";
 import { DateStructureItem } from "../DateStructureItem/DateStructureItem";
-import { StyledCalendarQuarters, StyledFlex } from "./CalendarQuarters.styles";
+import { StyledCalendarQuarters } from "./CalendarQuarters.styles";
 
 /**
  * Компонент кварталов в календаре.
@@ -50,7 +50,7 @@ export var CalendarQuarters = function CalendarQuarters(_ref) {
   var selectedRef = useRef(selected);
   var onSetSelectedRef = useRef(onSetSelected);
   var offset = isSecond ? ROW_QUARTER_STEP : 0;
-  var quarterItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarQuarterFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarQuarterFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarQuarterFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarQuarterFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarQuarterFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarQuarterFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarQuarterSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarQuarterItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarQuarterItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarQuarterItemBorderRadius, ")"));
+  var quarterItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarQuarterFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarQuarterFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarQuarterFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarQuarterFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarQuarterFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarQuarterFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarQuarterSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarQuarterItemBorderRadius, ")"));
   var getSelectedDate = useCallback(function (event) {
     var _event$currentTarget$ = event.currentTarget.dataset,
       day = _event$currentTarget$.day,
@@ -110,8 +110,7 @@ export var CalendarQuarters = function CalendarQuarters(_ref) {
     onKeyDown: onKeyDown,
     onMouseLeave: handleMouseOutGrid
   }, quarters.map(function (quarter, i) {
-    return /*#__PURE__*/React.createElement(StyledFlex, {
-      role: "row",
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: i
     }, quarter.map(function (_ref2, j) {
       var quarterName = _ref2.quarterName,

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

@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 import { tokens } from "../../Calendar.tokens";
-import { flexCenter } from "../../mixins";
 export var StyledCalendarQuarters = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1grqaka-0"
-})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarQuartersPadding);
-export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1grqaka-1"
-})(["", ";"], /*#__PURE__*/String(flexCenter));
+})(["padding:var(", ");box-sizing:border-box;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:100%;"], tokens.calendarQuartersPadding);

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

@@ -8,12 +8,12 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 import { useYears } from "../../hooks";
 import { innerTokens, tokens } from "../../Calendar.tokens";
 import { ROW_YEAR_STEP, canSelectDate, getInRange, getSideInRange, isSameDay, isSelectProcess } from "../../utils";
 import { DateStructureItem } from "../DateStructureItem/DateStructureItem";
-import { StyledCalendarYears, StyledFlex } from "./CalendarYears.styles";
+import { StyledCalendarYears } from "./CalendarYears.styles";
 
 /**
  * Компонент годов в календаре.
@@ -52,7 +52,7 @@ export var CalendarYears = function CalendarYears(_ref) {
   var selectedRef = useRef(selected);
   var onSetSelectedRef = useRef(onSetSelected);
   var offset = isSecond ? ROW_YEAR_STEP : 0;
-  var yearItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarYearFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarYearFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarYearFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarYearFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarYearFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarYearFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarYearSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarYearItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarYearItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarYearItemBorderRadius, ")"));
+  var yearItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarYearFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarYearFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarYearFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarYearFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarYearFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarYearFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarYearSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarYearItemBorderRadius, ")"));
   var getSelectedDate = useCallback(function (event) {
     var _event$currentTarget$ = event.currentTarget.dataset,
       day = _event$currentTarget$.day,
@@ -112,8 +112,7 @@ export var CalendarYears = function CalendarYears(_ref) {
     onKeyDown: onKeyDown,
     onMouseLeave: handleMouseOutGrid
   }, years.map(function (year, i) {
-    return /*#__PURE__*/React.createElement(StyledFlex, {
-      role: "row",
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: i
     }, year.map(function (_ref2, j) {
       var yearValue = _ref2.yearValue,

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

@@ -1,9 +1,5 @@
 import styled from 'styled-components';
 import { tokens } from "../../Calendar.tokens";
-import { flexCenter } from "../../mixins";
 export var StyledCalendarYears = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-0"
-})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarYearsPadding);
-export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-153qwc7-1"
-})(["", ";"], /*#__PURE__*/String(flexCenter));
+})(["padding:var(", ");box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);width:100%;height:100%;"], tokens.calendarYearsPadding);

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

@@ -25,12 +25,12 @@ var disabledCurrentItem = function disabledCurrentItem() {
 };
 export var StyledItemRoot = /*#__PURE__*/styled.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(", ");}&.", "{color:", ";", ";}&.", "{color:", ";", ";}&.", "{& > .", ":before{width:calc(100% + 2px);height:100%;}& > .", ":before{width:100%;right:-1px;left:unset;}& > .", ":before{width:100%;left:-1px;right:unset;}}"], innerTokens.dateStructureFontFamily, innerTokens.dateStructureFontSize, innerTokens.dateStructureFontStyle, innerTokens.dateStructureFontWeight, innerTokens.dateStructureFontLetterSpacing, innerTokens.dateStructureFontLineHeight, innerTokens.dateStructureWidth, innerTokens.dateStructureHeight, innerTokens.dateStructureBorderRadius, /*#__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;border-radius:var(", ");", ";color:", ";&.", "{", ";", ";&.", "{", ";}}&.", ":not(.", "){", ";}&.", "{color:var(", ");}&.", "{color:", ";", ";}&.", "{color:", ";", ";}&.", "{& > .", ":before{width:calc(100% + 2px);height:100%;}& > .", ":before{width:100%;right:-1px;left:unset;}& > .", ":before{width:100%;left:-1px;right:unset;}}"], innerTokens.dateStructureFontFamily, innerTokens.dateStructureFontSize, innerTokens.dateStructureFontStyle, innerTokens.dateStructureFontWeight, innerTokens.dateStructureFontLetterSpacing, innerTokens.dateStructureFontLineHeight, innerTokens.dateStructureBorderRadius, /*#__PURE__*/String(flexCenter), function (_ref3) {
   var isDayInCurrentMonth = _ref3.isDayInCurrentMonth;
   return isDayInCurrentMonth ? "var(".concat(tokens.calendarContentPrimaryColor, ")") : "var(".concat(tokens.calendarContentSecondaryColor, ")");
 }, /*#__PURE__*/String(classes.selectableItem), /*#__PURE__*/addSelected({
-  minWidth: /*#__PURE__*/"calc(var(".concat(innerTokens.dateStructureWidth, ") - 0.25rem)"),
-  minHeight: /*#__PURE__*/"calc(var(".concat(innerTokens.dateStructureHeight, ") - 0.25rem)"),
+  minWidth: 'calc(100% - 0.125rem)',
+  minHeight: 'calc(100% - 0.125rem)',
   selectedFontWeight: /*#__PURE__*/"var(".concat(innerTokens.dateStructureSelectedFontWeight, ")"),
   selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
   selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),

package/styled-components/es/components/Calendar/utils/calendarGridHelper.js

@@ -64,6 +64,13 @@ export var isCurrentMonth = function isCurrentMonth(date, monthIndex) {
     currentYear = _getDateFromNow2.year;
   return monthIndex === currentMonthIndex && date.year === currentYear;
 };
+export var isCurrentQuarter = function isCurrentQuarter(date, monthIndex) {
+  var _getDateFromNow3 = getDateFromNow(),
+    currentMonthIndex = _getDateFromNow3.monthIndex,
+    currentYear = _getDateFromNow3.year;
+  var currentQuarterCondition = currentMonthIndex - monthIndex <= 3 && currentMonthIndex - monthIndex > 0;
+  return currentQuarterCondition && date.year === currentYear;
+};
 export var isSelectedMonth = function isSelectedMonth(date, currentMonth, value) {
   if (!value) {
     return false;
@@ -74,8 +81,8 @@ export var isSelectedMonth = function isSelectedMonth(date, currentMonth, value)
   return currentMonth === monthIndex && date.year === year;
 };
 export var isCurrentYear = function isCurrentYear(year) {
-  var _getDateFromNow3 = getDateFromNow(),
-    currentYear = _getDateFromNow3.year;
+  var _getDateFromNow4 = getDateFromNow(),
+    currentYear = _getDateFromNow4.year;
   return year === currentYear;
 };
 export var isSelectedYear = function isSelectedYear(yearValue, value) {

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

@@ -1,7 +1,12 @@
 export var classes = {
   datePickerError: 'date-picker-error',
   datePickerSuccess: 'date-picker-success',
-  datePickerRoot: 'date-picker-root'
+  datePickerRoot: 'date-picker-root',
+  datePickerstretched: 'date-picker-stretched',
+  datePickerCalendarstretched: 'date-picker-calendar-stretched'
+};
+export var pivateTokens = {
+  calendarDoubleWidth: '--plasma_private-calendar-double-width'
 };
 export var tokens = {
   width: '--plasma-date-picker-width',
@@ -126,14 +131,12 @@ export var tokens = {
   calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
   calendarShadow: '--plasma-date-picker-calendar-shadow',
   calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
-  calendarWidth: '--plasma-date-picker-calendar-width',
-  calendarHeight: '--plasma-date-picker-calendar-height',
+  calendarContainerWidth: '--plasma-date-picker-calendar-container-width',
+  calendarContainerHeight: '--plasma-date-picker-calendar-container-height',
   calendarBorderWidth: '--plasma-date-picker-calendar-border-width',
   calendarBorderColor: '--plasma-date-picker-calendar-border-color',
   calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
   calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius',
-  calendarYearItemWidth: '--plasma-date-picker-calendar__year-item-width',
-  calendarYearItemHeight: '--plasma-date-picker-calendar__year-item-height',
   calendarYearFontFamily: '--plasma-date-picker-calendar__year-font-family',
   calendarYearFontSize: '--plasma-date-picker-calendar__year-font-size',
   calendarYearFontStyle: '--plasma-date-picker-calendar__year-font-style',
@@ -143,8 +146,6 @@ export var tokens = {
   calendarYearSelectedFontWeight: '--plasma-date-picker-calendar__year-selected-font-weight',
   calendarMonthsPadding: '--plasma-date-picker-calendar__months-padding',
   calendarMonthItemBorderRadius: '--plasma-date-picker-calendar__month-item-border-radius',
-  calendarMonthItemWidth: '--plasma-date-picker-calendar__month-item-width',
-  calendarMonthItemHeight: '--plasma-date-picker-calendar__month-item-height',
   calendarMonthFontFamily: '--plasma-date-picker-calendar__month-font-family',
   calendarMonthFontSize: '--plasma-date-picker-calendar__month-font-size',
   calendarMonthFontStyle: '--plasma-date-picker-calendar__month-font-style',
@@ -154,8 +155,6 @@ export var tokens = {
   calendarMonthSelectedFontWeight: '--plasma-date-picker-calendar__month-selected-font-weight',
   calendarQuartersPadding: '--plasma-date-picker-calendar__quarters-padding',
   calendarQuarterItemBorderRadius: '--plasma-date-picker-calendar__quarter-item-border-radius',
-  calendarQuarterItemWidth: '--plasma-date-picker-calendar__quarter-item-width',
-  calendarQuarterItemHeight: '--plasma-date-picker-calendar__quarter-item-height',
   calendarQuarterFontFamily: '--plasma-date-picker-calendar__quarter-font-family',
   calendarQuarterFontSize: '--plasma-date-picker-calendar__quarter-font-size',
   calendarQuarterFontStyle: '--plasma-date-picker-calendar__quarter-font-style',
@@ -165,8 +164,6 @@ export var tokens = {
   calendarQuarterSelectedFontWeight: '--plasma-date-picker-calendar__quarter-selected-font-weight',
   calendarDaysPadding: '--plasma-date-picker-calendar__days-padding',
   calendarDayItemBorderRadius: '--plasma-date-picker-calendar__day-item-border-radius',
-  calendarDayItemWidth: '--plasma-date-picker-calendar__day-item-width',
-  calendarDayItemHeight: '--plasma-date-picker-calendar__day-item-height',
   calendarDayFontFamily: '--plasma-date-picker-calendar__day-font-family',
   calendarDayFontSize: '--plasma-date-picker-calendar__day-font-size',
   calendarDayFontStyle: '--plasma-date-picker-calendar__day-font-style',