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

package/styled-components/es/components/DatePicker/DatePickerBase.styles.js

@@ -5,12 +5,18 @@ import { calendarBaseConfig, calendarBaseTokens } from "../Calendar";
 import { tokens } from "./DatePicker.tokens";
 var mergedCalendarConfig = /*#__PURE__*/mergeConfig(calendarBaseConfig);
 var Calendar = /*#__PURE__*/component(mergedCalendarConfig);
-export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(tokens.calendarPaddingTop, ");\n    box-shadow: var(").concat(tokens.calendarShadow, ");\n    border-radius: var(").concat(tokens.calendarBorderRadius, ");\n    margin-top: var(").concat(tokens.calendarMarginTop, ");\n\n    ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n    ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderWidth, ": var(").concat(tokens.calendarCurrentItemBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n    ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n    ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n    ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryDisabledColor, ": var(").concat(tokens.calendarContentPrimaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryDisabledColor, ": var(").concat(tokens.calendarContentSecondaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarDisabledOpacity, ": var(").concat(tokens.calendarDisabledOpacity, ");\n\n    ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n    ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(calendarBaseTokens.calendarWidth, ": var(").concat(tokens.calendarWidth, ");\n    ").concat(calendarBaseTokens.calendarHeight, ": var(").concat(tokens.calendarHeight, ");\n    ").concat(calendarBaseTokens.calendarBorderWidth, ": var(").concat(tokens.calendarBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarBorderColor, ": var(").concat(tokens.calendarBorderColor, ");\n\n    ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n    ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarYearItemWidth, ": var(").concat(tokens.calendarYearItemWidth, ");\n    ").concat(calendarBaseTokens.calendarYearItemHeight, ": var(").concat(tokens.calendarYearItemHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n    ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n    ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n    ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n    ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n    ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarMonthItemWidth, ": var(").concat(tokens.calendarMonthItemWidth, ");\n    ").concat(calendarBaseTokens.calendarMonthItemHeight, ": var(").concat(tokens.calendarMonthItemHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n    ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n    ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarQuartersPadding, ": var(").concat(tokens.calendarQuartersPadding, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemBorderRadius, ": var(").concat(tokens.calendarQuarterItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemWidth, ": var(").concat(tokens.calendarQuarterItemWidth, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemHeight, ": var(").concat(tokens.calendarQuarterItemHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontFamily, ": var(").concat(tokens.calendarQuarterFontFamily, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontSize, ": var(").concat(tokens.calendarQuarterFontSize, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontStyle, ": var(").concat(tokens.calendarQuarterFontStyle, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLetterSpacing, ": var(").concat(tokens.calendarQuarterFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLineHeight, ": var(").concat(tokens.calendarQuarterFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontWeight, ": var(").concat(tokens.calendarQuarterFontWeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterSelectedFontWeight, ": var(").concat(tokens.calendarQuarterSelectedFontWeight, ");\n    \n    ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n    ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarDayItemWidth, ": var(").concat(tokens.calendarDayItemWidth, ");\n    ").concat(calendarBaseTokens.calendarDayItemHeight, ": var(").concat(tokens.calendarDayItemHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n    ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n    ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n    ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDayOfWeekColor, ": var(").concat(tokens.calendarDayOfWeekColor, ");\n    \n    ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowColor, ": var(").concat(tokens.calendarHeaderArrowColor, ");\n    \n    ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n    ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n    ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
+export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(tokens.calendarPaddingTop, ");\n    box-shadow: var(").concat(tokens.calendarShadow, ");\n    border-radius: var(").concat(tokens.calendarBorderRadius, ");\n    margin-top: var(").concat(tokens.calendarMarginTop, ");\n\n    ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n    ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderWidth, ": var(").concat(tokens.calendarCurrentItemBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n    ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n    ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n    ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryDisabledColor, ": var(").concat(tokens.calendarContentPrimaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryDisabledColor, ": var(").concat(tokens.calendarContentSecondaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarDisabledOpacity, ": var(").concat(tokens.calendarDisabledOpacity, ");\n\n    ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n    ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(calendarBaseTokens.calendarBorderWidth, ": var(").concat(tokens.calendarBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarBorderColor, ": var(").concat(tokens.calendarBorderColor, ");\n\n    ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n    ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n    ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n    ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n    ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n    ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n    ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n    ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n    ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarQuartersPadding, ": var(").concat(tokens.calendarQuartersPadding, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemBorderRadius, ": var(").concat(tokens.calendarQuarterItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontFamily, ": var(").concat(tokens.calendarQuarterFontFamily, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontSize, ": var(").concat(tokens.calendarQuarterFontSize, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontStyle, ": var(").concat(tokens.calendarQuarterFontStyle, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLetterSpacing, ": var(").concat(tokens.calendarQuarterFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLineHeight, ": var(").concat(tokens.calendarQuarterFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontWeight, ": var(").concat(tokens.calendarQuarterFontWeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterSelectedFontWeight, ": var(").concat(tokens.calendarQuarterSelectedFontWeight, ");\n    \n    ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n    ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n    ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n    ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n    ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDayOfWeekColor, ": var(").concat(tokens.calendarDayOfWeekColor, ");\n    \n    ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowColor, ": var(").concat(tokens.calendarHeaderArrowColor, ");\n    \n    ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n    ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n    ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
 
 // NOTE: переопределение токенов Calendar
 export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
   componentId: "plasma-new-hope__sc-1i6o09y-0"
-})(["width:var(", ");", ""], tokens.width, baseCalendarTokens);
+})(["", " width:", ";height:", ";"], baseCalendarTokens, function (_ref) {
+  var innerWidth = _ref.innerWidth;
+  return innerWidth || "var(".concat(tokens.calendarContainerWidth, ")");
+}, function (_ref2) {
+  var innerHeight = _ref2.innerHeight;
+  return innerHeight || "var(".concat(tokens.calendarContainerHeight, ")");
+});
 export var InputHidden = /*#__PURE__*/styled.input.withConfig({
   componentId: "plasma-new-hope__sc-1i6o09y-1"
 })(["", ";"], /*#__PURE__*/applyHidden());

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

@@ -1,5 +1,9 @@
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "hasRequiredIndicator", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+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", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "hasRequiredIndicator", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 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,7 +13,8 @@ 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, { createRef, forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { cx, noop } from "../../../utils";
+import cls from 'classnames';
+import { noop } from "../../../utils";
 import { getDateFormatDelimiter } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
@@ -103,6 +108,9 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
       closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
+      calendarContainerWidth = _ref.calendarContainerWidth,
+      calendarContainerHeight = _ref.calendarContainerHeight,
+      stretched = _ref.stretched,
       onToggle = _ref.onToggle,
       onChange = _ref.onChange,
       onChangeFirstValue = _ref.onChangeFirstValue,
@@ -484,21 +492,25 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     useLayoutEffect(function () {
       updateExternalSecondDate(defaultSecondDate);
     }, [defaultSecondDate, format, lang]);
-    var RootWrapper = useCallback(function (_ref6) {
-      var children = _ref6.children;
+    var RootWrapper = useCallback(/*#__PURE__*/forwardRef(function (_ref6, rootWrapperRef) {
+      var children = _ref6.children,
+        rootWrapperClassName = _ref6.className,
+        onClick = _ref6.onClick;
       return /*#__PURE__*/React.createElement(Root, {
+        ref: rootWrapperRef,
         view: view,
         size: size,
-        className: cx(classes.datePickerRoot, className),
+        className: rootWrapperClassName,
         disabled: disabled,
-        readOnly: !disabled && readOnly
+        readOnly: !disabled && readOnly,
+        onClick: onClick
       }, children);
-    }, [view, size, disabled, readOnly]);
+    }), [view, size, disabled, readOnly]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       view: view,
       size: size,
-      className: cx(classes.datePickerRoot, className),
+      className: cls(classes.datePickerRoot, className, _defineProperty({}, classes.datePickerstretched, stretched)),
       disabled: disabled,
       readOnly: !disabled && readOnly
     }, rest), /*#__PURE__*/React.createElement(RangeDatePopover, {
@@ -523,15 +535,19 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       closeOnOverlayClick: closeOnOverlayClick,
       closeOnEsc: closeOnEsc,
       offset: offset,
+      stretched: stretched,
+      calendarContainerWidth: calendarContainerWidth,
+      calendarContainerHeight: calendarContainerHeight,
       type: type,
       onToggle: handleToggle,
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       rootWrapper: RootWrapper,
       onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue
+      onChangeValue: handleChangeCalendarValue,
+      setIsInnerOpen: setIsInnerOpen
     }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
-      className: cx(rangeErrorClass, rangeSuccessClass)
+      className: cls(rangeErrorClass, rangeSuccessClass)
     }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       name: name,
       type: "hidden",

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.styles.js

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { component, mergeConfig } from "../../../engines";
 import { rangeConfig, rangeTokens } from "../../Range";
 import { classes, tokens } from "../DatePicker.tokens";
-import { popoverConfig } from "../../Popover";
+import { popoverClasses, popoverConfig } from "../../Popover";
 var mergedRangeConfig = /*#__PURE__*/mergeConfig(rangeConfig);
 var Range = /*#__PURE__*/component(mergedRangeConfig);
 var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
@@ -16,7 +16,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 export var StyledRange = /*#__PURE__*/styled(Range).withConfig({
   componentId: "plasma-new-hope__sc-14j95rs-1"
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], rangeTokens.background, tokens.background, rangeTokens.backgroundError, tokens.backgroundError, rangeTokens.backgroundSuccess, tokens.backgroundSuccess, rangeTokens.borderColor, tokens.borderColor, rangeTokens.borderColorError, tokens.borderColorError, rangeTokens.borderColorSuccess, tokens.borderColorSuccess, rangeTokens.borderWidth, tokens.textFieldBorderWidth, rangeTokens.dividerColor, tokens.dividerColor, rangeTokens.labelColor, tokens.labelColor, rangeTokens.leftHelperColor, tokens.leftHelperColor, rangeTokens.textFieldColor, tokens.textFieldColor, rangeTokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColor, rangeTokens.textFieldPlaceholderColorFocus, tokens.textFieldPlaceholderColorFocus, rangeTokens.textFieldCaretColor, tokens.textFieldCaretColor, rangeTokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundColorFocus, rangeTokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColor, rangeTokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundErrorColorFocus, rangeTokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColor, rangeTokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldBackgroundSuccessColorFocus, rangeTokens.textFieldBorderWidth, tokens.textFieldBorderWidth, rangeTokens.textFieldBorderColorFocus, tokens.textFieldBorderColorFocus, rangeTokens.textFieldBorderColorError, tokens.textFieldBorderColorError, rangeTokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorErrorFocus, rangeTokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccess, rangeTokens.textFieldBorderColorSuccessFocus, tokens.textFieldBorderColorSuccessFocus, rangeTokens.textFieldTextBeforeColor, tokens.textFieldTextBeforeColor, rangeTokens.textFieldTextAfterColor, tokens.textFieldTextAfterColor, rangeTokens.focusColor, tokens.focusColor, rangeTokens.borderRadius, tokens.borderRadius, rangeTokens.dividerPadding, tokens.dividerPadding, rangeTokens.dividerFontFamily, tokens.dividerFontFamily, rangeTokens.dividerFontStyle, tokens.dividerFontStyle, rangeTokens.dividerFontSize, tokens.dividerFontSize, rangeTokens.dividerFontWeight, tokens.dividerFontWeight, rangeTokens.dividerLetterSpacing, tokens.dividerLetterSpacing, rangeTokens.dividerLineHeight, tokens.dividerLineHeight, rangeTokens.leftContentMargin, tokens.leftContentMargin, rangeTokens.rightContentMargin, tokens.rightContentMargin, rangeTokens.labelOffset, tokens.labelOffset, rangeTokens.labelFontFamily, tokens.labelFontFamily, rangeTokens.labelFontStyle, tokens.labelFontStyle, rangeTokens.labelFontSize, tokens.labelFontSize, rangeTokens.labelFontWeight, tokens.labelFontWeight, rangeTokens.labelLetterSpacing, tokens.labelLetterSpacing, rangeTokens.labelLineHeight, tokens.labelLineHeight, rangeTokens.indicatorColor, tokens.indicatorColor, rangeTokens.indicatorSize, tokens.indicatorSize, rangeTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, rangeTokens.indicatorPlacement, tokens.indicatorPlacement, rangeTokens.indicatorOuterPlacement, tokens.indicatorOuterPlacement, rangeTokens.indicatorPlacementRight, tokens.indicatorPlacementRight, rangeTokens.indicatorOuterPlacementRight, tokens.indicatorOuterPlacementRight, rangeTokens.textFieldHeight, tokens.textFieldHeight, rangeTokens.textFieldBorderRadius, tokens.textFieldBorderRadius, rangeTokens.textFieldPadding, tokens.textFieldPadding, rangeTokens.textFieldFontFamily, tokens.textFieldFontFamily, rangeTokens.textFieldFontStyle, tokens.textFieldFontStyle, rangeTokens.textFieldFontSize, tokens.textFieldFontSize, rangeTokens.textFieldFontWeight, tokens.textFieldFontWeight, rangeTokens.textFieldLetterSpacing, tokens.textFieldLetterSpacing, rangeTokens.textFieldLineHeight, tokens.textFieldLineHeight, rangeTokens.leftHelperOffset, tokens.leftHelperOffset, rangeTokens.leftHelperFontFamily, tokens.leftHelperFontFamily, rangeTokens.leftHelperFontStyle, tokens.leftHelperFontStyle, rangeTokens.leftHelperFontSize, tokens.leftHelperFontSize, rangeTokens.leftHelperFontWeight, tokens.leftHelperFontWeight, rangeTokens.leftHelperLetterSpacing, tokens.leftHelperLetterSpacing, rangeTokens.leftHelperLineHeight, tokens.leftHelperLineHeight, rangeTokens.textFieldLeftContentMargin, tokens.textFieldLeftContentMargin, rangeTokens.textFieldRightContentMargin, tokens.textFieldRightContentMargin, rangeTokens.textFieldTextBeforeMargin, tokens.textFieldTextBeforeMargin, rangeTokens.textFieldTextAfterMargin, tokens.textFieldTextAfterMargin, rangeTokens.backgroundReadOnly, tokens.backgroundReadOnly, rangeTokens.labelColorReadOnly, tokens.labelColorReadOnly, rangeTokens.leftHelperColorReadOnly, tokens.leftHelperColorReadOnly, rangeTokens.dividerColorReadOnly, tokens.dividerColorReadOnly, rangeTokens.textFieldColorReadOnly, tokens.textFieldColorReadOnly, rangeTokens.textFieldBackgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, rangeTokens.textFieldPlaceholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly);
-export var base = /*#__PURE__*/css(["display:inline-block;"]);
+export var base = /*#__PURE__*/css(["display:inline-block;.", ",.", "{width:inherit;}&.", "{width:100%;.", ",", "{width:100%;}}"], popoverClasses.wrapper, popoverClasses.target, classes.datePickerstretched, popoverClasses.root, StyledRange);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-14j95rs-2"
 })(["color:var(", ");&.", "{color:var(", ");}&.", "{color:var(", ");}"], tokens.leftHelperColor, classes.datePickerError, tokens.leftHelperColorError, classes.datePickerSuccess, tokens.leftHelperColorSuccess);

package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js

@@ -1,6 +1,12 @@
-import React from 'react';
-import { getPlacements } from "../../../../utils";
+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); }
+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); }
+import React, { useRef } from 'react';
+import cls from 'classnames';
+import { getPlacements, getSizeValueFromProp } from "../../../../utils";
 import { StyledPopover } from "../RangeDate.styles";
+import { classes } from "../../DatePicker.tokens";
 import { StyledCalendar, StyledCalendarDouble } from "./RangeDatePopover.styles";
 export var RangeDatePopover = function RangeDatePopover(_ref) {
   var Root = _ref.rootWrapper,
@@ -31,14 +37,36 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
     closeOnEsc = _ref.closeOnEsc,
     offset = _ref.offset,
+    calendarContainerWidth = _ref.calendarContainerWidth,
+    calendarContainerHeight = _ref.calendarContainerHeight,
+    stretched = _ref.stretched,
     type = _ref.type,
     size = _ref.size,
     _ref$lang = _ref.lang,
     lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    setIsInnerOpen = _ref.setIsInnerOpen,
     onChangeValue = _ref.onChangeValue,
     onChangeStartOfRange = _ref.onChangeStartOfRange,
     onToggle = _ref.onToggle;
   var innerIsOpen = Boolean(isOpen || opened);
+  var calendarRootRef = useRef(null);
+  var doubleCalendarRootRef = useRef(null);
+  var calendarContainerWidthValue = calendarContainerWidth ? getSizeValueFromProp(calendarContainerWidth, 'rem') : undefined;
+  var calendarContainerHeightValue = calendarContainerHeight ? getSizeValueFromProp(calendarContainerHeight, 'rem') : undefined;
+  var handleCalendarRootClick = function handleCalendarRootClick(event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var isRootClicked = event.target === (calendarRootRef === null || calendarRootRef === void 0 ? void 0 : calendarRootRef.current) || event.target === (doubleCalendarRootRef === null || doubleCalendarRootRef === void 0 ? void 0 : doubleCalendarRootRef.current);
+    if (innerIsOpen && stretched && isRootClicked) {
+      setIsInnerOpen(false);
+      if (onToggle) {
+        onToggle(false, event);
+      }
+    }
+  };
   if (isDoubleCalendar) {
     return /*#__PURE__*/React.createElement(StyledPopover, {
       opened: innerIsOpen,
@@ -52,7 +80,14 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
       isFocusTrapped: false,
       target: target,
       preventOverflow: false
-    }, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
+    }, /*#__PURE__*/React.createElement(Root, {
+      ref: doubleCalendarRootRef,
+      className: cls(classes.datePickerRoot, _defineProperty({}, classes.datePickerstretched, stretched)),
+      onClick: handleCalendarRootClick
+    }, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
+      className: cls(_defineProperty({}, classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       eventList: eventList,
@@ -86,7 +121,14 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     target: target,
     preventOverflow: false,
     closeOnEsc: closeOnEsc
-  }, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(StyledCalendar, {
+  }, /*#__PURE__*/React.createElement(Root, {
+    ref: calendarRootRef,
+    className: cls(classes.datePickerRoot, _defineProperty({}, classes.datePickerstretched, stretched)),
+    onClick: handleCalendarRootClick
+  }, /*#__PURE__*/React.createElement(StyledCalendar, {
+    className: cls(_defineProperty({}, classes.datePickerCalendarstretched, stretched)),
+    innerWidth: calendarContainerWidthValue,
+    innerHeight: calendarContainerHeightValue,
     size: size,
     value: calendarValue,
     eventList: eventList,

package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { calendarDoubleConfig, calendarBaseTokens, withRange, calendarBaseConfig } from "../../../Calendar";
 import { component, mergeConfig } from "../../../../engines";
-import { tokens } from "../../DatePicker.tokens";
+import { pivateTokens, tokens } from "../../DatePicker.tokens";
 import { baseCalendarTokens } from "../../DatePickerBase.styles";
 var mergedCalendarDoubleConfig = /*#__PURE__*/mergeConfig(calendarDoubleConfig);
 var CalendarDouble = /*#__PURE__*/component(mergedCalendarDoubleConfig);
@@ -13,7 +13,19 @@ var CalendarRange = /*#__PURE__*/withRange(Calendar);
 // NOTE: переопределение токенов Calendar
 export var StyledCalendarDouble = /*#__PURE__*/styled(CalendarDoubleRange).withConfig({
   componentId: "plasma-new-hope__sc-vflcna-0"
-})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);"], calendarBaseTokens.calendarSeparatorBackground, tokens.calendarSeparatorBackground, baseCalendarTokens, calendarBaseTokens.calendarWidth, tokens.calendarWidth);
+})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);width:", ";height:", ";"], calendarBaseTokens.calendarSeparatorBackground, tokens.calendarSeparatorBackground, baseCalendarTokens, pivateTokens.calendarDoubleWidth, tokens.calendarContainerWidth, function (_ref) {
+  var innerWidth = _ref.innerWidth;
+  return innerWidth || "var(".concat(pivateTokens.calendarDoubleWidth, ")");
+}, function (_ref2) {
+  var innerHeight = _ref2.innerHeight;
+  return innerHeight || "var(".concat(tokens.calendarContainerHeight, ")");
+});
 export var StyledCalendar = /*#__PURE__*/styled(CalendarRange).withConfig({
   componentId: "plasma-new-hope__sc-vflcna-1"
-})(["", ""], baseCalendarTokens);
+})(["", " width:", ";height:", ";"], baseCalendarTokens, function (_ref3) {
+  var innerWidth = _ref3.innerWidth;
+  return innerWidth || "var(".concat(tokens.calendarContainerWidth, ")");
+}, function (_ref4) {
+  var innerHeight = _ref4.innerHeight;
+  return innerHeight || "var(".concat(tokens.calendarContainerHeight, ")");
+});

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

@@ -1,5 +1,9 @@
-var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
+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", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
 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,7 +13,8 @@ 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, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { cx, getPlacements, noop } from "../../../utils";
+import cls from 'classnames';
+import { getPlacements, getSizeValueFromProp, noop } from "../../../utils";
 import { getDateFormatDelimiter } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
@@ -85,6 +90,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
       offset = _ref.offset,
+      calendarContainerWidth = _ref.calendarContainerWidth,
+      calendarContainerHeight = _ref.calendarContainerHeight,
+      stretched = _ref.stretched,
       onChangeValue = _ref.onChangeValue,
       onCommitDate = _ref.onCommitDate,
       onToggle = _ref.onToggle,
@@ -98,6 +106,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     }
     var inputRef = useRef(null);
     var innerRef = useRef(null);
+    var calendarRootRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -127,6 +136,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       inputValue = _useState8[0],
       setInputValue = _useState8[1];
+    var calendarContainerWidthValue = calendarContainerWidth ? getSizeValueFromProp(calendarContainerWidth, 'rem') : undefined;
+    var calendarContainerHeightValue = calendarContainerHeight ? getSizeValueFromProp(calendarContainerHeight, 'rem') : undefined;
     var _useDatePicker = useDatePicker({
         currentValue: inputValue,
         format: format,
@@ -171,6 +182,17 @@ export var datePickerRoot = function datePickerRoot(Root) {
       }
       setIsInnerOpen(isCalendarOpen);
     };
+    var handleCalendarRootClick = function handleCalendarRootClick(event) {
+      if (disabled || readOnly) {
+        return;
+      }
+      if (isInnerOpen && stretched && event.target === (calendarRootRef === null || calendarRootRef === void 0 ? void 0 : calendarRootRef.current)) {
+        setIsInnerOpen(false);
+        if (onToggle) {
+          onToggle(false, event);
+        }
+      }
+    };
     var _useKeyNavigation = useKeyNavigation({
         isCalendarOpen: isInnerOpen,
         format: format,
@@ -191,7 +213,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     };
     var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, {
       ref: inputRef,
-      className: cx(datePickerErrorClass, datePickerSuccessClass),
+      className: cls(datePickerErrorClass, datePickerSuccessClass),
       value: inputValue,
       size: size,
       readOnly: readOnly,
@@ -228,7 +250,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
-      className: cx(classes.datePickerRoot, className),
+      className: cls(classes.datePickerRoot, className, _defineProperty({}, classes.datePickerstretched, stretched)),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       ref: ref
@@ -245,12 +267,17 @@ export var datePickerRoot = function datePickerRoot(Root) {
       target: DatePickerInput,
       preventOverflow: false
     }, /*#__PURE__*/React.createElement(Root, {
+      ref: calendarRootRef,
       view: view,
       size: size,
-      className: cx(classes.datePickerRoot, className),
+      className: cls(classes.datePickerRoot, className, _defineProperty({}, classes.datePickerstretched, stretched)),
       disabled: disabled,
-      readOnly: !disabled && readOnly
+      readOnly: !disabled && readOnly,
+      onClick: handleCalendarRootClick
     }, /*#__PURE__*/React.createElement(StyledCalendar, {
+      className: cls(_defineProperty({}, classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       type: type,
@@ -270,7 +297,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       locale: lang,
       onChangeValue: handleCalendarPick
     }))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
-      className: cx(datePickerErrorClass, datePickerSuccessClass)
+      className: cls(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       type: "hidden",
       datatype: "datepicker-single",

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js

@@ -16,7 +16,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-1"
 })(["width:100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ",var(", "));", ":var(", ",var(", "));", ":var(", ",var(", "));&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelOffset, tokens.labelOffset, textFieldTokens.labelFontFamily, tokens.labelFontFamily, textFieldTokens.labelFontStyle, tokens.labelFontStyle, textFieldTokens.labelFontSize, tokens.labelFontSize, textFieldTokens.labelFontWeight, tokens.labelFontWeight, textFieldTokens.labelLetterSpacing, tokens.labelLetterSpacing, textFieldTokens.labelLineHeight, tokens.labelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.labelColorReadOnly, tokens.labelColorReadOnly, textFieldTokens.indicatorColor, tokens.indicatorColor, textFieldTokens.indicatorSizeInner, tokens.indicatorSize, textFieldTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, textFieldTokens.indicatorLabelPlacementInner, tokens.indicatorPlacement, textFieldTokens.indicatorLabelPlacementOuter, tokens.indicatorOuterPlacement, textFieldTokens.indicatorLabelPlacementInnerRight, tokens.indicatorPlacementRight, textFieldTokens.indicatorLabelPlacementOuterRight, tokens.indicatorOuterPlacementRight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, tokens.textFieldColor, textFieldTokens.contentSlotRightColor, tokens.textFieldContentRightSlotColor, textFieldTokens.contentSlotColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentRightSlotColorHover, textFieldTokens.contentSlotRightColor, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
-export var base = /*#__PURE__*/css(["display:inline-block;.", ",.", "{width:inherit;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
+export var base = /*#__PURE__*/css(["display:inline-block;.", ",.", "{width:inherit;}&.", "{width:100%;.", "{width:100%;}}"], popoverClasses.wrapper, popoverClasses.target, classes.datePickerstretched, popoverClasses.root);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-2"
 })(["color:var(", ");&.", "{color:var(", ");}&.", "{color:var(", ");}"], tokens.leftHelperColor, classes.datePickerError, tokens.leftHelperColorError, classes.datePickerSuccess, tokens.leftHelperColorSuccess);

package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx

@@ -81,7 +81,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
 };
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size, locale } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates, size, locale, ...rest } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -94,18 +94,23 @@ const StoryDefault = (args: CalendarProps) => {
     }, []);
 
     return (
-        <Calendar
-            size={size}
-            isRange={isRange}
-            isDouble={isDouble}
-            date={date}
-            value={(isRange ? valueRange : value) as Date & [Date, Date?]}
-            includeEdgeDates={includeEdgeDates}
-            locale={locale}
-            onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
-            min={min}
-            max={max}
-        />
+        <div style={{ height: '100vh' }}>
+            <Calendar
+                size={size}
+                isRange={isRange}
+                isDouble={isDouble}
+                date={date}
+                includeEdgeDates={includeEdgeDates}
+                locale={locale}
+                min={min}
+                max={max}
+                {...rest}
+                value={(isRange ? valueRange : value) as Date & [Date, Date?]}
+                onChangeValue={
+                    (isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void
+                }
+            />
+        </div>
     );
 };
 
@@ -118,12 +123,13 @@ export const Default: StoryObj<CalendarProps> = {
         includeEdgeDates: false,
         size: 'm',
         locale: 'ru',
+        stretched: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble, locale } = args;
+    const { min, max, includeEdgeDates, size, displayDouble, locale, ...rest } = args;
     const [value, setValue] = useState(new Date(2023, 6, 7));
     const [currentState, setCurrentState] = useState('Days');
 
@@ -170,10 +176,10 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
     };
 
     const calendarMap = {
-        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }),
-        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }),
-        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }),
-        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }),
+        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays, ...rest }),
+        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current, ...rest }),
+        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current, ...rest }),
+        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current, ...rest }),
     };
 
     return (
@@ -192,7 +198,7 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
                     </TabItem>
                 ))}
             </Tabs>
