@ozen-ui/kit 0.80.0 → 0.82.0

package/__inner__/esm/components/Header/modules/HeaderContentMain/HeaderContentMain.css

@@ -0,0 +1,5 @@
+.HeaderContentMain {
+  display: flex;
+  gap: var(--spacing-2xs);
+  align-items: center;
+}

package/__inner__/esm/components/Header/modules/HeaderContentMain/HeaderContentMain.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { HEADER_CONTENT_MAIN_DEFAULT_TAG } from './constants';
+export var cnHeaderContentMain = cn('HeaderContentMain');
+export var HeaderContentMain = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'HeaderContentMain',
+    });
+    var _a = props.as, Tag = _a === void 0 ? HEADER_CONTENT_MAIN_DEFAULT_TAG : _a, className = props.className, children = props.children, other = __rest(props, ["as", "className", "children"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnHeaderContentMain('', [className]) }), children));
+});
+HeaderContentMain.displayName = 'HeaderContentMain';

package/__inner__/esm/components/Header/modules/HeaderContentMain/constants.js

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

package/__inner__/esm/components/Header/modules/HeaderContentMain/index.js

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

package/__inner__/esm/components/Header/modules/HeaderContentMain/types.js

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

package/__inner__/esm/components/Header/modules/HeaderIconButton/HeaderIconButton.js

@@ -0,0 +1,16 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { IconButton } from '../../../IconButtonNext';
+import { HEADER_ICON_BUTTON_DEFAULT_TAG, HEADER_ICON_BUTTON_DEFAULT_VARIANT, HEADER_ICON_BUTTON_DEFAULT_COLOR, } from './constants';
+export var cnHeaderIconButton = cn('HeaderIconButton');
+export var HeaderIconButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'HeaderIconButton',
+    });
+    var _a = props.as, as = _a === void 0 ? HEADER_ICON_BUTTON_DEFAULT_TAG : _a, className = props.className, _b = props.variant, variant = _b === void 0 ? HEADER_ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? HEADER_ICON_BUTTON_DEFAULT_COLOR : _c, other = __rest(props, ["as", "className", "variant", "color"]);
+    return (React.createElement(IconButton, __assign({}, other, { as: as, size: "m", ref: ref, variant: variant, compressed: true, color: color, className: cnHeaderIconButton('', [className]) })));
+});
+HeaderIconButton.displayName = 'HeaderIconButton';

package/__inner__/esm/components/Header/modules/HeaderIconButton/constants.js

@@ -0,0 +1,4 @@
+import { BUTTON_DEFAULT_TAG } from '../../../ButtonNext';
+export var HEADER_ICON_BUTTON_DEFAULT_TAG = BUTTON_DEFAULT_TAG;
+export var HEADER_ICON_BUTTON_DEFAULT_VARIANT = 'ghost';
+export var HEADER_ICON_BUTTON_DEFAULT_COLOR = 'secondary';

package/__inner__/esm/components/Header/modules/HeaderIconButton/index.js

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

package/__inner__/esm/components/Header/modules/HeaderIconButton/types.js

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

package/__inner__/esm/components/Header/modules/HeaderInput/HeaderInput.css

@@ -0,0 +1,3 @@
+.HeaderInput {
+  flex: 1 1 240px;
+}

package/__inner__/esm/components/Header/modules/HeaderInput/HeaderInput.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn } from '../../../../utils';
+import { Input } from '../../../Input';
+export var cnHeaderInput = cn('HeaderInput');
+export var HeaderInput = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'HeaderInput',
+    });
+    var className = props.className, other = __rest(props, ["className"]);
+    return (React.createElement(Input, __assign({}, other, { ref: ref, size: "s", disableStroke: true, className: cnHeaderInput('', [className]) })));
+});
+HeaderInput.displayName = 'HeaderInput';

package/__inner__/esm/components/Header/modules/HeaderInput/index.js

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

package/__inner__/esm/components/Header/modules/HeaderInput/types.js

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

package/__inner__/esm/components/Header/modules/HeaderLogo/HeaderLogo.css

@@ -0,0 +1,6 @@
+.HeaderLogo {
+  display: flex;
+  align-items: center;
+  padding-inline: var(--spacing-m);
+  flex: var(--header-logo-flex) 1 0%
+}

