@ozen-ui/kit 0.79.0 → 0.81.0

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

@@ -1,17 +1,7 @@
-import type { ElementType, MouseEvent, ReactNode } from 'react';
-import type { IconProps } from '@ozen-ui/icons';
+import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import type { RenderContentType } from '../../utils/renderContent';
 import type { CHIP_DEFAULT_TAG } from './constants';
-export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay"];
-export type ChipColorVariant = (typeof chipColorVariant)[number];
-export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
-export type ChipSizeVariant = (typeof chipSizeVariant)[number];
-export type ChipIcon = RenderContentType<IconProps>['content'];
-export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
-    checked: boolean;
-    value: string | undefined;
-}) => void;
+import type { ChipColorVariant, ChipSizeVariant, ChipOnClick, ChipIcon } from './entities';
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -39,3 +29,4 @@ export type ChipBaseProps = {
     'data-testid'?: string;
 };
 export type ChipProps<As extends ElementType = typeof CHIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ChipBaseProps, As>;
+export type ChipRef<As extends ElementType = typeof CHIP_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/cjs/components/ChipNext/types.js

@@ -1,12 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipSizeVariant = exports.chipColorVariant = void 0;
-// ---- COLOR ----
-exports.chipColorVariant = [
-    'primary',
-    'secondary',
-    'main',
-    'overlay',
-];
-// ---- SIZE ----
-exports.chipSizeVariant = ['xs', 's', 'm', 'l'];

package/__inner__/cjs/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.js

@@ -17,7 +17,7 @@ var DatePickerRenderRight = function (_a) {
         onClear === null || onClear === void 0 ? void 0 : onClear(e);
     };
     return (react_1.default.createElement("div", { className: (0, index_1.cnDatePicker)('RenderRight') },
-        !disableClearButton && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.CrossIcon, title: clearText, variant: "function", onClick: handleClear, "aria-label": clearText, className: (0, index_1.cnDatePicker)('ClearButton', {
+        !disableClearButton && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.CrossIcon, title: clearText, variant: "function", color: "tertiary", onClick: handleClear, "aria-label": clearText, className: (0, index_1.cnDatePicker)('ClearButton', {
                 visibility: isVisibleClearButton,
             }), compressed: true })),
         react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),

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

@@ -34,6 +34,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
+    closeOnlyOnTop?: boolean;
 } & {
     container?: import("../../hooks/usePortalContainer").PortalContainer;
 } & Omit<import("../PortalBase").PortalBaseBaseProps, "container"> & {

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

@@ -5,6 +5,7 @@ import './modules/DialogBody/DialogBody.css';
 import './modules/DialogFooter/DialogFooter.css';
 import './modules/DialogFooterButtonsGroup/DialogFooterButtonsGroup.css';
 import './modules/DialogHeader/DialogHeader.css';
+import './modules/DialogIllustration/DialogIllustration.css';
 import './modules/DialogSubtitle/DialogSubtitle.css';
 import './modules/DialogTitle/DialogTitle.css';
 import React from 'react';

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

@@ -9,6 +9,7 @@ require("./modules/DialogBody/DialogBody.css");
 require("./modules/DialogFooter/DialogFooter.css");
 require("./modules/DialogFooterButtonsGroup/DialogFooterButtonsGroup.css");
 require("./modules/DialogHeader/DialogHeader.css");
+require("./modules/DialogIllustration/DialogIllustration.css");
 require("./modules/DialogSubtitle/DialogSubtitle.css");
 require("./modules/DialogTitle/DialogTitle.css");
 var react_1 = tslib_1.__importStar(require("react"));

package/__inner__/cjs/components/DialogNext/components/DialogBottomSheet/DialogBottomSheet.d.ts

@@ -9,4 +9,5 @@ export declare const DialogBottomSheet: React.ForwardRefExoticComponent<{
     hideCloseButton: boolean | undefined;
     className: string | undefined;
     onClose: (() => void) | undefined;
-} & Omit<Omit<import("../../../BottomSheetBase").BottomSheetBaseProps, "snaps">, "className" | "size" | "open" | "variant" | "onClose" | "hideCloseButton" | "closeButton"> & React.RefAttributes<HTMLDivElement>>;
+    headerProps?: Omit<import("../../../BottomSheetBase").BottomSheetBaseHeaderProps, "children">;
+} & Omit<Omit<import("../../../BottomSheetBase").BottomSheetBaseProps, "snaps">, "className" | "size" | "open" | "variant" | "onClose" | "hideCloseButton" | "closeButton" | "headerProps"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DialogNext/components/DialogBottomSheet/DialogBottomSheet.js

