@salutejs/plasma-new-hope 0.94.0-canary.1224.9684925191.0 → 0.94.0-canary.1269.9679187594.0

package/styled-components/es/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.js

@@ -1,58 +1,51 @@
 import styled from 'styled-components';
+import { flexCenter, selectedMixin } from '../../mixins';
 import { classes, tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
-import { addSelected, flexCenter } from '../../mixins';
 var inRange = function inRange() {
-  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 100%;\n        height: calc(100% - 0.125rem);\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
+  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 2.5rem;\n        height: 1.875rem;\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
 };
 var sideInRange = function sideInRange() {
-  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 0.75rem;\n        height: calc(100% - 0.125rem);\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
+  return "\n    &:before {\n        content: '';\n        z-index: -1;\n        position: absolute;\n        width: 0.313rem;\n        height: 1.875rem;\n        background: var(".concat(tokens.calendarRangeBackground, ");\n    }\n");
 };
 export var StyledDay = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2y5uj0-0"
-})(["border-radius:calc(var(", ") - 0.125rem);", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(classes.dayInRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(classes.daySideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(classes.daySideLeft), function (_ref) {
+})(["border-radius:0.375rem;", ";&.", "{", ";}&.", "{", ";}&.", "{&:before{left:", ";}}&.", "{&:before{right:", ";}}"], /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(classes.dayInRange), /*#__PURE__*/inRange(), /*#__PURE__*/String(classes.daySideInRange), /*#__PURE__*/sideInRange(), /*#__PURE__*/String(classes.daySideLeft), function (_ref) {
   var offset = _ref.offset;
   return "".concat(offset, "px");
 }, /*#__PURE__*/String(classes.daySideRight), function (_ref2) {
   var offset = _ref2.offset;
   return "".concat(offset, "px");
 });
+var dayOfWeek = function dayOfWeek() {
+  return "\n    color: var(--plasma-colors-tertiary);\n";
+};
 var disabledDay = function disabledDay() {
-  return "\n    cursor: not-allowed;\n    opacity: 0.4;\n";
+  return "\n    cursor: not-allowed;\n    opacity: 0.4;\n\n    ".concat(addFocus({
+    outlineSize: '0.063rem',
+    outlineOffset: '-0.063rem',
+    outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
+    outlineRadius: '0.563rem'
+  }), ";\n");
 };
 var disabledCurrentDay = function disabledCurrentDay() {
-  return "\n    ".concat(disabledDay(), ";\n");
+  return "\n    ".concat(disabledDay(), ";\n    --calendar_private-add-focus-outline-offset: 0.125rem;\n");
 };
 export var StyledDayRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2y5uj0-1"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-width:var(", ");min-height:var(", ");border-radius:var(", ");", ";color:", ";visibility:", ";&.", "{", ";", ";&.", "{", ";}}&.", "{color:var(", ");}&.", "{", ";}&.", "{", ";}&.", "{& > .", ":before{width:calc(100% + 2px);height:100%;}& > .", ":before{width:100%;right:-1px;left:unset;}& > .", ":before{width:100%;left:-1px;right:unset;}}"], tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontWeight, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayItemBorderRadius, /*#__PURE__*/String(flexCenter), function (_ref3) {
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-width:2.5rem;min-height:2rem;border-radius:var(", ");", ";color:", ";visibility:", ";&.", "{--calendar_private-selected-min-width:2.25rem;--calendar_private-selected-min-height:1.75rem;--calendar_private-selected-background:var(", ");--calendar_private-selected-color:var(", ");--calendar_private-selectable-background-hover:var(", ");--calendar_private-current-border-color:var(", ");--calendar_private-current-background-hover:var(", ");--calendar_private-current-color-hover:var(", ");--calendar_private-current-child-background-hover:var(", ");--calendar_private-active-background:var(", ");--calendar_private-active-color:var(", ");--calendar_private-hovered-background:var(", ");--calendar_private-hovered-color:var(", ");", ";", ";}&.", "{", ";}&.", "{", ";}&.", "{", ";}"], tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontWeight, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), function (_ref3) {
   var isDayInCurrentMonth = _ref3.isDayInCurrentMonth;
   return isDayInCurrentMonth ? "var(".concat(tokens.calendarContentPrimaryColor, ")") : "var(".concat(tokens.calendarContentSecondaryColor, ")");
 }, function (_ref4) {
   var isDayInCurrentMonth = _ref4.isDayInCurrentMonth,
     isDouble = _ref4.isDouble;
   return !isDayInCurrentMonth && isDouble ? 'hidden' : 'visible';
-}, /*#__PURE__*/String(classes.selectableItem), /*#__PURE__*/addSelected({
-  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemWidth, ") - 0.25rem)"),
-  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemHeight, ") - 0.25rem)"),
-  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarDaySelectedFontWeight, ")"),
-  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
-  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
-  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
-  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
-  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
-  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
-}), /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemBorderRadius, ") + 0.125rem)")
-}), classes.currentItem, /*#__PURE__*/addFocus({
+}, /*#__PURE__*/String(classes.selectableItem), tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
-  outlineOffset: '-0.1875rem',
+  outlineOffset: '-0.063rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarDayItemBorderRadius, ") + 0.125rem)")
-}), classes.dayOfWeek, tokens.calendarDayOfWeekColor, classes.dayDisabled, /*#__PURE__*/disabledDay(), classes.dayDisabledCurrent, /*#__PURE__*/disabledCurrentDay(), classes.currentItem, classes.dayInRange, classes.daySideRight, classes.daySideLeft);
+  outlineRadius: '0.563rem'
+}), /*#__PURE__*/String(selectedMixin), /*#__PURE__*/String(classes.dayOfWeek), /*#__PURE__*/dayOfWeek(), /*#__PURE__*/String(classes.dayDisabled), /*#__PURE__*/disabledDay(), /*#__PURE__*/String(classes.dayDisabledCurrent), /*#__PURE__*/disabledCurrentDay());
 export var StyledEvents = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2y5uj0-2"
 })(["display:flex;position:absolute;bottom:0.25rem;"]);

