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

package/dist/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

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

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

@@ -5,98 +5,98 @@ import { classes, tokens, privateTokens } from "./TextArea.tokens";
 const mergedConfig = mergeConfig(tooltipConfig);
 const Tooltip = component(mergedConfig);
 export const Hint = /*#__PURE__*/ styled(Tooltip, {
-    target: "ed52njb0",
+    target: "ep87wqd0",
     label: "Hint"
 })();
 export const OuterLabelWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb1",
+    target: "ep87wqd1",
     label: "OuterLabelWrapper"
-})("display:flex;align-items:center;margin-bottom:", ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelMarginBottom})`, ";");
+})("display:flex;align-items:flex-start;margin-bottom:", ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelMarginBottom})`, ";");
 export const StyledLabel = /*#__PURE__*/ styled("div", {
-    target: "ed52njb2",
+    target: "ep87wqd2",
     label: "StyledLabel"
 })("position:relative;display:inline-flex;color:var(", tokens.labelOuterColor, ",var(", tokens.inputColor, "));font-family:var(", tokens.labelOuterFontFamily, ",var(", tokens.inputFontFamily, "));font-size:var(", tokens.labelOuterFontSize, ",var(", tokens.inputFontSize, "));font-style:var(", tokens.labelOuterFontStyle, ",var(", tokens.inputFontStyle, "));font-weight:var(", tokens.labelOuterFontWeight, ",var(", tokens.inputFontWeight, "));letter-spacing:var(", tokens.labelOuterLetterSpacing, ",var(", tokens.inputLetterSpacing, "));line-height:var(", tokens.labelOuterLineHeight, ",var(", tokens.inputLineHeight, "));");
 export const TitleCaption = /*#__PURE__*/ styled("div", {
-    target: "ed52njb3",
+    target: "ep87wqd3",
     label: "TitleCaption"
-})("display:inline-block;margin-left:auto;font-family:var(", tokens.titleCaptionFontFamily, ");font-size:var(", tokens.titleCaptionFontSize, ");font-style:var(", tokens.titleCaptionFontStyle, ");font-weight:var(", tokens.titleCaptionFontWeight, ");letter-spacing:var(", tokens.titleCaptionLetterSpacing, ");line-height:var(", tokens.titleCaptionLineHeight, ");");
+})("display:inline-block;margin-left:auto;margin-top:var(", tokens.titleCaptionMargin, ",0);font-family:var(", tokens.titleCaptionFontFamily, ");font-size:var(", tokens.titleCaptionFontSize, ");font-style:var(", tokens.titleCaptionFontStyle, ");font-weight:var(", tokens.titleCaptionFontWeight, ");letter-spacing:var(", tokens.titleCaptionLetterSpacing, ");line-height:var(", tokens.titleCaptionLineHeight, ");");
 export const StyledIndicatorWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb4",
+    target: "ep87wqd4",
     label: "StyledIndicatorWrapper"
 })("position:relative;display:inline-flex;align-items:center;");
 export const StyledOptionalText = /*#__PURE__*/ styled("span", {
-    target: "ed52njb5",
+    target: "ep87wqd5",
     label: "StyledOptionalText"
 })("color:var(", tokens.optionalColor, ");font-family:", ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontFamily}, var(${tokens.inputFontFamily}))`, ";font-size:", ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontSize}, var(${tokens.inputFontSize}))`, ";font-style:", ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontStyle}, var(${tokens.inputFontStyle}))`, ";font-weight:", ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterFontWeight}, var(${tokens.inputFontWeight}))`, ";letter-spacing:", ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterLetterSpacing}, var(${tokens.inputLetterSpacing}))`, ";line-height:", ({ inheritFont })=>inheritFont ? 'inherit' : `var(${tokens.labelOuterLineHeight}, var(${tokens.inputLineHeight}))`, ";");
 export const StyledHintWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb6",
+    target: "ep87wqd6",
     label: "StyledHintWrapper"
 })("display:inline-flex;line-height:0;margin:var(", tokens.hintMargin, ");&.", classes.innerLabelPlacement, "{position:absolute;margin:0;inset:var(", tokens.hintInnerLabelPlacementOffset, ");}");
 export const HintTargetWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb7",
+    target: "ep87wqd7",
     label: "HintTargetWrapper"
 })("color:var(", tokens.hintIconColor, ");width:var(", tokens.hintTargetSize, ");height:var(", tokens.hintTargetSize, ");display:flex;justify-content:center;align-items:center;");
 export const HintIconWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb8",
+    target: "ep87wqd8",
     label: "HintIconWrapper"
 })();
 export const StyledTextAreaWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb9",
+    target: "ep87wqd9",
     label: "StyledTextAreaWrapper"
 })("display:flex;flex-direction:column;background-color:var(", tokens.inputBackgroundColor, ");flex:", ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset', ";min-height:0;", privateTokens.wrapperPaddingBottomInnerLabel, ":", ({ hasHelper, isClear })=>hasHelper && !isClear ? '0rem' : `var(${tokens.inputPaddingBottomInnerLabel}, var(${tokens.inputPaddingBottom}))`, ";padding-top:", ({ hasHeader })=>hasHeader ? 'unset' : `var(${tokens.inputPaddingTop})`, ";padding-bottom:", ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${tokens.inputPaddingBottomWithHelpers})` : `var(${tokens.inputPaddingBottom})`, ";border-radius:", ({ hasHelper, isClear })=>hasHelper && !isClear ? `var(${tokens.borderRadiusWithHelpers})` : `var(${tokens.borderRadius})`, ";&:after{content:'';position:absolute;z-index:-2;inset:0;}");
 export const StyledContentWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb10",
+    target: "ep87wqd10",
     label: "StyledContentWrapper"
 })("position:relative;width:100%;height:0;padding-top:", ({ hasHeader })=>hasHeader ? `var(${tokens.inputPaddingTop})` : 'unset', ";");
 export const StyledContent = /*#__PURE__*/ styled("div", {
-    target: "ed52njb11",
+    target: "ep87wqd11",
     label: "StyledContent"
 })("position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;color:var(", tokens.rightContentColor, ");top:", ({ hasHeader })=>hasHeader ? `var(${tokens.inputPaddingTop})` : `var(${tokens.rightContentTop})`, ";right:var(", tokens.rightContentRight, ");height:var(", tokens.rightContentHeight, ");width:var(", tokens.rightContentWidth, ",auto);@media (hover:hover) and (pointer:fine){&:hover{color:var(", tokens.rightContentColorHover, ");}}&:active{color:var(", tokens.rightContentColorActive, ");}");
 export const StyledHeaderSlot = /*#__PURE__*/ styled("div", {
-    target: "ed52njb12",
+    target: "ep87wqd12",
     label: "StyledHeaderSlot"
 })("display:flex;flex-direction:column;");
 export const DividerWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb13",