-            <div style={{ marginTop: '1rem' }}>{calendarMap[currentState]}</div>
+            <div style={{ marginTop: '1rem', height: '100vh' }}>{calendarMap[currentState]}</div>
         </>
     );
 };
@@ -205,12 +211,13 @@ export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
         includeEdgeDates: false,
         displayDouble: false,
         locale: 'ru',
+        stretched: false,
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble, locale } = args;
+    const { min, max, includeEdgeDates, size, displayDouble, locale, ...rest } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]);
     const [currentState, setCurrentState] = useState('Days');
 
@@ -232,35 +239,35 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
         return displayDouble ? (
             <CalendarBaseRange
                 size={size}
-                value={values}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
-                onChangeValue={handleOnChange}
                 locale={locale}
                 min={min}
                 max={max}
                 {...rest}
+                value={values}
+                onChangeValue={handleOnChange}
             />
         ) : (
             <CalendarDoubleRange
                 size={size}
-                value={values}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
-                onChangeValue={handleOnChange}
                 locale={locale}
                 min={min}
                 max={max}
                 {...rest}
+                value={values}
+                onChangeValue={handleOnChange}
             />
         );
     };
 
     const calendarMap = {
-        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }),
-        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }),
-        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }),
-        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }),
+        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays, ...rest }),
+        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current, ...rest }),
+        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current, ...rest }),
+        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current, ...rest }),
     };
 
     return (
@@ -279,7 +286,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                     </TabItem>
                 ))}
             </Tabs>
-            <div style={{ marginTop: '1rem' }}>{calendarMap[currentState]}</div>
+            <div style={{ marginTop: '1rem', height: '100vh' }}>{calendarMap[currentState]}</div>
         </>
     );
 };
@@ -292,6 +299,7 @@ export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }
         includeEdgeDates: false,
         displayDouble: false,
         locale: 'ru',
+        stretched: false,
     },
     render: (args) => <StoryRange {...args} />,
 };