@salutejs/plasma-web 1.642.0-dev.0 → 1.643.0-dev.0

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

@@ -33,6 +33,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColor}: var(--text-secondary);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-transparent-primary);
@@ -79,6 +80,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColor}: var(--text-positive);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-positive);
@@ -125,6 +127,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColor}: var(--text-warning);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-warning);
@@ -171,6 +174,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColor}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColor}: var(--text-negative);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldFocusColor}: var(--text-accent);
 
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: var(--outline-negative);
@@ -234,6 +238,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionMargin}: 0.375rem;
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.autocompleteTokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${_styledcomponents.autocompleteTokens.textFieldHintTargetSize}: 2.375rem;
@@ -310,6 +321,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionMargin}: 0.3125rem;
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.autocompleteTokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${_styledcomponents.autocompleteTokens.textFieldHintTargetSize}: 2.375rem;
@@ -386,6 +404,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.autocompleteTokens.textFieldHintMargin}: -0.688rem -0.5rem;
                 ${_styledcomponents.autocompleteTokens.textFieldHintTargetSize}: 2.375rem;
@@ -462,6 +487,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionMargin}: 0;
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.autocompleteTokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;
                 ${_styledcomponents.autocompleteTokens.textFieldHintTargetSize}: 2.375rem;
