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

package/dist/emotion/es/components/InformationWrapper/InformationWrapper.styles.js

@@ -8,62 +8,62 @@ const mergedConfig = mergeConfig(tooltipConfig);
 const Tooltip = component(mergedConfig);
 export const base = /*#__PURE__*/ css("display:flex;flex-direction:column;", "base");
 export const ContentWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t0",
+    target: "e18d1hnw0",
     label: "ContentWrapper"
 })("display:flex;align-items:flex-start;gap:var(", tokens.contentGap, ");");
 export const ContentChildrenWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t1",
+    target: "e18d1hnw1",
     label: "ContentChildrenWrapper"
 })("display:flex;flex-direction:column;width:100%;");
 export const LabelWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t2",
+    target: "e18d1hnw2",
     label: "LabelWrapper"
-})("display:flex;align-items:center;white-space:", ({ hasLabel })=>hasLabel ? 'nowrap' : 'normal', ";margin-bottom:", ({ hasLabel })=>hasLabel ? `var(${tokens.labelWrapperOffset})` : `var(${tokens.labelWrapperTitleCaptionOffset})`, ";&.", classes.withoutLabel, "{position:relative;margin-bottom:", ({ hasCaption })=>hasCaption ? `var(${tokens.labelWrapperTitleCaptionOffset})` : '0', ";display:", ({ hasCaption })=>hasCaption ? 'flex' : 'block', ";height:", ({ hasCaption })=>hasCaption ? 'fit-content' : '0', ";}");
+})("display:flex;align-items:flex-start;white-space:", ({ hasLabel })=>hasLabel ? 'nowrap' : 'normal', ";margin-bottom:", ({ hasLabel })=>hasLabel ? `var(${tokens.labelWrapperOffset})` : `var(${tokens.labelWrapperTitleCaptionOffset})`, ";&.", classes.withoutLabel, "{position:relative;margin-bottom:", ({ hasCaption })=>hasCaption ? `var(${tokens.labelWrapperTitleCaptionOffset})` : '0', ";display:", ({ hasCaption })=>hasCaption ? 'flex' : 'block', ";height:", ({ hasCaption })=>hasCaption ? 'fit-content' : '0', ";}");
 export const IndicatorWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t3",
+    target: "e18d1hnw3",
     label: "IndicatorWrapper"
 })("position:", ({ hasLabel })=>hasLabel ? 'relative' : 'static', ";display:inline-flex;align-items:center;gap:var(", tokens.indicatorWrapperGap, ");");
 export const Label = /*#__PURE__*/ styled("label", {
-    target: "eerit8t4",
+    target: "e18d1hnw4",
     label: "Label"
 })("display:inline-flex;");
 export const HintWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t5",
+    target: "e18d1hnw5",
     label: "HintWrapper"
 })("display:flex;justify-content:center;align-items:center;line-height:0;&.", classes.withoutLabel, "{position:absolute;margin:0;z-index:2;inset:var(", tokens.hintWithoutLabelPlacementOffset, ");", privateTokens.translateYWithoutTitle, ":calc(-1 * var(", tokens.titleCaptionLineHeight, "));transform:", ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : `translateY(var(${privateTokens.translateYWithoutTitle}))`, ";}");
 export const HintTargetWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t6",
+    target: "e18d1hnw6",
     label: "HintTargetWrapper"
 })("color:var(", tokens.hintIconColor, ");display:flex;justify-content:center;align-items:center;");
 export const Hint = /*#__PURE__*/ styled(Tooltip, {
-    target: "eerit8t7",
+    target: "e18d1hnw7",
     label: "Hint"
 })(HintTargetWrapper, " .", popoverClasses.root, "{width:fit-content;display:flex;align-items:center;justify-content:center;}");
 export const HintIconWrapper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t8",