package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js

@@ -1,12 +1,11 @@
 import styled from 'styled-components';
 import { flexCenter } from '../../mixins';
-import { tokens } from '../../Calendar.tokens';
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-3ydwr5-0"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledCalendarDays = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-3ydwr5-1"
-})(["outline:none;padding:var(", ");box-sizing:border-box;"], tokens.calendarDaysPadding);
+})(["outline:none;padding:0.5rem 1rem 1.5rem;box-sizing:border-box;"]);
 export var StyledCalendarDaysHint = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-3ydwr5-2"
 })(["display:none;"]);

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -1,9 +1,9 @@
+var _IconDisclosureLeft, _IconDisclosureRight;
 import React, { useCallback, useMemo } from 'react';
-import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
-import { classes } from '../../Calendar.tokens';
-import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
+import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledHeader, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
 
 /**
  * Компонент шапки календаря.
@@ -13,7 +13,6 @@ export var CalendarHeader = function CalendarHeader(_ref) {
     type = _ref$type === void 0 ? 'Days' : _ref$type,
     _ref$startYear = _ref.startYear,
     startYear = _ref$startYear === void 0 ? 0 : _ref$startYear,
-    size = _ref.size,
     firstDate = _ref.firstDate,
     secondDate = _ref.secondDate,
     isDouble = _ref.isDouble,
@@ -33,55 +32,42 @@ export var CalendarHeader = function CalendarHeader(_ref) {
       return '';
     }
     if (type === CalendarState.Days) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderDate, null, MONTH_NAMES[date.monthIndex]), /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
-        color: "inherit",
-        size: size === 'xs' ? 'xs' : 's'
-      })));
+      return "".concat(MONTH_NAMES[date.monthIndex], " ").concat(date.year);
     }
     if (type === CalendarState.Months) {
-      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
-        color: "inherit",
-        size: size === 'xs' ? 'xs' : 's'
-      }));
+      return "".concat(date.year);
     }
     if (type === CalendarState.Years) {
-      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, startYear, "\u2014", startYear + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
-        color: "inherit",
-        size: size === 'xs' ? 'xs' : 's'
-      }));
+      return "".concat(startYear, "\u2014").concat(startYear + YEAR_RENDER_COUNT - 1);
     }
     return '';
-  }, [type, startYear, size]);
+  }, [type, startYear]);
   var currentCalendarType = getCalendarType(isDouble ? CalendarState.Days : type);
   var PreviousButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledArrow, {
+      type: "button",
       "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 ".concat(currentCalendarType),
+      tabIndex: 0,
       onClick: function onClick() {
         return onPrev();
       }
-    }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
-      color: "inherit",
-      size: size === 'xs' ? 'xs' : 's'
-    }));
-  }, [currentCalendarType, size, onPrev]);
+    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, null)));
+  }, [currentCalendarType, onPrev]);
   var NextButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledArrow, {
+      type: "button",
       "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 ".concat(currentCalendarType),
+      tabIndex: 0,
       onClick: function onClick() {
         return onNext();
       }
-    }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
-      color: "inherit",
-      size: size === 'xs' ? 'xs' : 's'
-    }));
-  }, [currentCalendarType, size, onNext]);
-  return /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isDouble ? /*#__PURE__*/React.createElement(StyledNavigation, null, /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, null, PreviousButton, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
+    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React.createElement(IconDisclosureRight, null)));
+  }, [currentCalendarType, onNext]);
+  return /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isDouble ? /*#__PURE__*/React.createElement(StyledNavigation, null, PreviousButton, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
     "aria-live": "polite"
-  }, getHeaderContent(firstDate))), /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, {
-    className: classes.doubleHeaderLastDateWrapper
-  }, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
+  }, getHeaderContent(firstDate)), /*#__PURE__*/React.createElement(StyledHeaderDouble, {
     "aria-live": "polite"
-  }, getHeaderContent(secondDate)), NextButton)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
+  }, getHeaderContent(secondDate)), NextButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
     type: "button",
     "aria-live": "polite",
     id: "id-grid-label",

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -1,39 +1,21 @@
 import styled from 'styled-components';
