@salutejs/plasma-new-hope 0.344.0-canary.2392.20298160025.0 → 0.344.0-canary.2397.20456842500.0

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

@@ -15,11 +15,21 @@ var Divider = component(mergedDividerConfig);
 var mergedLinkButtonConfig = mergeConfig(linkButtonConfig);
 var LinkButtonBase = component(mergedLinkButtonConfig);
 export var base = css([
-    "display:inline-block;overflow-y:auto;"
+    "display:inline-flex;flex-direction:column;align-items:flex-start;"
 ]);
+export var ScrollableWrapper = styled.div.withConfig({
+    displayName: "Table.styles__ScrollableWrapper",
+    componentId: "sc-c4913190-0"
+})([
+    "overflow-y:auto;max-height:",
+    ";"
+], function(param) {
+    var maxHeight = param.maxHeight;
+    return maxHeight || 'none';
+});
 export var Table = styled.table.withConfig({
     displayName: "Table.styles__Table",
-    componentId: "sc-382f3104-0"
+    componentId: "sc-c4913190-1"
 })([
     "width:fit-content;font-family:var(",
     ");font-size:var(",
@@ -35,7 +45,7 @@ export var Table = styled.table.withConfig({
 });
 export var Tr = styled.tr.withConfig({
     displayName: "Table.styles__Tr",
-    componentId: "sc-382f3104-1"
+    componentId: "sc-c4913190-2"
 })([
     "box-sizing:content-box;width:fit-content;background-color:",
     ";"
@@ -45,11 +55,11 @@ export var Tr = styled.tr.withConfig({
 });
 export var Thead = styled.thead.withConfig({
     displayName: "Table.styles__Thead",
-    componentId: "sc-382f3104-2"
+    componentId: "sc-c4913190-3"
 })([
     "position:",
     ";top:0;background:",
-    ";z-index:1;box-shadow:",
+    ";z-index:10;box-shadow:",
     ";",
     "{background:transparent;}"
 ], function(param) {
@@ -65,13 +75,13 @@ export var Thead = styled.thead.withConfig({
 }, Tr);
 export var Tbody = styled.tbody.withConfig({
     displayName: "Table.styles__Tbody",
-    componentId: "sc-382f3104-3"
+    componentId: "sc-c4913190-4"
 })([
     ""
 ]);
 export var Resizer = styled.div.withConfig({
     displayName: "Table.styles__Resizer",
-    componentId: "sc-382f3104-4"
+    componentId: "sc-c4913190-5"
 })([
     "display:",
     ";position:absolute;z-index:1;top:-0.0625rem;bottom:0;right:-0.125rem;width:0.1875rem;background:var(--outline-accent);cursor:col-resize;user-select:none;touch-action:none;"
@@ -81,12 +91,12 @@ export var Resizer = styled.div.withConfig({
 });
 export var Th = styled.th.withConfig({
     displayName: "Table.styles__Th",
-    componentId: "sc-382f3104-5"
+    componentId: "sc-c4913190-6"
 })([
     "padding:",
     ";position:relative;font-weight:600;text-align:left;height:var(",
     ");background-color:transparent;color:inherit;box-sizing:content-box;border-width:0.0625rem;border-top-width:0;border-bottom-width:0;border-style:solid;border-color:",
-    ";&:hover{",
+    ";box-sizing:border-box;&:hover{",
     "{display:block;}}"
 ], function(param) {
     var selectionCell = param.selectionCell;
@@ -97,7 +107,7 @@ export var Th = styled.th.withConfig({
 }, Resizer);
 export var StyledCheckbox = styled(Checkbox).withConfig({
     displayName: "Table.styles__StyledCheckbox",
-    componentId: "sc-382f3104-6"
+    componentId: "sc-c4913190-7"
 })([
     "",
     ":var(",
@@ -117,7 +127,7 @@ export var StyledCheckbox = styled(Checkbox).withConfig({
 ], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxTriggerIconColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
 export var StyledDivider = styled(Divider).withConfig({
     displayName: "Table.styles__StyledDivider",
-    componentId: "sc-382f3104-7"
+    componentId: "sc-c4913190-8"
 })([
     "",
     ":0.0625rem;",
@@ -126,7 +136,7 @@ export var StyledDivider = styled(Divider).withConfig({
 ], dividerTokens.baseSideSize, dividerTokens.background, dividerTokens.borderRadius);
 export var Button = styled(ButtonBase).withConfig({
     displayName: "Table.styles__Button",
-    componentId: "sc-382f3104-8"
+    componentId: "sc-c4913190-9"
 })([
     "",
     ":var(",
@@ -147,7 +157,7 @@ export var Button = styled(ButtonBase).withConfig({
 ], buttonTokens.buttonHeight, tokens.buttonHeight, buttonTokens.buttonDisabledOpacity, buttonTokens.buttonFontFamily, tokens.buttonFontFamily, buttonTokens.buttonFontSize, tokens.buttonFontSize, buttonTokens.buttonFontStyle, tokens.buttonFontStyle, buttonTokens.buttonFontWeight, tokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, tokens.buttonLineHeight);
 export var ButtonAccent = styled(Button).withConfig({
     displayName: "Table.styles__ButtonAccent",
-    componentId: "sc-382f3104-9"
+    componentId: "sc-c4913190-10"
 })([
     "",
     ":var(--on-dark-text-primary);",
@@ -158,7 +168,7 @@ export var ButtonAccent = styled(Button).withConfig({
 ], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive);
 export var LinkButton = styled(LinkButtonBase).withConfig({
     displayName: "Table.styles__LinkButton",
-    componentId: "sc-382f3104-10"
+    componentId: "sc-c4913190-11"
 })([
     "",
     ":var(--text-primary);",

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

@@ -4,7 +4,8 @@ export var classes = {
     sortingAscIcon: 'sorting-asc-icon',
     sortingDescIcon: 'sorting-desc-icon',
     filterIcon: 'filter-icon',
-    resizeDivider: 'resize-divider'
+    resizeDivider: 'resize-divider',
+    scrollableContainer: 'table-scrollable-container'
 };
 export var tableTokens = {
     fontFamily: '--plasma-table-font-family',

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

@@ -161,7 +161,7 @@ export var getDynamicLabelClasses = function(props, focused) {
 };
 export var textAreaRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, innerRef) {
-        var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, _props_optionalText = props.optionalText, optionalText = _props_optionalText === void 0 ? 'optional' : _props_optionalText, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, _props_labelAriaHidden = props.labelAriaHidden, labelAriaHidden = _props_labelAriaHidden === void 0 ? false : _props_labelAriaHidden, onChange = props.onChange, rest = _object_without_properties(props, [
+        var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? false : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, _props_optionalText = props.optionalText, optionalText = _props_optionalText === void 0 ? 'optional' : _props_optionalText, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, _props_labelAriaHidden = props.labelAriaHidden, labelAriaHidden = _props_labelAriaHidden === void 0 ? false : _props_labelAriaHidden, onChange = props.onChange, rest = _object_without_properties(props, [
             "helperText",
             "status",
             "resize",
@@ -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

@@ -128,7 +128,7 @@ var HINT_DEFAULT_OFFSET = [
 export var textFieldRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var id = _param.id, className = _param.className, style = _param.style, // layout
-        contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _param_hintTrigger = _param.// hint
+        contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? false : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _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 ? HINT_DEFAULT_OFFSET : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, // variations
         appearance = _param.appearance, 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_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, _param_optionalText = _param.optionalText, optionalText = _param_optionalText === void 0 ? 'optional' : _param_optionalText, hasDivider = _param.hasDivider, // controlled
         outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // @ts-ignore
@@ -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(",
     ");&.",