@ozen-ui/kit 0.34.3 → 0.35.0

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

@@ -37,8 +37,8 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     className?: string | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
     autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
     disabled?: boolean | undefined;
+    placeholder?: string | undefined;
     required?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -133,8 +133,8 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     className?: string | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
     autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
     disabled?: boolean | undefined;
+    placeholder?: string | undefined;
     required?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/__inner__/cjs/components/Container/Container.css

@@ -7,12 +7,10 @@
   box-sizing: border-box;
 }
 .Container_position_start {
-      margin-inline-start: 0;
-      margin-inline-end: auto;
+      margin-inline: 0 auto;
     }
 .Container_position_center {
-      margin-inline-start: auto;
-      margin-inline-end: auto;
+      margin-inline: auto auto;
     }
 .Container_maxWidth_s {
     max-inline-size: var(--breakpoint-s);

package/__inner__/cjs/components/Dialog/Dialog.css

@@ -68,10 +68,7 @@
 .Dialog_variant_fullsize .Modal-Window {
         inline-size: 100%;
         max-block-size: 100%;
-        inset-block-start: 0;
-        inset-inline-end: 0;
-        inset-inline-start: 0;
-        inset-block-end: 0;
+        inset: 0;
         margin: 0;
         border-radius: 0;
         transform: translate(0, 0);

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

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

package/__inner__/cjs/components/Dialog/Dialog.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.dialogVariant = exports.dialogSizeVariant = exports.cnDialog = void 0;
 var tslib_1 = require("tslib");
+require("./Dialog.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var IconButton_1 = require("../IconButton");
 var Modal_1 = require("../Modal");
-require("./Dialog.css");
+var constants_1 = require("./constants");
 exports.cnDialog = (0, classname_1.cn)('Dialog');
 exports.dialogSizeVariant = ['s', 'l'];
 exports.dialogVariant = ['small', 'medium', 'large', 'fullsize'];
@@ -15,13 +17,17 @@ var iconButtonSizeMapper = {
     l: 'm',
     s: 's',
 };
-exports.Dialog = (0, react_1.forwardRef)(function (_a, ref) {
-    var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, onClose = _a.onClose, children = _a.children, className = _a.className, windowProps = _a.windowProps, closeButtonProps = _a.closeButtonProps, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d, transitionProps = _a.transitionProps, other = tslib_1.__rest(_a, ["open", "variant", "size", "onClose", "children", "className", "windowProps", "closeButtonProps", "hideCloseButton", "transitionProps"]);
-    var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = tslib_1.__rest(_e, ["className"]);
+exports.Dialog = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Dialog',
+    });
+    var _a = props.variant, variant = _a === void 0 ? constants_1.DIALOG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? constants_1.DIALOG_DEFAULT_SIZE : _b, _c = props.hideCloseButton, hideCloseButton = _c === void 0 ? constants_1.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 = tslib_1.__rest(props, ["variant", "size", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "closeButtonProps", "transitionProps"]);
+    var _d = closeButtonProps || {}, closeButtonClassName = _d.className, closeButtonRestProps = tslib_1.__rest(_d, ["className"]);
     return (react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, windowProps: tslib_1.__assign({ role: 'dialog' }, windowProps), className: (0, exports.cnDialog)({ variant: variant, size: size, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign(tslib_1.__assign({}, (variant === 'fullsize' && {
             classNames: (0, exports.cnDialog)({ animation: 'fullsize' }),
         })), transitionProps), ref: ref }),
-        !hideCloseButton && (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close", "aria-label": "\u0437\u0430\u043A\u0440\u044B\u0442\u044C" }, closeButtonRestProps, { className: (0, exports.cnDialog)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CloseIcon, compressed: true }))),
+        !hideCloseButton && (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: (0, exports.cnDialog)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CloseIcon, compressed: true }))),
         react_1.default.createElement("div", { className: (0, exports.cnDialog)('InnerContainer') }, children)));
 });
 exports.Dialog.displayName = 'Dialog';

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