package/__inner__/esm/components/Header/modules/HeaderLogo/HeaderLogo.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { HEADER_LOGO_DEFAULT_TAG } from './constants';
+export var cnHeaderLogo = cn('HeaderLogo');
+export var HeaderLogo = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'HeaderLogo',
+    });
+    var _a = props.as, Tag = _a === void 0 ? HEADER_LOGO_DEFAULT_TAG : _a, children = props.children, className = props.className, other = __rest(props, ["as", "children", "className"]);
+    return (React.createElement(Tag, __assign({}, other, { className: cnHeaderLogo('', [className]), ref: ref }), children));
+});
+HeaderLogo.displayName = 'HeaderLogo';

package/__inner__/esm/components/Header/modules/HeaderLogo/constants.js

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

package/__inner__/esm/components/Header/modules/HeaderLogo/index.js

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

package/__inner__/esm/components/Header/modules/HeaderLogo/types.js

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

package/__inner__/esm/components/Header/modules/HeaderMenuButton/HeaderMenuButton.css

@@ -0,0 +1,6 @@
+.HeaderMenuButton_open .HeaderMenuButton-Chevron {
+      transform: rotate(180deg);
+    }
+  .HeaderMenuButton-Chevron {
+    transition: var(--transition-default) transform;
+  }

package/__inner__/esm/components/Header/modules/HeaderMenuButton/HeaderMenuButton.js

@@ -0,0 +1,38 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useRef } from 'react';
+import { ChevronDownIcon } from '@ozen-ui/icons';
+import { useControlled } from '../../../../hooks/useControlled';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { List } from '../../../List';
+import { Paper } from '../../../Paper';
+import { Popover } from '../../../Popover';
+import { HeaderButton } from '../HeaderButton';
+import { HEADER_MENU_BUTTON_DEFAULT_TAG } from './constants';
+export var cnHeaderMenuButton = cn('HeaderMenuButton');
+export var HeaderMenuButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'HeaderMenuButton',
+    });
+    var _a = props.as, as = _a === void 0 ? HEADER_MENU_BUTTON_DEFAULT_TAG : _a, label = props.label, open = props.open, onOpenChange = props.onOpenChange, className = props.className, children = props.children, onClick = props.onClick, popoverProps = props.popoverProps, other = __rest(props, ["as", "label", "open", "onOpenChange", "className", "children", "onClick", "popoverProps"]);
+    var internalRef = useRef(null);
+    var _b = __read(useControlled({
+        name: 'HeaderMenuButton',
+        value: open,
+        defaultValue: false,
+        state: 'open',
+    }), 2), isOpen = _b[0], setIsOpenState = _b[1];
+    var setIsOpen = function (isOpen) {
+        setIsOpenState(isOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderButton, __assign({}, other, { as: as, ref: useMultiRef([internalRef, ref]), onClick: function (event) {
+                setIsOpen(!isOpen);
+                onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            }, className: cnHeaderMenuButton({ open: isOpen }, [className]), iconRight: React.createElement(ChevronDownIcon, { className: cnHeaderMenuButton('Chevron') }) }), label),
+        React.createElement(Popover, __assign({ open: isOpen, as: Paper, offset: [0, 4], radius: "l", onClose: function () { return setIsOpen(false); }, anchorRef: internalRef, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
+            React.createElement(List, { as: "ul", size: "s" }, children))));
+});

package/__inner__/esm/components/Header/modules/HeaderMenuButton/constants.js

@@ -0,0 +1,2 @@
+import { BUTTON_DEFAULT_TAG } from '../../../ButtonNext';
+export var HEADER_MENU_BUTTON_DEFAULT_TAG = BUTTON_DEFAULT_TAG;

package/__inner__/esm/components/Header/modules/HeaderMenuButton/index.js

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

package/__inner__/esm/components/Header/modules/HeaderMenuButton/types.js

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

package/__inner__/esm/components/Header/modules/index.js