+    target: "e18d1hnw8",
     label: "HintIconWrapper"
 })("display:flex;");
 export const Indicator = /*#__PURE__*/ styled("div", {
-    target: "eerit8t9",
+    target: "e18d1hnw9",
     label: "Indicator"
 })("border-radius:50%;align-self:flex-start;background-color:var(", tokens.indicatorColor, ");width:var(", tokens.indicatorSizeOuter, ");height:var(", tokens.indicatorSizeOuter, ");margin-top:var(", tokens.indicatorMarginTop, ");z-index:2;&.", classes.requiredAlignLeft, "{position:absolute;top:50%;transform:translateY(-50%);left:var(", tokens.indicatorOuterLeft, ");margin-top:unset;align-self:unset;}&.", classes.withoutLabel, "{position:absolute;margin-top:unset;align-self:unset;width:var(", tokens.indicatorSizeInner, ");height:var(", tokens.indicatorSizeInner, ");inset:var(", tokens.indicatorWithoutLabelInner, ");transform:", ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : 'translateY(0)', ";&.", classes.requiredAlignLeft, "{inset:var(", tokens.indicatorWithoutLabelInnerLeft, ");}}");
 export const OptionalText = /*#__PURE__*/ styled("span", {
-    target: "eerit8t10",
+    target: "e18d1hnw10",
     label: "OptionalText"
 })("color:var(", tokens.optionalColor, ");");
 export const TitleCaption = /*#__PURE__*/ styled("div", {
-    target: "eerit8t11",
+    target: "e18d1hnw11",
     label: "TitleCaption"
-})("display:inline-block;margin-left:auto;margin-top:", ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionOffset})` : 'unset', ";");
+})("display:inline-block;margin-left:auto;margin-top:", ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionMargin}, 0)` : 'unset', ";");
 export const Helpers = /*#__PURE__*/ styled("div", {
-    target: "eerit8t12",
+    target: "e18d1hnw12",
     label: "Helpers"
 })("box-sizing:border-box;display:flex;justify-content:space-between;");
 export const LeftHelper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t13",
+    target: "e18d1hnw13",
     label: "LeftHelper"
 })();
 export const RightHelper = /*#__PURE__*/ styled("div", {
-    target: "eerit8t14",
+    target: "e18d1hnw14",
     label: "RightHelper"
 })("margin-left:auto;");

package/dist/emotion/es/components/InformationWrapper/InformationWrapper.tokens.js

@@ -20,6 +20,7 @@ export const tokens = {
     labelColorReadOnly: '--plasma-info-wrapper-label-color-readonly',
     contentGap: '--plasma-info-wrapper-content-gap',
     titleCaptionOffset: '--plasma-info-wrapper-title-caption-offset',
+    titleCaptionMargin: '--plasma-info-wrapper-title-caption-margin',
     titleCaptionColor: '--plasma-info-wrapper-title-caption-color',
     titleCaptionColorReadOnly: '--plasma-info-wrapper-title-caption-color-readonly',
     titleCaptionFontFamily: '--plasma-info-wrapper-title-caption-font-family',

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

@@ -5,6 +5,7 @@ export 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'
@@ -27,5 +28,15 @@ export 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/es/components/Modal/ui/ModalFooter/ModalFooter.js

@@ -2,13 +2,15 @@ import React, { forwardRef } from "react";
 import { cx } from "../../../../utils";
 import { classes } from "../../Modal.tokens";
 import { base as viewCSS } from "./variations/_view/base";
-export const modalFooterRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, view, className, ...rest }, outerRef)=>{
+export const modalFooterRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, text, view, className, ...rest }, outerRef)=>{
         return /*#__PURE__*/ React.createElement(Root, {
             ref: outerRef,
             view: view,
             className: cx(className, classes.footer),
             ...rest
-        }, children);
+        }, children, text ? /*#__PURE__*/ React.createElement("div", {
+            className: classes.footerText
+        }, text) : null);
     });
 export const modalFooterConfig = {
     name: 'ModalFooter',

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

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

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

@@ -17,5 +17,11 @@ export 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/es/components/Panel/ui/PanelContent/variations/_view/base.js

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

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useOutsideClick, useForkRef } from "../../hooks";
-import { cx } from "../../utils";
+import { cx, safeUseId } from "../../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
@@ -18,8 +18,12 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
         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 = safeUseId();
         const rangeRef = useRef(null);
         const firstTextFieldRef = useRef(null);
         const secondTextFieldRef = useRef(null);