@@ -0,0 +1,3 @@
+export declare const DIALOG_DEFAULT_VARIANT = "medium";
+export declare const DIALOG_DEFAULT_SIZE = "l";
+export declare const DIALOG_DEFAULT_HIDE_CLOSE_BUTTON = false;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIALOG_DEFAULT_HIDE_CLOSE_BUTTON = exports.DIALOG_DEFAULT_SIZE = exports.DIALOG_DEFAULT_VARIANT = void 0;
+exports.DIALOG_DEFAULT_VARIANT = 'medium';
+exports.DIALOG_DEFAULT_SIZE = 'l';
+exports.DIALOG_DEFAULT_HIDE_CLOSE_BUTTON = false;

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

@@ -1,7 +1,7 @@
+import './Drawer.css';
 import React from 'react';
 import { type IconButtonProps } from '../IconButton';
 import { type ModalProps } from '../Modal';
-import './Drawer.css';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
 export declare const drawerVariant: readonly ["little", "medium", "large"];
 export declare const drawerSizeVariant: readonly ["s", "l"];

package/__inner__/cjs/components/Drawer/Drawer.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = exports.drawerPlacementVariant = exports.drawerSizeVariant = exports.drawerVariant = exports.cnDrawer = void 0;
 var tslib_1 = require("tslib");
+require("./Drawer.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var IconButton_1 = require("../IconButton");
 var Modal_1 = require("../Modal");
-require("./Drawer.css");
+var constants_1 = require("./constants");
 exports.cnDrawer = (0, classname_1.cn)('Drawer');
 exports.drawerVariant = ['little', 'medium', 'large'];
 exports.drawerSizeVariant = ['s', 'l'];
@@ -16,11 +18,15 @@ var iconButtonSizeMapper = {
     l: 'm',
     s: 's',
 };
-exports.Drawer = (0, react_1.forwardRef)(function (_a, ref) {
-    var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, _e = _a.hideCloseButton, hideCloseButton = _e === void 0 ? false : _e, onClose = _a.onClose, children = _a.children, className = _a.className, transitionProps = _a.transitionProps, closeButtonProps = _a.closeButtonProps, other = tslib_1.__rest(_a, ["open", "variant", "size", "placement", "hideCloseButton", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
-    var _f = closeButtonProps || {}, closeButtonClassName = _f.className, closeButtonRestProps = tslib_1.__rest(_f, ["className"]);
+exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Drawer',
+    });
+    var _a = props.variant, variant = _a === void 0 ? constants_1.DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? constants_1.DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? constants_1.DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? constants_1.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _d, open = props.open, onClose = props.onClose, children = props.children, className = props.className, transitionProps = props.transitionProps, closeButtonProps = props.closeButtonProps, other = tslib_1.__rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
+    var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = tslib_1.__rest(_e, ["className"]);
     return (react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, onClose: onClose, className: (0, exports.cnDrawer)({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: tslib_1.__assign({ classNames: (0, exports.cnDrawer)({ animation: true }) }, transitionProps), ref: ref }),
-        !hideCloseButton && (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close", "aria-label": "\u0437\u0430\u043A\u0440\u044B\u0442\u044C" }, closeButtonRestProps, { className: (0, exports.cnDrawer)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CloseIcon, compressed: true }))),
+        !hideCloseButton && (react_1.default.createElement(IconButton_1.IconButton, tslib_1.__assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: (0, exports.cnDrawer)('CloseButton', [closeButtonClassName]), onClick: onClose, icon: icons_1.CloseIcon, compressed: true }))),
         react_1.default.createElement("div", { className: (0, exports.cnDrawer)('InnerContainer') }, children)));
 });
 exports.Drawer.displayName = 'Drawer';

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

@@ -0,0 +1,4 @@
+export declare const DRAWER_DEFAULT_VARIANT = "medium";
+export declare const DRAWER_DEFAULT_SIZE = "l";
+export declare const DRAWER_DEFAULT_PLACEMENT = "right";
+export declare const DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = exports.DRAWER_DEFAULT_PLACEMENT = exports.DRAWER_DEFAULT_SIZE = exports.DRAWER_DEFAULT_VARIANT = void 0;
+exports.DRAWER_DEFAULT_VARIANT = 'medium';
+exports.DRAWER_DEFAULT_SIZE = 'l';
+exports.DRAWER_DEFAULT_PLACEMENT = 'right';
+exports.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;

package/__inner__/cjs/components/Fieldset/Fieldset.css

