@salutejs/plasma-new-hope 0.345.0-canary.2416.20569157442.0 → 0.345.0-canary.2417.20992530703.0

package/dist/emotion/cjs/components/DatePicker/DatePicker.tokens.js

@@ -43,7 +43,8 @@ var tokens = {
     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',
+    /** Токены разделителя */ clearDividerColor: '--plasma-date-picker-clear__divider-color',
+    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',
@@ -59,6 +60,12 @@ var tokens = {
     contentSlotColor: '--plasma-date-picker-content-slot-color',
     contentSlotColorHover: '--plasma-date-picker-content-slot-color-hover',
     contentSlotColorActive: '--plasma-date-picker-content-slot-color-active',
+    contentSlotColorSuccess: '--plasma-date-picker-content-slot-color-success',
+    contentSlotColorSuccessHover: '--plasma-date-picker-content-slot-color-success-hover',
+    contentSlotColorSuccessActive: '--plasma-date-picker-content-slot-color-success-active',
+    contentSlotColorError: '--plasma-date-picker-content-slot-color-error',
+    contentSlotColorErrorHover: '--plasma-date-picker-content-slot-color-error-hover',
+    contentSlotColorErrorActive: '--plasma-date-picker-content-slot-color-error-active',
     contentSlotRightColor: '--plasma-date-picker-content-right-slot-color',
     contentSlotRightColorHover: '--plasma-date-picker-content-right-slot-color-hover',
     contentSlotRightColorActive: '--plasma-date-picker-content-right-slot-color-active',
@@ -84,6 +91,8 @@ var tokens = {
     indicatorOuterLeft: '--plasma-date-picker-indicator-outer-left',
     indicatorWithoutLabelInner: '--plasma-date-picker-indicator-without-label-inner',
     indicatorWithoutLabelInnerLeft: '--plasma-date-picker-indicator-without-label-inner-left',
+    indicatorWithoutLabelOuterHint: '--plasma-date-picker-indicator-without-label-outer-hint',
+    /** Токены индикатора (удалить после перехода на InformationWrapper в Textfield) */ clearIndicatorHintInnerRight: '--plasma-date-picker__clear-indicator-hint-placement-inner-right',
     /* label-placement-inner */ labelInnerFontFamily: '--plasma-date-picker-placement_inner__label-font-family',
     labelInnerFontStyle: '--plasma-date-picker-placement_inner__label-font-style',
     labelInnerFontSize: '--plasma-date-picker-placement_inner__label-font-size',
@@ -103,15 +112,24 @@ var tokens = {
     leftHelperFontWeight: '--plasma-date-picker__left-helper-font-weight',
     leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing',
     leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height',
+    titleCaptionOffset: '--plasma-date-picker-title-caption-offset',
+    titleCaptionColor: '--plasma-date-picker-title-caption-color',
+    titleCaptionFontFamily: '--plasma-date-picker-title-caption-font-family',
+    titleCaptionFontStyle: '--plasma-date-picker-title-caption-font-style',
+    titleCaptionFontSize: '--plasma-date-picker-title-caption-font-size',
+    titleCaptionFontWeight: '--plasma-date-picker-title-caption-font-weight',
+    titleCaptionLetterSpacing: '--plasma-date-picker-title-caption-letter-spacing',
+    titleCaptionLineHeight: '--plasma-date-picker-title-caption-line-height',
     /** Прозрачность для всего компонента в состоянии disabled */ disabledOpacity: '--plasma-date-picker-disabled-opacity',
     rangeReadOnlyOpacity: '--plasma-date-picker-readonly-opacity',
     /** Цвет обводки поля ввода при фокусе */ focusColor: '--plasma-date-picker-focus-color',
     /** Токены полей ввода */ textFieldColor: '--plasma-date-picker-textfield-color',
     textFieldColorError: '--plasma-date-picker-textfield-color-error',
     textFieldColorSuccess: '--plasma-date-picker-textfield-color-success',
-    textFieldPlaceholderColorFocus: '--plasma-datepicker-textfield__placeholder-color-focus',
+    textFieldPlaceholderColorFocus: '--plasma-date-picker-textfield__placeholder-color-focus',
     textFieldFocusColor: '--plasma-date-picker-textfield-focus-color',
     textFieldPlaceholderColor: '--plasma-date-picker-textfield-placeholder-color',
+    textFieldClearPlaceholderColorFocus: '--plasma-date-picker-textfield-clear-placeholder-color-focus',
     textFieldCaretColor: '--plasma-date-picker-textfield-caret-color',
     textFieldBackgroundColor: '--plasma-date-picker-textfield-background-color',
     textFieldBackgroundColorHover: '--plasma-date-picker-textfield-background-color-hover',
@@ -152,6 +170,9 @@ var tokens = {
     textFieldTextAfterColor: '--plasma-date-picker-textfield__after-text-color',
     textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin',
     textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin',
+    textFieldContentSlotRightColor: '--plasma-date-picker-textfield__content-right-color',
+    textFieldContentSlotRightColorHover: '--plasma-date-picker-textfield__content-right-color-hover',
+    textFieldContentSlotRightColorActive: '--plasma-date-picker-textfield__content-right-color-active',
     textFieldContentSlotColor: '--plasma-date-picker-textfield__content-color',
     textFieldContentSlotColorHover: '--plasma-date-picker-textfield__content-color-hover',
     textFieldContentSlotColorActive: '--plasma-date-picker-textfield__content-color-active',
@@ -159,6 +180,16 @@ var tokens = {
     textFieldContentRightSlotColorHover: '--plasma-date-picker-textfield__content-right-color-hover',
     textFieldContentRightSlotColorActive: '--plasma-date-picker-textfield__content-right-color-active',
     textFieldContentSlotRightOpacityReadOnly: '--plasma-date-picker-textfield__content-right-readonly-opacity',
+    textFieldContentSlotColorSuccess: '--plasma-date-picker-textfield-content-slot-color-success',
+    textFieldContentSlotColorSuccessHover: '--plasma-date-picker-textfield-content-slot-color-success-hover',
+    textFieldContentSlotColorSuccessActive: '--plasma-date-picker-textfield-content-slot-color-success-active',
+    textFieldContentSlotColorError: '--plasma-date-picker-textfield-content-slot-color-error',
+    textFieldContentSlotColorErrorHover: '--plasma-date-picker-textfield-content-slot-color-error-hover',
+    textFieldContentSlotColorErrorActive: '--plasma-date-picker-textfield-content-slot-color-error-active',
+    textFieldDividerColorSuccess: '--plasma-date-picker-textfield__divider-color-success',
+    textFieldDividerColorError: '--plasma-date-picker-textfield__divider-color-error',
+    textFieldDividerColorHover: '--plasma-date-picker-textfield__divider-color-hover',
+    textFieldDividerColorFocus: '--plasma-date-picker-textfield__divider-color-focus',
     /** Токены календаря */ calendarMarginTop: '--plasma-date-picker-calendar-margin-top',
     calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
     calendarShadow: '--plasma-date-picker-calendar-shadow',
@@ -251,26 +282,56 @@ var tokens = {
     calendarContentPrimaryDisabledColor: '--plasma-date-picker-calendar__content-primary-disabled-color',
     calendarContentSecondaryDisabledColor: '--plasma-date-picker-calendar__content-secondary-disabled-color',
     calendarDisabledOpacity: '--plasma-date-picker-calendar__disabled-opacity',
-    /* Токены тултипа для событий */ tooltipPaddingTop: '--plasma-datepicker-calendar-tooltip-padding-top',
-    tooltipPaddingRight: '--plasma-datepicker-calendar-tooltip-padding-right',
-    tooltipPaddingBottom: '--plasma-datepicker-calendar-tooltip-padding-bottom',
-    tooltipPaddingLeft: '--plasma-datepicker-calendar-tooltip-padding-left',
-    tooltipMinHeight: '--plasma-datepicker-calendar-tooltip-min-height',
-    tooltipBackgroundColor: '--plasma-datepicker-calendar-tooltip-background-color',
-    tooltipBoxShadow: '--plasma-datepicker-calendar-tooltip-box-shadow',
-    tooltipBorderRadius: '--plasma-datepicker-calendar-tooltip-border-radius',
-    tooltipColor: '--plasma-datepicker-calendar-tooltip-color',
-    tooltipTextFontFamily: '--plasma-datepicker-calendar-tooltip-text-font-family',
-    tooltipTextFontSize: '--plasma-datepicker-calendar-tooltip-text-font-size',
-    tooltipTextFontStyle: '--plasma-datepicker-calendar-tooltip-text-font-style',
-    tooltipTextFontWeight: '--plasma-datepicker-calendar-tooltip-text-font-weight',
-    tooltipTextFontLetterSpacing: '--plasma-datepicker-calendar-tooltip-text-font-letter-spacing',
-    tooltipTextFontLineHeight: '--plasma-datepicker-calendar-tooltip-text-font-line-height',
-    tooltipContentLeftMargin: '--plasma-datepicker-calendar-tooltip-content-left-margin',
-    tooltipArrowMaskWidth: '--plasma-datepicker-calendar-tooltip-arrow-mask-width',
-    tooltipArrowMaskHeight: '--plasma-datepicker-calendar-tooltip-arrow-mask-height',
-    tooltipArrowMaskImage: '--plasma-datepicker-calendar-tooltip-arrow-mask-image',
-    tooltipArrowBackground: '--plasma-datepicker-calendar-tooltip-arrow-background',
-    tooltipArrowHeight: '--plasma-datepicker-calendar-tooltip-arrow-height',
-    tooltipArrowEdgeMargin: '--plasma-datepicker-calendar-tooltip-arrow-edge-margin'
+    /* Токены тултипа для событий */ tooltipPaddingTop: '--plasma-date-picker-calendar-tooltip-padding-top',
+    tooltipPaddingRight: '--plasma-date-picker-calendar-tooltip-padding-right',
+    tooltipPaddingBottom: '--plasma-date-picker-calendar-tooltip-padding-bottom',
+    tooltipPaddingLeft: '--plasma-date-picker-calendar-tooltip-padding-left',
+    tooltipMinHeight: '--plasma-date-picker-calendar-tooltip-min-height',
+    tooltipBackgroundColor: '--plasma-date-picker-calendar-tooltip-background-color',
+    tooltipBoxShadow: '--plasma-date-picker-calendar-tooltip-box-shadow',
+    tooltipBorderRadius: '--plasma-date-picker-calendar-tooltip-border-radius',
+    tooltipColor: '--plasma-date-picker-calendar-tooltip-color',
+    tooltipTextFontFamily: '--plasma-date-picker-calendar-tooltip-text-font-family',
+    tooltipTextFontSize: '--plasma-date-picker-calendar-tooltip-text-font-size',
+    tooltipTextFontStyle: '--plasma-date-picker-calendar-tooltip-text-font-style',
+    tooltipTextFontWeight: '--plasma-date-picker-calendar-tooltip-text-font-weight',
+    tooltipTextFontLetterSpacing: '--plasma-date-picker-calendar-tooltip-text-font-letter-spacing',
+    tooltipTextFontLineHeight: '--plasma-date-picker-calendar-tooltip-text-font-line-height',
+    tooltipContentLeftMargin: '--plasma-date-picker-calendar-tooltip-content-left-margin',
+    tooltipArrowMaskWidth: '--plasma-date-picker-calendar-tooltip-arrow-mask-width',
+    tooltipArrowMaskHeight: '--plasma-date-picker-calendar-tooltip-arrow-mask-height',
+    tooltipArrowMaskImage: '--plasma-date-picker-calendar-tooltip-arrow-mask-image',
+    tooltipArrowBackground: '--plasma-date-picker-calendar-tooltip-arrow-background',
+    tooltipArrowHeight: '--plasma-date-picker-calendar-tooltip-arrow-height',
+    tooltipArrowEdgeMargin: '--plasma-date-picker-calendar-tooltip-arrow-edge-margin',
+    /* токены для hint */ hintMargin: '--plasma-date-picker-info-wrapper-hint-margin',
+    hintTargetSize: '--plasma-date-picker-info-wrapper-hint-target-size',
+    hintCustomIconTargetSize: '--plasma-date-picker-info-wrapper-hint-custom-icon-target-size',
+    hintIconColor: '--plasma-date-picker-info-wrapper-hint-icon-color',
+    hintWithoutLabelPlacementOffset: '--plasma-date-picker-info-wrapper-hint-without-label-placement-offset',
+    hintPlacementInnerMargin: '--plasma-date-picker-info-wrapper-hint-placement-inner-offset',
+    hintInnerLabelPlacementOffset: '--plasma-date-picker_old_hint-inner-label-placement-offset',
+    clearHintInnerLabelPlacementOffset: '--plasma-date-picker_old_clear-hint-inner-label-placement-offset',
+    hintTooltipPaddingTop: '--plasma-date-picker-calendar-hint-tooltip-padding-top',
+    hintTooltipPaddingRight: '--plasma-date-picker-calendar-hint-tooltip-padding-right',
+    hintTooltipPaddingBottom: '--plasma-date-picker-calendar-hint-tooltip-padding-bottom',
+    hintTooltipPaddingLeft: '--plasma-date-picker-calendar-hint-tooltip-padding-left',
+    hintTooltipMinHeight: '--plasma-date-picker-calendar-hint-tooltip-min-height',
+    hintTooltipBackgroundColor: '--plasma-date-picker-calendar-hint-tooltip-background-color',
+    hintTooltipBoxShadow: '--plasma-date-picker-calendar-hint-tooltip-box-shadow',
+    hintTooltipBorderRadius: '--plasma-date-picker-calendar-hint-tooltip-border-radius',
+    hintTooltipColor: '--plasma-date-picker-calendar-hint-tooltip-color',
+    hintTooltipTextFontFamily: '--plasma-date-picker-calendar-hint-tooltip-text-font-family',
+    hintTooltipTextFontSize: '--plasma-date-picker-calendar-hint-tooltip-text-font-size',
+    hintTooltipTextFontStyle: '--plasma-date-picker-calendar-hint-tooltip-text-font-style',
+    hintTooltipTextFontWeight: '--plasma-date-picker-calendar-hint-tooltip-text-font-weight',
+    hintTooltipTextFontLetterSpacing: '--plasma-date-picker-calendar-hint-tooltip-text-font-letter-spacing',
+    hintTooltipTextFontLineHeight: '--plasma-date-picker-calendar-hint-tooltip-text-font-line-height',
+    hintTooltipContentLeftMargin: '--plasma-date-picker-calendar-hint-tooltip-content-left-margin',
+    hintTooltipArrowMaskWidth: '--plasma-date-picker-calendar-hint-tooltip-arrow-mask-width',
+    hintTooltipArrowMaskHeight: '--plasma-date-picker-calendar-hint-tooltip-arrow-mask-height',
+    hintTooltipArrowMaskImage: '--plasma-date-picker-calendar-hint-tooltip-arrow-mask-image',
+    hintTooltipArrowBackground: '--plasma-date-picker-calendar-hint-tooltip-arrow-background',
+    hintTooltipArrowHeight: '--plasma-date-picker-calendar-hint-tooltip-arrow-height',
+    hintTooltipArrowEdgeMargin: '--plasma-date-picker-calendar-hint-tooltip-arrow-edge-margin'
 };

package/dist/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -29,9 +29,11 @@ var _utils1 = require("../../Calendar/utils");
 var _utils2 = require("../utils");
 var _base = require("./variations/_size/base");
 var _base1 = require("./variations/_view/base");
-var _base2 = require("./variations/_tooltip-size/base");
-var _base3 = require("./variations/_disabled/base");
-var _base4 = require("./variations/_readonly/base");
+var _base2 = require("./variations/_hint-view/base");
+var _base3 = require("./variations/_hint-size/base");
+var _base4 = require("./variations/_tooltip-size/base");
+var _base5 = require("./variations/_disabled/base");
+var _base6 = require("./variations/_readonly/base");
 var _RangeDatestyles = require("./RangeDate.styles");
 var _RangeDatePopover = require("./RangeDatePopover/RangeDatePopover");
 function _array_like_to_array(arr, len) {
@@ -207,11 +209,21 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var datePickerRangeRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var className = _param.className, autoComplete = _param.autoComplete, _param_isDoubleCalendar = _param.isDoubleCalendar, isDoubleCalendar = _param_isDoubleCalendar === void 0 ? false : _param_isDoubleCalendar, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultFirstDate = _param.defaultFirstDate, defaultFirstDate = _param_defaultFirstDate === void 0 ? '' : _param_defaultFirstDate, _param_defaultSecondDate = _param.defaultSecondDate, defaultSecondDate = _param_defaultSecondDate === void 0 ? '' : _param_defaultSecondDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, label = _param.label, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, name = _param.name, _param_dividerVariant = _param.dividerVariant, dividerVariant = _param_dividerVariant === void 0 ? 'dash' : _param_dividerVariant, dividerIcon = _param.dividerIcon, firstValueError = _param.firstValueError, secondValueError = _param.secondValueError, firstValueSuccess = _param.firstValueSuccess, secondValueSuccess = _param.secondValueSuccess, firstPlaceholder = _param.firstPlaceholder, secondPlaceholder = _param.secondPlaceholder, firstTextfieldContentLeft = _param.firstTextfieldContentLeft, firstTextfieldContentRight = _param.firstTextfieldContentRight, secondTextfieldContentLeft = _param.secondTextfieldContentLeft, secondTextfieldContentRight = _param.secondTextfieldContentRight, firstTextfieldTextBefore = _param.firstTextfieldTextBefore, secondTextfieldTextBefore = _param.secondTextfieldTextBefore, firstTextfieldTextAfter = _param.firstTextfieldTextAfter, secondTextfieldTextAfter = _param.secondTextfieldTextAfter, required = _param.required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? false : _param_hasRequiredIndicator, _param_format = _param.format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventTooltipOptions = _param.eventTooltipOptions, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, zIndex = _param.zIndex, _param_placement = _param.placement, placement = _param_placement === void 0 ? [
+        var className = _param.className, name = _param.name, autoComplete = _param.autoComplete, _param_isDoubleCalendar = _param.// controlled
+        isDoubleCalendar, isDoubleCalendar = _param_isDoubleCalendar === void 0 ? false : _param_isDoubleCalendar, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultFirstDate = _param.defaultFirstDate, defaultFirstDate = _param_defaultFirstDate === void 0 ? '' : _param_defaultFirstDate, _param_defaultSecondDate = _param.defaultSecondDate, defaultSecondDate = _param_defaultSecondDate === void 0 ? '' : _param_defaultSecondDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, // variations
+        view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, appearance = _param.appearance, hasClearDivider = _param.hasClearDivider, stretched = _param.stretched, firstValueError = _param.firstValueError, secondValueError = _param.secondValueError, firstValueSuccess = _param.firstValueSuccess, secondValueSuccess = _param.secondValueSuccess, // layout
+        required = _param.required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? false : _param_hasRequiredIndicator, label = _param.label, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, _param_dividerVariant = _param.dividerVariant, dividerVariant = _param_dividerVariant === void 0 ? 'dash' : _param_dividerVariant, dividerIcon = _param.dividerIcon, firstPlaceholder = _param.firstPlaceholder, secondPlaceholder = _param.secondPlaceholder, firstTextfieldContentLeft = _param.firstTextfieldContentLeft, firstTextfieldContentRight = _param.firstTextfieldContentRight, secondTextfieldContentLeft = _param.secondTextfieldContentLeft, secondTextfieldContentRight = _param.secondTextfieldContentRight, firstTextfieldTextBefore = _param.firstTextfieldTextBefore, secondTextfieldTextBefore = _param.secondTextfieldTextBefore, firstTextfieldTextAfter = _param.firstTextfieldTextAfter, secondTextfieldTextAfter = _param.secondTextfieldTextAfter, _param_hintTrigger = _param.// hint
+        hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintTargetPlacement = _param.hintTargetPlacement, hintTargetPlacement = _param_hintTargetPlacement === void 0 ? 'outer' : _param_hintTargetPlacement, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, _param_hintOffset = _param.hintOffset, hintOffset = _param_hintOffset === void 0 ? [
+            0,
+            0
+        ] : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, _param_frame = _param.// calendar-container
+        frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, zIndex = _param.zIndex, _param_placement = _param.placement, placement = _param_placement === void 0 ? [
             'top',
             'bottom'
-        ] : _param_placement, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeAfterDateSelect = _param.closeAfterDateSelect, closeAfterDateSelect = _param_closeAfterDateSelect === void 0 ? true : _param_closeAfterDateSelect, offset = _param.offset, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, stretched = _param.stretched, onToggle = _param.onToggle, onChange = _param.onChange, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onCommitFirstDate = _param.onCommitFirstDate, onCommitSecondDate = _param.onCommitSecondDate, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
+        ] : _param_placement, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeAfterDateSelect = _param.closeAfterDateSelect, closeAfterDateSelect = _param_closeAfterDateSelect === void 0 ? true : _param_closeAfterDateSelect, offset = _param.offset, _param_format = _param.// calendar
+        format, format = _param_format === void 0 ? 'DD.MM.YYYY' : _param_format, _param_lang = _param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, maskWithFormat = _param.maskWithFormat, min = _param.min, max = _param.max, renderFromDate = _param.renderFromDate, _param_includeEdgeDates = _param.includeEdgeDates, includeEdgeDates = _param_includeEdgeDates === void 0 ? false : _param_includeEdgeDates, eventTooltipOptions = _param.eventTooltipOptions, eventList = _param.eventList, disabledList = _param.disabledList, eventMonthList = _param.eventMonthList, disabledMonthList = _param.disabledMonthList, eventQuarterList = _param.eventQuarterList, disabledQuarterList = _param.disabledQuarterList, eventYearList = _param.eventYearList, disabledYearList = _param.disabledYearList, _param_type = _param.type, type = _param_type === void 0 ? 'Days' : _param_type, calendarContainerWidth = _param.calendarContainerWidth, calendarContainerHeight = _param.calendarContainerHeight, onToggle = _param.onToggle, onChange = _param.onChange, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onCommitFirstDate = _param.onCommitFirstDate, onCommitSecondDate = _param.onCommitSecondDate, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
             "className",
+            "name",
             "autoComplete",
             "isDoubleCalendar",
             "opened",
@@ -219,21 +231,26 @@ var datePickerRangeRoot = function(Root) {
             "defaultFirstDate",
             "defaultSecondDate",
             "preserveInvalidOnBlur",
-            "label",
-            "leftHelper",
-            "contentLeft",
-            "contentRight",
             "view",
             "size",
             "readOnly",
             "disabled",
-            "name",
-            "dividerVariant",
-            "dividerIcon",
+            "appearance",
+            "hasClearDivider",
+            "stretched",
             "firstValueError",
             "secondValueError",
             "firstValueSuccess",
             "secondValueSuccess",
+            "required",
+            "requiredPlacement",
+            "hasRequiredIndicator",
+            "label",
+            "leftHelper",
+            "contentLeft",
+            "contentRight",
+            "dividerVariant",
+            "dividerIcon",
             "firstPlaceholder",
             "secondPlaceholder",
             "firstTextfieldContentLeft",
@@ -244,9 +261,25 @@ var datePickerRangeRoot = function(Root) {
             "secondTextfieldTextBefore",
             "firstTextfieldTextAfter",
             "secondTextfieldTextAfter",
-            "required",
-            "requiredPlacement",
-            "hasRequiredIndicator",
+            "hintTrigger",
+            "hintText",
+            "hintView",
+            "hintSize",
+            "hintTargetIcon",
+            "hintTargetPlacement",
+            "hintPlacement",
+            "hintHasArrow",
+            "hintOffset",
+            "hintWidth",
+            "hintContentLeft",
+            "frame",
+            "usePortal",
+            "zIndex",
+            "placement",
+            "closeOnOverlayClick",
+            "closeOnEsc",
+            "closeAfterDateSelect",
+            "offset",
             "format",
             "lang",
             "maskWithFormat",
@@ -264,17 +297,8 @@ var datePickerRangeRoot = function(Root) {
             "eventYearList",
             "disabledYearList",
             "type",
-            "frame",
-            "usePortal",
-            "zIndex",
-            "placement",
-            "closeOnOverlayClick",
-            "closeOnEsc",
-            "closeAfterDateSelect",
-            "offset",
             "calendarContainerWidth",
             "calendarContainerHeight",
-            "stretched",
             "onToggle",
             "onChange",
             "onChangeFirstValue",
@@ -333,8 +357,6 @@ var datePickerRangeRoot = function(Root) {
         var inputSecondValue = endInitialValues.formattedDate;
         var fullDateEntered = Boolean(calendarFirstValue && calendarSecondValue);
         var _useState7 = _sliced_to_array((0, _react.useState)(false), 2), secondTextFieldClicked = _useState7[0], setSecondTextFieldClicked = _useState7[1];
-        var rangeErrorClass = firstValueError || secondValueError ? _DatePickertokens.classes.datePickerError : undefined;
-        var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? _DatePickertokens.classes.datePickerSuccess : undefined;
         var handleInputChange = function(value) {
             if (onChange) {
                 onChange({
@@ -521,12 +543,15 @@ var datePickerRangeRoot = function(Root) {
                 handleToggle(false);
             }
         };
+        console.log(hintText, hintTrigger, hintTargetIcon, hintPlacement, hintHasArrow, hintOffset, hintWidth);
         var RangeComponent = /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_RangeDatestyles.StyledRange, {
+            size: size,
             ref: rangeRef,
             autoComplete: autoComplete,
             dividerIcon: dividerIcon,
             dividerVariant: dividerVariant,
             label: label,
+            leftHelper: leftHelper,
             required: required,
             requiredIndicatorPlacement: requiredPlacement,
             hasRequiredIndicator: hasRequiredIndicator,
@@ -575,7 +600,20 @@ var datePickerRangeRoot = function(Root) {
             onBlurSecondTextfield: function(event) {
                 return handleBlur(event, onBlurSecondTextfield);
             },
-            onKeyDown: onKeyDown
+            onKeyDown: onKeyDown,
+            appearance: appearance,
+            hasClearDivider: hasClearDivider,
+            hintText: hintText,
+            hintView: hintView,
+            hintSize: hintSize,
+            hintTrigger: hintTrigger,
+            hintTargetIcon: hintTargetIcon,
+            hintPlacement: hintPlacement,
+            hintTargetPlacement: hintTargetPlacement,
+            hintHasArrow: hintHasArrow,
+            hintOffset: hintOffset,
+            hintWidth: hintWidth,
+            hintContentLeft: hintContentLeft
         }));
         (0, _react.useEffect)(function() {
             var _rangeRef_current, _rangeRef_current1;
@@ -635,6 +673,9 @@ var datePickerRangeRoot = function(Root) {
             className: (0, _classnames.default)(_DatePickertokens.classes.datePickerRoot, className, _define_property({}, _DatePickertokens.classes.datePickerstretched, stretched)),
             disabled: disabled,
             readOnly: !disabled && readOnly
+        }, hintText && {
+            hintView: hintView,
+            hintSize: hintSize
         }, rest), /*#__PURE__*/ _react.default.createElement(_RangeDatePopover.RangeDatePopover, {
             calendarValue: [
                 calendarFirstValue,
@@ -673,9 +714,7 @@ var datePickerRangeRoot = function(Root) {
             onChangeStartOfRange: handleChangeStartOfRange,
             onChangeValue: handleChangeCalendarValue,
             setIsInnerOpen: setIsInnerOpen
-        }), leftHelper && /*#__PURE__*/ _react.default.createElement(_RangeDatestyles.LeftHelper, {
-            className: (0, _classnames.default)(rangeErrorClass, rangeSuccessClass)
-        }, leftHelper), /*#__PURE__*/ _react.default.createElement(_DatePickerBasestyles.InputHidden, _object_spread({
+        }), /*#__PURE__*/ _react.default.createElement(_DatePickerBasestyles.InputHidden, _object_spread({
             name: name,
             type: "hidden",
             datatype: "datepicker-double",
@@ -705,14 +744,20 @@ var datePickerRangeConfig = {
             css: _base.base
         },
         eventTooltipSize: {
+            css: _base4.base
+        },
+        hintView: {
             css: _base2.base
         },
+        hintSize: {
+            css: _base3.base
+        },
         disabled: {
-            css: _base3.base,
+            css: _base5.base,
             attrs: true
         },
         readOnly: {
-            css: _base4.base,
+            css: _base6.base,
             attrs: true
         }
     },