@ozen-ui/kit 0.42.0 → 0.44.0

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

@@ -7,7 +7,6 @@
     inline-size: 100%;
     max-inline-size: var(--drawer-width);
     block-size: 100%;
-    border-radius: var(--drawer-border-radius);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -106,18 +105,24 @@
       }
 .Drawer_placement_right {
       --drawer-start-position: 100%;
-      --drawer-border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
       justify-content: flex-end;
     }
+.Drawer_placement_right .Modal-Window {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
 .Drawer_placement_left {
       --drawer-start-position: -100%;
-      --drawer-border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
       justify-content: flex-start;
     }
+.Drawer_placement_left .Modal-Window {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
 .Drawer_hasCloseButton {
     --drawer-header-item-padding-right: 24px;
   }
-.IconButton.Drawer-CloseButton {
+.IconButtonNext.Drawer-CloseButton {
   position: absolute;
   inset-block-start: 8px;
   inset-inline-end: 8px;

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

@@ -1,6 +1,6 @@
 import './Drawer.css';
 import React from 'react';
-import { type IconButtonProps } from '../IconButton';
+import { type IconButtonProps } from '../IconButtonNext';
 import { type ModalProps } from '../Modal';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
 export declare const drawerVariant: readonly ["little", "medium", "large"];

package/__inner__/esm/components/Drawer/Drawer.js

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
 import { CrossIcon } from '@ozen-ui/icons';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { IconButton } from '../IconButton';
+import { IconButton } from '../IconButtonNext';
 import { Modal } from '../Modal';
 import { DRAWER_DEFAULT_HIDE_CLOSE_BUTTON, DRAWER_DEFAULT_PLACEMENT, DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_VARIANT, } from './constants';
 export var cnDrawer = cn('Drawer');
@@ -20,9 +20,9 @@ export var Drawer = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Drawer',
     });
-    var _a = props.variant, variant = _a === void 0 ? DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _d, open = props.open, onClose = props.onClose, children = props.children, className = props.className, transitionProps = props.transitionProps, closeButtonProps = props.closeButtonProps, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
+    var _a = props.variant, variant = _a === void 0 ? DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _d, open = props.open, onClose = props.onClose, children = props.children, className = props.className, windowProps = props.windowProps, transitionProps = props.transitionProps, closeButtonProps = props.closeButtonProps, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "transitionProps", "closeButtonProps"]);
     var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = __rest(_e, ["className"]);
-    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, className: cnDrawer({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
+    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ radius: size === 's' ? 'l' : 'xl' }, windowProps), className: cnDrawer({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
         !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: cnDrawer('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CrossIcon, compressed: true }))),
         React.createElement("div", { className: cnDrawer('InnerContainer') }, children)));
 });

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -17,7 +17,7 @@
       --textfield-input-padding: 8px 0;
       --textfield-input-gap: var(--spacing-2xs);
       --textfield-gutter-x: var(--control-padding-xs);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-m);
       --textfield-input-height: var(--control-height-2xs);
 
       font: var(--typography-text-2xs-font);
@@ -30,7 +30,7 @@
       --textfield-input-padding: 12px 0;
       --textfield-input-gap: var(--spacing-2xs);
       --textfield-gutter-x: var(--control-padding-xs);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-m);
       --textfield-input-height: var(--control-height-xs);
 
       font: var(--typography-text-xs-font);
@@ -43,7 +43,7 @@
       --textfield-input-padding: 14px 0;
       --textfield-input-gap: var(--spacing-xs);
       --textfield-gutter-x: var(--control-padding-s);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-l);
       --textfield-input-height: var(--control-height-s);
 
       font: var(--typography-text-s-font);
@@ -56,7 +56,7 @@
       --textfield-input-padding: 16px 0;
       --textfield-input-gap: var(--spacing-xs);
       --textfield-gutter-x: var(--control-padding-m);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-l);
       --textfield-input-height: var(--control-height-m);
 
       font: var(--typography-text-m-font);
@@ -69,7 +69,7 @@
       --textfield-input-padding: 18px 0;
       --textfield-input-gap: var(--spacing-s);
       --textfield-gutter-x: var(--control-padding-l);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-l);
       --textfield-input-height: var(--control-height-l);
 
       font: var(--typography-text-l-font);
