@ozen-ui/kit 0.6.0 → 0.8.0

package/__inner__/esm/components/Card/Card.css

@@ -1,26 +1,21 @@
 .Card {
   position: relative;
-  background-color: var(--card-background-color);
   padding: var(--card-padding);
   cursor: var(--card-cursor-style);
-  border-radius: var(--card-border-radius);
   transition: var(--transition-default);
   box-sizing: border-box;
 }
 
   .Card_size_s {
       --card-padding: var(--space-l);
-      --card-border-radius: var(--border-radius-xs);
     }
 
   .Card_size_m {
       --card-padding: var(--space-xl);
-      --card-border-radius: var(--border-radius-m);
     }
 
   .Card_size_l {
       --card-padding: var(--space-2xl);
-      --card-border-radius: var(--border-radius-l);
     }
 
   .Card_interactive {
@@ -32,8 +27,9 @@
         position: absolute;
         inset: 0;
         pointer-events: none;
-        border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
-        border-radius: var(--card-border-radius);
+        border: var(--card-border-width) var(--card-border-style)
+          var(--card-border-color);
+        border-radius: var(--paper-border-radius);
         transition: var(--transition-default);
       }
 
@@ -61,14 +57,6 @@
       --card-border-style: dashed;
     }
 
-  .Card_backgroundColor_standard {
-      --card-background-color: var(--color-background-main);
-    }
-
-  .Card_backgroundColor_selected {
-      --card-background-color: var(--color-background-action-light);
-    }
-
   .Card_interactive.Card_borderColor_standard:hover {
       --card-border-color: var(--color-border-secondary-hover);
     }
@@ -85,12 +73,6 @@
       --card-border-color: var(--color-border-action-pressed);
     }
 
-  .Card_disabled {
-    --card-background-color: var(--color-background-disabled);
-    --card-border-color: var(--color-border-disabled);
-    pointer-events: none;
-  }
-
   .Card:focus {
     outline: 0;
     box-shadow: var(--shadow-outline-focused);
@@ -99,3 +81,9 @@
   .Card:focus:not(:focus-visible) {
     box-shadow: none;
   }
+
+.Card[aria-disabled='true'] {
+  --card-border-color: var(--color-border-disabled);
+  background-color: var(--color-background-disabled);
+  pointer-events: none;
+}

package/__inner__/esm/components/Card/Card.d.ts

@@ -1,7 +1,6 @@
 import './Card.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
-import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ReactNode, ElementType } from 'react';
+import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const cnCard: import("@bem-react/classname").ClassNameFormatter;
 export declare const cardSizeVariant: readonly ["s", "m", "l"];
 export declare const cardBorderWidthVariant: readonly ["none", "s", "m"];
@@ -34,5 +33,5 @@ export type CardBaseProps = {
     className?: string;
     'data-testid'?: string;
 };
-export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<CardBaseProps, As>;
+export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<CardBaseProps, As>;
 export declare const Card: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CardBaseProps, "div">;

package/__inner__/esm/components/Card/Card.js

@@ -4,18 +4,28 @@ import React from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { Paper, } from '../Paper';
 export var cnCard = cn('Card');
 export var cardSizeVariant = ['s', 'm', 'l'];
 export var cardBorderWidthVariant = ['none', 's', 'm'];
 export var cardBorderVariant = ['solid', 'dashed'];
 export var cardBorderColorVariant = ['standard', 'selected'];
 export var cardBackgroundColorVariant = ['standard', 'selected'];
+var matchBorderRadiusPaperToCard = {
+    s: 'xs',
+    m: 's',
+    l: 'l'
+};
+var matchBackgroundColorPaperToCard = {
+    selected: 'action-light',
+    standard: 'main'
+};
 export var Card = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Card' });
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = __rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (React.createElement(Tag, __assign({}, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor
         })), [className]) }), children));

package/__inner__/esm/components/Dialog/Dialog.css

@@ -13,8 +13,6 @@
     max-inline-size: var(--modal-width);
     /* stylelint-disable-next-line plugin/use-logical-units */
     max-block-size: calc(100vh - 64px);