+    target: "ep87wqd13",
     label: "DividerWrapper"
 })("background:var(", tokens.backgroundColor, ");");
 export const Divider = /*#__PURE__*/ styled("div", {
-    target: "ed52njb14",
+    target: "ep87wqd14",
     label: "Divider"
 })("height:0.0625rem;background:var(", tokens.dividerColor, ");");
 export const StyledContainer = /*#__PURE__*/ styled("div", {
-    target: "ed52njb15",
+    target: "ep87wqd15",
     label: "StyledContainer"
 })("display:flex;flex-direction:column;flex:", ({ hasExplicitHeight })=>hasExplicitHeight ? '1' : 'unset', ";min-height:0;width:100%;position:relative;");
 export const StyledTextArea = /*#__PURE__*/ styled("textarea", {
-    target: "ed52njb16",
+    target: "ep87wqd16",
     label: "StyledTextArea"
 })("display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", tokens.inputColor, ");caret-color:var(", tokens.inputCaretColor, ");resize:", ({ resize })=>resize || 'none', ";width:", ({ cols })=>cols ? 'unset' : '100%', ";", privateTokens.inputActualHeight, ":", ({ hasExplicitHeight })=>hasExplicitHeight ? '100%' : `calc(var(${tokens.inputHeight}) - var(${tokens.inputPaddingBottom}))`, ";height:", ({ hasExplicitHeight, rows })=>rows || hasExplicitHeight ? 'unset' : `var(${privateTokens.inputActualHeight})`, ";min-height:var(", tokens.inputMinHeight, ");padding-right:", ({ hasContentRight })=>hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent}, 0)` : `var(${tokens.inputPaddingRight}, 0)`, ";padding-left:var(", tokens.inputPaddingLeft, ",0);padding-top:0;padding-bottom:0;font-family:var(", tokens.inputFontFamily, ");font-size:var(", tokens.inputFontSize, ");font-style:var(", tokens.inputFontStyle, ");font-weight:var(", tokens.inputFontWeight, ");letter-spacing:var(", tokens.inputLetterSpacing, ");line-height:var(", tokens.inputLineHeight, ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", tokens.inputColorFocus, ");}&::-webkit-scrollbar{width:var(", tokens.scrollbarWidth, ");}&::-webkit-scrollbar-thumb{background-color:var(", tokens.scrollbarThumbBackgroundColor, ");background-clip:content-box;border:var(", tokens.scrollbarBorderWidth, ") solid transparent;border-radius:var(", tokens.scrollbarBorderRadius, ",1rem);}&::-webkit-scrollbar-track{background-color:var(", tokens.scrollbarTrackBackgroundColor, ");background-clip:content-box;border:var(", tokens.scrollbarBorderWidth, ") solid transparent;border-radius:var(", tokens.scrollbarBorderRadius, ",1rem);}");
 export const StyledHiddenTextArea = /*#__PURE__*/ styled("textarea", {
-    target: "ed52njb17",
+    target: "ep87wqd17",
     label: "StyledHiddenTextArea"
 })(privateTokens.scrollbarCompensationPadding, ":calc(var(", tokens.borderSize, ",0.0625rem) + var(", tokens.scrollbarMarginRight, ",0rem));width:", ({ cols })=>cols ? 'unset' : '100%', ";max-height:none !important;min-height:var(", tokens.inputMinHeight, ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:", ({ cols })=>cols ? 'unset' : '0.0625rem !important', ";border-width:0;padding-right:", ({ hasContentRight })=>hasContentRight ? `calc(var(${privateTokens.scrollbarCompensationPadding}, 0) + var(${tokens.inputPaddingRightWithRightContent}, 0))` : `calc(var(${privateTokens.scrollbarCompensationPadding}, 0) + var(${tokens.inputPaddingRight}, 0))`, ";padding-left:var(", tokens.inputPaddingLeft, ",0);padding-top:0;padding-bottom:0;box-sizing:border-box;text-indent:0;text-rendering:auto;text-transform:none;tab-size:8;font-family:var(", tokens.inputFontFamily, ");font-size:var(", tokens.inputFontSize, ");font-style:var(", tokens.inputFontStyle, ");font-weight:var(", tokens.inputFontWeight, ");letter-spacing:var(", tokens.inputLetterSpacing, ");line-height:var(", tokens.inputLineHeight, ");");
 export const StyledHelpers = /*#__PURE__*/ styled("div", {
-    target: "ed52njb18",
+    target: "ep87wqd18",
     label: "StyledHelpers"
 })("box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(", tokens.helpersBackgroundColor, ");padding-top:var(", tokens.helpersPaddingTop, ");padding-right:var(", tokens.helpersPaddingRight, ");padding-bottom:var(", tokens.helpersPaddingBottom, ");padding-left:var(", tokens.helpersPaddingLeft, ");border-bottom-left-radius:var(", tokens.borderRadius, ");border-bottom-right-radius:var(", tokens.borderRadius, ");");
 export const StyledOutsideHelpersWrapper = /*#__PURE__*/ styled("div", {
-    target: "ed52njb19",
+    target: "ep87wqd19",
     label: "StyledOutsideHelpersWrapper"
 })("box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(", tokens.outsideHelpersPaddingTop, ");padding-right:var(", tokens.outsideHelpersPaddingRight, ");padding-bottom:var(", tokens.outsideHelpersPaddingBottom, ");padding-left:var(", tokens.outsideHelpersPaddingLeft, ");");
 export const StyledLeftHelper = /*#__PURE__*/ styled("span", {
-    target: "ed52njb20",
+    target: "ep87wqd20",
     label: "StyledLeftHelper"
 })("overflow:var(", tokens.leftHelperOverflow, ",hidden);text-overflow:var(", tokens.leftHelperTextOverflow, ",ellipsis);white-space:var(", tokens.leftHelperWhiteSpace, ",nowrap);display:block;font-family:var(", tokens.helpersFontFamily, ");font-size:var(", tokens.helpersFontSize, ");font-style:var(", tokens.helpersFontStyle, ");font-weight:var(", tokens.helpersFontWeight, ");letter-spacing:var(", tokens.helpersLetterSpacing, ");line-height:var(", tokens.helpersLineHeight, ");color:var(", tokens.leftHelperColor, ");&.", classes.leftHelperFocus, "{color:var(", tokens.leftHelperColorFocus, ",var(", tokens.leftHelperColor, "));}");
 export const StyledRightHelper = /*#__PURE__*/ styled(StyledLeftHelper, {
-    target: "ed52njb21",
+    target: "ep87wqd21",
     label: "StyledRightHelper"
 })("color:var(", tokens.rightHelperColor, ");margin-left:auto;");
 export const StyledPlaceholder = /*#__PURE__*/ styled("label", {
-    target: "ed52njb22",
+    target: "ep87wqd22",
     label: "StyledPlaceholder"
 })("box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", tokens.labelInnerColor, ",var(", tokens.placeholderColor, "));width:100%;height:auto;top:var(", tokens.inputPaddingTop, ");padding-left:var(", tokens.inputPaddingLeft, ");padding-right:", ({ hasContentRight })=>hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent})` : `var(${tokens.inputPaddingRight})`, ";font-family:var(", tokens.inputFontFamily, ");font-size:var(", tokens.inputFontSize, ");font-style:var(", tokens.inputFontStyle, ");font-weight:var(", tokens.inputFontWeight, ");letter-spacing:var(", tokens.inputLetterSpacing, ");line-height:var(", tokens.inputLineHeight, ");");
 export const StyledIndicator = /*#__PURE__*/ styled("div", {
-    target: "ed52njb23",
+    target: "ep87wqd23",
     label: "StyledIndicator"
 })("position:absolute;border-radius:50%;z-index:1;background-color:var(", tokens.indicatorColor, ");&.", classes.outerLabelPlacement, "{width:var(", tokens.indicatorSizeOuter, ");height:var(", tokens.indicatorSizeOuter, ");inset:var(", tokens.indicatorLabelPlacementOuter, ");&.", classes.requiredAlignRight, "{inset:var(", tokens.indicatorLabelPlacementOuterRight, ");&.", classes.hasHint, "{right:calc(\n                    -1 * var(", tokens.indicatorSizeOuter, ") + var(", tokens.indicatorLabelPlacementHintOuterRight, ",0px)\n                );}}}&.", classes.innerLabelPlacement, "{width:var(", tokens.indicatorSizeInner, ");height:var(", tokens.indicatorSizeInner, ");inset:var(", tokens.indicatorLabelPlacementInner, ");&.", classes.requiredAlignRight, "{inset:var(", tokens.indicatorLabelPlacementInnerRight, ");}}");

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

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

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

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

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