@@ -1,9 +1,6 @@
 .Fieldset {
   position: absolute;
-  inset-block-end: 0;
-  inset-inline-end: 0;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  inset: 0;
   margin: 0;
   padding: 0;
   pointer-events: none;

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, 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", "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, 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 bodyInnerRef = (0, react_1.useRef)(null);
     var fieldInnerRef = (0, react_1.useRef)(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
@@ -45,7 +45,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
             react_1.default.createElement("div", { className: (0, exports.cnInput)('FieldContainer') },
                 react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
-                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 }, 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(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)));

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

@@ -13,7 +13,9 @@ import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
+import type { DialogProps } from '../Dialog';
 import type { DividerProps } from '../Divider';
+import type { DrawerProps } from '../Drawer';
 import type { FieldControlProps } from '../FieldControl';
 import type { FileProps } from '../File';
 import type { FilePickerProps } from '../FilePicker';
@@ -78,7 +80,9 @@ export type Theme = {
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
+        Dialog?: Partial<DialogProps>;
         Divider?: Partial<DividerProps>;
+        Drawer?: Partial<DrawerProps>;
         FieldControl?: Partial<FieldControlProps>;
         File?: Partial<FileProps>;
         FilePicker?: Partial<FilePickerProps>;

package/__inner__/cjs/locale/locale.js

@@ -10,6 +10,16 @@ exports.ruRU = {
             clearText: 'Очистить',
             loadingText: 'Загрузка…',
         },
+        Dialog: {
+            closeButtonProps: {
+                'aria-label': 'Закрыть',
+            },
+        },
+        Drawer: {
+            closeButtonProps: {
+                'aria-label': 'Закрыть',
+            },
+        },
         Loader: {
             'aria-label': 'Загрузка',
         },
@@ -32,6 +42,16 @@ exports.kkKZ = {
             clearText: 'Тазалау',
             loadingText: 'Жүктеу…',
         },
+        Dialog: {
+            closeButtonProps: {
+                'aria-label': 'Жабу',
+            },
+        },
+        Drawer: {
+            closeButtonProps: {
+                'aria-label': 'Жабу',
+            },
+        },
         Loader: {
             'aria-label': 'Жүктеу',
         },
@@ -54,6 +74,16 @@ exports.enUS = {
             clearText: 'Clear',
             loadingText: 'Loading…',
         },
+        Dialog: {
+            closeButtonProps: {
+                'aria-label': 'Close',
+            },
+        },
+        Drawer: {
+            closeButtonProps: {
+                'aria-label': 'Close',
+            },
+        },
         Loader: {
             'aria-label': 'Loading',
         },

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

@@ -37,8 +37,8 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     className?: string | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
     autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
     disabled?: boolean | undefined;
+    placeholder?: string | undefined;
     required?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -133,8 +133,8 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     className?: string | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
     autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
     disabled?: boolean | undefined;
+    placeholder?: string | undefined;
     required?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/__inner__/esm/components/Container/Container.css

@@ -7,12 +7,10 @@
   box-sizing: border-box;
 }
 .Container_position_start {
-      margin-inline-start: 0;
-      margin-inline-end: auto;
+      margin-inline: 0 auto;
     }
 .Container_position_center {
-      margin-inline-start: auto;
-      margin-inline-end: auto;
+      margin-inline: auto auto;
     }
 .Container_maxWidth_s {
     max-inline-size: var(--breakpoint-s);

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

@@ -68,10 +68,7 @@
 .Dialog_variant_fullsize .Modal-Window {
         inline-size: 100%;
         max-block-size: 100%;
-        inset-block-start: 0;
-        inset-inline-end: 0;
-        inset-inline-start: 0;
-        inset-block-end: 0;
+        inset: 0;
         margin: 0;
         border-radius: 0;
         transform: translate(0, 0);

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

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

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

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
+import './Dialog.css';
 import React, { forwardRef } from 'react';
 import { CloseIcon } from '@ozen-ui/icons';
+import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButton';
 import { Modal } from '../Modal';
-import './Dialog.css';
+import { DIALOG_DEFAULT_HIDE_CLOSE_BUTTON, DIALOG_DEFAULT_SIZE, DIALOG_DEFAULT_VARIANT, } from './constants';
 export var cnDialog = cn('Dialog');
 export var dialogSizeVariant = ['s', 'l'];
 export var dialogVariant = ['small', 'medium', 'large', 'fullsize'];
@@ -12,13 +14,17 @@ var iconButtonSizeMapper = {
     l: 'm',
     s: 's',
 };
-export var Dialog = forwardRef(function (_a, ref) {
-    var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, onClose = _a.onClose, children = _a.children, className = _a.className, windowProps = _a.windowProps, closeButtonProps = _a.closeButtonProps, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d, transitionProps = _a.transitionProps, other = __rest(_a, ["open", "variant", "size", "onClose", "children", "className", "windowProps", "closeButtonProps", "hideCloseButton", "transitionProps"]);
-    var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = __rest(_e, ["className"]);
+export var Dialog = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Dialog',
+    });
+    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' && {
             classNames: cnDialog({ animation: 'fullsize' }),
         })), transitionProps), ref: ref }),
