@salutejs/plasma-web 1.642.0-dev.0 → 1.643.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);
@@ -83,6 +84,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);
@@ -134,6 +136,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);
@@ -185,6 +188,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);
@@ -413,6 +417,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;
@@ -539,6 +550,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;
@@ -665,6 +683,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;
@@ -791,6 +816,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

@@ -273,6 +273,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);
@@ -347,6 +348,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);
@@ -421,6 +423,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);
@@ -495,6 +498,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);
@@ -569,6 +573,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

@@ -173,6 +173,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem 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);
@@ -266,6 +267,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem 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);
@@ -351,6 +353,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem 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);
@@ -436,6 +439,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem 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.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem 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

@@ -68,6 +68,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);
 
@@ -93,6 +94,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;
@@ -177,6 +185,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;
@@ -261,6 +276,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;
@@ -345,6 +367,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;
@@ -480,6 +509,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);