@salutejs/plasma-new-hope 0.377.0 → 0.377.1-dev.0

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -1,32 +1,32 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
+import { classes, privateTokens, tokens } from "../../../tokens";
 export const StyledContent = /*#__PURE__*/ styled("div", {
-    target: "e1s73to0",
+    target: "eeiifmi0",
     label: "StyledContent"
 })("display:inline-block;width:fit-content;padding:0 var(", tokens.itemContentPaddingClear, ",var(", tokens.itemContentPadding, "));");
 export const TabItemValue = /*#__PURE__*/ styled("span", {
-    target: "e1s73to1",
+    target: "eeiifmi1",
     label: "TabItemValue"
 })("white-space:nowrap;color:var(", tokens.itemValueColor, ");font-family:var(", tokens.valueFontFamily, ",var(", tokens.fontFamily, "));font-size:var(", tokens.valueFontSize, ",var(", tokens.fontSize, "));font-style:var(", tokens.valueFontStyle, ",var(", tokens.fontStyle, "));font-weight:var(", tokens.valueFontWeight, ",var(", tokens.fontWeight, "));letter-spacing:var(", tokens.valueLetterSpacing, ",var(", tokens.letterSpacing, "));line-height:var(", tokens.valueLineHeight, ",var(", tokens.lineHeight, "));");
 export const RightContent = /*#__PURE__*/ styled("div", {
-    target: "e1s73to2",
+    target: "eeiifmi2",
     label: "RightContent"
 })("display:flex;color:inherit;&:hover{color:inherit;}");
 export const LeftContent = /*#__PURE__*/ styled("div", {
-    target: "e1s73to3",
+    target: "eeiifmi3",
     label: "LeftContent"
 })("display:flex;color:inherit;&:hover{color:inherit;}");
 export const ActionContent = /*#__PURE__*/ styled("div", {
-    target: "e1s73to4",
+    target: "eeiifmi4",
     label: "ActionContent"
 })("display:flex;margin-left:var(", tokens.actionContentMarginLeft, ");");
 export const base = /*#__PURE__*/ css("position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(", tokens.itemContentGap, ");padding:var(", tokens.itemPaddingOrientationVertical, ");appearance:none;border:none;outline:none;cursor:var(", tokens.itemCursorOverNotSelected, ",var(", tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;", addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(${tokens.itemOutlineRadius}, var(--border-radius-m, calc(var(${privateTokens.outlineRadius}) + 0.063rem)))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_pilled/base.js

@@ -0,0 +1,3 @@
+import { css } from "@emotion/react";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("&.", classes.tabsPilled, "{", privateTokens.outlineRadius, ":var(", tokens.itemPilledBorderRadius, ");border-radius:var(", tokens.itemPilledBorderRadius, ");padding:var(", tokens.itemPaddingPilled, ",var(", tokens.itemPaddingOrientationVertical, "));}", "base");

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.js

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");--plasma_private-outline-radius:var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");width:100%;height:var(", tokens.itemHeight, ");", "base");
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");", privateTokens.outlineRadius, ":var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");width:100%;height:var(", tokens.itemHeight, ");&.", classes.selectedTabsItem, "{font-weight:var(", tokens.fontWeightSelected, ",var(", tokens.fontWeight, "));}", "base");

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useMemo, useState, useLayoutEffect, useRef } from "react";
 import cls from "classnames";
 import { safeUseId } from "../../../../../utils";
-import { classes } from "../../../tokens";
+import { classes, tokens } from "../../../tokens";
 import { TabItemRefs, TabsContext } from "../../../TabsContext";
 import { IconDisclosureLeft, IconDisclosureRight } from "../../../../_Icon";
 import { getFirstOverflowingTab, getLastOverflowingTab } from "../../../utils";
