@salutejs/plasma-new-hope 0.324.1-canary.1988.15209032570.0 → 0.324.1-canary.1994.15271445725.0

package/styled-components/cjs/components/Note/Note.styles.js

@@ -4,10 +4,15 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.TitleHelper = exports.Title = exports.TextHelper = exports.Text = exports.ContentWrapper = exports.ContentBefore = void 0;
+exports.base = exports.TitleHelper = exports.Title = exports.TextHelper = exports.Text = exports.ContentWrapper = exports.ContentBefore = exports.CloseIconWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
+var _engines = /*#__PURE__*/require("../../engines");
+var _Button = /*#__PURE__*/require("../Button");
+var _Note = /*#__PURE__*/require("./Note.tokens");
 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; }
+var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonConfig);
+var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;box-sizing:border-box;"]);
 var ContentBefore = exports.ContentBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-0"
@@ -17,7 +22,10 @@ var ContentWrapper = exports.ContentWrapper = /*#__PURE__*/_styledComponents["de
 })(["display:flex;flex-direction:column;box-sizing:border-box;"]);
 var Title = exports.Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-2"
-})([""]);
+})(["padding-right:", ";box-sizing:border-box;"], function (_ref) {
+  var hasClose = _ref.hasClose;
+  return hasClose ? "var(".concat(_Note.tokens.titlePaddingRight, ")") : 0;
+});
 var TitleHelper = exports.TitleHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-3"
 })(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;"]);
@@ -26,4 +34,7 @@ var Text = exports.Text = /*#__PURE__*/_styledComponents["default"].span.withCon
 })(["display:block;position:relative;"]);
 var TextHelper = exports.TextHelper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-5"
-})(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;"]);
+})(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;"]);
+var CloseIconWrapper = exports.CloseIconWrapper = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-6"
+})(["position:absolute;right:var(", ");top:var(", ");width:var(", ");height:var(", ");color:var(", ");:hover{color:var(", ");}"], _Note.tokens.closeIconRight, _Note.tokens.closeIconTop, _Note.tokens.closeIconButtonSize, _Note.tokens.closeIconButtonSize, _Note.tokens.closeIconColor, _Note.tokens.closeIconColorOnHover);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.tokens = exports.privateTokens = exports.classes = void 0;
 var classes = exports.classes = {
   stretch: 'note-stretch',
+  closeIcon: 'note-close-icon',
   contentAlignCenter: 'note-content-align-center'
 };
 var privateTokens = exports.privateTokens = {
@@ -32,10 +33,17 @@ var tokens = exports.tokens = {
   titleFontWeight: '--plasma-note-title-font-weight',
   titleLetterSpacing: '--plasma-note-title-letter-spacing',
   titleLineHeight: '--plasma-note-title-line-height',
+  titlePaddingRight: '--plasma-note-title-padding-right',
   textFontFamily: '--plasma-note-text-font-family',
   textFontSize: '--plasma-note-text-font-size',
   textFontStyle: '--plasma-note-text-font-style',
   textFontWeight: '--plasma-note-text-font-weight',
   textLetterSpacing: '--plasma-note-text-letter-spacing',
-  textLineHeight: '--plasma-note-text-line-height'
+  textLineHeight: '--plasma-note-text-line-height',
+  closeIconTop: '--plasma-note-close-icon-top',
+  closeIconRight: '--plasma-note-close-icon-right',
+  closeIconColor: '--plasma-note-close-icon-color',
+  closeIconColorOnHover: '--plasma-note-close-icon-color-on-hover',
+  closeIconSize: '--plasma-note-close-icon-size',
+  closeIconButtonSize: '--plasma-note-close-icon-button-size'
 };

package/styled-components/cjs/components/NumberFormat/NumberFormat.js

@@ -29,13 +29,18 @@ var composeNumberFormat = exports.composeNumberFormat = function composeNumberFo
         onChange(changeEvent, values);
       }
     };
+    var InputComponentWithoutEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+      return /*#__PURE__*/_react["default"].createElement(InputComponent, _extends({
+        ref: ref,
+        _textEllipsisDisable: true
+      }, props));
+    });
     return /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.NumericFormat, _extends({
       thousandSeparator: thousandSeparator,
       decimalScale: decimalScale,
       decimalSeparator: decimalSeparator,
-      customInput: InputComponent,
+      customInput: InputComponentWithoutEllipsis,
       getInputRef: outerRef,
-      _textEllipsisDisable: true,
       onValueChange: handleChangeValue
     }, rest));
   });

