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

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

@@ -23,6 +23,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);
@@ -65,6 +66,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);
@@ -107,6 +109,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);
@@ -149,6 +152,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);
@@ -207,6 +211,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.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${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;
@@ -282,6 +293,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.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${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;
@@ -357,6 +375,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.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${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;
@@ -432,6 +457,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.textFieldTitleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.textFieldTitleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${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;
@@ -561,6 +593,7 @@ export const config = {
                 ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary);
                 ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLabelColorReadOnly}: var(--text-primary);
                 ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary);
             `

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

@@ -1,8 +1,15 @@
-import { autocompleteConfig, component, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/styled-components';
+import { autocompleteConfig, component, createConditionalComponent, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/styled-components';
 import React from 'react';
 import { config } from './Autocomplete.config';
+import { config as clearConfig } from './Autocomplete.clear.config';
 const mergedConfig = mergeConfig(autocompleteConfig, config);
-export const AutocompleteComponent = component(mergedConfig);
+export const AutocompleteDefault = component(mergedConfig);
+const mergedClearConfig = mergeConfig(autocompleteConfig, clearConfig);
+export const AutocompleteClear = component(mergedClearConfig);
+export const AutocompleteComponent = createConditionalComponent({
+    default: AutocompleteDefault,
+    clear: AutocompleteClear
+});
 const AutocompleteWithoutRef = (props, ref)=>{
     return /*#__PURE__*/ React.createElement(AutocompleteComponent, {
         ...props,

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

@@ -0,0 +1,24 @@
+import styled, { css } from 'styled-components';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+const { applyRoundness, Card: CardBase, CardContent, StyledCard } = plasmaCore;
+export { StyledCard };
+const DEFAULT_ROUNDNESS = 20;
+/**
+ * Контейнер со скругленными углами с возможностью фокусировки на нем.
+ */ export const Card = styled(CardBase).withConfig({
+    displayName: "Card",
+    componentId: "sc-a673e9d5-0"
+})([
+    `box-shadow:none;background:transparent;img{`,
+    `}`,
+    ``
+], ({ roundness = DEFAULT_ROUNDNESS })=>roundness && css([
+        ``,
+        `;`
+    ], applyRoundness({
+        roundness
+    })), ({ background })=>background && css([
+        `background:`,
+        `;`,
+        `{padding:1.25rem;}img{border-bottom-left-radius:0;border-bottom-right-radius:0;}`
+    ], background, CardContent));

package/dist/styled-components/es/components/Card/CardBadge.js

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+const BaseBadge = plasmaCore.Badge;
+const { surfaceLiquid02 } = plasmaCore;
+const { text } = plasmaCore;
+const badgeViews = {
+    primary: css([
+        `color:#226af1;background-color:rgba(34,106,241,0.09);`
+    ]),
+    secondary: css([
+        `color:`,
+        `;background-color:`,
+        `;`
+    ], text, surfaceLiquid02),
+    success: css([
+        `color:#09a552;background-color:rgba(9,165,82,0.08);`
+    ]),
+    warning: css([
+        `color:#ee6820;background-color:rgba(238,104,32,0.08);`
+    ]),
+    critical: css([
+        `color:#df2638;background-color:rgba(223,38,56,0.09);`
+    ])
+};
+const Badge = styled(BaseBadge).withConfig({
+    displayName: "CardBadge__Badge",
+    componentId: "sc-7420800e-0"
+})([
+    `border-radius:0.25rem;`,
+    ``
+], ({ view = 'primary' })=>badgeViews[view]);
+export const CardBadge = styled(Badge).withConfig({
+    displayName: "CardBadge",
+    componentId: "sc-7420800e-1"
+})([
+    `position:absolute;`
+]);

package/dist/styled-components/es/components/Card/CardBody.js

@@ -0,0 +1,8 @@
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+import styled from 'styled-components';
+export const CardBody = styled(plasmaCore.CardBody).withConfig({
+    displayName: "CardBody",
+    componentId: "sc-24af94e7-0"
+})([
+    `overflow:visible;`
+]);

package/dist/styled-components/es/components/Card/CardContent.js

@@ -0,0 +1,14 @@
+import styled, { css } from 'styled-components';
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+export const CardContentBase = plasmaCore.CardContent;
+/**
+ * Компонент для отображения как текстового, так и любого другого контента.
+ */ export const CardContent = styled(CardContentBase).withConfig({
+    displayName: "CardContent",
+    componentId: "sc-41a65dbb-0"
+})([
+    `padding:0;padding-top:1rem;`,
+    ``
+], ({ cover })=>cover && css([
+        `padding:1.25rem;`
+    ]));

