@salutejs/plasma-web 1.642.0-dev.0 → 1.643.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.textFieldBorderColor}: var(--outline-transparent-primary);
@@ -69,6 +70,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: var(--text-tertiary);
                 ${tokens.textFieldLabelColor}: var(--text-primary);
                 ${tokens.textFieldLeftHelperColor}: var(--text-positive);
+                ${tokens.textFieldTitleCaptionColor}: var(--text-secondary);
                 ${tokens.textFieldFocusColor}: var(--text-accent);
 
                 ${tokens.textFieldBorderColor}: var(--outline-positive);
@@ -115,6 +117,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.textFieldBorderColor}: var(--outline-warning);
@@ -161,6 +164,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.textFieldBorderColor}: var(--outline-negative);
@@ -224,6 +228,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;
@@ -300,6 +311,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;
@@ -376,6 +394,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;
@@ -452,6 +477,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;
@@ -582,6 +614,7 @@ export const config = {
                 ${tokens.textFieldBorderColorReadOnly}: var(--outline-read-only);
                 ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
+                ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
                 ${tokens.textFieldLabelColorReadOnly}: var(--text-primary);
                 ${tokens.textFieldDividerColorReadOnly}: var(--outline-read-only);
                 ${tokens.textFieldBorderColor}: transparent;

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/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

@@ -171,6 +171,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);
@@ -343,6 +344,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);
@@ -515,6 +517,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);
@@ -687,6 +690,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);
@@ -859,6 +863,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

@@ -150,6 +150,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);
@@ -318,6 +319,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);
@@ -486,6 +488,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);
@@ -654,6 +657,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

@@ -144,6 +144,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);
@@ -312,6 +313,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);
@@ -480,6 +482,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);
@@ -648,6 +651,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);
@@ -816,6 +820,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,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IconClose } from '@salutejs/plasma-icons';
+import { IconButton } from '../IconButton';
+const StyledWrapper = styled.div.withConfig({
+    displayName: "ModalView__StyledWrapper",
+    componentId: "sc-e33474e6-0"
+})([
+    `display:flex;align-items:center;height:100%;`
+]);
+const StyledBody = styled.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 = styled.div.withConfig({
+    displayName: "ModalView__StyledContent",
+    componentId: "sc-e33474e6-2"
+})([
+    `padding:2rem;`
+]);
+const StyledButtonClose = styled(IconButton).withConfig({
+    displayName: "ModalView__StyledButtonClose",
+    componentId: "sc-e33474e6-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,
+        view: "clear",
+        size: "s"
+    }, /*#__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';

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

@@ -138,6 +138,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${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);
@@ -215,6 +216,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${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);
@@ -292,6 +294,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${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);
@@ -369,6 +372,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 -0.438rem;
 
                 ${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);
@@ -446,6 +450,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 -0.688rem;
 
                 ${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/Range/Range.config.js

@@ -114,6 +114,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem;
 
                 ${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);
@@ -192,6 +193,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem;
 
                 ${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);
@@ -270,6 +272,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem;
 
                 ${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);
@@ -348,6 +351,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem;
 
                 ${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);
@@ -426,6 +430,7 @@ export const config = {
                 ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem;
 
                 ${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);