@salutejs/plasma-new-hope 0.344.0-canary.2402.20441017793.0 → 0.344.0-canary.2402.20458822017.0

package/dist/styled-components/es/components/TextArea/TextArea.js

@@ -415,7 +415,9 @@ export var textAreaRoot = function(Root) {
         })), hasHelper && /*#__PURE__*/ React.createElement(StyledHelpers, {
             className: styledHelpers,
             id: textareaHelperId
-        }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
+        }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, {
+            className: focused ? classes.leftHelperFocus : ''
+        }, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
             "data-root": true
         }, rightHelper)), !hasHeader && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
             hasContentRight: Boolean(contentRight),

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

@@ -7,13 +7,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextArea.styles__Hint",
-    componentId: "sc-5fcd62a1-0"
+    componentId: "sc-621ad7e5-0"
 })([
     ""
 ]);
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__OuterLabelWrapper",
-    componentId: "sc-5fcd62a1-1"
+    componentId: "sc-621ad7e5-1"
 })([
     "display:flex;align-items:center;max-width:",
     ";margin-bottom:",
@@ -27,7 +27,7 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var StyledLabel = styled.div.withConfig({
     displayName: "TextArea.styles__StyledLabel",
-    componentId: "sc-5fcd62a1-2"
+    componentId: "sc-621ad7e5-2"
 })([
     "position:relative;display:inline-flex;color:var(",
     ",var(",
@@ -47,7 +47,7 @@ export var StyledLabel = styled.div.withConfig({
 ], tokens.labelOuterColor, tokens.inputColor, tokens.labelOuterFontFamily, tokens.inputFontFamily, tokens.labelOuterFontSize, tokens.inputFontSize, tokens.labelOuterFontStyle, tokens.inputFontStyle, tokens.labelOuterFontWeight, tokens.inputFontWeight, tokens.labelOuterLetterSpacing, tokens.inputLetterSpacing, tokens.labelOuterLineHeight, tokens.inputLineHeight);
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextArea.styles__TitleCaption",
-    componentId: "sc-5fcd62a1-3"
+    componentId: "sc-621ad7e5-3"
 })([
     "display:inline-block;margin-left:auto;font-family:var(",
     ");font-size:var(",
@@ -59,13 +59,13 @@ export var TitleCaption = styled.div.withConfig({
 ], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicatorWrapper",
-    componentId: "sc-5fcd62a1-4"
+    componentId: "sc-621ad7e5-4"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextArea.styles__StyledOptionalText",
-    componentId: "sc-5fcd62a1-5"
+    componentId: "sc-621ad7e5-5"
 })([
     "color:var(",
     ");font-family:",
@@ -96,7 +96,7 @@ export var StyledOptionalText = styled.span.withConfig({
 });
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHintWrapper",
-    componentId: "sc-5fcd62a1-6"
+    componentId: "sc-621ad7e5-6"
 })([
     "display:inline-flex;line-height:0;margin:var(",
     ");&.",
@@ -105,7 +105,7 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintTargetWrapper",
-    componentId: "sc-5fcd62a1-7"
+    componentId: "sc-621ad7e5-7"
 })([
     "color:var(",
     ");width:var(",
@@ -114,13 +114,13 @@ export var HintTargetWrapper = styled.div.withConfig({
 ], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__HintIconWrapper",
-    componentId: "sc-5fcd62a1-8"
+    componentId: "sc-621ad7e5-8"
 })([
     ""
 ]);
 export var StyledTextAreaWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledTextAreaWrapper",
-    componentId: "sc-5fcd62a1-9"
+    componentId: "sc-621ad7e5-9"
 })([
     "display:flex;flex-direction:column;background-color:var(",
     ");padding-top:",
@@ -139,7 +139,7 @@ export var StyledTextAreaWrapper = styled.div.withConfig({
 });
 export var StyledContentWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContentWrapper",
-    componentId: "sc-5fcd62a1-10"
+    componentId: "sc-621ad7e5-10"
 })([
     "position:relative;width:100%;height:0;padding-top:",
     ";"
@@ -149,7 +149,7 @@ export var StyledContentWrapper = styled.div.withConfig({
 });
 export var StyledContent = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContent",
-    componentId: "sc-5fcd62a1-11"
+    componentId: "sc-621ad7e5-11"
 })([
     "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
     ",var(",
@@ -163,27 +163,27 @@ export var StyledContent = styled.div.withConfig({
 }, tokens.rightContentRight, tokens.rightContentHeight);
 export var StyledHeaderSlot = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHeaderSlot",
-    componentId: "sc-5fcd62a1-12"
+    componentId: "sc-621ad7e5-12"
 })([
     "display:flex;flex-direction:column;"
 ]);
 export var DividerWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__DividerWrapper",
-    componentId: "sc-5fcd62a1-13"
+    componentId: "sc-621ad7e5-13"
 })([
     "background:var(",
     ");"
 ], tokens.backgroundColor);
 export var Divider = styled.div.withConfig({
     displayName: "TextArea.styles__Divider",
-    componentId: "sc-5fcd62a1-14"
+    componentId: "sc-621ad7e5-14"
 })([
     "height:0.0625rem;background:var(",
     ");"
 ], tokens.dividerColor);
 export var StyledContainer = styled.div.withConfig({
     displayName: "TextArea.styles__StyledContainer",
-    componentId: "sc-5fcd62a1-15"
+    componentId: "sc-621ad7e5-15"
 })([
     "display:inline-flex;flex-direction:column;width:",
     ";position:relative;"
@@ -193,7 +193,7 @@ export var StyledContainer = styled.div.withConfig({
 });
 export var StyledTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledTextArea",
-    componentId: "sc-5fcd62a1-16"
+    componentId: "sc-621ad7e5-16"
 })([
     "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
     ");caret-color:var(",
@@ -256,7 +256,7 @@ export var StyledTextArea = styled.textarea.withConfig({
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth);
 export var StyledHiddenTextArea = styled.textarea.withConfig({
     displayName: "TextArea.styles__StyledHiddenTextArea",
-    componentId: "sc-5fcd62a1-17"
+    componentId: "sc-621ad7e5-17"
 })([
     "max-height:none !important;min-height:var(",
     ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
@@ -274,7 +274,7 @@ export var StyledHiddenTextArea = styled.textarea.withConfig({
 }, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledHelpers = styled.div.withConfig({
     displayName: "TextArea.styles__StyledHelpers",
-    componentId: "sc-5fcd62a1-18"
+    componentId: "sc-621ad7e5-18"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
     ");padding-top:var(",
@@ -287,14 +287,14 @@ export var StyledHelpers = styled.div.withConfig({
 ], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
 export var StyledOutsideHelpersWrapper = styled.div.withConfig({
     displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
-    componentId: "sc-5fcd62a1-19"
+    componentId: "sc-621ad7e5-19"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
     ");"
 ], tokens.clearHelpersPaddingTop);
 export var StyledLeftHelper = styled.span.withConfig({
     displayName: "TextArea.styles__StyledLeftHelper",
-    componentId: "sc-5fcd62a1-20"
+    componentId: "sc-621ad7e5-20"
 })([
     "",
     ";display:block;font-family:var(",
@@ -304,18 +304,20 @@ export var StyledLeftHelper = styled.span.withConfig({
     ");letter-spacing:var(",
     ");line-height:var(",
     ");color:var(",
-    ");"
-], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
+    ");&.",
+    "{color:var(",
+    ");}"
+], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor, classes.leftHelperFocus, tokens.leftHelperColorFocus);
 export var StyledRightHelper = styled(StyledLeftHelper).withConfig({
     displayName: "TextArea.styles__StyledRightHelper",
-    componentId: "sc-5fcd62a1-21"
+    componentId: "sc-621ad7e5-21"
 })([
     "color:var(",
     ");margin-left:auto;"
 ], tokens.rightHelperColor);
 export var StyledPlaceholder = styled.label.withConfig({
     displayName: "TextArea.styles__StyledPlaceholder",
-    componentId: "sc-5fcd62a1-22"
+    componentId: "sc-621ad7e5-22"
 })([
     "box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
     ");width:100%;height:auto;top:var(",
@@ -334,7 +336,7 @@ export var StyledPlaceholder = styled.label.withConfig({
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextArea.styles__StyledIndicator",
-    componentId: "sc-5fcd62a1-23"
+    componentId: "sc-621ad7e5-23"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

package/dist/styled-components/es/components/TextArea/TextArea.tokens.js

@@ -16,7 +16,8 @@ export var classes = {
     hasDivider: 'textarea-has-divider',
     requiredAlignRight: 'required-align-right',
     hasHeaderSlot: 'textarea-has-header-slot',
-    styledContentWrapper: 'textarea-content-wrapper'
+    styledContentWrapper: 'textarea-content-wrapper',
+    leftHelperFocus: 'textarea-left-helper-focus'
 };
 export var tokens = {
     /** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',
@@ -48,6 +49,7 @@ export var tokens = {
     clearPlaceholderColorFocus: '--plasma-textarea-clear-placeholder-color-focus',
     /** Цвет элемента optional */ optionalColor: '--plasma-textarea__optional-color',
     /** Цвет текста для левой подписи снизу */ leftHelperColor: '--plasma-textarea-left-helper-color',
+    /** Цвет текста для левой подписи снизу в состоянии focus */ leftHelperColorFocus: '--plasma-textarea-left-helper-color-focus',
     /** Цвет текста для правой подписи снизу */ rightHelperColor: '--plasma-textarea-right-helper-color',
     /** Цвета границы для всего компонента */ borderColor: '--plasma-textarea-border-color',
     borderColorReadOnly: '--plasma-textarea-border-color-readonly',

package/dist/styled-components/es/components/TextField/TextField.js

@@ -526,6 +526,7 @@ export var textFieldRoot = function(Root) {
             "aria-labelledby": labelId,
             "aria-describedby": helperTextId,
             placeholder: innerPlaceholderValue,
+            hasFocus: hasFocus,
             className: cx(hasValueClass, keepPlaceholderClass, classTextEllipsis, readOnly && classes.readOnlyInput),
             disabled: disabled,
             readOnly: !disabled && readOnly,
@@ -570,7 +571,8 @@ export var textFieldRoot = function(Root) {
             isInnerLabel: true
         }))), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
             "data-root": true,
-            id: helperTextId
+            id: helperTextId,
+            className: hasFocus ? classes.hasFocus : undefined
         }, leftHelper));
     });
 };

package/dist/styled-components/es/components/TextField/TextField.styles.js

@@ -8,13 +8,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var InputWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-708c1a6a-0"
+    componentId: "sc-b214ed5d-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 export var InputLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-708c1a6a-1"
+    componentId: "sc-b214ed5d-1"
 })([
     "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
     "{height:var(",
@@ -23,7 +23,7 @@ export var InputLabelWrapper = styled.div.withConfig({
 ], String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
 export var StyledChips = styled.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-708c1a6a-2"
+    componentId: "sc-b214ed5d-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -32,7 +32,7 @@ export var StyledChips = styled.div.withConfig({
 ], tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
 export var Input = styled.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-708c1a6a-3"
+    componentId: "sc-b214ed5d-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -40,7 +40,7 @@ export var Input = styled.input.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var InputContainer = styled.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-708c1a6a-4"
+    componentId: "sc-b214ed5d-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -55,7 +55,7 @@ export var InputContainer = styled.div.withConfig({
 });
 export var InputPlaceholder = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-708c1a6a-5"
+    componentId: "sc-b214ed5d-5"
 })([
     "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(",
     ");padding:",
@@ -66,7 +66,7 @@ export var InputPlaceholder = styled.div.withConfig({
 });
 export var InputPlaceholderValue = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholderValue",
-    componentId: "sc-708c1a6a-6"
+    componentId: "sc-b214ed5d-6"
 })([
     "&.",
     "{",
@@ -74,7 +74,7 @@ export var InputPlaceholderValue = styled.div.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-708c1a6a-7"
+    componentId: "sc-b214ed5d-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -88,25 +88,25 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-708c1a6a-8"
+    componentId: "sc-b214ed5d-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-708c1a6a-9"
+    componentId: "sc-b214ed5d-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var Label = styled.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-708c1a6a-10"
+    componentId: "sc-b214ed5d-10"
 })([
     "display:inline-flex;"
 ]);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-708c1a6a-11"
+    componentId: "sc-b214ed5d-11"
 })([
     "margin:var(",
     ");color:var(",
@@ -118,13 +118,13 @@ export var StyledContentLeft = styled.div.withConfig({
 ], tokens.leftContentMargin, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColor, tokens.contentSlotColorActive, tokens.contentSlotColor);
 export var StyledContentRightWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-708c1a6a-12"
+    componentId: "sc-b214ed5d-12"
 })([
     "display:flex;align-items:center;"
 ]);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-708c1a6a-13"
+    componentId: "sc-b214ed5d-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -137,13 +137,16 @@ export var StyledContentRight = styled.div.withConfig({
 ], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 export var LeftHelper = styled.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-708c1a6a-14"
