@salutejs/plasma-new-hope 0.344.0-canary.2397.20370453452.0 → 0.344.0-canary.2398.20426736662.0

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

@@ -18,8 +18,7 @@ _export(exports, {
 });
 var classes = {
     withoutLabel: 'info-wrapper-without-label',
-    requiredAlignLeft: 'info-wrapper-required-align-left',
-    leftHelper: 'info-wrapper-left-helper'
+    requiredAlignLeft: 'info-wrapper-required-align-left'
 };
 var tokens = {
     /** Токены для label */ indicatorWrapperGap: '--plasma-info-wrapper-indicator-wrapper-gap',
@@ -32,11 +31,9 @@ var tokens = {
     labelLetterSpacing: '--plasma-info-wrapper-label-letter-spacing',
     labelLineHeight: '--plasma-info-wrapper-label-line-height',
     labelColor: '--plasma-info-wrapper-label-color',
-    labelColorReadOnly: '--plasma-info-wrapper-label-color-readonly',
     contentGap: '--plasma-info-wrapper-content-gap',
     titleCaptionOffset: '--plasma-info-wrapper-title-caption-offset',
     titleCaptionColor: '--plasma-info-wrapper-title-caption-color',
-    titleCaptionColorReadOnly: '--plasma-info-wrapper-title-caption-color-readonly',
     titleCaptionFontFamily: '--plasma-info-wrapper-title-caption-font-family',
     titleCaptionFontStyle: '--plasma-info-wrapper-title-caption-font-style',
     titleCaptionFontSize: '--plasma-info-wrapper-title-caption-font-size',
@@ -80,8 +77,6 @@ var tokens = {
     /** Токены для optional */ optionalColor: '--plasma-info-wrapper-optional-color',
     /** Токены для подписей снизу */ leftHelperColor: '--plasma-info-wrapper-left-helper-color',
     rightHelperColor: '--plasma-info-wrapper-right-helper-color',
-    leftHelperColorReadOnly: '--plasma-info-wrapper-left-helper-color-readonly',
-    rightHelperColorReadOnly: '--plasma-info-wrapper-right-helper-color-readonly',
     helpersPadding: '--plasma-info-wrapper-helpers-padding-top',
     helpersGap: '--plasma-info-wrapper-helpers-gap',
     leftHelperFontFamily: '--plasma-info-wrapper-left-helper-font-family',

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

@@ -27,6 +27,7 @@ var base = (0, _styledcomponents.css)([
     ");}",
     "{width:var(",
     ");height:var(",
+    ");margin:var(",
     ");}",
     "{font-family:var(",
     ");font-size:var(",
@@ -52,4 +53,4 @@ var base = (0, _styledcomponents.css)([
     ");letter-spacing:var(",
     ");line-height:var(",
     ");}"
-], _InformationWrapperstyles.Label, _InformationWrapperstyles.OptionalText, _InformationWrappertokens.tokens.labelFontFamily, _InformationWrappertokens.tokens.labelFontSize, _InformationWrappertokens.tokens.labelFontStyle, _InformationWrappertokens.tokens.labelFontWeight, _InformationWrappertokens.tokens.labelLetterSpacing, _InformationWrappertokens.tokens.labelLineHeight, _InformationWrapperstyles.HintWrapper, _InformationWrappertokens.tokens.hintMargin, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrapperstyles.HintTargetWrapper, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrapperstyles.TitleCaption, _InformationWrappertokens.tokens.titleCaptionFontFamily, _InformationWrappertokens.tokens.titleCaptionFontSize, _InformationWrappertokens.tokens.titleCaptionFontStyle, _InformationWrappertokens.tokens.titleCaptionFontWeight, _InformationWrappertokens.tokens.titleCaptionLetterSpacing, _InformationWrappertokens.tokens.titleCaptionLineHeight, _InformationWrapperstyles.Helpers, _InformationWrappertokens.tokens.helpersPadding, _InformationWrappertokens.tokens.helpersGap, _InformationWrapperstyles.LeftHelper, _InformationWrappertokens.tokens.leftHelperFontFamily, _InformationWrappertokens.tokens.leftHelperFontSize, _InformationWrappertokens.tokens.leftHelperFontStyle, _InformationWrappertokens.tokens.leftHelperFontWeight, _InformationWrappertokens.tokens.leftHelperLetterSpacing, _InformationWrappertokens.tokens.leftHelperLineHeight, _InformationWrapperstyles.RightHelper, _InformationWrappertokens.tokens.rightHelperFontFamily, _InformationWrappertokens.tokens.rightHelperFontSize, _InformationWrappertokens.tokens.rightHelperFontStyle, _InformationWrappertokens.tokens.rightHelperFontWeight, _InformationWrappertokens.tokens.rightHelperLetterSpacing, _InformationWrappertokens.tokens.rightHelperLineHeight);
+], _InformationWrapperstyles.Label, _InformationWrapperstyles.OptionalText, _InformationWrappertokens.tokens.labelFontFamily, _InformationWrappertokens.tokens.labelFontSize, _InformationWrappertokens.tokens.labelFontStyle, _InformationWrappertokens.tokens.labelFontWeight, _InformationWrappertokens.tokens.labelLetterSpacing, _InformationWrappertokens.tokens.labelLineHeight, _InformationWrapperstyles.HintWrapper, _InformationWrappertokens.tokens.hintMargin, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrapperstyles.HintTargetWrapper, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrappertokens.tokens.hintTargetSize, _InformationWrappertokens.tokens.hintMargin, _InformationWrapperstyles.TitleCaption, _InformationWrappertokens.tokens.titleCaptionFontFamily, _InformationWrappertokens.tokens.titleCaptionFontSize, _InformationWrappertokens.tokens.titleCaptionFontStyle, _InformationWrappertokens.tokens.titleCaptionFontWeight, _InformationWrappertokens.tokens.titleCaptionLetterSpacing, _InformationWrappertokens.tokens.titleCaptionLineHeight, _InformationWrapperstyles.Helpers, _InformationWrappertokens.tokens.helpersPadding, _InformationWrappertokens.tokens.helpersGap, _InformationWrapperstyles.LeftHelper, _InformationWrappertokens.tokens.leftHelperFontFamily, _InformationWrappertokens.tokens.leftHelperFontSize, _InformationWrappertokens.tokens.leftHelperFontStyle, _InformationWrappertokens.tokens.leftHelperFontWeight, _InformationWrappertokens.tokens.leftHelperLetterSpacing, _InformationWrappertokens.tokens.leftHelperLineHeight, _InformationWrapperstyles.RightHelper, _InformationWrappertokens.tokens.rightHelperFontFamily, _InformationWrappertokens.tokens.rightHelperFontSize, _InformationWrappertokens.tokens.rightHelperFontStyle, _InformationWrappertokens.tokens.rightHelperFontWeight, _InformationWrappertokens.tokens.rightHelperLetterSpacing, _InformationWrappertokens.tokens.rightHelperLineHeight);

package/dist/styled-components/cjs/components/LinkButton/LinkButton.js

@@ -144,6 +144,7 @@ var linkButtonRoot = function(Root) {
             href: disabled ? undefined : href,
             rel: target === '_blank' ? 'noopener noreferrer' : rel
         };
+        var hasContent = Boolean(txt || children || additionalContent || contentRight);
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: ref,
             view: view,
@@ -156,7 +157,11 @@ var linkButtonRoot = function(Root) {
         }, linkProps, rest), /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LoadWrap, {
             isLoading: !disabled && isLoading,
             style: _object_spread({}, loadingCustomOpacity)
-        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, null, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
+        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, {
+            hasContent: hasContent
+        }, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, {
+            hasContent: hasContent
+        }, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
     });
 };
 var linkButtonConfig = {

package/dist/styled-components/cjs/components/LinkButton/LinkButton.styles.js

@@ -93,14 +93,14 @@ var base = (0, _styledcomponents.css)([
 }));
 var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledAdditionalContent",