-import { classes, tokens } from '../../Calendar.tokens';
-import { component, mergeConfig } from '../../../../engines';
-import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
-import { flexCenter } from '../../mixins';
-import { addFocus } from '../../../../mixins';
-var mergedIconButtonConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
-var IconButton = /*#__PURE__*/component(mergedIconButtonConfig);
+import { buttonFocus, flexCenter } from '../../mixins';
+import { tokens } from '../../Calendar.tokens';
 export var StyledCalendarHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-0"
-})(["display:flex;justify-content:space-between;align-items:center;padding:var(", ");"], tokens.calendarHeaderWrapperPadding);
-export var StyledHeader = /*#__PURE__*/styled.button.withConfig({
+})(["padding:1rem 1.5rem 0;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight);
+export var StyledHeader = /*#__PURE__*/styled(buttonFocus).withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-1"
-})(["border:none;background-color:transparent;padding:0;outline:none;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");padding:var(", ");color:var(", ");cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;&:hover,&:active{color:var(", ");}", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, tokens.calendarContentSecondaryColor, /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: '0.563rem'
-}));
-export var StyledHeaderDate = /*#__PURE__*/styled.span.withConfig({
+})(["color:var(", ");cursor:pointer;padding:0.5rem 0;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarContentPrimaryColor, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight);
+export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-2"
-})(["", ";pointer-events:none;"], flexCenter);
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");margin-top:0;margin-bottom:0;padding:0.5rem 0;flex:1;", ";&:first-of-type{margin-right:3rem;}&:last-of-type{margin-left:3rem;}"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, /*#__PURE__*/String(flexCenter));
 export var StyledArrows = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-3"
