@salutejs/plasma-b2c 1.640.0-dev.0 → 1.641.0-dev.0

package/dist/styled-components/cjs/components/Select/Select.config.js

@@ -32,6 +32,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperColor}: var(--text-secondary);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.selectTokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -79,6 +80,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperColor}: var(--text-positive);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.selectTokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -126,6 +128,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperColor}: var(--text-warning);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.selectTokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -173,6 +176,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.selectTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperColor}: var(--text-negative);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.selectTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.selectTokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -396,6 +400,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight);
                 ${_styledcomponents.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${_styledcomponents.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionMargin}: 0.375rem;
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.selectTokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${_styledcomponents.selectTokens.textFieldHintTargetSize}: 2.375rem;
@@ -521,6 +532,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight);
                 ${_styledcomponents.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.selectTokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${_styledcomponents.selectTokens.textFieldHintTargetSize}: 2.375rem;
@@ -646,6 +664,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
                 ${_styledcomponents.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.selectTokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${_styledcomponents.selectTokens.textFieldHintTargetSize}: 2.375rem;
@@ -771,6 +796,13 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${_styledcomponents.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionMargin}: 0;
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.selectTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.selectTokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;
                 ${_styledcomponents.selectTokens.textFieldHintTargetSize}: 2.375rem;

package/dist/styled-components/cjs/components/Select/Select.js

@@ -11,13 +11,20 @@ Object.defineProperty(exports, "Select", {
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _Selectconfig = require("./Select.config");
+const _Selectclearconfig = require("./Select.clear.config");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.selectConfig, _Selectconfig.config);
-const SelectNewHope = (0, _styledcomponents.component)(mergedConfig);
+const SelectDefault = (0, _styledcomponents.component)(mergedConfig);
+const mergedConfigClear = (0, _styledcomponents.mergeConfig)(_styledcomponents.selectConfig, _Selectclearconfig.config);
+const SelectClear = (0, _styledcomponents.component)(mergedConfigClear);
+const SelectNewHope = (0, _styledcomponents.createConditionalComponent)({
+    default: SelectDefault,
+    clear: SelectClear
+});
 const SelectComponent = (props, ref)=>{
     return /*#__PURE__*/ _react.default.createElement(SelectNewHope, {
         ref: ref,

package/dist/styled-components/cjs/components/TextArea/TextArea.clear.config.js

@@ -274,6 +274,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -348,6 +349,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -422,6 +424,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -496,6 +499,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -570,6 +574,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TextArea/TextArea.config.js

@@ -297,6 +297,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -370,6 +371,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -445,6 +447,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -518,6 +521,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -591,6 +595,7 @@ const config = {
                 ${_styledcomponents.textAreaTokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
 
                 ${_styledcomponents.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textAreaTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TextField/TextField.clear.config.js

@@ -49,9 +49,11 @@ const config = {
             `,
             positive: (0, _styledcomponents.css)`
                 ${_styledcomponents.textFieldTokens.color}: var(--text-positive);
+                ${_styledcomponents.textFieldTokens.colorFocus}: var(--text-primary);
 
                 ${_styledcomponents.textFieldTokens.placeholderColor}: var(--text-positive);
-                ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-positive);
+                ${_styledcomponents.textFieldTokens.placeholderColorHover}: var(--text-secondary);
+                ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: transparent;
                 ${_styledcomponents.textFieldTokens.backgroundColorHover}: transparent;
@@ -62,12 +64,15 @@ const config = {
                 ${_styledcomponents.textFieldTokens.labelColor}: var(--text-primary);
                 ${_styledcomponents.textFieldTokens.leftHelperColor}: var(--text-positive);
                 ${_styledcomponents.textFieldTokens.rightHelperColor}: var(--text-positive);
+                ${_styledcomponents.textFieldTokens.leftHelperColorFocus}: var(--text-secondary);
+                ${_styledcomponents.textFieldTokens.rightHelperColorFocus}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.hintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.textFieldTokens.contentSlotColor}: var(--text-positive);
                 ${_styledcomponents.textFieldTokens.contentSlotColorHover}: var(--text-positive-hover);
                 ${_styledcomponents.textFieldTokens.contentSlotColorActive}: var(--text-positive-active);
+                ${_styledcomponents.textFieldTokens.contentSlotColorFocus}: var(--text-secondary);
 
                 ${_styledcomponents.textFieldTokens.contentSlotRightColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.contentSlotRightColorHover}: var(--text-secondary-hover);
@@ -83,9 +88,11 @@ const config = {
             `,
             warning: (0, _styledcomponents.css)`
                 ${_styledcomponents.textFieldTokens.color}: var(--text-warning);
+                ${_styledcomponents.textFieldTokens.colorFocus}: var(--text-primary);
 
                 ${_styledcomponents.textFieldTokens.placeholderColor}: var(--text-warning);
-                ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-warning);
+                ${_styledcomponents.textFieldTokens.placeholderColorHover}: var(--text-secondary);
+                ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: transparent;
                 ${_styledcomponents.textFieldTokens.backgroundColorHover}: transparent;
@@ -96,12 +103,15 @@ const config = {
                 ${_styledcomponents.textFieldTokens.labelColor}: var(--text-primary);
                 ${_styledcomponents.textFieldTokens.leftHelperColor}: var(--text-warning);
                 ${_styledcomponents.textFieldTokens.rightHelperColor}: var(--text-warning);
+                ${_styledcomponents.textFieldTokens.leftHelperColorFocus}: var(--text-secondary);
+                ${_styledcomponents.textFieldTokens.rightHelperColorFocus}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.hintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.textFieldTokens.contentSlotColor}: var(--text-warning);
                 ${_styledcomponents.textFieldTokens.contentSlotColorHover}: var(--text-warning-hover);
                 ${_styledcomponents.textFieldTokens.contentSlotColorActive}: var(--text-warning-active);
+                ${_styledcomponents.textFieldTokens.contentSlotColorFocus}: var(--text-secondary);
 
                 ${_styledcomponents.textFieldTokens.contentSlotRightColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.contentSlotRightColorHover}: var(--text-secondary-hover);
@@ -117,9 +127,11 @@ const config = {
             `,
             negative: (0, _styledcomponents.css)`
                 ${_styledcomponents.textFieldTokens.color}: var(--text-negative);
+                ${_styledcomponents.textFieldTokens.colorFocus}: var(--text-primary);
 
                 ${_styledcomponents.textFieldTokens.placeholderColor}: var(--text-negative);
-                ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-negative);
+                ${_styledcomponents.textFieldTokens.placeholderColorHover}: var(--text-secondary);
+                ${_styledcomponents.textFieldTokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${_styledcomponents.textFieldTokens.backgroundColor}: transparent;
                 ${_styledcomponents.textFieldTokens.backgroundColorHover}: transparent;
@@ -130,12 +142,15 @@ const config = {
                 ${_styledcomponents.textFieldTokens.labelColor}: var(--text-primary);
                 ${_styledcomponents.textFieldTokens.leftHelperColor}: var(--text-negative);
                 ${_styledcomponents.textFieldTokens.rightHelperColor}: var(--text-negative);
+                ${_styledcomponents.textFieldTokens.leftHelperColorFocus}: var(--text-secondary);
+                ${_styledcomponents.textFieldTokens.rightHelperColorFocus}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.titleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.hintIconColor}: var(--text-secondary);
 
                 ${_styledcomponents.textFieldTokens.contentSlotColor}: var(--text-negative);
                 ${_styledcomponents.textFieldTokens.contentSlotColorHover}: var(--text-negative-hover);
                 ${_styledcomponents.textFieldTokens.contentSlotColorActive}: var(--text-negative-active);
+                ${_styledcomponents.textFieldTokens.contentSlotColorFocus}: var(--text-secondary);
 
                 ${_styledcomponents.textFieldTokens.contentSlotRightColor}: var(--text-secondary);
                 ${_styledcomponents.textFieldTokens.contentSlotRightColorHover}: var(--text-secondary-hover);
@@ -184,6 +199,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -276,6 +292,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -360,6 +377,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -444,6 +462,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -528,6 +547,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TextField/TextField.config.js

@@ -170,6 +170,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.clearHintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -263,6 +264,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -349,6 +351,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -435,6 +438,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -521,6 +525,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${_styledcomponents.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_styledcomponents.textFieldTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.textFieldTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TimePicker/TimePicker.config.js

@@ -56,6 +56,7 @@ const config = {
                 ${_styledcomponents.timePickerTokens.disabledOpacity}: 0.4;
 
                 ${_styledcomponents.timePickerTokens.leftHelperColor}: var(--text-secondary);
+                ${_styledcomponents.timePickerTokens.titleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.timePickerTokens.leftHelperColorError}: var(--text-negative);
                 ${_styledcomponents.timePickerTokens.leftHelperColorSuccess}: var(--text-positive);
 
@@ -80,6 +81,13 @@ const config = {
                 ${_styledcomponents.timePickerTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight);
                 ${_styledcomponents.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${_styledcomponents.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.timePickerTokens.titleCaptionMargin}: 0.375rem;
+                ${_styledcomponents.timePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.timePickerTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.timePickerTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.timePickerTokens.indicatorSize}: 0.5rem;
                 ${_styledcomponents.timePickerTokens.indicatorSizeOuter}: 0.375rem;
@@ -163,6 +171,13 @@ const config = {
                 ${_styledcomponents.timePickerTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
                 ${_styledcomponents.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.timePickerTokens.titleCaptionMargin}: 0.3125rem;
+                ${_styledcomponents.timePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.timePickerTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.timePickerTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.timePickerTokens.indicatorSize}: 0.5rem;
                 ${_styledcomponents.timePickerTokens.indicatorSizeOuter}: 0.375rem;
@@ -246,6 +261,13 @@ const config = {
                 ${_styledcomponents.timePickerTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
                 ${_styledcomponents.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.timePickerTokens.titleCaptionMargin}: 0.1875rem;
+                ${_styledcomponents.timePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.timePickerTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.timePickerTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.timePickerTokens.indicatorSize}: 0.375rem;
                 ${_styledcomponents.timePickerTokens.indicatorSizeOuter}: 0.375rem;
@@ -329,6 +351,13 @@ const config = {
                 ${_styledcomponents.timePickerTokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${_styledcomponents.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.timePickerTokens.titleCaptionMargin}: 0;
+                ${_styledcomponents.timePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.timePickerTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.timePickerTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.timePickerTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.timePickerTokens.indicatorSize}: 0.375rem;
                 ${_styledcomponents.timePickerTokens.indicatorSizeOuter}: 0.375rem;
@@ -464,6 +493,7 @@ const config = {
                 ${_styledcomponents.timePickerTokens.backgroundReadOnly}: var(--surface-transparent-primary);
                 ${_styledcomponents.timePickerTokens.labelColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.timePickerTokens.leftHelperColorReadOnly}: var(--text-secondary);
+                ${_styledcomponents.timePickerTokens.titleCaptionColorReadOnly}: var(--text-secondary);
 
                 ${_styledcomponents.timePickerTokens.textFieldColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.timePickerTokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary);

package/dist/styled-components/cjs/components/_Button/Button.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Button", {
+    enumerable: true,
+    get: function() {
+        return Button;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _ButtonWeb = require("./views/web/ButtonWeb");
+const _ButtonB2C = require("./views/b2c/ButtonB2C");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const { createButton } = _styledcomponents.plasmaCore;
+const componentMap = {
+    web: _ButtonWeb.ButtonWeb,
+    b2c: _ButtonB2C.ButtonB2C
+};
+const Button = ({ design })=>{
+    const ButtonView = createButton(componentMap[design]);
+    ButtonView.defaultProps = {
+        size: 'm',
+        view: 'secondary',
+        pin: 'square-square'
+    };
+    return /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>/*#__PURE__*/ _react.default.createElement(ButtonView, {
+            ...props,
+            ref: ref
+        }));
+};

package/dist/styled-components/cjs/components/_Button/Button.props.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get buttonCheckedActive () {
+        return buttonCheckedActive;
+    },
+    get buttonCheckedActiveColor () {
+        return buttonCheckedActiveColor;
+    },
+    get buttonCheckedHover () {
+        return buttonCheckedHover;
+    },
+    get buttonCheckedHoverColor () {
+        return buttonCheckedHoverColor;
+    },
+    get buttonCriticalActive () {
+        return buttonCriticalActive;
+    },
+    get buttonCriticalHover () {
+        return buttonCriticalHover;
+    },
+    get buttonPrimaryActive () {
+        return buttonPrimaryActive;
+    },
+    get buttonPrimaryHover () {
+        return buttonPrimaryHover;
+    },
+    get buttonSecondaryActive () {
+        return buttonSecondaryActive;
+    },
+    get buttonSecondaryHover () {
+        return buttonSecondaryHover;
+    },
+    get buttonSuccessActive () {
+        return buttonSuccessActive;
+    },
+    get buttonSuccessHover () {
+        return buttonSuccessHover;
+    },
+    get buttonViews () {
+        return buttonViews;
+    },
+    get buttonWarningActive () {
+        return buttonWarningActive;
+    },
+    get buttonWarningHover () {
+        return buttonWarningHover;
+    }
+});
+const _styledcomponents = require("styled-components");
+const _styledcomponents1 = require("@salutejs/plasma-new-hope/styled-components");
+const { buttonViews: baseViews } = _styledcomponents1.plasmaCore;
+const buttonPrimaryHover = 'var(--plasma-colors-button-primary-hover)';
+const buttonPrimaryActive = 'var(--plasma-colors-button-primary-active)';
+const buttonSecondaryHover = 'var(--plasma-colors-button-secondary-hover)';
+const buttonSecondaryActive = 'var(--plasma-colors-button-secondary-active)';
+const buttonSuccessHover = 'var(--plasma-colors-button-success-hover)';
+const buttonSuccessActive = 'var(--plasma-colors-button-success-active)';
+const buttonWarningHover = 'var(--plasma-colors-button-warning-hover)';
+const buttonWarningActive = 'var(--plasma-colors-button-warning-active)';
+const buttonCriticalHover = 'var(--plasma-colors-button-critical-hover)';
+const buttonCriticalActive = 'var(--plasma-colors-button-critical-active)';
+const buttonCheckedHover = 'var(--plasma-colors-button-checked-hover)';
+const buttonCheckedHoverColor = 'var(--plasma-colors-button-checked-hover-color)';
+const buttonCheckedActive = 'var(--plasma-colors-button-checked-active)';
+const buttonCheckedActiveColor = 'var(--plasma-colors-button-checked-active-color)';
+const buttonViews = {
+    primary: (0, _styledcomponents.css)([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.primary, buttonPrimaryHover, baseViews.primary.color, buttonPrimaryActive, baseViews.primary.color),
+    success: (0, _styledcomponents.css)([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.success, buttonSuccessHover, baseViews.success.color, buttonSuccessActive, baseViews.success.color),
+    warning: (0, _styledcomponents.css)([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.warning, buttonWarningHover, baseViews.warning.color, buttonWarningActive, baseViews.warning.color),
+    critical: (0, _styledcomponents.css)([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.critical, buttonCriticalHover, baseViews.critical.color, buttonCriticalActive, baseViews.critical.color),
+    secondary: (0, _styledcomponents.css)([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.secondary, buttonSecondaryHover, baseViews.secondary.color, buttonSecondaryActive, baseViews.secondary.color),
+    checked: (0, _styledcomponents.css)([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.checked, buttonCheckedHover, buttonCheckedHoverColor, buttonCheckedActive, buttonCheckedActiveColor),
+    overlay: baseViews.overlay,
+    clear: baseViews.clear
+};

package/dist/styled-components/cjs/components/_Button/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Button () {
+        return _Button.Button;
+    },
+    get buttonViews () {
+        return _Buttonprops.buttonViews;
+    }
+});
+const _Button = require("./Button");
+const _Buttonprops = require("./Button.props");