@salutejs/plasma-new-hope 0.325.0-canary.1954.15210668888.0 → 0.325.0-canary.1954.15274625094.0

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

@@ -1,6 +1,12 @@
-import React from 'react';
-import { getPlacements } from "../../../../utils";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useRef } from 'react';
+import cls from 'classnames';
+import { getPlacements, getSizeValueFromProp } from "../../../../utils";
 import { StyledPopover } from "../RangeDate.styles";
+import { classes } from "../../DatePicker.tokens";
 import { StyledCalendar, StyledCalendarDouble } from "./RangeDatePopover.styles";
 export var RangeDatePopover = function RangeDatePopover(_ref) {
   var Root = _ref.rootWrapper,
@@ -31,14 +37,36 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
     closeOnEsc = _ref.closeOnEsc,
     offset = _ref.offset,
+    calendarContainerWidth = _ref.calendarContainerWidth,
+    calendarContainerHeight = _ref.calendarContainerHeight,
+    stretched = _ref.stretched,
     type = _ref.type,
     size = _ref.size,
     _ref$lang = _ref.lang,
     lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    setIsInnerOpen = _ref.setIsInnerOpen,
     onChangeValue = _ref.onChangeValue,
     onChangeStartOfRange = _ref.onChangeStartOfRange,
     onToggle = _ref.onToggle;
   var innerIsOpen = Boolean(isOpen || opened);
+  var calendarRootRef = useRef(null);
+  var doubleCalendarRootRef = useRef(null);
+  var calendarContainerWidthValue = calendarContainerWidth ? getSizeValueFromProp(calendarContainerWidth, 'rem') : undefined;
+  var calendarContainerHeightValue = calendarContainerHeight ? getSizeValueFromProp(calendarContainerHeight, 'rem') : undefined;
+  var handleCalendarRootClick = function handleCalendarRootClick(event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var isRootClicked = event.target === (calendarRootRef === null || calendarRootRef === void 0 ? void 0 : calendarRootRef.current) || event.target === (doubleCalendarRootRef === null || doubleCalendarRootRef === void 0 ? void 0 : doubleCalendarRootRef.current);
+    if (innerIsOpen && stretched && isRootClicked) {
+      setIsInnerOpen(false);
+      if (onToggle) {
+        onToggle(false, event);
+      }
+    }
+  };
   if (isDoubleCalendar) {
     return /*#__PURE__*/React.createElement(StyledPopover, {
       opened: innerIsOpen,
@@ -52,7 +80,14 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
       isFocusTrapped: false,
       target: target,
       preventOverflow: false
-    }, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
+    }, /*#__PURE__*/React.createElement(Root, {
+      ref: doubleCalendarRootRef,
+      className: cls(classes.datePickerRoot, _defineProperty({}, classes.datePickerstretched, stretched)),
+      onClick: handleCalendarRootClick
+    }, /*#__PURE__*/React.createElement(StyledCalendarDouble, {
+      className: cls(_defineProperty({}, classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       eventList: eventList,
@@ -86,7 +121,14 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     target: target,
     preventOverflow: false,
     closeOnEsc: closeOnEsc
-  }, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(StyledCalendar, {
+  }, /*#__PURE__*/React.createElement(Root, {
+    ref: calendarRootRef,
+    className: cls(classes.datePickerRoot, _defineProperty({}, classes.datePickerstretched, stretched)),
+    onClick: handleCalendarRootClick
+  }, /*#__PURE__*/React.createElement(StyledCalendar, {
+    className: cls(_defineProperty({}, classes.datePickerCalendarstretched, stretched)),
+    innerWidth: calendarContainerWidthValue,
+    innerHeight: calendarContainerHeightValue,
     size: size,
     value: calendarValue,
     eventList: eventList,

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

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

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

@@ -1,5 +1,9 @@
-var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "calendarContainerWidth", "calendarContainerHeight", "stretched", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange", "autoComplete"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -9,7 +13,8 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { cx, getPlacements, noop } from "../../../utils";
+import cls from 'classnames';
+import { getPlacements, getSizeValueFromProp, noop } from "../../../utils";
 import { getDateFormatDelimiter } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
@@ -85,6 +90,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
       offset = _ref.offset,
+      calendarContainerWidth = _ref.calendarContainerWidth,
+      calendarContainerHeight = _ref.calendarContainerHeight,
+      stretched = _ref.stretched,
       onChangeValue = _ref.onChangeValue,
       onCommitDate = _ref.onCommitDate,
       onToggle = _ref.onToggle,
@@ -98,6 +106,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     }
     var inputRef = useRef(null);
     var innerRef = useRef(null);
+    var calendarRootRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
@@ -127,6 +136,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       inputValue = _useState8[0],
       setInputValue = _useState8[1];
+    var calendarContainerWidthValue = calendarContainerWidth ? getSizeValueFromProp(calendarContainerWidth, 'rem') : undefined;
+    var calendarContainerHeightValue = calendarContainerHeight ? getSizeValueFromProp(calendarContainerHeight, 'rem') : undefined;
     var _useDatePicker = useDatePicker({
         currentValue: inputValue,
         format: format,
@@ -171,6 +182,17 @@ export var datePickerRoot = function datePickerRoot(Root) {
       }
       setIsInnerOpen(isCalendarOpen);
     };
+    var handleCalendarRootClick = function handleCalendarRootClick(event) {
+      if (disabled || readOnly) {
+        return;
+      }
+      if (isInnerOpen && stretched && event.target === (calendarRootRef === null || calendarRootRef === void 0 ? void 0 : calendarRootRef.current)) {
+        setIsInnerOpen(false);
+        if (onToggle) {
+          onToggle(false, event);
+        }
+      }
+    };
     var _useKeyNavigation = useKeyNavigation({
         isCalendarOpen: isInnerOpen,
         format: format,
@@ -191,7 +213,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     };
     var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, {
       ref: inputRef,
-      className: cx(datePickerErrorClass, datePickerSuccessClass),
+      className: cls(datePickerErrorClass, datePickerSuccessClass),
       value: inputValue,
       size: size,
       readOnly: readOnly,
@@ -228,7 +250,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
-      className: cx(classes.datePickerRoot, className),
+      className: cls(classes.datePickerRoot, className, _defineProperty({}, classes.datePickerstretched, stretched)),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       ref: ref
@@ -245,12 +267,17 @@ export var datePickerRoot = function datePickerRoot(Root) {
       target: DatePickerInput,
       preventOverflow: false
     }, /*#__PURE__*/React.createElement(Root, {
+      ref: calendarRootRef,
       view: view,
       size: size,
-      className: cx(classes.datePickerRoot, className),
+      className: cls(classes.datePickerRoot, className, _defineProperty({}, classes.datePickerstretched, stretched)),
       disabled: disabled,
-      readOnly: !disabled && readOnly
+      readOnly: !disabled && readOnly,
+      onClick: handleCalendarRootClick
     }, /*#__PURE__*/React.createElement(StyledCalendar, {
+      className: cls(_defineProperty({}, classes.datePickerCalendarstretched, stretched)),
+      innerWidth: calendarContainerWidthValue,
+      innerHeight: calendarContainerHeightValue,
       size: size,
       value: calendarValue,
       type: type,
@@ -270,7 +297,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       locale: lang,
       onChangeValue: handleCalendarPick
     }))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
-      className: cx(datePickerErrorClass, datePickerSuccessClass)
+      className: cls(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       type: "hidden",
       datatype: "datepicker-single",

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

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

package/styled-components/es/components/Note/Note.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "style", "title", "text", "contentBefore", "contentBeforeSizing", "size", "view", "stretch", "width", "height"];
+var _excluded = ["className", "style", "title", "text", "contentBefore", "contentBeforeSizing", "size", "view", "stretch", "width", "height", "hasClose", "onCloseButtonClick"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -17,9 +17,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useResizeObserver } from '@salutejs/plasma-core';
 import { canUseDOM, cx, getSizeValueFromProp } from "../../utils";
+import { IconCrossThin } from "../_Icon/Icons/IconCrossThin";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
-import { base, ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from "./Note.styles";
+import { base, CloseIconWrapper, ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from "./Note.styles";
 import { classes, privateTokens, tokens } from "./Note.tokens";
 export var noteRoot = function noteRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
@@ -35,6 +36,8 @@ export var noteRoot = function noteRoot(Root) {
       stretch = _ref.stretch,
       width = _ref.width,
       height = _ref.height,
+      hasClose = _ref.hasClose,
+      onCloseButtonClick = _ref.onCloseButtonClick,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useState = useState(text),
       _useState2 = _slicedToArray(_useState, 2),
@@ -100,11 +103,22 @@ export var noteRoot = function noteRoot(Root) {
       ref: contentBeforeRef
     }, contentBefore), /*#__PURE__*/React.createElement(ContentWrapper, {
       ref: contentWrapperRef
-    }, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(TitleHelper, {
+    }, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
+      hasClose: hasClose
+    }, title), /*#__PURE__*/React.createElement(TitleHelper, {
       ref: titleHelperRef
     }, "C")), innerText && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, innerText, /*#__PURE__*/React.createElement(TextHelper, {
       ref: textRenderHelperRef
-    }, "C")))));
+    }, "C")))), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
+      view: "clear",
+      size: "s",
+      onClick: onCloseButtonClick,
+      className: classes.closeIcon
+    }, /*#__PURE__*/React.createElement(IconCrossThin, {
+      size: "s",
+      sizeCustomProperty: tokens.closeIconSize,
+      color: "inherit"
+    })));
   });
 };
 export var noteConfig = {

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

@@ -1,5 +1,10 @@
 import styled from 'styled-components';
 import { css } from 'styled-components';
+import { component, mergeConfig } from "../../engines";
+import { buttonConfig } from "../Button";
+import { tokens } from "./Note.tokens";
+var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
+var Button = /*#__PURE__*/component(mergedButtonConfig);
 export var base = /*#__PURE__*/css(["position:relative;display:flex;box-sizing:border-box;"]);
 export var ContentBefore = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-0"
@@ -9,7 +14,10 @@ export var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;flex-direction:column;box-sizing:border-box;"]);
 export var Title = /*#__PURE__*/styled.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(tokens.titlePaddingRight, ")") : 0;
+});
 export var TitleHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-3"
 })(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;"]);
@@ -18,4 +26,7 @@ export var Text = /*#__PURE__*/styled.span.withConfig({
 })(["display:block;position:relative;"]);
 export var TextHelper = /*#__PURE__*/styled.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;"]);
+export var CloseIconWrapper = /*#__PURE__*/styled(Button).withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-6"
+})(["position:absolute;right:var(", ");top:var(", ");width:var(", ");height:var(", ");color:var(", ");:hover{color:var(", ");}"], tokens.closeIconRight, tokens.closeIconTop, tokens.closeIconButtonSize, tokens.closeIconButtonSize, tokens.closeIconColor, tokens.closeIconColorOnHover);

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