-})(["display:flex;gap:var(", ");padding:var(", ");"], tokens.calendarHeaderArrowGap, tokens.calendarHeaderArrowPadding);
-
-// NOTE: переопределение токенов IconButton
-export var StyledArrow = /*#__PURE__*/styled(IconButton).withConfig({
+})(["padding:0.5rem 0;width:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarHeaderArrowContainerWidth);
+export var StyledArrow = /*#__PURE__*/styled(buttonFocus).withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-4"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius, iconButtonTokens.iconButtonFocusColor, tokens.iconButtonFocusColor);
+})(["display:flex;cursor:pointer;"]);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-5"
-})(["width:100%;", ";"], flexCenter);
-export var StyledDoubleHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-186pzg3-6"
-})(["width:100%;display:grid;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
-export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
-  componentId: "plasma-new-hope__sc-186pzg3-7"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderDateGap, /*#__PURE__*/String(flexCenter));
+})(["width:100%;", ";"], /*#__PURE__*/String(flexCenter));

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js

@@ -60,7 +60,7 @@ export var CalendarMonths = function CalendarMonths(_ref) {
         isCurrent = _ref2.isCurrent,
         monthFullName = _ref2.monthFullName;
       var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = isCurrent ? classes.currentItem : undefined;
+      var currentClass = !isSelected && isCurrent ? classes.currentItem : undefined;
       return /*#__PURE__*/React.createElement(StyledMonthRoot, {
         id: "month-test-".concat(i, "-").concat(j),
         className: cx(selectedClass, currentClass, classes.selectableItem),

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js

@@ -1,36 +1,22 @@
 import styled from 'styled-components';
-import { classes, tokens } from '../../Calendar.tokens';
+import { flexCenter, selectedMixin } from '../../mixins';
+import { tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
-import { addSelected, flexCenter } from '../../mixins';
 export var StyledCalendarMonths = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-0"
-})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarMonthsPadding);
+})(["padding:0.5rem 1.5rem 1.5rem;box-sizing:border-box;"]);
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-1"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledMonth = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-2"
-})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter));
+})(["border-radius:0.438rem;", ";"], /*#__PURE__*/String(flexCenter));
+var selectable = /*#__PURE__*/"\n    ".concat(addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.063rem',
+  outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: '0.563rem'
+}), ";\n\n    --calendar_private-selected-min-width: 5.25rem;\n    --calendar_private-selected-min-height: 3.25rem;\n    --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n    --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n    --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n    --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n    --calendar_private-active-color-hover: var(").concat(tokens.calendarActiveItemColor, ");\n    --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n    --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n\n    ").concat( /*#__PURE__*/String(selectedMixin), ";\n");
 export var StyledMonthRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-3"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthItemHeight, tokens.calendarMonthItemWidth, tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
-  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemWidth, ") - 0.25rem)"),
-  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemHeight, ") - 0.25rem)"),
-  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarMonthSelectedFontWeight, ")"),
-  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
-  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
-  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
-  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
-  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
-  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
-}), /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
-}), classes.currentItem, /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.1875rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
-}));
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:3.5rem;border-radius:var(", ");flex:1;", ";", ";"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(selectable));

package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.js

@@ -59,7 +59,7 @@ export var CalendarYears = function CalendarYears(_ref) {
         isSelected = _ref2.isSelected,
         isCurrent = _ref2.isCurrent;
       var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = isCurrent ? classes.currentItem : undefined;
+      var currentClass = !isSelected && isCurrent ? classes.currentItem : undefined;
       return /*#__PURE__*/React.createElement(StyledYearRoot, {
         className: cx(selectedClass, currentClass, classes.selectableItem),
         ref: function ref(element) {

package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js

@@ -1,36 +1,24 @@
 import styled from 'styled-components';
-import { classes, tokens } from '../../Calendar.tokens';
+import { flexCenter, selectedMixin } from '../../mixins';
+import { tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
-import { addSelected, flexCenter } from '../../mixins';
 export var StyledCalendarYears = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-0"
-})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarYearsPadding);
+})(["padding:0.5rem 1.5rem 1.5rem;box-sizing:border-box;"]);
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-1"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledYear = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-2"
-})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter));
+})(["border-radius:0.438rem;", ";"], /*#__PURE__*/String(flexCenter));
+var selectable = function selectable() {
+  return "\n    ".concat(addFocus({
+    outlineSize: '0.063rem',
+    outlineOffset: '-0.063rem',
+    outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
+    outlineRadius: '0.563rem'
+  }), ";\n\n    --calendar_private-selected-min-width: 5.25rem;\n    --calendar_private-selected-min-height: 3.25rem;\n    --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n    --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n    --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n    --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n    --calendar_private-active-color: var(").concat(tokens.calendarActiveItemColor, ");\n    --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n    --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n    \n    ").concat(String(selectedMixin), ";\n");
+};
 export var StyledYearRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-3"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontWeight, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearItemHeight, tokens.calendarYearItemWidth, tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