package/dist/styled-components/es/components/Card/CardMedia.js

@@ -0,0 +1,2 @@
+import { plasmaCore } from '@salutejs/plasma-new-hope/styled-components';
+export const { CardMedia } = plasmaCore;

package/dist/styled-components/es/components/Card/index.js

@@ -1,5 +1,5 @@
-export { Card, StyledCard } from '@salutejs/plasma-hope';
-export { CardBadge } from '@salutejs/plasma-hope';
-export { CardBody } from '@salutejs/plasma-hope';
-export { CardContent } from '@salutejs/plasma-hope';
-export { CardMedia } from '@salutejs/plasma-hope';
+export { Card, StyledCard } from './Card';
+export { CardBadge } from './CardBadge';
+export { CardBody } from './CardBody';
+export { CardContent } from './CardContent';
+export { CardMedia } from './CardMedia';

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

@@ -197,6 +197,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -368,6 +369,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -539,6 +541,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
+                ${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);
@@ -710,6 +713,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.188rem;
+                ${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);
@@ -881,6 +885,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0;
+                ${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/DatePicker/DatePicker.config.js

@@ -163,6 +163,7 @@ export const config = {
                 ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -333,6 +334,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -503,6 +505,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
+                ${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);
@@ -673,6 +676,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.188rem;
+                ${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);
@@ -843,6 +847,7 @@ export const config = {
                 ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0;
+                ${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/DateTimePicker/DateTimePicker.clear.config.js

@@ -154,6 +154,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -321,6 +322,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -488,6 +490,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
+                ${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);
@@ -655,6 +658,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.188rem;
+                ${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);
@@ -822,6 +826,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0;
+                ${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/DateTimePicker/DateTimePicker.config.js

@@ -141,6 +141,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -308,6 +309,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -475,6 +477,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
+                ${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);
@@ -642,6 +645,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0.188rem;
+                ${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);
@@ -809,6 +813,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.titleCaptionOffset}: 0;
+                ${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/InformationWrapper/InformationWrapper.config.js

@@ -62,6 +62,7 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
+                ${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);
@@ -111,6 +112,7 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
+                ${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);
@@ -160,6 +162,7 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.188rem;
+                ${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);
@@ -209,6 +212,7 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0;
+                ${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/Modal/Modal.js

@@ -0,0 +1,142 @@
+import React, { useEffect, useCallback, useRef, useState, useContext } from 'react';
+import ReactDOM from 'react-dom';
+import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
+import { plasmaCore, useFocusTrap } from '@salutejs/plasma-new-hope/styled-components';
+import { ModalsContext, MODALS_PORTAL_ID } from './ModalsContext';
+import { ModalView } from './ModalView';
+const ESCAPE_KEYCODE = 27;
+const wrapperHideAnimation = keyframes([
+    `from{opacity:1;}to{opacity:0;}`
+]);
+const bodyShowAnimation = keyframes([
+    `from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}`
+]);
+const bodyHideAnimation = keyframes([
+    `from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-100%);}`
+]);
+const StyledWrapper = styled.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 && css([
+        `animation:0.1s `,
+        ` ease-out;`
+    ], wrapperHideAnimation));
+const StyledOverlay = styled.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 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 = styled.div.withConfig({
+    displayName: "Modal__StyledModal",
+    componentId: "sc-c1a3a85-2"
+})([
+    `position:absolute;height:100%;pointer-events:none;`,
+    ``
+], ({ isHiding })=>css([
+        `animation:0.4s `,
+        ` ease-out;`
+    ], isHiding ? bodyHideAnimation : bodyShowAnimation));
+const NoScroll = createGlobalStyle([
+    `body{overflow-y:hidden;}`
+]);
+/**
+ * Модальное окно.
+ * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.
+ */ export const Modal = ({ id, isOpen, opened, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, initialFocusRef, focusAfterRef, ...rest })=>{
+    const innerIsOpen = Boolean(isOpen || opened);
+    const uniqId = plasmaCore.useUniqId();
+    const innerId = id || uniqId;
+    const wrapperRef = useRef(null);
+    const portalRef = useRef(null);
+    const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
+    const controller = useContext(ModalsContext);
+    const [, forceRender] = useState(false);
+    const onOverlayKeyDown = useCallback((event)=>{
+        if (!closeOnOverlayClick) {
+            return;
+        }
+        if (onOverlayClick) {
+            onOverlayClick(event);
+            return;
+        }
+        onClose?.();
+    }, [
+        closeOnOverlayClick,
+        onOverlayClick,
+        onClose
+    ]);
+    useEffect(()=>{
+        let portal = document.getElementById(MODALS_PORTAL_ID);
+        if (!portal) {
+            portal = document.createElement('div');
+            portal.setAttribute('id', 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);
+    }, []);
+    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
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            controller.unregister(innerId);
+        };
+    }, [
+        controller.unregister,
+        innerId
+    ]);
+    if (innerIsOpen) {
+        controller.register(innerId);
+    } else {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NoScroll, null), portalRef.current && /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement(StyledWrapper, {
+        ref: wrapperRef
+    }, /*#__PURE__*/ React.createElement(StyledOverlay, {
+        transparent: controller.items.indexOf(innerId) !== 0,
+        clickable: closeOnOverlayClick,
+        onClick: onOverlayKeyDown,
+        $withBlur: withBlur
+    }), /*#__PURE__*/ React.createElement(StyledModal, null, /*#__PURE__*/ React.createElement(ModalView, {
+        onClose: onClose,
+        ref: trapRef,
+        ...rest
+    }))), portalRef.current));
+};

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IconClose } from '@salutejs/plasma-icons';
+import { Button } from '../_Button';
+const StyledWrapper = styled.div.withConfig({
+    displayName: "ModalView__StyledWrapper",
+    componentId: "sc-53f3095-0"
+})([
+    `display:flex;align-items:center;height:100%;`
+]);
+const StyledBody = styled.div.withConfig({
+    displayName: "ModalView__StyledBody",
+    componentId: "sc-53f3095-1"
+})([
+    `position:relative;width:25rem;max-width:100%;border-radius:1.25rem;background-color:var(--surface-solid-card);pointer-events:all;`
+]);
+const StyledContent = styled.div.withConfig({
+    displayName: "ModalView__StyledContent",
+    componentId: "sc-53f3095-2"
+})([
+    `padding:2rem;`
+]);
+const StyledButtonClose = styled(Button({
+    design: 'web'
+})).attrs(()=>({
+        view: 'clear'
+    })).withConfig({
+    displayName: "ModalView__StyledButtonClose",
+    componentId: "sc-53f3095-3"
+})([
+    `position:absolute;top:0;right:0;margin:2rem;width:auto;height:auto;padding:0;`
+]);
+/**
+ * Визуальная часть модального окна.
+ */ export const ModalView = /*#__PURE__*/ React.forwardRef(({ role = 'dialog', closeButtonAriaLabel, children, onClose, showCloseButton = true, ...rest }, ref)=>{
+    return /*#__PURE__*/ React.createElement(StyledWrapper, null, /*#__PURE__*/ React.createElement(StyledBody, {
+        ...rest,
+        ref: ref,
+        role: role,
+        "aria-modal": "true"
+    }, /*#__PURE__*/ React.createElement(StyledContent, null, children), showCloseButton && /*#__PURE__*/ React.createElement(StyledButtonClose, {
+        "aria-label": closeButtonAriaLabel,
+        onClick: onClose,
+        size: "s",
+        contentLeft: /*#__PURE__*/ React.createElement(IconClose, {
+            size: "s",
+            color: "inherit"
+        })
+    })));
+});

