@ozen-ui/kit 0.6.0 → 0.7.0

package/__inner__/esm/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__/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 } 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__/esm/components/Modal/Modal.js

@@ -9,6 +9,7 @@ import { useMultiRef } from '../../hooks/useMultiRef';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { Backdrop } from '../Backdrop';
+import { Paper } from '../Paper';
 import { Portal } from '../Portal';
 import { useModalManager } from './index';
 export var cnModal = cn('Modal');
@@ -77,6 +78,6 @@ export var Modal = forwardRef(function (_a, ref) {
     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(Paper, __assign({ radius: "s", background: "main" }, 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))));
 });
 Modal.displayName = 'Modal';

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">>;

package/__inner__/esm/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
-import React, { useCallback, useMemo, useEffect, useRef, useState, forwardRef, } from 'react';
+import React, { useCallback, useMemo, useEffect, useRef, useState, } from 'react';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import './Popover.css';
@@ -10,13 +10,14 @@ import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { Portal } from '../Portal';
 import { PopoverArrow } from './components';
-import { POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, } from './constants';
+import { POPOVER_DEFAULT_ARROW, POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS, POPOVER_DEFAULT_DISABLE_INTERACTIVE, POPOVER_DEFAULT_DISABLE_RETURN_FOCUS, POPOVER_DEFAULT_OPEN, POPOVER_DEFAULT_PLACEMENT, POPOVER_DEFAULT_TAG, } from './constants';
 import { usePopoverManager } from './index';
 import { PopoverContext } from './PopoverContext';
 export var cnPopover = cn('Popover');
