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

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

@@ -52,10 +52,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Target = /*#__PURE__*/ (0, _react.forwardRef)(({ target, renderTarget, value, opened, valueToItemMap, label, placeholder, onKeyDown, labelPlacement, size, view, contentLeft, contentRight, disabled, readOnly, renderValue, inputWrapperRef, multiselect, helperText, treeId, activeDescendantItemValue, isTargetAmount, handleChange, chipView, chipType, chipClickArea, keepPlaceholder, requiredProps, hintProps }, ref)=>{
+const Target = /*#__PURE__*/ (0, _react.forwardRef)(({ target, renderTarget, value, opened, valueToItemMap, label, titleCaption, placeholder, onKeyDown, onClick, labelPlacement, size, view, contentLeft, contentRight, disabled, readOnly, renderValue, inputWrapperRef, multiselect, helperText, treeId, activeDescendantItemValue, isTargetAmount, handleChange, chipView, chipType, chipClickArea, keepPlaceholder, requiredProps, hintProps, appearance, hasDivider }, ref)=>{
     const buttonRef = (0, _hooks.useForkRef)(ref, inputWrapperRef);
     if (renderTarget) {
         return /*#__PURE__*/ _react.default.createElement(_ui.RenderTarget, {
+            onClick: onClick,
             inputWrapperRef: inputWrapperRef,
             multiselect: multiselect,
             value: value,
@@ -65,6 +66,7 @@ const Target = /*#__PURE__*/ (0, _react.forwardRef)(({ target, renderTarget, val
         });
     }
     return target === 'button-like' ? /*#__PURE__*/ _react.default.createElement(_ui.Button, {
+        onClick: onClick,
         ref: buttonRef,
         opened: opened,
         value: value,
@@ -79,12 +81,14 @@ const Target = /*#__PURE__*/ (0, _react.forwardRef)(({ target, renderTarget, val
         multiselect: multiselect,
         isTargetAmount: isTargetAmount
     }) : /*#__PURE__*/ _react.default.createElement(_ui.Textfield, {
+        onClick: onClick,
         ref: ref,
         inputWrapperRef: inputWrapperRef,
         opened: opened,
         multiselect: multiselect,
         value: value,
         label: label,
+        titleCaption: titleCaption,
         placeholder: placeholder,
         onKeyDown: onKeyDown,
         labelPlacement: labelPlacement,
@@ -106,6 +110,8 @@ const Target = /*#__PURE__*/ (0, _react.forwardRef)(({ target, renderTarget, val
         chipClickArea: chipClickArea,
         keepPlaceholder: keepPlaceholder,
         requiredProps: requiredProps,
-        hintProps: hintProps
+        hintProps: hintProps,
+        appearance: appearance,
+        hasDivider: hasDivider
     });
 });

package/dist/styled-components/cjs/components/Select/ui/Target/ui/Button/Button.js

@@ -54,12 +54,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Button = /*#__PURE__*/ (0, _react.forwardRef)(({ opened, value, valueToItemMap, onKeyDown, label, size, disabled, renderValue, treeId, activeDescendantItemValue, multiselect, isTargetAmount }, ref)=>{
+const Button = /*#__PURE__*/ (0, _react.forwardRef)(({ opened, value, valueToItemMap, onKeyDown, onClick, label, size, disabled, renderValue, treeId, activeDescendantItemValue, multiselect, isTargetAmount }, ref)=>{
     const withArrowInverse = opened ? _Selecttokens.classes.arrowInverse : undefined;
     return /*#__PURE__*/ _react.default.createElement(_Buttonstyles.ButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledButton, {
         ref: ref,
         stretching: "filled",
         onKeyDown: onKeyDown,
+        onClick: onClick,
         className: opened ? _Selecttokens.classes.selectWithoutBoxShadow : undefined,
         disabled: disabled,
         contentRight: /*#__PURE__*/ _react.default.createElement(_Buttonstyles.IconArrowWrapper, null, /*#__PURE__*/ _react.default.createElement(_Buttonstyles.StyledArrow, {

package/dist/styled-components/cjs/components/Select/ui/Target/ui/RenderTarget/RenderTarget.js

@@ -14,7 +14,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const RenderTarget = ({ multiselect, value, opened, renderTarget, valueToItemMap, inputWrapperRef })=>{
+const RenderTarget = ({ multiselect, value, opened, renderTarget, valueToItemMap, inputWrapperRef, onClick })=>{
     let content;
     if (multiselect) {
         const selectedItems = value.map((itemValue)=>valueToItemMap.get(itemValue)).filter((item)=>Boolean(item));
@@ -24,6 +24,7 @@ const RenderTarget = ({ multiselect, value, opened, renderTarget, valueToItemMap
         content = renderTarget(selectedItem, opened);
     }
     return /*#__PURE__*/ _react.default.createElement("div", {
-        ref: inputWrapperRef
+        ref: inputWrapperRef,
+        onClick: onClick
     }, content);
 };

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

@@ -53,7 +53,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Textfield = /*#__PURE__*/ (0, _react.forwardRef)(({ inputWrapperRef, opened, multiselect, value, label, labelPlacement, keepPlaceholder, placeholder, onKeyDown, size, view, contentLeft, contentRight, helperText, treeId, activeDescendantItemValue, disabled, readOnly, isTargetAmount, valueToItemMap, renderValue, handleChange, chipView, chipType, chipClickArea, requiredProps, hintProps }, ref)=>{
+const Textfield = /*#__PURE__*/ (0, _react.forwardRef)(({ inputWrapperRef, opened, multiselect, value, label, titleCaption, labelPlacement, keepPlaceholder, placeholder, onKeyDown, onClick, size, view, contentLeft, contentRight, helperText, treeId, activeDescendantItemValue, disabled, readOnly, isTargetAmount, valueToItemMap, renderValue, handleChange, chipView, chipType, chipClickArea, requiredProps, hintProps, appearance, hasDivider }, ref)=>{
     const withArrowInverse = opened ? _Selecttokens.classes.arrowInverse : undefined;
     const getValue = ()=>{
         if (multiselect || Array.isArray(value) || !value) {
@@ -114,12 +114,14 @@ const Textfield = /*#__PURE__*/ (0, _react.forwardRef)(({ inputWrapperRef, opene
         view: view,
         ref: ref,
         inputWrapperRef: inputWrapperRef,
+        _onFieldClick: onClick,
         readOnly: readOnly,
         className: readOnly ? _Selecttokens.classes.readOnly : undefined,
         value: getValue(),
         labelPlacement: labelPlacement,
         disabled: disabled,
         label: label,
+        titleCaption: titleCaption,
         keepPlaceholder: keepPlaceholder,
         placeholder: value instanceof Array && value.length ? '' : placeholder,
         contentLeft: contentLeft,
@@ -153,6 +155,8 @@ const Textfield = /*#__PURE__*/ (0, _react.forwardRef)(({ inputWrapperRef, opene
         _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
         ,
         opened: opened,
+        appearance: appearance,
+        hasDivider: hasDivider,
         // TODO: #1547
         _forceChipManipulationWithReadonly: !readOnly,
         _interaction_disabled: true,

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

@@ -37,11 +37,15 @@ function _interop_require_default(obj) {
 }
 const mergedConfig = (0, _engines.mergeConfig)(_TextField.textFieldConfig);
 const TextField = (0, _engines.component)(mergedConfig);
+const placeholderColorHover = `var(${_Selecttokens.tokens.textFieldPlaceholderColorHover}, var(${_Selecttokens.tokens.textFieldPlaceholderColor}))`;
+const openedValueColor = `var(${_Selecttokens.tokens.textFieldColorFocus}, var(${_Selecttokens.tokens.textFieldColor}))`;
 const StyledTextField = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "Textfield.styles__StyledTextField",
-    componentId: "sc-53edf520-0"
+    componentId: "sc-2ea0ed3d-0"
 })([
     ``,
+    `:`,
+    `;`,
     `:var(`,
     `);`,
     `:`,
@@ -72,6 +76,18 @@ const StyledTextField = (0, _styledcomponents.default)(TextField).withConfig({
     `;`,
     `:`,
     `;`,
+    `:var(`,
+    `);`,
+    `:var(`,
+    `);`,
+    `:`,
+    `;`,
+    `:`,
+    `;`,
+    `:var(`,
+    `);`,
+    `:`,
+    `;`,
     `:`,
     `;`,
     `:var(`,
@@ -341,11 +357,15 @@ const StyledTextField = (0, _styledcomponents.default)(TextField).withConfig({
     `:var(`,
     `);`,
     `:var(`,
+    `);`,
+    `:var(`,
+    `);`,
+    `:var(`,
     `);&:not([readonly]),&:not([readonly]) input,&:not([readonly]) label{cursor:pointer;}`
-], _TextField.textFieldTokens.color, _Selecttokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBackgroundColorFocus})` : `var(${_Selecttokens.tokens.textFieldBackgroundColor})`, _TextField.textFieldTokens.borderColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBorderColorFocus})` : `var(${_Selecttokens.tokens.textFieldBorderColor})`, _TextField.textFieldTokens.labelColor, _Selecttokens.tokens.textFieldLabelColor, _TextField.textFieldTokens.leftHelperColor, _Selecttokens.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.colorReadOnly, _Selecttokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _Selecttokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _Selecttokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _Selecttokens.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.labelColorReadOnly, _Selecttokens.tokens.textFieldLabelColor, _TextField.textFieldTokens.borderColorReadOnly, _Selecttokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.readOnlyOpacity, _Selecttokens.tokens.textFieldReadOnlyOpacity, _TextField.textFieldTokens.placeholderColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldPlaceholderColorFocus})` : `var(${_Selecttokens.tokens.textFieldPlaceholderColor})`, _TextField.textFieldTokens.placeholderColorFocus, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldPlaceholderColorFocus})` : `var(${_Selecttokens.tokens.textFieldPlaceholderColor})`, _TextField.textFieldTokens.backgroundColorHover, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBackgroundColorFocus})` : `var(${_Selecttokens.tokens.textFieldBackgroundColorHover})`, _TextField.textFieldTokens.borderColorHover, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBorderColorFocus})` : `var(${_Selecttokens.tokens.textFieldBorderColorHover})`, _TextField.textFieldTokens.borderColorFocus, _Selecttokens.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.optionalColor, _Selecttokens.tokens.textFieldOptionalColor, _TextField.textFieldTokens.height, _Selecttokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Selecttokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Selecttokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Selecttokens.tokens.textFieldPadding, _TextField.textFieldTokens.paddingWithChips, _Selecttokens.tokens.textFieldPaddingWithChips, _TextField.textFieldTokens.leftContentMargin, _Selecttokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Selecttokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.rightContentWithHintMargin, _Selecttokens.tokens.textFieldRightContentWithHintMargin, _TextField.textFieldTokens.contentRightWrapperGap, _Selecttokens.tokens.textFieldContentRightWrapperGap, _TextField.textFieldTokens.contentRightWrapperMargin, _Selecttokens.tokens.textFieldContentRightWrapperMargin, _TextField.textFieldTokens.fontFamily, _Selecttokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontStyle, _Selecttokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontSize, _Selecttokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontWeight, _Selecttokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Selecttokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Selecttokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.contentSlotColor, _Selecttokens.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _Selecttokens.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _Selecttokens.tokens.textFieldContentSlotColorActive, _TextField.textFieldTokens.contentSlotRightColor, _Selecttokens.tokens.textFieldContentSlotRightColor, _TextField.textFieldTokens.contentSlotRightColorHover, _Selecttokens.tokens.textFieldContentSlotRightColorHover, _TextField.textFieldTokens.contentSlotRightColorActive, _Selecttokens.tokens.textFieldContentSlotRightColorActive, _TextField.textFieldTokens.labelOffset, _Selecttokens.tokens.textFieldLabelOffset, _TextField.textFieldTokens.labelFontFamily, _Selecttokens.tokens.textFieldLabelFontFamily, _TextField.textFieldTokens.labelFontStyle, _Selecttokens.tokens.textFieldLabelFontStyle, _TextField.textFieldTokens.labelFontSize, _Selecttokens.tokens.textFieldLabelFontSize, _TextField.textFieldTokens.labelFontWeight, _Selecttokens.tokens.textFieldLabelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _Selecttokens.tokens.textFieldLabelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _Selecttokens.tokens.textFieldLabelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _Selecttokens.tokens.textFieldLabelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontStyle, _Selecttokens.tokens.textFieldLabelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontSize, _Selecttokens.tokens.textFieldLabelInnerFontSize, _TextField.textFieldTokens.labelInnerFontWeight, _Selecttokens.tokens.textFieldLabelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _Selecttokens.tokens.textFieldLabelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _Selecttokens.tokens.textFieldLabelInnerLineHeight, _TextField.textFieldTokens.labelInnerPadding, _Selecttokens.tokens.textFieldLabelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _Selecttokens.tokens.textFieldContentLabelInnerPadding, _TextField.textFieldTokens.titleCaptionColor, _Selecttokens.tokens.textFieldTitleCaptionColor, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _Selecttokens.tokens.textFieldTitleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _Selecttokens.tokens.textFieldTitleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontStyle, _Selecttokens.tokens.textFieldTitleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontSize, _Selecttokens.tokens.textFieldTitleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontWeight, _Selecttokens.tokens.textFieldTitleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _Selecttokens.tokens.textFieldTitleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _Selecttokens.tokens.textFieldTitleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _Selecttokens.tokens.textFieldLeftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _Selecttokens.tokens.textFieldLeftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontStyle, _Selecttokens.tokens.textFieldLeftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontSize, _Selecttokens.tokens.textFieldLeftHelperFontSize, _TextField.textFieldTokens.leftHelperFontWeight, _Selecttokens.tokens.textFieldLeftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _Selecttokens.tokens.textFieldLeftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _Selecttokens.tokens.textFieldLeftHelperLineHeight, _TextField.textFieldTokens.textBeforeColor, _Selecttokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Selecttokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Selecttokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Selecttokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.disabledOpacity, _Selecttokens.tokens.textFieldDisabledOpacity, _TextField.textFieldTokens.disabledBackgroundOpacity, _Selecttokens.tokens.textFieldDisabledBackgroundOpacity, _TextField.textFieldTokens.disabledInnerContentOpacity, _Selecttokens.tokens.textFieldDisabledInnerContentOpacity, _TextField.textFieldTokens.hintCustomIconTargetSize, _Selecttokens.tokens.textFieldHintCustomIconTargetSize, _TextField.textFieldTokens.hintMargin, _Selecttokens.tokens.textFieldHintMargin, _TextField.textFieldTokens.hintTargetSize, _Selecttokens.tokens.textFieldHintTargetSize, _TextField.textFieldTokens.hintIconColor, _Selecttokens.tokens.textFieldHintIconColor, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _Selecttokens.tokens.textFieldHintInnerLabelPlacementOffset, _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, _Selecttokens.tokens.textFieldClearHintInnerLabelPlacementOffset, _TextField.textFieldTokens.tooltipBackgroundColor, _Selecttokens.tokens.textFieldTooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _Selecttokens.tokens.textFieldTooltipBoxShadow, _TextField.textFieldTokens.tooltipColor, _Selecttokens.tokens.textFieldTooltipColor, _TextField.textFieldTokens.tooltipPaddingTop, _Selecttokens.tokens.textFieldTooltipPaddingTop, _TextField.textFieldTokens.tooltipPaddingRight, _Selecttokens.tokens.textFieldTooltipPaddingRight, _TextField.textFieldTokens.tooltipPaddingBottom, _Selecttokens.tokens.textFieldTooltipPaddingBottom, _TextField.textFieldTokens.tooltipPaddingLeft, _Selecttokens.tokens.textFieldTooltipPaddingLeft, _TextField.textFieldTokens.tooltipMinHeight, _Selecttokens.tokens.textFieldTooltipMinHeight, _TextField.textFieldTokens.tooltipBorderRadius, _Selecttokens.tokens.textFieldTooltipBorderRadius, _TextField.textFieldTokens.tooltipTextFontFamily, _Selecttokens.tokens.textFieldTooltipTextFontFamily, _TextField.textFieldTokens.tooltipTextFontSize, _Selecttokens.tokens.textFieldTooltipTextFontSize, _TextField.textFieldTokens.tooltipTextFontStyle, _Selecttokens.tokens.textFieldTooltipTextFontStyle, _TextField.textFieldTokens.tooltipTextFontWeight, _Selecttokens.tokens.textFieldTooltipTextFontWeight, _TextField.textFieldTokens.tooltipTextFontLetterSpacing, _Selecttokens.tokens.textFieldTooltipTextFontLetterSpacing, _TextField.textFieldTokens.tooltipTextFontLineHeight, _Selecttokens.tokens.textFieldTooltipTextFontLineHeight, _TextField.textFieldTokens.tooltipContentLeftMargin, _Selecttokens.tokens.textFieldTooltipContentLeftMargin, _TextField.textFieldTokens.tooltipArrowMaskWidth, _Selecttokens.tokens.textFieldTooltipArrowMaskWidth, _TextField.textFieldTokens.tooltipArrowMaskHeight, _Selecttokens.tokens.textFieldTooltipArrowMaskHeight, _TextField.textFieldTokens.tooltipArrowMaskImage, _Selecttokens.tokens.textFieldTooltipArrowMaskImage, _TextField.textFieldTokens.tooltipArrowHeight, _Selecttokens.tokens.textFieldTooltipArrowHeight, _TextField.textFieldTokens.tooltipArrowEdgeMargin, _Selecttokens.tokens.textFieldTooltipArrowEdgeMargin, _TextField.textFieldTokens.tooltipArrowBackground, _Selecttokens.tokens.textFieldTooltipArrowBackground, _TextField.textFieldTokens.chipHeight, _Selecttokens.tokens.textFieldChipHeight, _TextField.textFieldTokens.chipBorderRadius, _Selecttokens.tokens.textFieldChipBorderRadius, _TextField.textFieldTokens.chipGap, _Selecttokens.tokens.textFieldChipGap, _TextField.textFieldTokens.chipColor, _Selecttokens.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorHover, _Selecttokens.tokens.textFieldChipColorHover, _TextField.textFieldTokens.chipBackground, _Selecttokens.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundHover, _Selecttokens.tokens.textFieldChipBackgroundHover, _TextField.textFieldTokens.chipBackgroundActive, _Selecttokens.tokens.textFieldChipBackgroundActive, _TextField.textFieldTokens.chipColorActive, _Selecttokens.tokens.textFieldChipColorActive, _TextField.textFieldTokens.chipCloseIconColor, _Selecttokens.tokens.textFieldChipCloseIconColor, _TextField.textFieldTokens.chipCloseIconColorHover, _Selecttokens.tokens.textFieldChipCloseIconColorHover, _TextField.textFieldTokens.chipCloseIconColorReadonly, _Selecttokens.tokens.textFieldChipCloseIconColorReadonly, _TextField.textFieldTokens.chipOutlineSize, _Selecttokens.tokens.textFieldChipOutlineSize, _TextField.textFieldTokens.chipWidth, _Selecttokens.tokens.textFieldChipWidth, _TextField.textFieldTokens.chipPadding, _Selecttokens.tokens.textFieldChipPadding, _TextField.textFieldTokens.chipCloseIconSize, _Selecttokens.tokens.textFieldChipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _Selecttokens.tokens.textFieldChipFontFamily, _TextField.textFieldTokens.chipFontSize, _Selecttokens.tokens.textFieldChipFontSize, _TextField.textFieldTokens.chipFontStyle, _Selecttokens.tokens.textFieldChipFontStyle, _TextField.textFieldTokens.chipFontWeight, _Selecttokens.tokens.textFieldChipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _Selecttokens.tokens.textFieldChipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _Selecttokens.tokens.textFieldChipLineHeight, _TextField.textFieldTokens.chipColorReadOnly, _Selecttokens.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorReadOnlyHover, _Selecttokens.tokens.textFieldChipColor, _TextField.textFieldTokens.chipBackgroundReadOnly, _Selecttokens.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _Selecttokens.tokens.textFieldChipBackgroundHover, _TextField.textFieldTokens.chipClearContentMarginLeft, _Selecttokens.tokens.textFieldChipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _Selecttokens.tokens.textFieldChipClearContentMarginRight, _TextField.textFieldTokens.chipsFlexWrap, _Selecttokens.tokens.textFieldChipsFlexWrap, _TextField.textFieldTokens.scrollableWrapperOverflow, _Selecttokens.tokens.textFieldScrollableWrapperOverflow, _TextField.textFieldTokens.scrollableWrapperHeight, _Selecttokens.tokens.textFieldScrollableWrapperHeight, _TextField.textFieldTokens.inputContainerDisplay, _Selecttokens.tokens.textFieldInputContainerDisplay, _TextField.textFieldTokens.indicatorColor, _Selecttokens.tokens.textFieldIndicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _Selecttokens.tokens.textFieldIndicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _Selecttokens.tokens.textFieldIndicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _Selecttokens.tokens.textFieldIndicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _Selecttokens.tokens.textFieldIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuterRight, _TextField.textFieldTokens.clearIndicatorLabelPlacementInner, _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInner, _TextField.textFieldTokens.clearIndicatorLabelPlacementInnerRight, _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.clearIndicatorHintInnerRight, _Selecttokens.tokens.textFieldClearIndicatorHintInnerRight, _TextField.textFieldTokens.focusColor, _Selecttokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.boxShadow, _Selecttokens.tokens.textFieldBoxShadow, _TextField.textFieldTokens.boxShadowSecondary, _Selecttokens.tokens.textFieldBoxShadowSecondary);
+], _TextField.textFieldTokens.color, ({ opened })=>opened ? openedValueColor : `var(${_Selecttokens.tokens.textFieldColor})`, _TextField.textFieldTokens.colorFocus, _Selecttokens.tokens.textFieldColorFocus, _TextField.textFieldTokens.backgroundColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBackgroundColorFocus})` : `var(${_Selecttokens.tokens.textFieldBackgroundColor})`, _TextField.textFieldTokens.borderColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBorderColorFocus})` : `var(${_Selecttokens.tokens.textFieldBorderColor})`, _TextField.textFieldTokens.labelColor, _Selecttokens.tokens.textFieldLabelColor, _TextField.textFieldTokens.leftHelperColor, _Selecttokens.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.colorReadOnly, _Selecttokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _Selecttokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _Selecttokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _Selecttokens.tokens.textFieldLeftHelperColor, _TextField.textFieldTokens.labelColorReadOnly, _Selecttokens.tokens.textFieldLabelColor, _TextField.textFieldTokens.borderColorReadOnly, _Selecttokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.readOnlyOpacity, _Selecttokens.tokens.textFieldReadOnlyOpacity, _TextField.textFieldTokens.placeholderColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldPlaceholderColorFocus})` : `var(${_Selecttokens.tokens.textFieldPlaceholderColor})`, _TextField.textFieldTokens.placeholderColorHover, placeholderColorHover, _TextField.textFieldTokens.placeholderColorFocus, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldPlaceholderColorFocus})` : `var(${_Selecttokens.tokens.textFieldPlaceholderColor})`, _TextField.textFieldTokens.clearPlaceholderColor, _Selecttokens.tokens.textFieldClearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _Selecttokens.tokens.textFieldClearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColorHover, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBackgroundColorFocus})` : `var(${_Selecttokens.tokens.textFieldBackgroundColorHover})`, _TextField.textFieldTokens.borderColorHover, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldBorderColorFocus})` : `var(${_Selecttokens.tokens.textFieldBorderColorHover})`, _TextField.textFieldTokens.borderColorFocus, _Selecttokens.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.dividerColor, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldDividerColorFocus})` : `var(${_Selecttokens.tokens.textFieldDividerColor})`, _TextField.textFieldTokens.dividerColorHover, ({ opened })=>opened ? `var(${_Selecttokens.tokens.textFieldDividerColorFocus})` : `var(${_Selecttokens.tokens.textFieldDividerColorHover})`, _TextField.textFieldTokens.dividerColorFocus, _Selecttokens.tokens.textFieldDividerColorFocus, _TextField.textFieldTokens.dividerColorReadOnly, _Selecttokens.tokens.textFieldDividerColorReadOnly, _TextField.textFieldTokens.optionalColor, _Selecttokens.tokens.textFieldOptionalColor, _TextField.textFieldTokens.height, _Selecttokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _Selecttokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _Selecttokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _Selecttokens.tokens.textFieldPadding, _TextField.textFieldTokens.paddingWithChips, _Selecttokens.tokens.textFieldPaddingWithChips, _TextField.textFieldTokens.leftContentMargin, _Selecttokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _Selecttokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.rightContentWithHintMargin, _Selecttokens.tokens.textFieldRightContentWithHintMargin, _TextField.textFieldTokens.contentRightWrapperGap, _Selecttokens.tokens.textFieldContentRightWrapperGap, _TextField.textFieldTokens.contentRightWrapperMargin, _Selecttokens.tokens.textFieldContentRightWrapperMargin, _TextField.textFieldTokens.fontFamily, _Selecttokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontStyle, _Selecttokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontSize, _Selecttokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontWeight, _Selecttokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _Selecttokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _Selecttokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.contentSlotColor, _Selecttokens.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _Selecttokens.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _Selecttokens.tokens.textFieldContentSlotColorActive, _TextField.textFieldTokens.contentSlotRightColor, _Selecttokens.tokens.textFieldContentSlotRightColor, _TextField.textFieldTokens.contentSlotRightColorHover, _Selecttokens.tokens.textFieldContentSlotRightColorHover, _TextField.textFieldTokens.contentSlotRightColorActive, _Selecttokens.tokens.textFieldContentSlotRightColorActive, _TextField.textFieldTokens.labelOffset, _Selecttokens.tokens.textFieldLabelOffset, _TextField.textFieldTokens.labelFontFamily, _Selecttokens.tokens.textFieldLabelFontFamily, _TextField.textFieldTokens.labelFontStyle, _Selecttokens.tokens.textFieldLabelFontStyle, _TextField.textFieldTokens.labelFontSize, _Selecttokens.tokens.textFieldLabelFontSize, _TextField.textFieldTokens.labelFontWeight, _Selecttokens.tokens.textFieldLabelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _Selecttokens.tokens.textFieldLabelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _Selecttokens.tokens.textFieldLabelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _Selecttokens.tokens.textFieldLabelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontStyle, _Selecttokens.tokens.textFieldLabelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontSize, _Selecttokens.tokens.textFieldLabelInnerFontSize, _TextField.textFieldTokens.labelInnerFontWeight, _Selecttokens.tokens.textFieldLabelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _Selecttokens.tokens.textFieldLabelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _Selecttokens.tokens.textFieldLabelInnerLineHeight, _TextField.textFieldTokens.labelInnerPadding, _Selecttokens.tokens.textFieldLabelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _Selecttokens.tokens.textFieldContentLabelInnerPadding, _TextField.textFieldTokens.titleCaptionColor, _Selecttokens.tokens.textFieldTitleCaptionColor, _TextField.textFieldTokens.titleCaptionMargin, _Selecttokens.tokens.textFieldTitleCaptionMargin, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _Selecttokens.tokens.textFieldTitleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _Selecttokens.tokens.textFieldTitleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontStyle, _Selecttokens.tokens.textFieldTitleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontSize, _Selecttokens.tokens.textFieldTitleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontWeight, _Selecttokens.tokens.textFieldTitleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _Selecttokens.tokens.textFieldTitleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _Selecttokens.tokens.textFieldTitleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _Selecttokens.tokens.textFieldLeftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _Selecttokens.tokens.textFieldLeftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontStyle, _Selecttokens.tokens.textFieldLeftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontSize, _Selecttokens.tokens.textFieldLeftHelperFontSize, _TextField.textFieldTokens.leftHelperFontWeight, _Selecttokens.tokens.textFieldLeftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _Selecttokens.tokens.textFieldLeftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _Selecttokens.tokens.textFieldLeftHelperLineHeight, _TextField.textFieldTokens.textBeforeColor, _Selecttokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _Selecttokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _Selecttokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _Selecttokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.disabledOpacity, _Selecttokens.tokens.textFieldDisabledOpacity, _TextField.textFieldTokens.disabledBackgroundOpacity, _Selecttokens.tokens.textFieldDisabledBackgroundOpacity, _TextField.textFieldTokens.disabledInnerContentOpacity, _Selecttokens.tokens.textFieldDisabledInnerContentOpacity, _TextField.textFieldTokens.hintCustomIconTargetSize, _Selecttokens.tokens.textFieldHintCustomIconTargetSize, _TextField.textFieldTokens.hintMargin, _Selecttokens.tokens.textFieldHintMargin, _TextField.textFieldTokens.hintTargetSize, _Selecttokens.tokens.textFieldHintTargetSize, _TextField.textFieldTokens.hintIconColor, _Selecttokens.tokens.textFieldHintIconColor, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _Selecttokens.tokens.textFieldHintInnerLabelPlacementOffset, _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, _Selecttokens.tokens.textFieldClearHintInnerLabelPlacementOffset, _TextField.textFieldTokens.tooltipBackgroundColor, _Selecttokens.tokens.textFieldTooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _Selecttokens.tokens.textFieldTooltipBoxShadow, _TextField.textFieldTokens.tooltipColor, _Selecttokens.tokens.textFieldTooltipColor, _TextField.textFieldTokens.tooltipPaddingTop, _Selecttokens.tokens.textFieldTooltipPaddingTop, _TextField.textFieldTokens.tooltipPaddingRight, _Selecttokens.tokens.textFieldTooltipPaddingRight, _TextField.textFieldTokens.tooltipPaddingBottom, _Selecttokens.tokens.textFieldTooltipPaddingBottom, _TextField.textFieldTokens.tooltipPaddingLeft, _Selecttokens.tokens.textFieldTooltipPaddingLeft, _TextField.textFieldTokens.tooltipMinHeight, _Selecttokens.tokens.textFieldTooltipMinHeight, _TextField.textFieldTokens.tooltipBorderRadius, _Selecttokens.tokens.textFieldTooltipBorderRadius, _TextField.textFieldTokens.tooltipTextFontFamily, _Selecttokens.tokens.textFieldTooltipTextFontFamily, _TextField.textFieldTokens.tooltipTextFontSize, _Selecttokens.tokens.textFieldTooltipTextFontSize, _TextField.textFieldTokens.tooltipTextFontStyle, _Selecttokens.tokens.textFieldTooltipTextFontStyle, _TextField.textFieldTokens.tooltipTextFontWeight, _Selecttokens.tokens.textFieldTooltipTextFontWeight, _TextField.textFieldTokens.tooltipTextFontLetterSpacing, _Selecttokens.tokens.textFieldTooltipTextFontLetterSpacing, _TextField.textFieldTokens.tooltipTextFontLineHeight, _Selecttokens.tokens.textFieldTooltipTextFontLineHeight, _TextField.textFieldTokens.tooltipContentLeftMargin, _Selecttokens.tokens.textFieldTooltipContentLeftMargin, _TextField.textFieldTokens.tooltipArrowMaskWidth, _Selecttokens.tokens.textFieldTooltipArrowMaskWidth, _TextField.textFieldTokens.tooltipArrowMaskHeight, _Selecttokens.tokens.textFieldTooltipArrowMaskHeight, _TextField.textFieldTokens.tooltipArrowMaskImage, _Selecttokens.tokens.textFieldTooltipArrowMaskImage, _TextField.textFieldTokens.tooltipArrowHeight, _Selecttokens.tokens.textFieldTooltipArrowHeight, _TextField.textFieldTokens.tooltipArrowEdgeMargin, _Selecttokens.tokens.textFieldTooltipArrowEdgeMargin, _TextField.textFieldTokens.tooltipArrowBackground, _Selecttokens.tokens.textFieldTooltipArrowBackground, _TextField.textFieldTokens.chipHeight, _Selecttokens.tokens.textFieldChipHeight, _TextField.textFieldTokens.chipBorderRadius, _Selecttokens.tokens.textFieldChipBorderRadius, _TextField.textFieldTokens.chipGap, _Selecttokens.tokens.textFieldChipGap, _TextField.textFieldTokens.chipColor, _Selecttokens.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorHover, _Selecttokens.tokens.textFieldChipColorHover, _TextField.textFieldTokens.chipBackground, _Selecttokens.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundHover, _Selecttokens.tokens.textFieldChipBackgroundHover, _TextField.textFieldTokens.chipBackgroundActive, _Selecttokens.tokens.textFieldChipBackgroundActive, _TextField.textFieldTokens.chipColorActive, _Selecttokens.tokens.textFieldChipColorActive, _TextField.textFieldTokens.chipCloseIconColor, _Selecttokens.tokens.textFieldChipCloseIconColor, _TextField.textFieldTokens.chipCloseIconColorHover, _Selecttokens.tokens.textFieldChipCloseIconColorHover, _TextField.textFieldTokens.chipCloseIconColorReadonly, _Selecttokens.tokens.textFieldChipCloseIconColorReadonly, _TextField.textFieldTokens.chipOutlineSize, _Selecttokens.tokens.textFieldChipOutlineSize, _TextField.textFieldTokens.chipWidth, _Selecttokens.tokens.textFieldChipWidth, _TextField.textFieldTokens.chipPadding, _Selecttokens.tokens.textFieldChipPadding, _TextField.textFieldTokens.chipCloseIconSize, _Selecttokens.tokens.textFieldChipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _Selecttokens.tokens.textFieldChipFontFamily, _TextField.textFieldTokens.chipFontSize, _Selecttokens.tokens.textFieldChipFontSize, _TextField.textFieldTokens.chipFontStyle, _Selecttokens.tokens.textFieldChipFontStyle, _TextField.textFieldTokens.chipFontWeight, _Selecttokens.tokens.textFieldChipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _Selecttokens.tokens.textFieldChipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _Selecttokens.tokens.textFieldChipLineHeight, _TextField.textFieldTokens.chipColorReadOnly, _Selecttokens.tokens.textFieldChipColor, _TextField.textFieldTokens.chipColorReadOnlyHover, _Selecttokens.tokens.textFieldChipColor, _TextField.textFieldTokens.chipBackgroundReadOnly, _Selecttokens.tokens.textFieldChipBackground, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _Selecttokens.tokens.textFieldChipBackgroundHover, _TextField.textFieldTokens.chipClearContentMarginLeft, _Selecttokens.tokens.textFieldChipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _Selecttokens.tokens.textFieldChipClearContentMarginRight, _TextField.textFieldTokens.chipsFlexWrap, _Selecttokens.tokens.textFieldChipsFlexWrap, _TextField.textFieldTokens.scrollableWrapperOverflow, _Selecttokens.tokens.textFieldScrollableWrapperOverflow, _TextField.textFieldTokens.scrollableWrapperHeight, _Selecttokens.tokens.textFieldScrollableWrapperHeight, _TextField.textFieldTokens.inputContainerDisplay, _Selecttokens.tokens.textFieldInputContainerDisplay, _TextField.textFieldTokens.indicatorColor, _Selecttokens.tokens.textFieldIndicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _Selecttokens.tokens.textFieldIndicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _Selecttokens.tokens.textFieldIndicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _Selecttokens.tokens.textFieldIndicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _Selecttokens.tokens.textFieldIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuterRight, _TextField.textFieldTokens.clearIndicatorLabelPlacementInner, _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInner, _TextField.textFieldTokens.clearIndicatorLabelPlacementInnerRight, _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.clearIndicatorHintInnerRight, _Selecttokens.tokens.textFieldClearIndicatorHintInnerRight, _TextField.textFieldTokens.focusColor, _Selecttokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.boxShadow, _Selecttokens.tokens.textFieldBoxShadow, _TextField.textFieldTokens.boxShadowSecondary, _Selecttokens.tokens.textFieldBoxShadowSecondary);
 const IconArrowWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Textfield.styles__IconArrowWrapper",
-    componentId: "sc-53edf520-1"
+    componentId: "sc-2ea0ed3d-1"
 })([
     `line-height:0;color:var(`,
     `);cursor:`,
@@ -360,7 +380,7 @@ const sizeMap = {
 };
 const StyledArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureDownCentered).withConfig({
     displayName: "Textfield.styles__StyledArrow",
-    componentId: "sc-53edf520-2"
+    componentId: "sc-2ea0ed3d-2"
 })([
     `width:`,
     `;height:`,
@@ -368,7 +388,7 @@ const StyledArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureDownCente
 ], ({ size = 'xs' })=>`var(${_Selecttokens.tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${_Selecttokens.tokens.disclosureIconSize}, ${sizeMap[size]})`);
 const StyledLeftHelper = _styledcomponents.default.span.withConfig({
     displayName: "Textfield.styles__StyledLeftHelper",
-    componentId: "sc-53edf520-3"
+    componentId: "sc-2ea0ed3d-3"
 })([
     `margin:0;padding:0;`
 ]);

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

@@ -19,6 +19,7 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _utils = require("../../../../../utils");
+const _hooks = require("../../../../../hooks");
 const _Icon = require("../../../../_Icon");
 const _tokens = require("../../../tokens");
 const _TabsContext = require("../../../TabsContext");
@@ -182,18 +183,37 @@ const horizontalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
             disabled,
             isFilled
         ]);
+        const updateArrowVisibility = (0, _react.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 = (0, _react.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
         ]);
+        (0, _hooks.useResizeObserver)(scrollRef, updateArrowVisibility);
+        (0, _hooks.useResizeObserver)(trackRef, updateArrowVisibility);
         const onKeyDown = (0, _react.useCallback)((event)=>{
             if (index === undefined) {
                 return;
@@ -230,9 +250,10 @@ const horizontalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
             index
         ]);
         (0, _react.useLayoutEffect)(()=>{
-            setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);
+            updateArrowVisibility();
         }, [
-            clip
+            clip,
+            updateArrowVisibility
         ]);
         // Этот хук компенсирует появление левой стрелки при прокрутке
         (0, _react.useLayoutEffect)(()=>{

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

@@ -95,20 +95,20 @@ const mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
 const Tooltip = (0, _engines.component)(mergedConfig);
 const Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
     displayName: "TextArea.styles__Hint",
-    componentId: "sc-c4ef6801-0"
+    componentId: "sc-f7d3359e-0"
 })([
     ``
 ]);
 const OuterLabelWrapper = _styledcomponents.default.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(${_TextAreatokens.tokens.titleCaptionInnerLabelOffset})` : `var(${_TextAreatokens.tokens.labelMarginBottom})`);
 const StyledLabel = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-c4ef6801-2"
+    componentId: "sc-f7d3359e-2"
 })([
     `position:relative;display:inline-flex;color:var(`,
     `,var(`,
@@ -128,25 +128,26 @@ const StyledLabel = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.labelOuterColor, _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.labelOuterFontFamily, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.labelOuterFontSize, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.labelOuterFontStyle, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.labelOuterFontWeight, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.labelOuterLetterSpacing, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.labelOuterLineHeight, _TextAreatokens.tokens.inputLineHeight);
 const TitleCaption = _styledcomponents.default.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(`,
     `);`
-], _TextAreatokens.tokens.titleCaptionFontFamily, _TextAreatokens.tokens.titleCaptionFontSize, _TextAreatokens.tokens.titleCaptionFontStyle, _TextAreatokens.tokens.titleCaptionFontWeight, _TextAreatokens.tokens.titleCaptionLetterSpacing, _TextAreatokens.tokens.titleCaptionLineHeight);
+], _TextAreatokens.tokens.titleCaptionMargin, _TextAreatokens.tokens.titleCaptionFontFamily, _TextAreatokens.tokens.titleCaptionFontSize, _TextAreatokens.tokens.titleCaptionFontStyle, _TextAreatokens.tokens.titleCaptionFontWeight, _TextAreatokens.tokens.titleCaptionLetterSpacing, _TextAreatokens.tokens.titleCaptionLineHeight);
 const StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledIndicatorWrapper",
-    componentId: "sc-c4ef6801-4"
+    componentId: "sc-f7d3359e-4"
 })([
     `position:relative;display:inline-flex;align-items:center;`
 ]);
 const StyledOptionalText = _styledcomponents.default.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-c4ef6801-5"
+    componentId: "sc-f7d3359e-5"
 })([
     `color:var(`,
     `);font-family:`,
@@ -159,7 +160,7 @@ const StyledOptionalText = _styledcomponents.default.span.withConfig({
 ], _TextAreatokens.tokens.optionalColor, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${_TextAreatokens.tokens.labelOuterFontFamily}, var(${_TextAreatokens.tokens.inputFontFamily}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${_TextAreatokens.tokens.labelOuterFontSize}, var(${_TextAreatokens.tokens.inputFontSize}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${_TextAreatokens.tokens.labelOuterFontStyle}, var(${_TextAreatokens.tokens.inputFontStyle}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${_TextAreatokens.tokens.labelOuterFontWeight}, var(${_TextAreatokens.tokens.inputFontWeight}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${_TextAreatokens.tokens.labelOuterLetterSpacing}, var(${_TextAreatokens.tokens.inputLetterSpacing}))`, ({ inheritFont })=>inheritFont ? 'inherit' : `var(${_TextAreatokens.tokens.labelOuterLineHeight}, var(${_TextAreatokens.tokens.inputLineHeight}))`);
 const StyledHintWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-c4ef6801-6"
+    componentId: "sc-f7d3359e-6"
 })([
     `display:inline-flex;line-height:0;margin:var(`,
     `);&.`,
@@ -168,7 +169,7 @@ const StyledHintWrapper = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.hintMargin, _TextAreatokens.classes.innerLabelPlacement, _TextAreatokens.tokens.hintInnerLabelPlacementOffset);
 const HintTargetWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__HintTargetWrapper",
-    componentId: "sc-c4ef6801-7"
+    componentId: "sc-f7d3359e-7"
 })([
     `color:var(`,
     `);width:var(`,
@@ -177,13 +178,13 @@ const HintTargetWrapper = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.hintIconColor, _TextAreatokens.tokens.hintTargetSize, _TextAreatokens.tokens.hintTargetSize);
 const HintIconWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-c4ef6801-8"
+    componentId: "sc-f7d3359e-8"
 })([
     ``
 ]);
 const StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-c4ef6801-9"
+    componentId: "sc-f7d3359e-9"
 })([
     `display:flex;flex-direction:column;background-color:var(`,
     `);flex:`,
@@ -196,14 +197,14 @@ const StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.inputBackgroundColor, ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset', _TextAreatokens.privateTokens.wrapperPaddingBottomInnerLabel, ({ hasHelper, isClear })=>hasHelper && !isClear ? '0rem' : `var(${_TextAreatokens.tokens.inputPaddingBottomInnerLabel}, var(${_TextAreatokens.tokens.inputPaddingBottom}))`, ({ hasHeader })=>hasHeader ? 'unset' : `var(${_TextAreatokens.tokens.inputPaddingTop})`, ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${_TextAreatokens.tokens.inputPaddingBottomWithHelpers})` : `var(${_TextAreatokens.tokens.inputPaddingBottom})`, ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${_TextAreatokens.tokens.borderRadiusWithHelpers})` : `var(${_TextAreatokens.tokens.borderRadius})`);
 const StyledContentWrapper = _styledcomponents.default.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(${_TextAreatokens.tokens.inputPaddingTop})` : 'unset');
 const StyledContent = _styledcomponents.default.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:`,
@@ -216,34 +217,34 @@ const StyledContent = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.rightContentColor, ({ hasHeader })=>hasHeader ? `var(${_TextAreatokens.tokens.inputPaddingTop})` : `var(${_TextAreatokens.tokens.rightContentTop})`, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight, _TextAreatokens.tokens.rightContentWidth, _TextAreatokens.tokens.rightContentColorHover, _TextAreatokens.tokens.rightContentColorActive);
 const StyledHeaderSlot = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__StyledHeaderSlot",
-    componentId: "sc-c4ef6801-12"
+    componentId: "sc-f7d3359e-12"
 })([
     `display:flex;flex-direction:column;`
 ]);
 const DividerWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-c4ef6801-13"
+    componentId: "sc-f7d3359e-13"
 })([
     `background:var(`,
     `);`
 ], _TextAreatokens.tokens.backgroundColor);
 const Divider = _styledcomponents.default.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-c4ef6801-14"
+    componentId: "sc-f7d3359e-14"
 })([
     `height:0.0625rem;background:var(`,
     `);`
 ], _TextAreatokens.tokens.dividerColor);
 const StyledContainer = _styledcomponents.default.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');
 const StyledTextArea = _styledcomponents.default.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(`,
@@ -273,7 +274,7 @@ const StyledTextArea = _styledcomponents.default.textarea.withConfig({
 ], _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.inputCaretColor, ({ resize })=>resize || 'none', ({ cols })=>cols ? 'unset' : '100%', _TextAreatokens.privateTokens.inputActualHeight, ({ hasExplicitHeight })=>hasExplicitHeight ? '100%' : `calc(var(${_TextAreatokens.tokens.inputHeight}) - var(${_TextAreatokens.tokens.inputPaddingBottom}))`, ({ hasExplicitHeight, rows })=>rows || hasExplicitHeight ? 'unset' : `var(${_TextAreatokens.privateTokens.inputActualHeight})`, _TextAreatokens.tokens.inputMinHeight, ({ hasContentRight })=>hasContentRight ? `var(${_TextAreatokens.tokens.inputPaddingRightWithRightContent}, 0)` : `var(${_TextAreatokens.tokens.inputPaddingRight}, 0)`, _TextAreatokens.tokens.inputPaddingLeft, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight, _TextAreatokens.tokens.inputColorFocus, _TextAreatokens.tokens.scrollbarWidth, _TextAreatokens.tokens.scrollbarThumbBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth, _TextAreatokens.tokens.scrollbarBorderRadius, _TextAreatokens.tokens.scrollbarTrackBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth, _TextAreatokens.tokens.scrollbarBorderRadius);
 const StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
     displayName: "TextArea.styles__StyledHiddenTextArea",
-    componentId: "sc-c4ef6801-17"
+    componentId: "sc-f7d3359e-17"
 })([
     ``,
     `:calc(var(`,
@@ -293,7 +294,7 @@ const StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
 ], _TextAreatokens.privateTokens.scrollbarCompensationPadding, _TextAreatokens.tokens.borderSize, _TextAreatokens.tokens.scrollbarMarginRight, ({ cols })=>cols ? 'unset' : '100%', _TextAreatokens.tokens.inputMinHeight, ({ cols })=>cols ? 'unset' : '0.0625rem !important', ({ hasContentRight })=>hasContentRight ? `calc(var(${_TextAreatokens.privateTokens.scrollbarCompensationPadding}, 0) + var(${_TextAreatokens.tokens.inputPaddingRightWithRightContent}, 0))` : `calc(var(${_TextAreatokens.privateTokens.scrollbarCompensationPadding}, 0) + var(${_TextAreatokens.tokens.inputPaddingRight}, 0))`, _TextAreatokens.tokens.inputPaddingLeft, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
 const StyledHelpers = _styledcomponents.default.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(`,
@@ -306,7 +307,7 @@ const StyledHelpers = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.helpersBackgroundColor, _TextAreatokens.tokens.helpersPaddingTop, _TextAreatokens.tokens.helpersPaddingRight, _TextAreatokens.tokens.helpersPaddingBottom, _TextAreatokens.tokens.helpersPaddingLeft, _TextAreatokens.tokens.borderRadius, _TextAreatokens.tokens.borderRadius);
 const StyledOutsideHelpersWrapper = _styledcomponents.default.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(`,
@@ -316,7 +317,7 @@ const StyledOutsideHelpersWrapper = _styledcomponents.default.div.withConfig({
 ], _TextAreatokens.tokens.outsideHelpersPaddingTop, _TextAreatokens.tokens.outsideHelpersPaddingRight, _TextAreatokens.tokens.outsideHelpersPaddingBottom, _TextAreatokens.tokens.outsideHelpersPaddingLeft);
 const StyledLeftHelper = _styledcomponents.default.span.withConfig({
     displayName: "TextArea.styles__StyledLeftHelper",
-    componentId: "sc-c4ef6801-20"
+    componentId: "sc-f7d3359e-20"
 })([
     `overflow:var(`,
     `,hidden);text-overflow:var(`,
@@ -335,14 +336,14 @@ const StyledLeftHelper = _styledcomponents.default.span.withConfig({
 ], _TextAreatokens.tokens.leftHelperOverflow, _TextAreatokens.tokens.leftHelperTextOverflow, _TextAreatokens.tokens.leftHelperWhiteSpace, _TextAreatokens.tokens.helpersFontFamily, _TextAreatokens.tokens.helpersFontSize, _TextAreatokens.tokens.helpersFontStyle, _TextAreatokens.tokens.helpersFontWeight, _TextAreatokens.tokens.helpersLetterSpacing, _TextAreatokens.tokens.helpersLineHeight, _TextAreatokens.tokens.leftHelperColor, _TextAreatokens.classes.leftHelperFocus, _TextAreatokens.tokens.leftHelperColorFocus, _TextAreatokens.tokens.leftHelperColor);
 const StyledRightHelper = (0, _styledcomponents.default)(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-c4ef6801-21"
+    componentId: "sc-f7d3359e-21"
 })([
     `color:var(`,
     `);margin-left:auto;`
 ], _TextAreatokens.tokens.rightHelperColor);
 const StyledPlaceholder = _styledcomponents.default.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(`,
@@ -359,7 +360,7 @@ const StyledPlaceholder = _styledcomponents.default.label.withConfig({
 ], _TextAreatokens.tokens.labelInnerColor, _TextAreatokens.tokens.placeholderColor, _TextAreatokens.tokens.inputPaddingTop, _TextAreatokens.tokens.inputPaddingLeft, ({ hasContentRight })=>hasContentRight ? `var(${_TextAreatokens.tokens.inputPaddingRightWithRightContent})` : `var(${_TextAreatokens.tokens.inputPaddingRight})`, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
 const StyledIndicator = _styledcomponents.default.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/cjs/components/TextArea/TextArea.tokens.js

@@ -151,6 +151,7 @@ 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/cjs/components/TextField/TextField.js

@@ -96,6 +96,7 @@ const textFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
     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)=>{
@@ -243,7 +244,12 @@ const textFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             _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;
             }
@@ -315,7 +321,6 @@ const textFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             disabled: disabled,
             readOnly: !disabled && readOnly,
             labelPlacement: innerLabelPlacementValue,
-            onClick: handleInputFocus,
             "data-root": true,
             className: (0, _utils.cx)(labelPlacementClass, clearClass, hasDividerClass, hasInnerHintClass, _TextFieldtokens.classes.textFieldGroupItem, className),
             style: style,
@@ -327,7 +332,7 @@ const textFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
             isInnerLabel: labelPlacement === 'inner'
         }, hasOuterLabel && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledIndicatorWrapper, null, /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.Label, {
             id: labelId,
-            htmlFor: id
+            htmlFor: innerId
         }, innerLabelValue), hintText && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledHintWrapper, null, /*#__PURE__*/ _react.default.createElement(_Hint.HintComponent, {
             ref: hintForkRef,
             hintText: hintText,
@@ -346,9 +351,9 @@ const textFieldRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, classN
         })), required && hasRequiredIndicator && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledIndicator, {
             className: (0, _utils.cx)(_TextFieldtokens.classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
         }), optionalTextNode), titleCaption && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.TitleCaption, {
-            "data-root": true,
-            hasLabel: hasOuterLabel
+            "data-root": true
         }, titleCaption)), /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.InputWrapper, {
+            onClick: handleInputFocus,
             // Ref для внутреннего использования. Не отдается наружу.
             ref: rest.inputWrapperRef,
             className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent, _TextFieldtokens.classes.inputWrapper)