@salutejs/plasma-new-hope 0.346.0-canary.2425.21516060814.0 → 0.346.0-canary.2425.21550887989.0

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

@@ -3,9 +3,10 @@ export var classes = {
     datePickerSuccess: 'date-picker-success',
     datePickerRoot: 'date-picker-root',
     datePickerstretched: 'date-picker-stretched',
-    datePickerCalendarstretched: 'date-picker-calendar-stretched'
+    datePickerCalendarstretched: 'date-picker-calendar-stretched',
+    shortcutItemDisabled: 'date-picker-shortcut-item-disabled'
 };
-export var pivateTokens = {
+export var privateTokens = {
     calendarDoubleWidth: '--plasma_private-calendar-double-width'
 };
 export var tokens = {
@@ -99,6 +100,13 @@ export var tokens = {
     titleCaptionFontWeight: '--plasma-date-picker-title-caption-font-weight',
     titleCaptionLetterSpacing: '--plasma-date-picker-title-caption-letter-spacing',
     titleCaptionLineHeight: '--plasma-date-picker-title-caption-line-height',
+    /** Токены контейнера календаря */ popoverShadow: '--plasma-date-picker-popover-shadow',
+    popoverGap: '--plasma-date-picker-popover-gap',
+    popoverBorderRadius: '--plasma-date-picker-popover-border-radius',
+    popoverPadding: '--plasma-date-picker-popover-padding',
+    popoverVerticalPadding: '--plasma-date-picker-popover-vertical-padding',
+    popoverBackgroundColor: '--plasma-date-picker-popover__background-color',
+    popoverSeparatorBackground: '--plasma-date-picker-popover__separator-background',
     /** Прозрачность для всего компонента в состоянии disabled */ disabledOpacity: '--plasma-date-picker-disabled-opacity',
     rangeReadOnlyOpacity: '--plasma-date-picker-readonly-opacity',
     /** Цвет обводки поля ввода при фокусе */ focusColor: '--plasma-date-picker-focus-color',
@@ -169,12 +177,8 @@ export var tokens = {
     textFieldDividerColorError: '--plasma-date-picker-textfield__divider-color-error',
     textFieldDividerColorHover: '--plasma-date-picker-textfield__divider-color-hover',
     textFieldDividerColorFocus: '--plasma-date-picker-textfield__divider-color-focus',
-    /** Токены календаря */ calendarMarginTop: '--plasma-date-picker-calendar-margin-top',
-    calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
-    calendarShadow: '--plasma-date-picker-calendar-shadow',
-    calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
-    calendarContainerWidth: '--plasma-date-picker-calendar-container-width',
-    calendarContainerHeight: '--plasma-date-picker-calendar-container-height',
+    /** Токены календаря */ calendarWidth: '--plasma-date-picker-calendar-width',
+    calendarHeight: '--plasma-date-picker-calendar-height',
     calendarBorderWidth: '--plasma-date-picker-calendar-border-width',
     calendarBorderColor: '--plasma-date-picker-calendar-border-color',
     calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
@@ -240,7 +244,6 @@ export var tokens = {
     iconButtonPadding: '--plasma-date-picker-icon-button__padding',
     iconButtonRadius: '--plasma-date-picker-icon-button__radius',
     iconButtonFocusColor: '--plasma-date-picker-icon-button__focus-color',
-    calendarBackgroundColor: '--plasma-date-picker-calendar__background-color',
     calendarSelectedItemBackground: '--plasma-date-picker-calendar__selected-item-background',
     calendarSelectedItemColor: '--plasma-date-picker-calendar__selected-item-color',
     calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar__selectable-item-background-hover',
@@ -253,7 +256,6 @@ export var tokens = {
     calendarActiveItemColor: '--plasma-date-picker-calendar__active-item-color',
     calendarHoveredItemBackground: '--plasma-date-picker-calendar__hovered-item-background',
     calendarHoveredItemColor: '--plasma-date-picker-calendar__hovered-item-color',
-    calendarSeparatorBackground: '--plasma-date-picker-calendar__separator-background',
     calendarRangeBackground: '--plasma-date-picker-calendar__range-background',
     calendarOutlineFocusColor: '--plasma-date-picker-calendar__outline-focus-color',
     calendarContentPrimaryColor: '--plasma-date-picker-calendar__content-primary-color',
@@ -312,5 +314,21 @@ export var tokens = {
     hintTooltipArrowMaskImage: '--plasma-date-picker-calendar-hint-tooltip-arrow-mask-image',
     hintTooltipArrowBackground: '--plasma-date-picker-calendar-hint-tooltip-arrow-background',
     hintTooltipArrowHeight: '--plasma-date-picker-calendar-hint-tooltip-arrow-height',
-    hintTooltipArrowEdgeMargin: '--plasma-date-picker-calendar-hint-tooltip-arrow-edge-margin'
+    hintTooltipArrowEdgeMargin: '--plasma-date-picker-calendar-hint-tooltip-arrow-edge-margin',
+    /** Токены предустановленных дат */ shortcutColor: '--plasma-date-picker-shortcut-item-color',
+    shortcutBackground: '--plasma-date-picker-shortcut-item-background',
+    shortcutBackgroundHover: '--plasma-date-picker-shortcut-item-background-hover',
+    shortcutFontFamily: '--plasma-date-picker-shortcut-item-font-family',
+    shortcutFontStyle: '--plasma-date-picker-shortcut-item-font-style',
+    shortcutFontSize: '--plasma-date-picker-shortcut-item-font-size',
+    shortcutFontWeight: '--plasma-date-picker-shortcut-item-font-weight',
+    shortcutLetterSpacing: '--plasma-date-picker-shortcut-item-letter-spacing',
+    shortcutLineHeight: '--plasma-date-picker-shortcut-item-line-height',
+    shortcutPadding: '--plasma-date-picker-shortcut-item-padding',
+    shortcutPaddingLeftContent: '--plasma-date-picker-shortcut-item-padding-left-content',
+    shortcutPaddingContent: '--plasma-date-picker-shortcut-item-padding-content',
+    shortcutPaddingRightContent: '--plasma-date-picker-shortcut-item-right-padding-content',
+    shortcutGap: '--plasma-date-picker-shortcut-item-gap',
+    shortcutBorderRadius: '--plasma-date-picker-shortcut-item-border-radius',
+    outlineFocusColor: '--plasma-date-picker-outline-focus'
 };

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

@@ -5,26 +5,30 @@ import { calendarBaseConfig, calendarBaseTokens } from "../Calendar";
 import { tokens } from "./DatePicker.tokens";
 var mergedCalendarConfig = mergeConfig(calendarBaseConfig);
 var Calendar = component(mergedCalendarConfig);
-export var baseCalendarTokens = "\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.calendarEventItemBottom, ": var(").concat(tokens.calendarEventItemBottom, ");\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    ").concat(calendarBaseTokens.calendarArrowHeaderCustomSize, ": var(").concat(tokens.calendarHeaderArrowCustomSize, ");\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\n    ").concat(calendarBaseTokens.tooltipPaddingTop, " var(").concat(tokens.tooltipPaddingTop, ");\n    ").concat(calendarBaseTokens.tooltipPaddingRight, " var(").concat(tokens.tooltipPaddingRight, ");\n    ").concat(calendarBaseTokens.tooltipPaddingBottom, " var(").concat(tokens.tooltipPaddingBottom, ");\n    ").concat(calendarBaseTokens.tooltipPaddingLeft, " var(").concat(tokens.tooltipPaddingLeft, ");\n    ").concat(calendarBaseTokens.tooltipMinHeight, " var(").concat(tokens.tooltipMinHeight, ");\n    ").concat(calendarBaseTokens.tooltipBackgroundColor, " var(").concat(tokens.tooltipBackgroundColor, ");\n    ").concat(calendarBaseTokens.tooltipBoxShadow, " var(").concat(tokens.tooltipBoxShadow, ");\n    ").concat(calendarBaseTokens.tooltipBorderRadius, " var(").concat(tokens.tooltipBorderRadius, ");\n    ").concat(calendarBaseTokens.tooltipColor, " var(").concat(tokens.tooltipColor, ");\n    ").concat(calendarBaseTokens.tooltipTextFontFamily, " var(").concat(tokens.tooltipTextFontFamily, ");\n    ").concat(calendarBaseTokens.tooltipTextFontSize, " var(").concat(tokens.tooltipTextFontSize, ");\n    ").concat(calendarBaseTokens.tooltipTextFontStyle, " var(").concat(tokens.tooltipTextFontStyle, ");\n    ").concat(calendarBaseTokens.tooltipTextFontWeight, " var(").concat(tokens.tooltipTextFontWeight, ");\n    ").concat(calendarBaseTokens.tooltipTextFontLetterSpacing, " var(").concat(tokens.tooltipTextFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.tooltipTextFontLineHeight, " var(").concat(tokens.tooltipTextFontLineHeight, ");\n    ").concat(calendarBaseTokens.tooltipContentLeftMargin, " var(").concat(tokens.tooltipContentLeftMargin, ");\n    ").concat(calendarBaseTokens.tooltipArrowMaskWidth, " var(").concat(tokens.tooltipArrowMaskWidth, ");\n    ").concat(calendarBaseTokens.tooltipArrowMaskHeight, " var(").concat(tokens.tooltipArrowMaskHeight, ");\n    ").concat(calendarBaseTokens.tooltipArrowMaskImage, " var(").concat(tokens.tooltipArrowMaskImage, ");\n    ").concat(calendarBaseTokens.tooltipArrowBackground, " var(").concat(tokens.tooltipArrowBackground, ");\n    ").concat(calendarBaseTokens.tooltipArrowHeight, " var(").concat(tokens.tooltipArrowHeight, ");\n    ").concat(calendarBaseTokens.tooltipArrowEdgeMargin, " var(").concat(tokens.tooltipArrowEdgeMargin, ");\n");
+export var baseCalendarTokens = "\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.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.calendarEventItemBottom, ": var(").concat(tokens.calendarEventItemBottom, ");\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    ").concat(calendarBaseTokens.calendarArrowHeaderCustomSize, ": var(").concat(tokens.calendarHeaderArrowCustomSize, ");\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\n    ").concat(calendarBaseTokens.tooltipPaddingTop, " var(").concat(tokens.tooltipPaddingTop, ");\n    ").concat(calendarBaseTokens.tooltipPaddingRight, " var(").concat(tokens.tooltipPaddingRight, ");\n    ").concat(calendarBaseTokens.tooltipPaddingBottom, " var(").concat(tokens.tooltipPaddingBottom, ");\n    ").concat(calendarBaseTokens.tooltipPaddingLeft, " var(").concat(tokens.tooltipPaddingLeft, ");\n    ").concat(calendarBaseTokens.tooltipMinHeight, " var(").concat(tokens.tooltipMinHeight, ");\n    ").concat(calendarBaseTokens.tooltipBackgroundColor, " var(").concat(tokens.tooltipBackgroundColor, ");\n    ").concat(calendarBaseTokens.tooltipBoxShadow, " var(").concat(tokens.tooltipBoxShadow, ");\n    ").concat(calendarBaseTokens.tooltipBorderRadius, " var(").concat(tokens.tooltipBorderRadius, ");\n    ").concat(calendarBaseTokens.tooltipColor, " var(").concat(tokens.tooltipColor, ");\n    ").concat(calendarBaseTokens.tooltipTextFontFamily, " var(").concat(tokens.tooltipTextFontFamily, ");\n    ").concat(calendarBaseTokens.tooltipTextFontSize, " var(").concat(tokens.tooltipTextFontSize, ");\n    ").concat(calendarBaseTokens.tooltipTextFontStyle, " var(").concat(tokens.tooltipTextFontStyle, ");\n    ").concat(calendarBaseTokens.tooltipTextFontWeight, " var(").concat(tokens.tooltipTextFontWeight, ");\n    ").concat(calendarBaseTokens.tooltipTextFontLetterSpacing, " var(").concat(tokens.tooltipTextFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.tooltipTextFontLineHeight, " var(").concat(tokens.tooltipTextFontLineHeight, ");\n    ").concat(calendarBaseTokens.tooltipContentLeftMargin, " var(").concat(tokens.tooltipContentLeftMargin, ");\n    ").concat(calendarBaseTokens.tooltipArrowMaskWidth, " var(").concat(tokens.tooltipArrowMaskWidth, ");\n    ").concat(calendarBaseTokens.tooltipArrowMaskHeight, " var(").concat(tokens.tooltipArrowMaskHeight, ");\n    ").concat(calendarBaseTokens.tooltipArrowMaskImage, " var(").concat(tokens.tooltipArrowMaskImage, ");\n    ").concat(calendarBaseTokens.tooltipArrowBackground, " var(").concat(tokens.tooltipArrowBackground, ");\n    ").concat(calendarBaseTokens.tooltipArrowHeight, " var(").concat(tokens.tooltipArrowHeight, ");\n    ").concat(calendarBaseTokens.tooltipArrowEdgeMargin, " var(").concat(tokens.tooltipArrowEdgeMargin, ");\n");
 // NOTE: переопределение токенов Calendar
 export var StyledCalendar = styled(Calendar).withConfig({
     displayName: "DatePickerBase.styles__StyledCalendar",
-    componentId: "sc-ac98e633-0"
+    componentId: "sc-bb891bc6-0"
 })([
-    "",
-    " width:",
+    "flex-shrink:",
+    ";width:",
     ";height:",
-    ";"
-], baseCalendarTokens, function(param) {
+    ";",
+    ""
+], function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth && innerWidth !== '0' ? '1' : '0';
+}, function(param) {
     var innerWidth = param.innerWidth;
-    return innerWidth || "var(".concat(tokens.calendarContainerWidth, ")");
+    return innerWidth && innerWidth !== '0' ? '100%' : "var(".concat(tokens.calendarWidth, ")");
 }, function(param) {
     var innerHeight = param.innerHeight;
-    return innerHeight || "var(".concat(tokens.calendarContainerHeight, ")");
-});
+    return innerHeight && innerHeight !== '0' ? '100%' : "var(".concat(tokens.calendarHeight, ")");
+}, baseCalendarTokens);
 export var InputHidden = styled.input.withConfig({
     displayName: "DatePickerBase.styles__InputHidden",
-    componentId: "sc-ac98e633-1"
+    componentId: "sc-bb891bc6-1"
 })([
     "",
     ";"

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

@@ -157,7 +157,7 @@ export var datePickerRangeRoot = function(Root) {
             'top',
             'bottom'
         ] : _param_placement, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeAfterDateSelect = _param.closeAfterDateSelect, closeAfterDateSelect = _param_closeAfterDateSelect === void 0 ? true : _param_closeAfterDateSelect, offset = _param.offset, _param_format = _param.// calendar
-        format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventTooltipOptions = _param.eventTooltipOptions, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, onToggle = _param.onToggle, onChange = _param.onChange, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onCommitFirstDate = _param.onCommitFirstDate, onCommitSecondDate = _param.onCommitSecondDate, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
+        format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventTooltipOptions = _param.eventTooltipOptions, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, dateShortcuts = _param.dateShortcuts, _param_dateShortcutsPlacement = _param.dateShortcutsPlacement, dateShortcutsPlacement = _param_dateShortcutsPlacement === void 0 ? 'left' : _param_dateShortcutsPlacement, dateShortcutsWidth = _param.dateShortcutsWidth, onToggle = _param.onToggle, onChange = _param.onChange, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onCommitFirstDate = _param.onCommitFirstDate, onCommitSecondDate = _param.onCommitSecondDate, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
             "className",
             "name",
             "autoComplete",
@@ -235,6 +235,9 @@ export var datePickerRangeRoot = function(Root) {
             "type",
             "calendarContainerWidth",
             "calendarContainerHeight",
+            "dateShortcuts",
+            "dateShortcutsPlacement",
+            "dateShortcutsWidth",
             "onToggle",
             "onChange",
             "onChangeFirstValue",
@@ -454,6 +457,10 @@ export var datePickerRangeRoot = function(Root) {
             closeOnEsc: closeOnEsc,
             onToggle: handleToggle
         }).onKeyDown;
+        var handleShortcutDateSelect = function(shortcutDate) {
+            handleFirstCalendarPick(shortcutDate[0]);
+            handleSecondCalendarPick(shortcutDate[1]);
+        };
         var handleChangeStartOfRange = function(chosenDate, dateInfo) {
             if (!fullDateEntered) {
                 handleFirstCalendarPick(chosenDate, dateInfo);
@@ -668,7 +675,11 @@ export var datePickerRangeRoot = function(Root) {
             rootWrapper: RootWrapper,
             onChangeStartOfRange: handleChangeStartOfRange,
             onChangeValue: handleChangeCalendarValue,
-            setIsInnerOpen: setIsInnerOpen
+            setIsInnerOpen: setIsInnerOpen,
+            dateShortcuts: dateShortcuts,
+            dateShortcutsPlacement: dateShortcutsPlacement,
+            dateShortcutsWidth: dateShortcutsWidth,
+            onShortcutDateSelect: handleShortcutDateSelect
         }), /*#__PURE__*/ React.createElement(InputHidden, _object_spread({
             name: name,
             type: "hidden",

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

@@ -10,14 +10,30 @@ var mergedPopoverConfig = mergeConfig(popoverConfig);
 var Popover = component(mergedPopoverConfig);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "RangeDate.styles__StyledPopover",
-    componentId: "sc-9752899b-0"
+    componentId: "sc-8a6fa694-0"
 })([
-    ""
-]);
+    ".",
+    "{box-sizing:border-box;display:flex;gap:var(",
+    ");border-radius:var(",
+    ");padding:var(",
+    ");border:var(",
+    ") solid var(",
+    ");background:var(",
+    ");box-shadow:var(",
+    ");overflow:hidden;width:",
+    ";height:",
+    ";}"
+], classes.datePickerRoot, tokens.popoverGap, tokens.popoverBorderRadius, tokens.popoverPadding, tokens.calendarBorderWidth, tokens.calendarBorderColor, tokens.popoverBackgroundColor, tokens.popoverShadow, function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth || 'fit-content';
+}, function(param) {
+    var innerHeight = param.innerHeight;
+    return innerHeight || 'fit-content';
+});
 // NOTE: переопределение токенов Range
 export var StyledRange = styled(Range).withConfig({
     displayName: "RangeDate.styles__StyledRange",
-    componentId: "sc-9752899b-1"
+    componentId: "sc-8a6fa694-1"
 })([
     "",
     ":var(",

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

@@ -16,12 +16,13 @@ import cls from "classnames";
 import { getPlacements, getSizeValueFromProp } from "../../../../utils";
 import { StyledPopover } from "../RangeDate.styles";
 import { classes } from "../../DatePicker.tokens";
+import { StyledShortcutList } from "../../ui";
 import { StyledCalendar, StyledCalendarDouble } from "./RangeDatePopover.styles";
 export var RangeDatePopover = function(param) {
     var Root = param.rootWrapper, target = param.target, isOpen = param.isOpen, opened = param.opened, isDoubleCalendar = param.isDoubleCalendar, calendarValue = param.calendarValue, min = param.min, max = param.max, renderFromDate = param.renderFromDate, includeEdgeDates = param.includeEdgeDates, eventTooltipOptions = param.eventTooltipOptions, eventList = param.eventList, disabledList = param.disabledList, eventMonthList = param.eventMonthList, disabledMonthList = param.disabledMonthList, eventQuarterList = param.eventQuarterList, disabledQuarterList = param.disabledQuarterList, eventYearList = param.eventYearList, disabledYearList = param.disabledYearList, _param_frame = param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, zIndex = param.zIndex, _param_placement = param.placement, placement = _param_placement === void 0 ? [
         'top',
         'bottom'
-    ] : _param_placement, _param_closeOnOverlayClick = param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, closeOnEsc = param.closeOnEsc, offset = param.offset, calendarContainerWidth = param.calendarContainerWidth, calendarContainerHeight = param.calendarContainerHeight, stretched = param.stretched, type = param.type, size = param.size, _param_lang = param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, disabled = param.disabled, readOnly = param.readOnly, setIsInnerOpen = param.setIsInnerOpen, onChangeValue = param.onChangeValue, onChangeStartOfRange = param.onChangeStartOfRange, onToggle = param.onToggle;
+    ] : _param_placement, _param_closeOnOverlayClick = param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, closeOnEsc = param.closeOnEsc, offset = param.offset, calendarContainerWidth = param.calendarContainerWidth, calendarContainerHeight = param.calendarContainerHeight, stretched = param.stretched, type = param.type, size = param.size, _param_lang = param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, disabled = param.disabled, readOnly = param.readOnly, dateShortcuts = param.dateShortcuts, _param_dateShortcutsPlacement = param.dateShortcutsPlacement, dateShortcutsPlacement = _param_dateShortcutsPlacement === void 0 ? 'left' : _param_dateShortcutsPlacement, dateShortcutsWidth = param.dateShortcutsWidth, onShortcutDateSelect = param.onShortcutDateSelect, setIsInnerOpen = param.setIsInnerOpen, onChangeValue = param.onChangeValue, onChangeStartOfRange = param.onChangeStartOfRange, onToggle = param.onToggle;
     var innerIsOpen = Boolean(isOpen || opened);
     var calendarRootRef = useRef(null);
     var doubleCalendarRootRef = useRef(null);
@@ -52,12 +53,20 @@ export var RangeDatePopover = function(param) {
             isFocusTrapped: false,
             target: target,
             preventOverflow: false,
-            zIndex: zIndex
+            zIndex: zIndex,
+            innerWidth: calendarContainerWidthValue,
+            innerHeight: calendarContainerHeightValue
         }, /*#__PURE__*/ React.createElement(Root, {
             ref: doubleCalendarRootRef,
             className: cls(classes.datePickerRoot, _define_property({}, classes.datePickerstretched, stretched)),
             onClick: handleCalendarRootClick
-        }, /*#__PURE__*/ React.createElement(StyledCalendarDouble, {
+        }, (dateShortcuts === null || dateShortcuts === void 0 ? void 0 : dateShortcuts.length) && onShortcutDateSelect ? /*#__PURE__*/ React.createElement(StyledShortcutList, {
+            items: dateShortcuts,
+            setShortcutDate: onShortcutDateSelect,
+            dateShortcutsWidth: dateShortcutsWidth,
+            calendarContainerHeight: calendarContainerHeight,
+            dateShortcutsPlacement: dateShortcutsPlacement
+        }) : null, /*#__PURE__*/ React.createElement(StyledCalendarDouble, {
             className: cls(_define_property({}, classes.datePickerCalendarstretched, stretched)),
             innerWidth: calendarContainerWidthValue,
             innerHeight: calendarContainerHeightValue,
@@ -95,12 +104,20 @@ export var RangeDatePopover = function(param) {
         target: target,
         preventOverflow: false,
         closeOnEsc: closeOnEsc,
-        zIndex: zIndex
+        zIndex: zIndex,
+        innerWidth: calendarContainerWidthValue,
+        innerHeight: calendarContainerHeightValue
     }, /*#__PURE__*/ React.createElement(Root, {
         ref: calendarRootRef,
         className: cls(classes.datePickerRoot, _define_property({}, classes.datePickerstretched, stretched)),
         onClick: handleCalendarRootClick
-    }, /*#__PURE__*/ React.createElement(StyledCalendar, {
+    }, (dateShortcuts === null || dateShortcuts === void 0 ? void 0 : dateShortcuts.length) && onShortcutDateSelect ? /*#__PURE__*/ React.createElement(StyledShortcutList, {
+        items: dateShortcuts,
+        setShortcutDate: onShortcutDateSelect,
+        dateShortcutsWidth: dateShortcutsWidth,
+        calendarContainerHeight: calendarContainerHeight,
+        dateShortcutsPlacement: dateShortcutsPlacement
+    }) : null, /*#__PURE__*/ React.createElement(StyledCalendar, {
         className: cls(_define_property({}, classes.datePickerCalendarstretched, stretched)),
         innerWidth: calendarContainerWidthValue,
         innerHeight: calendarContainerHeightValue,

package/dist/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 { calendarDoubleConfig, withRange, calendarBaseConfig } from "../../../Calendar";
 import { component, mergeConfig } from "../../../../engines";
-import { pivateTokens, tokens } from "../../DatePicker.tokens";
+import { privateTokens, tokens } from "../../DatePicker.tokens";
 import { baseCalendarTokens } from "../../DatePickerBase.styles";
 var mergedCalendarDoubleConfig = mergeConfig(calendarDoubleConfig);
 var CalendarDouble = component(mergedCalendarDoubleConfig);
@@ -12,35 +12,41 @@ var CalendarRange = withRange(Calendar);
 // NOTE: переопределение токенов Calendar
 export var StyledCalendarDouble = styled(CalendarDoubleRange).withConfig({
     displayName: "RangeDatePopover.styles__StyledCalendarDouble",
-    componentId: "sc-95daf184-0"
+    componentId: "sc-94558ff2-0"
 })([
     "",
-    ":var(",
-    ");",
-    " ",
     ":calc(var(",
-    ") * 2 + 2.063rem);width:",
+    ") * 2 + 2.063rem);flex-shrink:",
+    ";width:",
     ";height:",
-    ";"
-], calendarBaseTokens.calendarSeparatorBackground, tokens.calendarSeparatorBackground, baseCalendarTokens, pivateTokens.calendarDoubleWidth, tokens.calendarContainerWidth, function(param) {
+    ";",
+    ""
+], privateTokens.calendarDoubleWidth, tokens.calendarWidth, function(param) {
     var innerWidth = param.innerWidth;
-    return innerWidth || "var(".concat(pivateTokens.calendarDoubleWidth, ")");
+    return innerWidth && innerWidth !== '0' ? '1' : '0';
+}, function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth && innerWidth !== '0' ? '100%' : "var(".concat(privateTokens.calendarDoubleWidth, ")");
 }, function(param) {
     var innerHeight = param.innerHeight;
-    return innerHeight || "var(".concat(tokens.calendarContainerHeight, ")");
-});
+    return innerHeight && innerHeight !== '0' ? '100%' : "var(".concat(tokens.calendarHeight, ")");
+}, baseCalendarTokens);
 export var StyledCalendar = styled(CalendarRange).withConfig({
     displayName: "RangeDatePopover.styles__StyledCalendar",
-    componentId: "sc-95daf184-1"
+    componentId: "sc-94558ff2-1"
 })([
-    "",
-    " width:",
+    "flex-shrink:",
+    ";width:",
     ";height:",
-    ";"
-], baseCalendarTokens, function(param) {
+    ";",
+    ""
+], function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth && innerWidth !== '0' ? '1' : '0';
+}, function(param) {
     var innerWidth = param.innerWidth;
-    return innerWidth || "var(".concat(tokens.calendarContainerWidth, ")");
+    return innerWidth && innerWidth !== '0' ? '100%' : "var(".concat(tokens.calendarWidth, ")");
 }, function(param) {
     var innerHeight = param.innerHeight;
-    return innerHeight || "var(".concat(tokens.calendarContainerHeight, ")");
-});
+    return innerHeight && innerHeight !== '0' ? '100%' : "var(".concat(tokens.calendarHeight, ")");
+}, baseCalendarTokens);

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

@@ -108,6 +108,7 @@ import { classes } from "../DatePicker.tokens";
 import { InputHidden, StyledCalendar } from "../DatePickerBase.styles";
 import { keys, useKeyNavigation } from "../hooks/useKeyboardNavigation";
 import { getFormattedDates, invokeOnCommitDate } from "../utils";
+import { StyledShortcutList } from "../ui";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
@@ -130,7 +131,7 @@ export var datePickerRoot = function(Root) {
             'top',
             'bottom'
         ] : _param_placement, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeAfterDateSelect = _param.closeAfterDateSelect, closeAfterDateSelect = _param_closeAfterDateSelect === void 0 ? true : _param_closeAfterDateSelect, offset = _param.offset, _param_format = _param.// calendar
-        format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventTooltipOptions = _param.eventTooltipOptions, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, onChangeValue = _param.onChangeValue, onCommitDate = _param.onCommitDate, onToggle = _param.onToggle, onFocus = _param.onFocus, onBlur = _param.onBlur, onChange = _param.onChange, rest = _object_without_properties(_param, [
+        format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventTooltipOptions = _param.eventTooltipOptions, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, dateShortcuts = _param.dateShortcuts, _param_dateShortcutsPlacement = _param.dateShortcutsPlacement, dateShortcutsPlacement = _param_dateShortcutsPlacement === void 0 ? 'left' : _param_dateShortcutsPlacement, dateShortcutsWidth = _param.dateShortcutsWidth, onChangeValue = _param.onChangeValue, onCommitDate = _param.onCommitDate, onToggle = _param.onToggle, onFocus = _param.onFocus, onBlur = _param.onBlur, onChange = _param.onChange, rest = _object_without_properties(_param, [
             "className",
             "name",
             "autoComplete",
@@ -197,6 +198,9 @@ export var datePickerRoot = function(Root) {
             "type",
             "calendarContainerWidth",
             "calendarContainerHeight",
+            "dateShortcuts",
+            "dateShortcutsPlacement",
+            "dateShortcutsWidth",
             "onChangeValue",
             "onCommitDate",
             "onToggle",
@@ -401,7 +405,9 @@ export var datePickerRoot = function(Root) {
             isFocusTrapped: false,
             target: DatePickerInput,
             preventOverflow: false,
-            zIndex: zIndex
+            zIndex: zIndex,
+            innerWidth: calendarContainerWidthValue,
+            innerHeight: calendarContainerHeightValue
         }, /*#__PURE__*/ React.createElement(Root, {
             ref: calendarRootRef,
             view: view,
@@ -410,7 +416,13 @@ export var datePickerRoot = function(Root) {
             disabled: disabled,
             readOnly: !disabled && readOnly,
             onClick: handleCalendarRootClick
-        }, /*#__PURE__*/ React.createElement(StyledCalendar, {
+        }, (dateShortcuts === null || dateShortcuts === void 0 ? void 0 : dateShortcuts.length) ? /*#__PURE__*/ React.createElement(StyledShortcutList, {
+            items: dateShortcuts,
+            setShortcutDate: onCalendarPick,
+            dateShortcutsWidth: dateShortcutsWidth,
+            calendarContainerHeight: calendarContainerHeight,
+            dateShortcutsPlacement: dateShortcutsPlacement
+        }) : null, /*#__PURE__*/ React.createElement(StyledCalendar, {
             className: cls(_define_property({}, classes.datePickerCalendarstretched, stretched)),
             innerWidth: calendarContainerWidthValue,
             innerHeight: calendarContainerHeightValue,

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

@@ -10,14 +10,30 @@ var mergedPopoverConfig = mergeConfig(popoverConfig);
 var Popover = component(mergedPopoverConfig);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "SingleDate.styles__StyledPopover",
-    componentId: "sc-e7a0100b-0"
+    componentId: "sc-1eb1563e-0"
 })([
-    ""
-]);
+    ".",
+    "{box-sizing:border-box;display:flex;gap:var(",
+    ");border-radius:var(",
+    ");padding:var(",
+    ");border:var(",
+    ") solid var(",
+    ");background:var(",
+    ");box-shadow:var(",
+    ");overflow:hidden;width:",
+    ";height:",
+    ";}"
+], classes.datePickerRoot, tokens.popoverGap, tokens.popoverBorderRadius, tokens.popoverPadding, tokens.calendarBorderWidth, tokens.calendarBorderColor, tokens.popoverBackgroundColor, tokens.popoverShadow, function(param) {
+    var innerWidth = param.innerWidth;
+    return innerWidth || 'fit-content';
+}, function(param) {
+    var innerHeight = param.innerHeight;
+    return innerHeight || 'fit-content';
+});
 // NOTE: переопределение токенов TextField
 export var StyledInput = styled(TextField).withConfig({
     displayName: "SingleDate.styles__StyledInput",
-    componentId: "sc-e7a0100b-1"
+    componentId: "sc-1eb1563e-1"
 })([
     "width:100%;",
     ":var(",
@@ -298,7 +314,7 @@ export var base = css([
 ], popoverClasses.wrapper, popoverClasses.target, classes.datePickerstretched, popoverClasses.root);
 export var LeftHelper = styled.div.withConfig({
     displayName: "SingleDate.styles__LeftHelper",
-    componentId: "sc-e7a0100b-2"
+    componentId: "sc-1eb1563e-2"
 })([
     "color:var(",
     ");&.",

package/dist/styled-components/es/components/DatePicker/ui/DateShortcut/DateShortcutList.styles.js

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { DateShortcutList } from "../../../DateTimePicker/ui";
+import { dateTimePickerTokens } from "../../../DateTimePicker";
+import { tokens } from "../../DatePicker.tokens";
+export var StyledShortcutList = styled(DateShortcutList).withConfig({
+    displayName: "DateShortcutList.styles__StyledShortcutList",
+    componentId: "sc-b1c8b5db-0"
+})([
+    "",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], dateTimePickerTokens.popoverGap, tokens.popoverGap, dateTimePickerTokens.popoverSeparatorBackground, tokens.popoverSeparatorBackground, dateTimePickerTokens.popoverVerticalPadding, tokens.popoverVerticalPadding, dateTimePickerTokens.calendarHeight, tokens.calendarHeight, dateTimePickerTokens.shortcutPadding, tokens.shortcutPadding, dateTimePickerTokens.shortcutBorderRadius, tokens.shortcutBorderRadius, dateTimePickerTokens.shortcutBackgroundHover, tokens.shortcutBackgroundHover, dateTimePickerTokens.disabledOpacity, tokens.disabledOpacity, dateTimePickerTokens.outlineFocusColor, tokens.outlineFocusColor, dateTimePickerTokens.shortcutBorderRadius, tokens.shortcutBorderRadius, dateTimePickerTokens.shortcutColor, tokens.shortcutColor, dateTimePickerTokens.shortcutPadding, tokens.shortcutPadding, dateTimePickerTokens.shortcutPaddingContent, tokens.shortcutPaddingContent, dateTimePickerTokens.shortcutPaddingLeftContent, tokens.shortcutPaddingLeftContent, dateTimePickerTokens.shortcutPaddingRightContent, tokens.shortcutPaddingRightContent, dateTimePickerTokens.shortcutGap, tokens.shortcutGap, dateTimePickerTokens.shortcutFontFamily, tokens.shortcutFontFamily, dateTimePickerTokens.shortcutFontSize, tokens.shortcutFontSize, dateTimePickerTokens.shortcutFontStyle, tokens.shortcutFontStyle, dateTimePickerTokens.shortcutFontWeight, tokens.shortcutFontWeight, dateTimePickerTokens.shortcutLetterSpacing, tokens.shortcutLetterSpacing, dateTimePickerTokens.shortcutLineHeight, tokens.shortcutLineHeight);

package/dist/styled-components/es/components/DatePicker/ui/index.js

@@ -0,0 +1 @@
+export * from "./DateShortcut/DateShortcutList.styles";

package/dist/styled-components/es/components/DateTimePicker/DateTimePicker.js

@@ -323,7 +323,7 @@ export var dateTimePickerRoot = function(Root) {
             readOnly: !disabled && readOnly
         }, (dateShortcuts === null || dateShortcuts === void 0 ? void 0 : dateShortcuts.length) ? /*#__PURE__*/ React.createElement(DateShortcutList, {
             items: dateShortcuts,
-            setShortcutDate: updateExternalDate,
+            setShortcutDate: handleCalendarPick,
             dateShortcutsWidth: dateShortcutsWidth,
             calendarContainerHeight: calendarContainerHeight,
             dateShortcutsPlacement: dateShortcutsPlacement