@ozen-ui/kit 0.40.0 → 0.42.0

package/__inner__/cjs/components/Input/Input.js

@@ -21,7 +21,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, maxLength = props.maxLength, minLength = props.minLength, inputRef = props.inputRef, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "maxLength", "minLength", "inputRef", "labelRef"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, hintProps = props.hintProps, maxLength = props.maxLength, minLength = props.minLength, inputRef = props.inputRef, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "hintProps", "maxLength", "minLength", "inputRef", "labelRef"]);
     var bodyInnerRef = (0, react_1.useRef)(null);
     var fieldInnerRef = (0, react_1.useRef)(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
@@ -48,6 +48,6 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
                 react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange, maxLength: maxLength, minLength: minLength }, inputProps, { className: (0, exports.cnInput)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
             react_1.default.createElement(Fieldset_1.Fieldset, null)),
-        react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.Input.displayName = 'Input';

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

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
 export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
@@ -66,6 +67,8 @@ export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT
     labelProps?: FieldLabelProps;
     /** Cвойства Body */
     bodyProps?: ComponentPropsWithRef<'label'>;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 } & InputPropsDeprecated;

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

@@ -41,7 +41,7 @@
     color: var(--textfield-color);
     -moz-column-gap: var(--textfield-input-gap);
          column-gap: var(--textfield-input-gap);
-    border-radius: var(--border-radius-xs);
+    border-radius: var(--textfield-border-radius);
     padding: var(--input-number-padding);
     background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
@@ -70,7 +70,7 @@
 
   .InputNumber-Field::placeholder {
       opacity: 1;
-      color: var(--color-content-tertiary);
+      color: var(--textfield-placeholder-color);
     }
 
   .InputNumber-Field:-webkit-autofill,

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

@@ -27,7 +27,7 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'InputNumber',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, incrementButtonText = props.incrementButtonText, decrementButtonText = props.decrementButtonText, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps", "incrementButtonText", "decrementButtonText"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, hintProps = props.hintProps, incrementButtonText = props.incrementButtonText, decrementButtonText = props.decrementButtonText, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps", "hintProps", "incrementButtonText", "decrementButtonText"]);
     var _l = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
     var _o = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
     var _p = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _p[0], setCountDirection = _p[1];
