@ozen-ui/kit 0.42.0 → 0.44.0

package/Calendar/package.json

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

package/DatePicker/package.json

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

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

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

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

@@ -6,21 +6,21 @@ var react_1 = tslib_1.__importDefault(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var FieldControl_1 = require("../../../FieldControl");
 var FieldIcon_1 = require("../../../FieldIcon");
-var IconButton_1 = require("../../../IconButton");
+var IconButtonNext_1 = require("../../../IconButtonNext");
 var index_1 = require("../../index");
 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;
     var _b = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
     return (react_1.default.createElement("div", { className: (0, index_1.cnAutocomplete)('RenderRight') },
-        !disableClearButton && (react_1.default.createElement(IconButton_1.IconButton, { type: "button", variant: "function", tabIndex: -1, onClick: function (e) {
+        !disableClearButton && (react_1.default.createElement(IconButtonNext_1.IconButton, { type: "button", variant: "function", tabIndex: -1, onClick: function (e) {
                 e.preventDefault();
                 onClear === null || onClear === void 0 ? void 0 : onClear(e);
             }, className: (0, index_1.cnAutocomplete)('ClearButton', {
                 visibility: isVisibleClearButton,
             }), title: clearText, "aria-label": clearText, size: size, icon: icons_1.CrossIcon, compressed: true })),
         react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
-        !disableShowChevron && (react_1.default.createElement(IconButton_1.IconButton, { type: "button", variant: "ghost", tabIndex: -1, onClick: function (e) {
+        !disableShowChevron && (react_1.default.createElement(IconButtonNext_1.IconButton, { type: "button", variant: "ghost", tabIndex: -1, onClick: function (e) {
                 e.preventDefault();
                 onOpen();
             }, disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, size: size, icon: open ? icons_1.ChevronUpIcon : icons_1.ChevronDownIcon, compressed: true }))));

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

@@ -31,6 +31,7 @@ export type CardBaseProps = {
     children: ReactNode;
     /** Дополнительные СSS-классы */
     className?: string;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };
 export type CardProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<CardBaseProps, As>;

package/__inner__/cjs/components/Card/Card.js

@@ -15,9 +15,9 @@ exports.cardBorderVariant = ['solid', 'dashed'];
 exports.cardBorderColorVariant = ['standard', 'selected'];
 exports.cardBackgroundColorVariant = ['standard', 'selected'];
 var matchBorderRadiusPaperToCard = {
-    s: 'xs',
-    m: 's',
-    l: 'l',
+    s: 'l',
+    m: 'xl',
+    l: '2xl',
 };
 var matchBackgroundColorPaperToCard = {
     selected: 'action-light',

package/__inner__/cjs/components/DataList/DataList.js

@@ -11,6 +11,7 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
 var usePrevious_1 = require("../../hooks/usePrevious");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
+var getPaperSizeToFormElement_1 = require("../../utils/getPaperSizeToFormElement");
 var isKey_1 = require("../../utils/isKey");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var scrollContainerToElement_1 = require("../../utils/scrollContainerToElement");
@@ -24,6 +25,7 @@ var DataListRender = function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.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 = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = (0, react_1.useRef)(null);
     var listRef = (0, react_1.useRef)(null);
+    var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
     var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         name: 'DataList',
         defaultValue: defaultSelected,
@@ -146,7 +148,7 @@ var DataListRender = function (inProps, ref) {
             return (0, react_1.cloneElement)(elementChild, props);
         });
     }, [resolvedChildren, selectedState, focused, onClick]);
-    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, radius: radius, className: (0, exports.cnDataList)('', [className]), transitionProps: {
             classNames: 'DataList-animation',
         } }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
         react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));

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

@@ -7,7 +7,7 @@ var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
-var IconButton_1 = require("../IconButton");
+var IconButtonNext_1 = require("../IconButtonNext");
 var Modal_1 = require("../Modal");
 var constants_1 = require("./constants");
 exports.cnDialog = (0, classname_1.cn)('Dialog');
@@ -24,10 +24,10 @@ exports.Dialog = (0, react_1.forwardRef)(function (inProps, ref) {
     });
     var _a = props.variant, variant = _a === void 0 ? constants_1.DIALOG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? constants_1.DIALOG_DEFAULT_SIZE : _b, _c = props.hideCloseButton, hideCloseButton = _c === void 0 ? constants_1.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 = tslib_1.__rest(props, ["variant", "size", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "closeButtonProps", "transitionProps"]);
     var _d = closeButtonProps || {}, closeButtonClassName = _d.className, closeButtonRestProps = tslib_1.__rest(_d, ["className"]);
-    return (react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, windowProps: tslib_1.__assign({ role: 'dialog' }, windowProps), className: (0, exports.cnDialog)({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign(tslib_1.__assign({}, (variant === 'fullsize' && {
+    return (react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, windowProps: tslib_1.__assign({ role: 'dialog', radius: size === 's' ? 'l' : 'xl' }, windowProps), className: (0, exports.cnDialog)({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign(tslib_1.__assign({}, (variant === 'fullsize' && {
             classNames: (0, exports.cnDialog)({ animation: 'fullsize' }),
         })), transitionProps), ref: ref }),
-        !hideCloseButton && (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: (0, exports.cnDialog)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CrossIcon, compressed: true }))),
+        !hideCloseButton && (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: (0, exports.cnDialog)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CrossIcon, compressed: true }))),
         react_1.default.createElement("div", { className: (0, exports.cnDialog)('InnerContainer') }, children)));
 });
 exports.Dialog.displayName = 'Dialog';

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

@@ -7,7 +7,7 @@ var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
-var IconButton_1 = require("../IconButton");
+var IconButtonNext_1 = require("../IconButtonNext");
 var Modal_1 = require("../Modal");
 var constants_1 = require("./constants");
 exports.cnDrawer = (0, classname_1.cn)('Drawer');
@@ -23,10 +23,10 @@ exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Drawer',
     });
-    var _a = props.variant, variant = _a === void 0 ? constants_1.DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? constants_1.DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? constants_1.DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? constants_1.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 = tslib_1.__rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
+    var _a = props.variant, variant = _a === void 0 ? constants_1.DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? constants_1.DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? constants_1.DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? constants_1.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 = tslib_1.__rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "transitionProps", "closeButtonProps"]);
     var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = tslib_1.__rest(_e, ["className"]);
-    return (react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, className: (0, exports.cnDrawer)({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign({ classNames: (0, exports.cnDrawer)({ animation: true }) }, transitionProps), ref: ref }),
-        !hideCloseButton && (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: (0, exports.cnDrawer)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CrossIcon, compressed: true }))),
+    return (react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, windowProps: tslib_1.__assign({ radius: size === 's' ? 'l' : 'xl' }, windowProps), className: (0, exports.cnDrawer)({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign({ classNames: (0, exports.cnDrawer)({ animation: true }) }, transitionProps), ref: ref }),
+        !hideCloseButton && (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: (0, exports.cnDrawer)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CrossIcon, compressed: true }))),
         react_1.default.createElement("div", { className: (0, exports.cnDrawer)('InnerContainer') }, children)));
 });
 exports.Drawer.displayName = 'Drawer';

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