@@ -8,102 +8,102 @@ import { caretReserve } from "./getInputWidth";
 const mergedConfig = mergeConfig(tooltipConfig);
 const Tooltip = component(mergedConfig);
 export const InputWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra0",
+    target: "edsqxk50",
     label: "InputWrapper"
-})("position:relative;display:flex;align-items:center;box-sizing:border-box;&:after{content:'';position:absolute;z-index:-2;inset:0;}");
+})("position:relative;display:flex;align-items:center;box-sizing:border-box;&::after{content:'';position:absolute;z-index:-2;inset:0;}");
 export const InputLabelWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra1",
+    target: "edsqxk51",
     label: "InputLabelWrapper"
 })("flex:1;overflow-x:var(", tokens.scrollableWrapperOverflow, ",scroll);position:relative;width:100%;display:inline-flex;align-items:center;flex-wrap:var(", tokens.chipsFlexWrap, ",nowrap);::-webkit-scrollbar{display:none;}scrollbar-width:none;&.", classes.hasChips, "{height:var(", tokens.scrollableWrapperHeight, ",var(", tokens.chipHeight, "));border-radius:var(", tokens.chipBorderRadius, ");}");
 export const StyledChips = /*#__PURE__*/ styled("div", {
-    target: "eb21vra2",
+    target: "edsqxk52",
     label: "StyledChips"
 })("display:flex;flex-wrap:var(", tokens.chipsFlexWrap, ",nowrap);gap:var(", tokens.chipGap, ");margin-right:var(", tokens.chipMarginRight, ",var(", tokens.chipGap, "));user-select:none;");
 export const Input = /*#__PURE__*/ styled("input", {
-    target: "eb21vra3",
+    target: "edsqxk53",
     label: "Input"
 })("box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;field-sizing:var(", tokens.fieldSizing, ",fixed);z-index:1;&.", classes.inputTextEllipsis, "{", applyEllipsis(), "}&::placeholder{opacity:0;}");
 export const InputContainer = /*#__PURE__*/ styled("div", {
-    target: "eb21vra4",
+    target: "edsqxk54",
     label: "InputContainer"
 })("position:relative;display:flex;flex:1;min-width:", ({ hasDynamicWidth })=>hasDynamicWidth ? 'auto' : '60%', ";", Input, "{max-width:", ({ hasDynamicWidth })=>hasDynamicWidth ? '100%' : 'none', ";margin-right:", ({ hasDynamicWidth })=>hasDynamicWidth ? `-${caretReserve}px` : '0', ";}");
 export const InputPlaceholder = /*#__PURE__*/ styled("div", {
-    target: "eb21vra5",
+    target: "edsqxk55",
     label: "InputPlaceholder"
 })("display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", tokens.placeholderColor, ");padding:", ({ hasPadding })=>hasPadding ? `var(${tokens.contentLabelInnerPadding})` : '0', ";");
 export const InputPlaceholderValue = /*#__PURE__*/ styled("div", {
-    target: "eb21vra6",
+    target: "edsqxk56",
     label: "InputPlaceholderValue"
 })("&.", classes.inputTextEllipsis, "{", applyEllipsis(), "}");
 export const OuterLabelWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra7",
+    target: "edsqxk57",
     label: "OuterLabelWrapper"
-})("display:flex;align-items:center;margin-bottom:", ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelOffset})`, ";padding:", ({ isInnerLabel })=>isInnerLabel ? 0 : `var(${tokens.labelPadding}, 0)`, ";white-space:", ({ isInnerLabel })=>isInnerLabel ? 'nowrap' : 'normal', ";");
+})("display:flex;align-items:flex-start;margin-bottom:", ({ isInnerLabel })=>isInnerLabel ? `var(${tokens.titleCaptionInnerLabelOffset})` : `var(${tokens.labelOffset})`, ";padding:", ({ isInnerLabel })=>isInnerLabel ? 0 : `var(${tokens.labelPadding}, 0)`, ";white-space:", ({ isInnerLabel })=>isInnerLabel ? 'nowrap' : 'normal', ";");
 export const TitleCaption = /*#__PURE__*/ styled("div", {
-    target: "eb21vra8",
+    target: "edsqxk58",
     label: "TitleCaption"
-})("display:inline-block;margin-left:auto;margin-top:", ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionOffset}, 0)` : 'unset', ";");
+})("display:inline-block;margin-left:auto;margin-top:var(", tokens.titleCaptionMargin, ",0);");
 export const StyledIndicatorWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra9",
+    target: "edsqxk59",
     label: "StyledIndicatorWrapper"
 })("position:relative;display:inline-flex;align-items:center;");
 export const Label = /*#__PURE__*/ styled("label", {
-    target: "eb21vra10",
+    target: "edsqxk510",
     label: "Label"
 })("display:inline-flex;");
 export const StyledContentLeft = /*#__PURE__*/ styled("div", {
-    target: "eb21vra11",
+    target: "edsqxk511",
     label: "StyledContentLeft"
 })("margin:var(", tokens.leftContentMargin, ");color:var(", tokens.contentSlotColor, ");line-height:0;&:hover{color:var(", tokens.contentSlotColorHover, ",var(", tokens.contentSlotColor, "));}&:active{color:var(", tokens.contentSlotColorActive, ",var(", tokens.contentSlotColor, "));}");
 export const StyledContentRightWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra12",
+    target: "edsqxk512",
     label: "StyledContentRightWrapper"
 })("display:flex;align-items:center;");
 export const StyledContentRight = /*#__PURE__*/ styled("div", {
-    target: "eb21vra13",
+    target: "edsqxk513",
     label: "StyledContentRight"
 })("line-height:0;margin:var(", tokens.rightContentMargin, ");color:var(", tokens.contentSlotRightColor, ",var(", tokens.contentSlotColor, "));&:hover{color:var(", tokens.contentSlotRightColorHover, ",var(", tokens.contentSlotColorHover, "));cursor:pointer;}&:active{color:var(", tokens.contentSlotRightColorActive, ",var(", tokens.contentSlotColorActive, "));}");
 export const StyledHelpers = /*#__PURE__*/ styled("div", {
-    target: "eb21vra14",
+    target: "edsqxk514",
     label: "StyledHelpers"
 })("box-sizing:border-box;display:flex;justify-content:space-between;");
 export const StyledLeftHelper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra15",
+    target: "edsqxk515",
     label: "StyledLeftHelper"
 })();
 export const StyledRightHelper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra16",
+    target: "edsqxk516",
     label: "StyledRightHelper"
 })("margin-left:auto;");
 export const StyledTextBefore = /*#__PURE__*/ styled("div", {
-    target: "eb21vra17",
+    target: "edsqxk517",
     label: "StyledTextBefore"
 })("visibility:", ({ isHidden })=>isHidden ? 'hidden' : 'visible', ";");
 export const StyledTextAfter = /*#__PURE__*/ styled("div", {
-    target: "eb21vra18",
+    target: "edsqxk518",
     label: "StyledTextAfter"
 })();
 export const StyledOptionalText = /*#__PURE__*/ styled("span", {
-    target: "eb21vra19",
+    target: "edsqxk519",
     label: "StyledOptionalText"
 })("color:var(", tokens.optionalColor, ");");
 export const StyledHintWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra20",