-    border-radius: var(--border-radius-m);
-    box-shadow: var(--shadow-l);
   }
 .Dialog-InnerContainer {
     display: flex;

package/__inner__/esm/components/Dialog/Dialog.d.ts

@@ -28,4 +28,24 @@ export type DialogProps = {
     /** Кастомный класс контейнера диалогового окна */
     className?: string;
 } & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Dialog: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open: boolean;
+    /** Содержимое диалогового окна */
+    children: React.ReactNode;
+    /** Устанавливает размер типографики и отступов в диалоговом окне */
+    size?: "s" | "l" | undefined;
+    /** Вариант диалогового окна */
+    variant?: "small" | "medium" | "large" | "fullsize" | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Свойства кнопки закрытия диалогового окна */
+    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Признак по которому кнопка закрытия диалогового окна будет скрыта */
+    hideCloseButton?: boolean | undefined;
+    /** Кастомный класс контейнера диалогового окна */
+    className?: string | undefined;
+} & Omit<ModalProps, "className" | "children" | "open" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Drawer/Drawer.css

@@ -15,7 +15,6 @@
     border: none;
     inset-block-start: auto;
     inset-inline-start: auto;
-    box-shadow: var(--shadow-m);
     transform: none;
     padding: 0;
     outline: none;

package/__inner__/esm/components/Drawer/Drawer.d.ts

@@ -32,4 +32,26 @@ export type DrawerProps = {
     /** Кастомный класс контейнера шторки */
     className?: string;
 } & Omit<ModalProps, 'open' | 'onClose' | 'children' | 'className'>;
-export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Drawer: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open?: boolean | undefined;
+    /** Вариант представления шторки */
+    variant?: "medium" | "large" | "little" | undefined;
+    /** Устанавливает размер типографики и отступов в шторке */
+    size?: "s" | "l" | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Содержимое шторки */
+    children?: React.ReactNode;
+    /** Расположение шторки */
+    placement?: "left" | "right" | undefined;
+    /** Признак по которому кнопка закрытия шторки будет скрыта */
+    hideCloseButton?: boolean | undefined;
+    /** Свойства кнопки закрытия шторки */
+    closeButtonProps?: (Omit<IconButtonProps<"button">, "icon"> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Кастомный класс контейнера шторки */
+    className?: string | undefined;
+} & Omit<ModalProps, "className" | "children" | "open" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -5,10 +5,11 @@ import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
 import { cnListItemButton, ListItemButton, } from '../../../List';
+import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export var cnMenuItem = cn('MenuItem');
 export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'MenuItem' });