@@ -9,6 +9,7 @@ import { base, StyledArrow, StyledContent, StyledContentWrapper } from "./Vertic
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
+import { base as pilledCSS } from "./variations/_pilled/base";
 var Keys = /*#__PURE__*/ function(Keys) {
     Keys[Keys["end"] = 35] = "end";
     Keys[Keys["home"] = 36] = "home";
@@ -18,7 +19,7 @@ var Keys = /*#__PURE__*/ function(Keys) {
 }(Keys || {});
 // TODO: https://github.com/salute-developers/plasma/issues/1474
 export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
-        const { id, disabled = false, clip = 'showAll', dividerAlign = 'left', size, view, children, index, className, orientation, hasDivider = true, ...rest } = props;
+        const { id, disabled = false, clip = 'showAll', dividerAlign = 'left', size, view, children, index, className, orientation, hasDivider = true, pilled = false, ...rest } = props;
         const [firstItemVisible, setFirstItemVisible] = useState(true);
         const [lastItemVisible, setLastItemVisible] = useState(false);
         // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера
@@ -26,6 +27,7 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
         const refs = useMemo(()=>new TabItemRefs(index), []);
         const uniqId = safeUseId();
         const tabsId = id || uniqId;
+        const pilledAttr = view !== 'clear' && pilled;
         const scrollRef = useRef(null);
         const trackRef = useRef(null);
         const upArrowRef = useRef(null);
@@ -77,6 +79,7 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
             disabled: disabled,
             ref: upArrowRef
         }, /*#__PURE__*/ React.createElement(IconDisclosureLeft, {
+            sizeCustomProperty: tokens.arrowSize,
             color: "inherit"
         }));
         const NextButton = /*#__PURE__*/ React.createElement(StyledArrow, {
@@ -86,6 +89,7 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
             tabIndex: disabled ? -1 : 0,
             disabled: disabled
         }, /*#__PURE__*/ React.createElement(IconDisclosureRight, {
+            sizeCustomProperty: tokens.arrowSize,
             color: "inherit"
         }));
         const handleScroll = useCallback((event)=>{
@@ -165,7 +169,9 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
             id: tabsId,
             ref: outerRef,
             disabled: disabled,
+            pilled: pilled,
             className: cls(className, {
+                [classes.tabsPilled]: pilledAttr,
                 [classes.tabsNoDivider]: !hasDivider,
                 [classes.tabsHasTopArrow]: !firstItemVisible,
                 [classes.tabsHasBottomArrow]: !lastItemVisible,
@@ -200,6 +206,9 @@ export const verticalTabsConfig = {
         disabled: {
             css: disabledCSS,
             attrs: true
+        },
+        pilled: {
+            css: pilledCSS
         }
     },
     defaults: {

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles.js

@@ -1,22 +1,22 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
-export const base = /*#__PURE__*/ css("position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;", "base");
+import { classes, privateTokens, tokens } from "../../../tokens";
+export const base = /*#__PURE__*/ css("position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;padding:var(", tokens.tabsPadding, ",0);", "base");
 export const StyledContent = /*#__PURE__*/ styled("div", {
-    target: "ej02vfn0",
+    target: "ehqpige0",
     label: "StyledContent"
 })("display:inline-flex;flex-direction:column;align-items:flex-start;");
 export const StyledContentWrapper = /*#__PURE__*/ styled("div", {
-    target: "ej02vfn1",
+    target: "ehqpige1",
     label: "StyledContentWrapper"
 })("box-sizing:border-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.", classes.tabsClipScroll, "{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}", StyledContent, "{margin-top:auto;}}&.", classes.tabsClipShowAll, "{overflow:visible;}");
 export const StyledArrow = /*#__PURE__*/ styled("button", {
-    target: "ej02vfn2",
+    target: "ehqpige2",
     label: "StyledArrow"
-})("display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);", addFocus({
+})("display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);color:var(", tokens.arrowColor, ");", privateTokens.outlineRadius, ":var(", tokens.arrowBorderRadius, ",inherit);", addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '0',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}), ";&[disabled]{cursor:not-allowed;}color:var(", tokens.arrowColor, ");&:hover{color:var(", tokens.arrowColorHover, ");}&:active{color:var(", tokens.arrowColorActive, ");}");
+    outlineRadius: `calc(var(${privateTokens.outlineRadius}) - 0.063rem)`
+}), ";&[disabled]{cursor:not-allowed;}&:hover{color:var(", tokens.arrowColorHover, ");}&:active{color:var(", tokens.arrowColorActive, ");}");

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabs/variations/_pilled/base.js

@@ -0,0 +1,3 @@
+import { css } from "@emotion/react";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("&.", classes.tabsPilled, "{", privateTokens.outlineRadius, ":var(", tokens.tabsPilledBorderRadius, ");border-radius:var(", tokens.tabsPilledBorderRadius, ");}", "base");

package/dist/emotion/es/components/Tabs/ui/vertical/VerticalTabs/variations/_size/base.js

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("width:var(", tokens.tabsWidth, ");height:var(", tokens.tabsHeight, ");--plasma_private-outline-radius:var(", tokens.tabsBorderRadius, ");border-radius:var(", tokens.tabsBorderRadius, ");", "base");
+import { privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("width:var(", tokens.tabsWidth, ");height:var(", tokens.tabsHeight, ");", privateTokens.outlineRadius, ":var(", tokens.tabsBorderRadius, ");border-radius:var(", tokens.tabsBorderRadius, ");", "base");

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

@@ -5,35 +5,35 @@ import { Input } from "../TextField/TextField.styles";
 import { StyledInput } from "./ui/Input/Input.styles";
 import { classes, tokens } from "./TextFieldSlider.tokens";
 export const ScaleTicksWrapper = /*#__PURE__*/ styled("div", {
-    target: "ewwrlnn0",
+    target: "e1d9rodp0",
     label: "ScaleTicksWrapper"
-})("position:relative;overflow:visible;height:var(", tokens.scaleValueLineHeight, ");margin-top:calc(var(", tokens.scaleWrapperOffset, ") + var(", tokens.scaleWrapperPaddingTop, "));margin-left:calc(var(", tokens.sliderContainerOffset, ") + var(", tokens.sliderThumbSize, ") / 2);margin-right:calc(var(", tokens.sliderContainerOffset, ") + var(", tokens.sliderThumbSize, ") / 2);");
+})("position:relative;overflow:visible;height:var(", tokens.scaleValueLineHeight, ");margin-top:calc(var(", tokens.scaleWrapperOffset, ") + var(", tokens.scaleWrapperPaddingTop, "));margin-left:calc(var(", tokens.sliderContainerOffset, ") + var(", tokens.sliderThumbWidth, ") / 2);margin-right:calc(var(", tokens.sliderContainerOffset, ") + var(", tokens.sliderThumbWidth, ") / 2);");
 export const ScaleTick = /*#__PURE__*/ styled("div", {
-    target: "ewwrlnn1",
+    target: "e1d9rodp1",
     label: "ScaleTick"
 })("position:absolute;top:0;bottom:0;width:0;overflow:visible;cursor:pointer;");
 export const ScaleTickDot = /*#__PURE__*/ styled("span", {
-    target: "ewwrlnn2",
+    target: "e1d9rodp2",
     label: "ScaleTickDot"
 })("position:absolute;left:0;top:calc(\n        -1 * (var(", tokens.scaleWrapperOffset, ") + var(", tokens.scaleWrapperPaddingTop, ")) - var(\n                ", tokens.sliderTrackHeight, "            ) / 2 - var(", tokens.scaleTickSize, ") / 2\n    );transform:translateX(-50%);display:block;width:var(", tokens.scaleTickSize, ");height:var(", tokens.scaleTickSize, ");border-radius:50%;background-color:", ({ filled })=>filled ? `var(${tokens.scaleTickDotFilledColor})` : `var(${tokens.scaleTickDotColor})`, ";");
 export const ScaleTickLabel = /*#__PURE__*/ styled("span", {
-    target: "ewwrlnn3",
+    target: "e1d9rodp3",
     label: "ScaleTickLabel"
 })("position:absolute;top:0;left:0;transform:translateX(-50%);white-space:nowrap;color:var(", tokens.scaleValueColor, ");font-family:var(", tokens.scaleValueFontFamily, ");font-size:var(", tokens.scaleValueFontSize, ");font-style:var(", tokens.scaleValueFontStyle, ");font-weight:var(", tokens.scaleValueFontWeight, ");letter-spacing:var(", tokens.scaleValueLetterSpacing, ");line-height:var(", tokens.scaleValueLineHeight, ");");
 export const SliderContainer = /*#__PURE__*/ styled("div", {
-    target: "ewwrlnn4",
+    target: "e1d9rodp4",
     label: "SliderContainer"
 })("position:absolute;bottom:0;left:var(", tokens.sliderContainerOffset, ",0);right:var(", tokens.sliderContainerOffset, ",0);");
 export const SliderWithHelpersWrapper = /*#__PURE__*/ styled("div", {
-    target: "ewwrlnn5",
+    target: "e1d9rodp5",
     label: "SliderWithHelpersWrapper"
 })("position:relative;");
 export const ScaleWrapper = /*#__PURE__*/ styled("div", {
-    target: "ewwrlnn6",
+    target: "e1d9rodp6",
     label: "ScaleWrapper"
 })("display:flex;justify-content:space-between;margin-top:var(", tokens.scaleWrapperOffset, ");padding-top:var(", tokens.scaleWrapperPaddingTop, ");");
 export const ScaleValue = /*#__PURE__*/ styled("span", {
-    target: "ewwrlnn7",
+    target: "e1d9rodp7",
     label: "ScaleValue"
 })("color:var(", tokens.scaleValueColor, ");font-size:var(", tokens.scaleValueFontSize, ");line-height:var(", tokens.scaleValueLineHeight, ");font-weight:var(", tokens.scaleValueFontWeight, ");font-family:var(", tokens.scaleValueFontFamily, ");letter-spacing:var(", tokens.scaleValueLetterSpacing, ");");
 export const base = /*#__PURE__*/ css("box-sizing:border-box;display:inline-block;&& ", StyledInput, ".", classes.errorAnimation, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderErrorColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderErrorColor, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderErrorColor, ");", textFieldTokens.color, ":var(", tokens.textFieldBorderErrorColor, ");animation:shakingError 0.3s forwards;", Input, "{animation:fadeError 0.3s forwards;}}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{opacity:1;}100%{opacity:0;}}", "base");

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

