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

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

@@ -1,7 +1,31 @@
 import { component, mergeConfig } from "../../../engines";
+import { createConditionalComponent } from "../../../utils";
 import { datePickerConfig, datePickerRangeConfig } from "../../../components/DatePicker";
 import { config } from "./DatePicker.config";
-var mergedConfig = mergeConfig(datePickerConfig, config);
-export var DatePicker = component(mergedConfig);
-var mergedRangeConfig = mergeConfig(datePickerRangeConfig, config);
-export var DatePickerRange = component(mergedRangeConfig);
+import { config as configClear } from "./DatePicker.clear.config";
+var mergedConfigDefault = mergeConfig(datePickerConfig, config);
+export var DatePickerDefault = component(mergedConfigDefault);
+var mergedConfigClear = mergeConfig(datePickerConfig, configClear);
+export var DatePickerClear = component(mergedConfigClear);
+export var DatePicker = createConditionalComponent(DatePickerDefault, [
+    {
+        conditions: {
+            prop: 'appearance',
+            value: 'clear'
+        },
+        component: DatePickerClear
+    }
+]);
+var mergedRangeConfigDefault = mergeConfig(datePickerRangeConfig, config);
+export var DatePickerRangeDefault = component(mergedRangeConfigDefault);
+var mergedRangeConfigClea = mergeConfig(datePickerRangeConfig, configClear);
+export var DatePickerRangeClear = component(mergedRangeConfigClea);
+export var DatePickerRange = createConditionalComponent(DatePickerRangeDefault, [
+    {
+        conditions: {
+            prop: 'appearance',
+            value: 'clear'
+        },
+        component: DatePickerRangeClear
+    }
+]);

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