@@ -9,11 +9,11 @@ var BottomSheetBase_1 = require("../../../BottomSheetBase");
 var constants_1 = require("./constants");
 exports.cnDialogBottomSheet = (0, classname_1.cn)('DialogNextBottomSheet');
 exports.DialogBottomSheet = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, open = _a.open, closeButton = _a.closeButton, onClose = _a.onClose, size = _a.size, variant = _a.variant, className = _a.className, hideCloseButton = _a.hideCloseButton, other = tslib_1.__rest(_a, ["children", "open", "closeButton", "onClose", "size", "variant", "className", "hideCloseButton"]);
+    var children = _a.children, open = _a.open, closeButton = _a.closeButton, onClose = _a.onClose, size = _a.size, variant = _a.variant, className = _a.className, hideCloseButton = _a.hideCloseButton, headerProps = _a.headerProps, other = tslib_1.__rest(_a, ["children", "open", "closeButton", "onClose", "size", "variant", "className", "hideCloseButton", "headerProps"]);
     return (react_1.default.createElement(BottomSheetBase_1.BottomSheetBase, tslib_1.__assign({ ref: ref, className: (0, exports.cnDialogBottomSheet)({
             size: size,
         }, [className]), bottomSheetClassName: (0, exports.cnDialogBottomSheet)('BottomSheet'), snaps: constants_1.DIALOG_BOTTOM_SHEET_SNAPS_BY_VARIANT[variant], maxHeight: constants_1.DIALOG_BOTTOM_SHEET_MAX_HEIGHT_BY_VARIANT[variant], open: open, onClose: onClose, role: "dialog" }, other),
-        react_1.default.createElement(BottomSheetBase_1.BottomSheetBaseHeader, { className: (0, exports.cnDialogBottomSheet)('Header') }, !hideCloseButton && (react_1.default.createElement("div", { className: (0, exports.cnDialogBottomSheet)('CloseButton') }, closeButton))),
+        react_1.default.createElement(BottomSheetBase_1.BottomSheetBaseHeader, tslib_1.__assign({}, headerProps, { className: (0, exports.cnDialogBottomSheet)('Header', [headerProps === null || headerProps === void 0 ? void 0 : headerProps.className]) }), !hideCloseButton && (react_1.default.createElement("div", { className: (0, exports.cnDialogBottomSheet)('CloseButton') }, closeButton))),
         children));
 });
 exports.DialogBottomSheet.displayName = 'DialogBottomSheet';

package/__inner__/cjs/components/DialogNext/components/DialogBottomSheet/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ExtendableProps } from '../../../../types/ExtendableProps';
-import type { BottomSheetBaseProps } from '../../../BottomSheetBase';
+import type { BottomSheetBaseHeaderProps, BottomSheetBaseProps } from '../../../BottomSheetBase';
 import type { DialogVariant, DialogSizeAllVariants } from '../../entities';
 import type { DialogRef } from '../../types';
 export type DialogBottomSheetRef = DialogRef;
@@ -12,4 +12,5 @@ export type DialogBottomSheetProps = ExtendableProps<{
     hideCloseButton: boolean | undefined;
     className: string | undefined;
     onClose: (() => void) | undefined;
+    headerProps?: Omit<BottomSheetBaseHeaderProps, 'children'>;
 }, Omit<BottomSheetBaseProps, 'snaps'>>;

package/__inner__/cjs/components/DialogNext/components/DialogModal/DialogModal.d.ts

