@astral/ui 4.50.0 → 4.52.0

package/node/components/DashboardLayout/Header/useLogic/useLogic.js

@@ -5,31 +5,36 @@ const react_1 = require("react");
 const DashboardContext_1 = require("../../../DashboardContext");
 const DashboardSidebarProvider_1 = require("../../../DashboardSidebarProvider");
 const useViewportType_1 = require("../../../useViewportType");
-const classNames_1 = require("../../../utils/classNames");
-const constants_1 = require("../constants");
 const useLogic = ({ profile, menuOrganization }) => {
-    const { isFocusedMode, isLoading, hasMenuOrganizationRef, alertHeight } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef, hasProfileRef, alertHeight, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { collapsedIn, onToggleSidebar, isPinned } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
     (0, react_1.useEffect)(() => {
         hasMenuOrganizationRef.current = Boolean(menuOrganization);
-    }, [menuOrganization]);
+        hasProfileRef.current = Boolean(profile);
+    }, [menuOrganization, profile]);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hasMenu = Boolean(profile?.menu || profile?.menuList);
-    const isShowProfile = (Boolean(profile) && !isMobile) || (hasMenu && isMobile);
-    const isShowExitButton = isMobile && !hasMenu && Boolean(profile?.exitButton);
-    const menuOrganizationClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
-        [constants_1.dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible]: isPinned,
-    }), [isPinned]);
+    const isShowProfile = (Boolean(profile) && !isMobile) ||
+        (hasMenu && isMobile && mobileHeaderPriorityFeature === 'profile');
+    const isShowExitButton = isMobile &&
+        !hasMenu &&
+        Boolean(profile?.exitButton) &&
+        mobileHeaderPriorityFeature === 'profile';
+    const headerStyle = {
+        '--alert-height': `${alertHeight}px`,
+    };
     return {
         isShowExitButton,
         isShowProfile,
         isMobile,
         isFocusedMode,
+        mobileHeaderPriorityFeature,
         isLoading,
         collapsedIn,
         onToggleSidebar,
         alertHeight,
-        menuOrganizationClassnames,
+        isPinned,
+        headerStyle,
     };
 };
 exports.useLogic = useLogic;

package/node/components/DashboardLayout/types.d.ts

@@ -10,4 +10,9 @@ export type DashboardLayoutProps = {
      * Если true, отображается состояние загрузки
      */
     isLoading?: boolean;
+    /**
+     * Элемент, отображаемый в мобильном хедере.
+     * Второстепенный будет помещен в sidebar.
+     */
+    mobileHeaderPriorityFeature?: 'profile' | 'menuOrg';
 };

package/node/components/DashboardSidebar/DashboardSidebar.js

@@ -6,17 +6,32 @@ const react_1 = require("react");
 const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
 const NavMenu_1 = require("../NavMenu");
 const PinButton_1 = require("../PinButton");
+const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
+const constants_1 = require("./constants");
 const SidebarNav_1 = require("./SidebarNav");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const sidebar = (0, cva_1.cva)('', {
+    variants: {
+        hasProfile: {
+            true: constants_1.dashboardSidebarClassnames.hasProfile,
+        },
+        hasMenuOrganization: {
+            true: constants_1.dashboardSidebarClassnames.hasMenuOrganization,
+        },
+    },
+});
 /**
  * Основной sidebar приложения
  */
 exports.DashboardSidebar = (0, react_1.forwardRef)((props, ref) => {
-    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, wrapperClassnames, menu, header, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, menu, header, isLoading, hasMenuOrganization, hasProfile, } = (0, useLogic_1.useLogic)(props);
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: wrapperClassnames, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: sidebar({
+            hasProfile,
+            hasMenuOrganization,
+        }), children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
 });

package/node/components/DashboardSidebar/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const dashboardSidebarClassnames: {
     root: string;
+    hasProfile: string;
     hasMenuOrganization: string;
 };
 export declare const LABEL_WIDTH: {

package/node/components/DashboardSidebar/constants.js

@@ -4,6 +4,7 @@ exports.LABEL_WIDTH = exports.dashboardSidebarClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.dashboardSidebarClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar'),
+    hasProfile: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-profile'),
     hasMenuOrganization: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-menu-organization'),
 };
 exports.LABEL_WIDTH = {

package/node/components/DashboardSidebar/styles.js

@@ -38,7 +38,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
     });
 }};
 
