@ozen-ui/kit 0.42.0 → 0.43.0

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

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

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

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

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

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

package/__inner__/cjs/components/InputNumber/InputNumber.css

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

package/__inner__/cjs/components/InputNumber/InputNumber.js

@@ -18,7 +18,7 @@ var FieldIcon_1 = require("../FieldIcon");
 var FieldInput_1 = require("../FieldInput");
 var FieldLabel_1 = require("../FieldLabel");
 var Fieldset_1 = require("../Fieldset");
-var IconButton_1 = require("../IconButton");
+var IconButtonNext_1 = require("../IconButtonNext");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 exports.cnInputNumber = (0, classname_1.cn)('InputNumber');
@@ -137,8 +137,8 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
                 react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, min: min, max: max, step: step, name: name, type: "number", value: valueState, autoFocus: autoFocus, placeholder: placeholder }, inputProps, { onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]), className: (0, exports.cnInputNumber)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
             react_1.default.createElement("span", { className: (0, exports.cnInputNumber)('Controls') },
-                react_1.default.createElement(IconButton_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": incrementButtonText, className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
-                react_1.default.createElement(IconButton_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": decrementButtonText, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
+                react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": incrementButtonText, className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
+                react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": decrementButtonText, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
             react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
         react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });

package/__inner__/cjs/components/List/List.css

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

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

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

package/__inner__/cjs/components/Menu/Menu.js

@@ -4,15 +4,18 @@ exports.Menu = exports.cnMenu = void 0;
 var tslib_1 = require("tslib");
 require("./Menu.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useEventListener_1 = require("../../hooks/useEventListener");
 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 Popover_1 = require("../Popover");
 var components_1 = require("./components");
+var constants_1 = require("./constants");
 exports.cnMenu = (0, classname_1.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 = (0, Popover_1.usePopover)().isTop;
     var docRef = (0, react_1.useRef)(document);
     (0, useEventListener_1.useEventListener)({
@@ -26,12 +29,16 @@ var MenuContextConsumer = function (_a) {
         element: docRef,
         active: isTop,
     });
-    return (react_1.default.createElement(components_1.MenuList, tslib_1.__assign({}, menuListProps, { ref: menuListRef, autoFocus: true }), children));
+    return (react_1.default.createElement(components_1.MenuList, tslib_1.__assign({}, menuListProps, { autoFocus: true }), children));
 };
 exports.Menu = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.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 = tslib_1.__rest(props, ["open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
-    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: [0, 4], className: (0, exports.cnMenu)('', [className]) }, other, { open: open, onClose: onClose, disableEnforceFocus: true, ref: ref }),
-        react_1.default.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: menuListProps }, children)));
+    var _a = props.size, size = _a === void 0 ? constants_1.MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = tslib_1.__rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
+    if (process.env.NODE_ENV !== 'production' && menuListRef) {
+        (0, logger_1.deprecate)('Свойство «menuListRef» устарело. Для замены используйте «menuListProps.ref».');
+    }
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: (0, exports.cnMenu)('', [className]), disableEnforceFocus: true, ref: ref }),
+        react_1.default.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: tslib_1.__assign(tslib_1.__assign({ size: size }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 exports.Menu.displayName = 'Menu';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_DEFAULT_SIZE = void 0;
+exports.MENU_DEFAULT_SIZE = 'm';

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

@@ -7,6 +7,6 @@ var Paper_1 = require("../../Paper");
 var index_1 = require("../index");
 exports.ModalConsumer = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["children", "className"]);
-    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "s", background: "main" }, other, { className: (0, index_1.cnModal)('Window', [className]), tabIndex: -1, ref: ref }), children));
+    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", background: "main" }, other, { className: (0, index_1.cnModal)('Window', [className]), tabIndex: -1, ref: ref }), children));
 });
 exports.ModalConsumer.displayName = 'ModalConsumer';

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

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

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