@@ -30,6 +30,7 @@ export declare const DialogModal: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
+    closeOnlyOnTop?: boolean;
 } & {
     container?: import("../../../../hooks/usePortalContainer").PortalContainer;
 } & Omit<import("../../../PortalBase").PortalBaseBaseProps, "container"> & {

package/__inner__/cjs/components/DialogNext/modules/DialogFooter/index.d.ts

@@ -1,3 +1,4 @@
-export * from './DialogFooter';
 export * from './entities';
+export * from './constants';
+export * from './DialogFooter';
 export * from './types';

package/__inner__/cjs/components/DialogNext/modules/DialogFooter/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./DialogFooter"), exports);
 tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./DialogFooter"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/index.d.ts

@@ -1,2 +1,3 @@
+export * from './constants';
 export * from './DialogHeader';
 export * from './types';

package/__inner__/cjs/components/DialogNext/modules/DialogHeader/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./DialogHeader"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/DialogIllustration.css

@@ -0,0 +1,5 @@
+.DialogNextIllustration {
+  block-size: 80px;
+  inline-size: 80px;
+  margin-block-end: var(--spacing-m);
+}

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/DialogIllustration.d.ts

@@ -0,0 +1,3 @@
+import type { DialogIllustrationBaseProps } from './types';
+export declare const cnDialogIllustration: import("@bem-react/classname").ClassNameFormatter;
+export declare const DialogIllustration: import("../../../../utils").PolymorphicComponentWithRef<DialogIllustrationBaseProps, "div", "as">;

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/DialogIllustration.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogIllustration = exports.cnDialogIllustration = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var utils_1 = require("../../../../utils");
+var constants_1 = require("./constants");
+exports.cnDialogIllustration = (0, utils_1.cn)('DialogNextIllustration');
+exports.DialogIllustration = (0, utils_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.as, Tag = _b === void 0 ? constants_1.DIALOG_ILLUSTRATION_DEFAULT_TAG : _b, other = tslib_1.__rest(_a, ["children", "className", "as"]);
+    return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnDialogIllustration)('', [className]) }), children));
+});
+exports.DialogIllustration.displayName = 'DialogIllustration';

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/constants.d.ts

