@ozen-ui/kit 0.83.1 → 0.83.3

package/__inner__/esm/components/Collapse/Collapse.js

@@ -11,7 +11,7 @@ import { DEFAULT_COLLAPSE_TIMEOUT, DEFAULT_COLLAPSED_SIZE } from './constants';
 export var cnCollapse = cn('Collapse');
 export var Collapse = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Collapse' });
-    var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? DEFAULT_COLLAPSE_TIMEOUT : _b, onEnter = props.onEnter, onEntering = props.onEntering, onEntered = props.onEntered, onExit = props.onExit, onExiting = props.onExiting, onExited = props.onExited, unmountOnClosed = props.unmountOnClosed, expanded = props.expanded, appear = props.appear, children = props.children, className = props.className, style = props.style, other = __rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "style"]);
+    var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? DEFAULT_COLLAPSE_TIMEOUT : _b, onEnter = props.onEnter, onEntering = props.onEntering, onEntered = props.onEntered, onExit = props.onExit, onExiting = props.onExiting, onExited = props.onExited, unmountOnClosed = props.unmountOnClosed, expanded = props.expanded, appear = props.appear, children = props.children, className = props.className, innerProps = props.innerProps, style = props.style, other = __rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "innerProps", "style"]);
     var rootRef = useRef(null);
     // Для высчитывания высоты Collapse
     var collapseInnerRef = useRef(null);
@@ -25,6 +25,7 @@ export var Collapse = forwardRef(function (inProps, ref) {
             ? collapsedSizeProp
             : "".concat(collapsedSizeProp, "px");
     }, [collapsedSizeProp]);
+    var innerMultiRef = useMultiRef([innerProps === null || innerProps === void 0 ? void 0 : innerProps.ref, collapseInnerRef]);
     return (React.createElement(Transition, { nodeRef: rootRef, timeout: timeout, in: expanded, unmountOnExit: unmountOnClosed, appear: appear, onEnter: function (isAppeared) { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onEntering: function (isAppeared) { return onEntering === null || onEntering === void 0 ? void 0 : onEntering(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onEntered: function (isAppeared) { return onEntered === null || onEntered === void 0 ? void 0 : onEntered(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); }, onExiting: function () { return onExiting === null || onExiting === void 0 ? void 0 : onExiting(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); }, onExited: function () { return onExited === null || onExited === void 0 ? void 0 : onExited(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); } }, function (state) {
         var _a, _b;
         var transitionStyles = {
@@ -39,7 +40,7 @@ export var Collapse = forwardRef(function (inProps, ref) {
             exited: __assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
         };
         return (React.createElement("div", __assign({ className: cnCollapse({ animation: state }, [className]), style: __assign(__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: collapseRef }),
-            React.createElement("div", { ref: collapseInnerRef, className: cnCollapse('Inner') }, children)));
+            React.createElement("div", __assign({}, innerProps, { ref: innerMultiRef, className: cnCollapse('Inner', [innerProps === null || innerProps === void 0 ? void 0 : innerProps.className]) }), children)));
     }));
 });
 Collapse.displayName = 'Collapse';

package/__inner__/esm/components/Sidebar/Sidebar.css

@@ -27,9 +27,29 @@
     border-radius: var(--border-radius-l);
   }
 
+  .Sidebar-SizerWrapper {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: calc(var(--sidebar-padding-inline) * -1);
+    inline-size: calc(var(--sidebar-padding-inline) * 2);
+    block-size: 100%;
+    z-index: 1;
+  }
+
+  .Sidebar-SizerWrapper:hover .Sidebar-Sizer,
+  .Sidebar-SizerWrapper:focus-within .Sidebar-Sizer {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate(0, -50%) scale(1);
+  }
+
   .Sidebar-Sizer {
     position: absolute;
-    transform: translate(0, -50%);
+    transform: translate(0, -50%) scale(0.7);
     inset-block-start: 50%;
-    inset-inline-end: calc(var(--sidebar-padding-inline) * -1);
+    inset-inline-end: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition-default);
+    transition-property: transform, opacity;
   }