@@ -24,7 +24,9 @@ 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'
 };
 var pivateTokens = {
     calendarDoubleWidth: '--plasma_private-calendar-double-width'
@@ -43,7 +45,8 @@ var tokens = {
     borderColorError: '--plasma-date-picker_range-border-color-error',
     borderColorSuccess: '--plasma-date-picker_range-border-color-success',
     borderColorReadOnly: '--plasma-date-picker_range-border-color-readonly',
-    /** Токены разделителя */ dividerColor: '--plasma-date-picker_range__divider-color',
+    /** Токены разделителя */ clearDividerColor: '--plasma-date-picker-clear__divider-color',
+    dividerColor: '--plasma-date-picker_range__divider-color',
     dividerColorReadOnly: '--plasma-date-picker_range__divider-color-readonly',
     dividerPadding: '--plasma-date-picker_range__divider-padding',
     dividerFontFamily: '--plasma-date-picker_range__divider-font-family',
@@ -84,6 +87,8 @@ var tokens = {
     indicatorOuterLeft: '--plasma-date-picker-indicator-outer-left',
     indicatorWithoutLabelInner: '--plasma-date-picker-indicator-without-label-inner',
     indicatorWithoutLabelInnerLeft: '--plasma-date-picker-indicator-without-label-inner-left',
+    indicatorWithoutLabelOuterHint: '--plasma-date-picker-indicator-without-label-outer-hint',
+    /** Токены индикатора (удалить после перехода на InformationWrapper в Textfield) */ clearIndicatorHintInnerRight: '--plasma-date-picker__clear-indicator-hint-placement-inner-right',
     /* label-placement-inner */ labelInnerFontFamily: '--plasma-date-picker-placement_inner__label-font-family',
     labelInnerFontStyle: '--plasma-date-picker-placement_inner__label-font-style',
     labelInnerFontSize: '--plasma-date-picker-placement_inner__label-font-size',
@@ -103,6 +108,14 @@ 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',
@@ -112,6 +125,7 @@ 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',
@@ -159,6 +173,16 @@ var tokens = {
     textFieldContentRightSlotColorHover: '--plasma-date-picker-textfield__content-right-color-hover',
     textFieldContentRightSlotColorActive: '--plasma-date-picker-textfield__content-right-color-active',
     textFieldContentSlotRightOpacityReadOnly: '--plasma-date-picker-textfield__content-right-readonly-opacity',
+    textFieldContentSlotColorSuccess: '--plasma-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',
@@ -272,5 +296,35 @@ 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/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js

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

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

@@ -9,9 +9,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get LeftHelper () {
-        return LeftHelper;
-    },
     get StyledPopover () {
         return StyledPopover;
     },
@@ -74,13 +71,13 @@ var mergedPopoverConfig = (0, _engines.mergeConfig)(_Popover.popoverConfig);
 var Popover = (0, _engines.component)(mergedPopoverConfig);
 var StyledPopover = (0, _styledcomponents.default)(Popover).withConfig({
     displayName: "RangeDate.styles__StyledPopover",
-    componentId: "sc-24609633-0"
+    componentId: "sc-dd2c2bf1-0"
 })([
     ""
 ]);
 var StyledRange = (0, _styledcomponents.default)(Range).withConfig({
     displayName: "RangeDate.styles__StyledRange",
-    componentId: "sc-24609633-1"
+    componentId: "sc-dd2c2bf1-1"
 })([
     "",
     ":var(",
@@ -258,25 +255,104 @@ var StyledRange = (0, _styledcomponents.default)(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(",
     ");"
-], _Range.rangeTokens.background, _DatePickertokens.tokens.background, _Range.rangeTokens.backgroundError, _DatePickertokens.tokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _DatePickertokens.tokens.backgroundSuccess, _Range.rangeTokens.readOnlyOpacity, _DatePickertokens.tokens.rangeReadOnlyOpacity, _Range.rangeTokens.borderColor, _DatePickertokens.tokens.borderColor, _Range.rangeTokens.borderColorError, _DatePickertokens.tokens.borderColorError, _Range.rangeTokens.borderColorSuccess, _DatePickertokens.tokens.borderColorSuccess, _Range.rangeTokens.borderWidth, _DatePickertokens.tokens.textFieldBorderWidth, _Range.rangeTokens.dividerColor, _DatePickertokens.tokens.dividerColor, _Range.rangeTokens.labelColor, _DatePickertokens.tokens.labelColor, _Range.rangeTokens.leftHelperColor, _DatePickertokens.tokens.leftHelperColor, _Range.rangeTokens.textFieldColor, _DatePickertokens.tokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _DatePickertokens.tokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldPlaceholderColorFocus, _DatePickertokens.tokens.textFieldPlaceholderColorFocus, _Range.rangeTokens.textFieldCaretColor, _DatePickertokens.tokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _DatePickertokens.tokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _DatePickertokens.tokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _DatePickertokens.tokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _DatePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldBorderWidth, _DatePickertokens.tokens.textFieldBorderWidth, _Range.rangeTokens.textFieldBorderColorFocus, _DatePickertokens.tokens.textFieldBorderColorFocus, _Range.rangeTokens.textFieldBorderColorError, _DatePickertokens.tokens.textFieldBorderColorError, _Range.rangeTokens.textFieldBorderColorErrorFocus, _DatePickertokens.tokens.textFieldBorderColorErrorFocus, _Range.rangeTokens.textFieldBorderColorSuccess, _DatePickertokens.tokens.textFieldBorderColorSuccess, _Range.rangeTokens.textFieldBorderColorSuccessFocus, _DatePickertokens.tokens.textFieldBorderColorSuccessFocus, _Range.rangeTokens.textFieldTextBeforeColor, _DatePickertokens.tokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _DatePickertokens.tokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor, _DatePickertokens.tokens.focusColor, _Range.rangeTokens.borderRadius, _DatePickertokens.tokens.borderRadius, _Range.rangeTokens.dividerPadding, _DatePickertokens.tokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _DatePickertokens.tokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _DatePickertokens.tokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _DatePickertokens.tokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _DatePickertokens.tokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _DatePickertokens.tokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _DatePickertokens.tokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _DatePickertokens.tokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _DatePickertokens.tokens.rightContentMargin, _Range.rangeTokens.contentSlotColor, _DatePickertokens.tokens.contentSlotColor, _Range.rangeTokens.contentSlotColorHover, _DatePickertokens.tokens.contentSlotColorHover, _Range.rangeTokens.contentSlotColorActive, _DatePickertokens.tokens.contentSlotColorActive, _Range.rangeTokens.contentSlotRightColor, _DatePickertokens.tokens.contentSlotRightColor, _Range.rangeTokens.contentSlotRightColorHover, _DatePickertokens.tokens.contentSlotRightColorHover, _Range.rangeTokens.contentSlotRightColorActive, _DatePickertokens.tokens.contentSlotRightColorActive, _Range.rangeTokens.labelWrapperOffset, _DatePickertokens.tokens.labelOffset, _Range.rangeTokens.labelWrapperOffset, _DatePickertokens.tokens.labelWrapperOffset, _Range.rangeTokens.labelFontFamily, _DatePickertokens.tokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _DatePickertokens.tokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _DatePickertokens.tokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _DatePickertokens.tokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _DatePickertokens.tokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _DatePickertokens.tokens.labelLineHeight, _Range.rangeTokens.indicatorWrapperGap, _DatePickertokens.tokens.indicatorWrapperGap, _Range.rangeTokens.indicatorColor, _DatePickertokens.tokens.indicatorColor, _Range.rangeTokens.indicatorSizeInner, _DatePickertokens.tokens.indicatorSizeInner, _Range.rangeTokens.indicatorSizeOuter, _DatePickertokens.tokens.indicatorSizeOuter, _Range.rangeTokens.indicatorMarginTop, _DatePickertokens.tokens.indicatorMarginTop, _Range.rangeTokens.indicatorOuterLeft, _DatePickertokens.tokens.indicatorOuterLeft, _Range.rangeTokens.indicatorWithoutLabelInner, _DatePickertokens.tokens.indicatorWithoutLabelInner, _Range.rangeTokens.indicatorWithoutLabelInnerLeft, _DatePickertokens.tokens.indicatorWithoutLabelInnerLeft, _Range.rangeTokens.textFieldHeight, _DatePickertokens.tokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _DatePickertokens.tokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _DatePickertokens.tokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _DatePickertokens.tokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _DatePickertokens.tokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _DatePickertokens.tokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _DatePickertokens.tokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _DatePickertokens.tokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _DatePickertokens.tokens.textFieldLineHeight, _Range.rangeTokens.helpersPadding, _DatePickertokens.tokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _DatePickertokens.tokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _DatePickertokens.tokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _DatePickertokens.tokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _DatePickertokens.tokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _DatePickertokens.tokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _DatePickertokens.tokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _DatePickertokens.tokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _DatePickertokens.tokens.textFieldRightContentMargin, _Range.rangeTokens.rightContentOpacityReadOnly, _DatePickertokens.tokens.rightContentOpacityReadOnly, _Range.rangeTokens.textFieldTextBeforeMargin, _DatePickertokens.tokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin, _DatePickertokens.tokens.textFieldTextAfterMargin, _Range.rangeTokens.backgroundReadOnly, _DatePickertokens.tokens.backgroundReadOnly, _Range.rangeTokens.dividerColorReadOnly, _DatePickertokens.tokens.dividerColorReadOnly, _Range.rangeTokens.dividerOpacityReadOnly, _DatePickertokens.tokens.dividerOpacityReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _DatePickertokens.tokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _DatePickertokens.tokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly, _DatePickertokens.tokens.textFieldPlaceholderColorReadOnly);
+], _Range.rangeTokens.background, _DatePickertokens.tokens.background, _Range.rangeTokens.backgroundError, _DatePickertokens.tokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _DatePickertokens.tokens.backgroundSuccess, _Range.rangeTokens.readOnlyOpacity, _DatePickertokens.tokens.rangeReadOnlyOpacity, _Range.rangeTokens.borderColor, _DatePickertokens.tokens.borderColor, _Range.rangeTokens.borderColorError, _DatePickertokens.tokens.borderColorError, _Range.rangeTokens.borderColorSuccess, _DatePickertokens.tokens.borderColorSuccess, _Range.rangeTokens.borderWidth, _DatePickertokens.tokens.textFieldBorderWidth, _Range.rangeTokens.clearDividerColor, _DatePickertokens.tokens.clearDividerColor, _Range.rangeTokens.dividerColor, _DatePickertokens.tokens.dividerColor, _Range.rangeTokens.labelColor, _DatePickertokens.tokens.labelColor, _Range.rangeTokens.leftHelperColor, _DatePickertokens.tokens.leftHelperColor, _Range.rangeTokens.leftHelperColorSuccess, _DatePickertokens.tokens.leftHelperColorSuccess, _Range.rangeTokens.leftHelperColorError, _DatePickertokens.tokens.leftHelperColorError, _Range.rangeTokens.textFieldColor, _DatePickertokens.tokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _DatePickertokens.tokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldPlaceholderColorFocus, _DatePickertokens.tokens.textFieldPlaceholderColorFocus, _Range.rangeTokens.textFieldClearPlaceholderColorFocus, _DatePickertokens.tokens.textFieldClearPlaceholderColorFocus, _Range.rangeTokens.textFieldCaretColor, _DatePickertokens.tokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _DatePickertokens.tokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _DatePickertokens.tokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _DatePickertokens.tokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _DatePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldBorderWidth, _DatePickertokens.tokens.textFieldBorderWidth, _Range.rangeTokens.textFieldBorderColorFocus, _DatePickertokens.tokens.textFieldBorderColorFocus, _Range.rangeTokens.textFieldBorderColorError, _DatePickertokens.tokens.textFieldBorderColorError, _Range.rangeTokens.textFieldBorderColorErrorFocus, _DatePickertokens.tokens.textFieldBorderColorErrorFocus, _Range.rangeTokens.textFieldBorderColorSuccess, _DatePickertokens.tokens.textFieldBorderColorSuccess, _Range.rangeTokens.textFieldBorderColorSuccessFocus, _DatePickertokens.tokens.textFieldBorderColorSuccessFocus, _Range.rangeTokens.textFieldTextBeforeColor, _DatePickertokens.tokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _DatePickertokens.tokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor, _DatePickertokens.tokens.focusColor, _Range.rangeTokens.borderRadius, _DatePickertokens.tokens.borderRadius, _Range.rangeTokens.dividerPadding, _DatePickertokens.tokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _DatePickertokens.tokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _DatePickertokens.tokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _DatePickertokens.tokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _DatePickertokens.tokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _DatePickertokens.tokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _DatePickertokens.tokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _DatePickertokens.tokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _DatePickertokens.tokens.rightContentMargin, _Range.rangeTokens.contentSlotColor, _DatePickertokens.tokens.contentSlotColor, _Range.rangeTokens.contentSlotColorHover, _DatePickertokens.tokens.contentSlotColorHover, _Range.rangeTokens.contentSlotColorActive, _DatePickertokens.tokens.contentSlotColorActive, _Range.rangeTokens.contentSlotRightColor, _DatePickertokens.tokens.contentSlotRightColor, _Range.rangeTokens.contentSlotRightColorHover, _DatePickertokens.tokens.contentSlotRightColorHover, _Range.rangeTokens.contentSlotRightColorActive, _DatePickertokens.tokens.contentSlotRightColorActive, _Range.rangeTokens.labelWrapperOffset, _DatePickertokens.tokens.labelOffset, _Range.rangeTokens.labelWrapperOffset, _DatePickertokens.tokens.labelWrapperOffset, _Range.rangeTokens.labelFontFamily, _DatePickertokens.tokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _DatePickertokens.tokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _DatePickertokens.tokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _DatePickertokens.tokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _DatePickertokens.tokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _DatePickertokens.tokens.labelLineHeight, _Range.rangeTokens.titleCaptionOffset, _DatePickertokens.tokens.titleCaptionOffset, _Range.rangeTokens.titleCaptionColor, _DatePickertokens.tokens.titleCaptionColor, _Range.rangeTokens.titleCaptionFontFamily, _DatePickertokens.tokens.titleCaptionFontFamily, _Range.rangeTokens.titleCaptionFontStyle, _DatePickertokens.tokens.titleCaptionFontStyle, _Range.rangeTokens.titleCaptionFontSize, _DatePickertokens.tokens.titleCaptionFontSize, _Range.rangeTokens.titleCaptionFontWeight, _DatePickertokens.tokens.titleCaptionFontWeight, _Range.rangeTokens.titleCaptionLetterSpacing, _DatePickertokens.tokens.titleCaptionLetterSpacing, _Range.rangeTokens.titleCaptionLineHeight, _DatePickertokens.tokens.titleCaptionLineHeight, _Range.rangeTokens.indicatorWrapperGap, _DatePickertokens.tokens.indicatorWrapperGap, _Range.rangeTokens.indicatorColor, _DatePickertokens.tokens.indicatorColor, _Range.rangeTokens.indicatorSizeInner, _DatePickertokens.tokens.indicatorSizeInner, _Range.rangeTokens.indicatorSizeOuter, _DatePickertokens.tokens.indicatorSizeOuter, _Range.rangeTokens.indicatorMarginTop, _DatePickertokens.tokens.indicatorMarginTop, _Range.rangeTokens.indicatorOuterLeft, _DatePickertokens.tokens.indicatorOuterLeft, _Range.rangeTokens.indicatorWithoutLabelInner, _DatePickertokens.tokens.indicatorWithoutLabelInner, _Range.rangeTokens.indicatorWithoutLabelInnerLeft, _DatePickertokens.tokens.indicatorWithoutLabelInnerLeft, _Range.rangeTokens.indicatorWithoutLabelOuterHint, _DatePickertokens.tokens.indicatorWithoutLabelOuterHint, _Range.rangeTokens.hintMargin, _DatePickertokens.tokens.hintMargin, _Range.rangeTokens.hintTargetSize, _DatePickertokens.tokens.hintTargetSize, _Range.rangeTokens.hintCustomIconTargetSize, _DatePickertokens.tokens.hintCustomIconTargetSize, _Range.rangeTokens.hintIconColor, _DatePickertokens.tokens.hintIconColor, _Range.rangeTokens.hintWithoutLabelPlacementOffset, _DatePickertokens.tokens.hintWithoutLabelPlacementOffset, _Range.rangeTokens.tooltipBackgroundColor, _DatePickertokens.tokens.hintTooltipBackgroundColor, _Range.rangeTokens.tooltipBoxShadow, _DatePickertokens.tokens.hintTooltipBoxShadow, _Range.rangeTokens.tooltipColor, _DatePickertokens.tokens.hintTooltipColor, _Range.rangeTokens.tooltipPaddingTop, _DatePickertokens.tokens.hintTooltipPaddingTop, _Range.rangeTokens.tooltipPaddingRight, _DatePickertokens.tokens.hintTooltipPaddingRight, _Range.rangeTokens.tooltipPaddingBottom, _DatePickertokens.tokens.hintTooltipPaddingBottom, _Range.rangeTokens.tooltipPaddingLeft, _DatePickertokens.tokens.hintTooltipPaddingLeft, _Range.rangeTokens.tooltipMinHeight, _DatePickertokens.tokens.hintTooltipMinHeight, _Range.rangeTokens.tooltipBorderRadius, _DatePickertokens.tokens.hintTooltipBorderRadius, _Range.rangeTokens.tooltipTextFontFamily, _DatePickertokens.tokens.hintTooltipTextFontFamily, _Range.rangeTokens.tooltipTextFontSize, _DatePickertokens.tokens.hintTooltipTextFontSize, _Range.rangeTokens.tooltipTextFontStyle, _DatePickertokens.tokens.hintTooltipTextFontStyle, _Range.rangeTokens.tooltipTextFontWeight, _DatePickertokens.tokens.hintTooltipTextFontWeight, _Range.rangeTokens.tooltipTextFontLetterSpacing, _DatePickertokens.tokens.hintTooltipTextFontLetterSpacing, _Range.rangeTokens.tooltipTextFontLineHeight, _DatePickertokens.tokens.hintTooltipTextFontLineHeight, _Range.rangeTokens.tooltipContentLeftMargin, _DatePickertokens.tokens.hintTooltipContentLeftMargin, _Range.rangeTokens.tooltipArrowMaskWidth, _DatePickertokens.tokens.hintTooltipArrowMaskWidth, _Range.rangeTokens.tooltipArrowMaskHeight, _DatePickertokens.tokens.hintTooltipArrowMaskHeight, _Range.rangeTokens.tooltipArrowMaskImage, _DatePickertokens.tokens.hintTooltipArrowMaskImage, _Range.rangeTokens.tooltipArrowHeight, _DatePickertokens.tokens.hintTooltipArrowHeight, _Range.rangeTokens.tooltipArrowEdgeMargin, _DatePickertokens.tokens.hintTooltipArrowEdgeMargin, _Range.rangeTokens.tooltipArrowBackground, _DatePickertokens.tokens.hintTooltipArrowBackground, _Range.rangeTokens.textFieldHeight, _DatePickertokens.tokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _DatePickertokens.tokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _DatePickertokens.tokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _DatePickertokens.tokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _DatePickertokens.tokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _DatePickertokens.tokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _DatePickertokens.tokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _DatePickertokens.tokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _DatePickertokens.tokens.textFieldLineHeight, _Range.rangeTokens.helpersPadding, _DatePickertokens.tokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _DatePickertokens.tokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _DatePickertokens.tokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _DatePickertokens.tokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _DatePickertokens.tokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _DatePickertokens.tokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _DatePickertokens.tokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _DatePickertokens.tokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _DatePickertokens.tokens.textFieldRightContentMargin, _Range.rangeTokens.rightContentOpacityReadOnly, _DatePickertokens.tokens.rightContentOpacityReadOnly, _Range.rangeTokens.textFieldTextBeforeMargin, _DatePickertokens.tokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin, _DatePickertokens.tokens.textFieldTextAfterMargin, _Range.rangeTokens.backgroundReadOnly, _DatePickertokens.tokens.backgroundReadOnly, _Range.rangeTokens.dividerColorReadOnly, _DatePickertokens.tokens.dividerColorReadOnly, _Range.rangeTokens.dividerOpacityReadOnly, _DatePickertokens.tokens.dividerOpacityReadOnly, _Range.rangeTokens.textFieldDividerColorSuccess, _DatePickertokens.tokens.textFieldDividerColorSuccess, _Range.rangeTokens.textFieldDividerColorError, _DatePickertokens.tokens.textFieldDividerColorError, _Range.rangeTokens.textFieldDividerColorHover, _DatePickertokens.tokens.textFieldDividerColorHover, _Range.rangeTokens.textFieldDividerColorFocus, _DatePickertokens.tokens.textFieldDividerColorFocus, _Range.rangeTokens.textFieldColorReadOnly, _DatePickertokens.tokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _DatePickertokens.tokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly, _DatePickertokens.tokens.textFieldPlaceholderColorReadOnly);
 var base = (0, _styledcomponents.css)([
-    "display:inline-block;.",
+    "display:inline-block;",
+    "{.",
     ",.",
     "{width:inherit;}.",
-    "{display:grid;}&.",
-    "{width:100%;.",
+    "{display:grid;}}&.",
+    "{width:100%;",
+    "{.",
     ",",
-    "{width:100%;}}"
-], _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _Popover.popoverClasses.wrapper, _DatePickertokens.classes.datePickerstretched, _Popover.popoverClasses.root, StyledRange);
-var LeftHelper = _styledcomponents.default.div.withConfig({
-    displayName: "RangeDate.styles__LeftHelper",
-    componentId: "sc-24609633-2"
-})([
-    "color:var(",
-    ");&.",
-    "{color:var(",
-    ");}&.",
-    "{color:var(",
-    ");}"
-], _DatePickertokens.tokens.leftHelperColor, _DatePickertokens.classes.datePickerError, _DatePickertokens.tokens.leftHelperColorError, _DatePickertokens.classes.datePickerSuccess, _DatePickertokens.tokens.leftHelperColorSuccess);
+    "{width:100%;}}}"
+], StyledPopover, _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _Popover.popoverClasses.wrapper, _DatePickertokens.classes.datePickerstretched, StyledPopover, _Popover.popoverClasses.root, StyledRange);

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+var _styledcomponents = require("styled-components");
+var base = (0, _styledcomponents.css)([
+    ""
+]);

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+var _styledcomponents = require("styled-components");
+var base = (0, _styledcomponents.css)([
+    ""
+]);

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

@@ -10,10 +10,7 @@ Object.defineProperty(exports, "base", {
 });
 var _styledcomponents = require("styled-components");
 var _DatePickertokens = require("../../../DatePicker.tokens");
-var _RangeDatestyles = require("../../RangeDate.styles");
 var base = (0, _styledcomponents.css)([
     "&[readonly]{cursor:default;",
-    ":transparent;",
-    "{color:var(",
-    ");}}"
-], _DatePickertokens.tokens.textFieldBackgroundColorReadOnly, _RangeDatestyles.LeftHelper, _DatePickertokens.tokens.leftHelperColorReadOnly);
+    ":transparent;}"
+], _DatePickertokens.tokens.textFieldBackgroundColorReadOnly);

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

