@ozen-ui/kit 0.41.0 → 0.43.0

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/Pagination.css

@@ -2,12 +2,12 @@
   display: block;
 }
 
-.Pagination-List {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 2px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+  .Pagination-List {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    align-items: center;
+    gap: var(--spacing-4xs);
+  }

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

@@ -1,4 +1,4 @@
-import React from 'react';
 import './Pagination.css';
+import type { PaginationBaseProps } from './types';
 export declare const cnPagination: import("@bem-react/classname").ClassNameFormatter;
-export declare const Pagination: React.ForwardRefExoticComponent<import("./types").PaginationBaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Pagination: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PaginationBaseProps, "nav">;

package/__inner__/esm/components/Pagination/Pagination.js

@@ -1,33 +1,34 @@
 import { __assign, __rest } from "tslib";
-import React, { useMemo, forwardRef } from 'react';
+import './Pagination.css';
+import React, { useMemo } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isNumber } from '../../utils/isNumber';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { PaginationItem, cnPaginationItem, } from './components';
-import { PAGINATION_DEFAULT_PAGE, PAGINATION_DEFAULT_SIBLING_COUNT, PAGINATION_DEFAULT_SIZE, ELLIPSIS, NEXT, PAGE, PREVIOUS, } from './constants';
+import { PAGINATION_DEFAULT_TAG, PAGINATION_DEFAULT_PAGE, PAGINATION_DEFAULT_SIBLING_COUNT, PAGINATION_DEFAULT_SIZE, ELLIPSIS, NEXT, PAGE, PREVIOUS, } from './constants';
 import { createPaginationRange } from './helpers/createPaginationRange';
 import { getItemAriaLabel as createAriaLabel } from './helpers/getItemAriaLabel';
 import { withNavigationButton } from './helpers/withNavigationButtons/withNavigationButtons';
-import './Pagination.css';
 export var cnPagination = cn('Pagination');
