@ozen-ui/kit 0.5.0 → 0.7.0

package/Paper/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Paper/index.js",
+	"module": "../__inner__/esm/components/Paper/index.js",
+	"types": "../__inner__/esm/components/Paper/index.d.ts"
+}

package/__inner__/cjs/components/Alert/Alert.css

@@ -1,7 +1,6 @@
 /* stylelint-disable */
 .Alert {
   position: relative;
-  border-radius: var(--border-radius-xs);
   display: flex;
   -moz-column-gap: var(--space-s);
        column-gap: var(--space-s);
@@ -11,8 +10,6 @@
   box-sizing: border-box;
   border-inline-start: 4px solid var(--alert-border-color);
   padding: 16px;
-  box-shadow: var(--shadow-m);
-  background-color: var(--alert-background-color);
 
   font: var(--typography-text-xs-font);
 
@@ -21,14 +18,12 @@
   text-transform: var(--typography-text-xs-text_transform, none);
 }
 .Alert_color_light {
-      --alert-background-color: var(--color-background-main);
       --alert-title-text-color: var(--color-content-primary);
       --alert-body-text-color: var(--color-content-secondary);
       --alert-icon-color: var(--color-content-primary);
       --alert-close-button-color: var(--color-background-main-inverse);
     }
 .Alert_color_dark {
-      --alert-background-color: var(--color-background-main-inverse);
       --alert-title-text-color: var(--color-content-primary-inverse);
       --alert-body-text-color: var(--color-content-tertiary);
       --alert-icon-color: var(--color-content-primary-inverse);

package/__inner__/cjs/components/Alert/Alert.js

@@ -8,6 +8,7 @@ var icons_1 = require("@ozen-ui/icons");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var IconButton_1 = require("../IconButton");
+var Paper_1 = require("../Paper");
 var constants_1 = require("./constants");
 exports.cnAlert = (0, classname_1.cn)('Alert');
 exports.alertStatusVariant = [
@@ -43,9 +44,9 @@ exports.Alert = (0, react_1.forwardRef)(function (inProps, ref) {
         }
         return react_1["default"].cloneElement(actionProp, actionProps);
     }, [actionProp]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnAlert)({ status: status, hasCloseButton: !!onClose, color: color }, [
+    return (react_1["default"].createElement(Paper_1.Paper, tslib_1.__assign({ role: "alert", radius: "xs", shadow: "m", background: color === 'light' ? 'main' : 'main-inverse', className: (0, exports.cnAlert)({ status: status, hasCloseButton: !!onClose, color: color }, [
             className,
-        ]), role: "alert" }, otherProps, { ref: ref }),
+        ]) }, otherProps, { ref: ref }),
         showIcon && (react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Icon') }, matchStatusToIcon[status])),
         react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Content') },
             react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Title') }, title),

package/__inner__/cjs/components/Breadcrumbs/Breadcrumbs.css

@@ -12,3 +12,7 @@
   display: flex;
   align-items: center;
 }
+
+.Breadcrumbs-Item .Button-Label {
+  color: var(--color-content-secondary);
+}

package/__inner__/cjs/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__/cjs/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__/cjs/components/Card/Card.js

@@ -7,18 +7,28 @@ var react_1 = tslib_1.__importDefault(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Paper_1 = require("../Paper");
 exports.cnCard = (0, classname_1.cn)('Card');
 exports.cardSizeVariant = ['s', 'm', 'l'];
 exports.cardBorderWidthVariant = ['none', 's', 'm'];
 exports.cardBorderVariant = ['solid', 'dashed'];
 exports.cardBorderColorVariant = ['standard', 'selected'];
 exports.cardBackgroundColorVariant = ['standard', 'selected'];
+var matchBorderRadiusPaperToCard = {
+    s: 'xs',
+    m: 's',
+    l: 'l'
+};
+var matchBackgroundColorPaperToCard = {
+    selected: 'action-light',
+    standard: 'main'
+};
 exports.Card = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.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 = tslib_1.__rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (react_1["default"].createElement(Tag, tslib_1.__assign({}, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (react_1["default"].createElement(Paper_1.Paper, tslib_1.__assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor
         })), [className]) }), children));

package/__inner__/cjs/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__/cjs/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__/cjs/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__/cjs/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__/cjs/components/Menu/components/MenuItem/MenuItem.js