-    componentId: "sc-e83eddac-0"
+    componentId: "sc-f97b8dcf-0"
 })([
     "display:flex;align-items:center;margin:var(",
     ");"
 ], _LinkButtontokens.tokens.linkButtonAdditionalContentMargin);
 var LoadWrap = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-e83eddac-1"
+    componentId: "sc-f97b8dcf-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -110,13 +110,13 @@ var LoadWrap = _styledcomponents.default.div.withConfig({
 });
 var Loader = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-e83eddac-2"
+    componentId: "sc-f97b8dcf-2"
 })([
     "position:absolute;"
 ]);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-e83eddac-3"
+    componentId: "sc-f97b8dcf-3"
 })([
     "",
     ":var(",
@@ -126,7 +126,7 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _LinkButtontokens.tokens.linkButtonSpinnerSize, _Spinner.spinnerTokens.color, _LinkButtontokens.tokens.linkButtonSpinnerColor);
 var LinkButtonText = _styledcomponents.default.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-e83eddac-4"
+    componentId: "sc-f97b8dcf-4"
 })([
     "padding:var(",
     ");color:var(",
@@ -137,17 +137,23 @@ var LinkButtonText = _styledcomponents.default.span.withConfig({
 ], _LinkButtontokens.tokens.linkButtonTextPadding, _LinkButtontokens.tokens.linkButtonTextColor, (0, _mixins.applyEllipsis)(), _LinkButtontokens.tokens.linkButtonTextColorHover, _LinkButtontokens.tokens.linkButtonTextColorActive);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-e83eddac-5"
+    componentId: "sc-f97b8dcf-5"
 })([
     "line-height:0;color:var(",
-    ");margin:var(",
-    ");"
-], _LinkButtontokens.tokens.linkButtonIconColor, _LinkButtontokens.tokens.linkButtonLeftContentMargin);
+    ");margin:",
+    ";"
+], _LinkButtontokens.tokens.linkButtonIconColor, function(param) {
+    var hasContent = param.hasContent;
+    return hasContent ? "var(".concat(_LinkButtontokens.tokens.linkButtonLeftContentMargin, ")") : '0';
+});
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-e83eddac-6"
+    componentId: "sc-f97b8dcf-6"
 })([
     "line-height:0;color:var(",
-    ");margin:var(",
-    ");"
-], _LinkButtontokens.tokens.linkButtonIconColor, _LinkButtontokens.tokens.linkButtonRightContentMargin);
+    ");margin:",
+    ";"
+], _LinkButtontokens.tokens.linkButtonIconColor, function(param) {
+    var hasContent = param.hasContent;
+    return hasContent ? "var(".concat(_LinkButtontokens.tokens.linkButtonRightContentMargin, ")") : '0';
+});