-export var Pagination = forwardRef(function (inProps, ref) {
+export var Pagination = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Pagination' });
-    var _a = props.page, page = _a === void 0 ? PAGINATION_DEFAULT_PAGE : _a, _b = props.size, size = _b === void 0 ? PAGINATION_DEFAULT_SIZE : _b, _c = props.siblingCount, siblingCount = _c === void 0 ? PAGINATION_DEFAULT_SIBLING_COUNT : _c, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, onPageChange = props.onPageChange, _d = props.getItemAriaLabel, getItemAriaLabel = _d === void 0 ? createAriaLabel : _d, 
+    var _a = props.as, Tag = _a === void 0 ? PAGINATION_DEFAULT_TAG : _a, _b = props.page, page = _b === void 0 ? PAGINATION_DEFAULT_PAGE : _b, _c = props.size, size = _c === void 0 ? PAGINATION_DEFAULT_SIZE : _c, _d = props.siblingCount, siblingCount = _d === void 0 ? PAGINATION_DEFAULT_SIBLING_COUNT : _d, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, disabledProp = props.disabled, onPageChange = props.onPageChange, _e = props.getItemAriaLabel, getItemAriaLabel = _e === void 0 ? createAriaLabel : _e, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _e = props.renderComponent, 
+    _f = props.renderComponent, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    renderComponent = _e === void 0 ? function (_a) {
+    renderComponent = _f === void 0 ? function (_a) {
         var className = _a.className, rest = __rest(_a, ["className"]);
         return (React.createElement(PaginationItem, __assign({}, rest)));
-    } : _e, otherProps = __rest(props, ["page", "size", "siblingCount", "pageSize", "totalCount", "className", "onPageChange", "getItemAriaLabel", "renderComponent"]);
-    var _f = useMemo(function () {
+    } : _f, otherProps = __rest(props, ["as", "page", "size", "siblingCount", "pageSize", "totalCount", "className", "disabled", "onPageChange", "getItemAriaLabel", "renderComponent"]);
+    var _g = useMemo(function () {
         var selected = page + 1;
         return {
             selected: selected,
             previous: selected - 1,
             next: selected + 1,
         };
-    }, [page]), selected = _f.selected, previous = _f.previous, next = _f.next;
+    }, [page]), selected = _g.selected, previous = _g.previous, next = _g.next;
     var range = useMemo(function () {
         return createPaginationRange({
             page: selected,
@@ -60,7 +61,7 @@ export var Pagination = forwardRef(function (inProps, ref) {
                 size: size,
                 selected: isSelected,
                 page: mapper[type],
-                disabled: mapperDisabled[type],
+                disabled: disabledProp || mapperDisabled[type],
                 'aria-label': getItemAriaLabel({
                     page: mapper[type],
                     selected: isSelected,
@@ -70,8 +71,17 @@ export var Pagination = forwardRef(function (inProps, ref) {
                 className: cnPaginationItem({ size: size, selected: isSelected }),
             };
         });
-    }, [range, selected, previous, next, size, getItemAriaLabel, onPageChange]);
-    return (React.createElement("nav", __assign({ "aria-label": "\u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C", className: cnPagination({}, [className]), ref: ref }, otherProps),
+    }, [
+        range,
+        selected,
+        disabledProp,
+        previous,
+        next,
+        size,
+        getItemAriaLabel,
+        onPageChange,
+    ]);
+    return (React.createElement(Tag, __assign({ className: cnPagination({}, [className]), ref: ref }, otherProps),
         React.createElement("ul", { className: cnPagination('List') }, paginationPropsRange.map(function (item, index) { return (React.createElement("li", { key: item.type === ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
 });
 Pagination.displayName = 'Pagination';

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

@@ -1,37 +1,36 @@
 /* stylelint-disable */
 .PaginationItem {
   --pagination-item-background: transparent;
-  --pagination-item-border-width: var(--border-width-s);
+  outline: none;
   display: flex;
+  cursor: pointer;
+  text-align: center;
   align-items: center;
-  justify-content: center;
+  text-decoration: none;
   box-sizing: border-box;
-  min-inline-size: var(--pagination-item-size);
+  justify-content: center;
+  color: var(--color-content-primary);
   block-size: var(--pagination-item-size);
-  border: var(--pagination-item-border-width) solid transparent;
+  min-inline-size: var(--pagination-item-size);
   border-radius: var(--pagination-item-border-radius);
-  color: var(--color-content-primary);
   background-color: var(--pagination-item-background);
-  cursor: pointer;
-  text-decoration: none;
-  text-align: center;
-  outline: none;
+  border: var(--border-width-s) solid var(--pagination-item-border-color);
 }
 .PaginationItem_size_s {
       font: var(--typography-text-s-font);
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
-      --pagination-item-size: 32px;
-      --pagination-item-border-radius: var(--border-radius-xs);
+      --pagination-item-size: var(--control-height-2xs);
+      --pagination-item-border-radius: var(--border-radius-m);
     }
 .PaginationItem_size_l {
       font: var(--typography-text-l-font);
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --pagination-item-size: 56px;
-      --pagination-item-border-radius: var(--border-radius-s);
+      --pagination-item-size: var(--control-height-m);
+      --pagination-item-border-radius: var(--border-radius-l);
     }
 .PaginationItem:hover:not(.PaginationItem_selected) {
     --pagination-item-background: var(--color-background-primary-hover);
@@ -46,7 +45,14 @@
       box-shadow: none;
     }
 .PaginationItem_selected {
-    border: var(--pagination-item-border-width) solid
-      var(--color-background-action);
+    --pagination-item-border-color: var(--color-border-action);
     cursor: initial;
   }
+.PaginationItem_disabled {
+    cursor: auto;
+    pointer-events: none;
+    color: var(--color-content-disabled);
+  }
+.PaginationItem_disabled.PaginationItem_selected {
+    --pagination-item-border-color: var(--color-border-disabled);
+  }

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

@@ -4,8 +4,9 @@ import React, { forwardRef } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon, MenuHorizontalIcon, } from '@ozen-ui/icons';
 import { cn } from '../../../../utils/classname';
 import { isNumber } from '../../../../utils/isNumber';
-import { IconButton } from '../../../IconButton';
-import { ELLIPSIS, NEXT, PREVIOUS, FIRST, PAGE, LAST } from '../../constants';
+import { ButtonBase } from '../../../ButtonBase';
+import { IconButton } from '../../../IconButtonNext';
+import { NEXT, PAGE, LAST, FIRST, ELLIPSIS, PREVIOUS, PAGINATION_ITEM_DEFAULT_SELECTED, PAGINATION_ITEM_DEFAULT_DISABLED, PAGINATION_ITEM_DEFAULT_SIZE, } from '../../constants';
 import './PaginationItem.css';
 export var paginationVariant = [
     PREVIOUS,
@@ -32,16 +33,16 @@ var iconsMapper = (_a = {},
     _a[ELLIPSIS] = MenuHorizontalIcon,
     _a);
 export var PaginationItem = forwardRef(function (_a, ref) {
-    var type = _a.type, page = _a.page, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, onClick = _a.onClick, className = _a.className, otherProps = __rest(_a, ["type", "page", "selected", "disabled", "size", "onClick", "className"]);
+    var _b = _a.selected, selected = _b === void 0 ? PAGINATION_ITEM_DEFAULT_SELECTED : _b, _c = _a.disabled, disabled = _c === void 0 ? PAGINATION_ITEM_DEFAULT_DISABLED : _c, _d = _a.size, size = _d === void 0 ? PAGINATION_ITEM_DEFAULT_SIZE : _d, type = _a.type, page = _a.page, onClick = _a.onClick, className = _a.className, otherProps = __rest(_a, ["selected", "disabled", "size", "type", "page", "onClick", "className"]);
     var sizeConfig = sizeMapper[size];
     var handleClick = function () {
-        if (onClick && !selected && isNumber(page)) {
-            onClick(page - 1);
+        if (!selected && isNumber(page)) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(page - 1);
         }
     };
     if (type === PREVIOUS || type === NEXT || type === ELLIPSIS) {
-        return (React.createElement(IconButton, __assign({ disabled: disabled, tabIndex: disabled ? -1 : 0, icon: iconsMapper[type], size: sizeConfig.size, onClick: handleClick, ref: ref }, otherProps, { color: "secondary" })));
+        return (React.createElement(IconButton, __assign({ disabled: disabled, icon: iconsMapper[type], size: sizeConfig.size, onClick: handleClick, ref: ref }, otherProps, { color: "secondary" })));
     }
-    return (React.createElement("button", __assign({ className: cnPaginationItem({ size: size, selected: selected }, [className]), tabIndex: selected ? -1 : 0, onClick: handleClick, "aria-current": selected, ref: ref }, otherProps), page));
+    return (React.createElement(ButtonBase, __assign({ disabled: disabled, className: cnPaginationItem({ size: size, selected: selected, disabled: disabled }, [className]), tabIndex: selected ? -1 : 0, onClick: handleClick, "aria-current": selected, ref: ref }, otherProps), page));
 });
 PaginationItem.displayName = 'PaginationItem';

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

@@ -1,6 +1,10 @@
+export declare const PAGINATION_DEFAULT_TAG = "nav";
 export declare const PAGINATION_DEFAULT_SIZE = "s";
 export declare const PAGINATION_DEFAULT_SIBLING_COUNT = 2;
 export declare const PAGINATION_DEFAULT_PAGE = 0;
+export declare const PAGINATION_ITEM_DEFAULT_SIZE = "s";
+export declare const PAGINATION_ITEM_DEFAULT_SELECTED = false;
+export declare const PAGINATION_ITEM_DEFAULT_DISABLED = false;
 export declare const ELLIPSIS = "Ellipsis";
 export declare const PREVIOUS = "Previous";
 export declare const NEXT = "Next";

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

@@ -1,6 +1,10 @@
+export var PAGINATION_DEFAULT_TAG = 'nav';
 export var PAGINATION_DEFAULT_SIZE = 's';
 export var PAGINATION_DEFAULT_SIBLING_COUNT = 2;
 export var PAGINATION_DEFAULT_PAGE = 0;
+export var PAGINATION_ITEM_DEFAULT_SIZE = 's';
+export var PAGINATION_ITEM_DEFAULT_SELECTED = false;
+export var PAGINATION_ITEM_DEFAULT_DISABLED = false;
 export var ELLIPSIS = 'Ellipsis';
 export var PREVIOUS = 'Previous';
 export var NEXT = 'Next';

package/__inner__/esm/components/Pagination/helpers/getItemAriaLabel/getItemAriaLabel.js

@@ -2,16 +2,16 @@ import { NEXT, PAGE, PREVIOUS } from '../../constants';
 export var getItemAriaLabel = function (_a) {
     var page = _a.page, type = _a.type, selected = _a.selected;
     if (type === NEXT) {
-        return 'Перейти на следующую страницу';
+        return 'Next';
     }
     if (type === PREVIOUS) {
-        return 'Перейти на предыдущую страницу';
+        return 'Previous';
     }
     if (selected) {
-        return "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 ".concat(page);
+        return "Selected";
     }
     if (type === PAGE) {
-        return "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 ".concat(page);
+        return "".concat(page);
     }
     return '';
 };

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

@@ -1,6 +1,7 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { PaginationItemProps } from './components';
-import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
+import type { ELLIPSIS, NEXT, PREVIOUS, PAGINATION_DEFAULT_TAG } from './constants';
 import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
 export type EllipsisType = typeof ELLIPSIS;
 export type PreviousType = typeof PREVIOUS;
@@ -26,6 +27,8 @@ export type PaginationBaseProps = {
      * @default 's'
      */
     size?: PaginationSizeVariant;
+    /** Если {true} делает компонент неактивным */
+    disabled?: boolean;
     /** Кастомный класс для пагинации. */
     className?: string;
     /** Коллбэк, вызывается на смену страницы. */
@@ -35,4 +38,4 @@ export type PaginationBaseProps = {
     /** Рендер функция, для отображения кнопок пагинации.  */
     renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
 };
-export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;
+export type PaginationProps<As extends ElementType = typeof PAGINATION_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<PaginationBaseProps, As>;

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

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

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

@@ -2,7 +2,7 @@ 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"];
 export type PaperRadiusVariant = (typeof paperRadiusVariant)[number];
 export declare const paperBackgroundVariant: readonly ["main", "main-inverse", "action-light", "accent"];
 export type PaperBackgroundVariant = (typeof paperBackgroundVariant)[number];

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'];
 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];

package/__inner__/esm/components/Segment/Segment.css

@@ -1,23 +1,26 @@
 /* stylelint-disable */
 .Segment {
-  --segment-border-radius: var(--border-radius-s);
+  --segment-padding: var(--control-padding-3xs);
   background-color: var(--segment-background-color);
   border-radius: var(--segment-border-radius);
-  box-sizing: border-box;
+  block-size: var(--segment-height);
+  padding: var(--segment-padding);
   margin: 0;
   border: none;
   display: flex;
+  white-space: nowrap;
+  box-sizing: border-box;
   inline-size: -moz-fit-content;
   inline-size: fit-content;
-  padding: 2px;
-  gap: 3px;
-  white-space: nowrap;
 }
 .Segment_size_2xs {
       font: var(--typography-text-2xs-font);
       letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
       text-transform: var(--typography-text-2xs-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-l);
+      --segment-item-border-radius: var(--border-radius-m);
+      --segment-height: var(--control-height-2xs);
       --segment-item-padding-vertical: 6px;
       --segment-item-padding-horizontal: 12px;
     }
@@ -26,6 +29,9 @@
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
       text-transform: var(--typography-text-xs-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-l);
+      --segment-item-border-radius: var(--border-radius-m);
+      --segment-height: var(--control-height-xs);
       --segment-item-padding-vertical: 10px;
       --segment-item-padding-horizontal: 12px;
     }
@@ -34,6 +40,9 @@
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-xl);
+      --segment-item-border-radius: var(--border-radius-l);
+      --segment-height: var(--control-height-s);
       --segment-item-padding-vertical: 12px;
       --segment-item-padding-horizontal: 16px;
     }
@@ -42,6 +51,9 @@
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-xl);
+      --segment-item-border-radius: var(--border-radius-l);
+      --segment-height: var(--control-height-m);
       --segment-item-padding-vertical: 14px;
       --segment-item-padding-horizontal: 20px;
     }
@@ -50,6 +62,9 @@
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
+      --segment-border-radius: var(--border-radius-xl);
+      --segment-item-border-radius: var(--border-radius-l);
+      --segment-height: var(--control-height-l);
       --segment-item-padding-vertical: 16px;
       --segment-item-padding-horizontal: 24px;
     }

package/__inner__/esm/components/Segment/components/SegmentItem.css

@@ -1,37 +1,37 @@
 .SegmentItem {
   --segment-item-delimeter-opacity: 1;
   --segment-item-background-color: transparent;
-  --segment-item-border-radius: var(--border-radius-xs);
   --segment-item-text-color: var(--color-content-primary);
   --segment-item-text-color-hover: var(--color-content-secondary);
   --segment-item-gap: var(--spacing-2xs);
   gap: var(--segment-item-gap);
+  color: var(--segment-item-text-color);
   padding: var(--segment-item-padding-vertical)
     var(--segment-item-padding-horizontal);
-  background-color: var(--segment-item-background-color);
   border-radius: var(--segment-item-border-radius);
-  color: var(--segment-item-text-color);
+  background-color: var(--segment-item-background-color);
   transition:
     background-color var(--transition-default),
     color var(--transition-default),
     box-shadow var(--transition-default);
-  display: flex;
-  align-items: center;
-  position: relative;
+  block-size: calc(var(--segment-height) - 2 * var(--segment-padding));
   border: none;
-  cursor: pointer;
   outline: none;
+  display: flex;
+  cursor: pointer;
+  position: relative;
+  align-items: center;
+  box-sizing: border-box;
 }
 
   .SegmentItem::after {
-    opacity: var(--segment-item-delimeter-opacity);
-    background-color: var(--color-background-tertiary);
-    inset: var(--segment-item-padding-vertical) 0;
-    transition: opacity var(--transition-default);
     content: '';
     position: absolute;
-    inline-size: 1px;
-    inset-inline-start: -2px;
+    inline-size: var(--border-width-s);
+    inset: var(--segment-item-padding-vertical) 0;
+    transition: opacity var(--transition-default);
+    opacity: var(--segment-item-delimeter-opacity);
+    background-color: var(--color-background-tertiary);
   }
 
   .SegmentItem_selected {
@@ -64,6 +64,9 @@
   }
 
   .SegmentItem-Radio {
+    inset: 0;
+    margin: 0;
+    padding: 0;
     opacity: 0;
     position: absolute;
     pointer-events: none;
@@ -78,7 +81,7 @@
     }
 
   .SegmentItem-Box {
-    position: absolute;
     inset: 0;
+    position: absolute;
     border-radius: var(--segment-item-border-radius);
   }

package/__inner__/esm/components/Select/Select.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Select.css';
-import React, { useRef, useEffect, forwardRef, isValidElement, Children, } from 'react';
+import React, { Children, forwardRef, isValidElement, useEffect, useRef, } from 'react';
 import { isFragment } from 'react-is';
 import { useControlled } from '../../hooks/useControlled';
 import { useMultiRef } from '../../hooks/useMultiRef';
@@ -17,7 +17,7 @@ var SelectRender = function (inProps, ref) {
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, id = props.id, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "id", "name", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
+    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, id = props.id, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, hintProps = props.hintProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "id", "name", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "hintProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
     var bodyInnerRef = useRef(null);
     /** @deprecated props */
     var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
@@ -159,7 +159,7 @@ var SelectRender = function (inProps, ref) {
         }
     }, [autoFocus]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SelectInput, __assign({ id: id, name: name, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, renderRight: renderRight }, other, { open: open, value: inputValue() || '', onKeyDown: handleKeyDown, onClick: handleClick, bodyProps: __assign(__assign({}, bodyProps), { ref: useMultiRef([bodyRef, bodyInnerRef]) }), ref: ref, renderedValue: renderValue({
+        React.createElement(SelectInput, __assign({ id: id, name: name, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, renderRight: renderRight }, other, { open: open, value: inputValue() || '', onKeyDown: handleKeyDown, onClick: handleClick, bodyProps: __assign(__assign({}, bodyProps), { ref: useMultiRef([bodyRef, bodyInnerRef]) }), hintProps: hintProps, ref: ref, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
             }) })),