@@ -0,0 +1 @@
+export declare const DIALOG_ILLUSTRATION_DEFAULT_TAG = "div";

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/constants.js

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

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './DialogIllustration';
+export * from './types';

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./DialogIllustration"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils';
+import type { DIALOG_ILLUSTRATION_DEFAULT_TAG } from './constants';
+export type DialogIllustrationRef<As extends ElementType = typeof DIALOG_ILLUSTRATION_DEFAULT_TAG> = ComponentRef<As>;
+export type DialogIllustrationBaseProps = {
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type DialogIllustrationProps<As extends ElementType = typeof DIALOG_ILLUSTRATION_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<DialogIllustrationBaseProps, As>;

package/__inner__/cjs/components/DialogNext/modules/DialogIllustration/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/index.d.ts

@@ -1 +1,2 @@
 export * from './DialogTitle';
+export * from './types';

package/__inner__/cjs/components/DialogNext/modules/DialogTitle/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DialogTitle"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/DialogNext/modules/index.d.ts

@@ -4,5 +4,6 @@ export * from './DialogFooter';
 export * from './DialogFooterButton';
 export * from './DialogFooterButtonsGroup';
 export * from './DialogHeader';
+export * from './DialogIllustration';
 export * from './DialogSubtitle';
 export * from './DialogTitle';

package/__inner__/cjs/components/DialogNext/modules/index.js

@@ -7,5 +7,6 @@ tslib_1.__exportStar(require("./DialogFooter"), exports);
 tslib_1.__exportStar(require("./DialogFooterButton"), exports);
 tslib_1.__exportStar(require("./DialogFooterButtonsGroup"), exports);
 tslib_1.__exportStar(require("./DialogHeader"), exports);
+tslib_1.__exportStar(require("./DialogIllustration"), exports);
 tslib_1.__exportStar(require("./DialogSubtitle"), exports);
 tslib_1.__exportStar(require("./DialogTitle"), exports);

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

@@ -6,8 +6,8 @@ import type { DIALOG_DEFAULT_DEVICE_TYPE } from './constants';
 import type { DialogDeviceType, DialogSizeVariantByDeviceType, DialogVariant } from './entities';
 export type DialogRef = HTMLDivElement;
 export type DialogRenderCloseButton = RenderContentTypeEmptyProps['content'];
-export type DialogContentBottomSheetProps = Omit<DialogBottomSheetProps, 'hideCloseButton' | 'backdrop' | 'open' | 'size' | 'variant' | 'closeButton' | 'onClose' | 'className'>;
-export type DialogContentModalProps = Omit<DialogModalProps, 'open' | 'onClose' | 'hideCloseButton' | 'className' | 'closeButton' | 'size' | 'variant'>;
+export type DialogContentBottomSheetProps = Omit<DialogBottomSheetProps, 'hideCloseButton' | 'backdrop' | 'open' | 'size' | 'variant' | 'closeButton' | 'onClose' | 'className' | 'children'>;
+export type DialogContentModalProps = Omit<DialogModalProps, 'open' | 'onClose' | 'hideCloseButton' | 'className' | 'closeButton' | 'size' | 'variant' | 'children'>;
 export type DialogBaseProps = {
     /** Если `true`, будет отображаться окно диалога */
     open: boolean;

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

@@ -35,6 +35,7 @@ export declare const Drawer: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
+    closeOnlyOnTop?: boolean;
 } & {
     container?: import("../../hooks/usePortalContainer").PortalContainer;
 } & Omit<import("../PortalBase").PortalBaseBaseProps, "container"> & {

package/__inner__/cjs/components/FilePicker/FilePicker.js

@@ -66,7 +66,7 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
                 react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: (0, exports.cnFilePicker)('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
                 hasFiles ? (react_1.default.createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1.default.createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
             react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('RenderRight') },
-                onClearProp && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, icon: icons_1.CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: (0, exports.cnFilePicker)('ClearButton', {
+                onClearProp && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, icon: icons_1.CrossIcon, color: "tertiary", onClick: onClear, variant: "function", "aria-label": clearText, className: (0, exports.cnFilePicker)('ClearButton', {
                         visibility: hasFiles,
                     }) })),
                 react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight })),

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

@@ -90,10 +90,10 @@
       --color-content-action-secondary-pressed
     );
     --icon-button-bg-color-focus: var(--color-content-action-secondary-hover);