@@ -107,7 +107,7 @@
   }
 .FieldControl_focused,
   .FieldControl_focused:hover {
-    --textfield-border-width: var(--border-width-m);
+    --textfield-border-width: var(--border-width-s);
     --textfield-border-color: var(--color-border-action);
     --textfield-background-color: var(--color-background-main);
   }

package/__inner__/esm/components/File/File.css

@@ -3,12 +3,12 @@
   font: var(--typography-text-s_1-font);
   letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
   text-transform: var(--typography-text-s_1-text_transform, none);
-  inline-size: var(--spacing-xl);
-  block-size: var(--spacing-xl);
+  inline-size: var(--control-height-xs);
+  block-size: var(--control-height-xs);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--border-radius-m);
   overflow: hidden;
   transition: background-color var(--transition-default);
 }

package/__inner__/esm/components/IconButton/IconButton.css

@@ -12,11 +12,11 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--border-radius-xs);
   border: none;
   color: var(--icon-button-font-color);
   background-color: var(--icon-button-bg-color);
   opacity: 1;
+  border-radius: var(--icon-button-border-radius);
   transition:
     background-color var(--transition-default),
     box-shadow var(--transition-default),
@@ -27,6 +27,7 @@
 
   .IconButton_size_2xs {
     --icon-button-size: 32px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButton_size_2xs.IconButton_compressed:not(.IconButton_variant_function) {
@@ -35,6 +36,7 @@
 
   .IconButton_size_xs {
     --icon-button-size: 40px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButton_size_xs.IconButton_compressed:not(.IconButton_variant_function) {
@@ -43,6 +45,7 @@
 
   .IconButton_size_s {
     --icon-button-size: 48px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButton_size_s.IconButton_compressed:not(.IconButton_variant_function) {
@@ -51,6 +54,7 @@
 
   .IconButton_size_m {
     --icon-button-size: 56px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButton_size_m.IconButton_compressed:not(.IconButton_variant_function) {
@@ -59,6 +63,7 @@
 
   .IconButton_size_l {
     --icon-button-size: 64px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButton_size_l.IconButton_compressed:not(.IconButton_variant_function) {
@@ -116,6 +121,7 @@
 
   .IconButton_variant_function {
     --icon-button-size: auto;
+    --icon-button-border-radius: var(--border-radius-xs);
   }
 
   .IconButton_variant_function:hover {

package/__inner__/esm/components/IconButtonNext/IconButton.css

@@ -12,11 +12,11 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--border-radius-xs);
   border: none;
   color: var(--icon-button-font-color);
   background-color: var(--icon-button-bg-color);
   opacity: 1;
+  border-radius: var(--icon-button-border-radius);
   transition:
     background-color var(--transition-default),
     box-shadow var(--transition-default),
@@ -27,6 +27,7 @@
 
   .IconButtonNext_size_2xs {
     --icon-button-size: 32px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButtonNext_size_2xs.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -35,6 +36,7 @@
 
   .IconButtonNext_size_xs {
     --icon-button-size: 40px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButtonNext_size_xs.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -43,6 +45,7 @@
 
   .IconButtonNext_size_s {
     --icon-button-size: 48px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButtonNext_size_s.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -51,6 +54,7 @@
 
   .IconButtonNext_size_m {
     --icon-button-size: 56px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButtonNext_size_m.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -59,6 +63,7 @@
 
   .IconButtonNext_size_l {
     --icon-button-size: 64px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButtonNext_size_l.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -209,6 +214,7 @@
 
   .IconButtonNext_variant_function {
     --icon-button-size: auto;
+    --icon-button-border-radius: var(--border-radius-xs);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_primary,
@@ -258,6 +264,7 @@
     --icon-button-bg-color: var(--color-background-main);
     --icon-button-bg-color-hover: var(--color-background-main-hover);
     --icon-button-bg-color-active: var(--color-background-main-pressed);
+    --icon-button-bg-color-focus: var(--color-background-main);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
     --icon-button-font-color-focus: var(--color-content-primary);

package/__inner__/esm/components/IconButtonNext/IconButton.d.ts

@@ -12,7 +12,7 @@ export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
 export type IconButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
 }>['content'];
-type IconButtonBaseProps = {
+export type IconButtonBaseProps = {
     /** Иконка */
     icon: IconButtonIcon;
     /** Вариант представления компонента */
@@ -38,4 +38,3 @@ type IconButtonBaseProps = {
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;
 export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
-export {};

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

@@ -23,7 +23,7 @@ export declare const Indicator: React.ForwardRefExoticComponent<{
     /** Цветовой вариант индикатор
      * @default success
      * */
-    variant?: "warning" | "error" | "info" | "success" | "neutral" | undefined;
+    variant?: "error" | "info" | "success" | "warning" | "neutral" | undefined;
     /** Размер
      * @default m
      * */

package/__inner__/esm/components/InputNumber/InputNumber.css

@@ -94,12 +94,12 @@
     row-gap: var(--input-number-button-gap);
   }
 
-.IconButton.InputNumber-Increment,
-.IconButton.InputNumber-Decrement {
+.IconButtonNext.InputNumber-Increment,
+.IconButtonNext.InputNumber-Decrement {
   inline-size: var(--input-number-button-inline-size);
   block-size: var(--input-number-button-block-size);
 }
 
-.IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
+.IconButtonNext.InputNumber-Increment *, .IconButtonNext.InputNumber-Decrement * {
     pointer-events: none;
   }

package/__inner__/esm/components/InputNumber/InputNumber.js

@@ -15,7 +15,7 @@ import { FieldIcon } from '../FieldIcon';
 import { FieldInput } from '../FieldInput';
 import { FieldLabel } from '../FieldLabel';
 import { Fieldset } from '../Fieldset';
-import { IconButton } from '../IconButton';
+import { IconButton } from '../IconButtonNext';
 import { INPUT_NUMBER_DEFAULT_AUTO_FOCUS, INPUT_NUMBER_DEFAULT_DISABLED, INPUT_NUMBER_DEFAULT_ERROR, INPUT_NUMBER_DEFAULT_FULL_WIDTH, INPUT_NUMBER_DEFAULT_MAX, INPUT_NUMBER_DEFAULT_MIN, INPUT_NUMBER_DEFAULT_REQUIRED, INPUT_NUMBER_DEFAULT_SIZE, INPUT_NUMBER_DEFAULT_STEP, INPUT_NUMBER_DEFAULT_VALUE, } from './constants';
 import { getValue, isInputInvalid, isValidValue } from './utils';
 export var cnInputNumber = cn('InputNumber');

package/__inner__/esm/components/List/List.css

@@ -1,11 +1,10 @@
 .List {
-  --list-item-color: var(--color-content-primary);
-  --list-item-border-radius: var(--border-radius-xs);
   --list-item-bg-color: transparent;
+  --list-item-color: var(--color-content-primary);
+  --list-pipka-bg-color: var(--color-content-action);
+  --list-item-bg-color-disabled: var(--color-content-tertiary);
   --list-item-bg-color-hover: var(--color-background-main-hover);
   --list-item-bg-color-active: var(--color-background-main-pressed);
-  --list-item-bg-color-disabled: var(--color-content-tertiary);
-  --list-pipka-bg-color: var(--color-content-action);
   --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
     0;
   display: flex;
@@ -30,57 +29,62 @@
 
   .List_size_2xs {
       --list-gutter: var(--spacing-3xs);
-      --list-item-min-height: 32px;
+      --list-item-min-height: var(--control-height-2xs);
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 16px;
       --list-item-padding: 0 8px;
       --list-item-children-margin-right: 8px;
       --list-pipka-height: 32px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-m);
     }
 
   .List_size_xs {
       --list-gutter: var(--spacing-3xs);
-      --list-item-min-height: 40px;
+      --list-item-min-height: var(--control-height-xs);
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 24px;
       --list-item-padding: 4px 8px;
       --list-item-children-margin-right: 8px;
       --list-pipka-height: 40px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-m);
     }
 
   .List_size_s {
       --list-gutter: var(--spacing-3xs);
-      --list-item-min-height: 48px;
+      --list-item-min-height: var(--control-height-s);
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 32px;
       --list-item-padding: 6px 12px;
       --list-item-children-margin-right: 12px;
       --list-pipka-height: 40px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-l);
     }
 
   .List_size_m {
       --list-gutter: var(--spacing-2xs);
-      --list-item-min-height: 56px;
+      --list-item-min-height: var(--control-height-m);
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 40px;
       --list-item-padding: 8px 12px;
       --list-item-children-margin-right: 12px;
       --list-pipka-height: 48px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-l);
     }
 
   .List_size_l {
       --list-gutter: var(--spacing-2xs);
-      --list-item-min-height: 64px;
+      --list-item-min-height: var(--control-height-l);
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 48px;
       --list-item-padding: 8px 16px;
       --list-item-children-margin-right: 16px;
       --list-pipka-height: 48px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-l);
     }
 
   .List_disablePadding,

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

@@ -1,6 +1,7 @@
 import './Menu.css';
 import React from 'react';
 import type { RefObject, ComponentPropsWithRef } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import { type PopoverBaseProps } from '../Popover';
 import type { PORTAL_DEFAULT_TAG } from '../Portal';
 import { type MenuListProps } from './components';
@@ -8,6 +9,12 @@ export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
 export type MenuProps = {
     /** Свойства компонента MenuList */
     menuListProps?: Omit<MenuListProps, 'children'>;
+    /**
+     * Ссылка на компонент MenuList
+     * @deprecated Используйте menuListProps.ref
+     * */
     menuListRef?: RefObject<HTMLDivElement>;
+    /** Размер компонента */
+    size?: FormElementSizeVariant;
 } & Omit<PopoverBaseProps, 'disableEnforceFocus'> & ComponentPropsWithRef<typeof PORTAL_DEFAULT_TAG>;
 export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +1,18 @@
 import { __assign, __rest } from "tslib";
 import './Menu.css';
 import React, { forwardRef, useRef } from 'react';
+import { deprecate } from '@ozen-ui/logger';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
 import { isKey } from '../../utils/isKey';
 import { Popover, usePopover } from '../Popover';
 import { MenuList } from './components';
+import { MENU_DEFAULT_SIZE } from './constants';
 export var cnMenu = cn('Menu');
 var MenuContextConsumer = function (_a) {
-    var children = _a.children, menuListRef = _a.menuListRef, onClose = _a.onClose, menuListProps = _a.menuListProps;
+    var children = _a.children, onClose = _a.onClose, menuListProps = _a.menuListProps;
     var isTop = usePopover().isTop;
     var docRef = useRef(document);
     useEventListener({
@@ -23,12 +26,16 @@ var MenuContextConsumer = function (_a) {
         element: docRef,
         active: isTop,
     });
-    return (React.createElement(MenuList, __assign({}, menuListProps, { ref: menuListRef, autoFocus: true }), children));
+    return (React.createElement(MenuList, __assign({}, menuListProps, { autoFocus: true }), children));
 };
 export var Menu = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Menu' });
-    var open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = __rest(props, ["open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
-    return (React.createElement(Popover, __assign({ offset: [0, 4], className: cnMenu('', [className]) }, other, { open: open, onClose: onClose, disableEnforceFocus: true, ref: ref }),
-        React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: menuListProps }, children)));
+    var _a = props.size, size = _a === void 0 ? MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = __rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    var radius = getPaperSizeToFormElement(size);
+    if (process.env.NODE_ENV !== 'production' && menuListRef) {
+        deprecate('Свойство «menuListRef» устарело. Для замены используйте «menuListProps.ref».');
+    }
+    return (React.createElement(Popover, __assign({ offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: cnMenu('', [className]), disableEnforceFocus: true, ref: ref }),
+        React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: __assign(__assign({ size: size }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 Menu.displayName = 'Menu';

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

@@ -0,0 +1 @@
+export declare const MENU_DEFAULT_SIZE = "m";

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

@@ -0,0 +1 @@
+export var MENU_DEFAULT_SIZE = 'm';

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

@@ -4,6 +4,6 @@ import { Paper } from '../../Paper';
 import { cnModal } from '../index';
 export var ModalConsumer = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = __rest(_a, ["children", "className"]);
-    return (React.createElement(Paper, __assign({ radius: "s", background: "main" }, other, { className: cnModal('Window', [className]), tabIndex: -1, ref: ref }), children));
+    return (React.createElement(Paper, __assign({ radius: "l", background: "main" }, other, { className: cnModal('Window', [className]), tabIndex: -1, ref: ref }), children));
 });
 ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/esm/components/Pagination/components/PaginationItem/PaginationItem.css

@@ -22,7 +22,7 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --pagination-item-size: var(--control-height-2xs);
-      --pagination-item-border-radius: var(--border-radius-xs);
+      --pagination-item-border-radius: var(--border-radius-m);
     }
 .PaginationItem_size_l {
       font: var(--typography-text-l-font);
@@ -30,7 +30,7 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --pagination-item-size: var(--control-height-m);
-      --pagination-item-border-radius: var(--border-radius-s);
+      --pagination-item-border-radius: var(--border-radius-l);
     }
 .PaginationItem:hover:not(.PaginationItem_selected) {
     --pagination-item-background: var(--color-background-primary-hover);

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

@@ -19,6 +19,14 @@
       --paper-border-radius: var(--border-radius-l);
     }
 
+  .Paper_radius_xl {
+      --paper-border-radius: var(--border-radius-xl);
+    }
+
+  .Paper_radius_2xl {
+      --paper-border-radius: var(--border-radius-2xl);
+    }
+
   .Paper_background_main {
       --paper-background-color: var(--color-background-main);
     }

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

@@ -2,15 +2,18 @@ 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 declare const paperRadiusVariant: readonly ["xs", "s", "l", "xl", "2xl"];
 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>;

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

@@ -5,7 +5,7 @@ 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 paperRadiusVariant = ['xs', 's', 'l', 'xl', '2xl'];
 export var paperBackgroundVariant = [
     'main',
     'main-inverse',

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

@@ -140,7 +140,7 @@ export var Popover = polymorphicComponentWithRef(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({ as: as, radius: "xs", shadow: "l", background: "main" }, other, { style: __assign(__assign({}, style), styles.popper), ref: portalRef, className: cnPopover({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+            React.createElement(Portal, __assign({ as: as, radius: "l", 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({}, arrowProps, { style: __assign(__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
 });

package/__inner__/esm/components/SectionMessage/SectionMessage.css

@@ -2,15 +2,15 @@
 .SectionMessage {
   --section-message-icon-padding: 2px;
   padding: var(--section-message-padding);
-  border-radius: var(--border-radius-m);
-  background-color: var(--section-message-background-color);
-  display: flex;
   -moz-column-gap: var(--section-message-column-gap);
        column-gap: var(--section-message-column-gap);
-  align-items: flex-start;
-  inline-size: 100%;
+  border-radius: var(--section-message-border-radius);
+  background-color: var(--section-message-background-color);
+  display: flex;
   overflow: auto;
+  inline-size: 100%;
   box-sizing: border-box;
+  align-items: flex-start;
 }
 .SectionMessage_status_info {
       --section-message-icon-color: var(--color-content-info);
@@ -46,6 +46,7 @@
       --section-message-padding: 12px;
       --section-message-column-gap: var(--spacing-2xs);
       --section-message-icon-padding: 0;
+      --section-message-border-radius: var(--border-radius-m);
 
       font: var(--typography-text-xs-font);
 
@@ -61,6 +62,7 @@
 .SectionMessage_size_s {
       --section-message-padding: 14px 16px;
       --section-message-column-gap: var(--spacing-xs);
+      --section-message-border-radius: var(--border-radius-l);
 
       font: var(--typography-text-s-font);
 
@@ -77,6 +79,7 @@
       --section-message-padding: 16px 20px;
       --section-message-column-gap: var(--spacing-xs);
       --section-message-icon-padding: 0;
+      --section-message-border-radius: var(--border-radius-l);
 
       font: var(--typography-text-m-font);
 
@@ -92,6 +95,7 @@
 .SectionMessage_size_l {
       --section-message-padding: 18px 24px;
       --section-message-column-gap: var(--spacing-s);
+      --section-message-border-radius: var(--border-radius-l);
 
       font: var(--typography-text-l-font);
 

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

@@ -1,7 +1,7 @@
 import './SectionMessage.css';
 import React from 'react';
 import type { HTMLAttributes, ReactElement } from 'react';
-import type { ButtonProps } from '../Button';
+import type { ButtonProps } from '../ButtonNext';
 export declare const cnSectionMessage: import("@bem-react/classname").ClassNameFormatter;
 export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral"];
 export type SectionMessageStatusVariant = (typeof sectionMessageStatusVariant)[number];