@astral/ui 4.50.0 → 4.51.0

package/components/NewStepper/NewStepper.js

@@ -22,7 +22,7 @@ const stepper = cva(stepperClassnames.root, {
 });
 export const NewStepper = (props) => {
     const { containerRef, stepperConnector, stepperAlternativeLabel, activeStep, onClickPrevStep, onClickStep, orientation, className, children, } = useLogic(props);
-    return (_jsx(StepperContextProvider, { orientation: orientation, activeStep: activeStep, setActiveStep: () => undefined, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: _jsx(Wrapper, { ref: containerRef, role: "group", className: classNames(stepper({
+    return (_jsx(StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: _jsx(Wrapper, { ref: containerRef, role: "group", className: classNames(stepper({
                 alternativeLabel: stepperAlternativeLabel,
                 connector: stepperConnector,
                 orientation,

package/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/components/NewStepper/Step/Label/Label.js

@@ -4,6 +4,6 @@ import { Typography } from '../../../Typography';
 import { Fade } from '../../../transitions/Fade';
 import { stepClassnames } from '../constants';
 import { DesktopLabel, MobileCompactLabel, MobileLabelGroup } from './styles';
-export const Label = ({ label, stepId, isActiveStep }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(DesktopLabel, { className: stepClassnames.label, children: label }), _jsxs(MobileLabelGroup, { className: stepClassnames.labelMobile, children: [_jsx(Collapse, { in: !isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: !isActiveStep, children: _jsx(MobileCompactLabel, { className: stepClassnames.label, children: stepId }) }) }), _jsx(Collapse, { in: isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: isActiveStep, children: _jsx(Typography, { className: stepClassnames.label, children: label }) }) })] })] }));
+export const Label = ({ label, isActiveStep }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(DesktopLabel, { className: stepClassnames.label, variant: "caption", children: label }), _jsxs(MobileLabelGroup, { className: stepClassnames.labelMobile, children: [_jsx(Collapse, { in: !isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: !isActiveStep, children: _jsx(MobileCompactLabel, { className: stepClassnames.label, component: "span" }) }) }), _jsx(Collapse, { in: isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: isActiveStep, children: _jsx(Typography, { className: stepClassnames.label, children: label }) }) })] })] }));
 };

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

@@ -1,5 +1,6 @@
 import { styled } from '../../../styled';
 import { Typography } from '../../../Typography';
+import { STEPPER_ORDER_COUNTER_NAME } from '../../constants';
 export const MobileLabelGroup = styled.div `
   display: none;
 
@@ -10,6 +11,10 @@ export const MobileLabelGroup = styled.div `
 `;
 export const MobileCompactLabel = styled(Typography) `
   display: inline-block;
+
+  &::before {
+    content: counter(${STEPPER_ORDER_COUNTER_NAME});
+  }
 `;
 export const DesktopLabel = styled(Typography) `
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/NewStepper/Step/Step.js

@@ -53,7 +53,7 @@ const connector = cva(stepClassnames.connector, {
     },
 });
 export const Step = (props) => {
-    const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, stepId, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = useLogic(props);
+    const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = useLogic(props);
     const StepContent = isRenderButton ? StyledButton : StepContentWrapper;
     return (_jsxs(Wrapper, { "data-active-step": isActiveStep, className: classNames(step({
             isError,
@@ -65,7 +65,7 @@ export const Step = (props) => {
             isDisabled,
         }), className), children: [_jsxs(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: classNames(stepClassnames.content, {
                     [stepClassnames.active]: isActiveStep,
-                }), children: [_jsxs(LabelWrapper, { className: stepClassnames.labelContainer, children: [_jsx(IconWrapper, { className: stepClassnames.iconContainer, children: _jsx(StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), _jsx(Label, { label: label, stepId: stepId, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && (_jsx(ArrowConnector, { className: connector({
+                }), children: [_jsxs(LabelWrapper, { className: stepClassnames.labelContainer, children: [_jsx(IconWrapper, { className: stepClassnames.iconContainer, children: _jsx(StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), _jsx(Label, { label: label, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && (_jsx(ArrowConnector, { className: connector({
                                     connector: connectorVariant,
                                     alternativeLabel,
                                     orientation,

package/components/NewStepper/Step/styles.js

@@ -2,9 +2,12 @@ import { NextOutlineMd } from '../../../icons/NextOutlineMd';
 import { Button } from '../../Button';
 import { styled } from '../../styled';
 import { typographyClassnames } from '../../Typography/constants';
+import { STEPPER_ORDER_COUNTER_NAME } from '../constants';
 import { stepIconClassnames } from '../StepIcon/constants';
 import { stepClassnames } from './constants';
 export const Wrapper = styled.div `
+  counter-increment: ${STEPPER_ORDER_COUNTER_NAME};
+
   display: flex;
   gap: ${({ theme }) => theme.microSpacing(5)};
   align-items: center;
@@ -59,6 +62,12 @@ export const Wrapper = styled.div `
     }
 
     &.${stepClassnames.orientationVertical} {
+
+      & .${stepClassnames.label} {
+        font-size: ${({ theme }) => theme.typography.body1.fontSize};
+        line-height: ${({ theme }) => theme.typography.body1.lineHeight};
+      }
+      
       & .${stepClassnames.content} {
         padding: ${({ theme }) => theme.spacing(1, 0, 0)};
       }

package/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/components/NewStepper/StepperContext/StepperContext.js

@@ -1,7 +1,6 @@
 import { createContext } from 'react';
 export const StepperContext = createContext({
     activeStep: 0,
-    setActiveStep: () => undefined,
     orientation: 'horizontal',
     connector: 'line',
     alternativeLabel: false,

package/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/components/NewStepper/StepperContext/StepperContextProvider/StepperContextProvider.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { StepperContext } from '../StepperContext';
-export const StepperContextProvider = ({ children, orientation, activeStep, setActiveStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }) => {
+export const StepperContextProvider = ({ children, orientation, activeStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }) => {
     const contextValue = useMemo(() => ({
         activeStep,
         orientation,
-        setActiveStep,
         connector,
         alternativeLabel,
         onClickPrevStep,
@@ -13,7 +12,6 @@ export const StepperContextProvider = ({ children, orientation, activeStep, setA
     }), [
         activeStep,
         orientation,
-        setActiveStep,
         connector,
         alternativeLabel,
         onClickPrevStep,

package/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/components/NewStepper/constants.js

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

package/components/NewStepper/styles.js

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

package/hook-form/FormWizard/FormWizard.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContentState } from '../../components/ContentState';
+import { Step } from '../../components/NewStepper';
 import { Form } from '../Form';
 import { Footer } from './Footer';
-import { BeforeContentWrapper, FormContent, StyledStepperWizard, Wrapper, } from './styles';
+import { BeforeContentWrapper, FormContent, StyledNewStepper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 /**
  * FormWizard предназначен для построения форм со степпером.
  */
 export const FormWizard = (props) => {
-    const { Component, footerProps, stepWizardProps } = useLogic(props);
+    const { Component, footerProps, activeStep, steps } = useLogic(props);
     const { className, isFirstStep, isLastStep, isDisabled, isLoading, isError, form, customFooter, errorMsg, onRetry, onClickStep, onPrevStep, onSubmit, onSubmitError, beforeContent, } = props;
     const renderFooter = () => {
         if (customFooter) {
@@ -22,7 +23,7 @@ export const FormWizard = (props) => {
         }
         return (_jsx(Footer, { isDisabled: isDisabled, isFirstStep: isFirstStep, isLastStep: isLastStep, onPrevStep: onPrevStep, ...footerProps }));
     };
-    return (_jsxs(Wrapper, { className: className, children: [beforeContent && (_jsx(BeforeContentWrapper, { children: beforeContent })), _jsx(StyledStepperWizard, { connector: "arrow", onClickPrevStep: onClickStep, ...stepWizardProps }), _jsx(ContentState, { isLoading: isLoading, isError: isError, 
+    return (_jsxs(Wrapper, { className: className, children: [beforeContent && (_jsx(BeforeContentWrapper, { children: beforeContent })), _jsx(StyledNewStepper, { connector: "arrow", onClickPrevStep: onClickStep, activeStep: activeStep, children: steps.map((step) => (_jsx(Step, { ...step }, step.stepId))) }), _jsx(ContentState, { isLoading: isLoading, isError: isError, 
                 // biome-ignore lint/suspicious/noTsIgnore: onRetry не требуется, если форма не инициализируется данными, получаемыми с backend
                 // @ts-ignore
                 errorState: { errorList: [errorMsg || ''], onRetry }, children: _jsxs(Form, { form: form, isDisabled: isDisabled, onSubmit: form.handleSubmit(onSubmit, onSubmitError), children: [_jsx(FormContent, { children: _jsx(Component, {}) }), renderFooter()] }) })] }));

package/hook-form/FormWizard/styles.d.ts

@@ -7,10 +7,7 @@ export declare const BeforeContentWrapper: import("../../components/styled").Sty
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledStepperWizard: import("../../components/styled").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
-    steps: import("../../components/StepperWizard").StepWizard[];
-    onClickPrevStep?: ((index: number) => void) | undefined;
-} & {
+export declare const StyledNewStepper: import("../../components/styled").StyledComponent<import("../../components/NewStepper").StepperProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const FormContent: import("../../components/styled").StyledComponent<{

package/hook-form/FormWizard/styles.js

@@ -1,4 +1,4 @@
-import { StepperWizard } from '../../components/StepperWizard';
+import { NewStepper } from '../../components/NewStepper';
 import { styled } from '../../components/styled';
 export const Wrapper = styled.section `
   display: flex;
@@ -13,14 +13,12 @@ export const BeforeContentWrapper = styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;
-export const StyledStepperWizard = styled(StepperWizard) `
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
+export const StyledNewStepper = styled(NewStepper) `
+  margin-bottom: ${({ theme }) => theme.spacing(5)};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow-x: auto;
-
-    margin-bottom: ${({ theme }) => theme.spacing(6)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;

package/hook-form/FormWizard/useLogic/useLogic.d.ts

@@ -3,12 +3,11 @@ import { type FormWizardProps } from '../FormWizard';
 type UseLogicParams<TFormValues extends Record<string, unknown>> = FormWizardProps<TFormValues>;
 export declare const useLogic: <TFormValues extends Record<string, unknown>>({ currentStepId, steps, submitButtonText, isLastStep, }: UseLogicParams<TFormValues>) => {
     Component: import("react").FunctionComponent<{}>;
-    stepWizardProps: {
-        activeStep: number;
-        steps: {
-            label: string;
-        }[];
-    };
+    steps: {
+        label: string;
+        stepId: number;
+    }[];
+    activeStep: number;
     footerProps: {
         prevButtonText: string;
         submitButtonText: string;

package/hook-form/FormWizard/useLogic/useLogic.js

@@ -5,17 +5,16 @@ export const useLogic = ({ currentStepId, steps, submitButtonText, isLastStep, }
         ? steps?.findIndex(({ id }) => Object.is(id, currentStepId))
         : 0, [currentStepId, steps]);
     const currentStep = steps[indexStep];
-    const stepsByLabel = steps.map(({ label }) => ({
+    const stepsByLabel = steps.map(({ label }, index) => ({
         label,
+        stepId: index,
     }));
     const prevButtonText = currentStep.prevButtonText || DEFAULT_PREV_BUTTON_TEXT;
     const nextButtonText = currentStep.nextButtonText || DEFAULT_NEXT_BUTTON_TEXT;
     return {
         Component: currentStep.component,
-        stepWizardProps: {
-            activeStep: indexStep,
-            steps: stepsByLabel,
-        },
+        steps: stepsByLabel,
+        activeStep: indexStep,
         footerProps: {
             prevButtonText,
             submitButtonText: isLastStep ? submitButtonText : nextButtonText,

package/hook-form/useFormWizard/useFormWizard.js

@@ -65,8 +65,10 @@ export const useFormWizard = ({ initialStepId, defaultValues, isDisabled, steps,
         return;
     };
     const handleClickStep = (index) => {
-        const stepId = steps[index].id;
-        setCurrentStepId(stepId);
+        if (index < 0 || index >= visibleSteps.length) {
+            return;
+        }
+        setCurrentStepId(visibleSteps[index].id);
     };
     const handlePrevStep = () => {
         if (isFirstStep) {

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;
+    }
   }
 `;

package/node/hook-form/FormWizard/FormWizard.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormWizard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentState_1 = require("../../components/ContentState");
+const NewStepper_1 = require("../../components/NewStepper");
 const Form_1 = require("../Form");
 const Footer_1 = require("./Footer");
 const styles_1 = require("./styles");
@@ -11,7 +12,7 @@ const useLogic_1 = require("./useLogic");
  * FormWizard предназначен для построения форм со степпером.
  */
 const FormWizard = (props) => {
-    const { Component, footerProps, stepWizardProps } = (0, useLogic_1.useLogic)(props);
+    const { Component, footerProps, activeStep, steps } = (0, useLogic_1.useLogic)(props);
     const { className, isFirstStep, isLastStep, isDisabled, isLoading, isError, form, customFooter, errorMsg, onRetry, onClickStep, onPrevStep, onSubmit, onSubmitError, beforeContent, } = props;
     const renderFooter = () => {
         if (customFooter) {
@@ -25,7 +26,7 @@ const FormWizard = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { isDisabled: isDisabled, isFirstStep: isFirstStep, isLastStep: isLastStep, onPrevStep: onPrevStep, ...footerProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [beforeContent && ((0, jsx_runtime_1.jsx)(styles_1.BeforeContentWrapper, { children: beforeContent })), (0, jsx_runtime_1.jsx)(styles_1.StyledStepperWizard, { connector: "arrow", onClickPrevStep: onClickStep, ...stepWizardProps }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isError: isError, 
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [beforeContent && ((0, jsx_runtime_1.jsx)(styles_1.BeforeContentWrapper, { children: beforeContent })), (0, jsx_runtime_1.jsx)(styles_1.StyledNewStepper, { connector: "arrow", onClickPrevStep: onClickStep, activeStep: activeStep, children: steps.map((step) => ((0, jsx_runtime_1.jsx)(NewStepper_1.Step, { ...step }, step.stepId))) }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isError: isError, 
                 // biome-ignore lint/suspicious/noTsIgnore: onRetry не требуется, если форма не инициализируется данными, получаемыми с backend
                 // @ts-ignore
                 errorState: { errorList: [errorMsg || ''], onRetry }, children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { form: form, isDisabled: isDisabled, onSubmit: form.handleSubmit(onSubmit, onSubmitError), children: [(0, jsx_runtime_1.jsx)(styles_1.FormContent, { children: (0, jsx_runtime_1.jsx)(Component, {}) }), renderFooter()] }) })] }));

package/node/hook-form/FormWizard/styles.d.ts

@@ -7,10 +7,7 @@ export declare const BeforeContentWrapper: import("@emotion/styled/dist/declarat
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledStepperWizard: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
-    steps: import("../../components/StepperWizard").StepWizard[];
-    onClickPrevStep?: ((index: number) => void) | undefined;
-} & {
+export declare const StyledNewStepper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../components/NewStepper").StepperProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const FormContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/hook-form/FormWizard/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormContent = exports.StyledStepperWizard = exports.BeforeContentWrapper = exports.Wrapper = void 0;
-const StepperWizard_1 = require("../../components/StepperWizard");
+exports.FormContent = exports.StyledNewStepper = exports.BeforeContentWrapper = exports.Wrapper = void 0;
+const NewStepper_1 = require("../../components/NewStepper");
 const styled_1 = require("../../components/styled");
 exports.Wrapper = styled_1.styled.section `
   display: flex;
@@ -16,14 +16,12 @@ exports.BeforeContentWrapper = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;
-exports.StyledStepperWizard = (0, styled_1.styled)(StepperWizard_1.StepperWizard) `
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
+exports.StyledNewStepper = (0, styled_1.styled)(NewStepper_1.NewStepper) `
+  margin-bottom: ${({ theme }) => theme.spacing(5)};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow-x: auto;
-
-    margin-bottom: ${({ theme }) => theme.spacing(6)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;

package/node/hook-form/FormWizard/useLogic/useLogic.d.ts

@@ -3,12 +3,11 @@ import { type FormWizardProps } from '../FormWizard';
 type UseLogicParams<TFormValues extends Record<string, unknown>> = FormWizardProps<TFormValues>;
 export declare const useLogic: <TFormValues extends Record<string, unknown>>({ currentStepId, steps, submitButtonText, isLastStep, }: UseLogicParams<TFormValues>) => {
     Component: import("react").FunctionComponent<{}>;
-    stepWizardProps: {
-        activeStep: number;
-        steps: {
-            label: string;
-        }[];
-    };
+    steps: {
+        label: string;
+        stepId: number;
+    }[];
+    activeStep: number;
     footerProps: {
         prevButtonText: string;
         submitButtonText: string;

package/node/hook-form/FormWizard/useLogic/useLogic.js

@@ -8,17 +8,16 @@ const useLogic = ({ currentStepId, steps, submitButtonText, isLastStep, }) => {
         ? steps?.findIndex(({ id }) => Object.is(id, currentStepId))
         : 0, [currentStepId, steps]);
     const currentStep = steps[indexStep];
-    const stepsByLabel = steps.map(({ label }) => ({
+    const stepsByLabel = steps.map(({ label }, index) => ({
         label,
+        stepId: index,
     }));
     const prevButtonText = currentStep.prevButtonText || constants_1.DEFAULT_PREV_BUTTON_TEXT;
     const nextButtonText = currentStep.nextButtonText || constants_1.DEFAULT_NEXT_BUTTON_TEXT;
     return {
         Component: currentStep.component,
-        stepWizardProps: {
-            activeStep: indexStep,
-            steps: stepsByLabel,
-        },
+        steps: stepsByLabel,
+        activeStep: indexStep,
         footerProps: {
             prevButtonText,
             submitButtonText: isLastStep ? submitButtonText : nextButtonText,

package/node/hook-form/useFormWizard/useFormWizard.js

@@ -68,8 +68,10 @@ const useFormWizard = ({ initialStepId, defaultValues, isDisabled, steps, autoSa
         return;
     };
     const handleClickStep = (index) => {
-        const stepId = steps[index].id;
-        setCurrentStepId(stepId);
+        if (index < 0 || index >= visibleSteps.length) {
+            return;
+        }
+        setCurrentStepId(visibleSteps[index].id);
     };
     const handlePrevStep = () => {
         if (isFirstStep) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.50.0",
+  "version": "4.51.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/NewStepper/Step/Label/useLogic/index.d.ts

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

package/components/NewStepper/Step/Label/useLogic/index.js

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

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

@@ -1,7 +0,0 @@
-type UseLogicParams = {
-    stepId: number;
-};
-export declare const useLogic: ({ stepId }: UseLogicParams) => {
-    isStepActive: boolean;
-};
-export {};

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

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import { StepperContext } from '../../../StepperContext';
-export const useLogic = ({ stepId }) => {
-    const { activeStep } = useContext(StepperContext);
-    const isStepActive = activeStep === stepId;
-    return { isStepActive };
-};

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

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

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

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useLogic"), exports);

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

@@ -1,7 +0,0 @@
-type UseLogicParams = {
-    stepId: number;
-};
-export declare const useLogic: ({ stepId }: UseLogicParams) => {
-    isStepActive: boolean;
-};
-export {};

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLogic = void 0;
-const react_1 = require("react");
-const StepperContext_1 = require("../../../StepperContext");
-const useLogic = ({ stepId }) => {
-    const { activeStep } = (0, react_1.useContext)(StepperContext_1.StepperContext);
-    const isStepActive = activeStep === stepId;
-    return { isStepActive };
-};
-exports.useLogic = useLogic;