package/dist/styled-components/cjs/components/Range/Range.js

@@ -17,27 +17,14 @@ _export(exports, {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-var _hooks = require("../../hooks");
-var _plasmacore = require("@salutejs/plasma-core");
 var _utils = require("../../utils");
 var _base = require("./variations/_size/base");
 var _base1 = require("./variations/_view/base");
-var _base2 = require("./variations/_hint-view/base");
-var _base3 = require("./variations/_hint-size/base");
-var _base4 = require("./variations/_disabled/base");
-var _base5 = require("./variations/_readonly/base");
+var _base2 = require("./variations/_disabled/base");
+var _base3 = require("./variations/_readonly/base");
 var _utils1 = require("./utils");
 var _Rangestyles = require("./Range.styles");
 var _Rangetokens = require("./Range.tokens");
-var _ui = require("./ui");
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -92,33 +79,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -161,28 +121,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 var rangeRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var className = _param.className, // controlled
-        firstValue = _param.firstValue, secondValue = _param.secondValue, firstValueError = _param.firstValueError, secondValueError = _param.secondValueError, firstValueSuccess = _param.firstValueSuccess, secondValueSuccess = _param.secondValueSuccess, firstPlaceholder = _param.firstPlaceholder, secondPlaceholder = _param.secondPlaceholder, // variations
-        appearance = _param.appearance, hasClearDivider = _param.hasClearDivider, 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, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredIndicatorPlacement = _param.requiredIndicatorPlacement, requiredIndicatorPlacement = _param_requiredIndicatorPlacement === void 0 ? 'right' : _param_requiredIndicatorPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? false : _param_hasRequiredIndicator, _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, // layout
-        label = _param.label, leftHelper = _param.leftHelper, titleCaption = _param.titleCaption, contentLeft = _param.contentLeft, contentRight = _param.contentRight, 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_dividerVariant = _param.dividerVariant, dividerVariant = _param_dividerVariant === void 0 ? 'dash' : _param_dividerVariant, dividerIcon = _param.dividerIcon, autoComplete = _param.autoComplete, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onSearchFirstValue = _param.onSearchFirstValue, onSearchSecondValue = _param.onSearchSecondValue, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
-            "className",
+        var autoComplete = _param.autoComplete, 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, _param_dividerVariant = _param.dividerVariant, dividerVariant = _param_dividerVariant === void 0 ? 'dash' : _param_dividerVariant, dividerIcon = _param.dividerIcon, firstValue = _param.firstValue, secondValue = _param.secondValue, 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 ? true : _param_hasRequiredIndicator, onChangeFirstValue = _param.onChangeFirstValue, onChangeSecondValue = _param.onChangeSecondValue, onSearchFirstValue = _param.onSearchFirstValue, onSearchSecondValue = _param.onSearchSecondValue, onFocusFirstTextfield = _param.onFocusFirstTextfield, onFocusSecondTextfield = _param.onFocusSecondTextfield, onBlurFirstTextfield = _param.onBlurFirstTextfield, onBlurSecondTextfield = _param.onBlurSecondTextfield, rest = _object_without_properties(_param, [
+            "autoComplete",
+            "label",
+            "leftHelper",
+            "contentLeft",
+            "contentRight",
+            "view",
+            "size",
+            "readOnly",
+            "disabled",
+            "dividerVariant",
+            "dividerIcon",
             "firstValue",
             "secondValue",
             "firstValueError",
@@ -191,31 +143,6 @@ var rangeRoot = function(Root) {
             "secondValueSuccess",
             "firstPlaceholder",
             "secondPlaceholder",
-            "appearance",
-            "hasClearDivider",
-            "view",
-            "size",
-            "readOnly",
-            "disabled",
-            "required",
-            "requiredIndicatorPlacement",
-            "hasRequiredIndicator",
-            "hintTrigger",
-            "hintText",
-            "hintView",
-            "hintSize",
-            "hintTargetIcon",
-            "hintTargetPlacement",
-            "hintPlacement",
-            "hintHasArrow",
-            "hintOffset",
-            "hintWidth",
-            "hintContentLeft",
-            "label",
-            "leftHelper",
-            "titleCaption",
-            "contentLeft",
-            "contentRight",
             "firstTextfieldContentLeft",
             "firstTextfieldContentRight",
             "secondTextfieldContentLeft",
@@ -224,9 +151,9 @@ var rangeRoot = function(Root) {
             "secondTextfieldTextBefore",
             "firstTextfieldTextAfter",
             "secondTextfieldTextAfter",
-            "dividerVariant",
-            "dividerIcon",
-            "autoComplete",
+            "required",
+            "requiredPlacement",
+            "hasRequiredIndicator",
             "onChangeFirstValue",
             "onChangeSecondValue",
             "onSearchFirstValue",
@@ -239,47 +166,17 @@ var rangeRoot = function(Root) {
         var rangeRef = (0, _react.useRef)(null);
         var firstTextFieldRef = (0, _react.useRef)(null);
         var secondTextFieldRef = (0, _react.useRef)(null);
-        var hintRef = (0, _react.useRef)(null);
-        var _useState = _sliced_to_array((0, _react.useState)(false), 2), isHintVisible = _useState[0], setIsHintVisible = _useState[1];
-        var noCaptionAndLabelClass = !label && !titleCaption ? _Rangetokens.classes.noCaptionAndLabel : undefined;
-        var clearClass = appearance === 'clear' ? _Rangetokens.classes.clear : undefined;
-        var clearDividerClass = hasClearDivider ? _Rangetokens.classes.clearDivider : undefined;
-        var clearOuterHintClass = clearClass && hintText && hintTargetPlacement === 'outer' ? _Rangetokens.classes.clearHasOuterHint : undefined;
+        var requiredPlacementClass = requiredPlacement === 'right' ? _Rangetokens.classes.requiredAlignRight : undefined;
         var rangeErrorClass = firstValueError && secondValueError ? _Rangetokens.classes.rangeError : undefined;
         var firstValueErrorClass = !rangeErrorClass && firstValueError ? _Rangetokens.classes.rangeValueError : undefined;
         var secondValueErrorClass = !rangeErrorClass && secondValueError ? _Rangetokens.classes.rangeValueError : undefined;
         var rangeSuccessClass = firstValueSuccess && secondValueSuccess ? _Rangetokens.classes.rangeSuccess : undefined;
         var firstValueSuccessClass = !rangeSuccessClass && firstValueSuccess ? _Rangetokens.classes.rangeValueSuccess : undefined;
         var secondValueSuccessClass = !rangeSuccessClass && secondValueSuccess ? _Rangetokens.classes.rangeValueSuccess : undefined;
-        var hintInnerRef = (0, _react.useRef)(null);
-        var hintForkRef = (0, _plasmacore.useForkRef)(hintRef, hintInnerRef);
         var handleChangeFirstValue = (0, _utils1.getChangeHandler)(onChangeFirstValue, disabled, readOnly);
         var handleChangeSecondValue = (0, _utils1.getChangeHandler)(onChangeSecondValue, disabled, readOnly);
         var handleSearchFirstValue = (0, _utils1.getSearchHandler)(onSearchFirstValue, disabled, readOnly);
         var handleSearchSecondValue = (0, _utils1.getSearchHandler)(onSearchSecondValue, disabled, readOnly);
-        var handleHintShow = function() {
-            return setIsHintVisible(true);
-        };
-        var handleHintHide = function() {
-            return setIsHintVisible(false);
-        };
-        var handleHintClick = function(event) {
-            var _hintInnerRef_current;
-            if (!hintText || hintTrigger !== 'click') {
-                return;
-            }
-            event.stopPropagation();
-            var targetIsPopover = event.target === hintInnerRef.current;
-            var rootHasTarget = (_hintInnerRef_current = hintInnerRef.current) === null || _hintInnerRef_current === void 0 ? void 0 : _hintInnerRef_current.contains(event.target);
-            if (!targetIsPopover && !rootHasTarget) {
-                setIsHintVisible(true);
-            }
-        };
-        (0, _hooks.useOutsideClick)(function() {
-            setIsHintVisible(false);
-        }, [
-            hintRef
-        ]);
         (0, _react.useImperativeHandle)(ref, function() {
             return {
                 firstTextField: function() {
@@ -307,39 +204,17 @@ var rangeRoot = function(Root) {
         ]);
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: rangeRef,
-            className: (0, _utils.cx)(clearClass, noCaptionAndLabelClass, className),
             view: view,
             size: size,
             disabled: disabled,
             readOnly: !disabled && readOnly
-        }, hintText && {
-            hintView: hintView,
-            hintSize: hintSize
-        }, rest), /*#__PURE__*/ _react.default.createElement(_ui.InformationWrapperUI, _object_spread({
-            className: (0, _utils.cx)(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass, clearOuterHintClass),
-            size: size,
-            label: label,
-            leftHelper: leftHelper,
-            titleCaption: titleCaption,
-            required: required,
-            requiredIndicatorPlacement: requiredIndicatorPlacement,
-            hasRequiredIndicator: hasRequiredIndicator
-        }, hintText && hintTargetPlacement === 'outer' ? {
-            hintText: hintText,
-            hintView: hintView,
-            hintSize: hintSize,
-            hintTrigger: hintTrigger,
-            hintTargetIcon: hintTargetIcon,
-            hintPlacement: hintPlacement,
-            hintHasArrow: hintHasArrow,
-            hintOffset: hintOffset,
-            hintWidth: hintWidth,
-            hintContentLeft: hintContentLeft
-        } : {
-            hintText: undefined
-        }), /*#__PURE__*/ _react.default.createElement(_Rangestyles.ContentWrapper, {
-            className: (0, _utils.cx)(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass)
-        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentLeft, null, contentLeft), /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
+        }, rest), label && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledIndicatorWrapper, null, /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledLabel, null, label), required && hasRequiredIndicator && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledIndicator, {
+            className: (0, _utils.cx)(_Rangetokens.classes.requiredOuterPlacement, requiredPlacementClass)
+        })), /*#__PURE__*/ _react.default.createElement(_Rangestyles.ContentWrapper, {
+            className: (0, _utils.cx)(rangeErrorClass, rangeSuccessClass)
+        }, !label && required && hasRequiredIndicator && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledIndicator, {
+            className: (0, _utils.cx)(requiredPlacementClass)
+        }), contentLeft && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentLeft, null, contentLeft), /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
             ref: firstTextFieldRef,
             className: (0, _utils.cx)(firstValueErrorClass, firstValueSuccessClass),
             value: firstValue,
@@ -356,8 +231,7 @@ var rangeRoot = function(Root) {
             onBlur: onBlurFirstTextfield,
             autoComplete: autoComplete,
             "data-error": firstValueError,
-            "data-success": firstValueSuccess,
-            hasDivider: hasClearDivider
+            "data-success": firstValueSuccess
         }), Divider, /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
             ref: secondTextFieldRef,
             className: (0, _utils.cx)(secondValueErrorClass, secondValueSuccessClass),
@@ -373,25 +247,10 @@ var rangeRoot = function(Root) {
             onSearch: handleSearchSecondValue,
             onFocus: onFocusSecondTextfield,
             onBlur: onBlurSecondTextfield,
-            autoComplete: autoComplete,
-            hasDivider: hasClearDivider
-        }), /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentRightWrapper, null, !label && hintText && hintTargetPlacement === 'inner' && /*#__PURE__*/ _react.default.createElement(_ui.HintComponent, {
-            ref: hintForkRef,
-            hintText: hintText,
-            hintTrigger: hintTrigger,
-            isHintVisible: isHintVisible,
-            hintTargetIcon: hintTargetIcon,
-            hintPlacement: hintPlacement,
-            hintHasArrow: hintHasArrow,
-            hintOffset: hintOffset,
-            hintWidth: hintWidth,
-            hintContentLeft: hintContentLeft,
-            size: size,
-            handleHintShow: handleHintShow,
-            handleHintHide: handleHintHide,
-            handleHintClick: handleHintClick,
-            withoutLabel: true
-        }), contentRight && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentRight, null, contentRight)))));
+            autoComplete: autoComplete
+        }), contentRight && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/ _react.default.createElement(_Rangestyles.LeftHelper, {
+            className: (0, _utils.cx)(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass)
+        }, leftHelper));
     });
 };
 var rangeConfig = {
@@ -406,25 +265,17 @@ var rangeConfig = {
         size: {
             css: _base.base
         },
-        hintView: {
-            css: _base2.base
-        },
-        hintSize: {
-            css: _base3.base
-        },
         disabled: {
-            css: _base4.base,
+            css: _base2.base,
             attrs: true
         },
         readOnly: {
-            css: _base5.base,
+            css: _base3.base,
             attrs: true
         }
     },
     defaults: {
         size: 'm',
-        view: 'default',
-        hintView: 'default',
-        hintSize: 'm'
+        view: 'default'
     }
 };