+    componentId: "sc-b214ed5d-14"
 })([
-    ""
-]);
+    "color:var(",
+    ");&.",
+    "{color:var(",
+    ");}"
+], tokens.leftHelperColor, classes.hasFocus, tokens.leftHelperColorFocus);
 export var StyledTextBefore = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-708c1a6a-15"
+    componentId: "sc-b214ed5d-15"
 })([
     "visibility:",
     ";"
@@ -153,20 +156,20 @@ export var StyledTextBefore = styled.div.withConfig({
 });
 export var StyledTextAfter = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-708c1a6a-16"
+    componentId: "sc-b214ed5d-16"
 })([
     ""
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-708c1a6a-17"
+    componentId: "sc-b214ed5d-17"
 })([
     "color:var(",
     ");"
 ], tokens.optionalColor);
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-708c1a6a-18"
+    componentId: "sc-b214ed5d-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -174,14 +177,14 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-708c1a6a-19"
+    componentId: "sc-b214ed5d-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], tokens.hintIconColor);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-708c1a6a-20"
+    componentId: "sc-b214ed5d-20"
 })([
     "",
     " .",
@@ -189,13 +192,13 @@ export var Hint = styled(Tooltip).withConfig({
 ], HintTargetWrapper, popoverClasses.root);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-708c1a6a-21"
+    componentId: "sc-b214ed5d-21"
 })([
     "display:flex;"
 ]);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-708c1a6a-22"
