@ozen-ui/kit 0.41.0 → 0.43.0

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;

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -115,7 +115,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/cjs/locale/locale.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enUS = exports.kkKZ = exports.ruRU = void 0;
+var constants_1 = require("../components/Pagination/constants");
 exports.ruRU = {
     defaultProps: {
+        Alert: {
+            closeText: 'Закрыть',
+        },
         Autocomplete: {
             noOptionsText: 'Ничего не найдено',
             closeText: 'Закрыть',
@@ -31,10 +35,32 @@ exports.ruRU = {
             incrementButtonText: 'Увеличить',
             decrementButtonText: 'Уменьшить',
         },
+        Pagination: {
+            'aria-label': 'Навигация по страницам',
+            getItemAriaLabel: function (_a) {
+                var page = _a.page, type = _a.type, selected = _a.selected;
+                if (type === constants_1.NEXT) {
+                    return 'Перейти на следующую страницу';
+                }
+                if (type === constants_1.PREVIOUS) {
+                    return 'Перейти на предыдущую страницу';
+                }
+                if (selected) {
+                    return "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 ".concat(page);
+                }
+                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 '';
+            },
+        },
     },
 };
 exports.kkKZ = {
     defaultProps: {
+        Alert: {
+            closeText: 'Жабу',
+        },
         Autocomplete: {
             noOptionsText: 'Ештеңе табылған жоқ',
             closeText: 'Жабу',
@@ -63,10 +89,32 @@ exports.kkKZ = {
             incrementButtonText: 'Үлкейту',
             decrementButtonText: 'Азайту',
         },
+        Pagination: {
+            'aria-label': 'Беттерді шарлау',
+            getItemAriaLabel: function (_a) {
+                var page = _a.page, type = _a.type, selected = _a.selected;
+                if (type === constants_1.NEXT) {
+                    return 'Келесі бетке өтіңіз';
+                }
+                if (type === constants_1.PREVIOUS) {
+                    return 'Алдыңғы бетке өтіңіз';
+                }
+                if (selected) {
+                    return "".concat(page, " \u0431\u0435\u0442");
+                }
+                if (type === constants_1.PAGE) {
+                    return "".concat(page, "-\u0431\u0435\u0442\u043A\u0435 \u04E9\u0442\u0456\u04A3\u0456\u0437");
+                }
+                return '';
+            },
+        },
     },
 };
 exports.enUS = {
     defaultProps: {
+        Alert: {
+            closeText: 'Close',
+        },
         Autocomplete: {
             noOptionsText: 'No options',
             closeText: 'Close',
@@ -95,5 +143,24 @@ exports.enUS = {
             incrementButtonText: 'Increment',
             decrementButtonText: 'Decrement',
         },
+        Pagination: {
+            'aria-label': 'Pagination navigation',
+            getItemAriaLabel: function (_a) {
+                var page = _a.page, type = _a.type, selected = _a.selected;
+                if (type === constants_1.NEXT) {
+                    return 'Go to next page';
+                }
+                if (type === constants_1.PREVIOUS) {
+                    return 'Go to previous page';
+                }
+                if (selected) {
+                    return "Page ".concat(page);
+                }
+                if (type === constants_1.PAGE) {
+                    return "Go to page ".concat(page);
+                }
+                return '';
+            },
+        },
     },
 };

package/__inner__/cjs/utils/getPaperSizeToFormElement.d.ts

@@ -0,0 +1,3 @@
+import type { PaperProps } from '../components/Paper';
+import type { FormElementSizeVariant } from '../types/FormElementSizeVariant';
+export declare const getPaperSizeToFormElement: (size: FormElementSizeVariant) => PaperProps['radius'];

package/__inner__/cjs/utils/getPaperSizeToFormElement.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaperSizeToFormElement = void 0;
+var matchPaperSizeToFormElement = {
+    '2xs': 's',
+    xs: 's',
+    s: 'l',
+    m: 'l',
+    l: 'l',
+};
+var getPaperSizeToFormElement = function (size) { return matchPaperSizeToFormElement === null || matchPaperSizeToFormElement === void 0 ? void 0 : matchPaperSizeToFormElement[size]; };
+exports.getPaperSizeToFormElement = getPaperSizeToFormElement;

package/__inner__/esm/components/Accordion/Accordion.css

@@ -76,7 +76,7 @@
       --accordion-background-color: var(--color-background-main);
       --accordion-summary-hover-color: none;
       --accordion-summary-active-color: none;
-      --accordion-border-radius: var(--border-radius-l);
+      --accordion-border-radius: var(--border-radius-xl);
     }
 .AccordionSummary {
   inline-size: 100%;

package/__inner__/esm/components/Alert/Alert.css

@@ -1,15 +1,20 @@
 /* stylelint-disable */
 .Alert {
-  position: relative;
+  --alert-status-line-width: 8px;
+  --alert-status-line-gutter: var(--control-padding-xs);
   display: flex;
-  -moz-column-gap: var(--spacing-2xs);
-       column-gap: var(--spacing-2xs);
-  align-items: flex-start;
-  inline-size: 100%;
   overflow: auto;
+  inline-size: 100%;
+  position: relative;
   box-sizing: border-box;
-  border-inline-start: 4px solid var(--alert-border-color);
-  padding: 16px;
+  align-items: flex-start;
+  -moz-column-gap: var(--spacing-2xs);
+       column-gap: var(--spacing-2xs);
+  padding: var(--control-padding-s);
+  padding-inline-start: calc(
+    var(--control-padding-s) + var(--alert-status-line-width) +
+      var(--alert-status-line-gutter)
+  );
 
   font: var(--typography-text-xs-font);
 
@@ -21,36 +26,36 @@
       --alert-title-text-color: var(--color-content-primary);
       --alert-body-text-color: var(--color-content-secondary);
       --alert-icon-color: var(--color-content-primary);
-      --alert-close-button-color: var(--color-background-main-inverse);
+      --alert-close-button-color: var(--color-content-primary);
     }
 .Alert_color_dark {
       --alert-title-text-color: var(--color-content-primary-inverse);
-      --alert-body-text-color: var(--color-content-tertiary);
+      --alert-body-text-color: var(--color-content-primary-inverse);
       --alert-icon-color: var(--color-content-primary-inverse);
-      --alert-close-button-color: var(--color-background-main);
+      --alert-close-button-color: var(--color-content-action-on);
     }
 .Alert_status_info {
       --alert-icon-color: var(--color-content-info);
-      --alert-border-color: var(--color-background-info);
+      --alert-status-line-color: var(--color-background-info);
     }
 .Alert_status_warning {
       --alert-icon-color: var(--color-content-warning);
-      --alert-border-color: var(--color-background-warning);
+      --alert-status-line-color: var(--color-background-warning);
     }
 .Alert_status_success {
       --alert-icon-color: var(--color-content-success);
-      --alert-border-color: var(--color-background-success);
+      --alert-status-line-color: var(--color-background-success);
     }
 .Alert_status_error {
       --alert-icon-color: var(--color-content-error);
-      --alert-border-color: var(--color-background-error);
+      --alert-status-line-color: var(--color-background-error);
     }
 .Alert_hasCloseButton {
-    padding-inline-end: 48px;
+    padding-inline-end: 40px;
   }
 .Alert-Icon {
-    padding-block-start: 2px;
     display: flex;
+    padding-block-start: 2px;
     color: var(--alert-icon-color);
   }
 .Alert-Title {
@@ -65,15 +70,29 @@
     text-transform: var(--typography-text-s_1-text_transform, none);
   }
 .Alert-Body {
-    margin-block-start: var(--spacing-3xs);
     color: var(--alert-body-text-color);
+    margin-block-start: var(--spacing-3xs);
   }
 .Alert-Action {
     margin-block-start: var(--spacing-2xs);
   }
-.IconButton.Alert-CloseButton {
-  color: var(--alert-close-button-color);
+.Alert::after {
+  content: '';
+  inset: 0;
+  position: absolute;
+  margin: var(--alert-status-line-gutter);
+  margin-inline-end: 0;
+  border-radius: var(--border-radius-s);
+  inline-size: var(--alert-status-line-width);
+  background-color: var(--alert-status-line-color);
+}
+.ButtonBase.IconButtonNext.Alert-CloseButton {
+  --icon-button-font-color: var(--alert-close-button-color);
+  --icon-button-font-color-hover: var(--alert-close-button-color);
+  --icon-button-font-color-active: var(--alert-close-button-color);
+  --icon-button-font-color-focus: var(--alert-close-button-color);
   position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 16px;
+  margin: var(--spacing-xs);
+  inset-inline-end: 0;
+  inset-block-start: 0;
 }

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

@@ -1,7 +1,7 @@
 import './Alert.css';
 import React from 'react';
 import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
-import type { ButtonProps } from '../Button';
+import type { ButtonProps } from '../ButtonNext';
 export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
 export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
 export declare const alertColorVariant: readonly ["light", "dark"];
@@ -35,6 +35,8 @@ type AlertBaseProps = {
     action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
     /** Дополнительные CSS-классы */
     className?: string;
+    /** Текст для кнопки закрытия компонента */
+    closeText?: string;
 };
 export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Alert/Alert.js

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

package/__inner__/esm/components/Autocomplete/Autocomplete.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Autocomplete.css';
-import React, { useEffect, useRef, forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useMutableRef } from '../../hooks/useMutableRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
@@ -9,7 +9,7 @@ import { isKeys } from '../../utils/isKeys';
 import { DataList, DataListOption } from '../DataList';
 import { Input } from '../Input';
 import { AutocompleteLoading, AutocompleteNoOptions, AutocompleteRenderRight, } from './components';
-import { AUTOCOMPLETE_DEFAULT_SIZE, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, } from './constants';
+import { AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_SIZE, } from './constants';
 import { withDefaultGetters } from './helper';
 export var cnAutocomplete = cn('Autocomplete');
 function AutocompleteRender(inProps, ref) {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@ozen-ui/icons';
 import { useFieldControl } from '../../../FieldControl';
 import { FieldIcon } from '../../../FieldIcon';
-import { IconButton } from '../../../IconButton';
+import { IconButton } from '../../../IconButtonNext';
 import { cnAutocomplete } from '../../index';
 export var AutocompleteRenderRight = function (_a) {
     var disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron, renderRight = _a.renderRight, clearText = _a.clearText, closeText = _a.closeText, openText = _a.openText, disabled = _a.disabled, hasValue = _a.hasValue, onClear = _a.onClear, onOpen = _a.onOpen, open = _a.open, size = _a.size;

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -80,6 +80,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
@@ -176,6 +177,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: undefined;
     defaultOpen?: boolean | undefined;

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

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
+import type { ChangeEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { DataListProps } from '../DataList';
 import type { InputProps } from '../Input';
@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'onKeyDown'>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'onKeyDown'>;
 type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */

package/__inner__/esm/components/Breadcrumbs/components/BreadcrumbItem.d.ts

@@ -1,6 +1,6 @@
 import type { ElementType } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../../utils/polymorphicComponentWithRef';
-import type { ButtonProps } from '../../Button';
+import type { ButtonProps } from '../../ButtonNext';
 import { BREADCRUMB_ITEM_DEFAULT_TAG } from '../constants';
 export declare const cnBreadcrumbItem: import("@bem-react/classname").ClassNameFormatter;
 type BreadcrumbItemBaseProps = Pick<ButtonProps, 'disabled' | 'iconLeft' | 'iconRight'>;

package/__inner__/esm/components/Button/Button.css

@@ -13,7 +13,7 @@
   min-inline-size: var(--button-min-width);
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--button-border-radius);
   transition:
     background-color var(--transition-default),
     border-color var(--transition-default),
@@ -28,6 +28,7 @@
 .Button_size_2xs {
       --button-height: var(--control-height-2xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 56px;
 
       font: var(--typography-text-2xs-font);
@@ -39,6 +40,7 @@
 .Button_size_xs {
       --button-height: var(--control-height-xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 64px;
 
       font: var(--typography-text-xs-font);
@@ -50,6 +52,7 @@
 .Button_size_s {
       --button-height: var(--control-height-s);
       --button-padding-x: var(--control-padding-s);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 72px;
 
       font: var(--typography-text-s-font);
@@ -61,6 +64,7 @@
 .Button_size_m {
       --button-height: var(--control-height-m);
       --button-padding-x: var(--control-padding-m);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 80px;
 
       font: var(--typography-text-m-font);
@@ -72,6 +76,7 @@
 .Button_size_l {
       --button-height: var(--control-height-l);
       --button-padding-x: var(--control-padding-l);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 88px;
 
       font: var(--typography-text-l-font);
@@ -166,6 +171,7 @@
     --button-height: auto;
     --button-min-width: auto;
     --button-padding-x: 0;
+    --button-border-radius: var(--border-radius-xs);
   }
 .Button_variant_function:hover {
       opacity: 0.8;

package/__inner__/esm/components/ButtonNext/Button.css

@@ -13,7 +13,7 @@
   min-inline-size: var(--button-min-width);
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--button-border-radius);
   transition:
     background-color var(--transition-default),
     border-color var(--transition-default),
@@ -28,6 +28,7 @@
 .ButtonNext_size_2xs {
       --button-height: var(--control-height-2xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 56px;
 
       font: var(--typography-text-2xs-font);
@@ -39,6 +40,7 @@
 .ButtonNext_size_xs {
       --button-height: var(--control-height-xs);
       --button-padding-x: var(--control-padding-xs);
+      --button-border-radius: var(--border-radius-m);
       --button-min-width: 64px;
 
       font: var(--typography-text-xs-font);
@@ -50,6 +52,7 @@
 .ButtonNext_size_s {
       --button-height: var(--control-height-s);
       --button-padding-x: var(--control-padding-s);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 72px;
 
       font: var(--typography-text-s-font);
@@ -61,6 +64,7 @@
 .ButtonNext_size_m {
       --button-height: var(--control-height-m);
       --button-padding-x: var(--control-padding-m);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 80px;
 
       font: var(--typography-text-m-font);
@@ -72,6 +76,7 @@
 .ButtonNext_size_l {
       --button-height: var(--control-height-l);
       --button-padding-x: var(--control-padding-l);
+      --button-border-radius: var(--border-radius-l);
       --button-min-width: 88px;
 
       font: var(--typography-text-l-font);
@@ -208,6 +213,7 @@
     --button-height: auto;
     --button-min-width: auto;
     --button-padding-x: 0;
+    --button-border-radius: var(--border-radius-xs);
   }
 .ButtonNext_variant_function.ButtonNext_color_primary,
   .ButtonNext_variant_function.ButtonNext_color_secondary,

package/__inner__/esm/components/DataList/DataList.js

@@ -8,6 +8,7 @@ import { useMultiRef } from '../../hooks/useMultiRef';
 import { usePrevious } from '../../hooks/usePrevious';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
 import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
@@ -21,6 +22,7 @@ var DataListRender = function (inProps, ref) {
     var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = useRef(null);
     var listRef = useRef(null);
+    var radius = getPaperSizeToFormElement(size);
     var _e = __read(useControlled({
         name: 'DataList',
         defaultValue: defaultSelected,
@@ -143,7 +145,7 @@ var DataListRender = function (inProps, ref) {
             return cloneElement(elementChild, props);
         });
     }, [resolvedChildren, selectedState, focused, onClick]);
-    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
+    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, radius: radius, className: cnDataList('', [className]), transitionProps: {
             classNames: 'DataList-animation',
         } }, other, { ref: useMultiRef([ref, dataListRef]) }),
         React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));

package/__inner__/esm/components/Dialog/Dialog.css

@@ -113,7 +113,7 @@
 .Dialog_hasCloseButton {
     --dialog-header-item-padding-right: 24px;
   }
-.IconButton.Dialog-CloseButton {
+.IconButtonNext.Dialog-CloseButton {
   position: absolute;
   inset-block-start: 8px;
   inset-inline-end: 8px;

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

@@ -1,6 +1,6 @@
 import './Dialog.css';
 import React from 'react';
-import { type IconButtonProps } from '../IconButton';
+import { type IconButtonProps } from '../IconButtonNext';
 import { type ModalProps } from '../Modal';
 export declare const cnDialog: import("@bem-react/classname").ClassNameFormatter;
 export declare const dialogSizeVariant: readonly ["s", "l"];

package/__inner__/esm/components/Dialog/Dialog.js

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
 import { CrossIcon } from '@ozen-ui/icons';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { IconButton } from '../IconButton';
+import { IconButton } from '../IconButtonNext';
 import { Modal } from '../Modal';
 import { DIALOG_DEFAULT_HIDE_CLOSE_BUTTON, DIALOG_DEFAULT_SIZE, DIALOG_DEFAULT_VARIANT, } from './constants';
 export var cnDialog = cn('Dialog');
@@ -21,7 +21,7 @@ export var Dialog = forwardRef(function (inProps, ref) {
     });
     var _a = props.variant, variant = _a === void 0 ? DIALOG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DIALOG_DEFAULT_SIZE : _b, _c = props.hideCloseButton, hideCloseButton = _c === void 0 ? DIALOG_DEFAULT_HIDE_CLOSE_BUTTON : _c, open = props.open, onClose = props.onClose, children = props.children, className = props.className, windowProps = props.windowProps, closeButtonProps = props.closeButtonProps, transitionProps = props.transitionProps, other = __rest(props, ["variant", "size", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "closeButtonProps", "transitionProps"]);
     var _d = closeButtonProps || {}, closeButtonClassName = _d.className, closeButtonRestProps = __rest(_d, ["className"]);
-    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ role: 'dialog' }, windowProps), className: cnDialog({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign(__assign({}, (variant === 'fullsize' && {
+    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ role: 'dialog', radius: size === 's' ? 'l' : 'xl' }, windowProps), className: cnDialog({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign(__assign({}, (variant === 'fullsize' && {
             classNames: cnDialog({ animation: 'fullsize' }),
         })), transitionProps), ref: ref }),
         !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: cnDialog('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CrossIcon, compressed: true }))),