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

package/dist/emotion/cjs/components/Modal/Modal.tokens.js

@@ -23,6 +23,7 @@ const classes = {
     header: 'modal-header',
     headerAbsolute: 'modal-header-absolute',
     footer: 'modal-footer',
+    footerText: 'modal-footer-text',
     image: 'modal-image',
     hasClose: 'modal-has-close',
     resizable: 'modal-resizable'
@@ -45,5 +46,15 @@ const tokens = {
     modalCloseButtonRight: '--plasma-modal-close-button-right',
     modalHeaderPadding: '--plasma-modal-header-padding',
     modalFooterPadding: '--plasma-modal-footer-padding',
-    modalFooterGap: '--plasma-modal-footer-gap'
+    modalFooterGap: '--plasma-modal-footer-gap',
+    modalFooterTextAlign: '--plasma-modal-footer-text-align',
+    modalFooterTextColor: '--plasma-modal-footer-text-color',
+    modalFooterTextFontFamily: '--plasma-modal-footer-text-font-family',
+    modalFooterTextFontSize: '--plasma-modal-footer-text-font-size',
+    modalFooterTextFontStyle: '--plasma-modal-footer-text-font-style',
+    modalFooterTextFontWeight: '--plasma-modal-footer-text-font-weight',
+    modalFooterTextLetterSpacing: '--plasma-modal-footer-text-letter-spacing',
+    modalFooterTextLineHeight: '--plasma-modal-footer-text-line-height',
+    modalFooterTextMarginTop: '--plasma-modal-footer-text-margin-top',
+    modalFooterTextPaddingBottom: '--plasma-modal-footer-text-padding-bottom'
 };

package/dist/emotion/cjs/components/Modal/ui/ModalFooter/ModalFooter.js

@@ -61,13 +61,15 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const modalFooterRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ children, view, className, ...rest }, outerRef)=>{
+const modalFooterRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ children, text, view, className, ...rest }, outerRef)=>{
         return /*#__PURE__*/ _react.default.createElement(Root, {
             ref: outerRef,
             view: view,
             className: (0, _utils.cx)(className, _Modaltokens.classes.footer),
             ...rest
-        }, children);
+        }, children, text ? /*#__PURE__*/ _react.default.createElement("div", {
+            className: _Modaltokens.classes.footerText
+        }, text) : null);
     });
 const modalFooterConfig = {
     name: 'ModalFooter',

package/dist/emotion/cjs/components/Modal/ui/ModalFooter/variations/_view/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _Modaltokens = require("../../../../Modal.tokens");
-const base = (0, /*#__PURE__*/ _react.css)("display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;gap:var(", _Modaltokens.tokens.modalFooterGap, ");padding:var(", _Modaltokens.tokens.modalFooterPadding, ");", "base");
+const base = (0, /*#__PURE__*/ _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;box-sizing:border-box;width:100%;gap:var(", _Modaltokens.tokens.modalFooterGap, ");padding:var(", _Modaltokens.tokens.modalFooterPadding, ");.", _Modaltokens.classes.footerText, "{box-sizing:border-box;width:100%;min-width:100%;margin:var(", _Modaltokens.tokens.modalFooterTextMarginTop, ") 0 0;padding:0 0 var(", _Modaltokens.tokens.modalFooterTextPaddingBottom, ");text-align:var(", _Modaltokens.tokens.modalFooterTextAlign, ");color:var(", _Modaltokens.tokens.modalFooterTextColor, ");font-family:var(", _Modaltokens.tokens.modalFooterTextFontFamily, ");font-size:var(", _Modaltokens.tokens.modalFooterTextFontSize, ");font-style:var(", _Modaltokens.tokens.modalFooterTextFontStyle, ");font-weight:var(", _Modaltokens.tokens.modalFooterTextFontWeight, ");letter-spacing:var(", _Modaltokens.tokens.modalFooterTextLetterSpacing, ");line-height:var(", _Modaltokens.tokens.modalFooterTextLineHeight, ");}", "base");

package/dist/emotion/cjs/components/Panel/Panel.tokens.js

@@ -38,5 +38,11 @@ const tokens = {
     contentBackgroundColor: '--plasma-panel-content-background-color',
     padding: '--plasma-panel-padding',
     borderRadius: '--plasma-panel-border-radius',
-    closeColor: '--plasma-panel-close-color'
+    closeColor: '--plasma-panel-close-color',
+    scrollbarWidth: '--plasma-panel-scrollbar-width',
+    scrollbarOffsetRight: '--plasma-panel-scrollbar-offset-right',
+    scrollbarThumbBackgroundColor: '--plasma-panel-scrollbar-thumb-background-color',
+    scrollbarThumbBackgroundColorHover: '--plasma-panel-scrollbar-thumb-background-color-hover',
+    scrollbarThumbBackgroundColorActive: '--plasma-panel-scrollbar-thumb-background-color-active',
+    scrollbarTrackBackgroundColor: '--plasma-panel-scrollbar-track-background-color'
 };

package/dist/emotion/cjs/components/Panel/ui/PanelContent/variations/_view/base.js

@@ -9,4 +9,12 @@ Object.defineProperty(exports, "base", {
     }
 });
 const _react = require("@emotion/react");
-const base = (0, /*#__PURE__*/ _react.css)("overflow-y:scroll;::-webkit-scrollbar{display:none;}scrollbar-width:none;flex-grow:1;padding-right:20px;box-sizing:border-box;", "base");
+const _mixins = require("../../../../../../mixins");
+const _Paneltokens = require("../../../../Panel.tokens");
+const base = (0, /*#__PURE__*/ _react.css)("overflow-y:auto;scrollbar-width:auto;", (0, _mixins.addScrollbar)({
+    scrollWidth: `var(${_Paneltokens.tokens.scrollbarWidth}, 0)`,
+    trackColor: `var(${_Paneltokens.tokens.scrollbarTrackBackgroundColor})`,
+    thumbColor: `var(${_Paneltokens.tokens.scrollbarThumbBackgroundColor})`,
+    thumbHoverColor: `var(${_Paneltokens.tokens.scrollbarThumbBackgroundColorHover}, var(${_Paneltokens.tokens.scrollbarThumbBackgroundColor}))`,
+    thumbActiveColor: `var(${_Paneltokens.tokens.scrollbarThumbBackgroundColorActive}, var(${_Paneltokens.tokens.scrollbarThumbBackgroundColor}))`
+}), "    flex-grow:1;margin-right:calc(\n        (var(", _Paneltokens.tokens.padding, ",0rem) - var(", _Paneltokens.tokens.scrollbarOffsetRight, ",var(", _Paneltokens.tokens.padding, ",0rem))) * -1\n    );padding-right:20px;box-sizing:border-box;", "base");

package/dist/emotion/cjs/components/Range/Range.js

@@ -77,8 +77,12 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
         0,
         0
     ], hintWidth, hintContentLeft, // layout
-    label, leftHelper, titleCaption, contentLeft, contentRight, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, dividerVariant = 'dash', dividerIcon, autoComplete, onChangeFirstValue, onChangeSecondValue, onSearchFirstValue, onSearchSecondValue, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, ...rest }, ref)=>{
+    label, leftHelper, titleCaption, contentLeft, contentRight, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, dividerVariant = 'dash', dividerIcon, autoComplete, onChangeFirstValue, onChangeSecondValue, onSearchFirstValue, onSearchSecondValue, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, // Пропсы для внутреннего использования, не отдается наружу.
+    // @ts-ignore
+    _onFieldClick, // @ts-ignore
+    _onContentClick, ...rest }, ref)=>{
         const { inputWrapperRef, firstTextfieldInputWrapperRef, secondTextfieldInputWrapperRef, ...rootProps } = rest;
+        const firstInputId = (0, _utils.safeUseId)();
         const rangeRef = (0, _react.useRef)(null);
         const firstTextFieldRef = (0, _react.useRef)(null);
         const secondTextFieldRef = (0, _react.useRef)(null);
@@ -165,6 +169,7 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
             className: (0, _utils.cx)(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass, rangeEditedClass, firstValueEditedClass, secondValueEditedClass, clearOuterHintClass),
             size: size,
             label: label,
+            labelHtmlFor: firstInputId,
             leftHelper: leftHelper,
             titleCaption: titleCaption,
             required: required,
@@ -188,8 +193,12 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
         }, /*#__PURE__*/ _react.default.createElement(_Rangestyles.ContentWrapper, {
             ref: inputWrapperRef,
             className: (0, _utils.cx)(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass, rangeEditedClass)
-        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentLeft, null, contentLeft), /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
+        }, contentLeft && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentLeft, {
+            onClick: _onContentClick
+        }, contentLeft), /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
+            id: firstInputId,
             ref: firstTextFieldRef,
+            _onFieldClick: _onFieldClick,
             inputWrapperRef: firstTextfieldInputWrapperRef,
             className: (0, _utils.cx)(firstValueErrorClass, firstValueSuccessClass, firstValueEditedClass),
             value: firstValue,
@@ -210,6 +219,7 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
             hasDivider: hasClearDivider
         }), Divider, /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
             ref: secondTextFieldRef,
