@ozen-ui/kit 0.42.0 → 0.43.0

package/__inner__/cjs/components/Tabs/components/ScrollButton/ScrollButton.js

@@ -6,6 +6,7 @@ require("./ScrollButton.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var classname_1 = require("../../../../utils/classname");
+var IconButtonNext_1 = require("../../../IconButtonNext");
 exports.scrollButtonDirectionVariant = ['left', 'right'];
 exports.cnScrollButton = (0, classname_1.cn)('ScrollButton');
 exports.iconByDirection = {
@@ -21,7 +22,6 @@ exports.ScrollButton = react_1.default.forwardRef(function (_a, ref) {
     var ariaLabel = (0, react_1.useMemo)(function () { return exports.ariaLabelByDirection[direction]; }, [direction]);
     var Icon = (0, react_1.useMemo)(function () { return exports.iconByDirection[direction]; }, [direction]);
     var tabIndex = invisible ? -1 : 0;
-    return (react_1.default.createElement("button", tslib_1.__assign({ className: (0, exports.cnScrollButton)({ invisible: invisible, direction: direction, size: size }, [className]), tabIndex: tabIndex, "aria-label": ariaLabel, ref: ref }, other),
-        react_1.default.createElement(Icon, { size: "s" })));
+    return (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "floating", size: size, icon: react_1.default.createElement(Icon, { size: "s" }), className: (0, exports.cnScrollButton)({ invisible: invisible, direction: direction }, [className]), tabIndex: tabIndex, "aria-label": ariaLabel, compressed: true, ref: ref }, other)));
 });
 exports.ScrollButton.displayName = 'ScrollButton';

package/__inner__/cjs/components/Tabs/components/Tab/Tab.css

@@ -7,7 +7,7 @@
   max-inline-size: 360px;
   min-inline-size: 90px;
   cursor: pointer;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--tab-border-radius);
   color: var(--color-content-secondary);
   font-style: normal;
   text-decoration: none;
