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

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

@@ -22,6 +22,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
                 ${tokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -69,6 +70,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-positive);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
                 ${tokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -116,6 +118,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-warning);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
                 ${tokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -163,6 +166,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-negative);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
                 ${tokens.textFieldContentSlotColor}: var(--text-secondary);
@@ -386,6 +390,13 @@ export const config = {
                 ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight);
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.textFieldTitleCaptionMargin}: 0.375rem;
+                ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${tokens.textFieldHintTargetSize}: 2.375rem;
@@ -511,6 +522,13 @@ export const config = {
                 ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight);
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${tokens.textFieldHintTargetSize}: 2.375rem;
@@ -636,6 +654,13 @@ export const config = {
                 ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${tokens.textFieldHintTargetSize}: 2.375rem;
@@ -761,6 +786,13 @@ export const config = {
                 ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.textFieldTitleCaptionMargin}: 0;
+                ${tokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;
                 ${tokens.textFieldHintTargetSize}: 2.375rem;

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

@@ -1,8 +1,15 @@
-import { selectConfig, component, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/styled-components';
+import { selectConfig, component, mergeConfig, fixedForwardRef, createConditionalComponent } from '@salutejs/plasma-new-hope/styled-components';
 import React from 'react';
 import { config } from './Select.config';
+import { config as clearConfig } from './Select.clear.config';
 const mergedConfig = mergeConfig(selectConfig, config);
-const SelectNewHope = component(mergedConfig);
+const SelectDefault = component(mergedConfig);
+const mergedConfigClear = mergeConfig(selectConfig, clearConfig);
+const SelectClear = component(mergedConfigClear);
+const SelectNewHope = createConditionalComponent({
+    default: SelectDefault,
+    clear: SelectClear
+});
 const SelectComponent = (props, ref)=>{
     return /*#__PURE__*/ React.createElement(SelectNewHope, {
         ref: ref,

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

@@ -264,6 +264,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -338,6 +339,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -412,6 +414,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.3125rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -486,6 +489,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.1875rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -560,6 +564,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -287,6 +287,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -360,6 +361,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -435,6 +437,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.3125rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -508,6 +511,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.1875rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -581,6 +585,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -39,9 +39,11 @@ export const config = {
             `,
             positive: css`
                 ${tokens.color}: var(--text-positive);
+                ${tokens.colorFocus}: var(--text-primary);
 
                 ${tokens.placeholderColor}: var(--text-positive);
-                ${tokens.placeholderColorFocus}: var(--text-positive);
+                ${tokens.placeholderColorHover}: var(--text-secondary);
+                ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: transparent;
                 ${tokens.backgroundColorHover}: transparent;
@@ -52,12 +54,15 @@ export const config = {
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-positive);
                 ${tokens.rightHelperColor}: var(--text-positive);
+                ${tokens.leftHelperColorFocus}: var(--text-secondary);
+                ${tokens.rightHelperColorFocus}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
 
                 ${tokens.contentSlotColor}: var(--text-positive);
                 ${tokens.contentSlotColorHover}: var(--text-positive-hover);
                 ${tokens.contentSlotColorActive}: var(--text-positive-active);
+                ${tokens.contentSlotColorFocus}: var(--text-secondary);
 
                 ${tokens.contentSlotRightColor}: var(--text-secondary);
                 ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover);
@@ -73,9 +78,11 @@ export const config = {
             `,
             warning: css`
                 ${tokens.color}: var(--text-warning);
+                ${tokens.colorFocus}: var(--text-primary);
 
                 ${tokens.placeholderColor}: var(--text-warning);
-                ${tokens.placeholderColorFocus}: var(--text-warning);
+                ${tokens.placeholderColorHover}: var(--text-secondary);
+                ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: transparent;
                 ${tokens.backgroundColorHover}: transparent;
@@ -86,12 +93,15 @@ export const config = {
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-warning);
                 ${tokens.rightHelperColor}: var(--text-warning);
+                ${tokens.leftHelperColorFocus}: var(--text-secondary);
+                ${tokens.rightHelperColorFocus}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
 
                 ${tokens.contentSlotColor}: var(--text-warning);
                 ${tokens.contentSlotColorHover}: var(--text-warning-hover);
                 ${tokens.contentSlotColorActive}: var(--text-warning-active);
+                ${tokens.contentSlotColorFocus}: var(--text-secondary);
 
                 ${tokens.contentSlotRightColor}: var(--text-secondary);
                 ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover);
@@ -107,9 +117,11 @@ export const config = {
             `,
             negative: css`
                 ${tokens.color}: var(--text-negative);
+                ${tokens.colorFocus}: var(--text-primary);
 
                 ${tokens.placeholderColor}: var(--text-negative);
-                ${tokens.placeholderColorFocus}: var(--text-negative);
+                ${tokens.placeholderColorHover}: var(--text-secondary);
+                ${tokens.placeholderColorFocus}: var(--text-tertiary);
 
                 ${tokens.backgroundColor}: transparent;
                 ${tokens.backgroundColorHover}: transparent;
@@ -120,12 +132,15 @@ export const config = {
                 ${tokens.labelColor}: var(--text-primary);
                 ${tokens.leftHelperColor}: var(--text-negative);
                 ${tokens.rightHelperColor}: var(--text-negative);
+                ${tokens.leftHelperColorFocus}: var(--text-secondary);
+                ${tokens.rightHelperColorFocus}: var(--text-secondary);
                 ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.hintIconColor}: var(--text-secondary);
 
                 ${tokens.contentSlotColor}: var(--text-negative);
                 ${tokens.contentSlotColorHover}: var(--text-negative-hover);
                 ${tokens.contentSlotColorActive}: var(--text-negative-active);
+                ${tokens.contentSlotColorFocus}: var(--text-secondary);
 
                 ${tokens.contentSlotRightColor}: var(--text-secondary);
                 ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover);
@@ -174,6 +189,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -266,6 +282,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -350,6 +367,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.3125rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -434,6 +452,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.1875rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -518,6 +537,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -160,6 +160,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -253,6 +254,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.375rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -339,6 +341,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.3125rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -425,6 +428,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0.1875rem;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -511,6 +515,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionMargin}: 0;
                 ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -46,6 +46,7 @@ export const config = {
                 ${tokens.disabledOpacity}: 0.4;
 
                 ${tokens.leftHelperColor}: var(--text-secondary);
+                ${tokens.titleCaptionColor}: var(--text-secondary);
                 ${tokens.leftHelperColorError}: var(--text-negative);
                 ${tokens.leftHelperColorSuccess}: var(--text-positive);
 
@@ -70,6 +71,13 @@ export const config = {
                 ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight);
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.titleCaptionMargin}: 0.375rem;
+                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.indicatorSize}: 0.5rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -153,6 +161,13 @@ export const config = {
                 ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.titleCaptionMargin}: 0.3125rem;
+                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.indicatorSize}: 0.5rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -236,6 +251,13 @@ export const config = {
                 ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.titleCaptionMargin}: 0.1875rem;
+                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.indicatorSize}: 0.375rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -319,6 +341,13 @@ export const config = {
                 ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleCaptionMargin}: 0;
+                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.indicatorSize}: 0.375rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -454,6 +483,7 @@ export const config = {
                 ${tokens.backgroundReadOnly}: var(--surface-transparent-primary);
                 ${tokens.labelColorReadOnly}: var(--text-secondary);
                 ${tokens.leftHelperColorReadOnly}: var(--text-secondary);
+                ${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
 
                 ${tokens.textFieldColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary);

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

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+import { ButtonWeb } from './views/web/ButtonWeb';
+import { ButtonB2C } from './views/b2c/ButtonB2C';
+const { createButton } = plasmaCore;
+const componentMap = {
+    web: ButtonWeb,
+    b2c: ButtonB2C
+};
+export const Button = ({ design })=>{
+    const ButtonView = createButton(componentMap[design]);
+    ButtonView.defaultProps = {
+        size: 'm',
+        view: 'secondary',
+        pin: 'square-square'
+    };
+    return /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ React.createElement(ButtonView, {
+            ...props,
+            ref: ref
+        }));
+};

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

@@ -0,0 +1,71 @@
+import { css } from 'styled-components';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+const { buttonViews: baseViews } = plasmaCore;
+export const buttonPrimaryHover = 'var(--plasma-colors-button-primary-hover)';
+export const buttonPrimaryActive = 'var(--plasma-colors-button-primary-active)';
+export const buttonSecondaryHover = 'var(--plasma-colors-button-secondary-hover)';
+export const buttonSecondaryActive = 'var(--plasma-colors-button-secondary-active)';
+export const buttonSuccessHover = 'var(--plasma-colors-button-success-hover)';
+export const buttonSuccessActive = 'var(--plasma-colors-button-success-active)';
+export const buttonWarningHover = 'var(--plasma-colors-button-warning-hover)';
+export const buttonWarningActive = 'var(--plasma-colors-button-warning-active)';
+export const buttonCriticalHover = 'var(--plasma-colors-button-critical-hover)';
+export const buttonCriticalActive = 'var(--plasma-colors-button-critical-active)';
+export const buttonCheckedHover = 'var(--plasma-colors-button-checked-hover)';
+export const buttonCheckedHoverColor = 'var(--plasma-colors-button-checked-hover-color)';
+export const buttonCheckedActive = 'var(--plasma-colors-button-checked-active)';
+export const buttonCheckedActiveColor = 'var(--plasma-colors-button-checked-active-color)';
+/**
+ * Views (colors) for both B2B and B2C
+ */ export const buttonViews = {
+    primary: css([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.primary, buttonPrimaryHover, baseViews.primary.color, buttonPrimaryActive, baseViews.primary.color),
+    success: css([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.success, buttonSuccessHover, baseViews.success.color, buttonSuccessActive, baseViews.success.color),
+    warning: css([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.warning, buttonWarningHover, baseViews.warning.color, buttonWarningActive, baseViews.warning.color),
+    critical: css([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.critical, buttonCriticalHover, baseViews.critical.color, buttonCriticalActive, baseViews.critical.color),
+    secondary: css([
+        ``,
+        ` &:hover{background-color:`,
+        `;color:`,
+        `;}&:active{background-color:`,
+        `;color:`,
+        `;}`
+    ], baseViews.secondary, buttonSecondaryHover, baseViews.secondary.color, buttonSecondaryActive, baseViews.secondary.color),
+    checked: 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/es/components/_Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export { buttonViews } from './Button.props';

package/dist/styled-components/es/components/_Button/types.js

@@ -0,0 +1 @@
+export { };

package/dist/styled-components/es/components/_Button/views/b2c/ButtonB2C.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyLBold, bodyMBold, bodySBold, bodyXSBold, bodyXS } from '@salutejs/plasma-typo';
+import { buttonViews } from '../../Button.props';
+const { ButtonRoot, getButtonSizesMixin, buttonSizes } = plasmaCore;
+const buttonTypography = {
+    l: bodyLBold,
+    m: bodyMBold,
+    s: bodySBold,
+    xs: bodyXSBold,
+    xxs: bodyXS
+};
+const buttonSizesB2C = {
+    ...buttonSizes,
+    xs: {
+        height: '2rem',
+        paddingY: '0.5625rem',
+        paddingX: '0.75rem',
+        paddingContentX: '0.75rem',
+        paddingStretchX: '0.75rem',
+        radius: '0.5rem',
+        radiusCircle: '1rem'
+    },
+    xxs: {
+        height: '1.5rem',
+        paddingY: '0.3125rem',
+        paddingX: '0.625rem',
+        paddingContentX: '0.625rem',
+        paddingStretchX: '0.625rem',
+        radius: '0.375rem',
+        radiusCircle: '0.75rem'
+    }
+};
+const applySizes = getButtonSizesMixin(buttonSizesB2C, buttonTypography);
+export const ButtonB2C = styled(ButtonRoot).withConfig({
+    displayName: "ButtonB2C",
+    componentId: "sc-f6058e8f-0"
+})([
+    ``,
+    ` `,
+    ``
+], applySizes, ({ view })=>buttonViews[view]);

package/dist/styled-components/es/components/_Button/views/web/ButtonWeb.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+import { buttonViews } from '../../Button.props';
+const { ButtonRoot, getButtonSizesMixin, buttonSizes, buttonTypography } = plasmaCore;
+const buttonTypographyWEB = {
+    ...buttonTypography,
+    xs: {
+        ...buttonTypography.s,
+        lineHeight: '0.875rem',
+        fontSize: '0.75rem'
+    },
+    xxs: {
+        ...buttonTypography.s,
+        lineHeight: '0.875rem',
+        fontSize: '0.75rem',
+        fontWeight: 400
+    }
+};
+const buttonSizesWEB = {
+    ...buttonSizes,
+    xs: {
+        height: '2rem',
+        paddingY: '0.5625rem',
+        paddingX: '0.75rem',
+        paddingContentX: '0.75rem',
+        paddingStretchX: '0.75rem',
+        radius: '0.5rem',
+        radiusCircle: '1rem'
+    },
+    xxs: {
+        height: '1.5rem',
+        paddingY: '0.3125rem',
+        paddingX: '0.625rem',
+        paddingContentX: '0.625rem',
+        paddingStretchX: '0.625rem',
+        radius: '0.375rem',
+        radiusCircle: '0.75rem'
+    }
+};
+const applySizes = getButtonSizesMixin(buttonSizesWEB, buttonTypographyWEB);
+export const ButtonWeb = styled(ButtonRoot).withConfig({
+    displayName: "ButtonWeb",
+    componentId: "sc-52d055cb-0"
+})([
+    ``,
+    ` `,
+    ``
+], applySizes, ({ view })=>buttonViews[view]);