@@ -1,5 +1,6 @@
 export var classes = {
   stretch: 'note-stretch',
+  closeIcon: 'note-close-icon',
   contentAlignCenter: 'note-content-align-center'
 };
 export var privateTokens = {
@@ -26,10 +27,17 @@ export var 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/es/components/PaginationDots/PaginationDot.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+/**
+ * Элемент пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ */
+export var DotBase = /*#__PURE__*/styled.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
+ */
+export var PaginationDot = /*#__PURE__*/styled(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/es/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+/**
+ * Оборачивающий компонент для пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ */
+export var DotsBase = /*#__PURE__*/styled.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
+ */
+export var PaginationDots = /*#__PURE__*/styled(DotsBase).withConfig({
+  componentId: "plasma-new-hope__sc-1ritf0l-1"
+})([""]);

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

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

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

@@ -0,0 +1,3 @@
+export { SmartPaginationDots } from "./SmartPaginationDots";
+export { PaginationDots } from "./PaginationDots";
+export { PaginationDot } from "./PaginationDot";

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

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+export var 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 = 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/es/components/Select/Select.tokens.js

@@ -30,6 +30,8 @@ export var 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/es/components/Select/ui/Inner/ui/Item/Item.js

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

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

@@ -14,7 +14,10 @@ var mergedIndicatorConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
 var Indicator = /*#__PURE__*/component(mergedIndicatorConfig);
 export var StyledWrapper = /*#__PURE__*/styled.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;}"], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, 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;}"], cellTokens.cellTitleColor, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "var(".concat(tokens.itemDisabledColor, ")") : "var(".concat(constants.cellTitleColor, ")");