@@ -8,10 +8,11 @@ var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var classname_1 = require("../../../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
 var List_1 = require("../../../List");
+var constants_1 = require("../../../List/constants");
 exports.cnMenuItem = (0, classname_1.cn)('MenuItem');
 exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.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 = tslib_1.__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 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _b, other = tslib_1.__rest(props, ["children", "selected", "value", "label", "autoFocus", "className", "as"]);
     var innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         var _a;
@@ -19,6 +20,6 @@ exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus]);
-    return (react_1["default"].createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem" }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
+    return (react_1["default"].createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/__inner__/cjs/components/Modal/Modal.css

@@ -22,7 +22,6 @@
     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);
@@ -39,7 +38,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 +58,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__/cjs/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 } 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 = {
     /** Признак по которому компонент будет представлен */
@@ -38,7 +39,7 @@ export type ModalProps = {
         'data-testid'?: string;
     };
     /** Свойства окна с контентом */
-    windowProps?: ComponentPropsWithRef<'div'> & {
+    windowProps?: PaperProps & {
         'data-testid'?: string;
     };
     /** Кастомный класс контейнера модального окна */
@@ -49,4 +50,56 @@ export type ModalProps = {
     container?: PortalProps['container'];
 } & 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;
+    /** Свойства компонента 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'];
+} & import("../Portal").PortalBaseProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Modal/Modal.js

@@ -12,6 +12,7 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var Backdrop_1 = require("../Backdrop");
+var Paper_1 = require("../Paper");
 var Portal_1 = require("../Portal");
 var index_1 = require("./index");
 exports.cnModal = (0, classname_1.cn)('Modal');
@@ -80,6 +81,6 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnModal)({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
         react_1["default"].createElement(Portal_1.Portal, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, ref]) }),
             !hideBackdrop && (react_1["default"].createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1 }, backdropProps, { onClick: onClose, open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
-            react_1["default"].createElement("div", tslib_1.__assign({}, windowProps, { className: (0, exports.cnModal)('Window', [windowProps === null || windowProps === void 0 ? void 0 : windowProps.className]), tabIndex: -1, ref: (0, useMultiRef_1.useMultiRef)([trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+            react_1["default"].createElement(Paper_1.Paper, tslib_1.__assign({ radius: "s", background: "main" }, windowProps, { className: (0, exports.cnModal)('Window', [windowProps === null || windowProps === void 0 ? void 0 : windowProps.className]), tabIndex: -1, ref: (0, useMultiRef_1.useMultiRef)([trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 exports.Modal.displayName = 'Modal';

package/__inner__/cjs/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__/cjs/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__/cjs/components/Paper/Paper.js

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+exports.Paper = exports.cnPaper = exports.paperShadowVariant = exports.paperBackgroundVariant = exports.paperRadiusVariant = exports.PAPER_DEFAULT_TAG = void 0;
+var tslib_1 = require("tslib");
+require("./Paper.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+exports.PAPER_DEFAULT_TAG = 'div';
+exports.paperRadiusVariant = ['xs', 's', 'l'];
+exports.paperBackgroundVariant = [
+    'main',
+    'main-inverse',
+    'action-light',
+    'accent',
+];
+exports.paperShadowVariant = ['m', 'l'];
+exports.cnPaper = (0, classname_1.cn)('Paper');
+exports.Paper = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Paper' });
+    var _a = props.as, Tag = _a === void 0 ? exports.PAPER_DEFAULT_TAG : _a, children = props.children, radius = props.radius, background = props.background, shadow = props.shadow, className = props.className, other = tslib_1.__rest(props, ["as", "children", "radius", "background", "shadow", "className"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({}, other, { className: (0, exports.cnPaper)({ radius: radius, background: background, shadow: shadow }, [className]), ref: ref }), children));
+});
+exports.Paper.displayName = 'Paper';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Paper"), exports);

package/__inner__/cjs/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__/cjs/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">>;

package/__inner__/cjs/components/Popover/Popover.js

@@ -13,13 +13,14 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var Portal_1 = require("../Portal");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
 var index_1 = require("./index");
 var PopoverContext_1 = require("./PopoverContext");
 exports.cnPopover = (0, classname_1.cn)('Popover');
-exports.Popover = (0, react_1.forwardRef)(function (inProps, ref) {
+exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Popover' });
     var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.placement, placement = _f === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _f, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate"]);
     var isClickOutSide = (0, react_1.useRef)(null);
@@ -143,8 +144,8 @@ exports.Popover = (0, react_1.forwardRef)(function (inProps, ref) {
     var portalRef = (0, useMultiRef_1.useMultiRef)([ref, popoverRef, trapRef, setPopperElement]);
     return (react_1["default"].createElement(PopoverContext_1.PopoverContext.Provider, { value: { isTop: isTop } },
         react_1["default"].createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnPopover)({ animation: true }), timeout: 120 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: true }),
-            react_1["default"].createElement(Portal_1.Portal, tslib_1.__assign({}, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), styles.popper), ref: portalRef, className: (0, exports.cnPopover)({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+            react_1["default"].createElement(Portal_1.Portal, tslib_1.__assign({ as: constants_1.POPOVER_DEFAULT_TAG, radius: "xs", shadow: "l", background: "main" }, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), styles.popper), ref: portalRef, className: (0, exports.cnPopover)({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
                 children,
-                arrow && (react_1["default"].createElement(components_1.PopoverArrow, tslib_1.__assign({ size: "s", variant: "light" }, arrowProps, { style: tslib_1.__assign(tslib_1.__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
+                arrow && (react_1["default"].createElement(components_1.PopoverArrow, tslib_1.__assign({}, arrowProps, { style: tslib_1.__assign(tslib_1.__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
 });
 exports.Popover.displayName = 'Popover';

package/__inner__/cjs/components/Popover/components/PopoverArrow.js

@@ -5,8 +5,8 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Popover_1 = require("../Popover");
 exports.PopoverArrow = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, style = _a.style, _c = _a.variant, variant = _c === void 0 ? 'light' : _c, other = tslib_1.__rest(_a, ["size", "className", "style", "variant"]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, Popover_1.cnPopover)('Arrow', { variant: variant, size: size }, [className]), style: style }, other, { ref: ref }), size === 'xs' ? (react_1["default"].createElement("svg", { width: "6", height: "12", viewBox: "0 0 6 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, style = _a.style, other = tslib_1.__rest(_a, ["size", "className", "style"]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, Popover_1.cnPopover)('Arrow', { size: size }, [className]), style: style }, other, { ref: ref }), size === 'xs' ? (react_1["default"].createElement("svg", { width: "6", height: "12", viewBox: "0 0 6 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         react_1["default"].createElement("path", { d: "M6 12L6 0C6 0 6 1.5 4 3L1.06594 5.20054C0.532609 5.60054 0.532609 6.39946 1.06594 6.79946L4 9C6 10.5 6 12 6 12Z", fill: "currentColor" }))) : (react_1["default"].createElement("svg", { width: "8", height: "16", viewBox: "0 0 8 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         react_1["default"].createElement("path", { d: "M8 16L8 0C8 0 8 2 5.33333 4L2.13256 6.40058C1.06589 7.20058 1.06589 8.79942 2.13256 9.59942L5.33333 12C8 14 8 16 8 16Z", fill: "currentColor" })))));
 });

package/__inner__/cjs/components/Popover/components/types.d.ts

@@ -1,11 +1,8 @@
 import type { HTMLAttributes, Ref } from 'react';
 export declare const popoverArrowSizeVariant: readonly ["xs", "s"];
 export type PopoverArrowSizeVariant = (typeof popoverArrowSizeVariant)[number];
-export declare const popoverArrowVariant: readonly ["light", "dark"];
-export type PopoverArrowVariant = (typeof popoverArrowVariant)[number];
 export type PopoverArrowProps = {
     size?: PopoverArrowSizeVariant;
-    variant?: PopoverArrowVariant;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 } & HTMLAttributes<HTMLDivElement> & {

package/__inner__/cjs/components/Popover/components/types.js

@@ -1,5 +1,4 @@
 "use strict";
 exports.__esModule = true;
-exports.popoverArrowVariant = exports.popoverArrowSizeVariant = void 0;
+exports.popoverArrowSizeVariant = void 0;
 exports.popoverArrowSizeVariant = ['xs', 's'];
-exports.popoverArrowVariant = ['light', 'dark'];

package/__inner__/cjs/components/Popover/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const POPOVER_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const POPOVER_DEFAULT_ARROW = false;
 export declare const POPOVER_DEFAULT_OPEN = false;
 export declare const POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;