-    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "className"]);
+    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, _b = props.as, Tag = _b === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "className", "as"]);
     var innerRef = useRef(null);
     useEffect(function () {
         var _a;
@@ -16,6 +17,6 @@ export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus]);
-    return (React.createElement(ListItemButton, __assign({ role: "menuitem" }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
 });
 MenuItem.displayName = 'MenuItem';

package/__inner__/esm/components/Modal/Modal.css

@@ -1,34 +1,29 @@
-.no-scroll {
-  overflow: hidden;
-}
-
 .Modal {
   position: fixed;
   z-index: var(--z-index-modal);
   inset: 0;
 }
 
-.Modal:not(.Modal_hasBackdrop) {
+  .Modal:not(.Modal_hasBackdrop) {
     pointer-events: none;
   }
 
-.Modal:not(.Modal_hasBackdrop) .Modal-Window {
+  .Modal:not(.Modal_hasBackdrop) .Modal-Window {
       pointer-events: auto;
     }
 
-.Modal-Window {
+  .Modal-Window {
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     inline-size: 400px;
-    background-color: var(--color-background-main);
     box-sizing: border-box;
     border: 2px solid black;
     padding: var(--space-2xl);
   }
 
-.Modal_hidden {
+  .Modal_hidden {
     visibility: hidden;
   }
 
@@ -39,7 +34,8 @@
 
 .Modal_animation-enter-active .Modal-Window, .Modal_animation-appear-active .Modal-Window {
       opacity: 1;
-      transition: opacity var(--transition-slow),
+      transition:
+        opacity var(--transition-slow),
         transform var(--transition-slow);
       transform: translate(-50%, -50%) translateY(0);
     }
@@ -58,7 +54,8 @@
 .Modal_animation-exit-active .Modal-Window {
       opacity: 0;
       visibility: visible;
-      transition: opacity var(--transition-slow),
+      transition:
+        opacity var(--transition-slow),
         transform var(--transition-slow);
       transform: translate(-50%, -50%) translateY(100px);
     }

package/__inner__/esm/components/Modal/Modal.d.ts

@@ -1,9 +1,10 @@
 import './Modal.css';
 import React from 'react';
-import type { ReactNode, ComponentPropsWithRef } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import { BackdropProps } from '../Backdrop';
-import { PortalProps, PortalRef } from '../Portal';
+import { type BackdropProps } from '../Backdrop';
+import { type PaperProps } from '../Paper';
+import { type PortalProps, type PortalRef } from '../Portal';
 export declare const cnModal: import("@bem-react/classname").ClassNameFormatter;
 export type ModalProps = {
     /** Признак по которому компонент будет представлен */
@@ -29,6 +30,12 @@ export type ModalProps = {
     hideBackdrop?: boolean;
     /** Если {true} предотвращает размонтирование компонента при событии закрыть */
     keepMounted?: boolean;
+    /** Если {true} отключает блокировку прокрутки основного экрана приложения */
+    disableScrollLock?: boolean;
+    /** Если {true} отключает закрытие окна при клике за его пределами */
+    disableClickOutside?: boolean;
+    /** Если {true} отключает закрытие окна при нажатии на клавишу ESC */
+    disableEscapeKeyDown?: boolean;
     /** Свойства компонента Backdrop (подложка) */
     backdropProps?: BackdropProps & {
         'data-testid'?: string;
@@ -38,7 +45,7 @@ export type ModalProps = {
         'data-testid'?: string;
     };
     /** Свойства окна с контентом */
-    windowProps?: ComponentPropsWithRef<'div'> & {
+    windowProps?: PaperProps & {
         'data-testid'?: string;
     };
     /** Кастомный класс контейнера модального окна */
@@ -47,6 +54,68 @@ export type ModalProps = {
     'data-testid'?: string;
     /** Контейнер для монтирования всплывающего окна */
     container?: PortalProps['container'];
+    /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
+    ignoreClickOutsideRefs?: Array<RefObject<HTMLElement>>;
 } & PortalProps;
 export type ModalRef = PortalRef;
-export declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Modal: React.ForwardRefExoticComponent<{
+    /** Признак по которому компонент будет представлен */
+    open?: boolean | undefined;
+    /** Содержимое модального окна */
+    children: ReactNode;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    onEnter?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после завершения
+     * перехода компонента в состояние представлен */
+    onEntered?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExit?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана после
+     * завершения перехода в состояние не представлен */
+    onExited?: (() => void) | undefined;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: (() => void) | undefined;
+    /** Если {true} скрывает подложку */
+    hideBackdrop?: boolean | undefined;
+    /** Если {true} предотвращает размонтирование компонента при событии закрыть */
+    keepMounted?: boolean | undefined;
+    /** Если {true} отключает блокировку прокрутки основного экрана приложения */
+    disableScrollLock?: boolean | undefined;
+    /** Если {true} отключает закрытие окна при клике за его пределами */
+    disableClickOutside?: boolean | undefined;
+    /** Если {true} отключает закрытие окна при нажатии на клавишу ESC */
+    disableEscapeKeyDown?: boolean | undefined;
+    /** Свойства компонента Backdrop (подложка) */
+    backdropProps?: (import("../Backdrop").BackdropBaseProps & {
+        as?: "div" | undefined;
+    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, keyof import("../Backdrop").BackdropBaseProps> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Свойства по управлению анимацией перехода */
+    transitionProps?: (Partial<CSSTransitionProps<undefined>> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Свойства окна с контентом */
+    windowProps?: (import("../Paper").PaperBaseProps & {
+        as?: "div" | undefined;
+    } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, keyof import("../Paper").PaperBaseProps> & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    /** Кастомный класс контейнера модального окна */
+    className?: string | undefined;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string | undefined;
+    /** Контейнер для монтирования всплывающего окна */
+    container?: PortalProps['container'];
+    /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
+    ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[] | undefined;
+} & import("../Portal").PortalBaseProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Modal/Modal.js

@@ -10,23 +10,26 @@ import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { Backdrop } from '../Backdrop';
 import { Portal } from '../Portal';
+import { ModalConsumer } from './components';
 import { useModalManager } from './index';
 export var cnModal = cn('Modal');
 export var Modal = forwardRef(function (_a, ref) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className"]);
+    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? false : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? false : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? false : _g, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs"]);
     var hasBackdrop = !hideBackdrop;
-    var hasScrollOnBody = useRef(null);
     var modalInnerRef = useRef(null);
     var focusedElement = useRef(null);
     var isClickOutSide = useRef(null);
-    var _e = __read(useState(false), 2), openState = _e[0], setOpenState = _e[1];
-    var _f = useModalManager(modalInnerRef, 1000, openState), isTop = _f.isTop, refsClickOutside = _f.refsClickOutside;
+    var _h = __read(useState(false), 2), openState = _h[0], setOpenState = _h[1];
+    var _j = useModalManager(modalInnerRef, 1000, openState), isTop = _j.isTop, refsClickOutside = _j.refsClickOutside;
     useClickOutside({
-        refs: __spreadArray([modalInnerRef], __read(refsClickOutside), false),
+        refs: __spreadArray(__spreadArray([
+            modalInnerRef
+        ], __read(refsClickOutside), false), __read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
             isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
+        },
+        active: !disableClickOutside
     });
     useEffect(function () {
         var _a;
@@ -62,21 +65,11 @@ export var Modal = forwardRef(function (_a, ref) {
             }
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
-        active: isTop
+        active: isTop && !disableEscapeKeyDown
     });
-    // Блокирует прокрутку основного окна приложения
-    useEffect(function () {
-        if (openState) {
-            hasScrollOnBody.current = document.body.classList.contains('no-scroll');
-            document.body.classList.add('no-scroll');
-        }
-        else if (!hasScrollOnBody.current) {
-            document.body.classList.remove('no-scroll');
-        }
-    }, [openState]);
     return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
-        React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: useMultiRef([modalInnerRef, ref]) }),
-            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { onClick: onClose, open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
-            React.createElement("div", __assign({}, windowProps, { className: cnModal('Window', [windowProps === null || windowProps === void 0 ? void 0 : windowProps.className]), tabIndex: -1, ref: useMultiRef([trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+        React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
+            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1, onClick: onClose }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
+            React.createElement(ModalConsumer, __assign({}, windowProps, { open: openState && !disableScrollLock, ref: useMultiRef([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 Modal.displayName = 'Modal';

package/__inner__/esm/components/Modal/components/ModalConsumer.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaperProps } from '../../Paper';
+export declare const ModalConsumer: FC<PaperProps & {
+    open: boolean;
+}>;

package/__inner__/esm/components/Modal/components/ModalConsumer.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
+import { Paper } from '../../Paper';
+import { cnModal } from '../index';
+export var ModalConsumer = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, open = _a.open, other = __rest(_a, ["children", "className", "open"]);
+    // Блокирует прокрутку основного окна приложения
+    useLockBodyScroll(open);
+    return (React.createElement(Paper, __assign({ radius: "s", background: "main" }, other, { className: cnModal('Window', [className]), tabIndex: -1, ref: ref }), children));
+});
+ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/esm/components/Modal/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ModalConsumer';

package/__inner__/esm/components/Modal/components/index.js

@@ -0,0 +1 @@
+export * from './ModalConsumer';

package/__inner__/esm/components/Paper/Paper.css

@@ -0,0 +1,44 @@
+.Paper {
+  --paper-background-color: none;
+  --paper-border-radius: none;
+  --paper-box-shadow: none;
+  background-color: var(--paper-background-color);
+  border-radius: var(--paper-border-radius);
+  box-shadow: var(--paper-box-shadow);
+}
+
+  .Paper_radius_xs {
+      --paper-border-radius: var(--border-radius-xs);
+    }
+
+  .Paper_radius_s {
+      --paper-border-radius: var(--border-radius-m);
+    }
+
+  .Paper_radius_l {
+      --paper-border-radius: var(--border-radius-l);
+    }
+
+  .Paper_background_main {
+      --paper-background-color: var(--color-background-main);
+    }
+
+  .Paper_background_main-inverse {
+      --paper-background-color: var(--color-background-main-inverse);
+    }
+
+  .Paper_background_action-light {
+      --paper-background-color: var(--color-background-action-light);
+    }
+
+  .Paper_background_accent {
+      --paper-background-color: var(--color-accent-main);
+    }
+
+  .Paper_shadow_m {
+      --paper-box-shadow: var(--shadow-m);
+    }
+
+  .Paper_shadow_l {
+      --paper-box-shadow: var(--shadow-l);
+    }

package/__inner__/esm/components/Paper/Paper.d.ts

@@ -0,0 +1,19 @@
+import './Paper.css';
+import { type ComponentRef, type ElementType } from 'react';
+import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+export declare const PAPER_DEFAULT_TAG = "div";
+export declare const paperRadiusVariant: readonly ["xs", "s", "l"];
+export type PaperRadiusVariant = (typeof paperRadiusVariant)[number];
+export declare const paperBackgroundVariant: readonly ["main", "main-inverse", "action-light", "accent"];
+export type PaperBackgroundVariant = (typeof paperBackgroundVariant)[number];
+export declare const paperShadowVariant: readonly ["m", "l"];
+export type PaperShadowVariant = (typeof paperShadowVariant)[number];
+export type PaperBaseProps = {
+    radius?: PaperRadiusVariant;
+    background?: PaperBackgroundVariant;
+    shadow?: PaperShadowVariant;
+};
+export type PaperProps<As extends ElementType = typeof PAPER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PaperBaseProps, As>;
+export type PaperRef = ComponentRef<typeof PAPER_DEFAULT_TAG>;
+export declare const cnPaper: import("@bem-react/classname").ClassNameFormatter;
+export declare const Paper: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PaperBaseProps, "div">;

package/__inner__/esm/components/Paper/Paper.js

@@ -0,0 +1,22 @@
+import { __assign, __rest } from "tslib";
+import './Paper.css';
+import React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+export var PAPER_DEFAULT_TAG = 'div';
+export var paperRadiusVariant = ['xs', 's', 'l'];
+export var paperBackgroundVariant = [
+    'main',
+    'main-inverse',
+    'action-light',
+    'accent',
+];
+export var paperShadowVariant = ['m', 'l'];
+export var cnPaper = cn('Paper');
+export var Paper = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Paper' });
+    var _a = props.as, Tag = _a === void 0 ? PAPER_DEFAULT_TAG : _a, children = props.children, radius = props.radius, background = props.background, shadow = props.shadow, className = props.className, other = __rest(props, ["as", "children", "radius", "background", "shadow", "className"]);
+    return (React.createElement(Tag, __assign({}, other, { className: cnPaper({ radius: radius, background: background, shadow: shadow }, [className]), ref: ref }), children));
+});
+Paper.displayName = 'Paper';

package/__inner__/esm/components/Paper/index.d.ts

@@ -0,0 +1 @@
+export * from './Paper';

package/__inner__/esm/components/Paper/index.js

@@ -0,0 +1 @@
+export * from './Paper';

package/__inner__/esm/components/Popover/Popover.css

@@ -1,7 +1,4 @@
 .Popover {
-  box-shadow: var(--shadow-l);
-  border-radius: var(--border-radius-xs);
-  background-color: var(--color-background-main);
   z-index: var(--z-index-popover);
   inline-size: auto;
   box-sizing: border-box;
@@ -10,16 +7,9 @@
 
   .Popover-Arrow {
     display: flex;
+    color: var(--paper-background-color);
   }
 
-  .Popover-Arrow_variant_light {
-        color: var(--color-background-main);
-      }
-
-  .Popover-Arrow_variant_dark {
-        color: var(--color-background-main-inverse);
-      }
-
   .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
         inset-block-end: -9px;
       }

package/__inner__/esm/components/Popover/Popover.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import './Popover.css';
-import type { PopoverProps } from './types';
+import type { PopoverBaseProps } from './types';
 export declare const cnPopover: import("@bem-react/classname").ClassNameFormatter;
-export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Popover: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PopoverBaseProps, import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">>;