@ozen-ui/kit 0.79.0 → 0.81.0

package/__inner__/esm/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__/esm/components/ChipNext/types.js

@@ -1,9 +1 @@
-// ---- COLOR ----
-export var chipColorVariant = [
-    'primary',
-    'secondary',
-    'main',
-    'overlay',
-];
-// ---- SIZE ----
-export var chipSizeVariant = ['xs', 's', 'm', 'l'];
+export {};

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

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

package/__inner__/esm/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__/esm/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__/esm/components/DialogNext/Dialog.js

@@ -6,6 +6,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, { forwardRef } from 'react';

package/__inner__/esm/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__/esm/components/DialogNext/components/DialogBottomSheet/DialogBottomSheet.js

@@ -6,11 +6,11 @@ import { BottomSheetBase, BottomSheetBaseHeader, } from '../../../BottomSheetBas
 import { DIALOG_BOTTOM_SHEET_MAX_HEIGHT_BY_VARIANT, DIALOG_BOTTOM_SHEET_SNAPS_BY_VARIANT, } from './constants';
 export var cnDialogBottomSheet = cn('DialogNextBottomSheet');
 export var DialogBottomSheet = 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 = __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 = __rest(_a, ["children", "open", "closeButton", "onClose", "size", "variant", "className", "hideCloseButton", "headerProps"]);
     return (React.createElement(BottomSheetBase, __assign({ ref: ref, className: cnDialogBottomSheet({
             size: size,
         }, [className]), bottomSheetClassName: cnDialogBottomSheet('BottomSheet'), snaps: DIALOG_BOTTOM_SHEET_SNAPS_BY_VARIANT[variant], maxHeight: DIALOG_BOTTOM_SHEET_MAX_HEIGHT_BY_VARIANT[variant], open: open, onClose: onClose, role: "dialog" }, other),
-        React.createElement(BottomSheetBaseHeader, { className: cnDialogBottomSheet('Header') }, !hideCloseButton && (React.createElement("div", { className: cnDialogBottomSheet('CloseButton') }, closeButton))),
+        React.createElement(BottomSheetBaseHeader, __assign({}, headerProps, { className: cnDialogBottomSheet('Header', [headerProps === null || headerProps === void 0 ? void 0 : headerProps.className]) }), !hideCloseButton && (React.createElement("div", { className: cnDialogBottomSheet('CloseButton') }, closeButton))),
         children));
 });
 DialogBottomSheet.displayName = 'DialogBottomSheet';

package/__inner__/esm/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__/esm/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__/esm/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__/esm/components/DialogNext/modules/DialogFooter/index.js

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

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

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

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

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

package/__inner__/esm/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__/esm/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__/esm/components/DialogNext/modules/DialogIllustration/DialogIllustration.js

@@ -0,0 +1,10 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { polymorphicComponentWithRef, cn } from '../../../../utils';
+import { DIALOG_ILLUSTRATION_DEFAULT_TAG } from './constants';
+export var cnDialogIllustration = cn('DialogNextIllustration');
+export var DialogIllustration = polymorphicComponentWithRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.as, Tag = _b === void 0 ? DIALOG_ILLUSTRATION_DEFAULT_TAG : _b, other = __rest(_a, ["children", "className", "as"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnDialogIllustration('', [className]) }), children));
+});
+DialogIllustration.displayName = 'DialogIllustration';

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

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

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

@@ -0,0 +1 @@
+export var DIALOG_ILLUSTRATION_DEFAULT_TAG = 'div';

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

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

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

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

package/__inner__/esm/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__/esm/components/DialogNext/modules/DialogIllustration/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/__inner__/esm/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__/esm/components/DialogNext/modules/index.js

@@ -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__/esm/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__/esm/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__/esm/components/FilePicker/FilePicker.js

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

package/__inner__/esm/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__/esm/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__/esm/components/Modal/Modal.js

@@ -9,16 +9,21 @@ import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { useLockBodyScroll } from '../../hooks/useLockBodyScroll';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { usePortalContainer } from '../../hooks/usePortalContainer';
+import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { Backdrop } from '../Backdrop';
 import { PortalBase } from '../PortalBase';
 import { ModalConsumer } from './components';