+            _onFieldClick: _onFieldClick,
             inputWrapperRef: secondTextfieldInputWrapperRef,
             className: (0, _utils.cx)(secondValueErrorClass, secondValueSuccessClass, secondValueEditedClass),
             value: secondValue,
@@ -242,7 +252,9 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
             handleHintHide: handleHintHide,
             handleHintClick: handleHintClick,
             withoutLabel: true
-        }), contentRight && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentRight, null, contentRight)))));
+        }), contentRight && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentRight, {
+            onClick: _onContentClick
+        }, contentRight)))));
     });
 const rangeConfig = {
     name: 'Range',

package/dist/emotion/cjs/components/Range/Range.tokens.js

@@ -100,6 +100,7 @@ const tokens = {
     labelColor: '--plasma-range-info-wrapper-label-color',
     contentGap: '--plasma-range-info-wrapper-content-gap',
     titleCaptionOffset: '--plasma-range-info-wrapper-title-caption-offset',
+    titleCaptionMargin: '--plasma-range-info-wrapper-title-caption-margin',
     titleCaptionColor: '--plasma-range-info-wrapper-title-caption-color',
     titleCaptionFontFamily: '--plasma-range-info-wrapper-title-caption-font-family',
     titleCaptionFontStyle: '--plasma-range-info-wrapper-title-caption-font-style',

package/dist/emotion/cjs/components/Range/ui/InformationWrapper/InformationWrapper.styles.js

@@ -20,6 +20,6 @@ function _interop_require_default(obj) {
 const mergedConfig = (0, _engines.mergeConfig)(_InformationWrapper.informationWrapperConfig);
 const InformationWrapper = (0, _engines.component)(mergedConfig);
 const InformationWrapperUI = /*#__PURE__*/ (0, _styled.default)(InformationWrapper, {
-    target: "e1i5zz5j0",
+    target: "e192c2rq0",
     label: "InformationWrapperUI"
-})(_InformationWrapper.informationWrapperTokens.indicatorWrapperGap, ":var(", _Rangetokens.tokens.indicatorWrapperGap, ");", _InformationWrapper.informationWrapperTokens.labelWrapperOffset, ":var(", _Rangetokens.tokens.labelWrapperOffset, ");", _InformationWrapper.informationWrapperTokens.labelWrapperTitleCaptionOffset, ":var(", _Rangetokens.tokens.labelWrapperTitleCaptionOffset, ");", _InformationWrapper.informationWrapperTokens.labelFontFamily, ":var(", _Rangetokens.tokens.labelFontFamily, ");", _InformationWrapper.informationWrapperTokens.labelFontStyle, ":var(", _Rangetokens.tokens.labelFontStyle, ");", _InformationWrapper.informationWrapperTokens.labelFontSize, ":var(", _Rangetokens.tokens.labelFontSize, ");", _InformationWrapper.informationWrapperTokens.labelFontWeight, ":var(", _Rangetokens.tokens.labelFontWeight, ");", _InformationWrapper.informationWrapperTokens.labelLetterSpacing, ":var(", _Rangetokens.tokens.labelLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.labelLineHeight, ":var(", _Rangetokens.tokens.labelLineHeight, ");", _InformationWrapper.informationWrapperTokens.labelColor, ":var(", _Rangetokens.tokens.labelColor, ");", _InformationWrapper.informationWrapperTokens.contentGap, ":var(", _Rangetokens.tokens.contentGap, ");", _InformationWrapper.informationWrapperTokens.titleCaptionOffset, ":var(", _Rangetokens.tokens.titleCaptionOffset, ");", _InformationWrapper.informationWrapperTokens.titleCaptionColor, ":var(", _Rangetokens.tokens.titleCaptionColor, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontFamily, ":var(", _Rangetokens.tokens.titleCaptionFontFamily, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontStyle, ":var(", _Rangetokens.tokens.titleCaptionFontStyle, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontSize, ":var(", _Rangetokens.tokens.titleCaptionFontSize, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontWeight, ":var(", _Rangetokens.tokens.titleCaptionFontWeight, ");", _InformationWrapper.informationWrapperTokens.titleCaptionLetterSpacing, ":var(", _Rangetokens.tokens.titleCaptionLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.titleCaptionLineHeight, ":var(", _Rangetokens.tokens.titleCaptionLineHeight, ");", _InformationWrapper.informationWrapperTokens.hintMargin, ":var(", _Rangetokens.tokens.hintMargin, ");", _InformationWrapper.informationWrapperTokens.hintTargetSize, ":var(", _Rangetokens.tokens.hintTargetSize, ");", _InformationWrapper.informationWrapperTokens.hintCustomIconTargetSize, ":var(", _Rangetokens.tokens.hintCustomIconTargetSize, ");", _InformationWrapper.informationWrapperTokens.hintIconColor, ":var(", _Rangetokens.tokens.hintIconColor, ");", _InformationWrapper.informationWrapperTokens.hintWithoutLabelPlacementOffset, ":var(", _Rangetokens.tokens.hintWithoutLabelPlacementOffset, ");", _InformationWrapper.informationWrapperTokens.tooltipBackgroundColor, ":var(", _Rangetokens.tokens.tooltipBackgroundColor, ");", _InformationWrapper.informationWrapperTokens.tooltipBoxShadow, ":var(", _Rangetokens.tokens.tooltipBoxShadow, ");", _InformationWrapper.informationWrapperTokens.tooltipColor, ":var(", _Rangetokens.tokens.tooltipColor, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingTop, ":var(", _Rangetokens.tokens.tooltipPaddingTop, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingRight, ":var(", _Rangetokens.tokens.tooltipPaddingRight, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingBottom, ":var(", _Rangetokens.tokens.tooltipPaddingBottom, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingLeft, ":var(", _Rangetokens.tokens.tooltipPaddingLeft, ");", _InformationWrapper.informationWrapperTokens.tooltipMinHeight, ":var(", _Rangetokens.tokens.tooltipMinHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipBorderRadius, ":var(", _Rangetokens.tokens.tooltipBorderRadius, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontFamily, ":var(", _Rangetokens.tokens.tooltipTextFontFamily, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontSize, ":var(", _Rangetokens.tokens.tooltipTextFontSize, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontStyle, ":var(", _Rangetokens.tokens.tooltipTextFontStyle, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontWeight, ":var(", _Rangetokens.tokens.tooltipTextFontWeight, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontLetterSpacing, ":var(", _Rangetokens.tokens.tooltipTextFontLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontLineHeight, ":var(", _Rangetokens.tokens.tooltipTextFontLineHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipContentLeftMargin, ":var(", _Rangetokens.tokens.tooltipContentLeftMargin, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowMaskWidth, ":var(", _Rangetokens.tokens.tooltipArrowMaskWidth, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowMaskHeight, ":var(", _Rangetokens.tokens.tooltipArrowMaskHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowMaskImage, ":var(", _Rangetokens.tokens.tooltipArrowMaskImage, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowHeight, ":var(", _Rangetokens.tokens.tooltipArrowHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowEdgeMargin, ":var(", _Rangetokens.tokens.tooltipArrowEdgeMargin, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowBackground, ":var(", _Rangetokens.tokens.tooltipArrowBackground, ");", _InformationWrapper.informationWrapperTokens.indicatorColor, ":var(", _Rangetokens.tokens.indicatorColor, ");", _InformationWrapper.informationWrapperTokens.indicatorSizeInner, ":var(", _Rangetokens.tokens.indicatorSizeInner, ");", _InformationWrapper.informationWrapperTokens.indicatorSizeOuter, ":var(", _Rangetokens.tokens.indicatorSizeOuter, ");", _InformationWrapper.informationWrapperTokens.indicatorMarginTop, ":var(", _Rangetokens.tokens.indicatorMarginTop, ");", _InformationWrapper.informationWrapperTokens.indicatorOuterLeft, ":var(", _Rangetokens.tokens.indicatorOuterLeft, ");", _InformationWrapper.informationWrapperTokens.indicatorWithoutLabelInner, ":var(", _Rangetokens.tokens.indicatorWithoutLabelInner, ");", _InformationWrapper.informationWrapperTokens.indicatorWithoutLabelInnerLeft, ":var(", _Rangetokens.tokens.indicatorWithoutLabelInnerLeft, ");", _InformationWrapper.informationWrapperTokens.leftHelperColor, ":var(", _Rangetokens.tokens.leftHelperColor, ");", _InformationWrapper.informationWrapperTokens.helpersPadding, ":var(", _Rangetokens.tokens.helpersPadding, ");", _InformationWrapper.informationWrapperTokens.helpersGap, ":var(", _Rangetokens.tokens.helpersGap, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontFamily, ":var(", _Rangetokens.tokens.leftHelperFontFamily, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontStyle, ":var(", _Rangetokens.tokens.leftHelperFontStyle, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontSize, ":var(", _Rangetokens.tokens.leftHelperFontSize, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontWeight, ":var(", _Rangetokens.tokens.leftHelperFontWeight, ");", _InformationWrapper.informationWrapperTokens.leftHelperLetterSpacing, ":var(", _Rangetokens.tokens.leftHelperLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.leftHelperLineHeight, ":var(", _Rangetokens.tokens.leftHelperLineHeight, ");", _InformationWrapper.informationWrapperTokens.labelColorReadOnly, ":var(", _Rangetokens.tokens.labelColorReadOnly, ");", _InformationWrapper.informationWrapperTokens.titleCaptionColorReadOnly, ":var(", _Rangetokens.tokens.titleCaptionColorReadOnly, ");", _InformationWrapper.informationWrapperTokens.leftHelperColorReadOnly, ":var(", _Rangetokens.tokens.leftHelperColorReadOnly, ");", _InformationWrapper.informationWrapperTokens.rightHelperColorReadOnly, ":var(", _Rangetokens.tokens.rightHelperColorReadOnly, ");");
+})(_InformationWrapper.informationWrapperTokens.indicatorWrapperGap, ":var(", _Rangetokens.tokens.indicatorWrapperGap, ");", _InformationWrapper.informationWrapperTokens.labelWrapperOffset, ":var(", _Rangetokens.tokens.labelWrapperOffset, ");", _InformationWrapper.informationWrapperTokens.labelWrapperTitleCaptionOffset, ":var(", _Rangetokens.tokens.labelWrapperTitleCaptionOffset, ");", _InformationWrapper.informationWrapperTokens.labelFontFamily, ":var(", _Rangetokens.tokens.labelFontFamily, ");", _InformationWrapper.informationWrapperTokens.labelFontStyle, ":var(", _Rangetokens.tokens.labelFontStyle, ");", _InformationWrapper.informationWrapperTokens.labelFontSize, ":var(", _Rangetokens.tokens.labelFontSize, ");", _InformationWrapper.informationWrapperTokens.labelFontWeight, ":var(", _Rangetokens.tokens.labelFontWeight, ");", _InformationWrapper.informationWrapperTokens.labelLetterSpacing, ":var(", _Rangetokens.tokens.labelLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.labelLineHeight, ":var(", _Rangetokens.tokens.labelLineHeight, ");", _InformationWrapper.informationWrapperTokens.labelColor, ":var(", _Rangetokens.tokens.labelColor, ");", _InformationWrapper.informationWrapperTokens.contentGap, ":var(", _Rangetokens.tokens.contentGap, ");", _InformationWrapper.informationWrapperTokens.titleCaptionOffset, ":var(", _Rangetokens.tokens.titleCaptionOffset, ");", _InformationWrapper.informationWrapperTokens.titleCaptionMargin, ":var(", _Rangetokens.tokens.titleCaptionMargin, ");", _InformationWrapper.informationWrapperTokens.titleCaptionColor, ":var(", _Rangetokens.tokens.titleCaptionColor, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontFamily, ":var(", _Rangetokens.tokens.titleCaptionFontFamily, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontStyle, ":var(", _Rangetokens.tokens.titleCaptionFontStyle, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontSize, ":var(", _Rangetokens.tokens.titleCaptionFontSize, ");", _InformationWrapper.informationWrapperTokens.titleCaptionFontWeight, ":var(", _Rangetokens.tokens.titleCaptionFontWeight, ");", _InformationWrapper.informationWrapperTokens.titleCaptionLetterSpacing, ":var(", _Rangetokens.tokens.titleCaptionLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.titleCaptionLineHeight, ":var(", _Rangetokens.tokens.titleCaptionLineHeight, ");", _InformationWrapper.informationWrapperTokens.hintMargin, ":var(", _Rangetokens.tokens.hintMargin, ");", _InformationWrapper.informationWrapperTokens.hintTargetSize, ":var(", _Rangetokens.tokens.hintTargetSize, ");", _InformationWrapper.informationWrapperTokens.hintCustomIconTargetSize, ":var(", _Rangetokens.tokens.hintCustomIconTargetSize, ");", _InformationWrapper.informationWrapperTokens.hintIconColor, ":var(", _Rangetokens.tokens.hintIconColor, ");", _InformationWrapper.informationWrapperTokens.hintWithoutLabelPlacementOffset, ":var(", _Rangetokens.tokens.hintWithoutLabelPlacementOffset, ");", _InformationWrapper.informationWrapperTokens.tooltipBackgroundColor, ":var(", _Rangetokens.tokens.tooltipBackgroundColor, ");", _InformationWrapper.informationWrapperTokens.tooltipBoxShadow, ":var(", _Rangetokens.tokens.tooltipBoxShadow, ");", _InformationWrapper.informationWrapperTokens.tooltipColor, ":var(", _Rangetokens.tokens.tooltipColor, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingTop, ":var(", _Rangetokens.tokens.tooltipPaddingTop, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingRight, ":var(", _Rangetokens.tokens.tooltipPaddingRight, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingBottom, ":var(", _Rangetokens.tokens.tooltipPaddingBottom, ");", _InformationWrapper.informationWrapperTokens.tooltipPaddingLeft, ":var(", _Rangetokens.tokens.tooltipPaddingLeft, ");", _InformationWrapper.informationWrapperTokens.tooltipMinHeight, ":var(", _Rangetokens.tokens.tooltipMinHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipBorderRadius, ":var(", _Rangetokens.tokens.tooltipBorderRadius, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontFamily, ":var(", _Rangetokens.tokens.tooltipTextFontFamily, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontSize, ":var(", _Rangetokens.tokens.tooltipTextFontSize, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontStyle, ":var(", _Rangetokens.tokens.tooltipTextFontStyle, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontWeight, ":var(", _Rangetokens.tokens.tooltipTextFontWeight, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontLetterSpacing, ":var(", _Rangetokens.tokens.tooltipTextFontLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.tooltipTextFontLineHeight, ":var(", _Rangetokens.tokens.tooltipTextFontLineHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipContentLeftMargin, ":var(", _Rangetokens.tokens.tooltipContentLeftMargin, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowMaskWidth, ":var(", _Rangetokens.tokens.tooltipArrowMaskWidth, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowMaskHeight, ":var(", _Rangetokens.tokens.tooltipArrowMaskHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowMaskImage, ":var(", _Rangetokens.tokens.tooltipArrowMaskImage, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowHeight, ":var(", _Rangetokens.tokens.tooltipArrowHeight, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowEdgeMargin, ":var(", _Rangetokens.tokens.tooltipArrowEdgeMargin, ");", _InformationWrapper.informationWrapperTokens.tooltipArrowBackground, ":var(", _Rangetokens.tokens.tooltipArrowBackground, ");", _InformationWrapper.informationWrapperTokens.indicatorColor, ":var(", _Rangetokens.tokens.indicatorColor, ");", _InformationWrapper.informationWrapperTokens.indicatorSizeInner, ":var(", _Rangetokens.tokens.indicatorSizeInner, ");", _InformationWrapper.informationWrapperTokens.indicatorSizeOuter, ":var(", _Rangetokens.tokens.indicatorSizeOuter, ");", _InformationWrapper.informationWrapperTokens.indicatorMarginTop, ":var(", _Rangetokens.tokens.indicatorMarginTop, ");", _InformationWrapper.informationWrapperTokens.indicatorOuterLeft, ":var(", _Rangetokens.tokens.indicatorOuterLeft, ");", _InformationWrapper.informationWrapperTokens.indicatorWithoutLabelInner, ":var(", _Rangetokens.tokens.indicatorWithoutLabelInner, ");", _InformationWrapper.informationWrapperTokens.indicatorWithoutLabelInnerLeft, ":var(", _Rangetokens.tokens.indicatorWithoutLabelInnerLeft, ");", _InformationWrapper.informationWrapperTokens.leftHelperColor, ":var(", _Rangetokens.tokens.leftHelperColor, ");", _InformationWrapper.informationWrapperTokens.helpersPadding, ":var(", _Rangetokens.tokens.helpersPadding, ");", _InformationWrapper.informationWrapperTokens.helpersGap, ":var(", _Rangetokens.tokens.helpersGap, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontFamily, ":var(", _Rangetokens.tokens.leftHelperFontFamily, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontStyle, ":var(", _Rangetokens.tokens.leftHelperFontStyle, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontSize, ":var(", _Rangetokens.tokens.leftHelperFontSize, ");", _InformationWrapper.informationWrapperTokens.leftHelperFontWeight, ":var(", _Rangetokens.tokens.leftHelperFontWeight, ");", _InformationWrapper.informationWrapperTokens.leftHelperLetterSpacing, ":var(", _Rangetokens.tokens.leftHelperLetterSpacing, ");", _InformationWrapper.informationWrapperTokens.leftHelperLineHeight, ":var(", _Rangetokens.tokens.leftHelperLineHeight, ");", _InformationWrapper.informationWrapperTokens.labelColorReadOnly, ":var(", _Rangetokens.tokens.labelColorReadOnly, ");", _InformationWrapper.informationWrapperTokens.titleCaptionColorReadOnly, ":var(", _Rangetokens.tokens.titleCaptionColorReadOnly, ");", _InformationWrapper.informationWrapperTokens.leftHelperColorReadOnly, ":var(", _Rangetokens.tokens.leftHelperColorReadOnly, ");", _InformationWrapper.informationWrapperTokens.rightHelperColorReadOnly, ":var(", _Rangetokens.tokens.rightHelperColorReadOnly, ");");

package/dist/emotion/cjs/components/Select/FloatingPopover.js

@@ -97,7 +97,7 @@ const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, childre
         }
     }, /*#__PURE__*/ _react1.default.createElement("div", {
         ref: isTargetAsFunction ? undefined : refs.setReference,
-        onClick: handleClick
+        onClick: isTargetAsFunction ? undefined : handleClick
     }, typeof target === 'function' ? target(refs.setReference) : target), opened && // root - принимает ref контейнера портала.
     // id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
     /*#__PURE__*/ _react1.default.createElement(_react.FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/ _react1.default.createElement("div", {

package/dist/emotion/cjs/components/Select/Select.js

@@ -74,7 +74,7 @@ const selectRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         target = 'textfield-like', contentLeft, contentRight, placeholder, helperText, chipType = 'default', chipClickArea = 'full', required, requiredPlacement = 'right', optional, optionalText, hasRequiredIndicator = false, hintText, hintTrigger, hintTargetIcon, hintTargetPlacement = 'outer', hintPlacement, hintHasArrow, hintOffset = [
             0,
             8
-        ], hintWidth, hintContentLeft, label, labelPlacement, keepPlaceholder, // IsMultiselect
+        ], hintWidth, hintContentLeft, label, titleCaption, labelPlacement, keepPlaceholder, appearance, hasDivider, // IsMultiselect
         multiselect, value: outerValue, onChange: outerOnChange, isTargetAmount, renderTarget, selectAllOptions, name, defaultValue, // Private
         _offset, _checkboxAppearance, // Basic
         items, sortItems, treeView = false, arrowPlacement = 'left', placement = 'bottom', disabled = false, readOnly = false, variant = 'normal', zIndex, listMaxHeight, listWidth, portal, renderValue, renderItem, renderSelectionIcon, closeAfterSelect: outerCloseAfterSelect, beforeList, afterList, virtual = false, onScroll, onToggle, mode = 'default', flip, shift, singleLine, emptyStateDescription, // Rest
@@ -228,6 +228,7 @@ const selectRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     opened: isListOpened,
                     valueToItemMap: valueToItemMap,
                     label: label,
+                    titleCaption: titleCaption,
                     placeholder: placeholder,
                     onKeyDown: onKeyDown,
                     labelPlacement: labelPlacement,
@@ -240,6 +241,7 @@ const selectRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     readOnly: readOnly,
                     renderValue: renderValue,
                     inputWrapperRef: referenceRef,
+                    onClick: ()=>handleListToggle(!isListOpened),
                     multiselect: multiselect,
                     helperText: helperText,
                     treeId: treeId,
@@ -250,7 +252,9 @@ const selectRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     chipType: chipType,
                     chipClickArea: chipClickArea,
                     requiredProps: requiredProps,
-                    hintProps: hintProps
+                    hintProps: hintProps,
+                    appearance: appearance,
+                    hasDivider: hasDivider
                 }),
             zIndex: zIndex,
             isInner: false,