package/dist/styled-components/cjs/components/Range/Range.styles.js

@@ -12,21 +12,30 @@ _export(exports, {
     get ContentWrapper () {
         return ContentWrapper;
     },
+    get LeftHelper () {
+        return LeftHelper;
+    },
     get StyledContentLeft () {
         return StyledContentLeft;
     },
     get StyledContentRight () {
         return StyledContentRight;
     },
-    get StyledContentRightWrapper () {
-        return StyledContentRightWrapper;
-    },
     get StyledDivider () {
         return StyledDivider;
     },
+    get StyledIndicator () {
+        return StyledIndicator;
+    },
+    get StyledIndicatorWrapper () {
+        return StyledIndicatorWrapper;
+    },
     get StyledInput () {
         return StyledInput;
     },
+    get StyledLabel () {
+        return StyledLabel;
+    },
     get base () {
         return base;
     }
@@ -78,30 +87,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var mergedConfig = (0, _engines.mergeConfig)(_TextField.textFieldConfig);
 var TextField = (0, _engines.component)(mergedConfig);
-var StyledContentLeft = _styledcomponents.default.div.withConfig({
-    displayName: "Range.styles__StyledContentLeft",
-    componentId: "sc-bf206ffb-0"
-})([
-    "line-height:0;color:var(",
-    ");&:hover{color:var(",
-    ");}&:active{color:var(",
-    ");}"
-], _Rangetokens.tokens.contentSlotColor, _Rangetokens.tokens.contentSlotColorHover, _Rangetokens.tokens.contentSlotColorActive);
-var StyledContentRight = _styledcomponents.default.div.withConfig({
-    displayName: "Range.styles__StyledContentRight",
-    componentId: "sc-bf206ffb-1"
-})([
-    "color:var(",
-    ",var(",
-    "));&:hover{color:var(",
-    ",var(",
-    "));cursor:pointer;}&:active{color:var(",
-    ",var(",
-    "));}"
-], _Rangetokens.tokens.contentSlotRightColor, _Rangetokens.tokens.contentSlotColor, _Rangetokens.tokens.contentSlotRightColorHover, _Rangetokens.tokens.contentSlotColorHover, _Rangetokens.tokens.contentSlotRightColorActive, _Rangetokens.tokens.contentSlotColorActive);
 var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "Range.styles__StyledInput",
-    componentId: "sc-bf206ffb-2"
+    componentId: "sc-f22ebc20-0"
 })([
     "width:100%;",
     ":var(",
@@ -167,12 +155,6 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     ":var(",
     ");",
     ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
     ");&.",
     "{",
     ":var(",
@@ -206,28 +188,64 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     ");",
     ":var(",
     ");}"
-], _TextField.textFieldTokens.color, _Rangetokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _Rangetokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _Rangetokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColorFocus, _Rangetokens.tokens.textFieldClearPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _Rangetokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _Rangetokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _Rangetokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _Rangetokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Rangetokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderColor, _Rangetokens.tokens.textFieldBorderColor, _TextField.textFieldTokens.borderColorHover, _Rangetokens.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _Rangetokens.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.colorReadOnly, _Rangetokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _Rangetokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _Rangetokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _Rangetokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _Rangetokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Rangetokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Rangetokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Rangetokens.tokens.textFieldPadding, _TextField.textFieldTokens.leftContentMargin, _Rangetokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Rangetokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _Rangetokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _Rangetokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _Rangetokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _Rangetokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Rangetokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Rangetokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _Rangetokens.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _Rangetokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Rangetokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Rangetokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Rangetokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.dividerColorHover, _Rangetokens.tokens.textFieldDividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _Rangetokens.tokens.textFieldDividerColorFocus, _Rangetokens.classes.rangeValueError, _TextField.textFieldTokens.color, _Rangetokens.tokens.textFieldColorError, _Rangetokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _Rangetokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _Rangetokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Rangetokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _Rangetokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _Rangetokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _Rangetokens.tokens.textFieldBorderColorErrorFocus, _Rangetokens.classes.rangeValueSuccess, _TextField.textFieldTokens.color, _Rangetokens.tokens.textFieldColorSuccess, _Rangetokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _Rangetokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _Rangetokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Rangetokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _Rangetokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _Rangetokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _Rangetokens.tokens.textFieldBorderColorSuccessFocus);
+], _TextField.textFieldTokens.color, _Rangetokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _Rangetokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _Rangetokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _Rangetokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _Rangetokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _Rangetokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _Rangetokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Rangetokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderColor, _Rangetokens.tokens.textFieldBorderColor, _TextField.textFieldTokens.borderColorHover, _Rangetokens.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _Rangetokens.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.colorReadOnly, _Rangetokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _Rangetokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _Rangetokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _Rangetokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _Rangetokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Rangetokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Rangetokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Rangetokens.tokens.textFieldPadding, _TextField.textFieldTokens.leftContentMargin, _Rangetokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Rangetokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _Rangetokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _Rangetokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _Rangetokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _Rangetokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Rangetokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Rangetokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _Rangetokens.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _Rangetokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Rangetokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Rangetokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Rangetokens.tokens.textFieldTextAfterMargin, _Rangetokens.classes.rangeValueError, _TextField.textFieldTokens.color, _Rangetokens.tokens.textFieldColorError, _Rangetokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _Rangetokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _Rangetokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Rangetokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _Rangetokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _Rangetokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _Rangetokens.tokens.textFieldBorderColorErrorFocus, _Rangetokens.classes.rangeValueSuccess, _TextField.textFieldTokens.color, _Rangetokens.tokens.textFieldColorSuccess, _Rangetokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _Rangetokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _Rangetokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _Rangetokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _Rangetokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _Rangetokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _Rangetokens.tokens.textFieldBorderColorSuccessFocus);
 var base = (0, _styledcomponents.css)([
     "width:fit-content;"
 ]);
