@salutejs/plasma-new-hope 0.88.0-canary.1223.9398061354.0 → 0.88.0-canary.1224.9413433725.0

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

@@ -1,24 +1,36 @@
 import styled from 'styled-components';
-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:0.5rem 1.5rem 1.5rem;box-sizing:border-box;"]);
+})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarYearsPadding);
 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: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");
-};
+})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter));
 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: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());
+})(["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, ")"),
+  currentBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBackgroundHover, ")"),
+  currentColorHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemColorHover, ")"),
+  currentChildBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemChildBackgroundHover, ")"),
+  hoveredBackground: /*#__PURE__*/"var(".concat(tokens.calendarHoveredItemBackground, ")"),
+  hoveredColor: /*#__PURE__*/"var(".concat(tokens.calendarHoveredItemColor, ")"),
+  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
+  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
+}), /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.063rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") - 0.125rem)")
+}));

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

@@ -10,8 +10,7 @@ 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 } from '../../utils';
-import { getPlacements } from '../Dropdown/utils';
+import { cx, getPlacements } from '../../utils';
 import { getChildren, getNewSelected, getValues } from '../Select/utils';
 import { useKeyNavigation } from '../Select/hooks';
 import { useDidMountEffect, useForceUpdate } from '../../hooks';

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

@@ -0,0 +1,178 @@
+export var classes = {
+  datePickerError: 'date-picker-error',
+  datePickerSuccess: 'date-picker-success',
+  datePickerRoot: 'date-picker-root'
+};
+export var tokens = {
+  width: '--plasma-date-picker-width',
+  /** Токены полей ввода в рендже */
+  background: '--plasma-date-picker_range-background',
+  backgroundError: '--plasma-date-picker_range-background-error',
+  backgroundSuccess: '--plasma-date-picker_range-background-success',
+  backgroundReadOnly: '--plasma-date-picker_range-background-readonly',
+  borderRadius: '--plasma-date-picker_range-border-radius',
+  borderWidth: '--plasma-date-picker_range-border-width',
+  borderColor: '--plasma-date-picker_range-border-color',
+  borderColorHover: '--plasma-date-picker_range-border-color-hover',
+  borderColorFocus: '--plasma-date-picker_range-border-color-focus',
+  borderColorError: '--plasma-date-picker_range-border-color-error',
+  borderColorSuccess: '--plasma-date-picker_range-border-color-success',
+  borderColorReadOnly: '--plasma-date-picker_range-border-color-readonly',
+  /** Токены разделителя */
+  dividerColor: '--plasma-date-picker_range__divider-color',
+  dividerColorReadOnly: '--plasma-date-picker_range__divider-color-readonly',
+  dividerPadding: '--plasma-date-picker_range__divider-padding',
+  dividerFontFamily: '--plasma-date-picker_range__divider-font-family',
+  dividerFontStyle: '--plasma-date-picker_range__divider-font-style',
+  dividerFontSize: '--plasma-date-picker_range__divider-font-size',
+  dividerFontWeight: '--plasma-date-picker_range__divider-font-weight',
+  dividerLetterSpacing: '--plasma-date-picker_range__divider-letter-spacing',
+  dividerLineHeight: '--plasma-date-picker_range__divider-line-height',
+  /** Токены слотов для контента в рендже */
+  leftContentMargin: '--plasma-date-picker_range__left-content-margin',
+  rightContentMargin: '--plasma-date-picker_range__right-content-margin',
+  /** Токены лейбла */
+  labelColor: '--plasma-date-picker__label-color',
+  labelColorReadOnly: '--plasma-date-picker__label-color-readonly',
+  labelOffset: '--plasma-date-picker__label-offset',
+  labelFontFamily: '--plasma-date-picker__label-font-family',
+  labelFontStyle: '--plasma-date-picker__label-font-style',
+  labelFontSize: '--plasma-date-picker__label-font-size',
+  labelFontWeight: '--plasma-date-picker__label-font-weight',
+  labelLetterSpacing: '--plasma-date-picker__label-letter-spacing',
+  labelLineHeight: '--plasma-date-picker__label-line-height',
+  /** Токены вспомогательного текста */
+  leftHelperColor: '--plasma-date-picker__left-helper-color',
+  leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly',
+  leftHelperOffset: '--plasma-date-picker__left-helper-offset',
+  leftHelperFontFamily: '--plasma-date-picker__left-helper-font-family',
+  leftHelperFontStyle: '--plasma-date-picker__left-helper-font-style',
+  leftHelperFontSize: '--plasma-date-picker__left-helper-font-size',
+  leftHelperFontWeight: '--plasma-date-picker__left-helper-font-weight',
+  leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing',
+  leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height',
+  /** Прозрачность для всего компонента в состоянии disabled */
+  disabledOpacity: '--plasma-date-picker-disabled-opacity',
+  /** Цвет обводки поля ввода при фокусе */
+  focusColor: '--plasma-date-picker-focus-color',
+  /** Токены полей ввода */
+  textFieldColor: '--plasma-date-picker-textfield-color',
+  textFieldFocusColor: '--plasma-date-picker-textfield-focus-color',
+  textFieldPlaceholderColor: '--plasma-date-picker-textfield-placeholder-color',
+  textFieldCaretColor: '--plasma-date-picker-textfield-caret-color',
+  textFieldBackgroundColor: '--plasma-date-picker-textfield-background-color',
+  textFieldBackgroundColorHover: '--plasma-date-picker-textfield-background-color-hover',
+  textFieldBackgroundColorFocus: '--plasma-date-picker-textfield-background-color-focus',
+  textFieldBackgroundErrorColor: '--plasma-date-picker-textfield-background-color-error',
+  textFieldBackgroundErrorColorHover: '--plasma-date-picker-textfield-background-color-error-hover',
+  textFieldBackgroundErrorColorFocus: '--plasma-date-picker-textfield-background-color-error-focus',
+  textFieldBackgroundSuccessColor: '--plasma-date-picker-textfield-background-color-success',
+  textFieldBackgroundSuccessColorHover: '--plasma-date-picker-textfield-background-color-success-hover',
+  textFieldBackgroundSuccessColorFocus: '--plasma-date-picker-textfield-background-color-success-focus',
+  textFieldBorderColor: '--plasma-date-picker-textfield-border-color',
+  textFieldBorderColorHover: '--plasma-date-picker-textfield-border-color-hover',
+  textFieldBorderColorFocus: '--plasma-date-picker-textfield-border-color-focus',
+  textFieldBorderColorError: '--plasma-date-picker-textfield-border-color-error',
+  textFieldBorderColorErrorHover: '--plasma-date-picker-textfield-border-color-error-hover',
+  textFieldBorderColorErrorFocus: '--plasma-date-picker-textfield-border-color-error-focus',
+  textFieldBorderColorSuccess: '--plasma-date-picker-textfield-border-color-success',
+  textFieldBorderColorSuccessHover: '--plasma-date-picker-textfield-border-color-success-hover',
+  textFieldBorderColorSuccessFocus: '--plasma-date-picker-textfield-border-color-success-focus',
+  textFieldColorReadOnly: '--plasma-date-picker-textfield-color-readonly',
+  textFieldBackgroundColorReadOnly: '--plasma-date-picker-textfield-background-color-readonly',
+  textFieldBorderColorReadOnly: '--plasma-date-picker-textfield-border-color-readonly',
+  textFieldPlaceholderColorReadOnly: '--plasma-date-picker-textfield-placeholder-color-readonly',
+  textFieldHeight: '--plasma-date-picker-textfield-height',
+  textFieldBorderWidth: '--plasma-date-picker-textfield-border-width',
+  textFieldBorderRadius: '--plasma-date-picker-textfield-border-radius',
+  textFieldPadding: '--plasma-date-picker-textfield-padding',
+  textFieldLeftContentMargin: '--plasma-date-picker-textfield__left-content-margin',
+  textFieldRightContentMargin: '--plasma-date-picker-textfield__right-content-margin',
+  textFieldFontFamily: '--plasma-date-picker-textfield-font-family',
+  textFieldFontStyle: '--plasma-date-picker-textfield-font-style',
+  textFieldFontSize: '--plasma-date-picker-textfield-font-size',
+  textFieldFontWeight: '--plasma-date-picker-textfield-font-weight',
+  textFieldLetterSpacing: '--plasma-date-picker-textfield-letter-spacing',
+  textFieldLineHeight: '--plasma-date-picker-textfield-line-height',
+  textFieldTextBeforeColor: '--plasma-date-picker-textfield__before-text-color',
+  textFieldTextAfterColor: '--plasma-date-picker-textfield__after-text-color',
+  textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin',
+  textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin',
+  /** Токены календаря */
+  calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
+  calendarShadow: '--plasma-date-picker-calendar-shadow',
+  calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
+  calendarWidth: '--plasma-date-picker-calendar-width',
+  calendarHeight: '--plasma-date-picker-calendar-height',
+  calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
+  calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius',
+  calendarYearItemWidth: '--plasma-date-picker-calendar__year-item-width',
+  calendarYearItemHeight: '--plasma-date-picker-calendar__year-item-height',
+  calendarYearFontFamily: '--plasma-date-picker-calendar__year-font-family',
+  calendarYearFontSize: '--plasma-date-picker-calendar__year-font-size',
+  calendarYearFontStyle: '--plasma-date-picker-calendar__year-font-style',
+  calendarYearFontLetterSpacing: '--plasma-date-picker-calendar__year-letter-spacing',
+  calendarYearFontLineHeight: '--plasma-date-picker-calendar__year-line-height',
+  calendarYearFontWeight: '--plasma-date-picker-calendar__year-font-weight',
+  calendarYearSelectedFontWeight: '--plasma-date-picker-calendar__year-selected-font-weight',
+  calendarMonthsPadding: '--plasma-date-picker-calendar__months-padding',
+  calendarMonthItemBorderRadius: '--plasma-date-picker-calendar__month-item-border-radius',
+  calendarMonthItemWidth: '--plasma-date-picker-calendar__month-item-width',
+  calendarMonthItemHeight: '--plasma-date-picker-calendar__month-item-height',
+  calendarMonthFontFamily: '--plasma-date-picker-calendar__month-font-family',
+  calendarMonthFontSize: '--plasma-date-picker-calendar__month-font-size',
+  calendarMonthFontStyle: '--plasma-date-picker-calendar__month-font-style',
+  calendarMonthFontLetterSpacing: '--plasma-date-picker-calendar__month-letter-spacing',
+  calendarMonthFontLineHeight: '--plasma-date-picker-calendar__month-line-height',
+  calendarMonthFontWeight: '--plasma-date-picker-calendar__month-font-weight',
+  calendarMonthSelectedFontWeight: '--plasma-date-picker-calendar__month-selected-font-weight',
+  calendarDaysPadding: '--plasma-date-picker-calendar__days-padding',
+  calendarDayItemBorderRadius: '--plasma-date-picker-calendar__day-item-border-radius',
+  calendarDayItemWidth: '--plasma-date-picker-calendar__day-item-width',
+  calendarDayItemHeight: '--plasma-date-picker-calendar__day-item-height',
+  calendarDayFontFamily: '--plasma-date-picker-calendar__day-font-family',
+  calendarDayFontSize: '--plasma-date-picker-calendar__day-font-size',
+  calendarDayFontStyle: '--plasma-date-picker-calendar__day-font-style',
+  calendarDayFontLetterSpacing: '--plasma-date-picker-calendar__day-letter-spacing',
+  calendarDayFontLineHeight: '--plasma-date-picker-calendar__day-line-height',
+  calendarDayFontWeight: '--plasma-date-picker-calendar__day-font-weight',
+  calendarDaySelectedFontWeight: '--plasma-date-picker-calendar__day-selected-font-weight',
+  calendarDayOfWeekColor: '--plasma-date-picker-calendar__day-of-week-color',
+  calendarHeaderArrowGap: '--plasma-date-picker-calendar__header-arrow-gap',
+  calendarHeaderPadding: '--plasma-date-picker-calendar__header-padding',
+  calendarHeaderDateGap: '--plasma-date-picker-calendar__header-date-gap',
+  calendarHeaderFontFamily: '--plasma-date-picker-calendar__header-font-family',
+  calendarHeaderFontSize: '--plasma-date-picker-calendar__header-font-size',
+  calendarHeaderFontStyle: '--plasma-date-picker-calendar__header-font-style',
+  calendarHeaderFontLetterSpacing: '--plasma-date-picker-calendar__header-letter-spacing',
+  calendarHeaderFontLineHeight: '--plasma-date-picker-calendar__header-line-height',
+  calendarHeaderFontWeight: '--plasma-date-picker-calendar__header-font-weight',
+  calendarHeaderFontWeightBold: '--plasma-date-picker-calendar__header-font-weight-bold',
+  iconButtonColor: '--plasma-date-picker-icon-button__color',
+  iconButtonBackgroundColor: '--plasma-date-picker-icon-button__background-color',
+  iconButtonColorHover: '--plasma-date-picker-icon-button__color-hover',
+  iconButtonBackgroundColorHover: '--plasma-date-picker-icon-button__background-color-hover',
+  iconButtonColorActive: '--plasma-date-picker-icon-button__color-active',
+  iconButtonBackgroundColorActive: '--plasma-date-picker-icon-button__background-color-active',
+  iconButtonHeight: '--plasma-date-picker-icon-button__height',
+  iconButtonWidth: '--plasma-date-picker-icon-button__width',
+  iconButtonPadding: '--plasma-date-picker-icon-button__padding',
+  iconButtonRadius: '--plasma-date-picker-icon-button__radius',
+  calendarBackgroundColor: '--plasma-date-picker-calendar__background-color',
+  calendarSelectedItemBackground: '--plasma-date-picker-calendar__selected-item-background',
+  calendarSelectedItemColor: '--plasma-date-picker-calendar__selected-item-color',
+  calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar__selectable-item-background-hover',
+  calendarCurrentItemBorderColor: '--plasma-date-picker-calendar__current-item-border-color',
+  calendarCurrentItemBackgroundHover: '--plasma-date-picker-calendar__current-item-background-hover',
+  calendarCurrentItemColorHover: '--plasma-date-picker-calendar__current-item-color-hover',
+  calendarCurrentItemChildBackgroundHover: '--plasma-date-picker-calendar__current-item-child-background-hover',
+  calendarActiveItemBackground: '--plasma-date-picker-calendar__active-item-background',
+  calendarActiveItemColor: '--plasma-date-picker-calendar__active-item-color',
+  calendarHoveredItemBackground: '--plasma-date-picker-calendar__hovered-item-background',
+  calendarHoveredItemColor: '--plasma-date-picker-calendar__hovered-item-color',
+  calendarSeparatorBackground: '--plasma-date-picker-calendar__separator-background',
+  calendarRangeBackground: '--plasma-date-picker-calendar__range-background',
+  calendarOutlineFocusColor: '--plasma-date-picker-calendar__outline-focus-color',
+  calendarContentPrimaryColor: '--plasma-date-picker-calendar__content-primary-color',
+  calendarContentSecondaryColor: '--plasma-date-picker-calendar__content-secondary-color'
+};

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

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { calendarBaseConfig, calendarBaseTokens } from '../Calendar';
+import { component, mergeConfig } from '../../engines';
+import { tokens } from './DatePicker.tokens';
+var mergedCalendarConfig = /*#__PURE__*/mergeConfig(calendarBaseConfig);
+var Calendar = /*#__PURE__*/component(mergedCalendarConfig);
+export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(tokens.calendarPaddingTop, ");\n    box-shadow: var(").concat(tokens.calendarShadow, ");\n    border-radius: var(").concat(tokens.calendarBorderRadius, ");\n\n    ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n    ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n    ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n    ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n    ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n\n    ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n    ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(calendarBaseTokens.calendarWidth, ": var(").concat(tokens.calendarWidth, ");\n    ").concat(calendarBaseTokens.calendarHeight, ": var(").concat(tokens.calendarHeight, ");\n    ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n    ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarYearItemWidth, ": var(").concat(tokens.calendarYearItemWidth, ");\n    ").concat(calendarBaseTokens.calendarYearItemHeight, ": var(").concat(tokens.calendarYearItemHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n    ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n    ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n    ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n    ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n    ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarMonthItemWidth, ": var(").concat(tokens.calendarMonthItemWidth, ");\n    ").concat(calendarBaseTokens.calendarMonthItemHeight, ": var(").concat(tokens.calendarMonthItemHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n    ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n    ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n    ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarDayItemWidth, ": var(").concat(tokens.calendarDayItemWidth, ");\n    ").concat(calendarBaseTokens.calendarDayItemHeight, ": var(").concat(tokens.calendarDayItemHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n    ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n    ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n    ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n    ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n    ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n");
+
+// NOTE: переопределение токенов Calendar
+export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
+  componentId: "plasma-new-hope__sc-1i6o09y-0"
+})(["", ""], baseCalendarTokens);

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