@@ -9,16 +9,6 @@ Object.defineProperty(exports, "base", {
     }
 });
 var _styledcomponents = require("styled-components");
-var _DatePickertokens = require("../../../DatePicker.tokens");
-var _RangeDatestyles = require("../../RangeDate.styles");
 var base = (0, _styledcomponents.css)([
-    "",
-    "{margin:var(",
-    ");font-family:var(",
-    ");font-size:var(",
-    ");font-style:var(",
-    ");font-weight:var(",
-    ");letter-spacing:var(",
-    ");line-height:var(",
-    ");}"
-], _RangeDatestyles.LeftHelper, _DatePickertokens.tokens.leftHelperOffset, _DatePickertokens.tokens.leftHelperFontFamily, _DatePickertokens.tokens.leftHelperFontSize, _DatePickertokens.tokens.leftHelperFontStyle, _DatePickertokens.tokens.leftHelperFontWeight, _DatePickertokens.tokens.leftHelperLetterSpacing, _DatePickertokens.tokens.leftHelperLineHeight);
+    ""
+]);

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

@@ -9,10 +9,6 @@ Object.defineProperty(exports, "base", {
     }
 });
 var _styledcomponents = require("styled-components");
-var _RangeDatestyles = require("../../RangeDate.styles");
-var _DatePickertokens = require("../../../DatePicker.tokens");
 var base = (0, _styledcomponents.css)([
-    "",
-    "{color:var(",
-    ");}"
-], _RangeDatestyles.LeftHelper, _DatePickertokens.tokens.leftHelperColor);
+    ""
+]);