@@ -106,6 +110,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             className: cx(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass, rangeEditedClass, firstValueEditedClass, secondValueEditedClass, clearOuterHintClass),
             size: size,
             label: label,
+            labelHtmlFor: firstInputId,
             leftHelper: leftHelper,
             titleCaption: titleCaption,
             required: required,
@@ -129,8 +134,12 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
         }, /*#__PURE__*/ React.createElement(ContentWrapper, {
             ref: inputWrapperRef,
             className: cx(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass, rangeEditedClass)
-        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
+        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
+            onClick: _onContentClick
+        }, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
+            id: firstInputId,
             ref: firstTextFieldRef,
+            _onFieldClick: _onFieldClick,
             inputWrapperRef: firstTextfieldInputWrapperRef,
             className: cx(firstValueErrorClass, firstValueSuccessClass, firstValueEditedClass),
             value: firstValue,
@@ -151,6 +160,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             hasDivider: hasClearDivider
         }), Divider, /*#__PURE__*/ React.createElement(StyledInput, {
             ref: secondTextFieldRef,
+            _onFieldClick: _onFieldClick,
             inputWrapperRef: secondTextfieldInputWrapperRef,
             className: cx(secondValueErrorClass, secondValueSuccessClass, secondValueEditedClass),
             value: secondValue,
@@ -183,7 +193,9 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             handleHintHide: handleHintHide,
             handleHintClick: handleHintClick,
             withoutLabel: true
-        }), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, null, contentRight)))));
+        }), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
+            onClick: _onContentClick
+        }, contentRight)))));
     });
 export const rangeConfig = {
     name: 'Range',

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

@@ -82,6 +82,7 @@ export 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/es/components/Range/ui/InformationWrapper/InformationWrapper.styles.js

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

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

@@ -46,7 +46,7 @@ const FloatingPopover = /*#__PURE__*/ forwardRef(({ target, children, opened, on
         }
     }, /*#__PURE__*/ React.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__*/ React.createElement(FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/ React.createElement("div", {

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

@@ -17,7 +17,7 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
         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
@@ -171,6 +171,7 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
                     opened: isListOpened,
                     valueToItemMap: valueToItemMap,
                     label: label,
+                    titleCaption: titleCaption,
                     placeholder: placeholder,
                     onKeyDown: onKeyDown,
                     labelPlacement: labelPlacement,
@@ -183,6 +184,7 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
                     readOnly: readOnly,
                     renderValue: renderValue,
                     inputWrapperRef: referenceRef,
+                    onClick: ()=>handleListToggle(!isListOpened),
                     multiselect: multiselect,
                     helperText: helperText,
                     treeId: treeId,
@@ -193,7 +195,9 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
                     chipType: chipType,
                     chipClickArea: chipClickArea,
                     requiredProps: requiredProps,
-                    hintProps: hintProps
+                    hintProps: hintProps,
+                    appearance: appearance,
+                    hasDivider: hasDivider
                 }),
             zIndex: zIndex,
             isInner: false,

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

@@ -75,18 +75,26 @@ export 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',
@@ -129,6 +137,7 @@ export 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/es/components/Select/ui/Target/Target.js

@@ -1,10 +1,11 @@
 import React, { forwardRef } from "react";
 import { useForkRef } from "../../../../hooks";
 import { Button, Textfield, RenderTarget } from "./ui";
-export const Target = /*#__PURE__*/ 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)=>{
+export const Target = /*#__PURE__*/ 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 = useForkRef(ref, inputWrapperRef);
     if (renderTarget) {
         return /*#__PURE__*/ React.createElement(RenderTarget, {
+            onClick: onClick,
             inputWrapperRef: inputWrapperRef,
             multiselect: multiselect,
             value: value,
@@ -14,6 +15,7 @@ export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, o
         });
     }
     return target === 'button-like' ? /*#__PURE__*/ React.createElement(Button, {
+        onClick: onClick,
         ref: buttonRef,
         opened: opened,
         value: value,
@@ -28,12 +30,14 @@ export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, o
         multiselect: multiselect,
         isTargetAmount: isTargetAmount
     }) : /*#__PURE__*/ React.createElement(Textfield, {
+        onClick: onClick,
         ref: ref,
         inputWrapperRef: inputWrapperRef,
         opened: opened,
         multiselect: multiselect,
         value: value,
         label: label,
+        titleCaption: titleCaption,
         placeholder: placeholder,
         onKeyDown: onKeyDown,
         labelPlacement: labelPlacement,
@@ -55,6 +59,8 @@ export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, o
         chipClickArea: chipClickArea,
         keepPlaceholder: keepPlaceholder,
         requiredProps: requiredProps,
-        hintProps: hintProps
+        hintProps: hintProps,
+        appearance: appearance,
+        hasDivider: hasDivider
     });
 });

package/dist/emotion/es/components/Select/ui/Target/ui/Button/Button.js

@@ -3,12 +3,13 @@ import { cx } from "../../../../../../utils";
 import { classes } from "../../../../Select.tokens";
 import { getButtonLabel, getItemId, sizeToIconSize } from "../../../../utils";
 import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from "./Button.styles";
-export const Button = /*#__PURE__*/ forwardRef(({ opened, value, valueToItemMap, onKeyDown, label, size, disabled, renderValue, treeId, activeDescendantItemValue, multiselect, isTargetAmount }, ref)=>{
+export const Button = /*#__PURE__*/ forwardRef(({ opened, value, valueToItemMap, onKeyDown, onClick, label, size, disabled, renderValue, treeId, activeDescendantItemValue, multiselect, isTargetAmount }, ref)=>{
     const withArrowInverse = opened ? classes.arrowInverse : undefined;
     return /*#__PURE__*/ React.createElement(ButtonWrapper, null, /*#__PURE__*/ React.createElement(StyledButton, {
         ref: ref,
         stretching: "filled",
         onKeyDown: onKeyDown,
+        onClick: onClick,
         className: opened ? classes.selectWithoutBoxShadow : undefined,
         disabled: disabled,
         contentRight: /*#__PURE__*/ React.createElement(IconArrowWrapper, null, /*#__PURE__*/ React.createElement(StyledArrow, {

package/dist/emotion/es/components/Select/ui/Target/ui/RenderTarget/RenderTarget.js

@@ -1,5 +1,5 @@
 import React from "react";
-export const RenderTarget = ({ multiselect, value, opened, renderTarget, valueToItemMap, inputWrapperRef })=>{
+export 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));
@@ -9,6 +9,7 @@ export const RenderTarget = ({ multiselect, value, opened, renderTarget, valueTo
         content = renderTarget(selectedItem, opened);
     }
     return /*#__PURE__*/ React.createElement("div", {
-        ref: inputWrapperRef
+        ref: inputWrapperRef,
+        onClick: onClick
     }, content);
 };

package/dist/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { sizeToIconSize, getItemId } from "../../../../utils";
 import { classes } from "../../../../Select.tokens";
 import { IconArrowWrapper, StyledArrow, StyledTextField, StyledLeftHelper } from "./Textfield.styles";
-export const Textfield = /*#__PURE__*/ 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)=>{
+export const Textfield = /*#__PURE__*/ 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 ? classes.arrowInverse : undefined;
     const getValue = ()=>{
         if (multiselect || Array.isArray(value) || !value) {
@@ -63,12 +63,14 @@ export const Textfield = /*#__PURE__*/ forwardRef(({ inputWrapperRef, opened, mu
         view: view,
         ref: ref,
         inputWrapperRef: inputWrapperRef,
+        _onFieldClick: onClick,
         readOnly: readOnly,
         className: readOnly ? classes.readOnly : undefined,
         value: getValue(),
         labelPlacement: labelPlacement,
         disabled: disabled,
         label: label,
+        titleCaption: titleCaption,
         keepPlaceholder: keepPlaceholder,
         placeholder: value instanceof Array && value.length ? '' : placeholder,
         contentLeft: contentLeft,
@@ -102,6 +104,8 @@ export const Textfield = /*#__PURE__*/ forwardRef(({ inputWrapperRef, opened, mu
         _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
         ,
         opened: opened,
+        appearance: appearance,
+        hasDivider: hasDivider,
         // TODO: #1547
         _forceChipManipulationWithReadonly: !readOnly,
         _interaction_disabled: true,

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

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