@@ -0,0 +1,10 @@
+export * from './HeaderAccount';
+export * from './HeaderAccountAvatar';
+export * from './HeaderButton';
+export * from './HeaderContent';
+export * from './HeaderContentAdditional';
+export * from './HeaderContentMain';
+export * from './HeaderIconButton';
+export * from './HeaderInput';
+export * from './HeaderLogo';
+export * from './HeaderMenuButton';

package/__inner__/esm/components/Header/types.js

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

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

@@ -43,7 +43,7 @@ export var Input = forwardRef(function (inProps, ref) {
             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, 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(FieldIcon, { icon: renderRight, className: cnInput('Right') }),
             React.createElement(Fieldset, null)),
         React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/ListCardItemCaption.css

@@ -3,7 +3,6 @@
   font: var(--typography-text-xs-font);
   letter-spacing: var(--typography-text-xs-letter_spacing, 0);
   text-transform: var(--typography-text-xs-text_transform, none);
-  color: var(--color-content-tertiary);
 }
 .ListCardItemCaption_size_xs, .ListCardItemCaption_size_s {
     padding-block: var(--spacing-4xs);

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.css

@@ -4,18 +4,23 @@
   overflow: hidden;
 }
 .ListCardItemInfoCarcass-Label {
-    color: var(--color-content-secondary);
+    color: var(--list-card-item-info-carcass-label-color, --color-content-secondary);
   }
 .ListCardItemInfoCarcass-Content {
-    color: var(--color-content-primary);
+    color: var(--list-card-item-info-carcass-content-color, --color-content-primary);
   }
 .ListCardItemInfoCarcass-Hint {
-    color: var(--color-content-secondary);
+    color: var(--list-card-item-info-carcass-hint-color, --color-content-secondary);
+  }
+.ListCardItemInfoCarcass-Caption {
+    color: var(--list-card-item-info-carcass-caption-color, --color-content-tertiary)
   }
 .ListCardItemInfoCarcass-Bottom {
+    color: var(--list-card-item-info-carcass-bottom-color);
     margin-block-start: var(--spacing-2xs);
   }
 .ListCardItemInfoCarcass-HintBefore {
+    color: var(--list-card-item-info-carcass-hint-before-color);
     block-size: 16px;
     margin-inline-end: var(--spacing-3xs);
   }

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.js

@@ -5,9 +5,10 @@ import { Stack } from '../../../Stack';
 import { useListCardItemContext } from '../../ListCardItemContext';
 import { ListCardItemCaption } from '../ListCardItemCaption';
 import { LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW } from './constants';