@@ -592,6 +624,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColorReadOnly}: var(--outline-read-only);
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
+                ${_styledcomponents.autocompleteTokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${_styledcomponents.autocompleteTokens.textFieldLabelColorReadOnly}: var(--text-primary);
                 ${_styledcomponents.autocompleteTokens.textFieldDividerColorReadOnly}: var(--outline-read-only);
                 ${_styledcomponents.autocompleteTokens.textFieldBorderColor}: transparent;

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

@@ -12,20 +12,33 @@ _export(exports, {
     get Autocomplete () {
         return Autocomplete;
     },
+    get AutocompleteClear () {
+        return AutocompleteClear;
+    },
     get AutocompleteComponent () {
         return AutocompleteComponent;
+    },
+    get AutocompleteDefault () {
+        return AutocompleteDefault;
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _Autocompleteconfig = require("./Autocomplete.config");
+const _Autocompleteclearconfig = require("./Autocomplete.clear.config");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.autocompleteConfig, _Autocompleteconfig.config);
-const AutocompleteComponent = (0, _styledcomponents.component)(mergedConfig);
+const AutocompleteDefault = (0, _styledcomponents.component)(mergedConfig);
+const mergedClearConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.autocompleteConfig, _Autocompleteclearconfig.config);
+const AutocompleteClear = (0, _styledcomponents.component)(mergedClearConfig);
+const AutocompleteComponent = (0, _styledcomponents.createConditionalComponent)({
+    default: AutocompleteDefault,
+    clear: AutocompleteClear
+});
 const AutocompleteWithoutRef = (props, ref)=>{
     return /*#__PURE__*/ _react.default.createElement(AutocompleteComponent, {
         ...props,

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

@@ -207,6 +207,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -378,6 +379,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -549,6 +551,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -720,6 +723,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -891,6 +895,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -181,6 +181,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -353,6 +354,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -525,6 +527,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -697,6 +700,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -869,6 +873,7 @@ const config = {
                 ${_styledcomponents.datePickerTokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${_styledcomponents.datePickerTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.datePickerTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.datePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.datePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -160,6 +160,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -328,6 +329,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -496,6 +498,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -664,6 +667,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -832,6 +836,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -154,6 +154,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -322,6 +323,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -490,6 +492,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -658,6 +661,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -826,6 +830,7 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.dateTimePickerTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.dateTimePickerTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -72,6 +72,7 @@ const config = {
                 ${_styledcomponents.informationWrapperTokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto;
 
                 ${_styledcomponents.informationWrapperTokens.titleCaptionOffset}: 0.375rem;
+                ${_styledcomponents.informationWrapperTokens.titleCaptionMargin}: 0.375rem;
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -121,6 +122,7 @@ const config = {
                 ${_styledcomponents.informationWrapperTokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto;
 
                 ${_styledcomponents.informationWrapperTokens.titleCaptionOffset}: 0.313rem;
+                ${_styledcomponents.informationWrapperTokens.titleCaptionMargin}: 0.3125rem;
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -170,6 +172,7 @@ const config = {
                 ${_styledcomponents.informationWrapperTokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto;
 
                 ${_styledcomponents.informationWrapperTokens.titleCaptionOffset}: 0.188rem;
+                ${_styledcomponents.informationWrapperTokens.titleCaptionMargin}: 0.1875rem;
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -219,6 +222,7 @@ const config = {
                 ${_styledcomponents.informationWrapperTokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto;
 
                 ${_styledcomponents.informationWrapperTokens.titleCaptionOffset}: 0;
+                ${_styledcomponents.informationWrapperTokens.titleCaptionMargin}: 0;
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.informationWrapperTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);

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

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Modal", {
+    enumerable: true,
+    get: function() {
+        return Modal;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = /*#__PURE__*/ _interop_require_default(require("react-dom"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+const _styledcomponents1 = require("@salutejs/plasma-new-hope/styled-components");
+const _ModalsContext = require("./ModalsContext");
+const _ModalView = require("./ModalView");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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 ESCAPE_KEYCODE = 27;
+const wrapperHideAnimation = (0, _styledcomponents.keyframes)([
+    `from{opacity:1;}to{opacity:0;}`
+]);
+const bodyShowAnimation = (0, _styledcomponents.keyframes)([
+    `from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}`
+]);
+const bodyHideAnimation = (0, _styledcomponents.keyframes)([
+    `from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-100%);}`
+]);
+const StyledWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Modal__StyledWrapper",
+    componentId: "sc-c1a3a85-0"
+})([
+    `position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;`,
+    ``
+], ({ isHiding })=>isHiding && (0, _styledcomponents.css)([
+        `animation:0.1s `,
+        ` ease-out;`
+    ], wrapperHideAnimation));
+const StyledOverlay = _styledcomponents.default.div.withConfig({
+    displayName: "Modal__StyledOverlay",
+    componentId: "sc-c1a3a85-1"
+})([
+    `position:absolute;`,
+    `;width:100%;height:100%;background-color:`,
+    `;backdrop-filter:var(--backdrop-filter);cursor:`,
+    `;`
+], ({ $withBlur })=>{
+    return (0, _styledcomponents.css)([
+        `--background-color:`,
+        `;--backdrop-filter:`,
+        `;`
+    ], $withBlur ? 'rgba(35, 35, 35, 0.2)' : 'rgba(8, 8, 8, 0.56)', $withBlur ? 'blur(1rem)' : 'none');
+}, ({ transparent })=>transparent ? 'transparent' : 'var(--background-color)', ({ clickable })=>clickable ? 'pointer' : 'default');
+const StyledModal = _styledcomponents.default.div.withConfig({
+    displayName: "Modal__StyledModal",
+    componentId: "sc-c1a3a85-2"
+})([
+    `position:absolute;height:100%;pointer-events:none;`,
+    ``
+], ({ isHiding })=>(0, _styledcomponents.css)([
+        `animation:0.4s `,
+        ` ease-out;`
+    ], isHiding ? bodyHideAnimation : bodyShowAnimation));
+const NoScroll = (0, _styledcomponents.createGlobalStyle)([
+    `body{overflow-y:hidden;}`
+]);
+const Modal = ({ id, isOpen, opened, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, initialFocusRef, focusAfterRef, ...rest })=>{
+    const innerIsOpen = Boolean(isOpen || opened);
+    const uniqId = _styledcomponents1.plasmaCore.useUniqId();
+    const innerId = id || uniqId;
+    const wrapperRef = (0, _react.useRef)(null);
+    const portalRef = (0, _react.useRef)(null);
+    const trapRef = (0, _styledcomponents1.useFocusTrap)(true, initialFocusRef, focusAfterRef);
+    const controller = (0, _react.useContext)(_ModalsContext.ModalsContext);
+    const [, forceRender] = (0, _react.useState)(false);
+    const onOverlayKeyDown = (0, _react.useCallback)((event)=>{
+        if (!closeOnOverlayClick) {
+            return;
+        }
+        if (onOverlayClick) {
+            onOverlayClick(event);
+            return;
+        }
+        onClose?.();
+    }, [
+        closeOnOverlayClick,
+        onOverlayClick,
+        onClose
+    ]);
+    (0, _react.useEffect)(()=>{
+        let portal = document.getElementById(_ModalsContext.MODALS_PORTAL_ID);
+        if (!portal) {
+            portal = document.createElement('div');
+            portal.setAttribute('id', _ModalsContext.MODALS_PORTAL_ID);
+            portal.setAttribute('aria-live', 'off');
+            portal.setAttribute('role', 'presentation');
+            portal.style.position = 'relative';
+            portal.style.zIndex = '9000';
+            document.body.appendChild(portal);
+        }
+        portalRef.current = portal;
+        /**
+         * Изменение стейта нужно для того, чтобы модальное окно
+         * отобразилось после записи DOM элемента в portalRef.current
+         */ forceRender(true);
+    }, []);
+    (0, _react.useEffect)(()=>{
+        const onKeyDown = (event)=>{
+            if (closeOnEsc && event.keyCode === ESCAPE_KEYCODE && wrapperRef.current && portalRef.current && portalRef.current.contains(wrapperRef.current) && portalRef.current.children[portalRef.current.children.length - 1] === wrapperRef.current) {
+                if (onEscKeyDown) {
+                    onEscKeyDown(event);
+                    return;
+                }
+                onClose?.();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return ()=>{
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        onClose,
+        onEscKeyDown,
+        closeOnEsc
+    ]);
+    (0, _react.useEffect)(()=>{
+        return ()=>{
+            controller.unregister(innerId);
+        };
+    }, [
+        controller.unregister,
+        innerId
+    ]);
+    if (innerIsOpen) {
+        controller.register(innerId);
+    } else {
+        return null;
+    }
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(NoScroll, null), portalRef.current && /*#__PURE__*/ _reactdom.default.createPortal(/*#__PURE__*/ _react.default.createElement(StyledWrapper, {
+        ref: wrapperRef
+    }, /*#__PURE__*/ _react.default.createElement(StyledOverlay, {
+        transparent: controller.items.indexOf(innerId) !== 0,
+        clickable: closeOnOverlayClick,
+        onClick: onOverlayKeyDown,
+        $withBlur: withBlur
+    }), /*#__PURE__*/ _react.default.createElement(StyledModal, null, /*#__PURE__*/ _react.default.createElement(_ModalView.ModalView, {
+        onClose: onClose,
+        ref: trapRef,
+        ...rest
+    }))), portalRef.current));
+};

package/dist/styled-components/cjs/components/Modal/ModalView.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ModalView", {
+    enumerable: true,
+    get: function() {
+        return ModalView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+const _plasmaicons = require("@salutejs/plasma-icons");
+const _IconButton = require("../IconButton");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const StyledWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "ModalView__StyledWrapper",
+    componentId: "sc-e33474e6-0"
+})([
+    `display:flex;align-items:center;height:100%;`
+]);
+const StyledBody = _styledcomponents.default.div.withConfig({
+    displayName: "ModalView__StyledBody",
+    componentId: "sc-e33474e6-1"
+})([
+    `position:relative;width:25rem;max-width:100%;border-radius:1.25rem;background-color:var(--surface-solid-card);pointer-events:all;`
+]);
+const StyledContent = _styledcomponents.default.div.withConfig({
+    displayName: "ModalView__StyledContent",
+    componentId: "sc-e33474e6-2"
+})([
+    `padding:2rem;`
+]);
+const StyledButtonClose = (0, _styledcomponents.default)(_IconButton.IconButton).withConfig({
+    displayName: "ModalView__StyledButtonClose",
+    componentId: "sc-e33474e6-3"
+})([
+    `position:absolute;top:0;right:0;margin:2rem;width:auto;height:auto;padding:0;`
+]);
+const ModalView = /*#__PURE__*/ _react.default.forwardRef(({ role = 'dialog', closeButtonAriaLabel, children, onClose, showCloseButton = true, ...rest }, ref)=>{
+    return /*#__PURE__*/ _react.default.createElement(StyledWrapper, null, /*#__PURE__*/ _react.default.createElement(StyledBody, {
+        ...rest,
+        ref: ref,
+        role: role,
+        "aria-modal": "true"
+    }, /*#__PURE__*/ _react.default.createElement(StyledContent, null, children), showCloseButton && /*#__PURE__*/ _react.default.createElement(StyledButtonClose, {
+        "aria-label": closeButtonAriaLabel,
+        onClick: onClose,
+        view: "clear",
+        size: "s"
+    }, /*#__PURE__*/ _react.default.createElement(_plasmaicons.IconClose, {
+        size: "s",
+        color: "inherit"
+    }))));
+});