-import { MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE, MODAL_DEFAULT_DISABLE_SCROLL_LOCK, MODAL_DEFAULT_ESCAPE_KEY_DOWN, MODAL_DEFAULT_HIDE_BACKDROP, MODAL_DEFAULT_KEEP_MOUNTED, MODAL_DEFAULT_OPEN, MODAL_DEFAULT_PORTAL_CONTAINER, } from './constants';
+import { MODAL_DEFAULT_CLOSE_ONLY_ON_TOP, MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE, MODAL_DEFAULT_DISABLE_SCROLL_LOCK, MODAL_DEFAULT_ESCAPE_KEY_DOWN, MODAL_DEFAULT_HIDE_BACKDROP, MODAL_DEFAULT_KEEP_MOUNTED, MODAL_DEFAULT_OPEN, MODAL_DEFAULT_PORTAL_CONTAINER, } from './constants';
 import { useModalManager } from './index';
 export var cnModal = cn('Modal');
-export var Modal = forwardRef(function (_a, ref) {
-    var _b = _a.open, open = _b === void 0 ? MODAL_DEFAULT_OPEN : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? MODAL_DEFAULT_KEEP_MOUNTED : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? MODAL_DEFAULT_HIDE_BACKDROP : _d, _e = _a.disableScrollLock, disableScrollLock = _e === void 0 ? MODAL_DEFAULT_DISABLE_SCROLL_LOCK : _e, _f = _a.disableClickOutside, disableClickOutside = _f === void 0 ? MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = _a.disableEscapeKeyDown, disableEscapeKeyDown = _g === void 0 ? 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 ? MODAL_DEFAULT_PORTAL_CONTAINER : _h, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "disableScrollLock", "disableClickOutside", "disableEscapeKeyDown", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className", "ignoreClickOutsideRefs", "container"]);
+export var Modal = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        name: 'Modal',
+        props: inProps,
+    });
+    var _a = props.open, open = _a === void 0 ? MODAL_DEFAULT_OPEN : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? MODAL_DEFAULT_KEEP_MOUNTED : _b, _c = props.hideBackdrop, hideBackdrop = _c === void 0 ? MODAL_DEFAULT_HIDE_BACKDROP : _c, _d = props.disableScrollLock, disableScrollLock = _d === void 0 ? MODAL_DEFAULT_DISABLE_SCROLL_LOCK : _d, _e = props.disableClickOutside, disableClickOutside = _e === void 0 ? MODAL_DEFAULT_DISABLE_CLICK_OUTSIDE : _e, _f = props.disableEscapeKeyDown, disableEscapeKeyDown = _f === void 0 ? 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 ? MODAL_DEFAULT_PORTAL_CONTAINER : _g, _h = props.closeOnlyOnTop, closeOnlyOnTop = _h === void 0 ? MODAL_DEFAULT_CLOSE_ONLY_ON_TOP : _h, other = __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 = useRef(null);
     var windowInnerRef = useRef(null);
@@ -32,6 +37,7 @@ export var Modal = forwardRef(function (_a, ref) {
         active: isTop,
         focusinTrap: false,
     });
+    var isCloseHandlersActive = closeOnlyOnTop ? isTop : true;
     var modalConsumerMultiRef = useMultiRef([
         windowInnerRef,
         trapRef,
@@ -42,7 +48,7 @@ export var Modal = forwardRef(function (_a, ref) {
             windowInnerRef
         ], __read(refsClickOutside), false), __read((ignoreClickOutsideRefs || [])), false),
         handler: onClose,
-        active: open && !disableClickOutside,
+        active: open && !disableClickOutside && isCloseHandlersActive,
     });
     // Блокирует прокрутку основного окна приложения
     useLockBodyScroll(opened && !disableScrollLock);
@@ -78,13 +84,15 @@ export var Modal = 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.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), nodeRef: rootRef, timeout: 300 }, transitionProps, { in: openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
-        React.createElement(PortalBase, __assign({}, other, { container: container, className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: portalMultiRef }),
+        React.createElement(PortalBase, __assign({}, other, { container: container, className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [
+                className,
+            ]), ref: portalMultiRef }),
             !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1, open: openState }, backdropProps, { className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
             React.createElement(ModalConsumer, __assign({}, windowProps, { ref: modalConsumerMultiRef }), children))));
 });

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

@@ -7,3 +7,4 @@ export var MODAL_DEFAULT_ESCAPE_KEY_DOWN = false;
 export var MODAL_DEFAULT_PORTAL_CONTAINER = (function () {
     return window.document.body;
 });
+export var MODAL_DEFAULT_CLOSE_ONLY_ON_TOP = true;