+var StyledLabel = _styledcomponents.default.label.withConfig({
+    displayName: "Range.styles__StyledLabel",
+    componentId: "sc-f22ebc20-1"
+})([
+    ""
+]);
+var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Range.styles__StyledIndicatorWrapper",
+    componentId: "sc-f22ebc20-2"
+})([
+    "position:relative;display:inline-flex;align-items:center;"
+]);
+var StyledIndicator = _styledcomponents.default.div.withConfig({
+    displayName: "Range.styles__StyledIndicator",
+    componentId: "sc-f22ebc20-3"
+})([
+    "position:absolute;border-radius:50%;"
+]);
+var LeftHelper = _styledcomponents.default.div.withConfig({
+    displayName: "Range.styles__LeftHelper",
+    componentId: "sc-f22ebc20-4"
+})([
+    ""
+]);
 var ContentWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Range.styles__ContentWrapper",
-    componentId: "sc-bf206ffb-3"
+    componentId: "sc-f22ebc20-5"
 })([
-    "display:flex;align-items:center;position:relative;&:before{content:'';position:absolute;inset:0;z-index:-1;}&.",
-    ".",
-    "{&:before{content:'';position:absolute;top:unset;left:0;right:0;bottom:0;z-index:-1;height:1px;box-shadow:unset;background:var(",
-    ");}}"
-], _Rangetokens.classes.clear, _Rangetokens.classes.clearDivider, _Rangetokens.tokens.clearDividerColor);
+    "display:flex;align-items:center;position:relative;&:before{content:'';position:absolute;inset:0;z-index:-1;}"
+]);
 var StyledDivider = _styledcomponents.default.div.withConfig({
     displayName: "Range.styles__StyledDivider",
-    componentId: "sc-bf206ffb-4"
+    componentId: "sc-f22ebc20-6"
 })([
     ""
 ]);