package/dist/emotion/cjs/components/Select/Select.tokens.js

@@ -96,18 +96,26 @@ const tokens = {
     buttonPadding: '--plasma-select-button-padding',
     // Токены для TextField
     textFieldColor: '--plasma-select-textfield-color',
+    textFieldColorFocus: '--plasma-select-textfield-color-focus',
     textFieldBackgroundColor: '--plasma-select-textfield-background-color',
     textFieldBackgroundColorHover: '--plasma-select-textfield-background-color-hover',
     textFieldBackgroundColorFocus: '--plasma-select-textfield-background-color-focus',
     textFieldBorderColor: '--plasma-select-textfield-border-color',
     textFieldBorderColorHover: '--plasma-select-textfield-border-color-hover',
     textFieldBorderColorFocus: '--plasma-select-textfield-border-color-focus',
+    textFieldDividerColor: '--plasma-select-textfield-divider-color',
+    textFieldDividerColorHover: '--plasma-select-textfield-divider-color-hover',
+    textFieldDividerColorFocus: '--plasma-select-textfield-divider-color-focus',
     textFieldPlaceholderColor: '--plasma-select-textfield-placeholder-color',
+    textFieldPlaceholderColorHover: '--plasma-select-textfield-placeholder-color-hover',
     textFieldPlaceholderColorFocus: '--plasma-select-textfield-placeholder-color-focus',
+    textFieldClearPlaceholderColor: '--plasma-select-textfield-clear-placeholder-color',
+    textFieldClearPlaceholderColorFocus: '--plasma-select-textfield-clear-placeholder-color-focus',
     /** Цвета для read-only состояния */ textFieldColorReadOnly: '--plasma-select-textfield-color-readonly',
     textFieldBackgroundColorReadOnly: '--plasma-select-textfield-bg-color-readonly',
     textFieldBorderColorReadOnly: '--plasma-select-textfield-border-color-readonly',
     textFieldPlaceholderColorReadOnly: '--plasma-select-textfield__placeholder-color-readonly',
+    textFieldDividerColorReadOnly: '--plasma-select-textfield-divider-color-readonly',
     textFieldHeight: '--plasma-select-textfield-height',
     textFieldBorderWidth: '--plasma-select-textfield-border-width',
     textFieldBorderRadius: '--plasma-select-textfield-border-radius',
@@ -150,6 +158,7 @@ const tokens = {
     textFieldTitleCaptionColor: '--plasma-select-textfield-title-caption-color',
     textFieldTitleCaptionColorReadOnly: '--plasma-select-textfield__title-caption-color-readonly',
     textFieldTitleCaptionInnerLabelOffset: '--plasma-select-textfield-title-caption-label-inner-offset',
+    textFieldTitleCaptionMargin: '--plasma-select-textfield-title-caption-margin',
     textFieldTitleCaptionFontFamily: '--plasma-select-textfield-title-caption-font-family',
     textFieldTitleCaptionFontStyle: '--plasma-select-textfield-title-caption-font-style',
     textFieldTitleCaptionFontSize: '--plasma-select-textfield-title-caption-font-size',

package/dist/emotion/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/emotion/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/emotion/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/emotion/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/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -37,12 +37,14 @@ 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 = /*#__PURE__*/ (0, _styled.default)(TextField, {
-    target: "e1vzyauz0",
+    target: "e107jk780",
     label: "StyledTextField"
-})(_TextField.textFieldTokens.color, ":var(", _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, ":var(", _Selecttokens.tokens.textFieldLabelColor, ");", _TextField.textFieldTokens.leftHelperColor, ":var(", _Selecttokens.tokens.textFieldLeftHelperColor, ");", _TextField.textFieldTokens.colorReadOnly, ":var(", _Selecttokens.tokens.textFieldColorReadOnly, ");", _TextField.textFieldTokens.backgroundColorReadOnly, ":var(", _Selecttokens.tokens.textFieldBackgroundColorReadOnly, ");", _TextField.textFieldTokens.placeholderColorReadOnly, ":var(", _Selecttokens.tokens.textFieldPlaceholderColorReadOnly, ");", _TextField.textFieldTokens.leftHelperColorReadOnly, ":var(", _Selecttokens.tokens.textFieldLeftHelperColor, ");", _TextField.textFieldTokens.labelColorReadOnly, ":var(", _Selecttokens.tokens.textFieldLabelColor, ");", _TextField.textFieldTokens.borderColorReadOnly, ":var(", _Selecttokens.tokens.textFieldBorderColorReadOnly, ");", _TextField.textFieldTokens.readOnlyOpacity, ":var(", _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, ":var(", _Selecttokens.tokens.textFieldBorderColorFocus, ");", _TextField.textFieldTokens.optionalColor, ":var(", _Selecttokens.tokens.textFieldOptionalColor, ");", _TextField.textFieldTokens.height, ":var(", _Selecttokens.tokens.textFieldHeight, ");", _TextField.textFieldTokens.borderWidth, ":var(", _Selecttokens.tokens.textFieldBorderWidth, ");", _TextField.textFieldTokens.borderRadius, ":var(", _Selecttokens.tokens.textFieldBorderRadius, ");", _TextField.textFieldTokens.padding, ":var(", _Selecttokens.tokens.textFieldPadding, ");", _TextField.textFieldTokens.paddingWithChips, ":var(", _Selecttokens.tokens.textFieldPaddingWithChips, ");", _TextField.textFieldTokens.leftContentMargin, ":var(", _Selecttokens.tokens.textFieldLeftContentMargin, ");", _TextField.textFieldTokens.rightContentMargin, ":var(", _Selecttokens.tokens.textFieldRightContentMargin, ");", _TextField.textFieldTokens.rightContentWithHintMargin, ":var(", _Selecttokens.tokens.textFieldRightContentWithHintMargin, ");", _TextField.textFieldTokens.contentRightWrapperGap, ":var(", _Selecttokens.tokens.textFieldContentRightWrapperGap, ");", _TextField.textFieldTokens.contentRightWrapperMargin, ":var(", _Selecttokens.tokens.textFieldContentRightWrapperMargin, ");", _TextField.textFieldTokens.fontFamily, ":var(", _Selecttokens.tokens.textFieldFontFamily, ");", _TextField.textFieldTokens.fontStyle, ":var(", _Selecttokens.tokens.textFieldFontStyle, ");", _TextField.textFieldTokens.fontSize, ":var(", _Selecttokens.tokens.textFieldFontSize, ");", _TextField.textFieldTokens.fontWeight, ":var(", _Selecttokens.tokens.textFieldFontWeight, ");", _TextField.textFieldTokens.letterSpacing, ":var(", _Selecttokens.tokens.textFieldLetterSpacing, ");", _TextField.textFieldTokens.lineHeight, ":var(", _Selecttokens.tokens.textFieldLineHeight, ");", _TextField.textFieldTokens.contentSlotColor, ":var(", _Selecttokens.tokens.textFieldContentSlotColor, ");", _TextField.textFieldTokens.contentSlotColorHover, ":var(", _Selecttokens.tokens.textFieldContentSlotColorHover, ");", _TextField.textFieldTokens.contentSlotColorActive, ":var(", _Selecttokens.tokens.textFieldContentSlotColorActive, ");", _TextField.textFieldTokens.contentSlotRightColor, ":var(", _Selecttokens.tokens.textFieldContentSlotRightColor, ");", _TextField.textFieldTokens.contentSlotRightColorHover, ":var(", _Selecttokens.tokens.textFieldContentSlotRightColorHover, ");", _TextField.textFieldTokens.contentSlotRightColorActive, ":var(", _Selecttokens.tokens.textFieldContentSlotRightColorActive, ");", _TextField.textFieldTokens.labelOffset, ":var(", _Selecttokens.tokens.textFieldLabelOffset, ");", _TextField.textFieldTokens.labelFontFamily, ":var(", _Selecttokens.tokens.textFieldLabelFontFamily, ");", _TextField.textFieldTokens.labelFontStyle, ":var(", _Selecttokens.tokens.textFieldLabelFontStyle, ");", _TextField.textFieldTokens.labelFontSize, ":var(", _Selecttokens.tokens.textFieldLabelFontSize, ");", _TextField.textFieldTokens.labelFontWeight, ":var(", _Selecttokens.tokens.textFieldLabelFontWeight, ");", _TextField.textFieldTokens.labelLetterSpacing, ":var(", _Selecttokens.tokens.textFieldLabelLetterSpacing, ");", _TextField.textFieldTokens.labelLineHeight, ":var(", _Selecttokens.tokens.textFieldLabelLineHeight, ");", _TextField.textFieldTokens.labelInnerFontFamily, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontFamily, ");", _TextField.textFieldTokens.labelInnerFontStyle, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontStyle, ");", _TextField.textFieldTokens.labelInnerFontSize, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontSize, ");", _TextField.textFieldTokens.labelInnerFontWeight, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontWeight, ");", _TextField.textFieldTokens.labelInnerLetterSpacing, ":var(", _Selecttokens.tokens.textFieldLabelInnerLetterSpacing, ");", _TextField.textFieldTokens.labelInnerLineHeight, ":var(", _Selecttokens.tokens.textFieldLabelInnerLineHeight, ");", _TextField.textFieldTokens.labelInnerPadding, ":var(", _Selecttokens.tokens.textFieldLabelInnerPadding, ");", _TextField.textFieldTokens.contentLabelInnerPadding, ":var(", _Selecttokens.tokens.textFieldContentLabelInnerPadding, ");", _TextField.textFieldTokens.titleCaptionColor, ":var(", _Selecttokens.tokens.textFieldTitleCaptionColor, ");", _TextField.textFieldTokens.titleCaptionInnerLabelOffset, ":var(", _Selecttokens.tokens.textFieldTitleCaptionInnerLabelOffset, ");", _TextField.textFieldTokens.titleCaptionFontFamily, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontFamily, ");", _TextField.textFieldTokens.titleCaptionFontStyle, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontStyle, ");", _TextField.textFieldTokens.titleCaptionFontSize, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontSize, ");", _TextField.textFieldTokens.titleCaptionFontWeight, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontWeight, ");", _TextField.textFieldTokens.titleCaptionLetterSpacing, ":var(", _Selecttokens.tokens.textFieldTitleCaptionLetterSpacing, ");", _TextField.textFieldTokens.titleCaptionLineHeight, ":var(", _Selecttokens.tokens.textFieldTitleCaptionLineHeight, ");", _TextField.textFieldTokens.leftHelperOffset, ":var(", _Selecttokens.tokens.textFieldLeftHelperOffset, ");", _TextField.textFieldTokens.leftHelperFontFamily, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontFamily, ");", _TextField.textFieldTokens.leftHelperFontStyle, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontStyle, ");", _TextField.textFieldTokens.leftHelperFontSize, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontSize, ");", _TextField.textFieldTokens.leftHelperFontWeight, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontWeight, ");", _TextField.textFieldTokens.leftHelperLetterSpacing, ":var(", _Selecttokens.tokens.textFieldLeftHelperLetterSpacing, ");", _TextField.textFieldTokens.leftHelperLineHeight, ":var(", _Selecttokens.tokens.textFieldLeftHelperLineHeight, ");", _TextField.textFieldTokens.textBeforeColor, ":var(", _Selecttokens.tokens.textFieldTextBeforeColor, ");", _TextField.textFieldTokens.textAfterColor, ":var(", _Selecttokens.tokens.textFieldTextAfterColor, ");", _TextField.textFieldTokens.textBeforeMargin, ":var(", _Selecttokens.tokens.textFieldTextBeforeMargin, ");", _TextField.textFieldTokens.textAfterMargin, ":var(", _Selecttokens.tokens.textFieldTextAfterMargin, ");", _TextField.textFieldTokens.disabledOpacity, ":var(", _Selecttokens.tokens.textFieldDisabledOpacity, ");", _TextField.textFieldTokens.disabledBackgroundOpacity, ":var(", _Selecttokens.tokens.textFieldDisabledBackgroundOpacity, ");", _TextField.textFieldTokens.disabledInnerContentOpacity, ":var(", _Selecttokens.tokens.textFieldDisabledInnerContentOpacity, ");", _TextField.textFieldTokens.hintCustomIconTargetSize, ":var(", _Selecttokens.tokens.textFieldHintCustomIconTargetSize, ");", _TextField.textFieldTokens.hintMargin, ":var(", _Selecttokens.tokens.textFieldHintMargin, ");", _TextField.textFieldTokens.hintTargetSize, ":var(", _Selecttokens.tokens.textFieldHintTargetSize, ");", _TextField.textFieldTokens.hintIconColor, ":var(", _Selecttokens.tokens.textFieldHintIconColor, ");", _TextField.textFieldTokens.hintInnerLabelPlacementOffset, ":var(", _Selecttokens.tokens.textFieldHintInnerLabelPlacementOffset, ");", _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, ":var(", _Selecttokens.tokens.textFieldClearHintInnerLabelPlacementOffset, ");", _TextField.textFieldTokens.tooltipBackgroundColor, ":var(", _Selecttokens.tokens.textFieldTooltipBackgroundColor, ");", _TextField.textFieldTokens.tooltipBoxShadow, ":var(", _Selecttokens.tokens.textFieldTooltipBoxShadow, ");", _TextField.textFieldTokens.tooltipColor, ":var(", _Selecttokens.tokens.textFieldTooltipColor, ");", _TextField.textFieldTokens.tooltipPaddingTop, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingTop, ");", _TextField.textFieldTokens.tooltipPaddingRight, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingRight, ");", _TextField.textFieldTokens.tooltipPaddingBottom, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingBottom, ");", _TextField.textFieldTokens.tooltipPaddingLeft, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingLeft, ");", _TextField.textFieldTokens.tooltipMinHeight, ":var(", _Selecttokens.tokens.textFieldTooltipMinHeight, ");", _TextField.textFieldTokens.tooltipBorderRadius, ":var(", _Selecttokens.tokens.textFieldTooltipBorderRadius, ");", _TextField.textFieldTokens.tooltipTextFontFamily, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontFamily, ");", _TextField.textFieldTokens.tooltipTextFontSize, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontSize, ");", _TextField.textFieldTokens.tooltipTextFontStyle, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontStyle, ");", _TextField.textFieldTokens.tooltipTextFontWeight, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontWeight, ");", _TextField.textFieldTokens.tooltipTextFontLetterSpacing, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontLetterSpacing, ");", _TextField.textFieldTokens.tooltipTextFontLineHeight, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontLineHeight, ");", _TextField.textFieldTokens.tooltipContentLeftMargin, ":var(", _Selecttokens.tokens.textFieldTooltipContentLeftMargin, ");", _TextField.textFieldTokens.tooltipArrowMaskWidth, ":var(", _Selecttokens.tokens.textFieldTooltipArrowMaskWidth, ");", _TextField.textFieldTokens.tooltipArrowMaskHeight, ":var(", _Selecttokens.tokens.textFieldTooltipArrowMaskHeight, ");", _TextField.textFieldTokens.tooltipArrowMaskImage, ":var(", _Selecttokens.tokens.textFieldTooltipArrowMaskImage, ");", _TextField.textFieldTokens.tooltipArrowHeight, ":var(", _Selecttokens.tokens.textFieldTooltipArrowHeight, ");", _TextField.textFieldTokens.tooltipArrowEdgeMargin, ":var(", _Selecttokens.tokens.textFieldTooltipArrowEdgeMargin, ");", _TextField.textFieldTokens.tooltipArrowBackground, ":var(", _Selecttokens.tokens.textFieldTooltipArrowBackground, ");", _TextField.textFieldTokens.chipHeight, ":var(", _Selecttokens.tokens.textFieldChipHeight, ");", _TextField.textFieldTokens.chipBorderRadius, ":var(", _Selecttokens.tokens.textFieldChipBorderRadius, ");", _TextField.textFieldTokens.chipGap, ":var(", _Selecttokens.tokens.textFieldChipGap, ");", _TextField.textFieldTokens.chipColor, ":var(", _Selecttokens.tokens.textFieldChipColor, ");", _TextField.textFieldTokens.chipColorHover, ":var(", _Selecttokens.tokens.textFieldChipColorHover, ");", _TextField.textFieldTokens.chipBackground, ":var(", _Selecttokens.tokens.textFieldChipBackground, ");", _TextField.textFieldTokens.chipBackgroundHover, ":var(", _Selecttokens.tokens.textFieldChipBackgroundHover, ");", _TextField.textFieldTokens.chipBackgroundActive, ":var(", _Selecttokens.tokens.textFieldChipBackgroundActive, ");", _TextField.textFieldTokens.chipColorActive, ":var(", _Selecttokens.tokens.textFieldChipColorActive, ");", _TextField.textFieldTokens.chipCloseIconColor, ":var(", _Selecttokens.tokens.textFieldChipCloseIconColor, ");", _TextField.textFieldTokens.chipCloseIconColorHover, ":var(", _Selecttokens.tokens.textFieldChipCloseIconColorHover, ");", _TextField.textFieldTokens.chipCloseIconColorReadonly, ":var(", _Selecttokens.tokens.textFieldChipCloseIconColorReadonly, ");", _TextField.textFieldTokens.chipOutlineSize, ":var(", _Selecttokens.tokens.textFieldChipOutlineSize, ");", _TextField.textFieldTokens.chipWidth, ":var(", _Selecttokens.tokens.textFieldChipWidth, ");", _TextField.textFieldTokens.chipPadding, ":var(", _Selecttokens.tokens.textFieldChipPadding, ");", _TextField.textFieldTokens.chipCloseIconSize, ":var(", _Selecttokens.tokens.textFieldChipCloseIconSize, ");", _TextField.textFieldTokens.chipFontFamily, ":var(", _Selecttokens.tokens.textFieldChipFontFamily, ");", _TextField.textFieldTokens.chipFontSize, ":var(", _Selecttokens.tokens.textFieldChipFontSize, ");", _TextField.textFieldTokens.chipFontStyle, ":var(", _Selecttokens.tokens.textFieldChipFontStyle, ");", _TextField.textFieldTokens.chipFontWeight, ":var(", _Selecttokens.tokens.textFieldChipFontWeight, ");", _TextField.textFieldTokens.chipLetterSpacing, ":var(", _Selecttokens.tokens.textFieldChipLetterSpacing, ");", _TextField.textFieldTokens.chipLineHeight, ":var(", _Selecttokens.tokens.textFieldChipLineHeight, ");", _TextField.textFieldTokens.chipColorReadOnly, ":var(", _Selecttokens.tokens.textFieldChipColor, ");", _TextField.textFieldTokens.chipColorReadOnlyHover, ":var(", _Selecttokens.tokens.textFieldChipColor, ");", _TextField.textFieldTokens.chipBackgroundReadOnly, ":var(", _Selecttokens.tokens.textFieldChipBackground, ");", _TextField.textFieldTokens.chipBackgroundReadOnlyHover, ":var(", _Selecttokens.tokens.textFieldChipBackgroundHover, ");", _TextField.textFieldTokens.chipClearContentMarginLeft, ":var(", _Selecttokens.tokens.textFieldChipClearContentMarginLeft, ");", _TextField.textFieldTokens.chipClearContentMarginRight, ":var(", _Selecttokens.tokens.textFieldChipClearContentMarginRight, ");", _TextField.textFieldTokens.chipsFlexWrap, ":var(", _Selecttokens.tokens.textFieldChipsFlexWrap, ");", _TextField.textFieldTokens.scrollableWrapperOverflow, ":var(", _Selecttokens.tokens.textFieldScrollableWrapperOverflow, ");", _TextField.textFieldTokens.scrollableWrapperHeight, ":var(", _Selecttokens.tokens.textFieldScrollableWrapperHeight, ");", _TextField.textFieldTokens.inputContainerDisplay, ":var(", _Selecttokens.tokens.textFieldInputContainerDisplay, ");", _TextField.textFieldTokens.indicatorColor, ":var(", _Selecttokens.tokens.textFieldIndicatorColor, ");", _TextField.textFieldTokens.indicatorSizeInner, ":var(", _Selecttokens.tokens.textFieldIndicatorSizeInner, ");", _TextField.textFieldTokens.indicatorSizeOuter, ":var(", _Selecttokens.tokens.textFieldIndicatorSizeOuter, ");", _TextField.textFieldTokens.indicatorLabelPlacementInner, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementInner, ");", _TextField.textFieldTokens.indicatorLabelPlacementOuter, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuter, ");", _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementInnerRight, ");", _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuterRight, ");", _TextField.textFieldTokens.clearIndicatorLabelPlacementInner, ":var(", _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInner, ");", _TextField.textFieldTokens.clearIndicatorLabelPlacementInnerRight, ":var(", _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInnerRight, ");", _TextField.textFieldTokens.clearIndicatorHintInnerRight, ":var(", _Selecttokens.tokens.textFieldClearIndicatorHintInnerRight, ");", _TextField.textFieldTokens.focusColor, ":var(", _Selecttokens.tokens.textFieldFocusColor, ");", _TextField.textFieldTokens.boxShadow, ":var(", _Selecttokens.tokens.textFieldBoxShadow, ");", _TextField.textFieldTokens.boxShadowSecondary, ":var(", _Selecttokens.tokens.textFieldBoxShadowSecondary, ");&:not([readonly]),&:not([readonly]) input,&:not([readonly]) label{cursor:pointer;}");
+})(_TextField.textFieldTokens.color, ":", ({ opened })=>opened ? openedValueColor : `var(${_Selecttokens.tokens.textFieldColor})`, ";", _TextField.textFieldTokens.colorFocus, ":var(", _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, ":var(", _Selecttokens.tokens.textFieldLabelColor, ");", _TextField.textFieldTokens.leftHelperColor, ":var(", _Selecttokens.tokens.textFieldLeftHelperColor, ");", _TextField.textFieldTokens.colorReadOnly, ":var(", _Selecttokens.tokens.textFieldColorReadOnly, ");", _TextField.textFieldTokens.backgroundColorReadOnly, ":var(", _Selecttokens.tokens.textFieldBackgroundColorReadOnly, ");", _TextField.textFieldTokens.placeholderColorReadOnly, ":var(", _Selecttokens.tokens.textFieldPlaceholderColorReadOnly, ");", _TextField.textFieldTokens.leftHelperColorReadOnly, ":var(", _Selecttokens.tokens.textFieldLeftHelperColor, ");", _TextField.textFieldTokens.labelColorReadOnly, ":var(", _Selecttokens.tokens.textFieldLabelColor, ");", _TextField.textFieldTokens.borderColorReadOnly, ":var(", _Selecttokens.tokens.textFieldBorderColorReadOnly, ");", _TextField.textFieldTokens.readOnlyOpacity, ":var(", _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, ":var(", _Selecttokens.tokens.textFieldClearPlaceholderColor, ");", _TextField.textFieldTokens.clearPlaceholderColorFocus, ":var(", _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, ":var(", _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, ":var(", _Selecttokens.tokens.textFieldDividerColorFocus, ");", _TextField.textFieldTokens.dividerColorReadOnly, ":var(", _Selecttokens.tokens.textFieldDividerColorReadOnly, ");", _TextField.textFieldTokens.optionalColor, ":var(", _Selecttokens.tokens.textFieldOptionalColor, ");", _TextField.textFieldTokens.height, ":var(", _Selecttokens.tokens.textFieldHeight, ");", _TextField.textFieldTokens.borderWidth, ":var(", _Selecttokens.tokens.textFieldBorderWidth, ");", _TextField.textFieldTokens.borderRadius, ":var(", _Selecttokens.tokens.textFieldBorderRadius, ");", _TextField.textFieldTokens.padding, ":var(", _Selecttokens.tokens.textFieldPadding, ");", _TextField.textFieldTokens.paddingWithChips, ":var(", _Selecttokens.tokens.textFieldPaddingWithChips, ");", _TextField.textFieldTokens.leftContentMargin, ":var(", _Selecttokens.tokens.textFieldLeftContentMargin, ");", _TextField.textFieldTokens.rightContentMargin, ":var(", _Selecttokens.tokens.textFieldRightContentMargin, ");", _TextField.textFieldTokens.rightContentWithHintMargin, ":var(", _Selecttokens.tokens.textFieldRightContentWithHintMargin, ");", _TextField.textFieldTokens.contentRightWrapperGap, ":var(", _Selecttokens.tokens.textFieldContentRightWrapperGap, ");", _TextField.textFieldTokens.contentRightWrapperMargin, ":var(", _Selecttokens.tokens.textFieldContentRightWrapperMargin, ");", _TextField.textFieldTokens.fontFamily, ":var(", _Selecttokens.tokens.textFieldFontFamily, ");", _TextField.textFieldTokens.fontStyle, ":var(", _Selecttokens.tokens.textFieldFontStyle, ");", _TextField.textFieldTokens.fontSize, ":var(", _Selecttokens.tokens.textFieldFontSize, ");", _TextField.textFieldTokens.fontWeight, ":var(", _Selecttokens.tokens.textFieldFontWeight, ");", _TextField.textFieldTokens.letterSpacing, ":var(", _Selecttokens.tokens.textFieldLetterSpacing, ");", _TextField.textFieldTokens.lineHeight, ":var(", _Selecttokens.tokens.textFieldLineHeight, ");", _TextField.textFieldTokens.contentSlotColor, ":var(", _Selecttokens.tokens.textFieldContentSlotColor, ");", _TextField.textFieldTokens.contentSlotColorHover, ":var(", _Selecttokens.tokens.textFieldContentSlotColorHover, ");", _TextField.textFieldTokens.contentSlotColorActive, ":var(", _Selecttokens.tokens.textFieldContentSlotColorActive, ");", _TextField.textFieldTokens.contentSlotRightColor, ":var(", _Selecttokens.tokens.textFieldContentSlotRightColor, ");", _TextField.textFieldTokens.contentSlotRightColorHover, ":var(", _Selecttokens.tokens.textFieldContentSlotRightColorHover, ");", _TextField.textFieldTokens.contentSlotRightColorActive, ":var(", _Selecttokens.tokens.textFieldContentSlotRightColorActive, ");", _TextField.textFieldTokens.labelOffset, ":var(", _Selecttokens.tokens.textFieldLabelOffset, ");", _TextField.textFieldTokens.labelFontFamily, ":var(", _Selecttokens.tokens.textFieldLabelFontFamily, ");", _TextField.textFieldTokens.labelFontStyle, ":var(", _Selecttokens.tokens.textFieldLabelFontStyle, ");", _TextField.textFieldTokens.labelFontSize, ":var(", _Selecttokens.tokens.textFieldLabelFontSize, ");", _TextField.textFieldTokens.labelFontWeight, ":var(", _Selecttokens.tokens.textFieldLabelFontWeight, ");", _TextField.textFieldTokens.labelLetterSpacing, ":var(", _Selecttokens.tokens.textFieldLabelLetterSpacing, ");", _TextField.textFieldTokens.labelLineHeight, ":var(", _Selecttokens.tokens.textFieldLabelLineHeight, ");", _TextField.textFieldTokens.labelInnerFontFamily, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontFamily, ");", _TextField.textFieldTokens.labelInnerFontStyle, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontStyle, ");", _TextField.textFieldTokens.labelInnerFontSize, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontSize, ");", _TextField.textFieldTokens.labelInnerFontWeight, ":var(", _Selecttokens.tokens.textFieldLabelInnerFontWeight, ");", _TextField.textFieldTokens.labelInnerLetterSpacing, ":var(", _Selecttokens.tokens.textFieldLabelInnerLetterSpacing, ");", _TextField.textFieldTokens.labelInnerLineHeight, ":var(", _Selecttokens.tokens.textFieldLabelInnerLineHeight, ");", _TextField.textFieldTokens.labelInnerPadding, ":var(", _Selecttokens.tokens.textFieldLabelInnerPadding, ");", _TextField.textFieldTokens.contentLabelInnerPadding, ":var(", _Selecttokens.tokens.textFieldContentLabelInnerPadding, ");", _TextField.textFieldTokens.titleCaptionColor, ":var(", _Selecttokens.tokens.textFieldTitleCaptionColor, ");", _TextField.textFieldTokens.titleCaptionMargin, ":var(", _Selecttokens.tokens.textFieldTitleCaptionMargin, ");", _TextField.textFieldTokens.titleCaptionInnerLabelOffset, ":var(", _Selecttokens.tokens.textFieldTitleCaptionInnerLabelOffset, ");", _TextField.textFieldTokens.titleCaptionFontFamily, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontFamily, ");", _TextField.textFieldTokens.titleCaptionFontStyle, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontStyle, ");", _TextField.textFieldTokens.titleCaptionFontSize, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontSize, ");", _TextField.textFieldTokens.titleCaptionFontWeight, ":var(", _Selecttokens.tokens.textFieldTitleCaptionFontWeight, ");", _TextField.textFieldTokens.titleCaptionLetterSpacing, ":var(", _Selecttokens.tokens.textFieldTitleCaptionLetterSpacing, ");", _TextField.textFieldTokens.titleCaptionLineHeight, ":var(", _Selecttokens.tokens.textFieldTitleCaptionLineHeight, ");", _TextField.textFieldTokens.leftHelperOffset, ":var(", _Selecttokens.tokens.textFieldLeftHelperOffset, ");", _TextField.textFieldTokens.leftHelperFontFamily, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontFamily, ");", _TextField.textFieldTokens.leftHelperFontStyle, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontStyle, ");", _TextField.textFieldTokens.leftHelperFontSize, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontSize, ");", _TextField.textFieldTokens.leftHelperFontWeight, ":var(", _Selecttokens.tokens.textFieldLeftHelperFontWeight, ");", _TextField.textFieldTokens.leftHelperLetterSpacing, ":var(", _Selecttokens.tokens.textFieldLeftHelperLetterSpacing, ");", _TextField.textFieldTokens.leftHelperLineHeight, ":var(", _Selecttokens.tokens.textFieldLeftHelperLineHeight, ");", _TextField.textFieldTokens.textBeforeColor, ":var(", _Selecttokens.tokens.textFieldTextBeforeColor, ");", _TextField.textFieldTokens.textAfterColor, ":var(", _Selecttokens.tokens.textFieldTextAfterColor, ");", _TextField.textFieldTokens.textBeforeMargin, ":var(", _Selecttokens.tokens.textFieldTextBeforeMargin, ");", _TextField.textFieldTokens.textAfterMargin, ":var(", _Selecttokens.tokens.textFieldTextAfterMargin, ");", _TextField.textFieldTokens.disabledOpacity, ":var(", _Selecttokens.tokens.textFieldDisabledOpacity, ");", _TextField.textFieldTokens.disabledBackgroundOpacity, ":var(", _Selecttokens.tokens.textFieldDisabledBackgroundOpacity, ");", _TextField.textFieldTokens.disabledInnerContentOpacity, ":var(", _Selecttokens.tokens.textFieldDisabledInnerContentOpacity, ");", _TextField.textFieldTokens.hintCustomIconTargetSize, ":var(", _Selecttokens.tokens.textFieldHintCustomIconTargetSize, ");", _TextField.textFieldTokens.hintMargin, ":var(", _Selecttokens.tokens.textFieldHintMargin, ");", _TextField.textFieldTokens.hintTargetSize, ":var(", _Selecttokens.tokens.textFieldHintTargetSize, ");", _TextField.textFieldTokens.hintIconColor, ":var(", _Selecttokens.tokens.textFieldHintIconColor, ");", _TextField.textFieldTokens.hintInnerLabelPlacementOffset, ":var(", _Selecttokens.tokens.textFieldHintInnerLabelPlacementOffset, ");", _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, ":var(", _Selecttokens.tokens.textFieldClearHintInnerLabelPlacementOffset, ");", _TextField.textFieldTokens.tooltipBackgroundColor, ":var(", _Selecttokens.tokens.textFieldTooltipBackgroundColor, ");", _TextField.textFieldTokens.tooltipBoxShadow, ":var(", _Selecttokens.tokens.textFieldTooltipBoxShadow, ");", _TextField.textFieldTokens.tooltipColor, ":var(", _Selecttokens.tokens.textFieldTooltipColor, ");", _TextField.textFieldTokens.tooltipPaddingTop, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingTop, ");", _TextField.textFieldTokens.tooltipPaddingRight, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingRight, ");", _TextField.textFieldTokens.tooltipPaddingBottom, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingBottom, ");", _TextField.textFieldTokens.tooltipPaddingLeft, ":var(", _Selecttokens.tokens.textFieldTooltipPaddingLeft, ");", _TextField.textFieldTokens.tooltipMinHeight, ":var(", _Selecttokens.tokens.textFieldTooltipMinHeight, ");", _TextField.textFieldTokens.tooltipBorderRadius, ":var(", _Selecttokens.tokens.textFieldTooltipBorderRadius, ");", _TextField.textFieldTokens.tooltipTextFontFamily, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontFamily, ");", _TextField.textFieldTokens.tooltipTextFontSize, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontSize, ");", _TextField.textFieldTokens.tooltipTextFontStyle, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontStyle, ");", _TextField.textFieldTokens.tooltipTextFontWeight, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontWeight, ");", _TextField.textFieldTokens.tooltipTextFontLetterSpacing, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontLetterSpacing, ");", _TextField.textFieldTokens.tooltipTextFontLineHeight, ":var(", _Selecttokens.tokens.textFieldTooltipTextFontLineHeight, ");", _TextField.textFieldTokens.tooltipContentLeftMargin, ":var(", _Selecttokens.tokens.textFieldTooltipContentLeftMargin, ");", _TextField.textFieldTokens.tooltipArrowMaskWidth, ":var(", _Selecttokens.tokens.textFieldTooltipArrowMaskWidth, ");", _TextField.textFieldTokens.tooltipArrowMaskHeight, ":var(", _Selecttokens.tokens.textFieldTooltipArrowMaskHeight, ");", _TextField.textFieldTokens.tooltipArrowMaskImage, ":var(", _Selecttokens.tokens.textFieldTooltipArrowMaskImage, ");", _TextField.textFieldTokens.tooltipArrowHeight, ":var(", _Selecttokens.tokens.textFieldTooltipArrowHeight, ");", _TextField.textFieldTokens.tooltipArrowEdgeMargin, ":var(", _Selecttokens.tokens.textFieldTooltipArrowEdgeMargin, ");", _TextField.textFieldTokens.tooltipArrowBackground, ":var(", _Selecttokens.tokens.textFieldTooltipArrowBackground, ");", _TextField.textFieldTokens.chipHeight, ":var(", _Selecttokens.tokens.textFieldChipHeight, ");", _TextField.textFieldTokens.chipBorderRadius, ":var(", _Selecttokens.tokens.textFieldChipBorderRadius, ");", _TextField.textFieldTokens.chipGap, ":var(", _Selecttokens.tokens.textFieldChipGap, ");", _TextField.textFieldTokens.chipColor, ":var(", _Selecttokens.tokens.textFieldChipColor, ");", _TextField.textFieldTokens.chipColorHover, ":var(", _Selecttokens.tokens.textFieldChipColorHover, ");", _TextField.textFieldTokens.chipBackground, ":var(", _Selecttokens.tokens.textFieldChipBackground, ");", _TextField.textFieldTokens.chipBackgroundHover, ":var(", _Selecttokens.tokens.textFieldChipBackgroundHover, ");", _TextField.textFieldTokens.chipBackgroundActive, ":var(", _Selecttokens.tokens.textFieldChipBackgroundActive, ");", _TextField.textFieldTokens.chipColorActive, ":var(", _Selecttokens.tokens.textFieldChipColorActive, ");", _TextField.textFieldTokens.chipCloseIconColor, ":var(", _Selecttokens.tokens.textFieldChipCloseIconColor, ");", _TextField.textFieldTokens.chipCloseIconColorHover, ":var(", _Selecttokens.tokens.textFieldChipCloseIconColorHover, ");", _TextField.textFieldTokens.chipCloseIconColorReadonly, ":var(", _Selecttokens.tokens.textFieldChipCloseIconColorReadonly, ");", _TextField.textFieldTokens.chipOutlineSize, ":var(", _Selecttokens.tokens.textFieldChipOutlineSize, ");", _TextField.textFieldTokens.chipWidth, ":var(", _Selecttokens.tokens.textFieldChipWidth, ");", _TextField.textFieldTokens.chipPadding, ":var(", _Selecttokens.tokens.textFieldChipPadding, ");", _TextField.textFieldTokens.chipCloseIconSize, ":var(", _Selecttokens.tokens.textFieldChipCloseIconSize, ");", _TextField.textFieldTokens.chipFontFamily, ":var(", _Selecttokens.tokens.textFieldChipFontFamily, ");", _TextField.textFieldTokens.chipFontSize, ":var(", _Selecttokens.tokens.textFieldChipFontSize, ");", _TextField.textFieldTokens.chipFontStyle, ":var(", _Selecttokens.tokens.textFieldChipFontStyle, ");", _TextField.textFieldTokens.chipFontWeight, ":var(", _Selecttokens.tokens.textFieldChipFontWeight, ");", _TextField.textFieldTokens.chipLetterSpacing, ":var(", _Selecttokens.tokens.textFieldChipLetterSpacing, ");", _TextField.textFieldTokens.chipLineHeight, ":var(", _Selecttokens.tokens.textFieldChipLineHeight, ");", _TextField.textFieldTokens.chipColorReadOnly, ":var(", _Selecttokens.tokens.textFieldChipColor, ");", _TextField.textFieldTokens.chipColorReadOnlyHover, ":var(", _Selecttokens.tokens.textFieldChipColor, ");", _TextField.textFieldTokens.chipBackgroundReadOnly, ":var(", _Selecttokens.tokens.textFieldChipBackground, ");", _TextField.textFieldTokens.chipBackgroundReadOnlyHover, ":var(", _Selecttokens.tokens.textFieldChipBackgroundHover, ");", _TextField.textFieldTokens.chipClearContentMarginLeft, ":var(", _Selecttokens.tokens.textFieldChipClearContentMarginLeft, ");", _TextField.textFieldTokens.chipClearContentMarginRight, ":var(", _Selecttokens.tokens.textFieldChipClearContentMarginRight, ");", _TextField.textFieldTokens.chipsFlexWrap, ":var(", _Selecttokens.tokens.textFieldChipsFlexWrap, ");", _TextField.textFieldTokens.scrollableWrapperOverflow, ":var(", _Selecttokens.tokens.textFieldScrollableWrapperOverflow, ");", _TextField.textFieldTokens.scrollableWrapperHeight, ":var(", _Selecttokens.tokens.textFieldScrollableWrapperHeight, ");", _TextField.textFieldTokens.inputContainerDisplay, ":var(", _Selecttokens.tokens.textFieldInputContainerDisplay, ");", _TextField.textFieldTokens.indicatorColor, ":var(", _Selecttokens.tokens.textFieldIndicatorColor, ");", _TextField.textFieldTokens.indicatorSizeInner, ":var(", _Selecttokens.tokens.textFieldIndicatorSizeInner, ");", _TextField.textFieldTokens.indicatorSizeOuter, ":var(", _Selecttokens.tokens.textFieldIndicatorSizeOuter, ");", _TextField.textFieldTokens.indicatorLabelPlacementInner, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementInner, ");", _TextField.textFieldTokens.indicatorLabelPlacementOuter, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuter, ");", _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementInnerRight, ");", _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", _Selecttokens.tokens.textFieldIndicatorLabelPlacementOuterRight, ");", _TextField.textFieldTokens.clearIndicatorLabelPlacementInner, ":var(", _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInner, ");", _TextField.textFieldTokens.clearIndicatorLabelPlacementInnerRight, ":var(", _Selecttokens.tokens.textFieldClearIndicatorLabelPlacementInnerRight, ");", _TextField.textFieldTokens.clearIndicatorHintInnerRight, ":var(", _Selecttokens.tokens.textFieldClearIndicatorHintInnerRight, ");", _TextField.textFieldTokens.focusColor, ":var(", _Selecttokens.tokens.textFieldFocusColor, ");", _TextField.textFieldTokens.boxShadow, ":var(", _Selecttokens.tokens.textFieldBoxShadow, ");", _TextField.textFieldTokens.boxShadowSecondary, ":var(", _Selecttokens.tokens.textFieldBoxShadowSecondary, ");&:not([readonly]),&:not([readonly]) input,&:not([readonly]) label{cursor:pointer;}");
 const IconArrowWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1vzyauz1",
