@salutejs/plasma-new-hope 0.345.0-canary.2415.20985766670.0 → 0.345.0-canary.2417.20986471487.0

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-dd2c2bf1-0"
 })([
     ""
 ]);
 // NOTE: переопределение токенов Range
 export var StyledRange = styled(Range).withConfig({
     displayName: "RangeDate.styles__StyledRange",
-    componentId: "sc-24609633-1"
+    componentId: "sc-dd2c2bf1-1"
 })([
     "",
     ":var(",
@@ -195,25 +195,104 @@ 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(",
     ");"
-], 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.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.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.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;}&.",
-    "{width:100%;.",
+    "{display:grid;}}&.",
+    "{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, StyledPopover, popoverClasses.root, 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);
+    ""
+]);

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

@@ -110,21 +110,43 @@ import { keys, useKeyNavigation } from "../hooks/useKeyboardNavigation";
 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, StyledInput, StyledPopover, base } from "./SingleDate.styles";
 export var datePickerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
-        var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, _param_defaultDate = _param.defaultDate, defaultDate = _param_defaultDate === void 0 ? '' : _param_defaultDate, preserveInvalidOnBlur = _param.preserveInvalidOnBlur, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _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, placeholder = _param.placeholder, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, 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, valueError = _param.valueError, valueSuccess = _param.valueSuccess, _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, // controlled
+        outerValue = _param.value, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, _param_defaultDate = _param.defaultDate, defaultDate = _param_defaultDate === void 0 ? '' : _param_defaultDate, 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, valueError = _param.valueError, valueSuccess = _param.valueSuccess, // layout
+        label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _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, placeholder = _param.placeholder, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, _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, onChangeValue = _param.onChangeValue, onCommitDate = _param.onCommitDate, onToggle = _param.onToggle, onFocus = _param.onFocus, onBlur = _param.onBlur, onChange = _param.onChange, autoComplete = _param.autoComplete, 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, onChangeValue = _param.onChangeValue, onCommitDate = _param.onCommitDate, onToggle = _param.onToggle, onFocus = _param.onFocus, onBlur = _param.onBlur, onChange = _param.onChange, rest = _object_without_properties(_param, [
             "className",
-            "opened",
+            "name",
+            "autoComplete",
             "value",
+            "opened",
             "defaultDate",
             "preserveInvalidOnBlur",
+            "view",
+            "size",
+            "readOnly",
+            "disabled",
+            "appearance",
+            "hasClearDivider",
+            "stretched",
+            "valueError",
+            "valueSuccess",
             "label",
             "labelPlacement",
             "keepPlaceholder",
@@ -137,13 +159,25 @@ export var datePickerRoot = function(Root) {
             "contentRight",
             "textBefore",
             "textAfter",
-            "view",
-            "size",
-            "readOnly",
-            "disabled",
-            "name",
-            "valueError",
-            "valueSuccess",
+            "hintTrigger",
+            "hintText",
+            "hintView",
+            "hintSize",
+            "hintTargetIcon",
+            "hintTargetPlacement",
+            "hintPlacement",
+            "hintHasArrow",
+            "hintOffset",
+            "hintWidth",
+            "hintContentLeft",
+            "frame",
+            "usePortal",
+            "zIndex",
+            "placement",
+            "closeOnOverlayClick",
+            "closeOnEsc",
+            "closeAfterDateSelect",
+            "offset",
             "format",
             "lang",
             "maskWithFormat",
@@ -161,24 +195,14 @@ export var datePickerRoot = function(Root) {
             "eventYearList",
             "disabledYearList",
             "type",
-            "frame",
-            "usePortal",
-            "zIndex",
-            "placement",
-            "closeOnOverlayClick",
-            "closeOnEsc",
-            "closeAfterDateSelect",
-            "offset",
             "calendarContainerWidth",
             "calendarContainerHeight",
-            "stretched",
             "onChangeValue",
             "onCommitDate",
             "onToggle",
             "onFocus",
             "onBlur",
-            "onChange",
-            "autoComplete"
+            "onChange"
         ]);
         var inputRef = useRef(null);
         var innerRef = useRef(null);
@@ -287,7 +311,8 @@ export var datePickerRoot = function(Root) {
                 handleToggle(false);
             }
         };
-        var DatePickerInput = /*#__PURE__*/ React.createElement(StyledInput, {
+        console.log(hintText, hintTrigger, hintTargetIcon, hintPlacement, hintHasArrow, hintOffset, hintWidth);
+        var DatePickerInput = /*#__PURE__*/ React.createElement(StyledInput, _object_spread({
             ref: inputRef,
             className: cls(datePickerErrorClass, datePickerSuccessClass),
             value: inputValue,
@@ -310,8 +335,24 @@ export var datePickerRoot = function(Root) {
             label: label,
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder,
-            autoComplete: autoComplete
-        });
+            autoComplete: autoComplete,
+            appearance: appearance,
+            hasDivider: hasClearDivider
+        }, hintText ? {
+            hintText: hintText,
+            hintView: hintView,
+            hintSize: hintSize,
+            hintTrigger: hintTrigger,
+            hintTargetIcon: hintTargetIcon,
+            hintPlacement: hintPlacement,
+            hintHasArrow: hintHasArrow,
+            hintOffset: hintOffset,
+            hintWidth: hintWidth,
+            hintContentLeft: hintContentLeft,
+            hintTargetPlacement: hintTargetPlacement
+        } : {
+            hintText: undefined
+        }));
         useEffect(function() {
             setIsInnerOpen(function(prevOpen) {
                 return prevOpen !== opened && opened;
@@ -336,6 +377,9 @@ export var datePickerRoot = function(Root) {
             readOnly: !disabled && readOnly,
             ref: ref,
             eventTooltipSize: eventTooltipOptions === null || eventTooltipOptions === void 0 ? void 0 : eventTooltipOptions.size
+        }, hintText && {
+            hintView: hintView,
+            hintSize: hintSize
         }, rest), /*#__PURE__*/ React.createElement(StyledPopover, {
             opened: isInnerOpen,
             usePortal: usePortal,
@@ -406,6 +450,12 @@ export var datePickerConfig = {
         eventTooltipSize: {
             css: eventTooltipSizeCSS
         },
+        hintView: {
+            css: hintViewCSS
+        },
+        hintSize: {
+            css: hintSizeCSS
+        },
         disabled: {
             css: disabledCSS,
             attrs: true