-var StyledContentRightWrapper = _styledcomponents.default.div.withConfig({
-    displayName: "Range.styles__StyledContentRightWrapper",
-    componentId: "sc-bf206ffb-5"
+var StyledContentLeft = _styledcomponents.default.div.withConfig({
+    displayName: "Range.styles__StyledContentLeft",
+    componentId: "sc-f22ebc20-7"
 })([
-    "display:flex;align-items:center;flex-direction:row-reverse;"
-]);
+    "line-height:0;color:var(",
+    ");&:hover{color:var(",
+    ");}&:active{color:var(",
+    ");}"
+], _Rangetokens.tokens.contentSlotColor, _Rangetokens.tokens.contentSlotColorHover, _Rangetokens.tokens.contentSlotColorActive);
+var StyledContentRight = _styledcomponents.default.div.withConfig({
+    displayName: "Range.styles__StyledContentRight",
+    componentId: "sc-f22ebc20-8"
+})([
+    "color:var(",
+    ",var(",
+    "));&:hover{color:var(",
+    ",var(",
+    "));cursor:pointer;}&:active{color:var(",
+    ",var(",
+    "));}"
+], _Rangetokens.tokens.contentSlotRightColor, _Rangetokens.tokens.contentSlotColor, _Rangetokens.tokens.contentSlotRightColorHover, _Rangetokens.tokens.contentSlotColorHover, _Rangetokens.tokens.contentSlotRightColorActive, _Rangetokens.tokens.contentSlotColorActive);