+    target: "edsqxk520",
     label: "StyledHintWrapper"
 })("display:inline-block;line-height:0;&.", classes.innerLabelPlacement, "{position:absolute;margin:0;inset:var(", tokens.hintInnerLabelPlacementOffset, ");}");
 export const HintTargetWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra21",
+    target: "edsqxk521",
     label: "HintTargetWrapper"
 })("color:var(", tokens.hintIconColor, ");display:flex;justify-content:center;align-items:center;");
 export const Hint = /*#__PURE__*/ styled(Tooltip, {
-    target: "eb21vra22",
+    target: "edsqxk522",
     label: "Hint"
 })(HintTargetWrapper, " .", popoverClasses.root, "{width:fit-content;}");
 export const HintIconWrapper = /*#__PURE__*/ styled("div", {
-    target: "eb21vra23",
+    target: "edsqxk523",
     label: "HintIconWrapper"
 })("display:flex;");
 export const StyledIndicator = /*#__PURE__*/ styled("div", {
-    target: "eb21vra24",
+    target: "edsqxk524",
     label: "StyledIndicator"
 })("position:absolute;border-radius:50%;background-color:var(", tokens.indicatorColor, ");&.", classes.outerLabelPlacement, "{width:var(", tokens.indicatorSizeOuter, ");height:var(", tokens.indicatorSizeOuter, ");inset:var(", tokens.indicatorLabelPlacementOuter, ");&.", classes.requiredAlignRight, "{inset:var(", tokens.indicatorLabelPlacementOuterRight, ");&.", classes.hasHint, "{right:calc(\n                    -1 * var(", tokens.indicatorSizeOuter, ") + var(", tokens.indicatorLabelPlacementHintOuterRight, ",0px)\n                );}}}&.", classes.innerLabelPlacement, "{width:var(", tokens.indicatorSizeInner, ");height:var(", tokens.indicatorSizeInner, ");inset:var(", tokens.indicatorLabelPlacementInner, ");&.", classes.requiredAlignRight, "{inset:var(", tokens.indicatorLabelPlacementInnerRight, ");}}");

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

