npm - @salutejs/plasma-new-hope - Versions diffs - 0.343.1-canary.2393.20367490814.0 → 0.343.1-canary.2393.20451760148.0 - Mend

@salutejs/plasma-new-hope 0.343.1-canary.2393.20367490814.0 → 0.343.1-canary.2393.20451760148.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1122) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -13,13 +13,13 @@ var mergedTimePickerGrid = mergeConfig(timePickerGridConfig);
 var TimePickerGrid = component(mergedTimePickerGrid);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-d43646a1-0"
+    componentId: "sc-d0cc628-0"
 })([
     ""
 ]);
 export var StyledTimePickerGrid = styled(TimePickerGrid).withConfig({
     displayName: "TimePicker.styles__StyledTimePickerGrid",
-    componentId: "sc-d43646a1-1"
+    componentId: "sc-d0cc628-1"
 })([
     "",
     ":var(",
@@ -63,12 +63,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-d0cc628-2"
 })([
     "width:100%;",
     ":var(",
@@ -234,7 +236,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-d0cc628-3"
 })([
     "background:var(",
     ");border-radius:var(",

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

@@ -112,6 +112,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.tokens.js CHANGED Viewed

@@ -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',