+}, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
 export var StyledCell = /*#__PURE__*/styled(Cell).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
 })([""]);
@@ -32,47 +35,47 @@ export var sizeMap = {
 };
 export var StyledArrow = /*#__PURE__*/styled(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(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(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-});
-export var StyledIconDone = /*#__PURE__*/styled(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(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref4) {
+});
+export var StyledIconDone = /*#__PURE__*/styled(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(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function (_ref5) {
+  var _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'xs' : _ref5$size;
+  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
 });
 export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
 })(["margin:var(", ");line-height:0;color:var(", ");&:hover{color:var(", ");}"], tokens.disclosureIconMargin, tokens.disclosureIconColor, tokens.disclosureIconColorHover);
 export var IconWrapper = /*#__PURE__*/styled.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' ? tokens.itemIconSizeTight : 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' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
+}, function (_ref7) {
+  var variant = _ref7.variant;
+  return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
 }, tokens.itemIconMargin, tokens.checkboxFillColor);
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-8"
 })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
 export var Wrapper = /*#__PURE__*/styled.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;}", ";"], tokens.itemHeight, 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;}", ";"], tokens.itemHeight, tokens.dropdownBorderWidth, function (_ref8) {
+  var variant = _ref8.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.itemDisabledOpacity, tokens.itemDisabledColor, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),