@@ -47,6 +47,7 @@ export const tokens = {
     dividerColorReadOnly: '--plasma-textfield-divider-color-readonly',
     /** Цвет каретки */ caretColor: '--plasma-textfield__caret-color',
     placeholderColor: '--plasma-textfield__placeholder-color',
+    placeholderColorHover: '--plasma-textfield__placeholder-color-hover',
     placeholderColorFocus: '--plasma-textfield__placeholder-color-focus',
     clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
     clearPlaceholderColorFocus: '--plasma-textfield__clear-placeholder-color-focus',
@@ -100,6 +101,7 @@ export const tokens = {
     titleCaptionColorReadOnly: '--plasma-textfield__title-caption-color-readonly',
     titleCaptionInnerLabelOffset: '--plasma-textfield__title-caption-label-inner-offset',
     titleCaptionOffset: '--plasma-textfield__title-caption-offset',
+    titleCaptionMargin: '--plasma-textfield__title-caption-margin',
     titleCaptionFontFamily: '--plasma-textfield__title-caption-font-family',
     titleCaptionFontStyle: '--plasma-textfield__title-caption-font-style',
     titleCaptionFontSize: '--plasma-textfield__title-caption-font-size',

package/dist/emotion/es/components/TextField/ui/Hint/Hint.js

@@ -13,9 +13,12 @@ export const HintComponent = /*#__PURE__*/ forwardRef(({ hintText, isHintVisible
     };
     return /*#__PURE__*/ React.createElement(Hint, {
         ref: ref,
+        onClick: (event)=>event.stopPropagation(),
         text: String(hintText),
         opened: isHintVisible,
-        target: /*#__PURE__*/ React.createElement(HintTargetWrapper, null, /*#__PURE__*/ React.createElement(HintIconWrapper, {
+        target: /*#__PURE__*/ React.createElement(HintTargetWrapper, {
+            onClick: (event)=>event.stopPropagation()
+        }, /*#__PURE__*/ React.createElement(HintIconWrapper, {
             id: hintId,
             ...hintTrigger === 'hover' ? {
                 onMouseEnter: handleHintShow,

package/dist/emotion/es/components/TextField/variations/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from "@emotion/react";
 import { classes, privateTokens, tokens } from "../../TextField.tokens";
-import { Input, InputPlaceholder, InputWrapper, StyledHelpers, StyledHintWrapper, StyledLeftHelper, StyledRightHelper, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
-export const base = /*#__PURE__*/ css(InputWrapper, "{", privateTokens.borderColor, ":var(", tokens.borderColor, ");", privateTokens.backgroundColor, ":var(", tokens.backgroundColor, ");color:var(", tokens.color, ");background-color:var(", privateTokens.backgroundColor, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", privateTokens.borderColor, "),var(", tokens.boxShadow, ",inset 0 0 0 0 transparent);caret-color:var(", tokens.caretColor, ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}@media (hover:hover) and (pointer:fine){&:not([readonly]) ", InputWrapper, ":hover:not(:has(", StyledHintWrapper, ":hover)):not(:focus-within){", privateTokens.borderColor, ":var(", tokens.borderColorHover, ",var(", tokens.borderColor, "));", privateTokens.backgroundColor, ":var(", tokens.backgroundColorHover, ",var(", tokens.backgroundColor, "));}}", Input, "{color:var(", tokens.color, ");}", InputPlaceholder, "{color:var(", tokens.placeholderColor, ");}&:not([readonly]) ", InputWrapper, ":focus-within{", privateTokens.borderColor, ":var(", tokens.borderColorFocus, ",var(", tokens.borderColor, "));", privateTokens.backgroundColor, ":var(\n            ", tokens.backgroundColorFocus, ",var(", tokens.backgroundColor, ")\n        );&:after{box-shadow:var(", tokens.boxShadowSecondary, ",inset 0 0 0 0 transparent);}", Input, "{color:var(", tokens.colorFocus, ");}", InputPlaceholder, "{color:var(", tokens.placeholderColorFocus, ");}}", TitleCaption, "{color:var(", tokens.titleCaptionColor, ");}", StyledTextBefore, "{color:var(", tokens.textBeforeColor, ");}", StyledTextAfter, "{color:var(", tokens.textAfterColor, ");}", StyledHelpers, "{", StyledLeftHelper, "{color:var(", tokens.leftHelperColor, ");}", StyledRightHelper, "{color:var(", tokens.rightHelperColor, ");}&.", classes.hasFocus, "{", StyledLeftHelper, "{color:var(", tokens.leftHelperColorFocus, ",var(", tokens.leftHelperColor, "));}", StyledRightHelper, "{color:var(", tokens.rightHelperColorFocus, ",var(", tokens.rightHelperColor, "));}}}&.", classes.hasDivider, "{", InputWrapper, "{--plasma_private-textfield-divider-color:var(", tokens.dividerColor, ");--plasma_private-textfield-divider-width:var(", tokens.dividerWidth, ");&:before{content:'';position:absolute;height:var(--plasma_private-textfield-divider-width,0.063rem);width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}@media (hover:hover) and (pointer:fine){&:not([readonly]) ", InputWrapper, ":hover:not(:has(", StyledHintWrapper, ":hover)):not(:focus-within){--plasma_private-textfield-divider-color:var(\n                    ", tokens.dividerColorHover, ",var(", tokens.dividerColor, ")\n                );}}&:not([readonly]) ", InputWrapper, ":focus-within{--plasma_private-textfield-divider-color:var(\n                ", tokens.dividerColorFocus, ",var(", tokens.dividerColor, ")\n            );", InputPlaceholder, "{color:var(", tokens.clearPlaceholderColorFocus, ");}}}", "base");
+import { Input, InputPlaceholder, InputWrapper, StyledContentLeft, StyledHelpers, StyledHintWrapper, StyledLeftHelper, StyledRightHelper, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
+export const base = /*#__PURE__*/ css(InputWrapper, "{", privateTokens.borderColor, ":var(", tokens.borderColor, ");", privateTokens.backgroundColor, ":var(", tokens.backgroundColor, ");color:var(", tokens.color, ");background-color:var(", privateTokens.backgroundColor, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", privateTokens.borderColor, "),var(", tokens.boxShadow, ",inset 0 0 0 0 transparent);caret-color:var(", tokens.caretColor, ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}@media (hover:hover) and (pointer:fine){&:not([readonly]) ", InputWrapper, ":hover:not(:has(", StyledHintWrapper, ":hover)):not(:focus-within){", privateTokens.borderColor, ":var(", tokens.borderColorHover, ",var(", tokens.borderColor, "));", privateTokens.backgroundColor, ":var(", tokens.backgroundColorHover, ",var(", tokens.backgroundColor, "));", InputPlaceholder, "{color:var(", tokens.placeholderColorHover, ",var(", tokens.placeholderColor, "));}}}", Input, "{color:var(", tokens.color, ");}", InputPlaceholder, "{color:var(", tokens.placeholderColor, ");}&:not([readonly]) ", InputWrapper, ":focus-within{", privateTokens.borderColor, ":var(", tokens.borderColorFocus, ",var(", tokens.borderColor, "));", privateTokens.backgroundColor, ":var(\n            ", tokens.backgroundColorFocus, ",var(", tokens.backgroundColor, ")\n        );&:after{box-shadow:var(", tokens.boxShadowSecondary, ",inset 0 0 0 0 transparent);}", Input, "{color:var(", tokens.colorFocus, ");}", InputPlaceholder, "{color:var(", tokens.placeholderColorFocus, ");}", StyledContentLeft, "{color:var(", tokens.contentSlotColorFocus, ",var(", tokens.contentSlotColor, "));}}", TitleCaption, "{color:var(", tokens.titleCaptionColor, ");}", StyledTextBefore, "{color:var(", tokens.textBeforeColor, ");}", StyledTextAfter, "{color:var(", tokens.textAfterColor, ");}", StyledHelpers, "{", StyledLeftHelper, "{color:var(", tokens.leftHelperColor, ");}", StyledRightHelper, "{color:var(", tokens.rightHelperColor, ");}&.", classes.hasFocus, "{", StyledLeftHelper, "{color:var(", tokens.leftHelperColorFocus, ",var(", tokens.leftHelperColor, "));}", StyledRightHelper, "{color:var(", tokens.rightHelperColorFocus, ",var(", tokens.rightHelperColor, "));}}}&.", classes.hasDivider, "{", InputWrapper, "{--plasma_private-textfield-divider-color:var(", tokens.dividerColor, ");--plasma_private-textfield-divider-width:var(", tokens.dividerWidth, ");&:before{content:'';position:absolute;height:var(--plasma_private-textfield-divider-width,0.063rem);width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}@media (hover:hover) and (pointer:fine){&:not([readonly]) ", InputWrapper, ":hover:not(:has(", StyledHintWrapper, ":hover)):not(:focus-within){--plasma_private-textfield-divider-color:var(\n                    ", tokens.dividerColorHover, ",var(", tokens.dividerColor, ")\n                );}}&:not([readonly]) ", InputWrapper, ":focus-within{--plasma_private-textfield-divider-color:var(\n                ", tokens.dividerColorFocus, ",var(", tokens.dividerColor, ")\n            );", InputPlaceholder, "{color:var(", tokens.clearPlaceholderColorFocus, ",var(", tokens.placeholderColorFocus, "));}}}", "base");

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

@@ -17,7 +17,7 @@ import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
 export const timePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // controlled
     value: outerValue, opened = false, // variations
     view, size, disabled = false, readonly = false, stretched, appearance, hasClearDivider, valueError, valueSuccess, valueEdited, // layout
-    label, labelPlacement = 'outer', keepPlaceholder, required = false, requiredPlacement = 'right', hasRequiredIndicator = false, placeholder, leftHelper, contentLeft, contentRight, textBefore, textAfter, autoComplete, // hint
+    label, labelPlacement = 'outer', titleCaption, keepPlaceholder, required = false, requiredPlacement = 'right', hasRequiredIndicator = false, placeholder, leftHelper, contentLeft, contentRight, textBefore, textAfter, autoComplete, // hint
     hintTrigger = 'hover', hintText, hintView = 'default', hintSize = 'm', hintTargetIcon, hintTargetPlacement = 'outer', hintPlacement = 'auto', hintHasArrow, hintOffset = [
         0,
         0
@@ -292,6 +292,7 @@ export const timePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, //
                     hasRequiredIndicator: hasRequiredIndicator,
                     label: label,
                     labelPlacement: labelPlacement,
+                    titleCaption: titleCaption,
                     keepPlaceholder: keepPlaceholder,
                     ...hintText ? {
                         hintText,

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

@@ -9,28 +9,28 @@ const TextField = component(mergedTextFieldConfig);
 const mergedTimePickerGrid = mergeConfig(timePickerGridConfig);
 const TimePickerGrid = component(mergedTimePickerGrid);
 export const FloatingWrapper = /*#__PURE__*/ styled("div", {
-    target: "e19qg0hx0",
+    target: "ei8qgil0",
     label: "FloatingWrapper"
 })("position:relative;width:100%;");
 export const FloatingTarget = /*#__PURE__*/ styled("div", {
-    target: "e19qg0hx1",
+    target: "ei8qgil1",
     label: "FloatingTarget"
 })();
 export const FloatingContent = /*#__PURE__*/ styled("div", {
-    target: "e19qg0hx2",
+    target: "ei8qgil2",
     label: "FloatingContent"
 })();
 export const StyledTimePickerGrid = /*#__PURE__*/ styled(TimePickerGrid, {
-    target: "e19qg0hx3",
+    target: "ei8qgil3",
     label: "StyledTimePickerGrid"
 })(timePickerGridTokens.disabledOpacity, ":var(", tokens.disabledOpacity, ");", timePickerGridTokens.itemHeight, ":var(", tokens.itemHeight, ");", timePickerGridTokens.itemBorderRadius, ":var(", tokens.itemBorderRadius, ");", timePickerGridTokens.itemPadding, ":var(", tokens.itemPadding, ");", timePickerGridTokens.itemBackgroundHover, ":var(", tokens.itemBackgroundHover, ");", timePickerGridTokens.itemBackgroundActive, ":var(", tokens.itemBackgroundActive, ");", timePickerGridTokens.itemFocusColor, ":var(", tokens.itemFocusColor, ");", timePickerGridTokens.itemFontFamily, ":var(", tokens.itemFontFamily, ");", timePickerGridTokens.itemFontSize, ":var(", tokens.itemFontSize, ");", timePickerGridTokens.itemFontStyle, ":var(", tokens.itemFontStyle, ");", timePickerGridTokens.itemFontWeight, ":var(", tokens.itemFontWeight, ");", timePickerGridTokens.itemLetterSpacing, ":var(", tokens.itemLetterSpacing, ");", timePickerGridTokens.itemLineHeight, ":var(", tokens.itemLineHeight, ");", timePickerGridTokens.scrollbarWidth, ":var(", tokens.scrollbarWidth, ");", timePickerGridTokens.scrollbarColor, ":var(", tokens.scrollbarColor, ");", timePickerGridTokens.scrollbarTrackColor, ":var(", tokens.scrollbarTrackColor, ");", timePickerGridTokens.scrollbarMargin, ":var(", tokens.scrollbarMargin, ");background:var(", tokens.timePickerBackground, ");border-radius:var(", tokens.timePickerBorderRadius, ");padding:var(", tokens.timePickerPadding, ");box-shadow:var(", tokens.timePickerShadow, ");width:", ({ innerWidth })=>innerWidth || `var(${tokens.timePickerWidth})`, ";height:", ({ innerHeight })=>innerHeight || `var(${tokens.columnHeight})`, ";");
 // NOTE: переопределение токенов TextField
 export const StyledInput = /*#__PURE__*/ styled(TextField, {
-    target: "e19qg0hx4",
+    target: "ei8qgil4",
     label: "StyledInput"
-})("width:100%;", textFieldTokens.color, ":var(", tokens.textFieldColor, ");", textFieldTokens.placeholderColor, ":var(", tokens.textFieldPlaceholderColor, ");", textFieldTokens.placeholderColorFocus, ":var(", tokens.textFieldPlaceholderColorFocus, ");", textFieldTokens.caretColor, ":var(", tokens.textFieldCaretColor, ");", textFieldTokens.focusColor, ":var(", tokens.textFieldFocusColor, ");", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.borderColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.borderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.borderColorFocus, ");", textFieldTokens.boxShadow, ":var(", tokens.textFieldBoxShadow, ");", textFieldTokens.boxShadowSecondary, ":var(", tokens.textFieldBoxShadowSecondary, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColor, ");", textFieldTokens.dividerColorHover, ":var(", tokens.textFieldDividerColorHover, ");", textFieldTokens.dividerColorFocus, ":var(", tokens.textFieldDividerColorFocus, ");", textFieldTokens.dividerColorReadOnly, ":var(", tokens.textFieldDividerColorReadOnly, ");", textFieldTokens.dividerWidth, ":var(", tokens.textFieldDividerWidth, ");", textFieldTokens.readOnlyOpacity, ":var(", tokens.readOnlyOpacity, ");", textFieldTokens.colorReadOnly, ":var(", tokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", tokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.borderColorReadOnly, ":var(", tokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", tokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.height, ":var(", tokens.textFieldHeight, ");", textFieldTokens.borderWidth, ":var(", tokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", textFieldTokens.padding, ":var(", tokens.textFieldPadding, ");", textFieldTokens.labelInnerPadding, ":var(", tokens.labelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", tokens.contentLabelInnerPadding, ");", textFieldTokens.labelOffset, ":var(", tokens.labelOffset, ");", textFieldTokens.labelColor, ":var(", tokens.labelColor, ");", textFieldTokens.labelFontFamily, ":var(", tokens.labelFontFamily, ");", textFieldTokens.labelFontStyle, ":var(", tokens.labelFontStyle, ");", textFieldTokens.labelFontSize, ":var(", tokens.labelFontSize, ");", textFieldTokens.labelFontWeight, ":var(", tokens.labelFontWeight, ");", textFieldTokens.labelLetterSpacing, ":var(", tokens.labelLetterSpacing, ");", textFieldTokens.labelLineHeight, ":var(", tokens.labelLineHeight, ");", textFieldTokens.labelInnerFontFamily, ":var(", tokens.labelInnerFontFamily, ");", textFieldTokens.labelInnerFontSize, ":var(", tokens.labelInnerFontSize, ");", textFieldTokens.labelInnerFontStyle, ":var(", tokens.labelInnerFontStyle, ");", textFieldTokens.labelInnerFontWeight, ":var(", tokens.labelInnerFontWeight, ");", textFieldTokens.labelInnerLetterSpacing, ":var(", tokens.labelInnerLetterSpacing, ");", textFieldTokens.labelInnerLineHeight, ":var(", tokens.labelInnerLineHeight, ");", textFieldTokens.labelColorReadOnly, ":var(", tokens.labelColorReadOnly, ");", textFieldTokens.indicatorColor, ":var(", tokens.indicatorColor, ");", textFieldTokens.indicatorSizeInner, ":var(", tokens.indicatorSize, ");", textFieldTokens.indicatorSizeOuter, ":var(", tokens.indicatorSizeOuter, ");", textFieldTokens.indicatorLabelPlacementInner, ":var(", tokens.indicatorPlacement, ");", textFieldTokens.indicatorLabelPlacementOuter, ":var(", tokens.indicatorOuterPlacement, ");", textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", tokens.indicatorPlacementRight, ");", textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", tokens.indicatorOuterPlacementRight, ");", textFieldTokens.hintMargin, ":var(", tokens.hintMargin, ");", textFieldTokens.hintTargetSize, ":var(", tokens.hintTargetSize, ");", textFieldTokens.hintCustomIconTargetSize, ":var(", tokens.hintCustomIconTargetSize, ");", textFieldTokens.hintIconColor, ":var(", tokens.hintIconColor, ");", textFieldTokens.hintInnerLabelPlacementOffset, ":var(", tokens.hintInnerLabelPlacementOffset, ");", textFieldTokens.tooltipPaddingTop, ":var(", tokens.hintTooltipPaddingTop, ");", textFieldTokens.tooltipPaddingRight, ":var(", tokens.hintTooltipPaddingRight, ");", textFieldTokens.tooltipPaddingBottom, ":var(", tokens.hintTooltipPaddingBottom, ");", textFieldTokens.tooltipPaddingLeft, ":var(", tokens.hintTooltipPaddingLeft, ");", textFieldTokens.tooltipMinHeight, ":var(", tokens.hintTooltipMinHeight, ");", textFieldTokens.tooltipBackgroundColor, ":var(", tokens.hintTooltipBackgroundColor, ");", textFieldTokens.tooltipBoxShadow, ":var(", tokens.hintTooltipBoxShadow, ");", textFieldTokens.tooltipBorderRadius, ":var(", tokens.hintTooltipBorderRadius, ");", textFieldTokens.tooltipColor, ":var(", tokens.hintTooltipColor, ");", textFieldTokens.tooltipTextFontFamily, ":var(", tokens.hintTooltipTextFontFamily, ");", textFieldTokens.tooltipTextFontSize, ":var(", tokens.hintTooltipTextFontSize, ");", textFieldTokens.tooltipTextFontStyle, ":var(", tokens.hintTooltipTextFontStyle, ");", textFieldTokens.tooltipTextFontWeight, ":var(", tokens.hintTooltipTextFontWeight, ");", textFieldTokens.tooltipTextFontLetterSpacing, ":var(", tokens.hintTooltipTextFontLetterSpacing, ");", textFieldTokens.tooltipTextFontLineHeight, ":var(", tokens.hintTooltipTextFontLineHeight, ");", textFieldTokens.tooltipContentLeftMargin, ":var(", tokens.hintTooltipContentLeftMargin, ");", textFieldTokens.tooltipArrowMaskWidth, ":var(", tokens.hintTooltipArrowMaskWidth, ");", textFieldTokens.tooltipArrowMaskHeight, ":var(", tokens.hintTooltipArrowMaskHeight, ");", textFieldTokens.tooltipArrowMaskImage, ":var(", tokens.hintTooltipArrowMaskImage, ");", textFieldTokens.tooltipArrowBackground, ":var(", tokens.hintTooltipArrowBackground, ");", textFieldTokens.tooltipArrowHeight, ":var(", tokens.hintTooltipArrowHeight, ");", textFieldTokens.tooltipArrowEdgeMargin, ":var(", tokens.hintTooltipArrowEdgeMargin, ");", 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.fontSize, ":var(", tokens.textFieldFontSize, ");", textFieldTokens.fontStyle, ":var(", tokens.textFieldFontStyle, ");", textFieldTokens.fontWeight, ":var(", tokens.textFieldFontWeight, ");", textFieldTokens.letterSpacing, ":var(", tokens.textFieldLetterSpacing, ");", textFieldTokens.lineHeight, ":var(", tokens.textFieldLineHeight, ");", textFieldTokens.disabledOpacity, ":var(", tokens.disabledOpacity, ");", textFieldTokens.disabledBackgroundOpacity, ":var(", tokens.disabledBackgroundOpacity, ");", textFieldTokens.disabledInnerContentOpacity, ":var(", tokens.disabledInnerContentOpacity, ");", textFieldTokens.textBeforeColor, ":var(", tokens.textFieldTextBeforeColor, ");", textFieldTokens.textAfterColor, ":var(", tokens.textFieldTextAfterColor, ");", textFieldTokens.textBeforeMargin, ":var(", tokens.textFieldTextBeforeMargin, ");", textFieldTokens.textAfterMargin, ":var(", tokens.textFieldTextAfterMargin, ");", textFieldTokens.contentSlotColor, ":var(", tokens.textFieldContentSlotColor, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorHover, ":var(", tokens.textFieldContentSlotColorHover, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorActive, ":var(", tokens.textFieldContentSlotColorActive, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotRightColor, ":var(", tokens.textFieldContentRightSlotColor, ",var(", textFieldTokens.contentSlotColor, "));", textFieldTokens.contentSlotRightColorHover, ":var(", tokens.textFieldContentRightSlotColorHover, ",var(", textFieldTokens.contentSlotRightColor, "));", textFieldTokens.contentSlotRightOpacityReadOnly, ":var(", tokens.textFieldContentSlotRightOpacityReadOnly, ",var(", textFieldTokens.contentSlotRightColor, "));&.", classes.timePickerError, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundErrorColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundErrorColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorError, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorErrorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorErrorFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorError, ");}&.", classes.timePickerSuccess, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundSuccessColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundSuccessColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundSuccessColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorSuccess, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorSuccessHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorSuccessFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorSuccess, ");}&.", classes.timePickerEdited, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundEditedColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundEditedColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundEditedColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorEdited, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorEditedHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorEditedFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorEdited, ");}");
+})("width:100%;", textFieldTokens.color, ":var(", tokens.textFieldColor, ");", textFieldTokens.placeholderColor, ":var(", tokens.textFieldPlaceholderColor, ");", textFieldTokens.placeholderColorFocus, ":var(", tokens.textFieldPlaceholderColorFocus, ");", textFieldTokens.caretColor, ":var(", tokens.textFieldCaretColor, ");", textFieldTokens.focusColor, ":var(", tokens.textFieldFocusColor, ");", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.borderColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.borderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.borderColorFocus, ");", textFieldTokens.boxShadow, ":var(", tokens.textFieldBoxShadow, ");", textFieldTokens.boxShadowSecondary, ":var(", tokens.textFieldBoxShadowSecondary, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColor, ");", textFieldTokens.dividerColorHover, ":var(", tokens.textFieldDividerColorHover, ");", textFieldTokens.dividerColorFocus, ":var(", tokens.textFieldDividerColorFocus, ");", textFieldTokens.dividerColorReadOnly, ":var(", tokens.textFieldDividerColorReadOnly, ");", textFieldTokens.dividerWidth, ":var(", tokens.textFieldDividerWidth, ");", textFieldTokens.readOnlyOpacity, ":var(", tokens.readOnlyOpacity, ");", textFieldTokens.colorReadOnly, ":var(", tokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", tokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.borderColorReadOnly, ":var(", tokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", tokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.height, ":var(", tokens.textFieldHeight, ");", textFieldTokens.borderWidth, ":var(", tokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", textFieldTokens.padding, ":var(", tokens.textFieldPadding, ");", textFieldTokens.labelInnerPadding, ":var(", tokens.labelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", tokens.contentLabelInnerPadding, ");", textFieldTokens.labelOffset, ":var(", tokens.labelOffset, ");", textFieldTokens.labelColor, ":var(", tokens.labelColor, ");", textFieldTokens.labelFontFamily, ":var(", tokens.labelFontFamily, ");", textFieldTokens.labelFontStyle, ":var(", tokens.labelFontStyle, ");", textFieldTokens.labelFontSize, ":var(", tokens.labelFontSize, ");", textFieldTokens.labelFontWeight, ":var(", tokens.labelFontWeight, ");", textFieldTokens.labelLetterSpacing, ":var(", tokens.labelLetterSpacing, ");", textFieldTokens.labelLineHeight, ":var(", tokens.labelLineHeight, ");", textFieldTokens.titleCaptionMargin, ":var(", tokens.titleCaptionMargin, ");", textFieldTokens.titleCaptionColor, ":var(", tokens.titleCaptionColor, ");", textFieldTokens.titleCaptionColorReadOnly, ":var(", tokens.titleCaptionColorReadOnly, ");", textFieldTokens.titleCaptionFontFamily, ":var(", tokens.titleCaptionFontFamily, ");", textFieldTokens.titleCaptionFontStyle, ":var(", tokens.titleCaptionFontStyle, ");", textFieldTokens.titleCaptionFontSize, ":var(", tokens.titleCaptionFontSize, ");", textFieldTokens.titleCaptionFontWeight, ":var(", tokens.titleCaptionFontWeight, ");", textFieldTokens.titleCaptionLetterSpacing, ":var(", tokens.titleCaptionLetterSpacing, ");", textFieldTokens.titleCaptionLineHeight, ":var(", tokens.titleCaptionLineHeight, ");", textFieldTokens.labelInnerFontFamily, ":var(", tokens.labelInnerFontFamily, ");", textFieldTokens.labelInnerFontSize, ":var(", tokens.labelInnerFontSize, ");", textFieldTokens.labelInnerFontStyle, ":var(", tokens.labelInnerFontStyle, ");", textFieldTokens.labelInnerFontWeight, ":var(", tokens.labelInnerFontWeight, ");", textFieldTokens.labelInnerLetterSpacing, ":var(", tokens.labelInnerLetterSpacing, ");", textFieldTokens.labelInnerLineHeight, ":var(", tokens.labelInnerLineHeight, ");", textFieldTokens.labelColorReadOnly, ":var(", tokens.labelColorReadOnly, ");", textFieldTokens.indicatorColor, ":var(", tokens.indicatorColor, ");", textFieldTokens.indicatorSizeInner, ":var(", tokens.indicatorSize, ");", textFieldTokens.indicatorSizeOuter, ":var(", tokens.indicatorSizeOuter, ");", textFieldTokens.indicatorLabelPlacementInner, ":var(", tokens.indicatorPlacement, ");", textFieldTokens.indicatorLabelPlacementOuter, ":var(", tokens.indicatorOuterPlacement, ");", textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", tokens.indicatorPlacementRight, ");", textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", tokens.indicatorOuterPlacementRight, ");", textFieldTokens.hintMargin, ":var(", tokens.hintMargin, ");", textFieldTokens.hintTargetSize, ":var(", tokens.hintTargetSize, ");", textFieldTokens.hintCustomIconTargetSize, ":var(", tokens.hintCustomIconTargetSize, ");", textFieldTokens.hintIconColor, ":var(", tokens.hintIconColor, ");", textFieldTokens.hintInnerLabelPlacementOffset, ":var(", tokens.hintInnerLabelPlacementOffset, ");", textFieldTokens.tooltipPaddingTop, ":var(", tokens.hintTooltipPaddingTop, ");", textFieldTokens.tooltipPaddingRight, ":var(", tokens.hintTooltipPaddingRight, ");", textFieldTokens.tooltipPaddingBottom, ":var(", tokens.hintTooltipPaddingBottom, ");", textFieldTokens.tooltipPaddingLeft, ":var(", tokens.hintTooltipPaddingLeft, ");", textFieldTokens.tooltipMinHeight, ":var(", tokens.hintTooltipMinHeight, ");", textFieldTokens.tooltipBackgroundColor, ":var(", tokens.hintTooltipBackgroundColor, ");", textFieldTokens.tooltipBoxShadow, ":var(", tokens.hintTooltipBoxShadow, ");", textFieldTokens.tooltipBorderRadius, ":var(", tokens.hintTooltipBorderRadius, ");", textFieldTokens.tooltipColor, ":var(", tokens.hintTooltipColor, ");", textFieldTokens.tooltipTextFontFamily, ":var(", tokens.hintTooltipTextFontFamily, ");", textFieldTokens.tooltipTextFontSize, ":var(", tokens.hintTooltipTextFontSize, ");", textFieldTokens.tooltipTextFontStyle, ":var(", tokens.hintTooltipTextFontStyle, ");", textFieldTokens.tooltipTextFontWeight, ":var(", tokens.hintTooltipTextFontWeight, ");", textFieldTokens.tooltipTextFontLetterSpacing, ":var(", tokens.hintTooltipTextFontLetterSpacing, ");", textFieldTokens.tooltipTextFontLineHeight, ":var(", tokens.hintTooltipTextFontLineHeight, ");", textFieldTokens.tooltipContentLeftMargin, ":var(", tokens.hintTooltipContentLeftMargin, ");", textFieldTokens.tooltipArrowMaskWidth, ":var(", tokens.hintTooltipArrowMaskWidth, ");", textFieldTokens.tooltipArrowMaskHeight, ":var(", tokens.hintTooltipArrowMaskHeight, ");", textFieldTokens.tooltipArrowMaskImage, ":var(", tokens.hintTooltipArrowMaskImage, ");", textFieldTokens.tooltipArrowBackground, ":var(", tokens.hintTooltipArrowBackground, ");", textFieldTokens.tooltipArrowHeight, ":var(", tokens.hintTooltipArrowHeight, ");", textFieldTokens.tooltipArrowEdgeMargin, ":var(", tokens.hintTooltipArrowEdgeMargin, ");", 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.fontSize, ":var(", tokens.textFieldFontSize, ");", textFieldTokens.fontStyle, ":var(", tokens.textFieldFontStyle, ");", textFieldTokens.fontWeight, ":var(", tokens.textFieldFontWeight, ");", textFieldTokens.letterSpacing, ":var(", tokens.textFieldLetterSpacing, ");", textFieldTokens.lineHeight, ":var(", tokens.textFieldLineHeight, ");", textFieldTokens.disabledOpacity, ":var(", tokens.disabledOpacity, ");", textFieldTokens.disabledBackgroundOpacity, ":var(", tokens.disabledBackgroundOpacity, ");", textFieldTokens.disabledInnerContentOpacity, ":var(", tokens.disabledInnerContentOpacity, ");", textFieldTokens.textBeforeColor, ":var(", tokens.textFieldTextBeforeColor, ");", textFieldTokens.textAfterColor, ":var(", tokens.textFieldTextAfterColor, ");", textFieldTokens.textBeforeMargin, ":var(", tokens.textFieldTextBeforeMargin, ");", textFieldTokens.textAfterMargin, ":var(", tokens.textFieldTextAfterMargin, ");", textFieldTokens.contentSlotColor, ":var(", tokens.textFieldContentSlotColor, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorHover, ":var(", tokens.textFieldContentSlotColorHover, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorActive, ":var(", tokens.textFieldContentSlotColorActive, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotRightColor, ":var(", tokens.textFieldContentRightSlotColor, ",var(", textFieldTokens.contentSlotColor, "));", textFieldTokens.contentSlotRightColorHover, ":var(", tokens.textFieldContentRightSlotColorHover, ",var(", textFieldTokens.contentSlotRightColor, "));", textFieldTokens.contentSlotRightOpacityReadOnly, ":var(", tokens.textFieldContentSlotRightOpacityReadOnly, ",var(", textFieldTokens.contentSlotRightColor, "));&.", classes.timePickerError, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundErrorColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundErrorColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorError, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorErrorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorErrorFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorError, ");}&.", classes.timePickerSuccess, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundSuccessColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundSuccessColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundSuccessColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorSuccess, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorSuccessHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorSuccessFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorSuccess, ");}&.", classes.timePickerEdited, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundEditedColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundEditedColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundEditedColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorEdited, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorEditedHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorEditedFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorEdited, ");}");
 export const LeftHelper = /*#__PURE__*/ styled("div", {
-    target: "e19qg0hx5",
+    target: "ei8qgil5",
     label: "LeftHelper"
 })("color:var(", tokens.leftHelperColor, ");&.", classes.timePickerError, "{color:var(", tokens.leftHelperColorError, ");}&.", classes.timePickerSuccess, "{color:var(", tokens.leftHelperColorSuccess, ");}&.", classes.timePickerEdited, "{color:var(", tokens.leftHelperColorEdited, ");}");
 export const base = /*#__PURE__*/ css("display:flex;flex-direction:column;width:var(", tokens.width, ");margin-top:var(", tokens.dropdownMarginTop, ");&.", classes.timePickerstretched, "{width:100%;& > div{width:100%;}}&.", classes.timePickerGridRoot, "{flex-direction:row;width:100%;height:100%;}&.", classes.timePickerPlacementRight, "{justify-content:flex-end;}", "base");

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

@@ -40,6 +40,15 @@ export const tokens = {
     labelFontWeight: '--sdds-core-time-picker__label-font-weight',
     labelLetterSpacing: '--sdds-core-time-picker__label-letter-spacing',
     labelLineHeight: '--sdds-core-time-picker__label-line-height',
+    titleCaptionMargin: '--sdds-core-time-picker__title-caption-margin',
+    titleCaptionColor: '--sdds-core-time-picker__title-caption-color',
+    titleCaptionColorReadOnly: '--sdds-core-time-picker__title-caption-color-readonly',
+    titleCaptionFontFamily: '--sdds-core-time-picker__title-caption-font-family',
+    titleCaptionFontStyle: '--sdds-core-time-picker__title-caption-font-style',
+    titleCaptionFontSize: '--sdds-core-time-picker__title-caption-font-size',
+    titleCaptionFontWeight: '--sdds-core-time-picker__title-caption-font-weight',
+    titleCaptionLetterSpacing: '--sdds-core-time-picker__title-caption-letter-spacing',
+    titleCaptionLineHeight: '--sdds-core-time-picker__title-caption-line-height',
     labelInnerFontFamily: '--sdds-core-time-picker-placement_inner__label-font-family',
     labelInnerFontStyle: '--sdds-core-time-picker-placement_inner__label-font-style',
     labelInnerFontSize: '--sdds-core-time-picker-placement_inner__label-font-size',