-        !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close", "aria-label": "\u0437\u0430\u043A\u0440\u044B\u0442\u044C" }, closeButtonRestProps, { className: cnDialog('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CloseIcon, compressed: true }))),
+        !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: cnDialog('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CloseIcon, compressed: true }))),
         React.createElement("div", { className: cnDialog('InnerContainer') }, children)));
 });
 Dialog.displayName = 'Dialog';

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

@@ -0,0 +1,3 @@
+export declare const DIALOG_DEFAULT_VARIANT = "medium";
+export declare const DIALOG_DEFAULT_SIZE = "l";
+export declare const DIALOG_DEFAULT_HIDE_CLOSE_BUTTON = false;

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

@@ -0,0 +1,3 @@
+export var DIALOG_DEFAULT_VARIANT = 'medium';
+export var DIALOG_DEFAULT_SIZE = 'l';
+export var DIALOG_DEFAULT_HIDE_CLOSE_BUTTON = false;

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

@@ -1,7 +1,7 @@
+import './Drawer.css';
 import React from 'react';
 import { type IconButtonProps } from '../IconButton';
 import { type ModalProps } from '../Modal';
-import './Drawer.css';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
 export declare const drawerVariant: readonly ["little", "medium", "large"];
 export declare const drawerSizeVariant: readonly ["s", "l"];

package/__inner__/esm/components/Drawer/Drawer.js

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
+import './Drawer.css';
 import React, { forwardRef } from 'react';
 import { CloseIcon } from '@ozen-ui/icons';
+import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButton';
 import { Modal } from '../Modal';
-import './Drawer.css';
+import { DRAWER_DEFAULT_HIDE_CLOSE_BUTTON, DRAWER_DEFAULT_PLACEMENT, DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_VARIANT, } from './constants';
 export var cnDrawer = cn('Drawer');
 export var drawerVariant = ['little', 'medium', 'large'];
 export var drawerSizeVariant = ['s', 'l'];
@@ -13,11 +15,15 @@ var iconButtonSizeMapper = {
     l: 'm',
     s: 's',
 };
