@salutejs/plasma-new-hope 0.384.0-dev.0 → 0.385.0-dev.0

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

@@ -5,11 +5,15 @@ import { textFieldConfig, textFieldTokens } from "../../../../../TextField";
 import { tokens, classes } from "../../../../Select.tokens";
 const mergedConfig = mergeConfig(textFieldConfig);
 const TextField = component(mergedConfig);
+const placeholderColorHover = `var(${tokens.textFieldPlaceholderColorHover}, var(${tokens.textFieldPlaceholderColor}))`;
+const openedValueColor = `var(${tokens.textFieldColorFocus}, var(${tokens.textFieldColor}))`;
 export const StyledTextField = styled(TextField).withConfig({
     displayName: "Textfield.styles__StyledTextField",
-    componentId: "sc-53edf520-0"
+    componentId: "sc-2ea0ed3d-0"
 })([
     ``,
+    `:`,
+    `;`,
     `:var(`,
     `);`,
     `:`,
@@ -40,6 +44,18 @@ export const StyledTextField = styled(TextField).withConfig({
     `;`,
     `:`,
     `;`,
+    `:var(`,
+    `);`,
+    `:var(`,
+    `);`,
+    `:`,
+    `;`,
+    `:`,
+    `;`,
+    `:var(`,
+    `);`,
+    `:`,
+    `;`,
     `:`,
     `;`,
     `:var(`,
@@ -309,11 +325,15 @@ export const StyledTextField = styled(TextField).withConfig({
     `:var(`,
     `);`,
     `:var(`,
+    `);`,
+    `:var(`,
+    `);`,
+    `:var(`,
     `);&:not([readonly]),&:not([readonly]) input,&:not([readonly]) label{cursor:pointer;}`
-], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.backgroundColor, ({ opened })=>opened ? `var(${tokens.textFieldBackgroundColorFocus})` : `var(${tokens.textFieldBackgroundColor})`, textFieldTokens.borderColor, ({ opened })=>opened ? `var(${tokens.textFieldBorderColorFocus})` : `var(${tokens.textFieldBorderColor})`, textFieldTokens.labelColor, tokens.textFieldLabelColor, textFieldTokens.leftHelperColor, tokens.textFieldLeftHelperColor, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.leftHelperColorReadOnly, tokens.textFieldLeftHelperColor, textFieldTokens.labelColorReadOnly, tokens.textFieldLabelColor, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.readOnlyOpacity, tokens.textFieldReadOnlyOpacity, textFieldTokens.placeholderColor, ({ opened })=>opened ? `var(${tokens.textFieldPlaceholderColorFocus})` : `var(${tokens.textFieldPlaceholderColor})`, textFieldTokens.placeholderColorFocus, ({ opened })=>opened ? `var(${tokens.textFieldPlaceholderColorFocus})` : `var(${tokens.textFieldPlaceholderColor})`, textFieldTokens.backgroundColorHover, ({ opened })=>opened ? `var(${tokens.textFieldBackgroundColorFocus})` : `var(${tokens.textFieldBackgroundColorHover})`, textFieldTokens.borderColorHover, ({ opened })=>opened ? `var(${tokens.textFieldBorderColorFocus})` : `var(${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.disabledBackgroundOpacity, tokens.textFieldDisabledBackgroundOpacity, textFieldTokens.disabledInnerContentOpacity, tokens.textFieldDisabledInnerContentOpacity, 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.chipsFlexWrap, tokens.textFieldChipsFlexWrap, textFieldTokens.scrollableWrapperOverflow, tokens.textFieldScrollableWrapperOverflow, textFieldTokens.scrollableWrapperHeight, tokens.textFieldScrollableWrapperHeight, textFieldTokens.inputContainerDisplay, tokens.textFieldInputContainerDisplay, 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, tokens.textFieldBoxShadow, textFieldTokens.boxShadowSecondary, tokens.textFieldBoxShadowSecondary);
+], textFieldTokens.color, ({ opened })=>opened ? openedValueColor : `var(${tokens.textFieldColor})`, textFieldTokens.colorFocus, tokens.textFieldColorFocus, textFieldTokens.backgroundColor, ({ opened })=>opened ? `var(${tokens.textFieldBackgroundColorFocus})` : `var(${tokens.textFieldBackgroundColor})`, textFieldTokens.borderColor, ({ opened })=>opened ? `var(${tokens.textFieldBorderColorFocus})` : `var(${tokens.textFieldBorderColor})`, textFieldTokens.labelColor, tokens.textFieldLabelColor, textFieldTokens.leftHelperColor, tokens.textFieldLeftHelperColor, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.leftHelperColorReadOnly, tokens.textFieldLeftHelperColor, textFieldTokens.labelColorReadOnly, tokens.textFieldLabelColor, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.readOnlyOpacity, tokens.textFieldReadOnlyOpacity, textFieldTokens.placeholderColor, ({ opened })=>opened ? `var(${tokens.textFieldPlaceholderColorFocus})` : `var(${tokens.textFieldPlaceholderColor})`, textFieldTokens.placeholderColorHover, placeholderColorHover, textFieldTokens.placeholderColorFocus, ({ opened })=>opened ? `var(${tokens.textFieldPlaceholderColorFocus})` : `var(${tokens.textFieldPlaceholderColor})`, textFieldTokens.clearPlaceholderColor, tokens.textFieldClearPlaceholderColor, textFieldTokens.clearPlaceholderColorFocus, tokens.textFieldClearPlaceholderColorFocus, textFieldTokens.backgroundColorHover, ({ opened })=>opened ? `var(${tokens.textFieldBackgroundColorFocus})` : `var(${tokens.textFieldBackgroundColorHover})`, textFieldTokens.borderColorHover, ({ opened })=>opened ? `var(${tokens.textFieldBorderColorFocus})` : `var(${tokens.textFieldBorderColorHover})`, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.dividerColor, ({ opened })=>opened ? `var(${tokens.textFieldDividerColorFocus})` : `var(${tokens.textFieldDividerColor})`, textFieldTokens.dividerColorHover, ({ opened })=>opened ? `var(${tokens.textFieldDividerColorFocus})` : `var(${tokens.textFieldDividerColorHover})`, textFieldTokens.dividerColorFocus, tokens.textFieldDividerColorFocus, textFieldTokens.dividerColorReadOnly, tokens.textFieldDividerColorReadOnly, 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.titleCaptionMargin, tokens.textFieldTitleCaptionMargin, 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.disabledBackgroundOpacity, tokens.textFieldDisabledBackgroundOpacity, textFieldTokens.disabledInnerContentOpacity, tokens.textFieldDisabledInnerContentOpacity, 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.chipsFlexWrap, tokens.textFieldChipsFlexWrap, textFieldTokens.scrollableWrapperOverflow, tokens.textFieldScrollableWrapperOverflow, textFieldTokens.scrollableWrapperHeight, tokens.textFieldScrollableWrapperHeight, textFieldTokens.inputContainerDisplay, tokens.textFieldInputContainerDisplay, 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, tokens.textFieldBoxShadow, textFieldTokens.boxShadowSecondary, tokens.textFieldBoxShadowSecondary);
 export const IconArrowWrapper = styled.div.withConfig({
     displayName: "Textfield.styles__IconArrowWrapper",
-    componentId: "sc-53edf520-1"
+    componentId: "sc-2ea0ed3d-1"
 })([
     `line-height:0;color:var(`,
     `);cursor:`,
@@ -329,7 +349,7 @@ export const sizeMap = {
 };
 export const StyledArrow = styled(IconDisclosureDownCentered).withConfig({
     displayName: "Textfield.styles__StyledArrow",
-    componentId: "sc-53edf520-2"
+    componentId: "sc-2ea0ed3d-2"
 })([
     `width:`,
     `;height:`,
@@ -337,7 +357,7 @@ export const StyledArrow = styled(IconDisclosureDownCentered).withConfig({
 ], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`);
 export const StyledLeftHelper = styled.span.withConfig({
     displayName: "Textfield.styles__StyledLeftHelper",
-    componentId: "sc-53edf520-3"
+    componentId: "sc-2ea0ed3d-3"
 })([
     `margin:0;padding:0;`
 ]);

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -1,6 +1,7 @@
 import React, { forwardRef, useCallback, useMemo, useState, useRef, useLayoutEffect } from "react";
 import cls from "classnames";
 import { safeUseId } from "../../../../../utils";
+import { useResizeObserver } from "../../../../../hooks";
 import { IconDisclosureLeft, IconDisclosureRight } from "../../../../_Icon";
 import { classes, tokens } from "../../../tokens";
 import { TabItemRefs, TabsContext } from "../../../TabsContext";
@@ -119,18 +120,37 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
             disabled,
             isFilled
         ]);
+        const updateArrowVisibility = useCallback(()=>{
+            const scrollElement = scrollRef.current;
+            const trackElement = trackRef.current;
+            const rootElement = scrollElement?.parentElement;
+            if (!scrollElement || !trackElement || !rootElement) {
+                return;
+            }
+            const scrollElStyle = getComputedStyle(scrollElement);
+            const rootStyle = getComputedStyle(rootElement);
+            const paddingLeft = parseFloat(scrollElStyle.paddingLeft);
+            const paddingRight = parseFloat(scrollElStyle.paddingRight);
+            const availableWidth = rootElement.clientWidth - parseFloat(rootStyle.paddingLeft) - parseFloat(rootStyle.paddingRight);
+            // Стрелки занимают место: проверяем, помещаются ли табы без них.
+            if (trackElement.scrollWidth + paddingLeft + paddingRight <= availableWidth) {
+                setFirstItemVisible(true);
+                setLastItemVisible(true);
+                return;
+            }
+            const maxScrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth - paddingRight;
+            const scrollLeft = Math.round(scrollElement.scrollLeft);
+            setFirstItemVisible(scrollLeft <= paddingLeft);
+            setLastItemVisible(scrollLeft >= maxScrollLeft);
+        }, []);
         const handleScroll = useCallback((event)=>{
             event.stopPropagation();
-            const scrollElStyle = getComputedStyle(event.currentTarget);
-            const minScrollLeft = parseInt(scrollElStyle.paddingLeft, 10);
-            const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth - parseInt(scrollElStyle.paddingRight, 10);
-            const scrollLeft = Math.round(event.currentTarget.scrollLeft);
-            setFirstItemVisible(scrollLeft <= minScrollLeft);
-            setLastItemVisible(scrollLeft >= maxScrollLeft);
+            updateArrowVisibility();
         }, [
-            setFirstItemVisible,
-            setLastItemVisible
+            updateArrowVisibility
         ]);
+        useResizeObserver(scrollRef, updateArrowVisibility);
+        useResizeObserver(trackRef, updateArrowVisibility);
         const onKeyDown = useCallback((event)=>{
             if (index === undefined) {
                 return;
@@ -167,9 +187,10 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
             index
         ]);
         useLayoutEffect(()=>{
-            setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);
+            updateArrowVisibility();
         }, [
-            clip
+            clip,
+            updateArrowVisibility
         ]);
         // Этот хук компенсирует появление левой стрелки при прокрутке
         useLayoutEffect(()=>{

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

@@ -6,20 +6,20 @@ const mergedConfig = mergeConfig(tooltipConfig);
 const Tooltip = component(mergedConfig);
 export const Hint = styled(Tooltip).withConfig({
     displayName: "TextArea.styles__Hint",
-    componentId: "sc-c4ef6801-0"
+    componentId: "sc-f7d3359e-0"
 })([
     ``
 ]);
 export const OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-c4ef6801-1"
+    componentId: "sc-f7d3359e-1"
 })([
-    `display:flex;align-items:center;margin-bottom:`,
+    `display:flex;align-items:flex-start;margin-bottom:`,
     `;`
 ], ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelMarginBottom})`);
 export const StyledLabel = styled.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-c4ef6801-2"
+    componentId: "sc-f7d3359e-2"
 })([
     `position:relative;display:inline-flex;color:var(`,
     `,var(`,
@@ -39,25 +39,26 @@ export const 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 const TitleCaption = styled.div.withConfig({
     displayName: "TextArea.styles__TitleCaption",
-    componentId: "sc-c4ef6801-3"
+    componentId: "sc-f7d3359e-3"
 })([
-    `display:inline-block;margin-left:auto;font-family:var(`,
+    `display:inline-block;margin-left:auto;margin-top:var(`,
+    `,0);font-family:var(`,
     `);font-size:var(`,
     `);font-style:var(`,
     `);font-weight:var(`,
     `);letter-spacing:var(`,
     `);line-height:var(`,
     `);`
-], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
+], tokens.titleCaptionMargin, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
 export const StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicatorWrapper",
-    componentId: "sc-c4ef6801-4"
+    componentId: "sc-f7d3359e-4"
 })([
     `position:relative;display:inline-flex;align-items:center;`
 ]);
 export const StyledOptionalText = styled.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-c4ef6801-5"
+    componentId: "sc-f7d3359e-5"
 })([
     `color:var(`,
     `);font-family:`,
@@ -70,7 +71,7 @@ export const StyledOptionalText = styled.span.withConfig({
 ], tokens.optionalColor, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontFamily}, var(${tokens.inputFontFamily}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontSize}, var(${tokens.inputFontSize}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontStyle}, var(${tokens.inputFontStyle}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontWeight}, var(${tokens.inputFontWeight}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterLetterSpacing}, var(${tokens.inputLetterSpacing}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterLineHeight}, var(${tokens.inputLineHeight}))`);
 export const StyledHintWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-c4ef6801-6"
+    componentId: "sc-f7d3359e-6"
 })([
     `display:inline-flex;line-height:0;margin:var(`,
     `);&.`,
@@ -79,7 +80,7 @@ export const StyledHintWrapper = styled.div.withConfig({
 ], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export const HintTargetWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintTargetWrapper",
-    componentId: "sc-c4ef6801-7"
+    componentId: "sc-f7d3359e-7"
 })([
     `color:var(`,
     `);width:var(`,
@@ -88,13 +89,13 @@ export const HintTargetWrapper = styled.div.withConfig({
 ], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
 export const HintIconWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-c4ef6801-8"
+    componentId: "sc-f7d3359e-8"
 })([
     ``
 ]);
 export const StyledTextAreaWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-c4ef6801-9"
+    componentId: "sc-f7d3359e-9"
 })([
     `display:flex;flex-direction:column;background-color:var(`,
     `);flex:`,
@@ -107,14 +108,14 @@ export const StyledTextAreaWrapper = styled.div.withConfig({
 ], tokens.inputBackgroundColor, ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset', privateTokens.wrapperPaddingBottomInnerLabel, ({ hasHelper, isClear })=>hasHelper && !isClear ? '0rem' : `var(${tokens.inputPaddingBottomInnerLabel}, var(${tokens.inputPaddingBottom}))`, ({ hasHeader })=>hasHeader ? 'unset' : `var(${tokens.inputPaddingTop})`, ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${tokens.inputPaddingBottomWithHelpers})` : `var(${tokens.inputPaddingBottom})`, ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${tokens.borderRadiusWithHelpers})` : `var(${tokens.borderRadius})`);
 export const StyledContentWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContentWrapper",
-    componentId: "sc-c4ef6801-10"
+    componentId: "sc-f7d3359e-10"
 })([
     `position:relative;width:100%;height:0;padding-top:`,
     `;`
 ], ({ hasHeader })=>hasHeader ? `var(${tokens.inputPaddingTop})` : 'unset');
 export const StyledContent = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-c4ef6801-11"
+    componentId: "sc-f7d3359e-11"
 })([
     `position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;color:var(`,
     `);top:`,
@@ -127,34 +128,34 @@ export const StyledContent = styled.div.withConfig({
 ], tokens.rightContentColor, ({ hasHeader })=>hasHeader ? `var(${tokens.inputPaddingTop})` : `var(${tokens.rightContentTop})`, tokens.rightContentRight, tokens.rightContentHeight, tokens.rightContentWidth, tokens.rightContentColorHover, tokens.rightContentColorActive);
 export const StyledHeaderSlot = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHeaderSlot",
-    componentId: "sc-c4ef6801-12"
+    componentId: "sc-f7d3359e-12"
 })([
     `display:flex;flex-direction:column;`
 ]);
 export const DividerWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-c4ef6801-13"