@@ -0,0 +1,340 @@
+var _excluded = ["className", "isOpenFirst", "isOpenSecond", "isDoubleCalendar", "isOpenDouble", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "type", "placement", "closeOnOverlayClick", "offset", "onToggleDouble", "onToggleFirst", "onToggleSecond", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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, { createRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cx } from '../../../utils';
+import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
+import { useDatePicker } from '../hooks/useDatePicker';
+import { classes } from '../DatePicker.tokens';
+import { StyledCalendar } from '../DatePickerBase.styles';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as readOnlyCSS } from './variations/_readonly/base';
+import { StyledRange, base } from './DatePicker.styles';
+import { RangeDoubleDate } from './RangeDoubleDate/RangeDoubleDate';
+export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var _rangeRef$current, _rangeRef$current2;
+    var className = _ref.className,
+      _ref$isOpenFirst = _ref.isOpenFirst,
+      isOpenFirst = _ref$isOpenFirst === void 0 ? false : _ref$isOpenFirst,
+      _ref$isOpenSecond = _ref.isOpenSecond,
+      isOpenSecond = _ref$isOpenSecond === void 0 ? false : _ref$isOpenSecond,
+      _ref$isDoubleCalendar = _ref.isDoubleCalendar,
+      isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
+      isOpenDouble = _ref.isOpenDouble,
+      label = _ref.label,
+      leftHelper = _ref.leftHelper,
+      contentLeft = _ref.contentLeft,
+      contentRight = _ref.contentRight,
+      view = _ref.view,
+      size = _ref.size,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$dividerVariant = _ref.dividerVariant,
+      dividerVariant = _ref$dividerVariant === void 0 ? 'dash' : _ref$dividerVariant,
+      dividerIcon = _ref.dividerIcon,
+      _ref$defaultFirstDate = _ref.defaultFirstDate,
+      defaultFirstDate = _ref$defaultFirstDate === void 0 ? '' : _ref$defaultFirstDate,
+      _ref$defaultSecondDat = _ref.defaultSecondDate,
+      defaultSecondDate = _ref$defaultSecondDat === void 0 ? '' : _ref$defaultSecondDat,
+      firstValueError = _ref.firstValueError,
+      secondValueError = _ref.secondValueError,
+      firstValueSuccess = _ref.firstValueSuccess,
+      secondValueSuccess = _ref.secondValueSuccess,
+      firstPlaceholder = _ref.firstPlaceholder,
+      secondPlaceholder = _ref.secondPlaceholder,
+      firstTextfieldContentLeft = _ref.firstTextfieldContentLeft,
+      firstTextfieldContentRight = _ref.firstTextfieldContentRight,
+      secondTextfieldContentLeft = _ref.secondTextfieldContentLeft,
+      secondTextfieldContentRight = _ref.secondTextfieldContentRight,
+      firstTextfieldTextBefore = _ref.firstTextfieldTextBefore,
+      secondTextfieldTextBefore = _ref.secondTextfieldTextBefore,
+      firstTextfieldTextAfter = _ref.firstTextfieldTextAfter,
+      secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
+      _ref$format = _ref.format,
+      format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      maskWithFormat = _ref.maskWithFormat,
+      min = _ref.min,
+      max = _ref.max,
+      _ref$includeEdgeDates = _ref.includeEdgeDates,
+      includeEdgeDates = _ref$includeEdgeDates === void 0 ? false : _ref$includeEdgeDates,
+      eventList = _ref.eventList,
+      disabledList = _ref.disabledList,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'Days' : _ref$type,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
+      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+      offset = _ref.offset,
+      onToggleDouble = _ref.onToggleDouble,
+      onToggleFirst = _ref.onToggleFirst,
+      onToggleSecond = _ref.onToggleSecond,
+      onChangeFirstValue = _ref.onChangeFirstValue,
+      onChangeSecondValue = _ref.onChangeSecondValue,
+      onCommitFirstDate = _ref.onCommitFirstDate,
+      onCommitSecondDate = _ref.onCommitSecondDate,
+      onFocusFirstTextfield = _ref.onFocusFirstTextfield,
+      onFocusSecondTextfield = _ref.onFocusSecondTextfield,
+      onBlurFirstTextfield = _ref.onBlurFirstTextfield,
+      onBlurSecondTextfield = _ref.onBlurSecondTextfield,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/createRef();
+    var rootRef = useRef(null);
+    var _useState = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
+      _useState2 = _slicedToArray(_useState, 2),
+      firstInputRef = _useState2[0],
+      setFirstInputRef = _useState2[1];
+    var _useState3 = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current2 = rangeRef.current) === null || _rangeRef$current2 === void 0 ? void 0 : _rangeRef$current2.secondTextField()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      secondInputRef = _useState4[0],
+      setSecondInputRef = _useState4[1];
+    var _useState5 = useState(isOpenFirst),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isInnerOpenFirst = _useState6[0],
+      setIsInnerOpenFirst = _useState6[1];
+    var _useState7 = useState(isOpenSecond),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isInnerOpenSecond = _useState8[0],
+      setIsInnerOpenSecond = _useState8[1];
+    var _useState9 = useState(isOpenDouble),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isInnerOpenDouble = _useState10[0],
+      setIsInnerOpenDouble = _useState10[1];
+    var _useState11 = useState(formatCalendarValue(defaultFirstDate, format)),
+      _useState12 = _slicedToArray(_useState11, 2),
+      calendarFirstValue = _useState12[0],
+      setCalendarFirstValue = _useState12[1];
+    var _useState13 = useState(formatInputValue(defaultFirstDate, format)),
+      _useState14 = _slicedToArray(_useState13, 2),
+      inputFirstValue = _useState14[0],
+      setInputFirstValue = _useState14[1];
+    var _useState15 = useState(formatCalendarValue(defaultSecondDate, format)),
+      _useState16 = _slicedToArray(_useState15, 2),
+      calendarSecondValue = _useState16[0],
+      setCalendarSecondValue = _useState16[1];
+    var _useState17 = useState(formatInputValue(defaultSecondDate, format)),
+      _useState18 = _slicedToArray(_useState17, 2),
+      inputSecondValue = _useState18[0],
+      setInputSecondValue = _useState18[1];
+    var dateFormatDelimiter = useCallback(function () {
+      return getDateFormatDelimiter(format);
+    }, [format]);
+    var _useDatePicker = useDatePicker({
+        currentValue: inputFirstValue,
+        setInputValue: setInputFirstValue,
+        setCalendarValue: setCalendarFirstValue,
+        setIsInnerOpen: setIsInnerOpenFirst,
+        dateFormatDelimiter: dateFormatDelimiter,
+        format: format,
+        disabled: disabled,
+        readOnly: readOnly,
+        maskWithFormat: maskWithFormat,
+        valueError: firstValueError,
+        valueSuccess: firstValueSuccess,
+        inputRef: firstInputRef,
+        onToggle: onToggleFirst,
+        onChangeValue: onChangeFirstValue,
+        onCommitDate: onCommitFirstDate
+      }),
+      handleToggleFirst = _useDatePicker.handleToggle,
+      handleChangeFirstValue = _useDatePicker.handleChangeValue,
+      handleCommitFirstDate = _useDatePicker.handleCommitDate;
+    var _useDatePicker2 = useDatePicker({
+        currentValue: inputSecondValue,
+        setInputValue: setInputSecondValue,
+        setCalendarValue: setCalendarSecondValue,
+        setIsInnerOpen: setIsInnerOpenSecond,
+        dateFormatDelimiter: dateFormatDelimiter,
+        format: format,
+        disabled: disabled,
+        readOnly: readOnly,
+        maskWithFormat: maskWithFormat,
+        valueError: secondValueError,
+        valueSuccess: secondValueSuccess,
+        inputRef: secondInputRef,
+        onToggle: onToggleSecond,
+        onChangeValue: onChangeSecondValue,
+        onCommitDate: onCommitSecondDate
+      }),
+      handleToggleSecond = _useDatePicker2.handleToggle,
+      handleChangeSecondValue = _useDatePicker2.handleChangeValue,
+      handleCommitSecondDate = _useDatePicker2.handleCommitDate;
+    var handleToggleDouble = function handleToggleDouble(opened, event) {
+      var _firstInputRef$curren, _secondInputRef$curre;
+      if (disabled || readOnly) {
+        return;
+      }
+      var isCalendarOpen = firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null) ? true : opened;
+      if (onToggleDouble) {
+        return onToggleDouble(isCalendarOpen, event);
+      }
+      setIsInnerOpenDouble(isCalendarOpen);
+    };
+    var FirstCalendar = /*#__PURE__*/React.createElement(StyledCalendar, {
+      value: calendarFirstValue,
+      type: type,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: calendarSecondValue || max,
+      includeEdgeDates: includeEdgeDates,
+      isRange: false,
+      onChangeValue: function onChangeValue(date) {
+        handleCommitFirstDate(date, false, true);
+        setIsInnerOpenFirst(false);
+        if (!calendarSecondValue || secondValueError) {
+          var _rangeRef$current3;
+          rangeRef === null || rangeRef === void 0 || (_rangeRef$current3 = rangeRef.current) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.secondTextField()) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.current) === null || _rangeRef$current3 === void 0 || _rangeRef$current3.focus();
+          setIsInnerOpenSecond(true);
+        }
+      }
+    });
+    var SecondCalendar = /*#__PURE__*/React.createElement(StyledCalendar, {
+      value: calendarSecondValue,
+      type: type,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: calendarFirstValue || min,
+      max: max,
+      includeEdgeDates: includeEdgeDates,
+      isRange: false,
+      onChangeValue: function onChangeValue(date) {
+        handleCommitSecondDate(date, false, true);
+        setIsInnerOpenSecond(false);
+        if (!calendarFirstValue || firstValueError) {
+          var _rangeRef$current4;
+          rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
+          setIsInnerOpenFirst(true);
+        }
+      }
+    });
+    var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, _extends({
+      ref: rangeRef,
+      dividerIcon: dividerIcon,
+      dividerVariant: dividerVariant,
+      disabled: disabled,
+      readOnly: !disabled && readOnly,
+      firstPlaceholder: firstPlaceholder,
+      secondPlaceholder: secondPlaceholder,
+      label: label,
+      leftHelper: leftHelper,
+      contentLeft: contentLeft,
+      contentRight: contentRight,
+      firstTextfieldTextBefore: firstTextfieldTextBefore,
+      secondTextfieldTextBefore: secondTextfieldTextBefore,
+      firstTextfieldTextAfter: firstTextfieldTextAfter,
+      secondTextfieldTextAfter: secondTextfieldTextAfter,
+      firstTextfieldContentLeft: firstTextfieldContentLeft,
+      firstTextfieldContentRight: firstTextfieldContentRight,
+      secondTextfieldContentLeft: secondTextfieldContentLeft,
+      secondTextfieldContentRight: secondTextfieldContentRight,
+      firstValue: inputFirstValue,
+      secondValue: inputSecondValue,
+      firstValueError: firstValueError,
+      secondValueError: secondValueError,
+      firstValueSuccess: firstValueSuccess,
+      secondValueSuccess: secondValueSuccess,
+      onChangeFirstValue: handleChangeFirstValue,
+      onChangeSecondValue: handleChangeSecondValue,
+      onSearchFirstValue: function onSearchFirstValue(_, date) {
+        return handleCommitFirstDate(String(date), true, false);
+      },
+      onSearchSecondValue: function onSearchSecondValue(_, date) {
+        return handleCommitSecondDate(String(date), true, false);
+      },
+      onFocusFirstTextfield: onFocusFirstTextfield,
+      onFocusSecondTextfield: onFocusSecondTextfield,
+      onBlurFirstTextfield: onBlurFirstTextfield,
+      onBlurSecondTextfield: onBlurSecondTextfield
+    }, !isDoubleCalendar && {
+      isOpenFirst: isOpenFirst || isInnerOpenFirst,
+      isOpenSecond: isOpenSecond || isInnerOpenSecond,
+      onToggleFirst: handleToggleFirst,
+      onToggleSecond: handleToggleSecond,
+      firstInputPopoverContent: FirstCalendar,
+      secondInputPopoverContent: SecondCalendar,
+      offset: offset,
+      placement: placement,
+      closeOnOverlayClick: closeOnOverlayClick
+    })));
+    useEffect(function () {
+      var _rangeRef$current5, _rangeRef$current6;
+      setFirstInputRef((_rangeRef$current5 = rangeRef.current) === null || _rangeRef$current5 === void 0 ? void 0 : _rangeRef$current5.firstTextField());
+      setSecondInputRef((_rangeRef$current6 = rangeRef.current) === null || _rangeRef$current6 === void 0 ? void 0 : _rangeRef$current6.secondTextField());
+    }, [rangeRef.current]);
+    if (isDoubleCalendar) {
+      return /*#__PURE__*/React.createElement(Root, _extends({
+        ref: rootRef,
+        view: view,
+        size: size,
+        className: cx(classes.datePickerRoot, className),
+        disabled: disabled,
+        readOnly: !disabled && readOnly
+      }, rest), /*#__PURE__*/React.createElement(RangeDoubleDate, {
+        calendarValue: [calendarFirstValue, calendarSecondValue],
+        target: RangeComponent,
+        isOpen: isOpenDouble || isInnerOpenDouble,
+        onToggle: handleToggleDouble,
+        onChangeStartOfRange: function onChangeStartOfRange(firstDate) {
+          handleCommitFirstDate(firstDate, false, true);
+          handleCommitSecondDate('');
+        },
+        onChangeValue: function onChangeValue(_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            firstDate = _ref3[0],
+            secondDate = _ref3[1];
+          firstDate && handleCommitFirstDate(firstDate, false, true);
+          secondDate && handleCommitSecondDate(secondDate, false, true);
+          if (firstDate && secondDate && !firstValueError && !secondValueError) {
+            setIsInnerOpenDouble(false);
+          }
+        }
+      }));
+    }
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      view: view,
+      size: size,
+      className: cx(classes.datePickerRoot, className),
+      disabled: disabled,
+      readOnly: !disabled && readOnly
+    }, rest), RangeComponent);
+  });
+};
+export var datePickerRangeConfig = {
+  name: 'DatePickerRange',
+  tag: 'div',
+  layout: datePickerRangeRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    },
+    readOnly: {
+      css: readOnlyCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    size: 'm',
+    view: 'default'
+  }
+};