+    target: "e107jk781",
     label: "IconArrowWrapper"
 })("line-height:0;color:var(", _Selecttokens.tokens.disclosureIconColor, ");cursor:", ({ disabled, readOnly })=>disabled || readOnly ? 'inherit' : 'pointer', ";.", _Selecttokens.classes.arrowInverse, "{transform:rotate(-180deg);}&:hover,&:active{color:", ({ disabled, readOnly })=>disabled || readOnly ? `var(${_Selecttokens.tokens.disclosureIconColor})` : `var(${_Selecttokens.tokens.disclosureIconColorHover})`, ";}opacity:", ({ readOnly })=>readOnly ? `var(${_Selecttokens.tokens.disclosureIconOpacityReadOnly})` : '', ";");
 const sizeMap = {
@@ -50,10 +52,10 @@ const sizeMap = {
     s: '1.5rem'
 };
 const StyledArrow = /*#__PURE__*/ (0, _styled.default)(_Icon.IconDisclosureDownCentered, {
-    target: "e1vzyauz2",
+    target: "e107jk782",
     label: "StyledArrow"
 })("width:", ({ size = 'xs' })=>`var(${_Selecttokens.tokens.disclosureIconSize}, ${sizeMap[size]})`, ";height:", ({ size = 'xs' })=>`var(${_Selecttokens.tokens.disclosureIconSize}, ${sizeMap[size]})`, ";");
 const StyledLeftHelper = (0, /*#__PURE__*/ _styled.default)("span", {
-    target: "e1vzyauz3",
+    target: "e107jk783",
     label: "StyledLeftHelper"
 })("margin:0;padding:0;");

package/dist/emotion/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)(()=>{