-    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization} {
+    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization}, &.${constants_4.dashboardSidebarClassnames.hasProfile} {
       top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
     }
   }

package/node/components/DashboardSidebar/useLogic/useLogic.d.ts

@@ -28,5 +28,6 @@ export declare const useLogic: (props: DashboardSidebarProps) => {
     header: import("react").ReactNode;
     isLoading: boolean;
     classnames: string;
-    wrapperClassnames: string;
+    hasMenuOrganization: boolean | null;
+    hasProfile: boolean | null;
 };

package/node/components/DashboardSidebar/useLogic/useLogic.js

@@ -13,7 +13,7 @@ const constants_1 = require("../constants");
 const useLogic = (props) => {
     const { className, menu, header, isLoading } = props;
     const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
-    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, hasProfileRef, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hoverTimerRef = (0, react_1.useRef)(null);
     const theme = (0, useTheme_1.useTheme)();
@@ -83,9 +83,6 @@ const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
-    const wrapperClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
-        [constants_1.dashboardSidebarClassnames.hasMenuOrganization]: hasMenuOrganizationRef.current,
-    }), [hasMenuOrganizationRef.current]);
     const classnames = (0, classNames_1.classNames)(className, constants_1.dashboardSidebarClassnames.root);
     return {
         isPinned,
@@ -99,7 +96,9 @@ const useLogic = (props) => {
         header,
         isLoading: isLoading || isDashboardLoading,
         classnames,
-        wrapperClassnames,
+        hasMenuOrganization: hasMenuOrganizationRef.current &&
+            mobileHeaderPriorityFeature === 'profile',
+        hasProfile: hasProfileRef.current && mobileHeaderPriorityFeature === 'menuOrg',
     };
 };
 exports.useLogic = useLogic;

package/node/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -16,7 +16,7 @@ exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, current
     });
     const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, className: constants_1.menuOrganizationClassnames.button, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
             className: hidePersonalDataClassname,
-        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
+        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { className: constants_1.menuOrganizationClassnames.organizationData, children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

package/node/components/MenuOrganization/constants.d.ts

@@ -5,4 +5,5 @@ export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
     button: string;
+    organizationData: string;
 };

package/node/components/MenuOrganization/constants.js

@@ -9,4 +9,5 @@ exports.menuOrganizationClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization'),
     errorPlaceholder: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__error-placeholder'),
     button: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__button'),
+    organizationData: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__organization-data'),
 };

package/node/components/NewStepper/NewStepper.js

@@ -25,7 +25,7 @@ const stepper = (0, cva_1.cva)(constants_1.stepperClassnames.root, {
 });
 const NewStepper = (props) => {
     const { containerRef, stepperConnector, stepperAlternativeLabel, activeStep, onClickPrevStep, onClickStep, orientation, className, children, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(StepperContext_1.StepperContextProvider, { orientation: orientation, activeStep: activeStep, setActiveStep: () => undefined, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: containerRef, role: "group", className: (0, classNames_1.classNames)(stepper({
+    return ((0, jsx_runtime_1.jsx)(StepperContext_1.StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: containerRef, role: "group", className: (0, classNames_1.classNames)(stepper({
                 alternativeLabel: stepperAlternativeLabel,
                 connector: stepperConnector,
                 orientation,

package/node/components/NewStepper/Step/Label/Label.d.ts

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
 type LabelProps = {
     label: ReactNode;
-    stepId: number;
     isActiveStep?: boolean;
 };
-export declare const Label: ({ label, stepId, isActiveStep }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Label: ({ label, isActiveStep }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/NewStepper/Step/Label/Label.js

@@ -7,7 +7,7 @@ const Typography_1 = require("../../../Typography");
 const Fade_1 = require("../../../transitions/Fade");
 const constants_1 = require("../constants");
 const styles_1 = require("./styles");
-const Label = ({ label, stepId, isActiveStep }) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.DesktopLabel, { className: constants_1.stepClassnames.label, children: label }), (0, jsx_runtime_1.jsxs)(styles_1.MobileLabelGroup, { className: constants_1.stepClassnames.labelMobile, children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: !isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: !isActiveStep, children: (0, jsx_runtime_1.jsx)(styles_1.MobileCompactLabel, { className: constants_1.stepClassnames.label, children: stepId }) }) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: isActiveStep, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: constants_1.stepClassnames.label, children: label }) }) })] })] }));
+const Label = ({ label, isActiveStep }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.DesktopLabel, { className: constants_1.stepClassnames.label, variant: "caption", children: label }), (0, jsx_runtime_1.jsxs)(styles_1.MobileLabelGroup, { className: constants_1.stepClassnames.labelMobile, children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: !isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: !isActiveStep, children: (0, jsx_runtime_1.jsx)(styles_1.MobileCompactLabel, { className: constants_1.stepClassnames.label, component: "span" }) }) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: isActiveStep, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: constants_1.stepClassnames.label, children: label }) }) })] })] }));
 };
 exports.Label = Label;

