@salutejs/plasma-new-hope 0.325.0-canary.1992.15255012441.0 → 0.325.0-canary.1993.15271190997.0

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

@@ -4,11 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RangeDatePopover = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
 var _utils = /*#__PURE__*/require("../../../../utils");
 var _RangeDate = /*#__PURE__*/require("../RangeDate.styles");
+var _DatePicker = /*#__PURE__*/require("../../DatePicker.tokens");
 var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _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); }
 var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref) {
   var Root = _ref.rootWrapper,
     target = _ref.target,
@@ -38,14 +46,36 @@ var RangeDatePopover = exports.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 = (0, _react.useRef)(null);
+  var doubleCalendarRootRef = (0, _react.useRef)(null);
+  var calendarContainerWidthValue = calendarContainerWidth ? (0, _utils.getSizeValueFromProp)(calendarContainerWidth, 'rem') : undefined;
+  var calendarContainerHeightValue = calendarContainerHeight ? (0, _utils.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["default"].createElement(_RangeDate.StyledPopover, {
       opened: innerIsOpen,
@@ -59,7 +89,14 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
       isFocusTrapped: false,
       target: target,
       preventOverflow: false
-    }, /*#__PURE__*/_react["default"].createElement(Root, null, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendarDouble, {
+    }, /*#__PURE__*/_react["default"].createElement(Root, {
+      ref: doubleCalendarRootRef,
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
+      onClick: handleCalendarRootClick
+    }, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendarDouble, {
+      className: (0, _classnames["default"])(_defineProperty({}, _DatePicker.classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       eventList: eventList,
@@ -93,7 +130,14 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
     target: target,
     preventOverflow: false,
     closeOnEsc: closeOnEsc
-  }, /*#__PURE__*/_react["default"].createElement(Root, null, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendar, {
+  }, /*#__PURE__*/_react["default"].createElement(Root, {
+    ref: calendarRootRef,
+    className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
+    onClick: handleCalendarRootClick
+  }, /*#__PURE__*/_react["default"].createElement(_RangeDatePopover.StyledCalendar, {
+    className: (0, _classnames["default"])(_defineProperty({}, _DatePicker.classes.datePickerCalendarstretched, stretched)),
+    innerWidth: calendarContainerWidthValue,
+    innerHeight: calendarContainerHeightValue,
     size: size,
     value: calendarValue,
     eventList: eventList,

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

@@ -20,7 +20,19 @@ var CalendarRange = /*#__PURE__*/(0, _Calendar.withRange)(Calendar);
 // NOTE: переопределение токенов Calendar
 var StyledCalendarDouble = exports.StyledCalendarDouble = /*#__PURE__*/(0, _styledComponents["default"])(CalendarDoubleRange).withConfig({
   componentId: "plasma-new-hope__sc-vflcna-0"
-})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);"], _Calendar.calendarBaseTokens.calendarSeparatorBackground, _DatePicker.tokens.calendarSeparatorBackground, _DatePickerBase.baseCalendarTokens, _Calendar.calendarBaseTokens.calendarWidth, _DatePicker.tokens.calendarWidth);
+})(["", ":var(", ");", " ", ":calc(var(", ") * 2 + 2.063rem);width:", ";height:", ";"], _Calendar.calendarBaseTokens.calendarSeparatorBackground, _DatePicker.tokens.calendarSeparatorBackground, _DatePickerBase.baseCalendarTokens, _DatePicker.pivateTokens.calendarDoubleWidth, _DatePicker.tokens.calendarContainerWidth, function (_ref) {
+  var innerWidth = _ref.innerWidth;
+  return innerWidth || "var(".concat(_DatePicker.pivateTokens.calendarDoubleWidth, ")");
+}, function (_ref2) {
+  var innerHeight = _ref2.innerHeight;
+  return innerHeight || "var(".concat(_DatePicker.tokens.calendarContainerHeight, ")");
+});
 var StyledCalendar = exports.StyledCalendar = /*#__PURE__*/(0, _styledComponents["default"])(CalendarRange).withConfig({
   componentId: "plasma-new-hope__sc-vflcna-1"
-})(["", ""], _DatePickerBase.baseCalendarTokens);
+})(["", " width:", ";height:", ";"], _DatePickerBase.baseCalendarTokens, function (_ref3) {
+  var innerWidth = _ref3.innerWidth;
+  return innerWidth || "var(".concat(_DatePicker.tokens.calendarContainerWidth, ")");
+}, function (_ref4) {
+  var innerHeight = _ref4.innerHeight;
+  return innerHeight || "var(".concat(_DatePicker.tokens.calendarContainerHeight, ")");
+});

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.datePickerRoot = exports.datePickerConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
 var _utils = /*#__PURE__*/require("../../../utils");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
 var _useDatePicker2 = /*#__PURE__*/require("../hooks/useDatePicker");
@@ -18,10 +19,14 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
-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"];
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { 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; } }
@@ -94,6 +99,9 @@ var datePickerRoot = exports.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,
@@ -107,6 +115,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     }
     var inputRef = (0, _react.useRef)(null);
     var innerRef = (0, _react.useRef)(null);
+    var calendarRootRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -136,6 +145,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       inputValue = _useState8[0],
       setInputValue = _useState8[1];
+    var calendarContainerWidthValue = calendarContainerWidth ? (0, _utils.getSizeValueFromProp)(calendarContainerWidth, 'rem') : undefined;
+    var calendarContainerHeightValue = calendarContainerHeight ? (0, _utils.getSizeValueFromProp)(calendarContainerHeight, 'rem') : undefined;
     var _useDatePicker = (0, _useDatePicker2.useDatePicker)({
         currentValue: inputValue,
         format: format,
@@ -180,6 +191,17 @@ var datePickerRoot = exports.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 = (0, _useKeyboardNavigation.useKeyNavigation)({
         isCalendarOpen: isInnerOpen,
         format: format,
@@ -200,7 +222,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     };
     var DatePickerInput = /*#__PURE__*/_react["default"].createElement(_SingleDate.StyledInput, {
       ref: inputRef,
-      className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass),
+      className: (0, _classnames["default"])(datePickerErrorClass, datePickerSuccessClass),
       value: inputValue,
       size: size,
       readOnly: readOnly,
@@ -237,7 +259,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,
-      className: (0, _utils.cx)(_DatePicker.classes.datePickerRoot, className),
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, className, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       ref: ref
@@ -254,12 +276,17 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       target: DatePickerInput,
       preventOverflow: false
     }, /*#__PURE__*/_react["default"].createElement(Root, {
+      ref: calendarRootRef,
       view: view,
       size: size,
-      className: (0, _utils.cx)(_DatePicker.classes.datePickerRoot, className),
+      className: (0, _classnames["default"])(_DatePicker.classes.datePickerRoot, className, _defineProperty({}, _DatePicker.classes.datePickerstretched, stretched)),
       disabled: disabled,
-      readOnly: !disabled && readOnly
+      readOnly: !disabled && readOnly,
+      onClick: handleCalendarRootClick
     }, /*#__PURE__*/_react["default"].createElement(_DatePickerBase.StyledCalendar, {
+      className: (0, _classnames["default"])(_defineProperty({}, _DatePicker.classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       type: type,
@@ -279,7 +306,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       locale: lang,
       onChangeValue: handleCalendarPick
     }))), leftHelper && /*#__PURE__*/_react["default"].createElement(_SingleDate.LeftHelper, {
-      className: (0, _utils.cx)(datePickerErrorClass, datePickerSuccessClass)
+      className: (0, _classnames["default"])(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/_react["default"].createElement(_DatePickerBase.InputHidden, _extends({
       type: "hidden",
       datatype: "datepicker-single",

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

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

package/styled-components/cjs/components/NumberInput/ui/Input/Input.js

@@ -140,14 +140,11 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
       }
       return;
     }
-    console.log('here');
     var isValid = _utils2.numberSchema.test(cleanValue);
     if (!isValid) {
-      console.log('not valid', cleanValue);
       setValues(event, lastValidValue);
       return;
     }
-    console.log('valid!', cleanValue);
     if (textWrapperRef !== null && textWrapperRef !== void 0 && textWrapperRef.current && wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && (textWrapperRef === null || textWrapperRef === void 0 || (_textWrapperRef$curre = textWrapperRef.current) === null || _textWrapperRef$curre === void 0 ? void 0 : _textWrapperRef$curre.clientWidth) > (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientWidth)) {
       wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
     }

package/styled-components/cjs/components/Select/Select.tokens.js

@@ -36,6 +36,8 @@ var tokens = exports.tokens = {
   itemIconSizeTight: '--plasma-select-item-icon-size-tight',
   itemIconMargin: '--plasma-select-item-icon-margin',
   itemBackgroundHover: '--plasma-select-item-background-hover',
+  itemDisabledOpacity: '--plasma-select-item-disabled-opacity',
+  itemDisabledColor: '--plasma-select-item-disabled-color',
   cellPadding: '--plasma-select-cell-padding',
   cellPaddingLeftContent: '--plasma-select-cell-padding-left-content',
   cellPaddingContent: '--plasma-select-cell-padding-content',

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js

@@ -103,7 +103,9 @@ var Item = exports.Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Item.StyledIconDone, {
     size: (0, _utils2.sizeToIconSize)(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
+  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, {
+    disabled: itemDisabled
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight
     // TODO: #1548

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -21,7 +21,10 @@ var mergedIndicatorConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.in
 var Indicator = /*#__PURE__*/(0, _engines.component)(mergedIndicatorConfig);
 var StyledWrapper = exports.StyledWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;& div.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], _Cell.cellTokens.cellTitleColor, _Select.constants.cellTitleColor, _Cell.cellTokens.cellBackgroundColor, _Select.constants.cellBackgroundColor, _Cell.cellTokens.cellPadding, _Select.tokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Select.tokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Select.tokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Select.tokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Select.tokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Select.tokens.cellGap, _Cell.cellTokens.cellTitleFontFamily, _Select.tokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Select.tokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Select.tokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Select.tokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Select.tokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Select.tokens.cellTitleLineHeight);
+})(["", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;& div.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], _Cell.cellTokens.cellTitleColor, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "var(".concat(_Select.tokens.itemDisabledColor, ")") : "var(".concat(_Select.constants.cellTitleColor, ")");
+}, _Cell.cellTokens.cellBackgroundColor, _Select.constants.cellBackgroundColor, _Cell.cellTokens.cellPadding, _Select.tokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Select.tokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Select.tokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Select.tokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Select.tokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Select.tokens.cellGap, _Cell.cellTokens.cellTitleFontFamily, _Select.tokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Select.tokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Select.tokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Select.tokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Select.tokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Select.tokens.cellTitleLineHeight);
 var StyledCell = exports.StyledCell = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
 })([""]);
@@ -39,47 +42,47 @@ var sizeMap = exports.sizeMap = {
 };
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureRightCentered).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
-})(["width:", ";height:", ";"], function (_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'xs' : _ref$size;
-  return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref2) {
+})(["width:", ";height:", ";"], function (_ref2) {
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'xs' : _ref2$size;
   return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-});
-var StyledIconDone = exports.StyledIconDone = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDone).withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-5"
-})(["width:", ";height:", ";"], function (_ref3) {
+}, function (_ref3) {
   var _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? 'xs' : _ref3$size;
   return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref4) {
+});
+var StyledIconDone = exports.StyledIconDone = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDone).withConfig({
+  componentId: "plasma-new-hope__sc-fr2h0y-5"
+})(["width:", ";height:", ";"], function (_ref4) {
   var _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 'xs' : _ref4$size;
   return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function (_ref5) {
+  var _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'xs' : _ref5$size;
+  return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
 });
 var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
 })(["margin:var(", ");line-height:0;color:var(", ");&:hover{color:var(", ");}"], _Select.tokens.disclosureIconMargin, _Select.tokens.disclosureIconColor, _Select.tokens.disclosureIconColorHover);
 var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref5) {
-  var variant = _ref5.variant;
-  return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
-}, function (_ref6) {
+})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref6) {
   var variant = _ref6.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
+}, function (_ref7) {
+  var variant = _ref7.variant;
+  return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
 }, _Select.tokens.itemIconMargin, _Select.tokens.checkboxFillColor);
 var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-8"
 })(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-9"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, _Select.tokens.dropdownBorderWidth, function (_ref7) {
-  var variant = _ref7.variant;
+})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:var(", ");color:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, _Select.tokens.dropdownBorderWidth, function (_ref8) {
+  var variant = _ref8.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
-}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
+}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemDisabledOpacity, _Select.tokens.itemDisabledColor, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")"),

package/styled-components/cjs/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} />,
 };