+    componentId: "sc-b214ed5d-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

package/dist/styled-components/es/components/TextField/TextField.tokens.js

@@ -3,6 +3,7 @@ export var classes = {
     hasChips: 'has-chips',
     chipsWrapper: 'chips-wrapper',
     hasValue: 'has-value',
+    hasFocus: 'has-focus',
     keepPlaceholder: 'keep-placeholder',
     hasEmptyContentLeft: 'has-empty-content-left',
     hasEmptyContentRight: 'has-empty-content-right',
@@ -22,6 +23,7 @@ export var classes = {
 };
 export var tokens = {
     color: '--plasma-textfield-color',
+    colorFocus: '--plasma-textfield-color-focus',
     clearColor: '--plasma-textfield-clear-color',
     boxShadow: '--plasma-textfield-box-shadow',
     backgroundColor: '--plasma-textfield-bg-color',
@@ -33,6 +35,7 @@ export var tokens = {
     dividerColor: '--plasma-textfield-divider-color',
     dividerColorHover: '--plasma-textfield-divider-color-hover',
     dividerColorFocus: '--plasma-textfield-divider-color-focus',
+    dividerWidth: '--plasma-textfield-divider-width',
     /** Цвета для read-only состояния */ colorReadOnly: '--plasma-textfield-color-readonly',
     backgroundColorReadOnly: '--plasma-textfield-bg-color-readonly',
     borderColorReadOnly: '--plasma-textfield-border-color-readonly',
@@ -61,6 +64,7 @@ export var tokens = {
     /* Tokens for content slot */ contentSlotColor: '--plasma-textfield-content-slot-color',
     contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
     contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
+    contentSlotColorFocus: '--plasma-textfield-content-slot-color-focus',
     contentSlotRightColor: '--plasma-textfield-content-right-slot-color',
     contentSlotRightColorHover: '--plasma-textfield-content-right-slot-color-hover',
     contentSlotRightColorActive: '--plasma-textfield-content-right-slot-color-active',
@@ -95,6 +99,7 @@ export var tokens = {
     titleCaptionLetterSpacing: '--plasma-textfield__title-caption-letter-spacing',
     titleCaptionLineHeight: '--plasma-textfield__title-caption-line-height',
     leftHelperColor: '--plasma-textfield__left-helper-color',
+    leftHelperColorFocus: '--plasma-textfield__left-helper-color-focus',
     leftHelperColorReadOnly: '--plasma-textfield__left-helper-color-readonly',
     leftHelperOffset: '--plasma-textfield__left-helper-offset',
     leftHelperFontFamily: '--plasma-textfield__left-helper-font-family',

package/dist/styled-components/es/components/TextField/variations/_read-only/base.js

@@ -3,8 +3,8 @@ import { classes, tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentLeft, StyledContentRight, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "&[readonly]{",
-    "{position:relative;z-index:0;color:var(",
-    ");background:transparent;box-shadow:none;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
+    "{position:relative;color:var(",
+    ");background:transparent;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
     ");background-color:var(",
     ");opacity:var(",
     ");box-shadow:inset 0 0 0 var(",

package/dist/styled-components/es/components/TextField/variations/_view/base.js

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { classes, tokens } from "../../TextField.tokens";
-import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
+import { Input, InputPlaceholder, InputWrapper, StyledTextAfter, StyledTextBefore, StyledContentLeft, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "",
     "{--plasma_private-textfield-border-color:var(",
@@ -25,10 +25,12 @@ export var base = css([
     ",var(",
     ") );",
     "{color:var(",
-    ");}}",
+    ");}",
     "{color:var(",
     ");}",
     "{color:var(",
+    ");}}",
+    "{color:var(",
     ");}",
     "{color:var(",
     ");}",
@@ -36,7 +38,8 @@ export var base = css([
     ");}&.",
     "{",
     "{--plasma_private-textfield-divider-color:var(",
-    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
+    ");--plasma_private-textfield-divider-width:var(",
+    ");&: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;}}&:not([readonly]) ",
     ":hover{--plasma_private-textfield-divider-color:var( ",
     ",var(",
     ") );}&:not([readonly]) ",
@@ -45,4 +48,4 @@ export var base = css([
     ") );",
     "{color:var(",
     ");}}}"
-], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor, classes.hasDivider, InputWrapper, String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);
+], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), Input, tokens.colorFocus, InputPlaceholder, tokens.placeholderColorFocus, StyledContentLeft, tokens.contentSlotColorFocus, TitleCaption, tokens.titleCaptionColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor, classes.hasDivider, InputWrapper, String(tokens.dividerColor), String(tokens.dividerWidth), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);

package/dist/styled-components/es/components/TimePicker/TimePicker.styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { css } from "styled-components";
 import { component, mergeConfig } from "../../engines";
 import { textFieldConfig, textFieldTokens } from "../TextField";
-import { popoverClasses, popoverConfig } from "../Popover";
+import { popoverClasses, popoverConfig, popoverTokens } from "../Popover";
 import { timePickerGridConfig, timePickerGridTokens } from "../TimePickerGrid";
 import { classes, tokens } from "./TimePicker.tokens";
 var mergedTextFieldConfig = mergeConfig(textFieldConfig);
@@ -13,13 +13,17 @@ var mergedTimePickerGrid = mergeConfig(timePickerGridConfig);
 var TimePickerGrid = component(mergedTimePickerGrid);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-d43646a1-0"
+    componentId: "sc-f592831a-0"
 })([
-    ""
-]);
+    ".",
+    "{",
+    ":var(",
+    ");border-radius:var(",
+    ");}"
+], popoverClasses.root, popoverTokens.boxShadow, tokens.timePickerShadow, tokens.timePickerBorderRadius);
 export var StyledTimePickerGrid = styled(TimePickerGrid).withConfig({
     displayName: "TimePicker.styles__StyledTimePickerGrid",
-    componentId: "sc-d43646a1-1"
+    componentId: "sc-f592831a-1"
 })([
     "",
     ":var(",
@@ -63,12 +67,14 @@ export var StyledTimePickerGrid = styled(TimePickerGrid).withConfig({
     ":var(",
     ");",
     ":var(",
+    ");",
+    ":var(",
     ");"
-], timePickerGridTokens.timePickerGridBackground, tokens.timePickerBackground, timePickerGridTokens.timePickerGridBorderRadius, tokens.timePickerBorderRadius, timePickerGridTokens.timePickerGridWidth, tokens.timePickerWidth, timePickerGridTokens.timePickerGridPadding, tokens.timePickerPadding, timePickerGridTokens.disabledOpacity, tokens.disabledOpacity, timePickerGridTokens.columnHeight, tokens.columnHeight, timePickerGridTokens.itemHeight, tokens.itemHeight, timePickerGridTokens.itemBorderRadius, tokens.itemBorderRadius, timePickerGridTokens.itemPadding, tokens.itemPadding, timePickerGridTokens.itemBackgroundHover, tokens.itemBackgroundHover, timePickerGridTokens.itemBackgroundActive, tokens.itemBackgroundActive, timePickerGridTokens.itemFontFamily, tokens.itemFontFamily, timePickerGridTokens.itemFontSize, tokens.itemFontSize, timePickerGridTokens.itemFontStyle, tokens.itemFontStyle, timePickerGridTokens.itemFontWeight, tokens.itemFontWeight, timePickerGridTokens.itemLetterSpacing, tokens.itemLetterSpacing, timePickerGridTokens.itemLineHeight, tokens.itemLineHeight, timePickerGridTokens.scrollbarWidth, tokens.scrollbarWidth, timePickerGridTokens.scrollbarColor, tokens.scrollbarColor, timePickerGridTokens.scrollbarTrackColor, tokens.scrollbarTrackColor, timePickerGridTokens.scrollbarMargin, tokens.scrollbarMargin);
+], timePickerGridTokens.timePickerGridBackground, tokens.timePickerBackground, timePickerGridTokens.timePickerGridBorderRadius, tokens.timePickerBorderRadius, timePickerGridTokens.timePickerGridWidth, tokens.timePickerWidth, timePickerGridTokens.timePickerGridPadding, tokens.timePickerPadding, timePickerGridTokens.disabledOpacity, tokens.disabledOpacity, timePickerGridTokens.columnHeight, tokens.columnHeight, timePickerGridTokens.itemHeight, tokens.itemHeight, timePickerGridTokens.itemBorderRadius, tokens.itemBorderRadius, timePickerGridTokens.itemPadding, tokens.itemPadding, timePickerGridTokens.itemBackgroundHover, tokens.itemBackgroundHover, timePickerGridTokens.itemBackgroundActive, tokens.itemBackgroundActive, timePickerGridTokens.itemFocusColor, tokens.itemFocusColor, timePickerGridTokens.itemFontFamily, tokens.itemFontFamily, timePickerGridTokens.itemFontSize, tokens.itemFontSize, timePickerGridTokens.itemFontStyle, tokens.itemFontStyle, timePickerGridTokens.itemFontWeight, tokens.itemFontWeight, timePickerGridTokens.itemLetterSpacing, tokens.itemLetterSpacing, timePickerGridTokens.itemLineHeight, tokens.itemLineHeight, timePickerGridTokens.scrollbarWidth, tokens.scrollbarWidth, timePickerGridTokens.scrollbarColor, tokens.scrollbarColor, timePickerGridTokens.scrollbarTrackColor, tokens.scrollbarTrackColor, timePickerGridTokens.scrollbarMargin, tokens.scrollbarMargin);
 // NOTE: переопределение токенов TextField
 export var StyledInput = styled(TextField).withConfig({
     displayName: "TimePicker.styles__StyledInput",
-    componentId: "sc-d43646a1-2"
+    componentId: "sc-f592831a-2"
 })([
     "width:100%;",
     ":var(",
@@ -234,7 +240,7 @@ export var base = css([
 ], tokens.width, tokens.dropdownMarginTop, popoverClasses.wrapper, popoverClasses.target, classes.timePickerstretched, popoverClasses.root, classes.timePickerFullWidth, classes.timePickerPlacementRight, classes.timePickerFixed, tokens.timePickerWidth);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-d43646a1-3"
+    componentId: "sc-f592831a-3"
 })([
     "background:var(",
     ");border-radius:var(",

package/dist/styled-components/es/components/TimePicker/TimePicker.tokens.js

@@ -102,6 +102,7 @@ export var tokens = {
     textFieldContentRightSlotColorHover: '--plasma-time-picker-textfield__content-right-color-hover',
     /** Прозрачность для всего компонента в состоянии disabled */ disabledOpacity: '--plasma-time-picker-disabled-opacity',
     dropdownMarginTop: '--plasma-time-picker-dropdown-margin-top',
+    timePickerShadow: '--plasma-time-picker-ui-box-shadow',
     timePickerBackground: '--plasma-time-picker-ui-background',
     timePickerBorderRadius: '--plasma-time-picker-ui-border-radius',
     timePickerWidth: '--plasma-time-picker-ui-width',
@@ -112,6 +113,7 @@ export var tokens = {
     itemPadding: '--plasma-time-picker-item-padding',
     itemBackgroundHover: '--plasma-time-picker-item-hover-background',
     itemBackgroundActive: '--plasma-time-picker-item-active-background',
+    itemFocusColor: '--plasma-time-picker-item-focus-color',
     itemFontFamily: '--plasma-time-picker-item-font-family',
     itemFontStyle: '--plasma-time-picker-item-font-style',
     itemFontSize: '--plasma-time-picker-item-font-size',

package/dist/styled-components/es/components/TimePickerGrid/TimePickerGrid.styles.js

@@ -2,11 +2,11 @@ import styled from "styled-components";
 import { css } from "styled-components";
 import { tokens } from "./TimePickerGrid.tokens";
 export var base = css([
-    "display:flex;width:100%;height:10rem;"
+    "display:flex;width:100%;"
 ]);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePickerGrid.styles__StyledTimePicker",
-    componentId: "sc-526cdfba-0"
+    componentId: "sc-ad4aa553-0"
 })([
     "background:var(",
     ");border-radius:var(",

package/dist/styled-components/es/components/TimePickerGrid/TimePickerGrid.tokens.js

@@ -19,6 +19,7 @@ export var tokens = {
     itemPadding: '--plasma-time-picker-grid-item-padding',
     itemBackgroundHover: '--plasma-time-picker-grid-item-hover-background',
     itemBackgroundActive: '--plasma-time-picker-grid-item-active-background',
+    itemFocusColor: '--plasma-time-picker-grid-item-focus-color',
     itemFontFamily: '--plasma-time-picker-grid-item-font-family',
     itemFontStyle: '--plasma-time-picker-grid-item-font-style',
     itemFontSize: '--plasma-time-picker-grid-item-font-size',