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

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

@@ -12,14 +12,50 @@ _export(exports, {
     get DatePicker () {
         return DatePicker;
     },
+    get DatePickerClear () {
+        return DatePickerClear;
+    },
+    get DatePickerDefault () {
+        return DatePickerDefault;
+    },
     get DatePickerRange () {
         return DatePickerRange;
+    },
+    get DatePickerRangeClear () {
+        return DatePickerRangeClear;
+    },
+    get DatePickerRangeDefault () {
+        return DatePickerRangeDefault;
     }
 });
 var _engines = require("../../../engines");
+var _utils = require("../../../utils");
 var _DatePicker = require("../../../components/DatePicker");
 var _DatePickerconfig = require("./DatePicker.config");
-var mergedConfig = (0, _engines.mergeConfig)(_DatePicker.datePickerConfig, _DatePickerconfig.config);
-var DatePicker = (0, _engines.component)(mergedConfig);
-var mergedRangeConfig = (0, _engines.mergeConfig)(_DatePicker.datePickerRangeConfig, _DatePickerconfig.config);
-var DatePickerRange = (0, _engines.component)(mergedRangeConfig);
+var _DatePickerclearconfig = require("./DatePicker.clear.config");
+var mergedConfigDefault = (0, _engines.mergeConfig)(_DatePicker.datePickerConfig, _DatePickerconfig.config);
+var DatePickerDefault = (0, _engines.component)(mergedConfigDefault);
+var mergedConfigClear = (0, _engines.mergeConfig)(_DatePicker.datePickerConfig, _DatePickerclearconfig.config);
+var DatePickerClear = (0, _engines.component)(mergedConfigClear);
+var DatePicker = (0, _utils.createConditionalComponent)(DatePickerDefault, [
+    {
+        conditions: {
+            prop: 'appearance',
+            value: 'clear'
+        },
+        component: DatePickerClear
+    }
+]);
+var mergedRangeConfigDefault = (0, _engines.mergeConfig)(_DatePicker.datePickerRangeConfig, _DatePickerconfig.config);
+var DatePickerRangeDefault = (0, _engines.component)(mergedRangeConfigDefault);
+var mergedRangeConfigClea = (0, _engines.mergeConfig)(_DatePicker.datePickerRangeConfig, _DatePickerclearconfig.config);
+var DatePickerRangeClear = (0, _engines.component)(mergedRangeConfigClea);
+var DatePickerRange = (0, _utils.createConditionalComponent)(DatePickerRangeDefault, [
+    {
+        conditions: {
+            prop: 'appearance',
+            value: 'clear'
+        },
+        component: DatePickerRangeClear
+    }
+]);

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

@@ -3,7 +3,9 @@ export var classes = {
     datePickerSuccess: 'date-picker-success',
     datePickerRoot: 'date-picker-root',
     datePickerstretched: 'date-picker-stretched',
-    datePickerCalendarstretched: 'date-picker-calendar-stretched'
+    datePickerCalendarstretched: 'date-picker-calendar-stretched',
+    clear: 'date-picker-clear',
+    clearDivider: 'date-picker-clear-divider'
 };
 export var pivateTokens = {
     calendarDoubleWidth: '--plasma_private-calendar-double-width'
@@ -22,7 +24,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',
@@ -63,6 +66,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,6 +87,14 @@ 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',
@@ -91,6 +104,7 @@ export var tokens = {
     textFieldPlaceholderColorFocus: '--plasma-datepicker-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',
@@ -138,6 +152,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-textfield-content-slot-color-success',
+    textFieldContentSlotColorSuccessHover: '--plasma-textfield-content-slot-color-success-hover',
+    textFieldContentSlotColorSuccessActive: '--plasma-textfield-content-slot-color-success-active',
+    textFieldContentSlotColorError: '--plasma-textfield-content-slot-color-error',
+    textFieldContentSlotColorErrorHover: '--plasma-textfield-content-slot-color-error-hover',
+    textFieldContentSlotColorErrorActive: '--plasma-textfield-content-slot-color-error-active',
+    textFieldDividerColorSuccess: '--plasma-date-picker-textfield__divider-color-success',
+    textFieldDividerColorError: '--plasma-date-picker-textfield__divider-color-error',
+    textFieldDividerColorHover: '--plasma-date-picker-textfield__divider-color-hover',
+    textFieldDividerColorFocus: '--plasma-date-picker-textfield__divider-color-focus',
     /** Токены календаря */ calendarMarginTop: '--plasma-date-picker-calendar-margin-top',
     calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
     calendarShadow: '--plasma-date-picker-calendar-shadow',
@@ -251,5 +275,35 @@ export var tokens = {
     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'
+    tooltipArrowEdgeMargin: '--plasma-datepicker-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-datepicker-calendar-hint-tooltip-padding-top',
+    hintTooltipPaddingRight: '--plasma-datepicker-calendar-hint-tooltip-padding-right',
+    hintTooltipPaddingBottom: '--plasma-datepicker-calendar-hint-tooltip-padding-bottom',
+    hintTooltipPaddingLeft: '--plasma-datepicker-calendar-hint-tooltip-padding-left',
+    hintTooltipMinHeight: '--plasma-datepicker-calendar-hint-tooltip-min-height',
+    hintTooltipBackgroundColor: '--plasma-datepicker-calendar-hint-tooltip-background-color',
+    hintTooltipBoxShadow: '--plasma-datepicker-calendar-hint-tooltip-box-shadow',
+    hintTooltipBorderRadius: '--plasma-datepicker-calendar-hint-tooltip-border-radius',
+    hintTooltipColor: '--plasma-datepicker-calendar-hint-tooltip-color',
+    hintTooltipTextFontFamily: '--plasma-datepicker-calendar-hint-tooltip-text-font-family',
+    hintTooltipTextFontSize: '--plasma-datepicker-calendar-hint-tooltip-text-font-size',
+    hintTooltipTextFontStyle: '--plasma-datepicker-calendar-hint-tooltip-text-font-style',
+    hintTooltipTextFontWeight: '--plasma-datepicker-calendar-hint-tooltip-text-font-weight',
+    hintTooltipTextFontLetterSpacing: '--plasma-datepicker-calendar-hint-tooltip-text-font-letter-spacing',
+    hintTooltipTextFontLineHeight: '--plasma-datepicker-calendar-hint-tooltip-text-font-line-height',
+    hintTooltipContentLeftMargin: '--plasma-datepicker-calendar-hint-tooltip-content-left-margin',
+    hintTooltipArrowMaskWidth: '--plasma-datepicker-calendar-hint-tooltip-arrow-mask-width',
+    hintTooltipArrowMaskHeight: '--plasma-datepicker-calendar-hint-tooltip-arrow-mask-height',
+    hintTooltipArrowMaskImage: '--plasma-datepicker-calendar-hint-tooltip-arrow-mask-image',
+    hintTooltipArrowBackground: '--plasma-datepicker-calendar-hint-tooltip-arrow-background',
+    hintTooltipArrowHeight: '--plasma-datepicker-calendar-hint-tooltip-arrow-height',
+    hintTooltipArrowEdgeMargin: '--plasma-datepicker-calendar-hint-tooltip-arrow-edge-margin'
 };

package/dist/emotion/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