-    --icon-button-font-color: var(--color-content-action-on);
-    --icon-button-font-color-hover: var(--color-content-action-on);
-    --icon-button-font-color-active: var(--color-content-action-on);
-    --icon-button-font-color-focus: var(--color-content-action-on);
+    --icon-button-font-color: var(--color-content-primary-inverse);
+    --icon-button-font-color-hover: var(--color-content-primary-inverse);
+    --icon-button-font-color-active: var(--color-content-primary-inverse);
+    --icon-button-font-color-focus: var(--color-content-primary-inverse);
   }
 
   .IconButtonNext_variant_contained.IconButtonNext_color_tertiary {
@@ -125,17 +125,17 @@
     --icon-button-bg-color-hover: var(--color-background-action-light-hover);
     --icon-button-bg-color-active: var(--color-background-action-light-pressed);
     --icon-button-bg-color-focus: var(--color-background-action-light-hover);
-    --icon-button-font-color: var(--color-content-action);
-    --icon-button-font-color-hover: var(--color-content-action);
-    --icon-button-font-color-active: var(--color-content-action);
-    --icon-button-font-color-focus: var(--color-content-action);
+    --icon-button-font-color: var(--color-content-action-dark);
+    --icon-button-font-color-hover: var(--color-content-action-dark);
+    --icon-button-font-color-active: var(--color-content-action-dark);
+    --icon-button-font-color-focus: var(--color-content-action-dark);
   }
 
   .IconButtonNext_variant_contained-additional.IconButtonNext_color_secondary {
-    --icon-button-bg-color: var(--color-background-secondary);
-    --icon-button-bg-color-hover: var(--color-background-secondary-hover);
-    --icon-button-bg-color-active: var(--color-background-secondary-pressed);
-    --icon-button-bg-color-focus: var(--color-background-secondary-hover);
+    --icon-button-bg-color: var(--color-background-action-secondary-light);
+    --icon-button-bg-color-hover: var(--color-background-action-secondary-light-hover);
+    --icon-button-bg-color-active: var(--color-background-action-secondary-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-secondary-light-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -158,10 +158,10 @@
     --icon-button-bg-color-hover: var(--color-background-error-light-hover);
     --icon-button-bg-color-active: var(--color-background-error-light-pressed);
     --icon-button-bg-color-focus: var(--color-background-error-light-hover);
-    --icon-button-font-color: var(--color-content-error);
-    --icon-button-font-color-hover: var(--color-content-error);
-    --icon-button-font-color-active: var(--color-content-error);
-    --icon-button-font-color-focus: var(--color-content-error);
+    --icon-button-font-color: var(--color-content-error-dark);
+    --icon-button-font-color-hover: var(--color-content-error-dark);
+    --icon-button-font-color-active: var(--color-content-error-dark);
+    --icon-button-font-color-focus: var(--color-content-error-dark);
   }
 
   /** ghost */
@@ -179,9 +179,9 @@
 
   .IconButtonNext_variant_ghost.IconButtonNext_color_secondary {
     --icon-button-bg-color: transparent;
-    --icon-button-bg-color-hover: var(--color-background-secondary-hover);
-    --icon-button-bg-color-active: var(--color-background-secondary-pressed);
-    --icon-button-bg-color-focus: var(--color-background-secondary-hover);
+    --icon-button-bg-color-hover: var(--color-background-action-secondary-light);
+    --icon-button-bg-color-active: var(--color-background-action-secondary-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-secondary-light-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -230,32 +230,28 @@
     --icon-button-font-color: var(--color-content-action);
     --icon-button-font-color-hover: var(--color-background-action-hover);
     --icon-button-font-color-active: var(--color-background-action-pressed);
-    --icon-button-font-color-focus: var(--color-background-action-pressed);
+    --icon-button-font-color-focus: var(--color-background-action-hover);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_secondary {
     --icon-button-font-color: var(--color-content-action-secondary);
     --icon-button-font-color-hover: var(--color-content-action-secondary-hover);
-    --icon-button-font-color-active: var(
-      --color-content-action-secondary-pressed
-    );
-    --icon-button-font-color-focus: var(
-      --color-content-action-secondary-pressed
-    );
+    --icon-button-font-color-active: var(--color-content-action-secondary-pressed);
+    --icon-button-font-color-focus: var(--color-content-action-secondary-hover);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_tertiary {
     --icon-button-font-color: var(--color-content-secondary);
-    --icon-button-font-color-hover: var(--color-content-secondary);
-    --icon-button-font-color-active: var(--color-content-secondary);
-    --icon-button-font-color-focus: var(--color-content-secondary);
+    --icon-button-font-color-hover: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_error {
     --icon-button-font-color: var(--color-content-error);
     --icon-button-font-color-hover: var(--color-content-error-hover);
     --icon-button-font-color-active: var(--color-content-error-pressed);
-    --icon-button-font-color-focus: var(--color-content-error-pressed);
+    --icon-button-font-color-focus: var(--color-content-error-hover);
   }
 
   /** floating */

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

@@ -24,6 +24,7 @@ export declare const Modal: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
+    closeOnlyOnTop?: boolean;
 } & {
     container?: import("../../hooks/usePortalContainer").PortalContainer;
 } & Omit<import("../PortalBase").PortalBaseBaseProps, "container"> & {

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

@@ -12,6 +12,7 @@ var useFocusTrap_1 = require("../../hooks/useFocusTrap");
 var useLockBodyScroll_1 = require("../../hooks/useLockBodyScroll");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var usePortalContainer_1 = require("../../hooks/usePortalContainer");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var Backdrop_1 = require("../Backdrop");
@@ -20,8 +21,12 @@ var components_1 = require("./components");
 var constants_1 = require("./constants");
 var index_1 = require("./index");
 exports.cnModal = (0, classname_1.cn)('Modal');
-exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.open, open = _b === void 0 ? constants_1.MODAL_DEFAULT_OPEN : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? constants_1.MODAL_DEFAULT_KEEP_MOUNTED : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? constants_1.MODAL_DEFAULT_HIDE_BACKDROP : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? constants_1.MODAL_DEFAULT_DISABLE_SCROLL_LOCK : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? constants_1.MODAL_DEFAULT_ESCAPE_KEY_DOWN : _g, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, ignoreClickOutsideRefs = _a.ignoreClickOutsideRefs, _h = _a.container, containerProp = _h === void 0 ? constants_1.MODAL_DEFAULT_PORTAL_CONTAINER : _h, other = tslib_1.__rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs", "container"]);
+exports.Modal = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        name: 'Modal',
+        props: inProps,
+    });
+    var _a = props.open, open = _a === void 0 ? constants_1.MODAL_DEFAULT_OPEN : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? constants_1.MODAL_DEFAULT_KEEP_MOUNTED : _b, _c = props.hideBackdrop, hideBackdrop = _c === void 0 ? constants_1.MODAL_DEFAULT_HIDE_BACKDROP : _c, _d = props.disableScrollLock, disableScrollLock = _d === void 0 ? constants_1.MODAL_DEFAULT_DISABLE_SCROLL_LOCK : _d, _e = props.disableClickOutside, disableClickOutside = _e === void 0 ? constants_1.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE : _e, _f = props.disableEscapeKeyDown, disableEscapeKeyDown = _f === void 0 ? constants_1.MODAL_DEFAULT_ESCAPE_KEY_DOWN : _f, children = props.children, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, onClose = props.onClose, backdropProps = props.backdropProps, windowProps = props.windowProps, transitionProps = props.transitionProps, className = props.className, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, _g = props.container, containerProp = _g === void 0 ? constants_1.MODAL_DEFAULT_PORTAL_CONTAINER : _g, _h = props.closeOnlyOnTop, closeOnlyOnTop = _h === void 0 ? constants_1.MODAL_DEFAULT_CLOSE_ONLY_ON_TOP : _h, other = tslib_1.__rest(props, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs", "container", "closeOnlyOnTop"]);
     var hasBackdrop = !hideBackdrop;
     var rootRef = (0, react_1.useRef)(null);
     var windowInnerRef = (0, react_1.useRef)(null);
@@ -35,6 +40,7 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
         active: isTop,
         focusinTrap: false,
     });
+    var isCloseHandlersActive = closeOnlyOnTop ? isTop : true;
     var modalConsumerMultiRef = (0, useMultiRef_1.useMultiRef)([
         windowInnerRef,
         trapRef,
@@ -45,7 +51,7 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
             windowInnerRef
         ], tslib_1.__read(refsClickOutside), false), tslib_1.__read((ignoreClickOutsideRefs || [])), false),
         handler: onClose,
-        active: open && !disableClickOutside,
+        active: open && !disableClickOutside && isCloseHandlersActive,
     });
     // Блокирует прокрутку основного окна приложения
     (0, useLockBodyScroll_1.useLockBodyScroll)(opened && !disableScrollLock);