package/node/components/NewStepper/Step/Label/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesktopLabel = exports.MobileCompactLabel = exports.MobileLabelGroup = void 0;
 const styled_1 = require("../../../styled");
 const Typography_1 = require("../../../Typography");
+const constants_1 = require("../../constants");
 exports.MobileLabelGroup = styled_1.styled.div `
   display: none;
 
@@ -13,6 +14,10 @@ exports.MobileLabelGroup = styled_1.styled.div `
 `;
 exports.MobileCompactLabel = (0, styled_1.styled)(Typography_1.Typography) `
   display: inline-block;
+
+  &::before {
+    content: counter(${constants_1.STEPPER_ORDER_COUNTER_NAME});
+  }
 `;
 exports.DesktopLabel = (0, styled_1.styled)(Typography_1.Typography) `
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/NewStepper/Step/Step.js

@@ -56,7 +56,7 @@ const connector = (0, cva_1.cva)(constants_1.stepClassnames.connector, {
     },
 });
 const Step = (props) => {
-    const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, stepId, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = (0, useLogic_1.useLogic)(props);
+    const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = (0, useLogic_1.useLogic)(props);
     const StepContent = isRenderButton ? styles_1.StyledButton : styles_1.StepContentWrapper;
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "data-active-step": isActiveStep, className: (0, classNames_1.classNames)(step({
             isError,
@@ -68,7 +68,7 @@ const Step = (props) => {
             isDisabled,
         }), className), children: [(0, jsx_runtime_1.jsxs)(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: (0, classNames_1.classNames)(constants_1.stepClassnames.content, {
                     [constants_1.stepClassnames.active]: isActiveStep,
-                }), children: [(0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { className: constants_1.stepClassnames.labelContainer, children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.stepClassnames.iconContainer, children: (0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, stepId: stepId, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && ((0, jsx_runtime_1.jsx)(styles_1.ArrowConnector, { className: connector({
+                }), children: [(0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { className: constants_1.stepClassnames.labelContainer, children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.stepClassnames.iconContainer, children: (0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && ((0, jsx_runtime_1.jsx)(styles_1.ArrowConnector, { className: connector({
                                     connector: connectorVariant,
                                     alternativeLabel,
                                     orientation,

package/node/components/NewStepper/Step/styles.js

@@ -5,73 +5,82 @@ const NextOutlineMd_1 = require("../../../icons/NextOutlineMd");
 const Button_1 = require("../../Button");
 const styled_1 = require("../../styled");
 const constants_1 = require("../../Typography/constants");
-const constants_2 = require("../StepIcon/constants");
-const constants_3 = require("./constants");
+const constants_2 = require("../constants");
+const constants_3 = require("../StepIcon/constants");
+const constants_4 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
+  counter-increment: ${constants_2.STEPPER_ORDER_COUNTER_NAME};
+
   display: flex;
   gap: ${({ theme }) => theme.microSpacing(5)};
   align-items: center;
 
-  &.${constants_3.stepClassnames.alternativeLabel} {
+  &.${constants_4.stepClassnames.alternativeLabel} {
     position: relative;
 
     flex: 1;
     flex-direction: column;
 
-    & .${constants_3.stepClassnames.labelContainer} {
+    & .${constants_4.stepClassnames.labelContainer} {
       flex-direction: column;
 
       text-align: center;
     }
 
     &:first-of-type {
-      & .${constants_3.stepClassnames.connector} {
+      & .${constants_4.stepClassnames.connector} {
         display: none;
       }
     }
   }
 
-  &.${constants_3.stepClassnames.connectorArrow} {
-    & .${constants_3.stepClassnames.content} {
+  &.${constants_4.stepClassnames.connectorArrow} {
+    & .${constants_4.stepClassnames.content} {
       padding: ${({ theme }) => theme.microSpacing(5, 0)};
     }
     
-    &:not(:first-of-type) .${constants_3.stepClassnames.content} {
+    &:not(:first-of-type) .${constants_4.stepClassnames.content} {
       margin-left: ${({ theme }) => theme.spacing(2)};
     }
 
-    &:last-of-type .${constants_3.stepClassnames.connector} {
+    &:last-of-type .${constants_4.stepClassnames.connector} {
       display: none;
     }
   }
 
-  &.${constants_3.stepClassnames.connectorLine} {
-    &.${constants_3.stepClassnames.orientationHorizontal} {
-      & .${constants_3.stepClassnames.content} {
+  &.${constants_4.stepClassnames.connectorLine} {
+    &.${constants_4.stepClassnames.orientationHorizontal} {
+      & .${constants_4.stepClassnames.content} {
         align-items: center;
 
         padding: ${({ theme }) => theme.spacing(0, 1)};
       }
 
     
-      &.${constants_3.stepClassnames.alternativeLabel} {
-        & .${constants_3.stepClassnames.content} {
+      &.${constants_4.stepClassnames.alternativeLabel} {
+        & .${constants_4.stepClassnames.content} {
           padding: ${({ theme }) => theme.microSpacing(3, 0)};
         }
       }
     }
 
-    &.${constants_3.stepClassnames.orientationVertical} {
-      & .${constants_3.stepClassnames.content} {
+    &.${constants_4.stepClassnames.orientationVertical} {
+
+      & .${constants_4.stepClassnames.label} {
+        font-size: ${({ theme }) => theme.typography.body1.fontSize};
+        line-height: ${({ theme }) => theme.typography.body1.lineHeight};
+      }
+      
+      & .${constants_4.stepClassnames.content} {
         padding: ${({ theme }) => theme.spacing(1, 0, 0)};
       }
 
-      & .${constants_3.stepClassnames.connector}:not(.${constants_3.stepClassnames.hasDescription}) {
+      & .${constants_4.stepClassnames.connector}:not(.${constants_4.stepClassnames.hasDescription}) {
         margin-bottom: ${({ theme }) => theme.microSpacing(1)};
       }
 
       &:last-of-type {
-        & .${constants_3.stepClassnames.description} {
+        & .${constants_4.stepClassnames.description} {
           min-height: 0;
           margin: 0;
           padding-left: ${({ theme }) => theme.spacing(6)};
@@ -83,49 +92,49 @@ exports.Wrapper = styled_1.styled.div `
           }
         }
 
-        & .${constants_3.stepClassnames.connector} {
+        & .${constants_4.stepClassnames.connector} {
           display: none;
         }
       }
 
       &:last-of-type {
-        & .${constants_3.stepClassnames.content} {
+        & .${constants_4.stepClassnames.content} {
           padding: ${({ theme }) => theme.spacing(1, 0)};
     
-          & .${constants_3.stepClassnames.description} {
+          & .${constants_4.stepClassnames.description} {
             margin-bottom: 0;
           }
         }
       }
 
-      & .${constants_3.stepClassnames.labelMobile} {
+      & .${constants_4.stepClassnames.labelMobile} {
         display: none;
       }
 
-      & .${constants_3.stepClassnames.label} {
+      & .${constants_4.stepClassnames.label} {
         display: block;
       }
     }
   }
 
-  & .${constants_3.stepClassnames.content} {
-    &.${constants_3.stepClassnames.active} {
-      & .${constants_3.stepClassnames.label} {
+  & .${constants_4.stepClassnames.content} {
+    &.${constants_4.stepClassnames.active} {
+      & .${constants_4.stepClassnames.label} {
         color: ${({ theme }) => theme.palette.grey[900]};
       }
 
-      & .${constants_2.stepIconClassnames.root} {
+      & .${constants_3.stepIconClassnames.root} {
         color: ${({ theme }) => theme.palette.primary[800]};
 
-        &.${constants_2.stepIconClassnames.success} {
+        &.${constants_3.stepIconClassnames.success} {
           color: ${({ theme }) => theme.palette.success[800]};
         }
 
-        &.${constants_2.stepIconClassnames.error} {
+        &.${constants_3.stepIconClassnames.error} {
           color: ${({ theme }) => theme.palette.error[800]};
         }
 
-        &.${constants_2.stepIconClassnames.warning} {
+        &.${constants_3.stepIconClassnames.warning} {
           color: ${({ theme }) => theme.palette.warning[800]};
         }
       }
@@ -135,7 +144,7 @@ exports.Wrapper = styled_1.styled.div `
 exports.IconWrapper = styled_1.styled.div `
   display: flex;
 
-  & .${constants_2.stepIconClassnames.root} {
+  & .${constants_3.stepIconClassnames.root} {
     width: 20px;
     height: 20px;
 
@@ -145,19 +154,19 @@ exports.IconWrapper = styled_1.styled.div `
     duration: theme.transitions.duration.shorter,
 })};
 
-    &.${constants_2.stepIconClassnames.active} {
+    &.${constants_3.stepIconClassnames.active} {
       color: ${({ theme }) => theme.palette.primary[800]};
     }
 
-    &.${constants_2.stepIconClassnames.success} {
+    &.${constants_3.stepIconClassnames.success} {
       color: ${({ theme }) => theme.palette.success[800]};
     }
 
-    &.${constants_2.stepIconClassnames.error} {
+    &.${constants_3.stepIconClassnames.error} {
       color: ${({ theme }) => theme.palette.error[800]};
     }
 
-    &.${constants_2.stepIconClassnames.warning} {
+    &.${constants_3.stepIconClassnames.warning} {
       color: ${({ theme }) => theme.palette.warning[800]};
     }
 
@@ -185,14 +194,14 @@ exports.LineConnector = styled_1.styled.div `
 
   border-top: 2px solid ${({ theme }) => theme.palette.grey[300]};
 
-  &.${constants_3.stepClassnames.alternativeLabel} {
+  &.${constants_4.stepClassnames.alternativeLabel} {
     position: absolute;
     top: 15px;
     right: calc(50% + 14px);
     left: calc(-50% + 14px);
   }
 
-  &.${constants_3.stepClassnames.orientationVertical} {
+  &.${constants_4.stepClassnames.orientationVertical} {
     min-height: 16px;
 
     /* Смещение необходимо для центрирования линии относительно иконки, т.к. линия шириной 2px, то для выравнивания необходимо число не кратное 2ум  */
@@ -255,22 +264,22 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
   &:hover {
     background: transparent;
 
-    & .${constants_3.stepClassnames.label} {
+    & .${constants_4.stepClassnames.label} {
       color: ${({ theme }) => theme.palette.grey[700]};
     }
 
-    & .${constants_2.stepIconClassnames.root} {
+    & .${constants_3.stepIconClassnames.root} {
       color: ${({ theme }) => theme.palette.primary[700]};
 
-      &.${constants_2.stepIconClassnames.success} {
+      &.${constants_3.stepIconClassnames.success} {
         color: ${({ theme }) => theme.palette.success[700]};
       }
 
-      &.${constants_2.stepIconClassnames.error} {
+      &.${constants_3.stepIconClassnames.error} {
         color: ${({ theme }) => theme.palette.error[700]};
       }
 
-      &.${constants_2.stepIconClassnames.warning} {
+      &.${constants_3.stepIconClassnames.warning} {
         color: ${({ theme }) => theme.palette.warning[700]};
       }
     }
@@ -278,22 +287,22 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
   &:active {
     background: transparent;
-    & .${constants_3.stepClassnames.label} {
+    & .${constants_4.stepClassnames.label} {
       color: ${({ theme }) => theme.palette.grey[900]};
     }
 
-    & .${constants_2.stepIconClassnames.root} {
+    & .${constants_3.stepIconClassnames.root} {
       color: ${({ theme }) => theme.palette.primary[800]};
 
-      &.${constants_2.stepIconClassnames.success} {
+      &.${constants_3.stepIconClassnames.success} {
         color: ${({ theme }) => theme.palette.success[800]};
       }
 
-      &.${constants_2.stepIconClassnames.error} {
+      &.${constants_3.stepIconClassnames.error} {
         color: ${({ theme }) => theme.palette.error[800]};
       }
 
-      &.${constants_2.stepIconClassnames.warning} {
+      &.${constants_3.stepIconClassnames.warning} {
         color: ${({ theme }) => theme.palette.warning[700]};
       }
     }

package/node/components/NewStepper/StepperContext/StepperContext.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export type StepperContextProps = {
     activeStep: number;
-    setActiveStep: (step: number) => void;
     orientation: 'horizontal' | 'vertical';
     connector: 'arrow' | 'line';
     alternativeLabel: boolean;

package/node/components/NewStepper/StepperContext/StepperContext.js

@@ -4,7 +4,6 @@ exports.StepperContext = void 0;
 const react_1 = require("react");
 exports.StepperContext = (0, react_1.createContext)({
     activeStep: 0,
-    setActiveStep: () => undefined,
     orientation: 'horizontal',
     connector: 'line',
     alternativeLabel: false,

package/node/components/NewStepper/StepperContext/StepperContextProvider/StepperContextProvider.d.ts

@@ -3,5 +3,5 @@ import { type StepperContextProps } from '../StepperContext';
 type Props = StepperContextProps & {
     children: ReactNode;
 };
-export declare const StepperContextProvider: ({ children, orientation, activeStep, setActiveStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperContextProvider: ({ children, orientation, activeStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/NewStepper/StepperContext/StepperContextProvider/StepperContextProvider.js

@@ -4,11 +4,10 @@ exports.StepperContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const StepperContext_1 = require("../StepperContext");
-const StepperContextProvider = ({ children, orientation, activeStep, setActiveStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }) => {
+const StepperContextProvider = ({ children, orientation, activeStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }) => {
     const contextValue = (0, react_1.useMemo)(() => ({
         activeStep,
         orientation,
-        setActiveStep,
         connector,
         alternativeLabel,
         onClickPrevStep,
@@ -16,7 +15,6 @@ const StepperContextProvider = ({ children, orientation, activeStep, setActiveSt
     }), [
         activeStep,
         orientation,
-        setActiveStep,
         connector,
         alternativeLabel,
         onClickPrevStep,

package/node/components/NewStepper/constants.d.ts

@@ -6,6 +6,7 @@ export declare const stepperClassnames: {
     orientationVertical: string;
     alternativeLabel: string;
 };
+export declare const STEPPER_ORDER_COUNTER_NAME = "astral-ui-stepper-order";
 /**
  * Задержка перед scrollIntoView после смены activeStep, что бы анимация появления текста завершилась
  */

package/node/components/NewStepper/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS = exports.stepperClassnames = void 0;
+exports.MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS = exports.STEPPER_ORDER_COUNTER_NAME = exports.stepperClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.stepperClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('stepper'),
@@ -10,6 +10,7 @@ exports.stepperClassnames = {
     orientationVertical: (0, createUIKitClassname_1.createUIKitClassname)('stepper_orientation-vertical'),
     alternativeLabel: (0, createUIKitClassname_1.createUIKitClassname)('stepper_alternative-label'),
 };
+exports.STEPPER_ORDER_COUNTER_NAME = 'astral-ui-stepper-order';
 /**
  * Задержка перед scrollIntoView после смены activeStep, что бы анимация появления текста завершилась
  */

package/node/components/NewStepper/styles.js

@@ -4,6 +4,8 @@ exports.Wrapper = void 0;
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
+  counter-reset: ${constants_1.STEPPER_ORDER_COUNTER_NAME} 0;
+
   display: flex;
   align-items: flex-start;
 
@@ -30,8 +32,16 @@ exports.Wrapper = styled_1.styled.div `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
     overflow-x: auto;
 
     width: 100%;
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 `;