+    componentId: "sc-f7d3359e-13"
 })([
     `background:var(`,
     `);`
 ], tokens.backgroundColor);
 export const Divider = styled.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-c4ef6801-14"
+    componentId: "sc-f7d3359e-14"
 })([
     `height:0.0625rem;background:var(`,
     `);`
 ], tokens.dividerColor);
 export const StyledContainer = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-c4ef6801-15"
+    componentId: "sc-f7d3359e-15"
 })([
     `display:flex;flex-direction:column;flex:`,
     `;min-height:0;width:100%;position:relative;`
 ], ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset');
 export const StyledTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-c4ef6801-16"
+    componentId: "sc-f7d3359e-16"
 })([
     `display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(`,
     `);caret-color:var(`,
@@ -184,7 +185,7 @@ export const StyledTextArea = styled.textarea.withConfig({
 ], tokens.inputColor, tokens.inputCaretColor, ({ resize })=>resize || 'none', ({ cols })=>cols ? 'unset' : '100%', privateTokens.inputActualHeight, ({ hasExplicitHeight })=>hasExplicitHeight ? '100%' : `calc(var(${tokens.inputHeight}) - var(${tokens.inputPaddingBottom}))`, ({ hasExplicitHeight, rows })=>rows || hasExplicitHeight ? 'unset' : `var(${privateTokens.inputActualHeight})`, tokens.inputMinHeight, ({ hasContentRight })=>hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent}, 0)` : `var(${tokens.inputPaddingRight}, 0)`, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarBorderRadius, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarBorderRadius);
 export const StyledHiddenTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledHiddenTextArea",
-    componentId: "sc-c4ef6801-17"
+    componentId: "sc-f7d3359e-17"
 })([
     ``,
     `:calc(var(`,
@@ -204,7 +205,7 @@ export const StyledHiddenTextArea = styled.textarea.withConfig({
 ], privateTokens.scrollbarCompensationPadding, tokens.borderSize, tokens.scrollbarMarginRight, ({ cols })=>cols ? 'unset' : '100%', tokens.inputMinHeight, ({ cols })=>cols ? 'unset' : '0.0625rem !important', ({ hasContentRight })=>hasContentRight ? `calc(var(${privateTokens.scrollbarCompensationPadding}, 0) + var(${tokens.inputPaddingRightWithRightContent}, 0))` : `calc(var(${privateTokens.scrollbarCompensationPadding}, 0) + var(${tokens.inputPaddingRight}, 0))`, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export const StyledHelpers = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHelpers",
-    componentId: "sc-c4ef6801-18"
+    componentId: "sc-f7d3359e-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(`,
@@ -217,7 +218,7 @@ export const StyledHelpers = styled.div.withConfig({
 ], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
 export const StyledOutsideHelpersWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
-    componentId: "sc-c4ef6801-19"
+    componentId: "sc-f7d3359e-19"
 })([
     `box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(`,
     `);padding-right:var(`,
@@ -227,7 +228,7 @@ export const StyledOutsideHelpersWrapper = styled.div.withConfig({
 ], tokens.outsideHelpersPaddingTop, tokens.outsideHelpersPaddingRight, tokens.outsideHelpersPaddingBottom, tokens.outsideHelpersPaddingLeft);
 export const StyledLeftHelper = styled.span.withConfig({
     displayName: "TextArea.styles__StyledLeftHelper",
-    componentId: "sc-c4ef6801-20"
+    componentId: "sc-f7d3359e-20"
 })([
     `overflow:var(`,
     `,hidden);text-overflow:var(`,
@@ -246,14 +247,14 @@ export const StyledLeftHelper = styled.span.withConfig({
 ], tokens.leftHelperOverflow, tokens.leftHelperTextOverflow, tokens.leftHelperWhiteSpace, tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor, classes.leftHelperFocus, tokens.leftHelperColorFocus, tokens.leftHelperColor);
 export const StyledRightHelper = styled(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-c4ef6801-21"
+    componentId: "sc-f7d3359e-21"
 })([
     `color:var(`,
     `);margin-left:auto;`
 ], tokens.rightHelperColor);
 export const StyledPlaceholder = styled.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-c4ef6801-22"
+    componentId: "sc-f7d3359e-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(`,
     `,var(`,
@@ -270,7 +271,7 @@ export const StyledPlaceholder = styled.label.withConfig({
 ], tokens.labelInnerColor, tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, ({ hasContentRight })=>hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent})` : `var(${tokens.inputPaddingRight})`, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export const StyledIndicator = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicator",
-    componentId: "sc-c4ef6801-23"
+    componentId: "sc-f7d3359e-23"
 })([
     `position:absolute;border-radius:50%;z-index:1;background-color:var(`,
     `);&.`,

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

@@ -130,6 +130,7 @@ export const tokens = {
     titleCaptionColor: '--plasma-textarea__title-caption-color',
     titleCaptionColorReadOnly: '--plasma-textarea__title-caption-color-readonly',
     titleCaptionInnerLabelOffset: '--plasma-textarea__title-caption-label-inner-offset',
+    titleCaptionMargin: '--plasma-textarea__title-caption-margin',
     titleCaptionFontFamily: '--plasma-textarea__title-caption-font-family',
     titleCaptionFontStyle: '--plasma-textarea__title-caption-font-style',
     titleCaptionFontSize: '--plasma-textarea__title-caption-font-size',

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

@@ -34,6 +34,7 @@ export const textFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
     onChange, onChangeChips, onSearch, onKeyDown, onFocus, onBlur, onPaste, onScroll, // Пропсы для внутреннего использования, не отдается наружу.
     // @ts-ignore
     _onEnterDisabled, // @ts-ignore
+    _onFieldClick, // @ts-ignore
     _forceChipManipulationWithReadonly, /** Внутреннее свойство _interaction_disabled нужно для компонента Select,
                  * в режиме textfield-like, чтобы запретить взаимодействие с компонентом. */ // @ts-ignore
     _interaction_disabled = false, ...rest }, ref)=>{
@@ -181,7 +182,12 @@ export const textFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             _interaction_disabled
         });
         const onChipClick = (event)=>event.stopPropagation();
-        const handleInputFocus = ()=>{
+        const handleInputFocus = (event)=>{
+            const targetLabel = event.target.closest('label');
+            if (targetLabel && event.currentTarget.contains(targetLabel)) {
+                return;
+            }
+            _onFieldClick?.(event);
             if (readOnly || disabled || !inputRef?.current || _interaction_disabled) {
                 return;
             }
@@ -253,7 +259,6 @@ export const textFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             disabled: disabled,
             readOnly: !disabled && readOnly,
             labelPlacement: innerLabelPlacementValue,
-            onClick: handleInputFocus,
             "data-root": true,
             className: cx(labelPlacementClass, clearClass, hasDividerClass, hasInnerHintClass, classes.textFieldGroupItem, className),
             style: style,
@@ -265,7 +270,7 @@ export const textFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
             isInnerLabel: labelPlacement === 'inner'
         }, hasOuterLabel && /*#__PURE__*/ React.createElement(StyledIndicatorWrapper, null, /*#__PURE__*/ React.createElement(Label, {
             id: labelId,
-            htmlFor: id
+            htmlFor: innerId
         }, innerLabelValue), hintText && /*#__PURE__*/ React.createElement(StyledHintWrapper, null, /*#__PURE__*/ React.createElement(HintComponent, {
             ref: hintForkRef,
             hintText: hintText,
@@ -284,9 +289,9 @@ export const textFieldRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, className,
         })), required && hasRequiredIndicator && /*#__PURE__*/ React.createElement(StyledIndicator, {
             className: cx(classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
         }), optionalTextNode), titleCaption && /*#__PURE__*/ React.createElement(TitleCaption, {
-            "data-root": true,
-            hasLabel: hasOuterLabel
+            "data-root": true
         }, titleCaption)), /*#__PURE__*/ React.createElement(InputWrapper, {
+            onClick: handleInputFocus,
             // Ref для внутреннего использования. Не отдается наружу.
             ref: rest.inputWrapperRef,
             className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent, classes.inputWrapper)