+import { useListCardItemInfoCarcassColor } from './hooks';
 export var cnListCardItemInfoCarcass = cn('ListCardItemInfoCarcass');
 export var ListCardItemInfoCarcass = forwardRef(function (_a, ref) {
-    var children = _a.children, label = _a.label, caption = _a.caption, hint = _a.hint, bottom = _a.bottom, className = _a.className, _b = _a.direction, direction = _b === void 0 ? 'column' : _b, hintBefore = _a.hintBefore, _c = _a.textOverflow, textOverflow = _c === void 0 ? LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW : _c, other = __rest(_a, ["children", "label", "caption", "hint", "bottom", "className", "direction", "hintBefore", "textOverflow"]);
+    var children = _a.children, label = _a.label, caption = _a.caption, hint = _a.hint, bottom = _a.bottom, className = _a.className, _b = _a.direction, direction = _b === void 0 ? 'column' : _b, hintBefore = _a.hintBefore, _c = _a.textOverflow, textOverflow = _c === void 0 ? LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW : _c, colorScheme = _a.colorScheme, other = __rest(_a, ["children", "label", "caption", "hint", "bottom", "className", "direction", "hintBefore", "textOverflow", "colorScheme"]);
     var size = useListCardItemContext().size;
     var existElements = [
         !!children,
@@ -18,17 +19,18 @@ export var ListCardItemInfoCarcass = forwardRef(function (_a, ref) {
         !!bottom,
     ];
     var isOnlyOneElement = existElements.filter(function (isExist) { return isExist; }).length <= 1;
+    var generateColor = useListCardItemInfoCarcassColor();
     return (React.createElement(Stack, __assign({}, other, { ref: ref, className: cnListCardItemInfoCarcass({
             size: size,
             onlyOneElement: isOnlyOneElement,
             textOverflow: textOverflow,
         }, [className]), direction: direction }),
-        label && (React.createElement("div", { className: cnListCardItemInfoCarcass('Label') }, label)),
-        children && (React.createElement("div", { className: cnListCardItemInfoCarcass('Content') }, children)),
+        label && (React.createElement("div", { className: cnListCardItemInfoCarcass('Label'), style: generateColor('LABEL_COLOR', colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.label) }, label)),
+        children && (React.createElement("div", { className: cnListCardItemInfoCarcass('Content'), style: generateColor('CONTENT_COLOR', colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.content) }, children)),
         !!(hint || hintBefore) && (React.createElement(Stack, { className: cnListCardItemInfoCarcass('HintBlock'), align: "center", gap: "xs" },
-            hintBefore && (React.createElement("div", { className: cnListCardItemInfoCarcass('HintBefore') }, hintBefore)),
-            hint && (React.createElement("div", { className: cnListCardItemInfoCarcass('Hint') }, hint)))),
-        caption && React.createElement(ListCardItemCaption, null, caption),
-        bottom && (React.createElement("div", { className: cnListCardItemInfoCarcass('Bottom') }, bottom))));
+            hintBefore && (React.createElement("div", { className: cnListCardItemInfoCarcass('HintBefore'), style: generateColor('HINT_BEFORE_COLOR', colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.hintBefore) }, hintBefore)),
+            hint && (React.createElement("div", { className: cnListCardItemInfoCarcass('Hint'), style: generateColor('HINT_COLOR', colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.hint) }, hint)))),
+        caption && (React.createElement(ListCardItemCaption, { className: cnListCardItemInfoCarcass('Caption'), style: generateColor('CAPTION_COLOR', colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.caption) }, caption)),
+        bottom && (React.createElement("div", { className: cnListCardItemInfoCarcass('Bottom'), style: generateColor('BOTTOM_COLOR', colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.bottom) }, bottom))));
 });
 ListCardItemInfoCarcass.displayName = 'ListCardItemInfoCarcass';

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/constants.js

@@ -1 +1,9 @@
 export var LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW = 'clip';
+export var LIST_CARD_ITEM_INFO_CARCASS_CSS_VARIABLE = {
+    LABEL_COLOR: 'list-card-item-info-carcass-label-color',
+    CONTENT_COLOR: 'list-card-item-info-carcass-content-color',
+    HINT_COLOR: 'list-card-item-info-carcass-hint-color',
+    HINT_BEFORE_COLOR: 'list-card-item-info-carcass-hint-before-color',
+    CAPTION_COLOR: 'list-card-item-info-carcass-caption-color',
+    BOTTOM_COLOR: 'list-card-item-info-carcass-bottom-color',
+};

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/entities/colorScheme.js

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/entities/index.js

@@ -1 +1,2 @@
-export * from './text-overflow';
+export * from './colorScheme';
+export * from './textOverflow';

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/hooks/index.js

@@ -0,0 +1 @@
+export * from './useListCardItemInfoCarcassColor';

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/hooks/useListCardItemInfoCarcassColor.js

@@ -0,0 +1,16 @@
+import { useThemeTokens } from '../../../../../hooks/useThemeTokens';
+import { generateCSSVariables } from '../../../../../utils';
+import { LIST_CARD_ITEM_INFO_CARCASS_CSS_VARIABLE } from '../constants';
+export var useListCardItemInfoCarcassColor = function () {
+    var color = useThemeTokens().color;
+    var generate = function (variable, value) {
+        var _a;
+        if (!value) {
+            return undefined;
+        }
+        return generateCSSVariables((_a = {},
+            _a[LIST_CARD_ITEM_INFO_CARCASS_CSS_VARIABLE[variable]] = "var(".concat(color.toCSSProperty(value), ")"),
+            _a));
+    };
+    return generate;
+};

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.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/StepperVertical/StepperVertical.js

@@ -3,16 +3,27 @@ import './StepperVertical.css';
 import './modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css';
 import './modules/StepperVerticalIndicator/StepperVerticalIndicator.css';
 import './modules/StepperVerticalStep/StepperVerticalStep.css';