@@ -81,13 +87,15 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
                 return;
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
-        active: isTop && !disableEscapeKeyDown,
+        active: isCloseHandlersActive && !disableEscapeKeyDown,
     });
     if (!container) {
         return null;
     }
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnModal)({ animation: true }), nodeRef: rootRef, timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
-        react_1.default.createElement(PortalBase_1.PortalBase, tslib_1.__assign({}, other, { container: container, className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: portalMultiRef }),
+        react_1.default.createElement(PortalBase_1.PortalBase, tslib_1.__assign({}, other, { container: container, className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [
+                className,
+            ]), ref: portalMultiRef }),
             !hideBackdrop && (react_1.default.createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1, open: openState }, backdropProps, { className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
             react_1.default.createElement(components_1.ModalConsumer, tslib_1.__assign({}, windowProps, { ref: modalConsumerMultiRef }), children))));
 });

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

@@ -5,3 +5,4 @@ export declare const MODAL_DEFAULT_DISABLE_SCROLL_LOCK = false;
 export declare const MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = false;
 export declare const MODAL_DEFAULT_ESCAPE_KEY_DOWN = false;
 export declare const MODAL_DEFAULT_PORTAL_CONTAINER: () => HTMLElement;
+export declare const MODAL_DEFAULT_CLOSE_ONLY_ON_TOP = true;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MODAL_DEFAULT_PORTAL_CONTAINER = exports.MODAL_DEFAULT_ESCAPE_KEY_DOWN = exports.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.MODAL_DEFAULT_DISABLE_SCROLL_LOCK = exports.MODAL_DEFAULT_HIDE_BACKDROP = exports.MODAL_DEFAULT_KEEP_MOUNTED = exports.MODAL_DEFAULT_OPEN = void 0;
+exports.MODAL_DEFAULT_CLOSE_ONLY_ON_TOP = exports.MODAL_DEFAULT_PORTAL_CONTAINER = exports.MODAL_DEFAULT_ESCAPE_KEY_DOWN = exports.MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE = exports.MODAL_DEFAULT_DISABLE_SCROLL_LOCK = exports.MODAL_DEFAULT_HIDE_BACKDROP = exports.MODAL_DEFAULT_KEEP_MOUNTED = exports.MODAL_DEFAULT_OPEN = void 0;
 exports.MODAL_DEFAULT_OPEN = false;
 exports.MODAL_DEFAULT_KEEP_MOUNTED = false;
 exports.MODAL_DEFAULT_HIDE_BACKDROP = false;