-export var Drawer = forwardRef(function (_a, ref) {
-    var open = _a.open, _b = _a.variant, variant = _b === void 0 ? 'medium' : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, _e = _a.hideCloseButton, hideCloseButton = _e === void 0 ? false : _e, onClose = _a.onClose, children = _a.children, className = _a.className, transitionProps = _a.transitionProps, closeButtonProps = _a.closeButtonProps, other = __rest(_a, ["open", "variant", "size", "placement", "hideCloseButton", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
-    var _f = closeButtonProps || {}, closeButtonClassName = _f.className, closeButtonRestProps = __rest(_f, ["className"]);
+export var Drawer = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Drawer',
+    });
+    var _a = props.variant, variant = _a === void 0 ? DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _d, open = props.open, onClose = props.onClose, children = props.children, className = props.className, transitionProps = props.transitionProps, closeButtonProps = props.closeButtonProps, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
+    var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = __rest(_e, ["className"]);
     return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, className: cnDrawer({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
-        !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close", "aria-label": "\u0437\u0430\u043A\u0440\u044B\u0442\u044C" }, closeButtonRestProps, { className: cnDrawer('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CloseIcon, compressed: true }))),
+        !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: cnDrawer('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CloseIcon, compressed: true }))),
         React.createElement("div", { className: cnDrawer('InnerContainer') }, children)));
 });
 Drawer.displayName = 'Drawer';

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

@@ -0,0 +1,4 @@
+export declare const DRAWER_DEFAULT_VARIANT = "medium";
+export declare const DRAWER_DEFAULT_SIZE = "l";
+export declare const DRAWER_DEFAULT_PLACEMENT = "right";
+export declare const DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;

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

@@ -0,0 +1,4 @@
+export var DRAWER_DEFAULT_VARIANT = 'medium';
+export var DRAWER_DEFAULT_SIZE = 'l';
+export var DRAWER_DEFAULT_PLACEMENT = 'right';
+export var DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;

package/__inner__/esm/components/Fieldset/Fieldset.css

@@ -1,9 +1,6 @@
 .Fieldset {
   position: absolute;
-  inset-block-end: 0;
-  inset-inline-end: 0;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  inset: 0;
   margin: 0;
   padding: 0;
   pointer-events: none;

package/__inner__/esm/components/Input/Input.js

@@ -18,7 +18,7 @@ export var Input = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    var _a = props.size, size = _a === void 0 ? 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, inputRef = props.inputRef, labelRef = props.labelRef, other = __rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "inputRef", "labelRef"]);
+    var _a = props.size, size = _a === void 0 ? 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 = __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 bodyInnerRef = useRef(null);
     var fieldInnerRef = useRef(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
@@ -42,7 +42,7 @@ export var Input = forwardRef(function (inProps, ref) {
             React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnInput('FieldContainer') },
                 React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
-                React.createElement(FieldInput, __assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange }, inputProps, { className: cnInput('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
+                React.createElement(FieldInput, __assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange, maxLength: maxLength, minLength: minLength }, inputProps, { className: cnInput('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
             React.createElement(FieldIcon, { icon: renderRight }),
             React.createElement(Fieldset, null)),
         React.createElement(FieldHint, null, hint)));

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

@@ -13,7 +13,9 @@ import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
+import type { DialogProps } from '../Dialog';
 import type { DividerProps } from '../Divider';
+import type { DrawerProps } from '../Drawer';
 import type { FieldControlProps } from '../FieldControl';
 import type { FileProps } from '../File';
 import type { FilePickerProps } from '../FilePicker';
@@ -78,7 +80,9 @@ export type Theme = {
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
+        Dialog?: Partial<DialogProps>;
         Divider?: Partial<DividerProps>;
+        Drawer?: Partial<DrawerProps>;
         FieldControl?: Partial<FieldControlProps>;
         File?: Partial<FileProps>;
         FilePicker?: Partial<FilePickerProps>;

package/__inner__/esm/locale/locale.js

@@ -7,6 +7,16 @@ export var ruRU = {
             clearText: 'Очистить',
             loadingText: 'Загрузка…',
         },
+        Dialog: {
+            closeButtonProps: {
+                'aria-label': 'Закрыть',
+            },
+        },
+        Drawer: {
+            closeButtonProps: {
+                'aria-label': 'Закрыть',
+            },
+        },
         Loader: {
             'aria-label': 'Загрузка',
         },
@@ -29,6 +39,16 @@ export var kkKZ = {
             clearText: 'Тазалау',
             loadingText: 'Жүктеу…',
         },
+        Dialog: {
+            closeButtonProps: {
+                'aria-label': 'Жабу',
+            },
+        },
+        Drawer: {
+            closeButtonProps: {
+                'aria-label': 'Жабу',
+            },
+        },
         Loader: {
             'aria-label': 'Жүктеу',
         },
@@ -51,6 +71,16 @@ export var enUS = {
             clearText: 'Clear',
             loadingText: 'Loading…',
         },
+        Dialog: {
+            closeButtonProps: {
+                'aria-label': 'Close',
+            },
+        },
+        Drawer: {
+            closeButtonProps: {
+                'aria-label': 'Close',
+            },
+        },
         Loader: {
             'aria-label': 'Loading',
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.34.3",
+  "version": "0.35.0",
   "description": "React component library",
   "files": [
     "*"