-import React from 'react';
+import './modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.css';
+import React, { useRef, useMemo } from 'react';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn, polymorphicComponentWithRef } from '../../utils';
 import { Stack } from '../Stack';
 import { STEPPER_VERTICAL_DEFAULT_ELLIPSIS, STEPPER_VERTICAL_DEFAULT_TAG, } from './constants';
+import { useStepperVerticalStepsControl, useStepperVerticalStepsStructure, } from './hooks';
 import { StepperVerticalContext } from './StepperVerticalContext';
 export var cnStepperVertical = cn('StepperVertical');
 export var StepperVertical = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ name: 'StepperVertical', props: inProps });
     var children = props.children, _a = props.as, as = _a === void 0 ? STEPPER_VERTICAL_DEFAULT_TAG : _a, _b = props.ellipsis, ellipsis = _b === void 0 ? STEPPER_VERTICAL_DEFAULT_ELLIPSIS : _b, className = props.className, fullWidth = props.fullWidth, other = __rest(props, ["children", "as", "ellipsis", "className", "fullWidth"]);
-    return (React.createElement(StepperVerticalContext.Provider, { value: { ellipsis: ellipsis } },
-        React.createElement(Stack, __assign({}, other, { ref: ref, as: as, className: cnStepperVertical('', [className]), direction: "column", display: fullWidth ? 'block' : 'inline' }), children)));
+    var internalRef = useRef(null);
+    var stepsControl = useStepperVerticalStepsControl();
+    var structure = useStepperVerticalStepsStructure(internalRef, stepsControl, children);
+    var memoizedContextValue = useMemo(function () { return ({
+        ellipsis: ellipsis,
+        stepsControl: stepsControl,
+        structure: structure,
+    }); }, [ellipsis, stepsControl, structure]);
+    return (React.createElement(StepperVerticalContext.Provider, { value: memoizedContextValue },
+        React.createElement(Stack, __assign({}, other, { ref: useMultiRef([internalRef, ref]), as: as, className: cnStepperVertical('', [className]), direction: "column", display: fullWidth ? 'block' : 'inline' }), children)));
 });

package/__inner__/esm/components/StepperVertical/StepperVerticalContext.js

@@ -1,8 +1,18 @@
 import { useContext, createContext } from 'react';
 import { isDev } from '../../constants/environment';