-  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemWidth, ") - 0.25rem)"),
-  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemHeight, ") - 0.25rem)"),
-  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarYearSelectedFontWeight, ")"),
-  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
-  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
-  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
-  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
-  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
-  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
-}), /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemBorderRadius, ") + 0.125rem)")
-}), classes.currentItem, /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.1875rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemBorderRadius, ") + 0.125rem)")
-}));
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:3.5rem;border-radius:var(", ");flex:1;", ";", ";"], tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontWeight, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/selectable());

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

@@ -10,7 +10,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { Children, forwardRef, useEffect, useRef, useState } from 'react';
 import { safeUseId, useForkRef } from '@salutejs/plasma-core';
-import { cx, getPlacements } from '../../utils';
+import { cx } from '../../utils';
+import { getPlacements } from '../Dropdown/utils';
 import { getChildren, getNewSelected, getValues } from '../Select/utils';
 import { useKeyNavigation } from '../Select/hooks';
 import { useDidMountEffect, useForceUpdate } from '../../hooks';

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

@@ -9,14 +9,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useReducer } from 'react';
-import { cx, getPlacements } from '../../utils';
+import { cx } from '../../utils';
 import { pathReducer } from './reducers/pathReducer';
 import { focusedPathReducer } from './reducers/focusedPathReducer';
 import { DropdownInner } from './ui';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { Ul, StyledPopover, base } from './Dropdown.styles';
-import { childrenWithProps } from './utils';
+import { getPlacements, childrenWithProps } from './utils';
 import { classes } from './Dropdown.tokens';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 import { useHashMaps } from './hooks/useHashMaps';
@@ -154,8 +154,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick,
         listWidth: listWidth,
         variant: variant,
-        hasArrow: hasArrow,
-        size: size
+        hasArrow: hasArrow
       });
     }))));
   });

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -19,8 +19,7 @@ var DropdownInner = function DropdownInner(_ref) {
     onItemClick = _ref.onItemClick,
     listWidth = _ref.listWidth,
     variant = _ref.variant,
-    hasArrow = _ref.hasArrow,
-    size = _ref.size;
+    hasArrow = _ref.hasArrow;
   var handleToggle = function handleToggle(opened) {
     if (opened) {
       dispatchPath({
@@ -59,8 +58,7 @@ var DropdownInner = function DropdownInner(_ref) {
         ariaControls: listId,
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
-        ariaLabel: item.label,
-        size: size
+        ariaLabel: item.label
       }),
       onToggle: handleToggle,
       isFocusTrapped: false,
@@ -92,8 +90,7 @@ var DropdownInner = function DropdownInner(_ref) {
         onItemClick: onItemClick,
         listWidth: listWidth,
         variant: variant,
-        hasArrow: hasArrow,
-        size: size
+        hasArrow: hasArrow
       });
     })));
   }
@@ -108,8 +105,7 @@ var DropdownInner = function DropdownInner(_ref) {
     onHover: onHover,
     onItemSelect: onItemSelect,
     onItemClick: onItemClick,
-    variant: variant,
-    size: size
+    variant: variant
   });
 };
 export { DropdownInner };

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -1,3 +1,4 @@
+var _DisclosureIconWrappe;
 import React, { useEffect, useRef } from 'react';
 import { classes } from '../../Dropdown.tokens';
 import { cx } from '../../../../utils';
@@ -21,8 +22,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     ariaLevel = _ref.ariaLevel,
     ariaLabel = _ref.ariaLabel,
     variant = _ref.variant,
-    hasArrow = _ref.hasArrow,
-    size = _ref.size;
+    hasArrow = _ref.hasArrow;
   var value = item.value,
     label = item.label,
     disabled = item.disabled,
