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

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

@@ -1,11 +1,3 @@
-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, {
@@ -19,33 +11,6 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-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] : {};
@@ -88,42 +53,29 @@ 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);
-}
-import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { useOutsideClick } from "../../hooks";
-import { useForkRef } from "@salutejs/plasma-core";
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { cx } from "../../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
-import { base as hintViewCSS } from "./variations/_hint-view/base";
-import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as readOnlyCSS } from "./variations/_readonly/base";
 import { getChangeHandler, getSearchHandler } from "./utils";
-import { ContentWrapper, StyledContentLeft, StyledContentRight, StyledContentRightWrapper, StyledDivider, StyledInput, base } from "./Range.styles";
+import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledIndicator, StyledIndicatorWrapper, StyledInput, StyledLabel, base } from "./Range.styles";
 import { classes } from "./Range.tokens";
-import { HintComponent, InformationWrapperUI } from "./ui";
 export var rangeRoot = function(Root) {
     return /*#__PURE__*/ 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",
@@ -132,31 +84,6 @@ export 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",
@@ -165,9 +92,9 @@ export var rangeRoot = function(Root) {
             "secondTextfieldTextBefore",
             "firstTextfieldTextAfter",
             "secondTextfieldTextAfter",
-            "dividerVariant",
-            "dividerIcon",
-            "autoComplete",
+            "required",
+            "requiredPlacement",
+            "hasRequiredIndicator",
             "onChangeFirstValue",
             "onChangeSecondValue",
             "onSearchFirstValue",
@@ -180,47 +107,17 @@ export var rangeRoot = function(Root) {
         var rangeRef = useRef(null);
         var firstTextFieldRef = useRef(null);
         var secondTextFieldRef = useRef(null);
-        var hintRef = useRef(null);
-        var _useState = _sliced_to_array(useState(false), 2), isHintVisible = _useState[0], setIsHintVisible = _useState[1];
-        var noCaptionAndLabelClass = !label && !titleCaption ? classes.noCaptionAndLabel : undefined;
-        var clearClass = appearance === 'clear' ? classes.clear : undefined;
-        var clearDividerClass = hasClearDivider ? classes.clearDivider : undefined;
-        var clearOuterHintClass = clearClass && hintText && hintTargetPlacement === 'outer' ? classes.clearHasOuterHint : undefined;
+        var requiredPlacementClass = requiredPlacement === 'right' ? classes.requiredAlignRight : undefined;
         var rangeErrorClass = firstValueError && secondValueError ? classes.rangeError : undefined;
         var firstValueErrorClass = !rangeErrorClass && firstValueError ? classes.rangeValueError : undefined;
         var secondValueErrorClass = !rangeErrorClass && secondValueError ? classes.rangeValueError : undefined;
         var rangeSuccessClass = firstValueSuccess && secondValueSuccess ? classes.rangeSuccess : undefined;
         var firstValueSuccessClass = !rangeSuccessClass && firstValueSuccess ? classes.rangeValueSuccess : undefined;
         var secondValueSuccessClass = !rangeSuccessClass && secondValueSuccess ? classes.rangeValueSuccess : undefined;
-        var hintInnerRef = useRef(null);
-        var hintForkRef = useForkRef(hintRef, hintInnerRef);
         var handleChangeFirstValue = getChangeHandler(onChangeFirstValue, disabled, readOnly);
         var handleChangeSecondValue = getChangeHandler(onChangeSecondValue, disabled, readOnly);
         var handleSearchFirstValue = getSearchHandler(onSearchFirstValue, disabled, readOnly);
         var handleSearchSecondValue = 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);
-            }
-        };
-        useOutsideClick(function() {
-            setIsHintVisible(false);
-        }, [
-            hintRef
-        ]);
         useImperativeHandle(ref, function() {
             return {
                 firstTextField: function() {
@@ -248,39 +145,17 @@ export var rangeRoot = function(Root) {
         ]);
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: rangeRef,
-            className: cx(clearClass, noCaptionAndLabelClass, className),
             view: view,
             size: size,
             disabled: disabled,
             readOnly: !disabled && readOnly
-        }, hintText && {
-            hintView: hintView,
-            hintSize: hintSize
-        }, rest), /*#__PURE__*/ React.createElement(InformationWrapperUI, _object_spread({
-            className: 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.createElement(ContentWrapper, {
-            className: cx(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass)
-        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
+        }, rest), label && /*#__PURE__*/ React.createElement(StyledIndicatorWrapper, null, /*#__PURE__*/ React.createElement(StyledLabel, null, label), required && hasRequiredIndicator && /*#__PURE__*/ React.createElement(StyledIndicator, {
+            className: cx(classes.requiredOuterPlacement, requiredPlacementClass)
+        })), /*#__PURE__*/ React.createElement(ContentWrapper, {
+            className: cx(rangeErrorClass, rangeSuccessClass)
+        }, !label && required && hasRequiredIndicator && /*#__PURE__*/ React.createElement(StyledIndicator, {
+            className: cx(requiredPlacementClass)
+        }), contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
             ref: firstTextFieldRef,
             className: cx(firstValueErrorClass, firstValueSuccessClass),
             value: firstValue,
@@ -297,8 +172,7 @@ export var rangeRoot = function(Root) {
             onBlur: onBlurFirstTextfield,
             autoComplete: autoComplete,
             "data-error": firstValueError,
-            "data-success": firstValueSuccess,
-            hasDivider: hasClearDivider
+            "data-success": firstValueSuccess
         }), Divider, /*#__PURE__*/ React.createElement(StyledInput, {
             ref: secondTextFieldRef,
             className: cx(secondValueErrorClass, secondValueSuccessClass),
@@ -314,25 +188,10 @@ export var rangeRoot = function(Root) {
             onSearch: handleSearchSecondValue,
             onFocus: onFocusSecondTextfield,
             onBlur: onBlurSecondTextfield,
-            autoComplete: autoComplete,
-            hasDivider: hasClearDivider
-        }), /*#__PURE__*/ React.createElement(StyledContentRightWrapper, null, !label && hintText && hintTargetPlacement === 'inner' && /*#__PURE__*/ React.createElement(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.createElement(StyledContentRight, null, contentRight)))));
+            autoComplete: autoComplete
+        }), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
+            className: cx(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass)
+        }, leftHelper));
     });
 };
 export var rangeConfig = {
@@ -347,12 +206,6 @@ export var rangeConfig = {
         size: {
             css: sizeCSS
         },
-        hintView: {
-            css: hintViewCSS
-        },
-        hintSize: {
-            css: hintSizeCSS
-        },
         disabled: {
             css: disabledCSS,
             attrs: true
@@ -364,8 +217,6 @@ export var rangeConfig = {
     },
     defaults: {
         size: 'm',
-        view: 'default',
-        hintView: 'default',
-        hintSize: 'm'
+        view: 'default'
     }
 };

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

@@ -5,31 +5,10 @@ import { textFieldConfig, textFieldTokens } from "../TextField";
 import { classes, tokens } from "./Range.tokens";
 var mergedConfig = mergeConfig(textFieldConfig);
 var TextField = component(mergedConfig);
-export var StyledContentLeft = styled.div.withConfig({
-    displayName: "Range.styles__StyledContentLeft",
-    componentId: "sc-bf206ffb-0"
-})([
-    "line-height:0;color:var(",
-    ");&:hover{color:var(",
-    ");}&:active{color:var(",
-    ");}"
-], tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
-export var StyledContentRight = styled.div.withConfig({
-    displayName: "Range.styles__StyledContentRight",
-    componentId: "sc-bf206ffb-1"
-})([
-    "color:var(",
-    ",var(",
-    "));&:hover{color:var(",
-    ",var(",
-    "));cursor:pointer;}&:active{color:var(",
-    ",var(",
-    "));}"
-], tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 // NOTE: переопределение токенов TextField
 export var StyledInput = styled(TextField).withConfig({
     displayName: "Range.styles__StyledInput",
-    componentId: "sc-bf206ffb-2"
+    componentId: "sc-f22ebc20-0"
 })([
     "width:100%;",
     ":var(",
@@ -95,12 +74,6 @@ export var StyledInput = styled(TextField).withConfig({
     ":var(",
     ");",
     ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
-    ");",
-    ":var(",
     ");&.",
     "{",
     ":var(",
@@ -134,28 +107,64 @@ export var StyledInput = styled(TextField).withConfig({
     ");",
     ":var(",
     ");}"
-], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.clearPlaceholderColorFocus, tokens.textFieldClearPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.dividerColorHover, tokens.textFieldDividerColorHover, textFieldTokens.dividerColorFocus, tokens.textFieldDividerColorFocus, classes.rangeValueError, textFieldTokens.color, tokens.textFieldColorError, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueSuccess, textFieldTokens.color, tokens.textFieldColorSuccess, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
+], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.rangeValueError, textFieldTokens.color, tokens.textFieldColorError, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueSuccess, textFieldTokens.color, tokens.textFieldColorSuccess, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
 export var base = css([
     "width:fit-content;"
 ]);
+export var StyledLabel = styled.label.withConfig({
+    displayName: "Range.styles__StyledLabel",
+    componentId: "sc-f22ebc20-1"
+})([
+    ""
+]);
+export var StyledIndicatorWrapper = styled.div.withConfig({
+    displayName: "Range.styles__StyledIndicatorWrapper",
+    componentId: "sc-f22ebc20-2"
+})([
+    "position:relative;display:inline-flex;align-items:center;"
+]);
+export var StyledIndicator = styled.div.withConfig({
+    displayName: "Range.styles__StyledIndicator",
+    componentId: "sc-f22ebc20-3"
+})([
+    "position:absolute;border-radius:50%;"
+]);
+export var LeftHelper = styled.div.withConfig({
+    displayName: "Range.styles__LeftHelper",
+    componentId: "sc-f22ebc20-4"
+})([
+    ""
+]);
 export var ContentWrapper = styled.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(",
-    ");}}"
-], classes.clear, classes.clearDivider, tokens.clearDividerColor);
+    "display:flex;align-items:center;position:relative;&:before{content:'';position:absolute;inset:0;z-index:-1;}"
+]);
 export var StyledDivider = styled.div.withConfig({
     displayName: "Range.styles__StyledDivider",
-    componentId: "sc-bf206ffb-4"
+    componentId: "sc-f22ebc20-6"
 })([
     ""
 ]);
-export var StyledContentRightWrapper = styled.div.withConfig({
-    displayName: "Range.styles__StyledContentRightWrapper",
-    componentId: "sc-bf206ffb-5"
+export var StyledContentLeft = styled.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(",
+    ");}"
+], tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
+export var StyledContentRight = styled.div.withConfig({
+    displayName: "Range.styles__StyledContentRight",
+    componentId: "sc-f22ebc20-8"
+})([
+    "color:var(",
+    ",var(",
+    "));&:hover{color:var(",
+    ",var(",
+    "));cursor:pointer;}&:active{color:var(",
+    ",var(",
+    "));}"
+], tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);

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

@@ -1,15 +1,10 @@
 export var classes = {
-    rangeInformationWrapper: 'range-information-wrapper',
     rangeError: 'range-error',
     rangeValueError: 'range-value-error',
     rangeSuccess: 'range-success',
     rangeValueSuccess: 'range-value-success',
     requiredAlignRight: 'required-align-right',
-    requiredOuterPlacement: 'required-placement-outer',
-    noCaptionAndLabel: 'range-no-caption-label',
-    clear: 'range-clear',
-    clearDivider: 'range-clear-divider',
-    clearHasOuterHint: 'range-clear-has-outer-hint'
+    requiredOuterPlacement: 'required-placement-outer'
 };
 export var tokens = {
     background: '--plasma-range-background',
@@ -23,8 +18,7 @@ export var tokens = {
     borderColorSuccess: '--plasma-range-border-color-success',
     borderColorReadOnly: '--plasma-range-border-color-readonly',
     shadow: '--plasma-range-shadow',
-    /** Токены разделителя */ clearDividerColor: '--plasma-range-clear__divider-color',
-    dividerColor: '--plasma-range__divider-color',
+    /** Токены разделителя */ dividerColor: '--plasma-range__divider-color',
     dividerColorReadOnly: '--plasma-range__divider-color-readonly',
     dividerOpacityReadOnly: '--plasma-range__divider-opacity-readonly',
     dividerPadding: '--plasma-range__divider-padding',
@@ -40,94 +34,44 @@ export var tokens = {
     contentSlotColor: '--plasma-textfield-content-slot-color',
     contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
     contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
-    contentSlotColorSuccess: '--plasma-textfield-content-slot-color-success',
-    contentSlotColorSuccessHover: '--plasma-textfield-content-slot-color-success-hover',
-    contentSlotColorSuccessActive: '--plasma-textfield-content-slot-color-success-active',
-    contentSlotColorError: '--plasma-textfield-content-slot-color-error',
-    contentSlotColorErrorHover: '--plasma-textfield-content-slot-color-error-hover',
-    contentSlotColorErrorActive: '--plasma-textfield-content-slot-color-error-active',
     contentSlotRightColor: '--plasma-textfield-content-right-slot-color',
     contentSlotRightColorHover: '--plasma-textfield-content-right-slot-color-hover',
     contentSlotRightColorActive: '--plasma-textfield-content-right-slot-color-active',
-    indicatorWrapperGap: '--plasma-range-info-wrapper-indicator-wrapper-gap',
-    labelWrapperOffset: '--plasma-range-info-wrapper-label-wrapper-offset',
-    labelWrapperTitleCaptionOffset: '--plasma-range-info-wrapper-label-wrapper-title-caption-offset',
-    labelFontFamily: '--plasma-range-info-wrapper-label-font-family',
-    labelFontStyle: '--plasma-range-info-wrapper-label-font-style',
-    labelFontSize: '--plasma-range-info-wrapper-label-font-size',
-    labelFontWeight: '--plasma-range-info-wrapper-label-font-weight',
-    labelLetterSpacing: '--plasma-range-info-wrapper-label-letter-spacing',
-    labelLineHeight: '--plasma-range-info-wrapper-label-line-height',
-    labelColor: '--plasma-range-info-wrapper-label-color',
-    contentGap: '--plasma-range-info-wrapper-content-gap',
-    titleCaptionOffset: '--plasma-range-info-wrapper-title-caption-offset',
-    titleCaptionColor: '--plasma-range-info-wrapper-title-caption-color',
-    titleCaptionFontFamily: '--plasma-range-info-wrapper-title-caption-font-family',
-    titleCaptionFontStyle: '--plasma-range-info-wrapper-title-caption-font-style',
-    titleCaptionFontSize: '--plasma-range-info-wrapper-title-caption-font-size',
-    titleCaptionFontWeight: '--plasma-range-info-wrapper-title-caption-font-weight',
-    titleCaptionLetterSpacing: '--plasma-range-info-wrapper-title-caption-letter-spacing',
-    titleCaptionLineHeight: '--plasma-range-info-wrapper-title-caption-line-height',
-    /** Токены для tooltip */ hintMargin: '--plasma-range-info-wrapper-hint-margin',
-    hintTargetSize: '--plasma-range-info-wrapper-hint-target-size',
-    hintCustomIconTargetSize: '--plasma-range-info-wrapper-hint-custom-icon-target-size',
-    hintIconColor: '--plasma-range-info-wrapper-hint-icon-color',
-    hintWithoutLabelPlacementOffset: '--plasma-range-info-wrapper-hint-without-label-placement-offset',
-    hintPlacementInnerMargin: '--plasma-range-info-wrapper-hint-placement-inner-offset',
-    tooltipBackgroundColor: '--plasma-range-info-wrapper-tooltip-background-color',
-    tooltipBoxShadow: '--plasma-range-info-wrapper-tooltip-box-shadow',
-    tooltipColor: '--plasma-range-info-wrapper-tooltip-color',
-    tooltipPaddingTop: '--plasma-range-info-wrapper-tooltip-padding-top',
-    tooltipPaddingRight: '--plasma-range-info-wrapper-tooltip-padding-right',
-    tooltipPaddingBottom: '--plasma-range-info-wrapper-tooltip-padding-bottom',
-    tooltipPaddingLeft: '--plasma-range-info-wrapper-tooltip-padding-left',
-    tooltipMinHeight: '--plasma-range-info-wrapper-tooltip-min-height',
-    tooltipBorderRadius: '--plasma-range-info-wrapper-tooltip-border-radius',
-    tooltipTextFontFamily: '--plasma-range-info-wrapper-tooltip-text-font-family',
-    tooltipTextFontSize: '--plasma-range-info-wrapper-tooltip-text-font-size',
-    tooltipTextFontStyle: '--plasma-range-info-wrapper-tooltip-text-font-style',
-    tooltipTextFontWeight: '--plasma-range-info-wrapper-tooltip-text-font-weight',
-    tooltipTextFontLetterSpacing: '--plasma-range-info-wrapper-tooltip-text-font-letter-spacing',
-    tooltipTextFontLineHeight: '--plasma-range-info-wrapper-tooltip-text-font-line-height',
-    tooltipContentLeftMargin: '--plasma-range-info-wrapper-tooltip-content-left-margin',
-    tooltipArrowMaskWidth: '--plasma-range-info-wrapper-tooltip-arrow-mask-width',
-    tooltipArrowMaskHeight: '--plasma-range-info-wrapper-tooltip-arrow-mask-height',
-    tooltipArrowMaskImage: '--plasma-range-info-wrapper-tooltip-arrow-mask-image',
-    tooltipArrowHeight: '--plasma-range-info-wrapper-tooltip-arrow-height',
-    tooltipArrowEdgeMargin: '--plasma-range-info-wrapper-tooltip-arrow-edge-margin',
-    tooltipArrowBackground: '--plasma-range-info-wrapper-tooltip-arrow-background',
-    /** Токены для required indicator */ indicatorColor: '--plasma-range-info-wrapper-indicator-color',
-    indicatorSizeInner: '--plasma-range-info-wrapper-indicator-size-inner',
-    indicatorSizeOuter: '--plasma-range-info-wrapper-indicator-size-outer',
-    indicatorMarginTop: '--plasma-range-info-wrapper-indicator-margin-top',
-    indicatorOuterLeft: '--plasma-range-info-wrapper-indicator-outer-left',
-    indicatorWithoutLabelInner: '--plasma-range-info-wrapper-indicator-without-label-inner',
-    indicatorWithoutLabelInnerLeft: '--plasma-range-info-wrapper-indicator-without-label-inner-left',
-    indicatorWithoutLabelOuterHint: '--plasma-range-info-wrapper-indicator-without-label-outer-hint',
-    /** Токены для подписей снизу */ leftHelperColor: '--plasma-range-info-wrapper-left-helper-color',
-    leftHelperColorError: '--plasma-range-info-wrapper-left-helper--error',
-    leftHelperColorSuccess: '--plasma-range-info-wrapper-left-helper--success',
-    helpersPadding: '--plasma-range-info-wrapper-helpers-padding-top',
-    helpersGap: '--plasma-range-info-wrapper-helpers-gap',
-    leftHelperFontFamily: '--plasma-range-info-wrapper-left-helper-font-family',
-    leftHelperFontStyle: '--plasma-range-info-wrapper-left-helper-font-style',
-    leftHelperFontSize: '--plasma-range-info-wrapper-left-helper-font-size',
-    leftHelperFontWeight: '--plasma-range-info-wrapper-left-helper-font-weight',
-    leftHelperLetterSpacing: '--plasma-range-info-wrapper-left-helper-letter-spacing',
-    leftHelperLineHeight: '--plasma-range-info-wrapper-left-helper-line-height',
+    /** Токены лейбла */ labelColor: '--plasma-range__label-color',
+    labelColorReadOnly: '--plasma-range__label-color-readonly',
+    labelOffset: '--plasma-range__label-offset',
+    labelFontFamily: '--plasma-range__label-font-family',
+    labelFontStyle: '--plasma-range__label-font-style',
+    labelFontSize: '--plasma-range__label-font-size',
+    labelFontWeight: '--plasma-range__label-font-weight',
+    labelLetterSpacing: '--plasma-range__label-letter-spacing',
+    labelLineHeight: '--plasma-range__label-line-height',
+    /** Токены индикатора */ indicatorColor: '--plasma-range__indicator-color',
+    indicatorSize: '--plasma-range__indicator-size',
+    indicatorSizeOuter: '--plasma-range__indicator-size-outer',
+    indicatorPlacement: '--plasma-range__indicator-placement',
+    indicatorPlacementRight: '--plasma-range__indicator-placement-right',
+    indicatorOuterPlacement: '--plasma-range__indicator-placement-outer',
+    indicatorOuterPlacementRight: '--plasma-range__indicator-placement-outer-right',
+    /** Токены вспомогательного текста */ leftHelperColor: '--plasma-range__left-helper-color',
+    leftHelperColorReadOnly: '--plasma-range__left-helper-color-readonly',
+    leftHelperOffset: '--plasma-range__left-helper-offset',
+    leftHelperColorError: '--plasma-range__left-helper-color-error',
+    leftHelperColorSuccess: '--plasma-range__left-helper-color-success',
+    leftHelperFontFamily: '--plasma-range__left-helper-font-family',
+    leftHelperFontStyle: '--plasma-range__left-helper-font-style',
+    leftHelperFontSize: '--plasma-range__left-helper-font-size',
+    leftHelperFontWeight: '--plasma-range__left-helper-font-weight',
+    leftHelperLetterSpacing: '--plasma-range__left-helper-letter-spacing',
+    leftHelperLineHeight: '--plasma-range__left-helper-line-height',
     /** Прозрачность для всего компонента в состоянии disabled */ disabledOpacity: '--plasma-range-disabled-opacity',
     readOnlyOpacity: '--plasma-range-readonly-opacity',
-    labelColorReadOnly: '--plasma-range-info-wrapper-label-color-readonly',
-    titleCaptionColorReadOnly: '--plasma-range-info-wrapper-title-caption-color-readonly',
-    leftHelperColorReadOnly: '--plasma-range-info-wrapper-left-helper-color-readonly',
-    rightHelperColorReadOnly: '--plasma-range-info-wrapper-right-helper-color-readonly',
     /** Цвет обводки поля ввода при фокусе */ focusColor: '--plasma-range-focus-color',
     /** Токены полей ввода */ textFieldColor: '--plasma-range-textfield-color',
     textFieldColorError: '--plasma-range-textfield-color-error',
     textFieldColorSuccess: '--plasma-range-textfield-color-success',
     textFieldFocusColor: '--plasma-range-textfield-focus-color',
     textFieldPlaceholderColor: '--plasma-range-textfield-placeholder-color',
-    textFieldClearPlaceholderColorFocus: '--plasma-range-textfield-clear-placeholder-color-focus',
     textFieldCaretColor: '--plasma-range-textfield-caret-color',
     textFieldBackgroundColor: '--plasma-range-textfield-background-color',
     textFieldBackgroundColorHover: '--plasma-range-textfield-background-color-hover',
@@ -167,9 +111,5 @@ export var tokens = {
     textFieldTextBeforeColor: '--plasma-range-textfield__before-text-color',
     textFieldTextAfterColor: '--plasma-range-textfield__after-text-color',
     textFieldTextBeforeMargin: '--plasma-range-textfield__before-text-margin',
-    textFieldTextAfterMargin: '--plasma-range-textfield__after-text-margin',
-    textFieldDividerColorSuccess: '--plasma-range-textfield__divider-color-success',
-    textFieldDividerColorError: '--plasma-range-textfield__divider-color-error',
-    textFieldDividerColorHover: '--plasma-range-textfield__divider-color-hover',
-    textFieldDividerColorFocus: '--plasma-range-textfield__divider-color-focus'
+    textFieldTextAfterMargin: '--plasma-range-textfield__after-text-margin'
 };

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

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { tokens } from "../../Range.tokens";
-import { ContentWrapper, StyledContentLeft, StyledContentRight, StyledDivider } from "../../Range.styles";
+import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledLabel } from "../../Range.styles";
 export var base = css([
     "&[readonly]{cursor:default;",
     "{position:relative;box-shadow:none;background:transparent;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
@@ -9,6 +9,10 @@ export var base = css([
     ");background:var(",
     ");opacity:var(",
     ");z-index:-1;}}",
+    "{display:block;color:var(",
+    ");}",
+    "{color:var(",
+    ");}",
     "{color:var(",
     ");opacity:var(",
     ");}",
@@ -18,4 +22,4 @@ export var base = css([
     ");cursor:default;}}",
     "{opacity:var(",
     ");pointer-events:none;}}"
-], ContentWrapper, tokens.borderRadius, tokens.borderWidth, tokens.borderColorReadOnly, tokens.backgroundReadOnly, tokens.readOnlyOpacity, StyledDivider, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly, tokens.textFieldColorReadOnly, StyledContentRight, tokens.rightContentOpacityReadOnly);
+], ContentWrapper, tokens.borderRadius, tokens.borderWidth, tokens.borderColorReadOnly, tokens.backgroundReadOnly, tokens.readOnlyOpacity, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledDivider, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly, tokens.textFieldColorReadOnly, StyledContentRight, tokens.rightContentOpacityReadOnly);