package/styled-components/cjs/components/PaginationDots/PaginationDot.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationDot = exports.DotBase = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Элемент пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ */
+var DotBase = exports.DotBase = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  componentId: "plasma-new-hope__sc-1lu8gfj-0"
+})(["width:", ";height:0.375rem;border-radius:1rem;background:", ";transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;& + &{margin-left:0.375rem;}&:focus{outline:0 none;}"], function (_ref) {
+  var isActive = _ref.isActive;
+  return isActive ? '1.75rem' : '0.375rem';
+}, function (_ref2) {
+  var isActive = _ref2.isActive;
+  return isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)';
+});
+
+/**
+ * Элемент пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ * @deprecated
+ */
+var PaginationDot = exports.PaginationDot = /*#__PURE__*/(0, _styledComponents["default"])(DotBase).withConfig({
+  componentId: "plasma-new-hope__sc-1lu8gfj-1"
+})(["cursor:pointer;background:", ";&:hover{background:var(--text-accent);}"], function (_ref3) {
+  var isActive = _ref3.isActive;
+  return isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)';
+});

package/styled-components/cjs/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationDots = exports.DotsBase = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Оборачивающий компонент для пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ */
+var DotsBase = exports.DotsBase = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  componentId: "plasma-new-hope__sc-1ritf0l-0"
+})(["display:flex;flex-wrap:wrap;align-self:center;align-items:center;margin:0;padding:0;list-style:none;"]);
+
+/**
+ * Оборачивающий компонент для пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ * @deprecated
+ */
+var PaginationDots = exports.PaginationDots = /*#__PURE__*/(0, _styledComponents["default"])(DotsBase).withConfig({
+  componentId: "plasma-new-hope__sc-1ritf0l-1"
+})([""]);

package/styled-components/cjs/components/PaginationDots/SmartPaginationDots.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmartPaginationDots = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _usePaginationDots2 = /*#__PURE__*/require("./usePaginationDots");
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
+var _PaginationDot = /*#__PURE__*/require("./PaginationDot");
+var _excluded = ["items", "index", "visibleItems", "onIndexChange"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * Компонент для отображения точек пагинации
+ * с возможностью ограничения количества видимых элементов.
+ * @deprecated
+ */
+var SmartPaginationDots = exports.SmartPaginationDots = function SmartPaginationDots(_ref) {
+  var items = _ref.items,
+    index = _ref.index,
+    visibleItems = _ref.visibleItems,
+    onIndexChange = _ref.onIndexChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _usePaginationDots = (0, _usePaginationDots2.usePaginationDots)({
+      items: items,
+      index: index,
+      visibleItems: visibleItems
+    }),
+    sliced = _usePaginationDots.sliced,
+    activeId = _usePaginationDots.activeId;
+  return /*#__PURE__*/_react["default"].createElement(_PaginationDots.PaginationDots, rest, sliced.map(function (_ref2, i) {
+    var id = _ref2.id;
+    return /*#__PURE__*/_react["default"].createElement(_PaginationDot.PaginationDot, {
+      key: "item:".concat(i),
+      isActive: id === activeId,
+      onClick: function onClick() {
+        return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
+      }
+    });
+  }));
+};

package/styled-components/cjs/components/PaginationDots/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PaginationDot", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDot.PaginationDot;
+  }
+});
+Object.defineProperty(exports, "PaginationDots", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots.PaginationDots;
+  }
+});
+Object.defineProperty(exports, "SmartPaginationDots", {
+  enumerable: true,
+  get: function get() {
+    return _SmartPaginationDots.SmartPaginationDots;
+  }
+});
+var _SmartPaginationDots = /*#__PURE__*/require("./SmartPaginationDots");
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
+var _PaginationDot = /*#__PURE__*/require("./PaginationDot");

package/styled-components/cjs/components/PaginationDots/usePaginationDots.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginationDots = void 0;
+var _react = /*#__PURE__*/require("react");
+var usePaginationDots = exports.usePaginationDots = function usePaginationDots(_ref) {
+  var items = _ref.items,
+    index = _ref.index,
+    _ref$visibleItems = _ref.visibleItems,
+    visibleItems = _ref$visibleItems === void 0 ? 7 : _ref$visibleItems;
+  var activeId = items[index].id;
+  var prevIndex = (0, _react.useRef)(null);
+  var direction = 0;
+  if (prevIndex.current !== null) {
+    direction = index > prevIndex.current ? 1 : -1;
+  }
+  var start;
+  var end;
+  if (direction === 1) {
+    end = Math.min(Math.max(index + 2, visibleItems), items.length);
+    start = Math.max(end - visibleItems, 0);
+  } else if (direction === -1) {
+    start = Math.min(Math.max(index - 1, 0), items.length - visibleItems);
+    end = start + visibleItems;
+  } else {
+    start = Math.max(index - Math.floor(visibleItems / 2), 0);
+    end = Math.min(start + visibleItems, items.length);
+    start = end - visibleItems;
+  }
+  var sliced = items.slice(start, end);
+  prevIndex.current = index;
+  return {
+    sliced: sliced,
+    activeId: activeId
+  };
+};

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} />,
 };