@ozen-ui/kit 0.41.0 → 0.43.0

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

@@ -7,7 +7,8 @@ var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var classname_1 = require("../../../../utils/classname");
 var isNumber_1 = require("../../../../utils/isNumber");
-var IconButton_1 = require("../../../IconButton");
+var ButtonBase_1 = require("../../../ButtonBase");
+var IconButtonNext_1 = require("../../../IconButtonNext");
 var constants_1 = require("../../constants");
 require("./PaginationItem.css");
 exports.paginationVariant = [
@@ -35,16 +36,16 @@ var iconsMapper = (_a = {},
     _a[constants_1.ELLIPSIS] = icons_1.MenuHorizontalIcon,
     _a);
 exports.PaginationItem = (0, react_1.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 = tslib_1.__rest(_a, ["type", "page", "selected", "disabled", "size", "onClick", "className"]);
+    var _b = _a.selected, selected = _b === void 0 ? constants_1.PAGINATION_ITEM_DEFAULT_SELECTED : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.PAGINATION_ITEM_DEFAULT_DISABLED : _c, _d = _a.size, size = _d === void 0 ? constants_1.PAGINATION_ITEM_DEFAULT_SIZE : _d, type = _a.type, page = _a.page, onClick = _a.onClick, className = _a.className, otherProps = tslib_1.__rest(_a, ["selected", "disabled", "size", "type", "page", "onClick", "className"]);
     var sizeConfig = sizeMapper[size];
     var handleClick = function () {
-        if (onClick && !selected && (0, isNumber_1.isNumber)(page)) {
-            onClick(page - 1);
+        if (!selected && (0, isNumber_1.isNumber)(page)) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(page - 1);
         }
     };
     if (type === constants_1.PREVIOUS || type === constants_1.NEXT || type === constants_1.ELLIPSIS) {
-        return (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ disabled: disabled, tabIndex: disabled ? -1 : 0, icon: iconsMapper[type], size: sizeConfig.size, onClick: handleClick, ref: ref }, otherProps, { color: "secondary" })));
+        return (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ disabled: disabled, icon: iconsMapper[type], size: sizeConfig.size, onClick: handleClick, ref: ref }, otherProps, { color: "secondary" })));
     }
-    return (react_1.default.createElement("button", tslib_1.__assign({ className: (0, exports.cnPaginationItem)({ size: size, selected: selected }, [className]), tabIndex: selected ? -1 : 0, onClick: handleClick, "aria-current": selected, ref: ref }, otherProps), page));
+    return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ disabled: disabled, className: (0, exports.cnPaginationItem)({ size: size, selected: selected, disabled: disabled }, [className]), tabIndex: selected ? -1 : 0, onClick: handleClick, "aria-current": selected, ref: ref }, otherProps), page));
 });
 exports.PaginationItem.displayName = 'PaginationItem';

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

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PAGE = exports.LAST = exports.FIRST = exports.NEXT = exports.PREVIOUS = exports.ELLIPSIS = exports.PAGINATION_DEFAULT_PAGE = exports.PAGINATION_DEFAULT_SIBLING_COUNT = exports.PAGINATION_DEFAULT_SIZE = void 0;
+exports.PAGE = exports.LAST = exports.FIRST = exports.NEXT = exports.PREVIOUS = exports.ELLIPSIS = exports.PAGINATION_ITEM_DEFAULT_DISABLED = exports.PAGINATION_ITEM_DEFAULT_SELECTED = exports.PAGINATION_ITEM_DEFAULT_SIZE = exports.PAGINATION_DEFAULT_PAGE = exports.PAGINATION_DEFAULT_SIBLING_COUNT = exports.PAGINATION_DEFAULT_SIZE = exports.PAGINATION_DEFAULT_TAG = void 0;
+exports.PAGINATION_DEFAULT_TAG = 'nav';
 exports.PAGINATION_DEFAULT_SIZE = 's';
 exports.PAGINATION_DEFAULT_SIBLING_COUNT = 2;
 exports.PAGINATION_DEFAULT_PAGE = 0;
+exports.PAGINATION_ITEM_DEFAULT_SIZE = 's';
+exports.PAGINATION_ITEM_DEFAULT_SELECTED = false;
+exports.PAGINATION_ITEM_DEFAULT_DISABLED = false;
 exports.ELLIPSIS = 'Ellipsis';
 exports.PREVIOUS = 'Previous';
 exports.NEXT = 'Next';

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

@@ -5,16 +5,16 @@ var constants_1 = require("../../constants");
 var getItemAriaLabel = function (_a) {
     var page = _a.page, type = _a.type, selected = _a.selected;
     if (type === constants_1.NEXT) {
-        return 'Перейти на следующую страницу';
+        return 'Next';
     }
     if (type === constants_1.PREVIOUS) {
-        return 'Перейти на предыдущую страницу';
+        return 'Previous';
     }
     if (selected) {
-        return "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 ".concat(page);
+        return "Selected";
     }
     if (type === constants_1.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__/cjs/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__/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/Select/Select.js

@@ -20,7 +20,7 @@ var SelectRender = function (inProps, ref) {
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.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 = tslib_1.__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 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.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 = tslib_1.__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 = (0, react_1.useRef)(null);
     /** @deprecated props */
     var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
@@ -162,7 +162,7 @@ var SelectRender = function (inProps, ref) {
         }
     }, [autoFocus]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.SelectInput, tslib_1.__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: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyInnerRef]) }), ref: ref, renderedValue: renderValue({
+        react_1.default.createElement(components_1.SelectInput, tslib_1.__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: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyInnerRef]) }), hintProps: hintProps, ref: ref, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
             }) })),

package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js

@@ -16,7 +16,7 @@ var constants_1 = require("../../constants");
 var index_1 = require("../../index");
 var SelectConsumer_1 = require("../SelectConsumer");
 exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
+    var _b = _a.size, size = _b === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
     var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
     var filled = !!valueProp || valueProp === 0;
     var handleFocus = (0, react_1.useCallback)(function (e) {
@@ -38,6 +38,6 @@ exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight, className: (0, index_1.cnSelect)('RenderRight') }),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })) }),
             react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
-        react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.SelectInput.displayName = 'SelectInput';

package/__inner__/cjs/components/Select/components/SelectInput/types.d.ts

@@ -1,9 +1,11 @@
-import type { Ref, ReactNode, ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { FieldHintProps } from '../../../FieldHint';
 import type { FieldIconProps } from '../../../FieldIcon';
 import type { FieldLabelProps } from '../../../FieldLabel';
 export type SelectInputSizeVariant = FormElementSizeVariant;
 type LabelProps = FieldLabelProps;
+type HintProps = FieldHintProps;
 type InputProps = ComponentPropsWithRef<'input'> & {
     'data-testid'?: string;
 };
@@ -79,6 +81,8 @@ export type SelectInputProps = Omit<ComponentPropsWithRef<'div'>, 'value' | 'def
     labelProps?: LabelProps;
     /** Свойства Body */
     bodyProps?: BodyProps;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<HintProps, 'children'>;
     /** Признак раскрытого списка */
     open?: boolean;
     /** Идентификатор компонента для тестов */

package/__inner__/cjs/components/Select/types.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { DataListBaseProps, DataListSelected } from '../DataList';
 import type { SelectInputProps } from './components';
@@ -66,6 +66,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = {
     multiple?: MULTIPLE;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
 export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
 export {};

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;

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

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

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

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

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

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