@@ -10,3 +10,4 @@ exports.MODAL_DEFAULT_ESCAPE_KEY_DOWN = false;
 exports.MODAL_DEFAULT_PORTAL_CONTAINER = (function () {
     return window.document.body;
 });
+exports.MODAL_DEFAULT_CLOSE_ONLY_ON_TOP = true;

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

@@ -49,5 +49,7 @@ export type ModalProps = {
     'data-testid'?: string;
     /** Список ссылок на элементы при клике на которые Modal не будет закрываться (см. хук useClickOutside) */
     ignoreClickOutsideRefs?: RefObject<HTMLElement>[];
+    /** Закрыть только если окно находится на самом верхнем слое */
+    closeOnlyOnTop?: boolean;
 } & PortalProps;
 export type ModalRef = PortalRef;

package/__inner__/cjs/components/OzenProvider/providers/theme/entities/defaultProps.d.ts

@@ -62,11 +62,11 @@ import type { RadioGroupProps as RadioGroupNextProps } from '../../../../RadioGr
 import type { RadioProps as RadioNextProps } from '../../../../RadioNext';
 import type { SectionMessageProps } from '../../../../SectionMessage';
 import type { SegmentProps } from '../../../../Segment';
-import type { SelectProps } from '../../../../Select';
+import type { SelectIconButtonProps, SelectProps } from '../../../../Select';
 import type { SliderProps } from '../../../../Slider';
 import type { SnackbarProviderProps } from '../../../../Snackbar';
 import type { StackProps } from '../../../../Stack';
-import type { StepperVerticalProps, StepperVerticalStepButtonProps, StepperVerticalStepProps, StepperVerticalIndicatorProps, StepperVerticalIconIndicatorProps } from '../../../../StepperVertical';
+import type { StepperVerticalStepSubstepButtonProps, StepperVerticalProps, StepperVerticalStepButtonProps, StepperVerticalStepProps, StepperVerticalIndicatorProps, StepperVerticalIconIndicatorProps } from '../../../../StepperVertical';
 import type { TableContainerProps, TableProps, TableCaptionProps, TableCellProps } from '../../../../Table';
 import type { TagProps } from '../../../../Tag';
 import type { TagProps as TagPropsNext } from '../../../../TagNext';
