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

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

@@ -22,7 +22,8 @@ export 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',
@@ -38,6 +39,12 @@ export 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',
@@ -63,6 +70,8 @@ export 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',
@@ -82,15 +91,24 @@ export 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',
@@ -131,6 +149,9 @@ export 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',
@@ -138,6 +159,16 @@ export 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',
@@ -230,26 +261,56 @@ export 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/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -136,18 +136,30 @@ import { getSortedValues } from "../../Calendar/utils";
 import { getFormattedDates } from "../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
+import { base as hintViewCSS } from "./variations/_hint-view/base";
+import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { base as eventTooltipSizeCSS } from "./variations/_tooltip-size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as readOnlyCSS } from "./variations/_readonly/base";
-import { LeftHelper, StyledRange, base } from "./RangeDate.styles";
+import { StyledRange, base } from "./RangeDate.styles";
 import { RangeDatePopover } from "./RangeDatePopover/RangeDatePopover";
 export var datePickerRangeRoot = function(Root) {
     return /*#__PURE__*/ 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",
@@ -155,21 +167,26 @@ export 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",
@@ -180,9 +197,25 @@ export 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",
@@ -200,17 +233,8 @@ export var datePickerRangeRoot = function(Root) {
             "eventYearList",
             "disabledYearList",
             "type",
-            "frame",
-            "usePortal",
-            "zIndex",
-            "placement",
-            "closeOnOverlayClick",
-            "closeOnEsc",
-            "closeAfterDateSelect",
-            "offset",
             "calendarContainerWidth",
             "calendarContainerHeight",
-            "stretched",
             "onToggle",
             "onChange",
             "onChangeFirstValue",
@@ -269,8 +293,6 @@ export var datePickerRangeRoot = function(Root) {
         var inputSecondValue = endInitialValues.formattedDate;
         var fullDateEntered = Boolean(calendarFirstValue && calendarSecondValue);
         var _useState7 = _sliced_to_array(useState(false), 2), secondTextFieldClicked = _useState7[0], setSecondTextFieldClicked = _useState7[1];
-        var rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
-        var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
         var handleInputChange = function(value) {
             if (onChange) {
                 onChange({
@@ -457,12 +479,15 @@ export var datePickerRangeRoot = function(Root) {
                 handleToggle(false);
             }
         };
+        console.log(hintText, hintTrigger, hintTargetIcon, hintPlacement, hintHasArrow, hintOffset, hintWidth);
         var RangeComponent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledRange, {
+            size: size,
             ref: rangeRef,
             autoComplete: autoComplete,
             dividerIcon: dividerIcon,
             dividerVariant: dividerVariant,
             label: label,
+            leftHelper: leftHelper,
             required: required,
             requiredIndicatorPlacement: requiredPlacement,
             hasRequiredIndicator: hasRequiredIndicator,
@@ -511,7 +536,20 @@ export 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
         }));
         useEffect(function() {
             var _rangeRef_current, _rangeRef_current1;
@@ -571,6 +609,9 @@ export var datePickerRangeRoot = function(Root) {
             className: cls(classes.datePickerRoot, className, _define_property({}, classes.datePickerstretched, stretched)),
             disabled: disabled,
             readOnly: !disabled && readOnly
+        }, hintText && {
+            hintView: hintView,
+            hintSize: hintSize
         }, rest), /*#__PURE__*/ React.createElement(RangeDatePopover, {
             calendarValue: [
                 calendarFirstValue,
@@ -609,9 +650,7 @@ export var datePickerRangeRoot = function(Root) {
             onChangeStartOfRange: handleChangeStartOfRange,
             onChangeValue: handleChangeCalendarValue,
             setIsInnerOpen: setIsInnerOpen
-        }), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
-            className: cls(rangeErrorClass, rangeSuccessClass)
-        }, leftHelper), /*#__PURE__*/ React.createElement(InputHidden, _object_spread({
+        }), /*#__PURE__*/ React.createElement(InputHidden, _object_spread({
             name: name,
             type: "hidden",
             datatype: "datepicker-double",
@@ -643,6 +682,12 @@ export var datePickerRangeConfig = {
         eventTooltipSize: {
             css: eventTooltipSizeCSS
         },
+        hintView: {
+            css: hintViewCSS
+        },
+        hintSize: {
+            css: hintSizeCSS
+        },
         disabled: {
             css: disabledCSS,
             attrs: true

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

@@ -10,14 +10,14 @@ var mergedPopoverConfig = mergeConfig(popoverConfig);
 var Popover = component(mergedPopoverConfig);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "RangeDate.styles__StyledPopover",
-    componentId: "sc-24609633-0"
+    componentId: "sc-45d7a269-0"
 })([
     ""
 ]);
 // NOTE: переопределение токенов Range
 export var StyledRange = styled(Range).withConfig({
     displayName: "RangeDate.styles__StyledRange",
-    componentId: "sc-24609633-1"
+    componentId: "sc-45d7a269-1"
 })([
     "",
     ":var(",
@@ -195,25 +195,144 @@ export var StyledRange = styled(Range).withConfig({
     ":var(",
     ");",
     ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
     ");"
-], rangeTokens.background, tokens.background, rangeTokens.backgroundError, tokens.backgroundError, rangeTokens.backgroundSuccess, tokens.backgroundSuccess, rangeTokens.readOnlyOpacity, tokens.rangeReadOnlyOpacity, rangeTokens.borderColor, tokens.borderColor, rangeTokens.borderColorError, tokens.borderColorError, rangeTokens.borderColorSuccess, tokens.borderColorSuccess, rangeTokens.borderWidth, tokens.textFieldBorderWidth, rangeTokens.dividerColor, tokens.dividerColor, rangeTokens.labelColor, tokens.labelColor, rangeTokens.leftHelperColor, tokens.leftHelperColor, rangeTokens.textFieldColor, tokens.textFieldColor, rangeTokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColor, rangeTokens.textFieldPlaceholderColorFocus, tokens.textFieldPlaceholderColorFocus, rangeTokens.textFieldCaretColor, tokens.textFieldCaretColor, rangeTokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundColorFocus, rangeTokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColor, rangeTokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundErrorColorFocus, rangeTokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColor, rangeTokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldBackgroundSuccessColorFocus, rangeTokens.textFieldBorderWidth, tokens.textFieldBorderWidth, rangeTokens.textFieldBorderColorFocus, tokens.textFieldBorderColorFocus, rangeTokens.textFieldBorderColorError, tokens.textFieldBorderColorError, rangeTokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorErrorFocus, rangeTokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccess, rangeTokens.textFieldBorderColorSuccessFocus, tokens.textFieldBorderColorSuccessFocus, rangeTokens.textFieldTextBeforeColor, tokens.textFieldTextBeforeColor, rangeTokens.textFieldTextAfterColor, tokens.textFieldTextAfterColor, rangeTokens.focusColor, tokens.focusColor, rangeTokens.borderRadius, tokens.borderRadius, rangeTokens.dividerPadding, tokens.dividerPadding, rangeTokens.dividerFontFamily, tokens.dividerFontFamily, rangeTokens.dividerFontStyle, tokens.dividerFontStyle, rangeTokens.dividerFontSize, tokens.dividerFontSize, rangeTokens.dividerFontWeight, tokens.dividerFontWeight, rangeTokens.dividerLetterSpacing, tokens.dividerLetterSpacing, rangeTokens.dividerLineHeight, tokens.dividerLineHeight, rangeTokens.leftContentMargin, tokens.leftContentMargin, rangeTokens.rightContentMargin, tokens.rightContentMargin, rangeTokens.contentSlotColor, tokens.contentSlotColor, rangeTokens.contentSlotColorHover, tokens.contentSlotColorHover, rangeTokens.contentSlotColorActive, tokens.contentSlotColorActive, rangeTokens.contentSlotRightColor, tokens.contentSlotRightColor, rangeTokens.contentSlotRightColorHover, tokens.contentSlotRightColorHover, rangeTokens.contentSlotRightColorActive, tokens.contentSlotRightColorActive, rangeTokens.labelWrapperOffset, tokens.labelOffset, rangeTokens.labelWrapperOffset, tokens.labelWrapperOffset, rangeTokens.labelFontFamily, tokens.labelFontFamily, rangeTokens.labelFontStyle, tokens.labelFontStyle, rangeTokens.labelFontSize, tokens.labelFontSize, rangeTokens.labelFontWeight, tokens.labelFontWeight, rangeTokens.labelLetterSpacing, tokens.labelLetterSpacing, rangeTokens.labelLineHeight, tokens.labelLineHeight, rangeTokens.indicatorWrapperGap, tokens.indicatorWrapperGap, rangeTokens.indicatorColor, tokens.indicatorColor, rangeTokens.indicatorSizeInner, tokens.indicatorSizeInner, rangeTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, rangeTokens.indicatorMarginTop, tokens.indicatorMarginTop, rangeTokens.indicatorOuterLeft, tokens.indicatorOuterLeft, rangeTokens.indicatorWithoutLabelInner, tokens.indicatorWithoutLabelInner, rangeTokens.indicatorWithoutLabelInnerLeft, tokens.indicatorWithoutLabelInnerLeft, rangeTokens.textFieldHeight, tokens.textFieldHeight, rangeTokens.textFieldBorderRadius, tokens.textFieldBorderRadius, rangeTokens.textFieldPadding, tokens.textFieldPadding, rangeTokens.textFieldFontFamily, tokens.textFieldFontFamily, rangeTokens.textFieldFontStyle, tokens.textFieldFontStyle, rangeTokens.textFieldFontSize, tokens.textFieldFontSize, rangeTokens.textFieldFontWeight, tokens.textFieldFontWeight, rangeTokens.textFieldLetterSpacing, tokens.textFieldLetterSpacing, rangeTokens.textFieldLineHeight, tokens.textFieldLineHeight, rangeTokens.helpersPadding, tokens.leftHelperOffset, rangeTokens.leftHelperFontFamily, tokens.leftHelperFontFamily, rangeTokens.leftHelperFontStyle, tokens.leftHelperFontStyle, rangeTokens.leftHelperFontSize, tokens.leftHelperFontSize, rangeTokens.leftHelperFontWeight, tokens.leftHelperFontWeight, rangeTokens.leftHelperLetterSpacing, tokens.leftHelperLetterSpacing, rangeTokens.leftHelperLineHeight, tokens.leftHelperLineHeight, rangeTokens.textFieldLeftContentMargin, tokens.textFieldLeftContentMargin, rangeTokens.textFieldRightContentMargin, tokens.textFieldRightContentMargin, rangeTokens.rightContentOpacityReadOnly, tokens.rightContentOpacityReadOnly, rangeTokens.textFieldTextBeforeMargin, tokens.textFieldTextBeforeMargin, rangeTokens.textFieldTextAfterMargin, tokens.textFieldTextAfterMargin, rangeTokens.backgroundReadOnly, tokens.backgroundReadOnly, rangeTokens.dividerColorReadOnly, tokens.dividerColorReadOnly, rangeTokens.dividerOpacityReadOnly, tokens.dividerOpacityReadOnly, rangeTokens.textFieldColorReadOnly, tokens.textFieldColorReadOnly, rangeTokens.textFieldBackgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, rangeTokens.textFieldPlaceholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly);
+], rangeTokens.background, tokens.background, rangeTokens.backgroundError, tokens.backgroundError, rangeTokens.backgroundSuccess, tokens.backgroundSuccess, rangeTokens.readOnlyOpacity, tokens.rangeReadOnlyOpacity, rangeTokens.borderColor, tokens.borderColor, rangeTokens.borderColorError, tokens.borderColorError, rangeTokens.borderColorSuccess, tokens.borderColorSuccess, rangeTokens.borderWidth, tokens.textFieldBorderWidth, rangeTokens.clearDividerColor, tokens.clearDividerColor, rangeTokens.dividerColor, tokens.dividerColor, rangeTokens.labelColor, tokens.labelColor, rangeTokens.leftHelperColor, tokens.leftHelperColor, rangeTokens.leftHelperColorSuccess, tokens.leftHelperColorSuccess, rangeTokens.leftHelperColorError, tokens.leftHelperColorError, rangeTokens.textFieldColor, tokens.textFieldColor, rangeTokens.textFieldColorSuccess, tokens.textFieldColorSuccess, rangeTokens.textFieldColorError, tokens.textFieldColorError, rangeTokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColor, rangeTokens.textFieldPlaceholderColorFocus, tokens.textFieldPlaceholderColorFocus, rangeTokens.textFieldClearPlaceholderColorFocus, tokens.textFieldClearPlaceholderColorFocus, rangeTokens.textFieldCaretColor, tokens.textFieldCaretColor, rangeTokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundColorFocus, rangeTokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColor, rangeTokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundErrorColorFocus, rangeTokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColor, rangeTokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldBackgroundSuccessColorFocus, rangeTokens.textFieldBorderWidth, tokens.textFieldBorderWidth, rangeTokens.textFieldBorderColorFocus, tokens.textFieldBorderColorFocus, rangeTokens.textFieldBorderColorError, tokens.textFieldBorderColorError, rangeTokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorErrorFocus, rangeTokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccess, rangeTokens.textFieldBorderColorSuccessFocus, tokens.textFieldBorderColorSuccessFocus, rangeTokens.textFieldTextBeforeColor, tokens.textFieldTextBeforeColor, rangeTokens.textFieldTextAfterColor, tokens.textFieldTextAfterColor, rangeTokens.focusColor, tokens.focusColor, rangeTokens.borderRadius, tokens.borderRadius, rangeTokens.dividerPadding, tokens.dividerPadding, rangeTokens.dividerFontFamily, tokens.dividerFontFamily, rangeTokens.dividerFontStyle, tokens.dividerFontStyle, rangeTokens.dividerFontSize, tokens.dividerFontSize, rangeTokens.dividerFontWeight, tokens.dividerFontWeight, rangeTokens.dividerLetterSpacing, tokens.dividerLetterSpacing, rangeTokens.dividerLineHeight, tokens.dividerLineHeight, rangeTokens.leftContentMargin, tokens.leftContentMargin, rangeTokens.rightContentMargin, tokens.rightContentMargin, rangeTokens.contentSlotColor, tokens.contentSlotColor, rangeTokens.contentSlotColorHover, tokens.contentSlotColorHover, rangeTokens.contentSlotColorActive, tokens.contentSlotColorActive, rangeTokens.contentSlotColorSuccess, tokens.contentSlotColorSuccess, rangeTokens.contentSlotColorSuccessHover, tokens.contentSlotColorSuccessHover, rangeTokens.contentSlotColorSuccessActive, tokens.contentSlotColorSuccessActive, rangeTokens.contentSlotColorError, tokens.contentSlotColorError, rangeTokens.contentSlotColorErrorHover, tokens.contentSlotColorErrorHover, rangeTokens.contentSlotColorErrorActive, tokens.contentSlotColorErrorActive, rangeTokens.contentSlotRightColor, tokens.contentSlotRightColor, rangeTokens.contentSlotRightColorHover, tokens.contentSlotRightColorHover, rangeTokens.contentSlotRightColorActive, tokens.contentSlotRightColorActive, rangeTokens.textFieldContentSlotColor, tokens.textFieldContentSlotColor, rangeTokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorHover, rangeTokens.textFieldContentSlotColorActive, tokens.textFieldContentSlotColorActive, rangeTokens.textFieldContentSlotColorSuccess, tokens.textFieldContentSlotColorSuccess, rangeTokens.textFieldContentSlotColorSuccessHover, tokens.textFieldContentSlotColorSuccessHover, rangeTokens.textFieldContentSlotColorSuccessActive, tokens.textFieldContentSlotColorSuccessActive, rangeTokens.textFieldContentSlotColorError, tokens.textFieldContentSlotColorError, rangeTokens.textFieldContentSlotColorErrorHover, tokens.textFieldContentSlotColorErrorHover, rangeTokens.textFieldContentSlotColorErrorActive, tokens.textFieldContentSlotColorErrorActive, rangeTokens.textFieldContentSlotRightColor, tokens.textFieldContentSlotRightColor, rangeTokens.textFieldContentSlotRightColorHover, tokens.textFieldContentSlotRightColorHover, rangeTokens.textFieldContentSlotRightColorActive, tokens.textFieldContentSlotRightColorActive, rangeTokens.labelWrapperOffset, tokens.labelOffset, rangeTokens.labelWrapperOffset, tokens.labelWrapperOffset, rangeTokens.labelFontFamily, tokens.labelFontFamily, rangeTokens.labelFontStyle, tokens.labelFontStyle, rangeTokens.labelFontSize, tokens.labelFontSize, rangeTokens.labelFontWeight, tokens.labelFontWeight, rangeTokens.labelLetterSpacing, tokens.labelLetterSpacing, rangeTokens.labelLineHeight, tokens.labelLineHeight, rangeTokens.titleCaptionOffset, tokens.titleCaptionOffset, rangeTokens.titleCaptionColor, tokens.titleCaptionColor, rangeTokens.titleCaptionFontFamily, tokens.titleCaptionFontFamily, rangeTokens.titleCaptionFontStyle, tokens.titleCaptionFontStyle, rangeTokens.titleCaptionFontSize, tokens.titleCaptionFontSize, rangeTokens.titleCaptionFontWeight, tokens.titleCaptionFontWeight, rangeTokens.titleCaptionLetterSpacing, tokens.titleCaptionLetterSpacing, rangeTokens.titleCaptionLineHeight, tokens.titleCaptionLineHeight, rangeTokens.indicatorWrapperGap, tokens.indicatorWrapperGap, rangeTokens.indicatorColor, tokens.indicatorColor, rangeTokens.indicatorSizeInner, tokens.indicatorSizeInner, rangeTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, rangeTokens.indicatorMarginTop, tokens.indicatorMarginTop, rangeTokens.indicatorOuterLeft, tokens.indicatorOuterLeft, rangeTokens.indicatorWithoutLabelInner, tokens.indicatorWithoutLabelInner, rangeTokens.indicatorWithoutLabelInnerLeft, tokens.indicatorWithoutLabelInnerLeft, rangeTokens.indicatorWithoutLabelOuterHint, tokens.indicatorWithoutLabelOuterHint, rangeTokens.hintMargin, tokens.hintMargin, rangeTokens.hintTargetSize, tokens.hintTargetSize, rangeTokens.hintCustomIconTargetSize, tokens.hintCustomIconTargetSize, rangeTokens.hintIconColor, tokens.hintIconColor, rangeTokens.hintWithoutLabelPlacementOffset, tokens.hintWithoutLabelPlacementOffset, rangeTokens.tooltipBackgroundColor, tokens.hintTooltipBackgroundColor, rangeTokens.tooltipBoxShadow, tokens.hintTooltipBoxShadow, rangeTokens.tooltipColor, tokens.hintTooltipColor, rangeTokens.tooltipPaddingTop, tokens.hintTooltipPaddingTop, rangeTokens.tooltipPaddingRight, tokens.hintTooltipPaddingRight, rangeTokens.tooltipPaddingBottom, tokens.hintTooltipPaddingBottom, rangeTokens.tooltipPaddingLeft, tokens.hintTooltipPaddingLeft, rangeTokens.tooltipMinHeight, tokens.hintTooltipMinHeight, rangeTokens.tooltipBorderRadius, tokens.hintTooltipBorderRadius, rangeTokens.tooltipTextFontFamily, tokens.hintTooltipTextFontFamily, rangeTokens.tooltipTextFontSize, tokens.hintTooltipTextFontSize, rangeTokens.tooltipTextFontStyle, tokens.hintTooltipTextFontStyle, rangeTokens.tooltipTextFontWeight, tokens.hintTooltipTextFontWeight, rangeTokens.tooltipTextFontLetterSpacing, tokens.hintTooltipTextFontLetterSpacing, rangeTokens.tooltipTextFontLineHeight, tokens.hintTooltipTextFontLineHeight, rangeTokens.tooltipContentLeftMargin, tokens.hintTooltipContentLeftMargin, rangeTokens.tooltipArrowMaskWidth, tokens.hintTooltipArrowMaskWidth, rangeTokens.tooltipArrowMaskHeight, tokens.hintTooltipArrowMaskHeight, rangeTokens.tooltipArrowMaskImage, tokens.hintTooltipArrowMaskImage, rangeTokens.tooltipArrowHeight, tokens.hintTooltipArrowHeight, rangeTokens.tooltipArrowEdgeMargin, tokens.hintTooltipArrowEdgeMargin, rangeTokens.tooltipArrowBackground, tokens.hintTooltipArrowBackground, rangeTokens.textFieldHeight, tokens.textFieldHeight, rangeTokens.textFieldBorderRadius, tokens.textFieldBorderRadius, rangeTokens.textFieldPadding, tokens.textFieldPadding, rangeTokens.textFieldFontFamily, tokens.textFieldFontFamily, rangeTokens.textFieldFontStyle, tokens.textFieldFontStyle, rangeTokens.textFieldFontSize, tokens.textFieldFontSize, rangeTokens.textFieldFontWeight, tokens.textFieldFontWeight, rangeTokens.textFieldLetterSpacing, tokens.textFieldLetterSpacing, rangeTokens.textFieldLineHeight, tokens.textFieldLineHeight, rangeTokens.helpersPadding, tokens.leftHelperOffset, rangeTokens.leftHelperFontFamily, tokens.leftHelperFontFamily, rangeTokens.leftHelperFontStyle, tokens.leftHelperFontStyle, rangeTokens.leftHelperFontSize, tokens.leftHelperFontSize, rangeTokens.leftHelperFontWeight, tokens.leftHelperFontWeight, rangeTokens.leftHelperLetterSpacing, tokens.leftHelperLetterSpacing, rangeTokens.leftHelperLineHeight, tokens.leftHelperLineHeight, rangeTokens.textFieldLeftContentMargin, tokens.textFieldLeftContentMargin, rangeTokens.textFieldRightContentMargin, tokens.textFieldRightContentMargin, rangeTokens.rightContentOpacityReadOnly, tokens.rightContentOpacityReadOnly, rangeTokens.textFieldTextBeforeMargin, tokens.textFieldTextBeforeMargin, rangeTokens.textFieldTextAfterMargin, tokens.textFieldTextAfterMargin, rangeTokens.backgroundReadOnly, tokens.backgroundReadOnly, rangeTokens.dividerColorReadOnly, tokens.dividerColorReadOnly, rangeTokens.dividerOpacityReadOnly, tokens.dividerOpacityReadOnly, rangeTokens.textFieldDividerColorSuccess, tokens.textFieldDividerColorSuccess, rangeTokens.textFieldDividerColorError, tokens.textFieldDividerColorError, rangeTokens.textFieldDividerColorHover, tokens.textFieldDividerColorHover, rangeTokens.textFieldDividerColorFocus, tokens.textFieldDividerColorFocus, rangeTokens.textFieldColorReadOnly, tokens.textFieldColorReadOnly, rangeTokens.textFieldBackgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, rangeTokens.textFieldPlaceholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly);
 export var base = css([
-    "display:inline-block;.",
+    "display:inline-block;",
+    "{.",
     ",.",
     "{width:inherit;}.",
-    "{display:grid;}&.",
+    "{display:grid;}}&.",
+    "{width:100%;& > .",
     "{width:100%;.",
     ",",
-    "{width:100%;}}"
-], popoverClasses.wrapper, popoverClasses.target, popoverClasses.wrapper, classes.datePickerstretched, popoverClasses.root, StyledRange);
-export var LeftHelper = styled.div.withConfig({
-    displayName: "RangeDate.styles__LeftHelper",
-    componentId: "sc-24609633-2"
-})([
-    "color:var(",
-    ");&.",
-    "{color:var(",
-    ");}&.",
-    "{color:var(",
-    ");}"
-], tokens.leftHelperColor, classes.datePickerError, tokens.leftHelperColorError, classes.datePickerSuccess, tokens.leftHelperColorSuccess);
+    "{width:100%;}}}"
+], StyledPopover, popoverClasses.wrapper, popoverClasses.target, popoverClasses.wrapper, classes.datePickerstretched, popoverClasses.wrapper, popoverClasses.target, StyledRange);

package/dist/styled-components/es/components/DatePicker/RangeDate/variations/_hint-size/base.js

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export var base = css([
+    ""
+]);

package/dist/styled-components/es/components/DatePicker/RangeDate/variations/_hint-view/base.js

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export var base = css([
+    ""
+]);

package/dist/styled-components/es/components/DatePicker/RangeDate/variations/_readonly/base.js

@@ -1,9 +1,6 @@
 import { css } from "styled-components";
 import { tokens } from "../../../DatePicker.tokens";
-import { LeftHelper } from "../../RangeDate.styles";
 export var base = css([
     "&[readonly]{cursor:default;",
-    ":transparent;",
-    "{color:var(",
-    ");}}"
-], tokens.textFieldBackgroundColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly);
+    ":transparent;}"
+], tokens.textFieldBackgroundColorReadOnly);

package/dist/styled-components/es/components/DatePicker/RangeDate/variations/_size/base.js

@@ -1,14 +1,4 @@
 import { css } from "styled-components";
-import { tokens } from "../../../DatePicker.tokens";
-import { LeftHelper } from "../../RangeDate.styles";
 export var base = css([
-    "",
-    "{margin:var(",
-    ");font-family:var(",
-    ");font-size:var(",
-    ");font-style:var(",
-    ");font-weight:var(",
-    ");letter-spacing:var(",
-    ");line-height:var(",
-    ");}"
-], LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
+    ""
+]);

package/dist/styled-components/es/components/DatePicker/RangeDate/variations/_view/base.js

@@ -1,8 +1,4 @@
 import { css } from "styled-components";
-import { LeftHelper } from "../../RangeDate.styles";
-import { tokens } from "../../../DatePicker.tokens";
 export var base = css([
-    "",
-    "{color:var(",
-    ");}"
-], LeftHelper, tokens.leftHelperColor);
+    ""
+]);