package/__inner__/esm/components/Sidebar/Sidebar.js

@@ -24,7 +24,7 @@ export var Sidebar = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'Sidebar',
         props: inProps,
     });
-    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, style = props.style, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "style"]);
+    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style"]);
     var memoizedContextValue = useMemo(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
     var width = SIDEBAR_WIDTH_BY_VARIANT[size][variant];
     return (React.createElement(SidebarContext.Provider, { value: memoizedContextValue },
@@ -32,5 +32,8 @@ export var Sidebar = polymorphicComponentWithRef(function (inProps, ref) {
                 _a[SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
                 _a))), className: cnSidebar({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
             children,
-            sizer && React.createElement("div", { className: cnSidebar('Sizer') }, sizer))));
+            sizer && (React.createElement("div", __assign({}, sizerWrapperProps, { className: cnSidebar('SizerWrapper', [
+                    sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className,
+                ]) }),
+                React.createElement("div", { className: cnSidebar('Sizer') }, sizer))))));
 });

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -1,6 +1,7 @@
 /* stylelint-disable */
 .SidebarHeaderLogo {
   --sidebar-collapsible-item-gap: var(--spacing-2xs);
+  --sidebar-header-logo-padding: 0;
 }
 .SidebarHeaderLogo_color_main {
     --sidebar-header-icon-background: var(--color-background-primary);
@@ -8,6 +9,12 @@
 .SidebarHeaderLogo_color_accent {
     --sidebar-header-icon-background: var(--color-accent-primary);
   }
+.SidebarHeaderLogo_size_s {
+    --sidebar-header-logo-padding: var(--spacing-2xs);
+  }
+.SidebarHeaderLogo_size_m {
+    --sidebar-header-logo-padding: var(--spacing-xs);
+  }
 .SidebarHeaderLogo-Text {
     font: var(--typography-text-m_1-font);
     letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
@@ -20,5 +27,5 @@
     color: var(--sidebar-content-secondary-color);
     border-radius: var(--border-radius-m);
     flex-shrink: 0;
-    padding: var(--spacing-2xs);
+    padding: var(--sidebar-header-logo-padding);
   }

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -13,7 +13,7 @@ export var SidebarHeaderLogo = polymorphicComponentWithRef(function (inProps, re
         name: 'SidebarHeaderLogo',
     });
     var _a = props.as, as = _a === void 0 ? SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = __rest(props, ["as", "className", "children", "icon"]);
-    var _b = useSidebarContext(), color = _b.color, variant = _b.variant;
-    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color }, [className]), align: "center" }), children));
+    var _b = useSidebarContext(), color = _b.color, variant = _b.variant, size = _b.size;
+    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color, size: size }, [className]), align: "center" }), children));
 });
 SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/esm/components/Sidebar/modules/SidebarSizer/SidebarSizer.js

@@ -12,12 +12,12 @@ export var SidebarSizer = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'SidebarSizer',
     });
-    var _a = props.as, as = _a === void 0 ? SIDEBAR_SIZER_DEFAULT_TAG : _a, className = props.className, _b = props.expandedVariants, expandedVariants = _b === void 0 ? SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS : _b, onClick = props.onClick, onChange = props.onChange, other = __rest(props, ["as", "className", "expandedVariants", "onClick", "onChange"]);
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_SIZER_DEFAULT_TAG : _a, className = props.className, _b = props.expandedVariants, expandedVariants = _b === void 0 ? SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS : _b, onClick = props.onClick, onChange = props.onChange, ariaLabel = props["aria-label"], other = __rest(props, ["as", "className", "expandedVariants", "onClick", "onChange", 'aria-label']);
     var variant = useSidebarContext().variant;
     var isExpanded = expandedVariants.includes(variant);
     return (React.createElement(IconButton, __assign({}, other, { as: as, ref: ref, size: "2xs", compressed: true, onClick: function (event) {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             onChange === null || onChange === void 0 ? void 0 : onChange({ currentVariant: variant, collapsed: !isExpanded }, event);
-        }, className: cnSidebarSizer({ expanded: isExpanded }, [className]), icon: React.createElement(ArrowLeftIcon, { className: cnSidebarSizer('Icon') }) })));
+        }, "aria-expanded": isExpanded, "aria-label": ariaLabel ? ariaLabel({ collapsed: !isExpanded }) : undefined, className: cnSidebarSizer({ expanded: isExpanded }, [className]), icon: React.createElement(ArrowLeftIcon, { className: cnSidebarSizer('Icon') }) })));
 });
 SidebarSizer.displayName = 'SidebarSizer';