@@ -122,10 +122,14 @@ export const tokens = {
     sliderTrackBackground: '--plasma-textfield-slider__slider-track-background',
     sliderTrackBorderRadius: '--plasma-textfield-slider__slider-track-border-radius',
     sliderProgressBackground: '--plasma-textfield-slider__slider-progress-background',
-    sliderThumbSize: '--plasma-textfield-slider__slider-thumb-size',
+    sliderThumbWidth: '--plasma-textfield-slider__slider-thumb-width',
+    sliderThumbHeight: '--plasma-textfield-slider__slider-thumb-height',
     sliderThumbBackground: '--plasma-textfield-slider__slider-thumb-background',
-    sliderThumbBorderBoxShadow: '--plasma-textfield-slider__slider-thumb-border-box-shadow',
-    sliderThumbBorderBoxShadowFocus: '--plasma-textfield-slider__slider-thumb-border-box-shadow-focus',
+    sliderThumbInnerContent: '--plasma-textfield-slider__slider-thumb-inner-content',
+    sliderThumbBorderWidth: '--plasma-textfield-slider__slider-thumb-border-width',
+    sliderThumbBorderRadius: '--plasma-textfield-slider__slider-thumb-border-radius',
+    sliderThumbBorderColor: '--plasma-textfield-slider__slider-thumb-border-color',
+    sliderThumbFocusBorderColor: '--plasma-textfield-slider__slider-thumb-focus-border-color',
     /* токены для scale */ scaleWrapperOffset: '--plasma-textfield-slider__scale-wrapper-offset',
     scaleWrapperPaddingTop: '--plasma-textfield-slider__scale-wrapper-padding-top',
     scaleValueColor: '--plasma-textfield-slider__scale-value-color',

package/dist/emotion/es/components/TextFieldSlider/ui/Input/Input.styles.js

@@ -6,6 +6,6 @@ const mergedTextFieldConfig = mergeConfig(textFieldConfig);
 const TextField = component(mergedTextFieldConfig);
 // NOTE: переопределение токенов TextField
 export const StyledInput = /*#__PURE__*/ styled(TextField, {
-    target: "evdicto0",
+    target: "ey0yw2d0",
     label: "StyledInput"
-})(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.borderWidth, ":var(", tokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorFocus, ");", textFieldTokens.colorReadOnly, ":var(", tokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", tokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.readOnlyOpacity, ":var(", tokens.textFieldReadOnlyOpacity, ");", textFieldTokens.borderColorReadOnly, ":var(", tokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", tokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.height, ":var(", tokens.textFieldHeight, ");", textFieldTokens.padding, ":var(", tokens.textFieldPadding, ");", textFieldTokens.labelInnerPadding, ":var(", tokens.labelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", tokens.contentLabelInnerPadding, ");", textFieldTokens.optionalColor, ":var(", tokens.optionalColor, ");", textFieldTokens.labelOffset, ":var(", tokens.labelOffset, ");", 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.titleCaptionColor, ":var(", tokens.titleCaptionColor, ");", textFieldTokens.titleCaptionColorReadOnly, ":var(", tokens.titleCaptionColorReadOnly, ");", textFieldTokens.titleCaptionInnerLabelOffset, ":var(", tokens.titleCaptionInnerLabelOffset, ");", 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.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.leftContentMargin, ":var(", tokens.textFieldLeftContentMargin, ");", textFieldTokens.rightContentMargin, ":var(", tokens.textFieldRightContentMargin, ");", 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, ");", 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.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.borderWidth, ":var(", tokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorFocus, ");", textFieldTokens.colorReadOnly, ":var(", tokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", tokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.readOnlyOpacity, ":var(", tokens.textFieldReadOnlyOpacity, ");", textFieldTokens.borderColorReadOnly, ":var(", tokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", tokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.height, ":var(", tokens.textFieldHeight, ");", textFieldTokens.padding, ":var(", tokens.textFieldPadding, ");", textFieldTokens.labelInnerPadding, ":var(", tokens.labelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", tokens.contentLabelInnerPadding, ");", textFieldTokens.optionalColor, ":var(", tokens.optionalColor, ");", textFieldTokens.labelOffset, ":var(", tokens.labelOffset, ");", 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.labelColor, ":var(", tokens.labelColor, ");", textFieldTokens.labelColorReadOnly, ":var(", tokens.labelColorReadOnly, ");", textFieldTokens.titleCaptionColor, ":var(", tokens.titleCaptionColor, ");", textFieldTokens.titleCaptionColorReadOnly, ":var(", tokens.titleCaptionColorReadOnly, ");", textFieldTokens.titleCaptionInnerLabelOffset, ":var(", tokens.titleCaptionInnerLabelOffset, ");", 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.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.leftContentMargin, ":var(", tokens.textFieldLeftContentMargin, ");", textFieldTokens.rightContentMargin, ":var(", tokens.textFieldRightContentMargin, ");", 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, ");", 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, ");");

package/dist/emotion/es/components/TextFieldSlider/ui/Slider/Slider.styles.js

@@ -1,18 +1,34 @@
 import styled from "@emotion/styled";
+import { applySliderThumb, applySliderThumbFocus } from "../../../../mixins";
 import { tokens } from "../../TextFieldSlider.tokens";
+const thumbTokens = {
+    width: tokens.sliderThumbWidth,
+    height: tokens.sliderThumbHeight,
+    borderRadius: tokens.sliderThumbBorderRadius,
+    borderWidth: tokens.sliderThumbBorderWidth,
+    borderColor: tokens.sliderThumbBorderColor,
+    focusBorderColor: tokens.sliderThumbFocusBorderColor,
+    background: tokens.sliderThumbBackground,
+    innerContent: tokens.sliderThumbInnerContent
+};
 export const SliderWrapper = /*#__PURE__*/ styled("div", {
-    target: "ewp3kqk0",
+    target: "egwc5do0",
     label: "SliderWrapper"
 })("position:relative;display:grid;");
+/**
+ * Бегунок. Рамка рисуется слоем фона по border-box (см. applySliderThumb), поэтому её толщина
+ * может быть асимметричной, форма — эллиптической, а внутрь можно положить innerContent.
+ */ const thumb = applySliderThumb(thumbTokens);
+const thumbHovered = applySliderThumbFocus(thumbTokens);
 export const StyledSlider = /*#__PURE__*/ styled("input", {
-    target: "ewp3kqk1",
+    target: "egwc5do1",
     label: "StyledSlider"
-})("appearance:none;outline:none;background:none;border:none;height:var(", tokens.sliderTrackHeight, ");width:100%;z-index:2;margin:0;cursor:pointer;opacity:", ({ hasPointer })=>hasPointer ? '1' : '0', ";transition:box-shadow 0.2s ease-in;::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:50%;cursor:grab;width:var(", tokens.sliderThumbSize, ");height:var(", tokens.sliderThumbSize, ");background:var(", tokens.sliderThumbBackground, ");color:var(", tokens.sliderThumbBackground, ");box-shadow:var(", tokens.sliderThumbBorderBoxShadow, ");}::-moz-range-thumb{border:none;border-radius:50%;cursor:grab;width:var(", tokens.sliderThumbSize, ");height:var(", tokens.sliderThumbSize, ");background:var(", tokens.sliderThumbBackground, ");color:var(", tokens.sliderThumbBackground, ");box-shadow:var(", tokens.sliderThumbBorderBoxShadow, ");}::-webkit-slider-thumb:hover,::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{border-radius:50%;box-shadow:var(", tokens.sliderThumbBorderBoxShadowFocus, ");}::-webkit-slider-thumb:active{cursor:grabbing;}::-moz-range-thumb:hover,::-moz-range-thumb:active,&:focus-visible::-moz-range-thumb{border-radius:50%;box-shadow:var(", tokens.sliderThumbBorderBoxShadowFocus, ");}::-moz-range-thumb:active{cursor:grabbing;}");
+})("appearance:none;outline:none;background:transparent;border:none;height:var(", tokens.sliderTrackHeight, ");width:100%;z-index:2;margin:0;cursor:pointer;opacity:", ({ hasPointer })=>hasPointer ? '1' : '0', ";&:disabled{cursor:not-allowed;}&::-webkit-slider-runnable-track{background:transparent;}&::-webkit-slider-thumb{-webkit-appearance:none;outline:none;", thumb, "}&:not(:disabled)::-webkit-slider-thumb:hover,&:not(:disabled)::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{", thumbHovered, "}&::-webkit-slider-thumb:active{cursor:grabbing;}&::-moz-range-track{background:transparent;height:var(", tokens.sliderTrackHeight, ");}&::-moz-range-progress{background:transparent;}&::-moz-range-thumb{", thumb, "}&:not(:disabled)::-moz-range-thumb:hover,&:not(:disabled)::-moz-range-thumb:active,&:focus-visible::-moz-range-thumb{", thumbHovered, "}&::-moz-range-thumb:active{cursor:grabbing;}&:disabled{&::-webkit-slider-thumb,&::-webkit-slider-thumb:active,&::-moz-range-thumb,&::-moz-range-thumb:active{cursor:not-allowed;}}");
 export const StyledTrack = /*#__PURE__*/ styled("div", {
-    target: "ewp3kqk2",
+    target: "egwc5do2",
     label: "StyledTrack"
-})("position:absolute;top:50%;left:calc(var(", tokens.sliderThumbSize, ") / 2);right:calc(var(", tokens.sliderThumbSize, ") / 2);transform:translateY(-50%);height:var(", tokens.sliderTrackHeight, ");border-radius:0.5rem;background-color:var(", tokens.sliderTrackBackground, ");");
+})("position:absolute;top:50%;left:calc(var(", tokens.sliderThumbWidth, ") / 2);right:calc(var(", tokens.sliderThumbWidth, ") / 2);transform:translateY(-50%);height:var(", tokens.sliderTrackHeight, ");border-radius:var(", tokens.sliderTrackBorderRadius, ",0.5rem);background-color:var(", tokens.sliderTrackBackground, ");");
 export const StyledProgress = /*#__PURE__*/ styled("div", {
-    target: "ewp3kqk3",
+    target: "egwc5do3",
     label: "StyledProgress"
-})("position:absolute;top:50%;left:calc(var(", tokens.sliderThumbSize, ") / 2);transform:translateY(-50%);width:", ({ value, max, min })=>`calc((${value} - ${min}) / (${max} - ${min}) * 100% - var(${tokens.sliderThumbSize}) / 2)`, ";height:var(", tokens.sliderTrackHeight, ");border-radius:0.5rem;background:var(", tokens.sliderProgressBackground, ");");
+})("position:absolute;top:50%;left:calc(var(", tokens.sliderThumbWidth, ") / 2);transform:translateY(-50%);width:", ({ value, max, min })=>`calc((${value} - ${min}) / (${max} - ${min}) * (100% - var(${tokens.sliderThumbWidth})))`, ";height:var(", tokens.sliderTrackHeight, ");border-radius:var(", tokens.sliderTrackBorderRadius, ",0.5rem);background:var(", tokens.sliderProgressBackground, ");");

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: "e1incl000",
+    target: "eaoh3pk0",
     label: "FloatingWrapper"
 })("position:relative;width:100%;");
 export const FloatingTarget = /*#__PURE__*/ styled("div", {
-    target: "e1incl001",
+    target: "eaoh3pk1",
     label: "FloatingTarget"
 })();
 export const FloatingContent = /*#__PURE__*/ styled("div", {
-    target: "e1incl002",
+    target: "eaoh3pk2",
     label: "FloatingContent"
 })();
 export const StyledTimePickerGrid = /*#__PURE__*/ styled(TimePickerGrid, {
-    target: "e1incl003",
+    target: "eaoh3pk3",
     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: "e1incl004",
+    target: "eaoh3pk4",
     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.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.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: "e1incl005",
+    target: "eaoh3pk5",
     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

@@ -85,6 +85,7 @@ export const tokens = {
     textFieldBorderColorEditedHover: '--sdds-core-time-picker-textfield-border-color-edited-hover',
     textFieldBorderColorEditedFocus: '--sdds-core-time-picker-textfield-border-color-edited-focus',
     textFieldBoxShadow: '--sdds-core-time-picker-textfield-box-shadow',
+    textFieldBoxShadowSecondary: '--sdds-core-time-picker-textfield-box-shadow-secondary',
     textFieldDividerColor: '--sdds-core-time-picker-textfield-divider-color',
     textFieldDividerColorHover: '--sdds-core-time-picker-textfield-divider-color-hover',
     textFieldDividerColorFocus: '--sdds-core-time-picker-textfield-divider-color-focus',

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

@@ -1,7 +1,7 @@
-import React, { useEffect, forwardRef, useState } from "react";
+import React, { useEffect, forwardRef, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { component } from "../../engines";
-import { cx } from "../../utils";
+import { canUseDOM, cx } from "../../utils";
 import { popoverConfig, popoverTokens } from "../Popover";
 import { useDelayedTooltip } from "./hooks";
 import { StyledContentLeft, TooltipRoot } from "./Tooltip.styles";
@@ -14,7 +14,7 @@ const getStringValue = (value)=>{
 };
 const Popover = component(popoverConfig);
 const StyledPopover = /*#__PURE__*/ styled(Popover, {
-    target: "e1mna4990",
+    target: "e1gbxm0y0",
     label: "StyledPopover"
 })(popoverTokens.arrowMaskWidth, ":var(", tokens.arrowMaskWidth, ");", popoverTokens.arrowMaskHeight, ":var(", tokens.arrowMaskHeight, ");", popoverTokens.arrowMaskImage, ":var(", tokens.arrowMaskImage, ");", popoverTokens.arrowBackground, ":var(", tokens.arrowBackground, ");", popoverTokens.arrowHeight, ":var(", tokens.arrowHeight, ");", popoverTokens.arrowEdgeMargin, ":var(", tokens.arrowEdgeMargin, ");");
 /**
@@ -25,7 +25,8 @@ const StyledPopover = /*#__PURE__*/ styled(Popover, {
     ], minWidth, maxWidth, placement = 'bottom', usePortal = true, target, children, onDismiss, view, size, contentLeft, zIndex = '9200', className, style, hoverTimeout, mouseEnterDelay = 0, mouseLeaveDelay, trigger, ...rest }, outerRef)=>{
         const [ref, setRef] = useState(null);
         mouseLeaveDelay = mouseLeaveDelay ?? hoverTimeout ?? 300;
-        const { opened: openedState, showTooltip, hideTooltip, setOpened } = useDelayedTooltip(mouseEnterDelay, mouseLeaveDelay);
+        const { opened: openedState, showTooltip, hideTooltip, resetTooltip, setOpened } = useDelayedTooltip(mouseEnterDelay, mouseLeaveDelay);
+        const ignoreNextFocusRef = useRef(false);
         const isTooltipOpened = Boolean(text) && (isVisible || isOpen || opened || openedState);
         useEffect(()=>{
             const onKeyDown = (event)=>{
@@ -38,7 +39,43 @@ const StyledPopover = /*#__PURE__*/ styled(Popover, {
                 window.removeEventListener('keydown', onKeyDown);
             };
         }, []);
-        const onToggle = (isOpen)=>{
+        useEffect(()=>{
+            if (trigger !== 'hover') {
+                ignoreNextFocusRef.current = false;
+                return undefined;
+            }
+            const onVisibilityChange = ()=>{
+                if (canUseDOM && document.visibilityState === 'hidden') {
+                    ignoreNextFocusRef.current = true;
+                    resetTooltip();
+                }
+            };
+            const onUserInteraction = ()=>{
+                ignoreNextFocusRef.current = false;
+            };
+            document.addEventListener('visibilitychange', onVisibilityChange);
+            document.addEventListener('pointerdown', onUserInteraction, true);
+            document.addEventListener('keydown', onUserInteraction, true);
+            return ()=>{
+                document.removeEventListener('visibilitychange', onVisibilityChange);
+                document.removeEventListener('pointerdown', onUserInteraction, true);
+                document.removeEventListener('keydown', onUserInteraction, true);
+            };
+        }, [
+            resetTooltip,
+            trigger
+        ]);
+        const onToggle = (isOpen, event)=>{
+            if (canUseDOM && isOpen && document.visibilityState === 'hidden') {
+                return;
+            }
+            if (isOpen && event.type === 'focus' && ignoreNextFocusRef.current) {
+                // Возврат на вкладку восстанавливает фокус последнего активного target,
+                // но не является новым пользовательским действием для открытия Tooltip.
+                ignoreNextFocusRef.current = false;
+                return;
+            }
+            ignoreNextFocusRef.current = false;
             if (trigger === 'hover') {
                 if (isOpen) {
                     showTooltip();

package/dist/emotion/es/components/Tooltip/hooks/useDelayedTooltip.js

@@ -1,9 +1,9 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 export const useDelayedTooltip = (openDelay, closeDelay)=>{
     const [opened, setOpened] = useState(false);
     const openTimeoutRef = useRef(null);
     const closeTimeoutRef = useRef(null);
-    const clearTimeouts = ()=>{
+    const clearTimeouts = useCallback(()=>{
         if (openTimeoutRef.current) {
             clearTimeout(openTimeoutRef.current);
             openTimeoutRef.current = null;
@@ -12,26 +12,41 @@ export const useDelayedTooltip = (openDelay, closeDelay)=>{
             clearTimeout(closeTimeoutRef.current);
             closeTimeoutRef.current = null;
         }
-    };
-    const showTooltip = ()=>{
+    }, []);
+    const showTooltip = useCallback(()=>{
         clearTimeouts();
         openTimeoutRef.current = setTimeout(()=>{
             setOpened(true);
         }, openDelay);
-    };
-    const hideTooltip = ()=>{
+    }, [
+        clearTimeouts,
+        openDelay
+    ]);
+    const hideTooltip = useCallback(()=>{
         clearTimeouts();
         closeTimeoutRef.current = setTimeout(()=>{
             setOpened(false);
         }, closeDelay);
-    };
+    }, [
+        clearTimeouts,
+        closeDelay
+    ]);
+    const resetTooltip = useCallback(()=>{
+        clearTimeouts();
+        setOpened(false);
+    }, [
+        clearTimeouts
+    ]);
     useEffect(()=>{
         return clearTimeouts;
-    }, []);
+    }, [
+        clearTimeouts
+    ]);
     return {
         opened,
         setOpened,
         showTooltip,
-        hideTooltip
+        hideTooltip,
+        resetTooltip
     };
 };