@@ -34,7 +34,7 @@
   }
 .Tab_active {
     cursor: auto;
-    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
+    border-radius: var(--tab-border-radius);
   }
 .Tab > svg {
     flex-shrink: 0;
@@ -94,15 +94,19 @@
         text-transform: var(--typography-text-m-text_transform, none);
       }
 .Tab_size_xs {
+    --tab-border-radius: var(--border-radius-m);
     padding: 12px;
   }
 .Tab_size_s {
+    --tab-border-radius: var(--border-radius-l);
     padding: 14px 16px;
   }
 .Tab_size_m {
+    --tab-border-radius: var(--border-radius-l);
     padding: 16px 20px;
   }
 .Tab_size_l {
+    --tab-border-radius: var(--border-radius-l);
     padding: 18px 24px;
   }
 .Tab_onlyIcon.Tab_size_2xs {

package/__inner__/cjs/components/Tag/Tag.css

@@ -1,13 +1,13 @@
 /* stylelint-disable */
 .Tag {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--border-radius-xs);
-  padding: var(--tag-padding);
-  gap: var(--spacing-3xs);
-  outline: none;
   border: none;
+  outline: none;
+  align-items: center;
+  display: inline-flex;
   text-decoration: none;
+  gap: var(--spacing-3xs);
+  padding: var(--tag-padding);
+  border-radius: var(--tag-border-radius);
   transition:
     box-shadow var(--transition-default),
     background-color var(--transition-default),
@@ -19,6 +19,7 @@
       text-transform: var(--typography-text-3xs-text_transform, none);
 
       --tag-padding: 0 4px;
+      --tag-border-radius: var(--border-radius-s);
     }
 .Tag_size_xs {
       font: var(--typography-text-xs-font);
@@ -26,6 +27,7 @@
       text-transform: var(--typography-text-xs-text_transform, none);
 
       --tag-padding: 4px 8px;
+      --tag-border-radius: var(--border-radius-s);
     }
 .Tag_size_s {
       font: var(--typography-text-s-font);
@@ -33,6 +35,7 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --tag-padding: 6px 12px;
+      --tag-border-radius: var(--border-radius-m);
     }
 .Tag_variant_neutral {
       background-color: var(--color-background-secondary);

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -115,7 +115,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/cjs/locale/locale.js

@@ -4,6 +4,9 @@ exports.enUS = exports.kkKZ = exports.ruRU = void 0;
 var constants_1 = require("../components/Pagination/constants");
 exports.ruRU = {
     defaultProps: {
+        Alert: {
+            closeText: 'Закрыть',
+        },
         Autocomplete: {
             noOptionsText: 'Ничего не найдено',
             closeText: 'Закрыть',
@@ -55,6 +58,9 @@ exports.ruRU = {
 };
 exports.kkKZ = {
     defaultProps: {
+        Alert: {
+            closeText: 'Жабу',
+        },
         Autocomplete: {
             noOptionsText: 'Ештеңе табылған жоқ',
             closeText: 'Жабу',
@@ -106,6 +112,9 @@ exports.kkKZ = {
 };
 exports.enUS = {
     defaultProps: {
+        Alert: {
+            closeText: 'Close',
+        },
         Autocomplete: {
             noOptionsText: 'No options',
             closeText: 'Close',

package/__inner__/cjs/utils/getPaperSizeToFormElement.d.ts

@@ -0,0 +1,3 @@
+import type { PaperProps } from '../components/Paper';
+import type { FormElementSizeVariant } from '../types/FormElementSizeVariant';
+export declare const getPaperSizeToFormElement: (size: FormElementSizeVariant) => PaperProps['radius'];

package/__inner__/cjs/utils/getPaperSizeToFormElement.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaperSizeToFormElement = void 0;
+var matchPaperSizeToFormElement = {
+    '2xs': 's',
+    xs: 's',
+    s: 'l',
+    m: 'l',
+    l: 'l',
+};
+var getPaperSizeToFormElement = function (size) { return matchPaperSizeToFormElement === null || matchPaperSizeToFormElement === void 0 ? void 0 : matchPaperSizeToFormElement[size]; };
+exports.getPaperSizeToFormElement = getPaperSizeToFormElement;

package/__inner__/esm/components/Accordion/Accordion.css

@@ -76,7 +76,7 @@
       --accordion-background-color: var(--color-background-main);
       --accordion-summary-hover-color: none;
       --accordion-summary-active-color: none;
-      --accordion-border-radius: var(--border-radius-l);
+      --accordion-border-radius: var(--border-radius-xl);
     }
 .AccordionSummary {
   inline-size: 100%;

package/__inner__/esm/components/Alert/Alert.css

@@ -1,15 +1,20 @@
 /* stylelint-disable */
 .Alert {
-  position: relative;
+  --alert-status-line-width: 8px;
+  --alert-status-line-gutter: var(--control-padding-xs);
   display: flex;
-  -moz-column-gap: var(--spacing-2xs);
-       column-gap: var(--spacing-2xs);
-  align-items: flex-start;
-  inline-size: 100%;
   overflow: auto;
+  inline-size: 100%;
+  position: relative;
   box-sizing: border-box;
-  border-inline-start: 4px solid var(--alert-border-color);
-  padding: 16px;
+  align-items: flex-start;
+  -moz-column-gap: var(--spacing-2xs);
+       column-gap: var(--spacing-2xs);
+  padding: var(--control-padding-s);
+  padding-inline-start: calc(
+    var(--control-padding-s) + var(--alert-status-line-width) +
+      var(--alert-status-line-gutter)
+  );
 
   font: var(--typography-text-xs-font);
 
@@ -21,36 +26,36 @@
       --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-close-button-color: var(--color-content-primary);
     }
 .Alert_color_dark {
       --alert-title-text-color: var(--color-content-primary-inverse);
-      --alert-body-text-color: var(--color-content-tertiary);
+      --alert-body-text-color: var(--color-content-primary-inverse);
       --alert-icon-color: var(--color-content-primary-inverse);
-      --alert-close-button-color: var(--color-background-main);
+      --alert-close-button-color: var(--color-content-action-on);
     }
 .Alert_status_info {
       --alert-icon-color: var(--color-content-info);
-      --alert-border-color: var(--color-background-info);
+      --alert-status-line-color: var(--color-background-info);
     }
 .Alert_status_warning {
       --alert-icon-color: var(--color-content-warning);
-      --alert-border-color: var(--color-background-warning);
+      --alert-status-line-color: var(--color-background-warning);
     }
 .Alert_status_success {
       --alert-icon-color: var(--color-content-success);
-      --alert-border-color: var(--color-background-success);
+      --alert-status-line-color: var(--color-background-success);
     }
 .Alert_status_error {
       --alert-icon-color: var(--color-content-error);
-      --alert-border-color: var(--color-background-error);
+      --alert-status-line-color: var(--color-background-error);
     }
 .Alert_hasCloseButton {
-    padding-inline-end: 48px;
+    padding-inline-end: 40px;
   }
 .Alert-Icon {
-    padding-block-start: 2px;
     display: flex;
+    padding-block-start: 2px;
     color: var(--alert-icon-color);
   }
 .Alert-Title {
@@ -65,15 +70,29 @@
     text-transform: var(--typography-text-s_1-text_transform, none);
   }
 .Alert-Body {
-    margin-block-start: var(--spacing-3xs);
     color: var(--alert-body-text-color);
+    margin-block-start: var(--spacing-3xs);
   }
 .Alert-Action {
     margin-block-start: var(--spacing-2xs);
   }
-.IconButton.Alert-CloseButton {
-  color: var(--alert-close-button-color);
+.Alert::after {
+  content: '';
+  inset: 0;
+  position: absolute;
+  margin: var(--alert-status-line-gutter);
+  margin-inline-end: 0;
+  border-radius: var(--border-radius-s);
+  inline-size: var(--alert-status-line-width);
+  background-color: var(--alert-status-line-color);
+}
+.ButtonBase.IconButtonNext.Alert-CloseButton {
+  --icon-button-font-color: var(--alert-close-button-color);
+  --icon-button-font-color-hover: var(--alert-close-button-color);
+  --icon-button-font-color-active: var(--alert-close-button-color);
+  --icon-button-font-color-focus: var(--alert-close-button-color);
   position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 16px;
+  margin: var(--spacing-xs);
+  inset-inline-end: 0;
+  inset-block-start: 0;
 }

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

@@ -1,7 +1,7 @@
 import './Alert.css';
 import React from 'react';
 import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
-import type { ButtonProps } from '../Button';
+import type { ButtonProps } from '../ButtonNext';
 export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
 export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
 export declare const alertColorVariant: readonly ["light", "dark"];
@@ -35,6 +35,8 @@ type AlertBaseProps = {
     action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
     /** Дополнительные CSS-классы */
     className?: string;
+    /** Текст для кнопки закрытия компонента */
+    closeText?: string;
 };
 export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Alert/Alert.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { CrossIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, WarningTriangleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { IconButton } from '../IconButton';
+import { IconButton } from '../IconButtonNext';
 import { Paper } from '../Paper';
 import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_COLOR, } from './constants';
 export var cnAlert = cn('Alert');
@@ -27,7 +27,7 @@ export var Alert = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Alert',
     });
-    var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.color, color = _c === void 0 ? ALERT_DEFAULT_COLOR : _c, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, otherProps = __rest(props, ["status", "showIcon", "color", "children", "action", "onClose", "title", "className"]);
+    var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.color, color = _c === void 0 ? ALERT_DEFAULT_COLOR : _c, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "color", "closeText", "children", "action", "onClose", "title", "className"]);
     var action = useMemo(function () {
         var actionProps = {
             size: '2xs',
@@ -41,14 +41,14 @@ export var Alert = forwardRef(function (inProps, ref) {
         }
         return React.cloneElement(actionProp, actionProps);
     }, [actionProp]);
-    return (React.createElement(Paper, __assign({ role: "alert", radius: "xs", shadow: "m", background: color === 'light' ? 'main' : 'main-inverse', className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
+    return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: color === 'light' ? 'main' : 'main-inverse' }, other, { className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
             className,
-        ]) }, otherProps, { ref: ref }),
+        ]), ref: ref }),
         showIcon && (React.createElement("div", { className: cnAlert('Icon') }, matchStatusToIcon[status])),
         React.createElement("div", { className: cnAlert('Content') },
             React.createElement("div", { className: cnAlert('Title') }, title),
             children && React.createElement("div", { className: cnAlert('Body') }, children),
             action && React.createElement("div", { className: cnAlert('Action') }, action)),
-        onClose && (React.createElement(IconButton, { size: "s", variant: "function", icon: CrossIcon, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", onClick: onClose, className: cnAlert('CloseButton') }))));
+        onClose && (React.createElement(IconButton, { size: "2xs", color: "secondary", icon: CrossIcon, onClick: onClose, variant: "function", "aria-label": closeText, className: cnAlert('CloseButton') }))));
 });
 Alert.displayName = 'Alert';

package/__inner__/esm/components/Autocomplete/components/AutocompleteRenderRight/AutocompleteRenderRight.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@ozen-ui/icons';
 import { useFieldControl } from '../../../FieldControl';
 import { FieldIcon } from '../../../FieldIcon';
-import { IconButton } from '../../../IconButton';
+import { IconButton } from '../../../IconButtonNext';
 import { cnAutocomplete } from '../../index';
 export var AutocompleteRenderRight = function (_a) {
     var disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron, renderRight = _a.renderRight, clearText = _a.clearText, closeText = _a.closeText, openText = _a.openText, disabled = _a.disabled, hasValue = _a.hasValue, onClear = _a.onClear, onOpen = _a.onOpen, open = _a.open, size = _a.size;

package/__inner__/esm/components/Breadcrumbs/components/BreadcrumbItem.d.ts

@@ -1,6 +1,6 @@
 import type { ElementType } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../../utils/polymorphicComponentWithRef';
-import type { ButtonProps } from '../../Button';
+import type { ButtonProps } from '../../ButtonNext';
 import { BREADCRUMB_ITEM_DEFAULT_TAG } from '../constants';
 export declare const cnBreadcrumbItem: import("@bem-react/classname").ClassNameFormatter;
 type BreadcrumbItemBaseProps = Pick<ButtonProps, 'disabled' | 'iconLeft' | 'iconRight'>;

package/__inner__/esm/components/Button/Button.css

@@ -13,7 +13,7 @@
   min-inline-size: var(--button-min-width);
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--button-border-radius);
   transition:
     background-color var(--transition-default),
     border-color var(--transition-default),
@@ -28,6 +28,7 @@
 .Button_size_2xs {
       --button-height: var(--control-height-2xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 56px;
 
       font: var(--typography-text-2xs-font);
@@ -39,6 +40,7 @@
 .Button_size_xs {
       --button-height: var(--control-height-xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 64px;
 
       font: var(--typography-text-xs-font);
@@ -50,6 +52,7 @@
 .Button_size_s {
       --button-height: var(--control-height-s);
       --button-padding-x: var(--control-padding-s);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 72px;
 
       font: var(--typography-text-s-font);
@@ -61,6 +64,7 @@
 .Button_size_m {
       --button-height: var(--control-height-m);
       --button-padding-x: var(--control-padding-m);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 80px;
 
       font: var(--typography-text-m-font);
@@ -72,6 +76,7 @@
 .Button_size_l {
       --button-height: var(--control-height-l);
       --button-padding-x: var(--control-padding-l);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 88px;
 
       font: var(--typography-text-l-font);
@@ -166,6 +171,7 @@
     --button-height: auto;
     --button-min-width: auto;
     --button-padding-x: 0;
+    --button-border-radius: var(--border-radius-xs);
   }
 .Button_variant_function:hover {
       opacity: 0.8;

package/__inner__/esm/components/ButtonNext/Button.css

@@ -13,7 +13,7 @@
   min-inline-size: var(--button-min-width);
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--button-border-radius);
   transition:
     background-color var(--transition-default),
     border-color var(--transition-default),
@@ -28,6 +28,7 @@
 .ButtonNext_size_2xs {
       --button-height: var(--control-height-2xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 56px;
 
       font: var(--typography-text-2xs-font);
@@ -39,6 +40,7 @@
 .ButtonNext_size_xs {
       --button-height: var(--control-height-xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 64px;
 
       font: var(--typography-text-xs-font);
@@ -50,6 +52,7 @@
 .ButtonNext_size_s {
       --button-height: var(--control-height-s);
       --button-padding-x: var(--control-padding-s);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 72px;
 
       font: var(--typography-text-s-font);
@@ -61,6 +64,7 @@
 .ButtonNext_size_m {
       --button-height: var(--control-height-m);
       --button-padding-x: var(--control-padding-m);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 80px;
 
       font: var(--typography-text-m-font);
@@ -72,6 +76,7 @@
 .ButtonNext_size_l {
       --button-height: var(--control-height-l);
       --button-padding-x: var(--control-padding-l);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 88px;
 
       font: var(--typography-text-l-font);
@@ -208,6 +213,7 @@
     --button-height: auto;
     --button-min-width: auto;
     --button-padding-x: 0;
+    --button-border-radius: var(--border-radius-xs);
   }
 .ButtonNext_variant_function.ButtonNext_color_primary,
   .ButtonNext_variant_function.ButtonNext_color_secondary,

package/__inner__/esm/components/DataList/DataList.js

@@ -8,6 +8,7 @@ import { useMultiRef } from '../../hooks/useMultiRef';
 import { usePrevious } from '../../hooks/usePrevious';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
 import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
@@ -21,6 +22,7 @@ var DataListRender = function (inProps, ref) {
     var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = useRef(null);
     var listRef = useRef(null);
+    var radius = getPaperSizeToFormElement(size);
     var _e = __read(useControlled({
         name: 'DataList',
         defaultValue: defaultSelected,
@@ -143,7 +145,7 @@ var DataListRender = function (inProps, ref) {
             return cloneElement(elementChild, props);
         });
     }, [resolvedChildren, selectedState, focused, onClick]);
-    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
+    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, radius: radius, className: cnDataList('', [className]), transitionProps: {
             classNames: 'DataList-animation',
         } }, other, { ref: useMultiRef([ref, dataListRef]) }),
         React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));

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

@@ -113,7 +113,7 @@
 .Dialog_hasCloseButton {
     --dialog-header-item-padding-right: 24px;
   }
-.IconButton.Dialog-CloseButton {
+.IconButtonNext.Dialog-CloseButton {
   position: absolute;
   inset-block-start: 8px;
   inset-inline-end: 8px;

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

@@ -1,6 +1,6 @@
 import './Dialog.css';
 import React from 'react';
-import { type IconButtonProps } from '../IconButton';
+import { type IconButtonProps } from '../IconButtonNext';
 import { type ModalProps } from '../Modal';
 export declare const cnDialog: import("@bem-react/classname").ClassNameFormatter;
 export declare const dialogSizeVariant: readonly ["s", "l"];

package/__inner__/esm/components/Dialog/Dialog.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 { DIALOG_DEFAULT_HIDE_CLOSE_BUTTON, DIALOG_DEFAULT_SIZE, DIALOG_DEFAULT_VARIANT, } from './constants';
 export var cnDialog = cn('Dialog');
@@ -21,7 +21,7 @@ export var Dialog = forwardRef(function (inProps, ref) {
     });
     var _a = props.variant, variant = _a === void 0 ? DIALOG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DIALOG_DEFAULT_SIZE : _b, _c = props.hideCloseButton, hideCloseButton = _c === void 0 ? DIALOG_DEFAULT_HIDE_CLOSE_BUTTON : _c, open = props.open, onClose = props.onClose, children = props.children, className = props.className, windowProps = props.windowProps, closeButtonProps = props.closeButtonProps, transitionProps = props.transitionProps, other = __rest(props, ["variant", "size", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "closeButtonProps", "transitionProps"]);
     var _d = closeButtonProps || {}, closeButtonClassName = _d.className, closeButtonRestProps = __rest(_d, ["className"]);
-    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ role: 'dialog' }, windowProps), className: cnDialog({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign(__assign({}, (variant === 'fullsize' && {
+    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ role: 'dialog', radius: size === 's' ? 'l' : 'xl' }, windowProps), className: cnDialog({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign(__assign({}, (variant === 'fullsize' && {
             classNames: cnDialog({ animation: 'fullsize' }),
         })), transitionProps), ref: ref }),
         !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: cnDialog('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CrossIcon, compressed: true }))),

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)));
 });