@@ -186,12 +186,14 @@ export type ThemeDefaultProps = {
     SectionMessage?: Partial<SectionMessageProps>;
     Segment?: Partial<SegmentProps>;
     Select?: Partial<SelectProps>;
+    SelectIconButton?: Partial<SelectIconButtonProps>;
     Slider?: Partial<SliderProps>;
     SnackbarProvider?: Partial<SnackbarProviderProps>;
     Stack?: Partial<StackProps>;
     StepperVertical?: Partial<StepperVerticalProps>;
     StepperVerticalStep?: Partial<StepperVerticalStepProps>;
     StepperVerticalStepButton?: Partial<StepperVerticalStepButtonProps>;
+    StepperVerticalStepSubstepButton?: Partial<StepperVerticalStepSubstepButtonProps>;
     StepperVerticalIconIndicator?: Partial<StepperVerticalIconIndicatorProps>;
     StepperVerticalIndicator?: Partial<StepperVerticalIndicatorProps>;
     Table?: Partial<TableProps>;

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

@@ -2,19 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectInputRenderRight = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var classnames_1 = require("@bem-react/classnames");
 var icons_1 = require("@ozen-ui/icons");
+var react_is_1 = require("react-is");
+var utils_1 = require("../../../../utils");
 var FieldControl_1 = require("../../../FieldControl");
 var FieldIcon_1 = require("../../../FieldIcon");
 var IconButtonNext_1 = require("../../../IconButtonNext");
 var classNames_1 = require("../../classNames");
+var modules_1 = require("../../modules");
 var SelectContext_1 = require("../../SelectContext");
 var SelectInputRenderRight = function () {
     var _a = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
     var _c = (0, SelectContext_1.useSelectContext)(), hasValue = _c.hasValue, open = _c.open, onClear = _c.onClear, renderRight = _c.renderRight, clearText = _c.clearText, renderRightLayout = _c.renderRightLayout, showClearButton = _c.showClearButton, size = _c.size;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
-    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: icons_1.CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: icons_1.CrossIcon, color: "tertiary", title: clearText, "aria-label": clearText, onClick: function (event) {
             event.preventDefault();
             event.stopPropagation();
             onClear === null || onClear === void 0 ? void 0 : onClear(event);
@@ -25,6 +28,11 @@ var SelectInputRenderRight = function () {
         showClearButton && !isVisibleClearButton && clearButton,
         renderRightLayout.map(function (element) {
             if (element === 'suffix') {
+                var isSelectIconButton = (0, react_is_1.isElement)(renderRight) &&
+                    (0, utils_1.isNodeWithDisplayName)(renderRight, modules_1.SELECT_ICON_BUTTON_DISPLAY_NAME);
+                if (isSelectIconButton) {
+                    return react_1.default.createElement(react_1.Fragment, { key: element }, renderRight);
+                }
                 return (react_1.default.createElement(FieldIcon_1.FieldIcon, { key: element, icon: renderRight, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight', { nonInteractive: true }), (0, classNames_1.cnSelect)('Suffix')) }));
             }
             if (element === 'clear') {

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

@@ -1,6 +1,7 @@
 export { DataListOption as Option } from '../DataList';
 export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
 export * from './entities';
+export * from './modules';
 export * from './constants';
 export * from './classNames';
 export * from './Select';

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

@@ -8,6 +8,7 @@ var List_1 = require("../List");
 Object.defineProperty(exports, "OptionItemText", { enumerable: true, get: function () { return List_1.ListItemText; } });
 Object.defineProperty(exports, "OptionItemIcon", { enumerable: true, get: function () { return List_1.ListItemIcon; } });
 tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./modules"), exports);
 tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./classNames"), exports);
 tslib_1.__exportStar(require("./Select"), exports);

package/__inner__/cjs/components/Select/modules/SelectIconButton/SelectIconButton.d.ts

@@ -0,0 +1,3 @@
+import type { SelectIconButtonBaseProps } from './types';
+export declare const cnSelectIconButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const SelectIconButton: import("../../../../utils").PolymorphicComponentWithRef<SelectIconButtonBaseProps, "button", "as">;