+import { EventBus } from '../../utils';
 import { STEPPER_VERTICAL_DEFAULT_ELLIPSIS } from './constants';
 export var StepperVerticalContextDefaultValue = {
     ellipsis: STEPPER_VERTICAL_DEFAULT_ELLIPSIS,
+    stepsControl: {
+        steps: { current: {} },
+        initializeStep: function () { },
+        deleteStep: function () { },
+    },
+    structure: {
+        value: { current: { nodes: [], nodeById: {} } },
+        eventBus: new EventBus(),
+    },
 };
 export var StepperVerticalContext = createContext(StepperVerticalContextDefaultValue);
 export var useStepperVerticalContext = function () {

package/__inner__/esm/components/StepperVertical/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useStepperVerticalCreateStep';
+export * from './useStepperVerticalStepsControl';
+export * from './useStepperVerticalStepsStructure';
+export * from './useStepperVerticalStepHelper';

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/index.js

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

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/types.js

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

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/useStepperVerticalCreateStep.js

@@ -0,0 +1,44 @@
+import { __read } from "tslib";
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { useUniqueId } from '../../../../hooks/useUniqueId';
+import { useStepperVerticalContext } from '../../StepperVerticalContext';
+export var useStepperVerticalCreateStep = function (root) {
+    var id = useUniqueId();
+    var _a = __read(useState(false), 2), isSubStepsOpen = _a[0], setIsSubStepsOpen = _a[1];
+    var stepperVerticalContext = useStepperVerticalContext();
+    var ref = useRef(null);
+    var step = useStoredValue(function () { return ({
+        id: id,
+        root: root !== null && root !== void 0 ? root : null,
+        ref: ref,
+        isSubStepsOpen: isSubStepsOpen,
+        setIsSubStepsOpen: setIsSubStepsOpen,
+        unregisterSubstep: function () { },
+        registerSubstep: function () { },
+        substeps: {},
+    }); });
+    var registerSubstep = useCallback(function (substep) {
+        step.current.substeps[substep.id] = substep;
+    }, []);
+    var unregisterSubstep = useCallback(function (substep) {
+        delete step.current.substeps[substep.id];
+    }, []);
+    step.current.isSubStepsOpen = isSubStepsOpen;
+    step.current.root = root !== null && root !== void 0 ? root : null;
+    step.current.registerSubstep = registerSubstep;
+    step.current.unregisterSubstep = unregisterSubstep;
+    useEffect(function () {
+        stepperVerticalContext.stepsControl.initializeStep(step.current);
+        if (root) {
+            root.registerSubstep(step.current);
+        }
+        return function () {
+            stepperVerticalContext.stepsControl.deleteStep(step.current);
+            if (root) {
+                root.unregisterSubstep(step.current);
+            }
+        };
+    }, []);
+    return step.current;
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepHelper.js

@@ -0,0 +1,88 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useEventBusEvents } from '../../../hooks/useEventBusEvents';
+import { useStepperVerticalContext } from '../StepperVerticalContext';
+export var useStepperVerticalStepHelper = function (step) {
+    var _a;
+    var structure = useStepperVerticalContext().structure;
+    var _b = __read(useState(false), 2), hasPrevious = _b[0], setHasPrevious = _b[1];
+    var _c = __read(useState(false), 2), hasNext = _c[0], setHasNext = _c[1];
+    var getStructureNode = function (forStep) {
+        var _a;
+        if (forStep === void 0) { forStep = step; }
+        var node = (_a = structure.value.current.nodeById[forStep.id]) !== null && _a !== void 0 ? _a : null;
+        return node;
+    };
+    var getNodeIndex = function (node) {
+        if (!node.root) {
+            return structure.value.current.nodes.indexOf(node);
+        }
+        return node.root.substeps.indexOf(node);
+    };
+    var checkHasNext = function (forStep) {
+        if (forStep === void 0) { forStep = step; }
+        if (forStep.isSubStepsOpen) {
+            return true;
+        }
+        var node = getStructureNode(forStep);
+        if (!node) {
+            return false;
+        }
+        var nodeIndex = getNodeIndex(node);
+        if (!node.root) {
+            return !!structure.value.current.nodes[nodeIndex + 1];
+        }
+        var sameLevelNext = node.root.substeps[nodeIndex + 1];
+        if (sameLevelNext) {
+            return true;
+        }
+        var checkHasTopLevelNext = function (node) {
+            if (!node.root) {
+                return false;
+            }
+            var rootIndex = getNodeIndex(node.root);
+            var nextStep = node.root.root
+                ? node.root.root.substeps[rootIndex + 1]
+                : structure.value.current.nodes[rootIndex + 1];
+            if (nextStep) {
+                return true;
+            }
+            return checkHasTopLevelNext(node.root);
+        };
+        var otherLevelNext = checkHasTopLevelNext(node);
+        return otherLevelNext;
+    };
+    var checkHasPrevious = function (forStep) {
+        if (forStep === void 0) { forStep = step; }
+        var node = getStructureNode(forStep);
+        if (!node) {
+            return false;
+        }
+        var nodeIndex = getNodeIndex(node);
+        if (!node.root) {
+            return !!structure.value.current.nodes[nodeIndex - 1];
+        }
+        var rootHasNext = checkHasNext(node.root.step);
+        if (rootHasNext) {
+            return true;
+        }
+        if (nodeIndex === 0) {
+            return node.root.step.isSubStepsOpen;
+        }
+        return true;
+    };
+    var recalculate = function () {
+        setHasPrevious(checkHasPrevious());
+        setHasNext(checkHasNext());
+    };
+    useEventBusEvents(structure.eventBus, {
+        update: recalculate,
+    });
+    useEffect(function () {
+        recalculate();
+    }, [step.isSubStepsOpen, (_a = step.root) === null || _a === void 0 ? void 0 : _a.isSubStepsOpen]);
+    return {
+        hasPrevious: hasPrevious,
+        hasNext: hasNext,
+    };
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsControl/index.js

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

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsControl/types.js

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