package/dist/styled-components/es/components/Modal/ModalsContext.js

@@ -0,0 +1,51 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import React, { useEffect } from 'react';
+/**
+ * Хранилище модальных окон.
+ */ class ModalsController {
+    register(id) {
+        const indexOfElement = this.items.indexOf(id);
+        if (indexOfElement >= 0) {
+            return;
+        }
+        return this.items.push(id);
+    }
+    unregister(id) {
+        const indexOfElement = this.items.indexOf(id);
+        if (indexOfElement < 0) {
+            return;
+        }
+        this.items.splice(indexOfElement, 1);
+    }
+    constructor(){
+        _define_property(this, "items", []);
+    }
+}
+const controller = new ModalsController();
+export const MODALS_PORTAL_ID = 'plasma-modals-root';
+export const ModalsContext = /*#__PURE__*/ React.createContext(controller);
+export const ModalsProvider = ({ children })=>{
+    useEffect(()=>{
+        return ()=>{
+            const portal = document.createElement('div');
+            if (portal && document.body.contains(portal)) {
+                document.body.removeChild(portal);
+            }
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement(ModalsContext.Provider, {
+        value: controller
+    }, children);
+};

package/dist/styled-components/es/components/Modal/index.js

@@ -1 +1,3 @@
-export { Modal, ModalView, ModalsProvider } from '@salutejs/plasma-hope';
+export { Modal } from './Modal';
+export { ModalsProvider } from './ModalsContext';
+export { ModalView } from './ModalView';