@@ -30,7 +30,6 @@ export var DropdownItem = function DropdownItem(_ref) {
     contentLeft = item.contentLeft,
     contentRight = item.contentRight;
   var ref = useRef(null);
-  var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
   var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
@@ -76,8 +75,8 @@ export var DropdownItem = function DropdownItem(_ref) {
     "aria-haspopup": ariaHasPopup,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
-    size: disclosureIconSize,
+  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && (_DisclosureIconWrappe || (_DisclosureIconWrappe = /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+    size: "xs",
     color: "inherit"
-  })));
+  })))));
 };

package/styled-components/es/components/Dropdown/utils/index.js

@@ -1,5 +1,20 @@
 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); }
 import React, { Children, cloneElement, isValidElement } from 'react';
+export var getPlacement = function getPlacement(placement) {
+  return "".concat(placement, "-start");
+};
+export var getPlacements = function getPlacements(placements) {
+  if (!placements) {
+    return;
+  }
+  var isArray = Array.isArray(placements);
+  if (!isArray) {
+    return getPlacement(placements);
+  }
+  return (placements || []).map(function (placement) {
+    return getPlacement(placement);
+  });
+};
 export var getCorrectHeight = function getCorrectHeight(listHeight) {
   if (Number.isNaN(Number(listHeight))) {
     return listHeight.toString();

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

@@ -3,7 +3,7 @@ var _excluded = ["label", "leftHelper", "contentLeft", "contentRight", "view", "
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { cx } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
@@ -53,9 +53,6 @@ export var rangeRoot = function rangeRoot(Root) {
       onBlurFirstTextfield = _ref.onBlurFirstTextfield,
       onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
-    var rangeRef = useRef(null);
-    var firstTextFieldRef = useRef(null);
-    var secondTextFieldRef = useRef(null);
     var rangeErrorClass = firstValueError && secondValueError ? classes.rangeError : undefined;
     var firstValueErrorClass = !rangeErrorClass && firstValueError ? classes.rangeValueError : undefined;
     var secondValueErrorClass = !rangeErrorClass && secondValueError ? classes.rangeValueError : undefined;
@@ -66,16 +63,6 @@ export var rangeRoot = function rangeRoot(Root) {
     var handleChangeSecondValue = getChangeHandler(onChangeSecondValue, disabled, readOnly);
     var handleSearchFirstValue = getSearchHandler(onSearchFirstValue, disabled, readOnly);
     var handleSearchSecondValue = getSearchHandler(onSearchSecondValue, disabled, readOnly);
-    useImperativeHandle(ref, function () {
-      return {
-        firstTextField: function firstTextField() {
-          return firstTextFieldRef;
-        },
-        secondTextField: function secondTextField() {
-          return secondTextFieldRef;
-        }
-      };
-    }, [firstTextFieldRef, secondTextFieldRef]);
     var Divider = useMemo(function () {
       if (dividerVariant === 'none') {
         return null;
@@ -86,15 +73,14 @@ export var rangeRoot = function rangeRoot(Root) {
       return _StyledDivider2 || (_StyledDivider2 = /*#__PURE__*/React.createElement(StyledDivider, null, dividerIcon));
     }, [dividerVariant, dividerIcon]);
     return /*#__PURE__*/React.createElement(Root, _extends({
-      ref: rangeRef,
       view: view,
       size: size,
       disabled: disabled,
-      readOnly: !disabled && readOnly
+      readOnly: !disabled && readOnly,
+      ref: ref
     }, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(ContentWrapper, {
       className: cx(rangeErrorClass, rangeSuccessClass)
     }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledInput, {
-      ref: firstTextFieldRef,
       className: cx(firstValueErrorClass, firstValueSuccessClass),
       value: firstValue,
       readOnly: readOnly,
@@ -109,7 +95,6 @@ export var rangeRoot = function rangeRoot(Root) {
       onFocus: onFocusFirstTextfield,
       onBlur: onBlurFirstTextfield
     }), Divider, /*#__PURE__*/React.createElement(StyledInput, {
-      ref: secondTextFieldRef,
       className: cx(secondValueErrorClass, secondValueSuccessClass),
       value: secondValue,
       readOnly: readOnly,