-export var Popover = forwardRef(function (inProps, ref) {
+export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Popover' });
     var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.placement, placement = _f === void 0 ? 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 = __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 = useRef(null);
@@ -140,8 +141,8 @@ export var Popover = forwardRef(function (inProps, ref) {
     var portalRef = useMultiRef([ref, popoverRef, trapRef, setPopperElement]);
     return (React.createElement(PopoverContext.Provider, { value: { isTop: isTop } },
         React.createElement(CSSTransition, __assign({ classNames: cnPopover({ animation: true }), timeout: 120 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: true }),
-            React.createElement(Portal, __assign({}, other, { style: __assign(__assign({}, style), styles.popper), ref: portalRef, className: cnPopover({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+            React.createElement(Portal, __assign({ as: POPOVER_DEFAULT_TAG, radius: "xs", shadow: "l", background: "main" }, other, { style: __assign(__assign({}, style), styles.popper), ref: portalRef, className: cnPopover({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
                 children,
-                arrow && (React.createElement(PopoverArrow, __assign({ size: "s", variant: "light" }, arrowProps, { style: __assign(__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
+                arrow && (React.createElement(PopoverArrow, __assign({}, arrowProps, { style: __assign(__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
 });
 Popover.displayName = 'Popover';

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

@@ -2,8 +2,8 @@ import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { cnPopover } from '../Popover';
 export var PopoverArrow = 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 = __rest(_a, ["size", "className", "style", "variant"]);
-    return (React.createElement("div", __assign({ className: cnPopover('Arrow', { variant: variant, size: size }, [className]), style: style }, other, { ref: ref }), size === 'xs' ? (React.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 = __rest(_a, ["size", "className", "style"]);
+    return (React.createElement("div", __assign({ className: cnPopover('Arrow', { size: size }, [className]), style: style }, other, { ref: ref }), size === 'xs' ? (React.createElement("svg", { width: "6", height: "12", viewBox: "0 0 6 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         React.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.createElement("svg", { width: "8", height: "16", viewBox: "0 0 8 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         React.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__/esm/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__/esm/components/Popover/components/types.js

@@ -1,2 +1 @@
 export var popoverArrowSizeVariant = ['xs', 's'];
-export var popoverArrowVariant = ['light', 'dark'];

package/__inner__/esm/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;

package/__inner__/esm/components/Popover/constants.js

@@ -1,3 +1,5 @@
+import { Paper } from '../Paper';
+export var POPOVER_DEFAULT_TAG = Paper;
 export var POPOVER_DEFAULT_ARROW = false;
 export var POPOVER_DEFAULT_OPEN = false;
 export var POPOVER_DEFAULT_DISABLE_INTERACTIVE = false;

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

@@ -1,16 +1,18 @@
-import React from 'react';
-import type { RefObject, ComponentPropsWithRef } from 'react';
+import React, { ComponentRef, ElementType } from 'react';
+import type { RefObject } from 'react';
 import PopperJS from '@popperjs/core';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
 import type { PopoverArrowProps } from './components';
+import { POPOVER_DEFAULT_TAG } from './constants';
 export type VirtualElement = {
     getBoundingClientRect: () => DOMRect;
     contextElement?: Element;
 };
 export declare const popoverPlacementVariant: readonly ["top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end", "auto", "auto-start", "auto-end", "top", "bottom", "right", "left"];
 export type PopoverPlacementVariant = (typeof popoverPlacementVariant)[number];
-export type PopoverProps = {
+export type PopoverBaseProps = {
     /** Признак по которому компонент будет представлен */
     open?: boolean;
     /** Ссылка на элемент, относительно которого будет позиционироваться поповер */
@@ -67,4 +69,6 @@ export type PopoverProps = {
     setUpdate?: (update: PopperJS.Instance['update'] | null) => void;
     /** Контейнер для монтирования всплывающего окна */
     container?: PortalProps['container'];
-} & ComponentPropsWithRef<'div'>;
+};
+export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
+export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { ComponentPropsWithRef, ComponentRef } from 'react';
-declare const portalEl = "div";
-export type PortalRef = ComponentRef<typeof portalEl>;
-export type PortalProps = {
+import type { ComponentRef, ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const PORTAL_DEFAULT_TAG = "div";
+export type PortalRef = ComponentRef<typeof PORTAL_DEFAULT_TAG>;
+export type PortalBaseProps = {
     /** Контейнер для монтирования портала */
     container?: Element | DocumentFragment | null;
-} & ComponentPropsWithRef<typeof portalEl>;
-export declare const Portal: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};
+};
+export type PortalProps<As extends ElementType = typeof PORTAL_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<PortalBaseProps, As>;
+export declare const Portal: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PortalBaseProps, "div">;

package/__inner__/esm/components/Portal/Portal.js

@@ -1,16 +1,17 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { createPortal } from 'react-dom';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { ThemeProvider, useTheme } from '../ThemeProvider';
-var portalEl = 'div';
-export var Portal = forwardRef(function (inProps, ref) {
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { useTheme, ThemeProvider } from '../ThemeProvider';
+export var PORTAL_DEFAULT_TAG = 'div';
+export var Portal = polymorphicComponentWithRef(function (inProps, ref) {
     var _a = useThemeProps({
         props: inProps,
         name: 'Portal'
-    }), children = _a.children, container = _a.container, className = _a.className, other = __rest(_a, ["children", "container", "className"]);
+    }), children = _a.children, container = _a.container, className = _a.className, _b = _a.as, Tag = _b === void 0 ? PORTAL_DEFAULT_TAG : _b, other = __rest(_a, ["children", "container", "className", "as"]);
     var theme = useTheme();
     var portalContainer = container || window.document.body;
-    return createPortal(React.createElement(ThemeProvider, __assign({ theme: theme, className: className }, other, { ref: ref }), children), portalContainer);
+    return createPortal(React.createElement(ThemeProvider, __assign({ theme: theme, className: className, as: Tag }, other, { ref: ref }), children), portalContainer);
 });
 Portal.displayName = 'Portal';

package/__inner__/esm/components/Snackbar/SnackbarProvider.d.ts

@@ -7,4 +7,7 @@ export type SnackbarProviderProps = Partial<SnackbarProps> & SnackbarCommonProps
     /** Максимальное количество одновременно отображенных сообщений */
     maxMessages?: number;
 };
-export declare const SnackbarProvider: React.ForwardRefExoticComponent<Omit<SnackbarProviderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SnackbarProvider: React.ForwardRefExoticComponent<Partial<SnackbarProps> & SnackbarCommonProps & {
+    /** Максимальное количество одновременно отображенных сообщений */
+    maxMessages?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -8,4 +8,9 @@ export type SnackbarProps = PortalProps & {
     /** Расположение сообщения относительно контейнера */
     anchorOrigin: SnackbarAnchorOrigin;
 };
-export declare const Snackbar: React.ForwardRefExoticComponent<Omit<SnackbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Snackbar: React.ForwardRefExoticComponent<import("../../../Portal").PortalBaseProps & {
+    as?: "div" | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & {
+    /** Расположение сообщения относительно контейнера */
+    anchorOrigin: SnackbarAnchorOrigin;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import './ThemeProvider.css';
-import React, { ElementType } from 'react';
+import React, { ComponentRef, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { Theme } from './types';
 export declare const THEME_DEFAULT_TAG = "div";
@@ -11,4 +11,5 @@ export type ThemeProviderBaseProps = {
 };
 export declare const cnThemeProvider: import("@bem-react/classname").ClassNameFormatter;
 export type ThemeProviderProps<As extends ElementType = typeof THEME_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ThemeProviderBaseProps, As>;
+export type ThemeProviderRef = ComponentRef<typeof THEME_DEFAULT_TAG>;
 export declare const ThemeProvider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ThemeProviderBaseProps, "div">;

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -27,6 +27,7 @@ import type { LoaderProps } from '../Loader';
 import type { MenuProps, MenuItemProps, MenuListProps } from '../Menu';
 import type { ModalProps } from '../Modal';
 import type { PaginationProps } from '../Pagination';
+import type { PaperProps } from '../Paper';
 import type { PopoverProps } from '../Popover';
 import type { PortalProps } from '../Portal';
 import type { RadioProps } from '../Radio';
@@ -91,6 +92,7 @@ export type Theme = {
         MenuList?: Partial<MenuListProps>;
         Modal?: Partial<ModalProps>;
         Pagination?: Partial<PaginationProps>;
+        Paper?: Partial<PaperProps>;
         Popover?: Partial<PopoverProps>;
         Portal?: Partial<PortalProps>;
         Radio?: Partial<RadioProps>;

package/__inner__/esm/components/Tooltip/Tooltip.css

@@ -1,33 +1,28 @@
 /* stylelint-disable */
-.Popover.Tooltip {
+.Tooltip {
   max-inline-size: 300px;
-  box-shadow: var(--shadow-m);
 }
-.Popover.Tooltip_variant_dark {
-      background: var(--color-background-main-inverse);
-      color: var(--color-content-primary-inverse);
-    }
-.Popover.Tooltip_variant_light {
-      background: var(--color-background-main);
-      color: var(--color-content-primary);
-    }
-.Popover.Tooltip_size_xs {
-      padding: 8px 12px;
+.Tooltip_size_xs {
+      padding: var(--space-s) var(--space-m);
 
       font: var(--typography-text-xs-font);
 
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
 
       text-transform: var(--typography-text-xs-text_transform, none);
-      border-radius: var(--border-radius-s);
     }
-.Popover.Tooltip_size_s {
-      padding: 12px 16px;
+.Tooltip_size_s {
+      padding: var(--space-m) var(--space-l);
 
       font: var(--typography-text-s-font);
 
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
 
       text-transform: var(--typography-text-s-text_transform, none);
-      border-radius: var(--border-radius-m);
+    }
+.Tooltip_variant_light {
+      color: var(--color-content-primary);
+    }
+.Tooltip_variant_dark {
+      color: var(--color-content-primary-inverse);
     }

package/__inner__/esm/components/Tooltip/Tooltip.js

@@ -1,13 +1,13 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tooltip.css';
-import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useMemo, useState, useEffect, } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { Popover } from '../Popover';
-import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
+import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
 export var cnTooltip = cn('Tooltip');
 export var Tooltip = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Tooltip' });
@@ -111,8 +111,7 @@ export var Tooltip = forwardRef(function (inProps, ref) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(resolveChildren, composeChildrenProps),
-        React.createElement(Popover, __assign({ anchorRef: anchorRef }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
-                variant: variant,
+        React.createElement(Popover, __assign({ anchorRef: anchorRef, as: TOOLTIP_DEFAULT_TAG, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/esm/components/Tooltip/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
 export declare const TOOLTIP_DEFAULT_SIZE = "s";
 export declare const TOOLTIP_DEFAULT_VARIANT = "dark";

package/__inner__/esm/components/Tooltip/constants.js

@@ -1,3 +1,5 @@
+import { Paper } from '../Paper';
+export var TOOLTIP_DEFAULT_TAG = Paper;
 export var TOOLTIP_DEFAULT_TRIGGER = 'hover';
 export var TOOLTIP_DEFAULT_SIZE = 's';
 export var TOOLTIP_DEFAULT_VARIANT = 'dark';

package/__inner__/esm/components/Tooltip/types.d.ts

@@ -1,5 +1,6 @@
 import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
-import type { PopoverProps } from '../Popover';
+import type { PopoverBaseProps } from '../Popover';
+import { TOOLTIP_DEFAULT_TAG } from './constants';
 export declare const tooltipSizeVariant: readonly ["xs", "s"];
 export type TooltipSizeVariant = (typeof tooltipSizeVariant)[number];
 export declare const tooltipVariant: readonly ["light", "dark"];
@@ -39,4 +40,4 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<'div'>;
+} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<typeof TOOLTIP_DEFAULT_TAG>;