@@ -8,7 +8,7 @@ var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 exports.PAPER_DEFAULT_TAG = 'div';
-exports.paperRadiusVariant = ['xs', 's', 'l'];
+exports.paperRadiusVariant = ['xs', 's', 'l', 'xl'];
 exports.paperBackgroundVariant = [
     'main',
     'main-inverse',

package/__inner__/cjs/components/Popover/Popover.js

@@ -143,7 +143,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     var portalRef = (0, useMultiRef_1.useMultiRef)([ref, popoverRef, trapRef, setPopperElement]);
     return (react_1.default.createElement(PopoverContext_1.PopoverContext.Provider, { value: { isTop: isTop } },
         react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnPopover)({ animation: true }), timeout: 120 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: true }),
-            react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({ as: as, radius: "xs", shadow: "l", background: "main" }, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), styles.popper), ref: portalRef, className: (0, exports.cnPopover)({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
+            react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({ as: as, radius: "l", shadow: "l", background: "main" }, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), styles.popper), ref: portalRef, className: (0, exports.cnPopover)({ disableInteractive: disableInteractive }, [className]) }, attributes.popper),
                 children,
                 arrow && (react_1.default.createElement(components_1.PopoverArrow, tslib_1.__assign({}, arrowProps, { style: tslib_1.__assign(tslib_1.__assign({}, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style), styles.arrow), "data-popper-arrow": true })))))));
 });

package/__inner__/cjs/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__/cjs/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__/cjs/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__/cjs/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__/cjs/components/Tabs/components/ScrollButton/ScrollButton.css

@@ -1,53 +1,17 @@
-.ScrollButton {
-    position: absolute;
-    display: inline-flex;
-    align-items: center;
-    padding: 12px;
-    box-sizing: border-box;
-    z-index: 2;
-    border: none;
-    cursor: pointer;
-    color: var(--color-content-primary);
-    box-shadow: var(--shadow-m);
-    border-radius: 4px; 
-    background-color: var(--color-background-main);
-    transition: opacity var(--transition-default), box-shadow var(--transition-default);
+.IconButtonNext.ScrollButton {
+  position: absolute;
+  z-index: calc(var(--z-index-absolute) + 1);
 }
 
-    .ScrollButton_direction_left {
-        inset-inline-start: 0;
-    }
+  .IconButtonNext.ScrollButton_direction_left {
+    inset-inline-start: 0;
+  }
 
-    .ScrollButton_direction_right {
-        inset-inline-end: 0;
-    }
+  .IconButtonNext.ScrollButton_direction_right {
+    inset-inline-end: 0;
+  }
 
-    .ScrollButton_size_m, .ScrollButton_size_l {
-            padding: 12px;
-        }
-
-    .ScrollButton_size_s, .ScrollButton_size_xs {
-            padding: 8px;
-        }
-
-    .ScrollButton:focus {
-        outline: 0;
-        box-shadow: var(--shadow-outline-focused);
-    }
-
-    .ScrollButton:focus:not(:focus-visible) {
-        box-shadow: var(--shadow-m);
-    }
-
-    .ScrollButton:hover {
-        box-shadow: var(--shadow-l);
-    }
-
-    .ScrollButton:active {
-        box-shadow: var(--shadow-s);
-    }
-
-    .ScrollButton_invisible {
-        pointer-events: none;
-        opacity: 0;
-    }
+  .IconButtonNext.ScrollButton_invisible {
+    pointer-events: none;
+    opacity: 0;
+  }

package/__inner__/cjs/components/Tabs/components/ScrollButton/ScrollButton.d.ts

@@ -1,11 +1,11 @@
 import './ScrollButton.css';
 import React from 'react';
-import type { Ref, ButtonHTMLAttributes } from 'react';
+import type { Ref } from 'react';
+import type { IconButtonProps } from '../../../IconButtonNext';
 import type { TabsSizeVariant } from '../../types';
 export declare const scrollButtonDirectionVariant: readonly ["left", "right"];
 export type ScrollButtonDirectionVariant = (typeof scrollButtonDirectionVariant)[number];
-type ButtonElProps = ButtonHTMLAttributes<HTMLButtonElement>;
-interface ScrollButtonProps extends ButtonElProps {
+interface ScrollButtonProps extends Partial<IconButtonProps> {
     direction: ScrollButtonDirectionVariant;
     invisible: boolean;
     children?: never;