@@ -140,6 +140,6 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
                 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(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
-        react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.InputNumber.displayName = 'InputNumber';

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

@@ -1,5 +1,6 @@
-import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEvent } from 'react';
+import type { ChangeEvent, ComponentPropsWithRef, HTMLAttributes, MouseEvent, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
 type InputNumberPropsDeprecated = {
@@ -59,6 +60,8 @@ export type InputNumberProps = {
     labelProps?: FieldLabelProps;
     /** Cвойства Body */
     bodyProps?: ComponentPropsWithRef<'label'>;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** Шаг инкремента/декремента */
     step?: number;
     /** Минимально допустимое значение */

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

@@ -2,35 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = exports.cnPagination = void 0;
 var tslib_1 = require("tslib");
+require("./Pagination.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isNumber_1 = require("../../utils/isNumber");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
 var createPaginationRange_1 = require("./helpers/createPaginationRange");
 var getItemAriaLabel_1 = require("./helpers/getItemAriaLabel");
 var withNavigationButtons_1 = require("./helpers/withNavigationButtons/withNavigationButtons");
-require("./Pagination.css");
 exports.cnPagination = (0, classname_1.cn)('Pagination');
-exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
+exports.Pagination = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Pagination' });
-    var _a = props.page, page = _a === void 0 ? constants_1.PAGINATION_DEFAULT_PAGE : _a, _b = props.size, size = _b === void 0 ? constants_1.PAGINATION_DEFAULT_SIZE : _b, _c = props.siblingCount, siblingCount = _c === void 0 ? constants_1.PAGINATION_DEFAULT_SIBLING_COUNT : _c, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, onPageChange = props.onPageChange, _d = props.getItemAriaLabel, getItemAriaLabel = _d === void 0 ? getItemAriaLabel_1.getItemAriaLabel : _d, 
+    var _a = props.as, Tag = _a === void 0 ? constants_1.PAGINATION_DEFAULT_TAG : _a, _b = props.page, page = _b === void 0 ? constants_1.PAGINATION_DEFAULT_PAGE : _b, _c = props.size, size = _c === void 0 ? constants_1.PAGINATION_DEFAULT_SIZE : _c, _d = props.siblingCount, siblingCount = _d === void 0 ? constants_1.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 ? getItemAriaLabel_1.getItemAriaLabel : _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 = tslib_1.__rest(_a, ["className"]);
         return (react_1.default.createElement(components_1.PaginationItem, tslib_1.__assign({}, rest)));
-    } : _e, otherProps = tslib_1.__rest(props, ["page", "size", "siblingCount", "pageSize", "totalCount", "className", "onPageChange", "getItemAriaLabel", "renderComponent"]);
-    var _f = (0, react_1.useMemo)(function () {
+    } : _f, otherProps = tslib_1.__rest(props, ["as", "page", "size", "siblingCount", "pageSize", "totalCount", "className", "disabled", "onPageChange", "getItemAriaLabel", "renderComponent"]);
+    var _g = (0, react_1.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 = (0, react_1.useMemo)(function () {
         return (0, createPaginationRange_1.createPaginationRange)({
             page: selected,
@@ -63,7 +64,7 @@ exports.Pagination = (0, react_1.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,
@@ -73,8 +74,17 @@ exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
                 className: (0, components_1.cnPaginationItem)({ size: size, selected: isSelected }),
             };
         });
-    }, [range, selected, previous, next, size, getItemAriaLabel, onPageChange]);
-    return (react_1.default.createElement("nav", tslib_1.__assign({ "aria-label": "\u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C", className: (0, exports.cnPagination)({}, [className]), ref: ref }, otherProps),
+    }, [
+        range,
+        selected,
+        disabledProp,
+        previous,
+        next,
+        size,
+        getItemAriaLabel,
+        onPageChange,
+    ]);
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnPagination)({}, [className]), ref: ref }, otherProps),
         react_1.default.createElement("ul", { className: (0, exports.cnPagination)('List') }, paginationPropsRange.map(function (item, index) { return (react_1.default.createElement("li", { key: item.type === constants_1.ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
 });
 exports.Pagination.displayName = 'Pagination';

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

@@ -1,28 +1,27 @@
 /* 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-size: var(--control-height-2xs);
       --pagination-item-border-radius: var(--border-radius-xs);
     }
 .PaginationItem_size_l {
@@ -30,7 +29,7 @@
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --pagination-item-size: 56px;
+      --pagination-item-size: var(--control-height-m);
       --pagination-item-border-radius: var(--border-radius-s);
     }
 .PaginationItem:hover:not(.PaginationItem_selected) {
@@ -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__/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/Select/Select.css

@@ -23,7 +23,7 @@
     transition: background-color var(--transition-slow);
     padding: 0 var(--textfield-gutter-x);
     color: var(--textfield-color);
-    border-radius: var(--border-radius-xs);
+    border-radius: var(--textfield-border-radius);
     cursor: pointer;
     outline: none;
   }
@@ -54,7 +54,7 @@
     }
 
   .Select-Field_asPlaceholder {
-      color: var(--color-content-tertiary);
+      color: var(--textfield-placeholder-color);
     }
 
   .Select_multiline .Select-FieldContainer {

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

@@ -23,7 +23,7 @@
     background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
     color: var(--textfield-color);
-    border-radius: var(--border-radius-xs);
+    border-radius: var(--textfield-border-radius);
     min-block-size: inherit;
     block-size: inherit;
     padding: var(--textfield-input-padding);
@@ -78,7 +78,7 @@
 
   .Textarea-Field::placeholder {
       opacity: 1;
-      color: var(--color-content-tertiary);
+      color: var(--textfield-placeholder-color);
     }
 
   .Textarea-Counter {

package/__inner__/cjs/components/Textarea/Textarea.js

@@ -15,10 +15,10 @@ exports.Textarea = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Textarea',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, disabled = props.disabled, textareaProps = props.textareaProps, labelProps = props.labelProps, labelRef = props.labelRef, textareaRef = props.textareaRef, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "disabled", "textareaProps", "labelProps", "labelRef", "textareaRef"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, disabled = props.disabled, textareaProps = props.textareaProps, labelProps = props.labelProps, hintProps = props.hintProps, labelRef = props.labelRef, textareaRef = props.textareaRef, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "disabled", "textareaProps", "labelProps", "hintProps", "labelRef", "textareaRef"]);
     return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { className: (0, exports.cnTextarea)({
             expand: expand,
         }, [className]), ref: ref }),
-        react_1.default.createElement(components_1.TextareaConsumer, { autoFocus: autoFocus, maxLength: maxLength, placeholder: placeholder, id: id, name: name, cols: cols, expand: expand, rows: rows, label: label, hint: hint, value: value, defaultValue: defaultValue, onChange: onChange, textareaRef: textareaRef, textareaProps: textareaProps, labelRef: labelRef, labelProps: labelProps })));
+        react_1.default.createElement(components_1.TextareaConsumer, { autoFocus: autoFocus, maxLength: maxLength, placeholder: placeholder, id: id, name: name, cols: cols, expand: expand, rows: rows, label: label, hint: hint, value: value, defaultValue: defaultValue, onChange: onChange, textareaRef: textareaRef, textareaProps: textareaProps, labelRef: labelRef, labelProps: labelProps, hintProps: hintProps })));
 });
 exports.Textarea.displayName = 'Textarea';

package/__inner__/cjs/components/Textarea/components/TextareaConsumer.js

@@ -12,7 +12,7 @@ var Fieldset_1 = require("../../Fieldset");
 var Textarea_1 = require("../../Textarea");
 var index_1 = require("./index");
 var TextareaConsumer = function (_a) {
-    var labelProps = _a.labelProps, labelRef = _a.labelRef, maxLength = _a.maxLength, label = _a.label, id = _a.id, name = _a.name, cols = _a.cols, rows = _a.rows, disabled = _a.disabled, valueProp = _a.value, required = _a.required, defaultValue = _a.defaultValue, placeholder = _a.placeholder, autoFocus = _a.autoFocus, textareaProps = _a.textareaProps, onChange = _a.onChange, textareaRef = _a.textareaRef, expand = _a.expand, hint = _a.hint;
+    var labelProps = _a.labelProps, hintProps = _a.hintProps, labelRef = _a.labelRef, maxLength = _a.maxLength, label = _a.label, id = _a.id, name = _a.name, cols = _a.cols, rows = _a.rows, disabled = _a.disabled, valueProp = _a.value, required = _a.required, defaultValue = _a.defaultValue, placeholder = _a.placeholder, autoFocus = _a.autoFocus, textareaProps = _a.textareaProps, onChange = _a.onChange, textareaRef = _a.textareaRef, expand = _a.expand, hint = _a.hint;
     var fieldRef = (0, react_1.useRef)(null);
     var context = (0, FieldControl_1.useFieldControl)();
     var _b = tslib_1.__read(context, 1), value = _b[0].value;
@@ -29,7 +29,7 @@ var TextareaConsumer = function (_a) {
             react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, Textarea_1.cnTextarea)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) }), label),
             react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ as: "textarea", id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus, onChange: onChange }, textareaProps, { className: (0, Textarea_1.cnTextarea)('Field', {}, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className]), ref: (0, useMultiRef_1.useMultiRef)([textareaRef || (textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.ref), fieldRef]) })),
             react_1.default.createElement(Fieldset_1.Fieldset, null)),
-        react_1.default.createElement(FieldHint_1.FieldHint, null,
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps),
             hint,
             maxLength && react_1.default.createElement(index_1.TextareaCounter, { maxLength: maxLength }))));
 };

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

@@ -1,6 +1,7 @@
-import type { Ref, ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldHintProps } from '../FieldHint';
 import type { FieldLabelProps } from '../FieldLabel';
 export type TextareaSizeVariant = FormElementSizeVariant;
 export declare const textareaExpandVariant: readonly ["autoSize", "verticalResize"];
@@ -61,6 +62,8 @@ export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFA
     };
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 } & TextareaPropsDeprecated;