@salutejs/plasma-new-hope 0.344.0-canary.2400.20429488881.0 → 0.344.0-canary.2401.20453535823.0

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

@@ -141,6 +141,7 @@ export var tokens = {
     textFieldTitleCaptionLetterSpacing: '--plasma-select-textfield-title-caption-letter-spacing',
     textFieldTitleCaptionLineHeight: '--plasma-select-textfield-title-caption-line-height',
     textFieldLeftHelperColor: '--plasma-select-textfield-left-helper-color',
+    textFieldLeftHelperColorFocus: '--plasma-select-textfield-left-helper-color-focus',
     textFieldLeftHelperColorReadOnly: '--plasma-select-textfield__left-helper-color-readonly',
     textFieldLeftHelperOffset: '--plasma-select-textfield-left-helper-offset',
     textFieldLeftHelperFontFamily: '--plasma-select-textfield-left-helper-font-family',

package/dist/styled-components/es/components/Select/ui/Target/Target.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
 import { Button, Textfield } from "./ui";
 export var Target = /*#__PURE__*/ forwardRef(function(param, ref) {
-    var value = param.value, opened = param.opened, valueToItemMap = param.valueToItemMap, label = param.label, placeholder = param.placeholder, onKeyDown = param.onKeyDown, labelPlacement = param.labelPlacement, size = param.size, contentLeft = param.contentLeft, disabled = param.disabled, readOnly = param.readOnly, renderValue = param.renderValue, selectProps = param.selectProps, inputWrapperRef = param.inputWrapperRef, multiselect = param.multiselect, view = param.view, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, isTargetAmount = param.isTargetAmount, onChange = param.onChange, chipView = param.chipView, separator = param.separator, requiredProps = param.requiredProps, hintProps = param.hintProps;
+    var value = param.value, opened = param.opened, valueToItemMap = param.valueToItemMap, label = param.label, placeholder = param.placeholder, onKeyDown = param.onKeyDown, labelPlacement = param.labelPlacement, size = param.size, contentLeft = param.contentLeft, contentRight = param.contentRight, disabled = param.disabled, readOnly = param.readOnly, renderValue = param.renderValue, selectProps = param.selectProps, inputWrapperRef = param.inputWrapperRef, multiselect = param.multiselect, view = param.view, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, isTargetAmount = param.isTargetAmount, onChange = param.onChange, chipView = param.chipView, separator = param.separator, requiredProps = param.requiredProps, hintProps = param.hintProps;
     var buttonRef = useForkRef(ref, inputWrapperRef);
     if (selectProps.renderTarget) {
         return /*#__PURE__*/ React.createElement("div", {
@@ -38,6 +38,7 @@ export var Target = /*#__PURE__*/ forwardRef(function(param, ref) {
         size: size,
         view: view,
         contentLeft: contentLeft,
+        contentRight: contentRight,
         helperText: helperText,
         treeId: treeId,
         activeDescendantItemValue: activeDescendantItemValue,

package/dist/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -62,7 +62,7 @@ import { sizeToIconSize, getItemId } from "../../../../utils";
 import { classes } from "../../../../Select.tokens";
 import { IconArrowWrapper, StyledArrow, StyledTextField, StyledLeftHelper } from "./Textfield.styles";
 export var Textfield = /*#__PURE__*/ forwardRef(function(param, ref) {
-    var inputWrapperRef = param.inputWrapperRef, opened = param.opened, multiselect = param.multiselect, value = param.value, label = param.label, labelPlacement = param.labelPlacement, keepPlaceholder = param.keepPlaceholder, placeholder = param.placeholder, onKeyDown = param.onKeyDown, size = param.size, view = param.view, contentLeft = param.contentLeft, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, disabled = param.disabled, readOnly = param.readOnly, isTargetAmount = param.isTargetAmount, valueToItemMap = param.valueToItemMap, renderValue = param.renderValue, onChange = param.onChange, chipView = param.chipView, requiredProps = param.requiredProps, chipType = param.chipType, hintProps = param.hintProps, chipClickArea = param.chipClickArea;
+    var inputWrapperRef = param.inputWrapperRef, opened = param.opened, multiselect = param.multiselect, value = param.value, label = param.label, labelPlacement = param.labelPlacement, keepPlaceholder = param.keepPlaceholder, placeholder = param.placeholder, onKeyDown = param.onKeyDown, size = param.size, view = param.view, contentLeft = param.contentLeft, contentRight = param.contentRight, helperText = param.helperText, treeId = param.treeId, activeDescendantItemValue = param.activeDescendantItemValue, disabled = param.disabled, readOnly = param.readOnly, isTargetAmount = param.isTargetAmount, valueToItemMap = param.valueToItemMap, renderValue = param.renderValue, onChange = param.onChange, chipView = param.chipView, requiredProps = param.requiredProps, chipType = param.chipType, hintProps = param.hintProps, chipClickArea = param.chipClickArea;
     var withArrowInverse = opened ? classes.arrowInverse : undefined;
     var getValue = function() {
         var _valueToItemMap_get;
@@ -142,7 +142,7 @@ export var Textfield = /*#__PURE__*/ forwardRef(function(param, ref) {
         keepPlaceholder: keepPlaceholder,
         placeholder: _instanceof(value, Array) && value.length ? '' : placeholder,
         contentLeft: contentLeft,
-        contentRight: /*#__PURE__*/ React.createElement(IconArrowWrapper, {
+        contentRight: contentRight || contentRight !== undefined ? contentRight : /*#__PURE__*/ React.createElement(IconArrowWrapper, {
             disabled: disabled,
             readOnly: readOnly
         }, /*#__PURE__*/ React.createElement(StyledArrow, {

package/dist/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -7,7 +7,7 @@ var mergedConfig = mergeConfig(textFieldConfig);
 var TextField = component(mergedConfig);
 export var StyledTextField = styled(TextField).withConfig({
     displayName: "Textfield.styles__StyledTextField",
-    componentId: "sc-504ad6c9-0"
+    componentId: "sc-1adbc556-0"
 })([
     "",
     ":var(",
@@ -321,8 +321,7 @@ export var StyledTextField = styled(TextField).withConfig({
     ":var(",
     ");",
     ":var(",
-    ");",
-    ":none;}"
+    ");}"
 ], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.labelColor, tokens.textFieldLabelColor, textFieldTokens.leftHelperColor, tokens.textFieldLeftHelperColor, textFieldTokens.colorReadOnly, tokens.textFieldColor, textFieldTokens.backgroundColorReadOnly, function(param) {
     var opened = param.opened;
     return opened ? "var(".concat(tokens.textFieldBackgroundColorFocus, ")") : "var(".concat(tokens.textFieldBackgroundColor, ")");
@@ -335,10 +334,10 @@ export var StyledTextField = styled(TextField).withConfig({
 }, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.optionalColor, tokens.textFieldOptionalColor, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.paddingWithChips, tokens.textFieldPaddingWithChips, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.rightContentWithHintMargin, tokens.textFieldRightContentWithHintMargin, textFieldTokens.contentRightWrapperGap, tokens.textFieldContentRightWrapperGap, textFieldTokens.contentRightWrapperMargin, tokens.textFieldContentRightWrapperMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, textFieldTokens.contentSlotColorHover, tokens.textFieldContentSlotColorHover, textFieldTokens.contentSlotColorActive, tokens.textFieldContentSlotColorActive, textFieldTokens.contentSlotRightColor, tokens.textFieldContentSlotRightColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentSlotRightColorHover, textFieldTokens.contentSlotRightColorActive, tokens.textFieldContentSlotRightColorActive, textFieldTokens.labelOffset, tokens.textFieldLabelOffset, textFieldTokens.labelFontFamily, tokens.textFieldLabelFontFamily, textFieldTokens.labelFontStyle, tokens.textFieldLabelFontStyle, textFieldTokens.labelFontSize, tokens.textFieldLabelFontSize, textFieldTokens.labelFontWeight, tokens.textFieldLabelFontWeight, textFieldTokens.labelLetterSpacing, tokens.textFieldLabelLetterSpacing, textFieldTokens.labelLineHeight, tokens.textFieldLabelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.textFieldLabelInnerFontFamily, textFieldTokens.labelInnerFontStyle, tokens.textFieldLabelInnerFontStyle, textFieldTokens.labelInnerFontSize, tokens.textFieldLabelInnerFontSize, textFieldTokens.labelInnerFontWeight, tokens.textFieldLabelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.textFieldLabelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.textFieldLabelInnerLineHeight, textFieldTokens.labelInnerPadding, tokens.textFieldLabelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, textFieldTokens.titleCaptionColor, tokens.textFieldTitleCaptionColor, textFieldTokens.titleCaptionInnerLabelOffset, tokens.textFieldTitleCaptionInnerLabelOffset, textFieldTokens.titleCaptionFontFamily, tokens.textFieldTitleCaptionFontFamily, textFieldTokens.titleCaptionFontStyle, tokens.textFieldTitleCaptionFontStyle, textFieldTokens.titleCaptionFontSize, tokens.textFieldTitleCaptionFontSize, textFieldTokens.titleCaptionFontWeight, tokens.textFieldTitleCaptionFontWeight, textFieldTokens.titleCaptionLetterSpacing, tokens.textFieldTitleCaptionLetterSpacing, textFieldTokens.titleCaptionLineHeight, tokens.textFieldTitleCaptionLineHeight, textFieldTokens.leftHelperOffset, tokens.textFieldLeftHelperOffset, textFieldTokens.leftHelperFontFamily, tokens.textFieldLeftHelperFontFamily, textFieldTokens.leftHelperFontStyle, tokens.textFieldLeftHelperFontStyle, textFieldTokens.leftHelperFontSize, tokens.textFieldLeftHelperFontSize, textFieldTokens.leftHelperFontWeight, tokens.textFieldLeftHelperFontWeight, textFieldTokens.leftHelperLetterSpacing, tokens.textFieldLeftHelperLetterSpacing, textFieldTokens.leftHelperLineHeight, tokens.textFieldLeftHelperLineHeight, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.disabledOpacity, tokens.textFieldDisabledOpacity, textFieldTokens.hintCustomIconTargetSize, tokens.textFieldHintCustomIconTargetSize, textFieldTokens.hintMargin, tokens.textFieldHintMargin, textFieldTokens.hintTargetSize, tokens.textFieldHintTargetSize, textFieldTokens.hintIconColor, tokens.textFieldHintIconColor, textFieldTokens.hintInnerLabelPlacementOffset, tokens.textFieldHintInnerLabelPlacementOffset, textFieldTokens.clearHintInnerLabelPlacementOffset, tokens.textFieldClearHintInnerLabelPlacementOffset, textFieldTokens.tooltipBackgroundColor, tokens.textFieldTooltipBackgroundColor, textFieldTokens.tooltipBoxShadow, tokens.textFieldTooltipBoxShadow, textFieldTokens.tooltipColor, tokens.textFieldTooltipColor, textFieldTokens.tooltipPaddingTop, tokens.textFieldTooltipPaddingTop, textFieldTokens.tooltipPaddingRight, tokens.textFieldTooltipPaddingRight, textFieldTokens.tooltipPaddingBottom, tokens.textFieldTooltipPaddingBottom, textFieldTokens.tooltipPaddingLeft, tokens.textFieldTooltipPaddingLeft, textFieldTokens.tooltipMinHeight, tokens.textFieldTooltipMinHeight, textFieldTokens.tooltipBorderRadius, tokens.textFieldTooltipBorderRadius, textFieldTokens.tooltipTextFontFamily, tokens.textFieldTooltipTextFontFamily, textFieldTokens.tooltipTextFontSize, tokens.textFieldTooltipTextFontSize, textFieldTokens.tooltipTextFontStyle, tokens.textFieldTooltipTextFontStyle, textFieldTokens.tooltipTextFontWeight, tokens.textFieldTooltipTextFontWeight, textFieldTokens.tooltipTextFontLetterSpacing, tokens.textFieldTooltipTextFontLetterSpacing, textFieldTokens.tooltipTextFontLineHeight, tokens.textFieldTooltipTextFontLineHeight, textFieldTokens.tooltipContentLeftMargin, tokens.textFieldTooltipContentLeftMargin, textFieldTokens.tooltipArrowMaskWidth, tokens.textFieldTooltipArrowMaskWidth, textFieldTokens.tooltipArrowMaskHeight, tokens.textFieldTooltipArrowMaskHeight, textFieldTokens.tooltipArrowMaskImage, tokens.textFieldTooltipArrowMaskImage, textFieldTokens.tooltipArrowHeight, tokens.textFieldTooltipArrowHeight, textFieldTokens.tooltipArrowEdgeMargin, tokens.textFieldTooltipArrowEdgeMargin, textFieldTokens.tooltipArrowBackground, tokens.textFieldTooltipArrowBackground, textFieldTokens.chipHeight, tokens.textFieldChipHeight, textFieldTokens.chipBorderRadius, tokens.textFieldChipBorderRadius, textFieldTokens.chipGap, tokens.textFieldChipGap, textFieldTokens.chipColor, tokens.textFieldChipColor, textFieldTokens.chipColorHover, tokens.textFieldChipColorHover, textFieldTokens.chipBackground, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundHover, tokens.textFieldChipBackgroundHover, textFieldTokens.chipBackgroundActive, tokens.textFieldChipBackgroundActive, textFieldTokens.chipColorActive, tokens.textFieldChipColorActive, textFieldTokens.chipCloseIconColor, tokens.textFieldChipCloseIconColor, textFieldTokens.chipCloseIconColorHover, tokens.textFieldChipCloseIconColorHover, textFieldTokens.chipCloseIconColorReadonly, tokens.textFieldChipCloseIconColorReadonly, textFieldTokens.chipOutlineSize, tokens.textFieldChipOutlineSize, textFieldTokens.chipWidth, tokens.textFieldChipWidth, textFieldTokens.chipPadding, tokens.textFieldChipPadding, textFieldTokens.chipCloseIconSize, tokens.textFieldChipCloseIconSize, textFieldTokens.chipFontFamily, tokens.textFieldChipFontFamily, textFieldTokens.chipFontSize, tokens.textFieldChipFontSize, textFieldTokens.chipFontStyle, tokens.textFieldChipFontStyle, textFieldTokens.chipFontWeight, tokens.textFieldChipFontWeight, textFieldTokens.chipLetterSpacing, tokens.textFieldChipLetterSpacing, textFieldTokens.chipLineHeight, tokens.textFieldChipLineHeight, textFieldTokens.chipColorReadOnly, tokens.textFieldChipColor, textFieldTokens.chipColorReadOnlyHover, tokens.textFieldChipColor, textFieldTokens.chipBackgroundReadOnly, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundReadOnlyHover, tokens.textFieldChipBackgroundHover, textFieldTokens.chipClearContentMarginLeft, tokens.textFieldChipClearContentMarginLeft, textFieldTokens.chipClearContentMarginRight, tokens.textFieldChipClearContentMarginRight, textFieldTokens.indicatorColor, tokens.textFieldIndicatorColor, textFieldTokens.indicatorSizeInner, tokens.textFieldIndicatorSizeInner, textFieldTokens.indicatorSizeOuter, tokens.textFieldIndicatorSizeOuter, textFieldTokens.indicatorLabelPlacementInner, tokens.textFieldIndicatorLabelPlacementInner, textFieldTokens.indicatorLabelPlacementOuter, tokens.textFieldIndicatorLabelPlacementOuter, textFieldTokens.indicatorLabelPlacementInnerRight, tokens.textFieldIndicatorLabelPlacementInnerRight, textFieldTokens.indicatorLabelPlacementOuterRight, tokens.textFieldIndicatorLabelPlacementOuterRight, textFieldTokens.clearIndicatorLabelPlacementInner, tokens.textFieldClearIndicatorLabelPlacementInner, textFieldTokens.clearIndicatorLabelPlacementInnerRight, tokens.textFieldClearIndicatorLabelPlacementInnerRight, textFieldTokens.clearIndicatorHintInnerRight, tokens.textFieldClearIndicatorHintInnerRight, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.boxShadow, function(param) {
     var disabled = param.disabled;
     return disabled ? 'none' : "var(".concat(tokens.textFieldBoxShadow, ")");
-}, tokens.textFieldBackgroundColorFocus, classes.readOnly, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.dividerColorReadOnly, tokens.textFieldDividerColorReadOnly, textFieldTokens.leftHelperColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, textFieldTokens.labelColorReadOnly, tokens.textFieldLabelColorReadOnly, textFieldTokens.titleCaptionColorReadOnly, tokens.textFieldTitleCaptionColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.readOnlyOpacity, tokens.textFieldReadOnlyOpacity, textFieldTokens.chipColorReadOnly, tokens.textFieldChipColorReadOnly, textFieldTokens.chipColorReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, textFieldTokens.chipBackgroundReadOnly, tokens.textFieldChipBackgroundReadOnly, textFieldTokens.chipBackgroundReadOnlyHover, tokens.textFieldChipBackgroundReadOnlyHover, textFieldTokens.chipOpacityReadonly, tokens.textFieldChipOpacityReadonly, textFieldTokens.boxShadow);
+}, tokens.textFieldBackgroundColorFocus, classes.readOnly, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.dividerColorReadOnly, tokens.textFieldDividerColorReadOnly, textFieldTokens.leftHelperColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, textFieldTokens.labelColorReadOnly, tokens.textFieldLabelColorReadOnly, textFieldTokens.titleCaptionColorReadOnly, tokens.textFieldTitleCaptionColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.readOnlyOpacity, tokens.textFieldReadOnlyOpacity, textFieldTokens.chipColorReadOnly, tokens.textFieldChipColorReadOnly, textFieldTokens.chipColorReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, textFieldTokens.chipBackgroundReadOnly, tokens.textFieldChipBackgroundReadOnly, textFieldTokens.chipBackgroundReadOnlyHover, tokens.textFieldChipBackgroundReadOnlyHover, textFieldTokens.chipOpacityReadonly, tokens.textFieldChipOpacityReadonly);
 export var IconArrowWrapper = styled.div.withConfig({
     displayName: "Textfield.styles__IconArrowWrapper",
-    componentId: "sc-504ad6c9-1"
+    componentId: "sc-1adbc556-1"
 })([
     "line-height:0;color:var(",
     ");cursor:",
@@ -363,7 +362,7 @@ export var sizeMap = {
 };
 export var StyledArrow = styled(IconDisclosureDownCentered).withConfig({
     displayName: "Textfield.styles__StyledArrow",
-    componentId: "sc-504ad6c9-2"
+    componentId: "sc-1adbc556-2"
 })([
     "width:",
     ";height:",
@@ -377,7 +376,7 @@ export var StyledArrow = styled(IconDisclosureDownCentered).withConfig({
 });
 export var StyledLeftHelper = styled.span.withConfig({
     displayName: "Textfield.styles__StyledLeftHelper",
-    componentId: "sc-504ad6c9-3"
+    componentId: "sc-1adbc556-3"
 })([
     "margin:0;padding:0;"
 ]);

package/dist/styled-components/es/components/Tabs/utils/index.js

@@ -1,3 +1,4 @@
+var TOLERANCE = 1; // Погрешность для субпиксельного рендеринга
 var getIsFirstOverflowingTab = function(item, maxScroll) {
     var orientation = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 'horizontal';
     if (!item.current) {
@@ -7,7 +8,7 @@ var getIsFirstOverflowingTab = function(item, maxScroll) {
     if (currentOffset === undefined) {
         return;
     }
-    return currentOffset < maxScroll;
+    return currentOffset < maxScroll - TOLERANCE;
 };
 var getIsLastOverflowingTab = function(item, minScroll) {
     var orientation = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 'horizontal';
@@ -19,7 +20,8 @@ var getIsLastOverflowingTab = function(item, minScroll) {
         return;
     }
     var additionalOffset = orientation === 'horizontal' ? item.current.offsetWidth : item.current.offsetHeight;
-    return currentOffset + additionalOffset > minScroll;
+    var itemRightEdge = currentOffset + additionalOffset;
+    return itemRightEdge > minScroll + TOLERANCE;
 };
 export var getFirstOverflowingTab = function(items, maxScroll) {
     var orientation = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 'horizontal';

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

@@ -415,7 +415,9 @@ export var textAreaRoot = function(Root) {
         })), hasHelper && /*#__PURE__*/ React.createElement(StyledHelpers, {
             className: styledHelpers,
             id: textareaHelperId
-        }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
+        }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, {
+            className: focused ? classes.leftHelperFocus : ''
+        }, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
             "data-root": true
         }, rightHelper)), !hasHeader && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
             hasContentRight: Boolean(contentRight),

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

@@ -7,13 +7,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextArea.styles__Hint",
-    componentId: "sc-5fcd62a1-0"
+    componentId: "sc-621ad7e5-0"
 })([
     ""
 ]);
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-5fcd62a1-1"
+    componentId: "sc-621ad7e5-1"
 })([
     "display:flex;align-items:center;max-width:",
     ";margin-bottom:",
@@ -27,7 +27,7 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var StyledLabel = styled.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-5fcd62a1-2"
+    componentId: "sc-621ad7e5-2"
 })([
     "position:relative;display:inline-flex;color:var(",
     ",var(",
@@ -47,7 +47,7 @@ export var StyledLabel = styled.div.withConfig({
 ], tokens.labelOuterColor, tokens.inputColor, tokens.labelOuterFontFamily, tokens.inputFontFamily, tokens.labelOuterFontSize, tokens.inputFontSize, tokens.labelOuterFontStyle, tokens.inputFontStyle, tokens.labelOuterFontWeight, tokens.inputFontWeight, tokens.labelOuterLetterSpacing, tokens.inputLetterSpacing, tokens.labelOuterLineHeight, tokens.inputLineHeight);
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextArea.styles__TitleCaption",
-    componentId: "sc-5fcd62a1-3"
+    componentId: "sc-621ad7e5-3"
 })([
     "display:inline-block;margin-left:auto;font-family:var(",
     ");font-size:var(",
@@ -59,13 +59,13 @@ export var TitleCaption = styled.div.withConfig({
 ], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicatorWrapper",
-    componentId: "sc-5fcd62a1-4"
+    componentId: "sc-621ad7e5-4"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-5fcd62a1-5"
+    componentId: "sc-621ad7e5-5"
 })([
     "color:var(",
     ");font-family:",
@@ -96,7 +96,7 @@ export var StyledOptionalText = styled.span.withConfig({
 });
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-5fcd62a1-6"
+    componentId: "sc-621ad7e5-6"
 })([
     "display:inline-flex;line-height:0;margin:var(",
     ");&.",
@@ -105,7 +105,7 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintTargetWrapper",
-    componentId: "sc-5fcd62a1-7"
+    componentId: "sc-621ad7e5-7"
 })([
     "color:var(",
     ");width:var(",
@@ -114,13 +114,13 @@ export var HintTargetWrapper = styled.div.withConfig({
 ], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-5fcd62a1-8"
+    componentId: "sc-621ad7e5-8"
 })([
     ""
 ]);
 export var StyledTextAreaWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-5fcd62a1-9"
+    componentId: "sc-621ad7e5-9"
 })([
     "display:flex;flex-direction:column;background-color:var(",
     ");padding-top:",
@@ -139,7 +139,7 @@ export var StyledTextAreaWrapper = styled.div.withConfig({
 });
 export var StyledContentWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContentWrapper",
-    componentId: "sc-5fcd62a1-10"
+    componentId: "sc-621ad7e5-10"
 })([
     "position:relative;width:100%;height:0;padding-top:",
     ";"
@@ -149,7 +149,7 @@ export var StyledContentWrapper = styled.div.withConfig({
 });
 export var StyledContent = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-5fcd62a1-11"
+    componentId: "sc-621ad7e5-11"
 })([
     "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
     ",var(",
@@ -163,27 +163,27 @@ export var StyledContent = styled.div.withConfig({
 }, tokens.rightContentRight, tokens.rightContentHeight);
 export var StyledHeaderSlot = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHeaderSlot",
-    componentId: "sc-5fcd62a1-12"
+    componentId: "sc-621ad7e5-12"
 })([
     "display:flex;flex-direction:column;"
 ]);
 export var DividerWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-5fcd62a1-13"
+    componentId: "sc-621ad7e5-13"
 })([
     "background:var(",
     ");"
 ], tokens.backgroundColor);
 export var Divider = styled.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-5fcd62a1-14"
+    componentId: "sc-621ad7e5-14"
 })([
     "height:0.0625rem;background:var(",
     ");"
 ], tokens.dividerColor);
 export var StyledContainer = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-5fcd62a1-15"
+    componentId: "sc-621ad7e5-15"
 })([
     "display:inline-flex;flex-direction:column;width:",
     ";position:relative;"
@@ -193,7 +193,7 @@ export var StyledContainer = styled.div.withConfig({
 });
 export var StyledTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-5fcd62a1-16"
+    componentId: "sc-621ad7e5-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -256,7 +256,7 @@ export var StyledTextArea = styled.textarea.withConfig({
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth);
 export var StyledHiddenTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledHiddenTextArea",
-    componentId: "sc-5fcd62a1-17"
+    componentId: "sc-621ad7e5-17"
 })([
     "max-height:none !important;min-height:var(",
     ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
@@ -274,7 +274,7 @@ export var StyledHiddenTextArea = styled.textarea.withConfig({
 }, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledHelpers = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHelpers",
-    componentId: "sc-5fcd62a1-18"
+    componentId: "sc-621ad7e5-18"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
     ");padding-top:var(",
@@ -287,14 +287,14 @@ export var StyledHelpers = styled.div.withConfig({
 ], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
 export var StyledOutsideHelpersWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
-    componentId: "sc-5fcd62a1-19"
+    componentId: "sc-621ad7e5-19"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
     ");"
 ], tokens.clearHelpersPaddingTop);
 export var StyledLeftHelper = styled.span.withConfig({
     displayName: "TextArea.styles__StyledLeftHelper",
-    componentId: "sc-5fcd62a1-20"
+    componentId: "sc-621ad7e5-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -304,18 +304,20 @@ export var StyledLeftHelper = styled.span.withConfig({
     ");letter-spacing:var(",
     ");line-height:var(",
     ");color:var(",
-    ");"
-], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
+    ");&.",
+    "{color:var(",
+    ");}"
+], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor, classes.leftHelperFocus, tokens.leftHelperColorFocus);
 export var StyledRightHelper = styled(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-5fcd62a1-21"
+    componentId: "sc-621ad7e5-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], tokens.rightHelperColor);
 export var StyledPlaceholder = styled.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-5fcd62a1-22"
+    componentId: "sc-621ad7e5-22"
 })([
     "box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
     ");width:100%;height:auto;top:var(",
@@ -334,7 +336,7 @@ export var StyledPlaceholder = styled.label.withConfig({
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicator",
-    componentId: "sc-5fcd62a1-23"
+    componentId: "sc-621ad7e5-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

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

@@ -16,7 +16,8 @@ export var classes = {
     hasDivider: 'textarea-has-divider',
     requiredAlignRight: 'required-align-right',
     hasHeaderSlot: 'textarea-has-header-slot',
-    styledContentWrapper: 'textarea-content-wrapper'
+    styledContentWrapper: 'textarea-content-wrapper',
+    leftHelperFocus: 'textarea-left-helper-focus'
 };
 export var tokens = {
     /** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',
@@ -48,6 +49,7 @@ export var tokens = {
     clearPlaceholderColorFocus: '--plasma-textarea-clear-placeholder-color-focus',
     /** Цвет элемента optional */ optionalColor: '--plasma-textarea__optional-color',
     /** Цвет текста для левой подписи снизу */ leftHelperColor: '--plasma-textarea-left-helper-color',
+    /** Цвет текста для левой подписи снизу в состоянии focus */ leftHelperColorFocus: '--plasma-textarea-left-helper-color-focus',
     /** Цвет текста для правой подписи снизу */ rightHelperColor: '--plasma-textarea-right-helper-color',
     /** Цвета границы для всего компонента */ borderColor: '--plasma-textarea-border-color',
     borderColorReadOnly: '--plasma-textarea-border-color-readonly',

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

@@ -526,6 +526,7 @@ export var textFieldRoot = function(Root) {
             "aria-labelledby": labelId,
             "aria-describedby": helperTextId,
             placeholder: innerPlaceholderValue,
+            hasFocus: hasFocus,
             className: cx(hasValueClass, keepPlaceholderClass, classTextEllipsis, readOnly && classes.readOnlyInput),
             disabled: disabled,
             readOnly: !disabled && readOnly,
@@ -570,7 +571,8 @@ export var textFieldRoot = function(Root) {
             isInnerLabel: true
         }))), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
             "data-root": true,
-            id: helperTextId
+            id: helperTextId,
+            className: hasFocus ? classes.hasFocus : undefined
         }, leftHelper));
     });
 };

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

@@ -8,13 +8,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var InputWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-708c1a6a-0"
+    componentId: "sc-b214ed5d-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 export var InputLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-708c1a6a-1"
+    componentId: "sc-b214ed5d-1"
 })([
     "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
     "{height:var(",
@@ -23,7 +23,7 @@ export var InputLabelWrapper = styled.div.withConfig({
 ], String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
 export var StyledChips = styled.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-708c1a6a-2"
+    componentId: "sc-b214ed5d-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -32,7 +32,7 @@ export var StyledChips = styled.div.withConfig({
 ], tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
 export var Input = styled.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-708c1a6a-3"
+    componentId: "sc-b214ed5d-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -40,7 +40,7 @@ export var Input = styled.input.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var InputContainer = styled.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-708c1a6a-4"
+    componentId: "sc-b214ed5d-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -55,7 +55,7 @@ export var InputContainer = styled.div.withConfig({
 });
 export var InputPlaceholder = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-708c1a6a-5"
+    componentId: "sc-b214ed5d-5"
 })([
     "display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(",
     ");padding:",
@@ -66,7 +66,7 @@ export var InputPlaceholder = styled.div.withConfig({
 });
 export var InputPlaceholderValue = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholderValue",
-    componentId: "sc-708c1a6a-6"
+    componentId: "sc-b214ed5d-6"
 })([
     "&.",
     "{",
@@ -74,7 +74,7 @@ export var InputPlaceholderValue = styled.div.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-708c1a6a-7"
+    componentId: "sc-b214ed5d-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -88,25 +88,25 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-708c1a6a-8"
+    componentId: "sc-b214ed5d-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-708c1a6a-9"
+    componentId: "sc-b214ed5d-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var Label = styled.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-708c1a6a-10"
+    componentId: "sc-b214ed5d-10"
 })([
     "display:inline-flex;"
 ]);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-708c1a6a-11"
+    componentId: "sc-b214ed5d-11"
 })([
     "margin:var(",
     ");color:var(",
@@ -118,13 +118,13 @@ export var StyledContentLeft = styled.div.withConfig({
 ], tokens.leftContentMargin, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColor, tokens.contentSlotColorActive, tokens.contentSlotColor);
 export var StyledContentRightWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-708c1a6a-12"
+    componentId: "sc-b214ed5d-12"
 })([
     "display:flex;align-items:center;"
 ]);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-708c1a6a-13"
+    componentId: "sc-b214ed5d-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -137,13 +137,16 @@ export var StyledContentRight = styled.div.withConfig({
 ], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 export var LeftHelper = styled.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-708c1a6a-14"
+    componentId: "sc-b214ed5d-14"
 })([
-    ""
-]);
+    "color:var(",
+    ");&.",
+    "{color:var(",
+    ");}"
+], tokens.leftHelperColor, classes.hasFocus, tokens.leftHelperColorFocus);
 export var StyledTextBefore = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-708c1a6a-15"