package/__inner__/esm/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__/esm/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__/esm/components/Select/components/SelectInputRenderRight/SelectInputRenderRight.js

@@ -1,17 +1,20 @@
 import { __read } from "tslib";
-import React from 'react';
+import React, { Fragment } from 'react';
 import { classnames } from '@bem-react/classnames';
 import { ChevronDownIcon, CrossIcon } from '@ozen-ui/icons';
+import { isElement } from 'react-is';
+import { isNodeWithDisplayName } from '../../../../utils';
 import { useFieldControl } from '../../../FieldControl';
 import { FieldIcon } from '../../../FieldIcon';
 import { IconButton } from '../../../IconButtonNext';
 import { cnSelect } from '../../classNames';
+import { SELECT_ICON_BUTTON_DISPLAY_NAME } from '../../modules';
 import { useSelectContext } from '../../SelectContext';
 export var SelectInputRenderRight = function () {
     var _a = __read(useFieldControl(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
     var _c = 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.createElement(IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+    var clearButton = (React.createElement(IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: CrossIcon, color: "tertiary", title: clearText, "aria-label": clearText, onClick: function (event) {
             event.preventDefault();
             event.stopPropagation();
             onClear === null || onClear === void 0 ? void 0 : onClear(event);
@@ -22,6 +25,11 @@ export var SelectInputRenderRight = function () {
         showClearButton && !isVisibleClearButton && clearButton,
         renderRightLayout.map(function (element) {
             if (element === 'suffix') {
+                var isSelectIconButton = isElement(renderRight) &&
+                    isNodeWithDisplayName(renderRight, SELECT_ICON_BUTTON_DISPLAY_NAME);
+                if (isSelectIconButton) {
+                    return React.createElement(Fragment, { key: element }, renderRight);
+                }
                 return (React.createElement(FieldIcon, { key: element, icon: renderRight, className: classnames(cnSelect('RenderRight', { nonInteractive: true }), cnSelect('Suffix')) }));
             }
             if (element === 'clear') {

package/__inner__/esm/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__/esm/components/Select/index.js

@@ -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__/esm/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">;

package/__inner__/esm/components/Select/modules/SelectIconButton/SelectIconButton.js

@@ -0,0 +1,23 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { IconButton } from '../../../IconButtonNext';
+import { cnSelect } from '../../classNames';
+import { useSelectContext } from '../../SelectContext';
+import { SELECT_ICON_BUTTON_DEFAULT_TAG, SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX, SELECT_ICON_BUTTON_DISPLAY_NAME, } from './constants';
+export var cnSelectIconButton = cn('SelectIconButton');
+export var SelectIconButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SelectIconButton',
+    });
+    var icon = props.icon, onClick = props.onClick, className = props.className, _a = props.as, as = _a === void 0 ? SELECT_ICON_BUTTON_DEFAULT_TAG : _a, _b = props.tabIndex, tabIndex = _b === void 0 ? SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX : _b, other = __rest(props, ["icon", "onClick", "className", "as", "tabIndex"]);
+    var size = useSelectContext().size;
+    return (React.createElement(IconButton, __assign({}, other, { ref: ref, as: as, tabIndex: tabIndex, size: size, variant: "function", icon: icon, color: "tertiary", onClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }, compressed: true, className: cnSelectIconButton('', [cnSelect('Suffix'), className]) })));
+});
+SelectIconButton.displayName = SELECT_ICON_BUTTON_DISPLAY_NAME;

package/__inner__/esm/components/Select/modules/SelectIconButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SELECT_ICON_BUTTON_DEFAULT_TAG = "button";
+export declare const SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX = -1;
+export declare const SELECT_ICON_BUTTON_DISPLAY_NAME = "SelectIconButton";

package/__inner__/esm/components/Select/modules/SelectIconButton/constants.js

@@ -0,0 +1,4 @@
+import { ICON_BUTTON_DEFAULT_TAG } from '../../../IconButtonNext';
+export var SELECT_ICON_BUTTON_DEFAULT_TAG = ICON_BUTTON_DEFAULT_TAG;
+export var SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX = -1;
+export var SELECT_ICON_BUTTON_DISPLAY_NAME = 'SelectIconButton';

package/__inner__/esm/components/Select/modules/SelectIconButton/index.d.ts

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

package/__inner__/esm/components/Select/modules/SelectIconButton/index.js

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