package/__inner__/esm/components/Sidebar/modules/SidebarUser/SidebarUser.css

@@ -1,9 +1,15 @@
-.SidebarUser-Indicator {
+.SidebarUser {
+  --sidebar-collapsible-item-gap: var(--spacing-2xs);
+}
+
+  .SidebarUser-Indicator {
     --indicator-border-color: var(--sidebar-background-color)
   }
+
   .SidebarUser-Name {
     color: var(--sidebar-content-primary-color);
   }
+
   .SidebarUser-Content {
     display: flex;
     flex-direction: column;
@@ -11,6 +17,7 @@
     flex-shrink: 0;
     white-space: nowrap;
   }
+
   .SidebarUser-Content_hasStatus {
     display: flex;
     flex-direction: column;

package/__inner__/esm/components/Sidebar/modules/SidebarUser/SidebarUser.js

@@ -6,7 +6,7 @@ import { Avatar } from '../../../Avatar';
 import { Typography } from '../../../Typography';
 import { useSidebarContext } from '../../SidebarContext';
 import { SidebarCollapsibleItem } from '../SidebarCollapsibleItem';
-import { SIDEBAR_USER_DEFAULT_TAG } from './constants';
+import { SIDEBAR_USER_DEFAULT_TAG, SIDEBAR_USER_SIZE_TO_AVATAR, } from './constants';
 export var cnSidebarUser = cn('SidebarUser');
 export var SidebarUser = polymorphicComponentWithRef(function (inProps, ref) {
     var _a;
@@ -15,10 +15,10 @@ export var SidebarUser = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'SidebarUser',
     });
     var _b = props.as, as = _b === void 0 ? SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, other = __rest(props, ["as", "className", "avatarProps", "name", "online", "status"]);
-    var variant = useSidebarContext().variant;
+    var _c = useSidebarContext(), variant = _c.variant, size = _c.size;
     var hasStatus = !!status;
     var isCollapsed = variant !== 'full';
-    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { ref: ref, as: as, className: cnSidebarUser('', [className]), fixed: React.createElement(Avatar, __assign({}, avatarProps, { online: isFunction(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: "xs", indicatorProps: { className: cnSidebarUser('Indicator') }, className: cnSidebarUser('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
+    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { ref: ref, as: as, className: cnSidebarUser('', [className]), fixed: React.createElement(Avatar, __assign({}, avatarProps, { online: isFunction(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: SIDEBAR_USER_SIZE_TO_AVATAR[size], indicatorProps: { className: cnSidebarUser('Indicator') }, className: cnSidebarUser('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
                 text: 'content-primary',
                 background: 'background-tertiary',
             } })), collapsed: isCollapsed, classNames: {

package/__inner__/esm/components/Sidebar/modules/SidebarUser/constants.js

@@ -1 +1,5 @@
 export var SIDEBAR_USER_DEFAULT_TAG = 'div';
+export var SIDEBAR_USER_SIZE_TO_AVATAR = {
+    s: 'xs',
+    m: 's',
+};

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

@@ -4,6 +4,7 @@ import './modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css'
 import './modules/StepperVerticalIndicator/StepperVerticalIndicator.css';
 import './modules/StepperVerticalStep/StepperVerticalStep.css';
 import './modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.css';
+import './modules/StepperVerticalStepSubcontentButton/StepperVerticalStepSubcontentButton.css';
 import React, { useRef, useMemo } from 'react';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';

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

@@ -1,11 +1,41 @@
 import { __read } from "tslib";
-import { useCallback, useRef, useState, useEffect } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
+import { useControlled } from '../../../../hooks/useControlled';
 import { useStoredValue } from '../../../../hooks/useStoredValue';
 import { useUniqueId } from '../../../../hooks/useUniqueId';
 import { useStepperVerticalContext } from '../../StepperVerticalContext';
-export var useStepperVerticalCreateStep = function (root) {
+export var useStepperVerticalCreateStep = function (params, root) {
     var id = useUniqueId();
-    var _a = __read(useState(false), 2), isSubStepsOpen = _a[0], setIsSubStepsOpen = _a[1];
+    var _a = __read(useControlled({
+        value: params.openSubsteps,
+        defaultValue: false,
+        name: 'StepperVerticalStep',
+        state: 'openSubsteps',
+    }), 2), isSubstepsOpenState = _a[0], setIsSubstepsOpenState = _a[1];
+    var _b = __read(useControlled({
+        value: params.openSubcontent,
+        defaultValue: false,
+        name: 'StepperVerticalStep',
+        state: 'openSubcontent',
+    }), 2), isSubcontentOpenState = _b[0], setIsSubcontentOpenState = _b[1];
+    var isSubStepsOpen = !!isSubstepsOpenState;
+    var isSubcontentOpen = !!isSubcontentOpenState;
+    var setIsSubStepsOpen = useCallback(function (isOpen) {
+        var _a;
+        setIsSubstepsOpenState(isOpen);
+        (_a = params.onOpenSubstepsChange) === null || _a === void 0 ? void 0 : _a.call(params, isOpen);
+    }, [setIsSubstepsOpenState, params.onOpenSubstepsChange]);
+    var toggleSubsteps = useCallback(function () {
+        setIsSubStepsOpen(!isSubStepsOpen);
+    }, [setIsSubStepsOpen, isSubStepsOpen]);
+    var setIsSubcontentOpen = useCallback(function (isOpen) {
+        var _a;
+        setIsSubcontentOpenState(isOpen);
+        (_a = params.onOpenSubcontentChange) === null || _a === void 0 ? void 0 : _a.call(params, isOpen);
+    }, [setIsSubcontentOpenState, params.onOpenSubcontentChange]);
+    var toggleSubcontent = useCallback(function () {
+        setIsSubcontentOpen(!isSubcontentOpen);
+    }, [setIsSubcontentOpen, isSubcontentOpen]);
     var stepperVerticalContext = useStepperVerticalContext();
     var ref = useRef(null);
     var step = useStoredValue(function () { return ({
@@ -17,6 +47,10 @@ export var useStepperVerticalCreateStep = function (root) {
         unregisterSubstep: function () { },
         registerSubstep: function () { },
         substeps: {},
+        isSubcontentOpen: isSubcontentOpen,
+        setIsSubcontentOpen: setIsSubcontentOpen,
+        toggleSubcontent: toggleSubcontent,
+        toggleSubsteps: toggleSubsteps,
     }); });
     var registerSubstep = useCallback(function (substep) {
         step.current.substeps[substep.id] = substep;
@@ -25,6 +59,11 @@ export var useStepperVerticalCreateStep = function (root) {
         delete step.current.substeps[substep.id];
     }, []);
     step.current.isSubStepsOpen = isSubStepsOpen;
+    step.current.isSubcontentOpen = isSubcontentOpen;
+    step.current.setIsSubStepsOpen = setIsSubStepsOpen;
+    step.current.setIsSubcontentOpen = setIsSubcontentOpen;
+    step.current.toggleSubcontent = toggleSubcontent;
+    step.current.toggleSubsteps = toggleSubsteps;
     step.current.root = root !== null && root !== void 0 ? root : null;
     step.current.registerSubstep = registerSubstep;
     step.current.unregisterSubstep = unregisterSubstep;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.css

@@ -19,6 +19,10 @@
     box-sizing: border-box;
   }
 
+  .StepperVerticalStep-SubcontentInner {
+    margin-block-start: var(--spacing-2xs);
+  }
+
   .StepperVerticalStep-Action {
     margin-block-start: var(--spacing-2xs);
   }
@@ -27,6 +31,10 @@
     padding-block: var(--spacing-xs);
   }
 
+  .StepperVerticalStep-Description_custom {
+    flex: 1;
+  }
+
   .StepperVerticalStep-Substeps .Collapse-Inner {
       display: flex;
       flex-direction: column;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.js

@@ -1,16 +1,18 @@
 import { __assign, __rest } from "tslib";
 import React, { useEffect, useMemo } from 'react';
+import { logger } from '@ozen-ui/logger';
+import { useDevEffect } from '../../../../hooks/useDevEffect';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { isArray, polymorphicComponentWithRef, resolveChildren, } from '../../../../utils';
 import { Collapse } from '../../../Collapse';
 import { Stack } from '../../../Stack';
-import { Typography } from '../../../Typography';
 import { useStepperVerticalStepHelper, useStepperVerticalCreateStep, } from '../../hooks';
 import { useStepperVerticalContext } from '../../StepperVerticalContext';
 import { StepperVerticalIconIndicator } from '../StepperVerticalIconIndicator';
 import { cnStepperVerticalStep } from './classNames';
-import { STEPPER_VERTICAL_STEP_DEFAULT_TAG, STEPPER_VERTICAL_STEP_DEFAULT_CURRENT, STEPPER_VERTICAL_STEP_DEFAULT_VARIANT, } from './constants';
+import { StepperVerticalStepContent } from './components';
+import { STEPPER_VERTICAL_STEP_DEFAULT_TAG, STEPPER_VERTICAL_STEP_DEFAULT_CURRENT, STEPPER_VERTICAL_STEP_DEFAULT_VARIANT, STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM, } from './constants';
 import { StepperVerticalStepContext } from './StepperVerticalStepContext';
 import { StepperVerticalStepRootContext, useStepperVerticalStepRootContext, } from './StepperVerticalStepRootContext';
 export var StepperVerticalStep = polymorphicComponentWithRef(function (inProps, ref) {
@@ -18,7 +20,20 @@ export var StepperVerticalStep = polymorphicComponentWithRef(function (inProps,
         name: 'StepperVerticalStep',
         props: inProps,
     });
-    var _a = props.variant, variant = _a === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_CURRENT : _b, ellipsisProp = props.ellipsis, hint = props.hint, children = props.children, caption = props.caption, action = props.action, _c = props.indicator, indicator = _c === void 0 ? React.createElement(StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, substeps = props.substeps, other = __rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps"]);
+    var _a = props.variant, variant = _a === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_CURRENT : _b, ellipsisProp = props.ellipsis, hint = props.hint, children = props.children, caption = props.caption, action = props.action, _c = props.indicator, indicator = _c === void 0 ? React.createElement(StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, substeps = props.substeps, subcontent = props.subcontent, _e = props.custom, custom = _e === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM : _e, openSubcontent = props.openSubcontent, onOpenSubcontentChange = props.onOpenSubcontentChange, onOpenSubstepsChange = props.onOpenSubstepsChange, openSubsteps = props.openSubsteps, other = __rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps", "subcontent", "custom", "openSubcontent", "onOpenSubcontentChange", "onOpenSubstepsChange", "openSubsteps"]);
+    useDevEffect(function () {
+        if (subcontent && substeps) {
+            logger.error('Нельзя использовать одновременно substeps и subcontent.');
+        }
+    }, [substeps, subcontent]);
+    useDevEffect(function () {
+        if (!custom) {
+            return;
+        }
+        if (subcontent || substeps || caption || action) {
+            logger.error('Нельзя использовать блоки при custom === true.');
+        }
+    }, [subcontent, substeps, caption, action]);
     var stepperVerticalContext = useStepperVerticalContext();
     var rootContext = useStepperVerticalStepRootContext();
     var isSubstep = !!rootContext;
@@ -29,20 +44,40 @@ export var StepperVerticalStep = polymorphicComponentWithRef(function (inProps,
         }
         return !!resolved;
     })();
+    var hasSubcontent = (function () {
+        var resolved = resolveChildren(subcontent);
+        if (isArray(resolved)) {
+            return resolved.length > 0;
+        }
+        return !!resolved;
+    })();
     var ellipsis = (function () {
         if (ellipsisProp !== undefined) {
             return ellipsisProp;
         }
         return stepperVerticalContext.ellipsis;
     })();
-    var step = useStepperVerticalCreateStep(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
-    var _e = useStepperVerticalStepHelper(step), hasNext = _e.hasNext, hasPrevious = _e.hasPrevious;
+    var step = useStepperVerticalCreateStep({
+        onOpenSubcontentChange: onOpenSubcontentChange,
+        onOpenSubstepsChange: onOpenSubstepsChange,
+        openSubsteps: openSubsteps,
+        openSubcontent: openSubcontent,
+    }, rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
+    var _f = useStepperVerticalStepHelper(step), hasNext = _f.hasNext, hasPrevious = _f.hasPrevious;
     useEffect(function () {
         if (rootContext && !(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen)) {
             step.setIsSubStepsOpen(false);
         }
     }, [rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen]);
-    var memoizedContext = useMemo(function () { return ({ variant: variant, current: current, hasSubsteps: hasSubsteps, step: step }); }, [variant, current, hasSubsteps, step, step.isSubStepsOpen, step.root]);
+    var memoizedContext = useMemo(function () { return ({ variant: variant, current: current, hasSubsteps: hasSubsteps, step: step, hasSubcontent: hasSubcontent }); }, [
+        variant,
+        current,
+        hasSubsteps,
+        step,
+        step.isSubStepsOpen,
+        step.root,
+        step.isSubcontentOpen,
+    ]);
     var memoizedRootContext = useMemo(function () { return ({ root: step }); }, [step, step.isSubStepsOpen, step.root]);
     return (React.createElement(React.Fragment, null,
         React.createElement(StepperVerticalStepContext.Provider, { value: memoizedContext },
@@ -56,12 +91,8 @@ export var StepperVerticalStep = polymorphicComponentWithRef(function (inProps,
                 }, [className]), gap: "m" }),
                 React.createElement("div", { className: cnStepperVerticalStep('Path') },
                     React.createElement("div", { className: cnStepperVerticalStep('Indicator') }, indicator)),
-                React.createElement(Stack, { direction: "column", className: cnStepperVerticalStep('Description') },
-                    React.createElement(Stack, { className: cnStepperVerticalStep('Info'), direction: "column", gap: "xs" },
-                        children && (React.createElement(Typography, { className: cnStepperVerticalStep('Label'), color: "primary", variant: "text-m_1" }, children)),
-                        caption && (React.createElement(Typography, { className: cnStepperVerticalStep('Caption'), color: "primary", variant: "text-s" }, caption)),
-                        hint && (React.createElement(Typography, { className: cnStepperVerticalStep('Hint'), color: "secondary", variant: "text-2xs" }, hint))),
-                    action && (React.createElement("div", { className: cnStepperVerticalStep('Action') }, action))))),
+                React.createElement(Stack, { direction: "column", className: cnStepperVerticalStep('Description', { custom: custom }) },
+                    React.createElement(StepperVerticalStepContent, { step: step, custom: custom, action: action, caption: caption, hasSubcontent: hasSubcontent, subcontent: subcontent, hint: hint }, children)))),
         hasSubsteps && (React.createElement(StepperVerticalStepRootContext.Provider, { value: memoizedRootContext },
             React.createElement(Collapse, { className: cnStepperVerticalStep('Substeps'), expanded: step.isSubStepsOpen }, substeps)))));
 });

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStepContext.js

@@ -5,11 +5,16 @@ export var StepperVerticalStepContextDefaultValue = {
     variant: STEPPER_VERTICAL_STEP_DEFAULT_VARIANT,
     current: false,
     hasSubsteps: false,
+    hasSubcontent: false,
     step: {
         id: '',
         setIsSubStepsOpen: function () { },
+        setIsSubcontentOpen: function () { },
+        toggleSubcontent: function () { },
+        toggleSubsteps: function () { },
         ref: { current: null },
         isSubStepsOpen: false,
+        isSubcontentOpen: false,
         root: null,
         substeps: {},
         unregisterSubstep: function () { },

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/components/StepperVerticalStepContent/StepperVerticalStepContent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Collapse } from '../../../../../Collapse';
+import { Stack } from '../../../../../Stack';
+import { Typography } from '../../../../../Typography';
+import { cnStepperVerticalStep } from '../../classNames';
+export var StepperVerticalStepContent = function (_a) {
+    var caption = _a.caption, hint = _a.hint, children = _a.children, custom = _a.custom, step = _a.step, hasSubcontent = _a.hasSubcontent, subcontent = _a.subcontent, action = _a.action;
+    if (custom) {
+        return children;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { className: cnStepperVerticalStep('Info'), direction: "column", gap: "xs" },
+            children && (React.createElement(Typography, { className: cnStepperVerticalStep('Label'), color: "primary", variant: "text-m_1" }, children)),
+            caption && (React.createElement(Typography, { className: cnStepperVerticalStep('Caption'), color: "primary", variant: "text-s" }, caption)),
+            hint && (React.createElement(Typography, { className: cnStepperVerticalStep('Hint'), color: "secondary", variant: "text-2xs" }, hint))),
+        action && (React.createElement("div", { className: cnStepperVerticalStep('Action') }, action)),
+        hasSubcontent && (React.createElement(Collapse, { expanded: step.isSubcontentOpen, innerProps: {
+                className: cnStepperVerticalStep('SubcontentInner'),
+            } }, subcontent))));
+};

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/components/StepperVerticalStepContent/index.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/components/StepperVerticalStepContent/types.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/components/index.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/constants.js

@@ -1,3 +1,4 @@
 export var STEPPER_VERTICAL_STEP_DEFAULT_VARIANT = 'awaiting';
 export var STEPPER_VERTICAL_STEP_DEFAULT_CURRENT = false;
 export var STEPPER_VERTICAL_STEP_DEFAULT_TAG = 'div';
+export var STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM = false;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/entities/index.js

@@ -1 +1,2 @@
+export * from './onOpenChange';
 export * from './variant';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/entities/onOpenChange.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/StepperVerticalStepSubcontentButton.css

@@ -0,0 +1,10 @@
+.StepperVerticalStepSubcontentButton_open {
+    --stepper-vertical-step-subcontent-button-icon-rotate: 0deg;
+  }
+  .StepperVerticalStepSubcontentButton_closed {
+    --stepper-vertical-step-subcontent-button-icon-rotate: 180deg;
+  }
+  .StepperVerticalStepSubcontentButton-Icon {
+    transform: rotate(var(--stepper-vertical-step-subcontent-button-icon-rotate));
+    transition: var(--transition-default) transform;
+  }

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/StepperVerticalStepSubcontentButton.js

@@ -0,0 +1,29 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { ChevronUpIcon } from '@ozen-ui/icons';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
+import { useStepperVerticalStepContext } from '../StepperVerticalStep';
+import { StepperVerticalStepButton } from '../StepperVerticalStepButton';
+import { STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_COLOR, STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_TAG, } from './constants';
+export var cnStepperVerticalStepSubcontentButton = cn('StepperVerticalStepSubcontentButton');
+export var StepperVerticalStepSubcontentButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        name: 'StepperVerticalStepSubcontentButton',
+        props: inProps,
+    });
+    var _a = props.color, color = _a === void 0 ? STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_COLOR : _a, className = props.className, _b = props.as, as = _b === void 0 ? STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_TAG : _b, onClick = props.onClick, text = props.text, other = __rest(props, ["color", "className", "as", "onClick", "text"]);
+    var _c = useStepperVerticalStepContext(), hasSubcontent = _c.hasSubcontent, step = _c.step;
+    if (!hasSubcontent) {
+        return null;
+    }
+    return (React.createElement(StepperVerticalStepButton, __assign({}, other, { as: as, ref: ref, color: color, iconRight: React.createElement(ChevronUpIcon, { className: cnStepperVerticalStepSubcontentButton('Icon') }), className: cnStepperVerticalStepSubcontentButton({ open: step.isSubcontentOpen, closed: !step.isSubcontentOpen }, [className]), onClick: function (event) {
+            step.toggleSubcontent();
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        } }), renderContent({
+        content: text,
+        props: { isOpen: step.isSubcontentOpen },
+    })));
+});
+StepperVerticalStepSubcontentButton.displayName =
+    'StepperVerticalStepSubcontentButton';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/constants.js

@@ -0,0 +1,3 @@
+import { STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR, STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG, } from '../StepperVerticalStepButton';
+export var STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_COLOR = STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR;
+export var STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_TAG = STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/entities/content.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/entities/index.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/index.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/types.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.js

@@ -18,11 +18,12 @@ export var StepperVerticalStepSubstepButton = polymorphicComponentWithRef(functi
         return null;
     }
     return (React.createElement(StepperVerticalStepButton, __assign({}, other, { as: as, ref: ref, color: color, iconRight: React.createElement(ChevronUpIcon, { className: cnStepperVerticalStepSubstepButton('Icon') }), className: cnStepperVerticalStepSubstepButton({ open: step.isSubStepsOpen, closed: !step.isSubStepsOpen }, [className]), onClick: function (event) {
-            step.setIsSubStepsOpen(function (prevState) { return !prevState; });
+            step.toggleSubsteps();
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         } }), renderContent({
         content: text,
         props: { isOpen: step.isSubStepsOpen },
     })));
 });
-StepperVerticalStepSubstepButton.displayName = 'StepperVerticalStepButton';
+StepperVerticalStepSubstepButton.displayName =
+    'StepperVerticalStepSubstepButton';

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

@@ -2,4 +2,5 @@ export * from './StepperVerticalIconIndicator';
 export * from './StepperVerticalIndicator';
 export * from './StepperVerticalStep';
 export * from './StepperVerticalStepButton';
+export * from './StepperVerticalStepSubcontentButton';
 export * from './StepperVerticalStepSubstepButton';

package/__inner__/esm/locale/locale.js

@@ -107,6 +107,12 @@ export var ruRU = {
         SidebarUserOnline: {
             label: 'Онлайн',
         },
+        SidebarSizer: {
+            'aria-label': function (_a) {
+                var collapsed = _a.collapsed;
+                return collapsed ? 'Развернуть боковую панель' : 'Свернуть боковую панель';
+            },
+        },
     },
 };
 export var kkKZ = {
@@ -217,6 +223,12 @@ export var kkKZ = {
         SidebarUserOnline: {
             label: 'Онлайн',
         },
+        SidebarSizer: {
+            'aria-label': function (_a) {
+                var collapsed = _a.collapsed;
+                return collapsed ? 'Бүйірлік панельді кеңейту' : 'Бүйірлік панельді жинау';
+            },
+        },
     },
 };
 export var enUS = {
@@ -328,5 +340,11 @@ export var enUS = {
         SidebarUserOnline: {
             label: 'Online',
         },
+        SidebarSizer: {
+            'aria-label': function (_a) {
+                var collapsed = _a.collapsed;
+                return collapsed ? 'Expand sidebar' : 'Collapse sidebar';
+            },
+        },
     },
 };

package/__inner__/types/components/Collapse/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentRef, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 export type CollapseRef = ComponentRef<'div'>;
 export type CollapseProps = ExtendableComponentPropsWithRef<{
@@ -40,6 +40,10 @@ export type CollapseProps = ExtendableComponentPropsWithRef<{
     /** Функция обратного вызова которая будет вызвана до начала
      * перехода компонента в состояние не представлен */
     onExiting?(node: HTMLElement | null): void;
+    /** Параметры внутренней части контента */
+    innerProps?: ComponentPropsWithRef<'div'>;
     /** Функция обратного вызова которая будет вызвана после onExit и до onExited */
     onExited?(node: HTMLElement | null): void;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
 }, 'div'>;