+    componentId: "sc-b214ed5d-15"
 })([
     "visibility:",
     ";"
@@ -153,20 +156,20 @@ export var StyledTextBefore = styled.div.withConfig({
 });
 export var StyledTextAfter = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-708c1a6a-16"
+    componentId: "sc-b214ed5d-16"
 })([
     ""
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-708c1a6a-17"
+    componentId: "sc-b214ed5d-17"
 })([
     "color:var(",
     ");"
 ], tokens.optionalColor);
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-708c1a6a-18"
+    componentId: "sc-b214ed5d-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -174,14 +177,14 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-708c1a6a-19"
+    componentId: "sc-b214ed5d-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], tokens.hintIconColor);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-708c1a6a-20"
+    componentId: "sc-b214ed5d-20"
 })([
     "",
     " .",
@@ -189,13 +192,13 @@ export var Hint = styled(Tooltip).withConfig({
 ], HintTargetWrapper, popoverClasses.root);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-708c1a6a-21"
+    componentId: "sc-b214ed5d-21"
 })([
     "display:flex;"
 ]);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-708c1a6a-22"
+    componentId: "sc-b214ed5d-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

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

@@ -3,6 +3,7 @@ export var classes = {
     hasChips: 'has-chips',
     chipsWrapper: 'chips-wrapper',
     hasValue: 'has-value',
+    hasFocus: 'has-focus',
     keepPlaceholder: 'keep-placeholder',
     hasEmptyContentLeft: 'has-empty-content-left',
     hasEmptyContentRight: 'has-empty-content-right',
@@ -22,6 +23,7 @@ export var classes = {
 };
 export var tokens = {
     color: '--plasma-textfield-color',
+    colorFocus: '--plasma-textfield-color-focus',
     clearColor: '--plasma-textfield-clear-color',
     boxShadow: '--plasma-textfield-box-shadow',
     backgroundColor: '--plasma-textfield-bg-color',
@@ -33,6 +35,7 @@ export var tokens = {
     dividerColor: '--plasma-textfield-divider-color',
     dividerColorHover: '--plasma-textfield-divider-color-hover',
     dividerColorFocus: '--plasma-textfield-divider-color-focus',
+    dividerWidth: '--plasma-textfield-divider-width',
     /** Цвета для read-only состояния */ colorReadOnly: '--plasma-textfield-color-readonly',
     backgroundColorReadOnly: '--plasma-textfield-bg-color-readonly',
     borderColorReadOnly: '--plasma-textfield-border-color-readonly',
@@ -61,6 +64,7 @@ export var tokens = {
     /* Tokens for content slot */ contentSlotColor: '--plasma-textfield-content-slot-color',
     contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
     contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
+    contentSlotColorFocus: '--plasma-textfield-content-slot-color-focus',
     contentSlotRightColor: '--plasma-textfield-content-right-slot-color',
     contentSlotRightColorHover: '--plasma-textfield-content-right-slot-color-hover',
     contentSlotRightColorActive: '--plasma-textfield-content-right-slot-color-active',
@@ -95,6 +99,7 @@ export var tokens = {
     titleCaptionLetterSpacing: '--plasma-textfield__title-caption-letter-spacing',
     titleCaptionLineHeight: '--plasma-textfield__title-caption-line-height',
     leftHelperColor: '--plasma-textfield__left-helper-color',
+    leftHelperColorFocus: '--plasma-textfield__left-helper-color-focus',
     leftHelperColorReadOnly: '--plasma-textfield__left-helper-color-readonly',
     leftHelperOffset: '--plasma-textfield__left-helper-offset',
     leftHelperFontFamily: '--plasma-textfield__left-helper-font-family',

package/dist/styled-components/es/components/TextField/variations/_read-only/base.js

@@ -3,8 +3,8 @@ import { classes, tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentLeft, StyledContentRight, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "&[readonly]{",
-    "{position:relative;z-index:0;color:var(",
-    ");background:transparent;box-shadow:none;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
+    "{position:relative;color:var(",
+    ");background:transparent;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
     ");background-color:var(",
     ");opacity:var(",
     ");box-shadow:inset 0 0 0 var(",