@astral/ui 4.49.0 → 4.51.0

package/components/NewStepper/Step/types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { StepIconProps } from '../StepIcon';
+export type StepProps = {
+    /**
+     * Название шага
+     */
+    label: ReactNode;
+    /**
+     * Флаг ошибки шага
+     */
+    isError?: boolean;
+    /**
+     * Завершённость шага. Если не передан — считается по `activeStep` (как раньше: пройдены шаги с меньшим `stepId`).
+     */
+    isCompleted?: boolean;
+    /**
+     * Флаг предупреждения шага
+     */
+    isWarning?: boolean;
+    /**
+     * Флаг блокировки шага
+     */
+    isDisabled?: boolean;
+    /**
+     * Дополнительный текст шага
+     */
+    children?: ReactNode;
+    /**
+     * Функция вызываемая при клике на шаг
+     */
+    onClick?: (stepId: number) => void;
+    /**
+     * Кастомный компонент иконки
+     */
+    icon?: (props: Omit<StepIconProps, 'icon'>) => ReactNode;
+    /**
+     * Класс применяемый к корневому элементу
+     */
+    className?: string;
+    /**
+     * ID шага
+     */
+    stepId: number;
+};

package/components/NewStepper/Step/types.js

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { StepProps } from '../types';
+type UseLogicParams = StepProps;
+export declare const useLogic: ({ stepId, isCompleted, onClick, children, isError, isWarning, icon, label, isDisabled, className, }: UseLogicParams) => {
+    isCompletedStep: boolean;
+    isRenderButton: boolean;
+    handleClick: () => void;
+    connectorVariant: "line" | "arrow";
+    alternativeLabel: boolean;
+    orientation: "horizontal" | "vertical";
+    stepId: number;
+    children: import("react").ReactNode;
+    isError: boolean | undefined;
+    isWarning: boolean | undefined;
+    icon: ((props: Omit<import("../../StepIcon").StepIconProps, "icon">) => import("react").ReactNode) | undefined;
+    className: string | undefined;
+    label: import("react").ReactNode;
+    isRenderVerticalLineConnector: boolean;
+    isRenderHorizontalLineConnector: boolean;
+    isDisabled: boolean;
+    isActiveStep: boolean;
+};
+export {};

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

@@ -0,0 +1,55 @@
+import { useContext, useEffect } from 'react';
+import { StepperContext } from '../../StepperContext';
+export const useLogic = ({ stepId, isCompleted, onClick, children, isError, isWarning, icon, label, isDisabled, className, }) => {
+    const { connector, activeStep, orientation, alternativeLabel, onClickPrevStep, onClickStep, } = useContext(StepperContext);
+    useEffect(() => {
+        const hasDescription = Boolean(children);
+        const isValidForDescription = orientation === 'vertical' &&
+            connector === 'line' &&
+            alternativeLabel === false;
+        if (hasDescription && !isValidForDescription) {
+            // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
+            console.error('Stepper: description можно использовать только с комбинацией:\n' +
+                'orientation="vertical", connector="line", alternativeLabel=false');
+        }
+    }, []);
+    const isCompletedStep = isCompleted !== undefined ? isCompleted : activeStep > stepId;
+    const isClickableStep = Boolean(onClick) ||
+        Boolean(onClickStep) ||
+        (Boolean(onClickPrevStep) && isCompletedStep);
+    const isDisabledFromPrevOnlyMode = Boolean(onClickPrevStep) && !isClickableStep;
+    const isDisabledStep = Boolean(isDisabled) || isDisabledFromPrevOnlyMode;
+    const isRenderButton = Boolean(onClick) || Boolean(onClickPrevStep) || Boolean(onClickStep);
+    const handleClick = () => {
+        if (isDisabledStep) {
+            return;
+        }
+        if (isCompletedStep && onClickPrevStep) {
+            onClickPrevStep(stepId);
+        }
+        onClickStep?.(stepId);
+        onClick?.(stepId);
+    };
+    const isRenderVerticalLineConnector = connector === 'line' && orientation === 'vertical' && !children;
+    const isRenderHorizontalLineConnector = connector === 'line' && orientation === 'horizontal' && alternativeLabel;
+    const isActiveStep = activeStep === stepId;
+    return {
+        isCompletedStep,
+        isRenderButton,
+        handleClick,
+        connectorVariant: connector,
+        alternativeLabel,
+        orientation,
+        stepId,
+        children,
+        isError,
+        isWarning,
+        icon,
+        className,
+        label,
+        isRenderVerticalLineConnector,
+        isRenderHorizontalLineConnector,
+        isDisabled: isDisabledStep,
+        isActiveStep,
+    };
+};

package/components/NewStepper/StepIcon/StepIcon.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export type StepIconProps = {
+    /**
+     * Флаг активности шага
+     */
+    isActive?: boolean;
+    /**
+     * Флаг завершенности шага
+     */
+    isCompleted?: boolean;
+    /**
+     * Флаг ошибки шага
+     */
+    isError?: boolean;
+    /**
+     * Флаг предупреждения шага
+     */
+    isWarning?: boolean;
+    /**
+     * Класс применяемый к корневому элементу
+     */
+    className?: string;
+    /**
+     * Кастомный компонент иконки
+     */
+    icon?: (props: Omit<StepIconProps, 'icon'>) => ReactNode;
+};
+export declare const StepIcon: ({ icon: Icon, isActive, isCompleted, isError, isWarning, }: StepIconProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewStepper/StepIcon/StepIcon.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepDefaultFillMd } from '../../../icons/StepDefaultFillMd';
+import { StepErrorFillMd } from '../../../icons/StepErrorFillMd';
+import { StepSuccessFillMd } from '../../../icons/StepSuccessFillMd';
+import { cva } from '../../utils/cva';
+import { stepIconClassnames } from './constants';
+const stepIcon = cva(stepIconClassnames.root, {
+    variants: {
+        isActive: {
+            true: stepIconClassnames.active,
+        },
+        isCompleted: {
+            true: stepIconClassnames.success,
+        },
+        isError: {
+            true: stepIconClassnames.error,
+        },
+        isWarning: {
+            true: stepIconClassnames.warning,
+        },
+    },
+});
+export const StepIcon = ({ icon: Icon, isActive, isCompleted, isError, isWarning, }) => {
+    if (Icon) {
+        return (_jsx(Icon, { isActive: isActive, isCompleted: isCompleted, isError: isError, isWarning: isWarning, className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
+    }
+    if (isError && !isActive) {
+        return _jsx(StepErrorFillMd, { className: stepIcon({ isError: true }) });
+    }
+    if ((isCompleted && !isActive) || (isCompleted && isWarning && !isActive)) {
+        return (_jsx(StepSuccessFillMd, { className: stepIcon({ isCompleted: true, isWarning }) }));
+    }
+    return (_jsx(StepDefaultFillMd, { className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
+};

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

@@ -0,0 +1,7 @@
+export declare const stepIconClassnames: {
+    root: string;
+    active: string;
+    error: string;
+    warning: string;
+    success: string;
+};

package/components/NewStepper/StepIcon/constants.js

@@ -0,0 +1,8 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const stepIconClassnames = {
+    root: createUIKitClassname('step__icon'),
+    active: createUIKitClassname('step__icon_active'),
+    error: createUIKitClassname('step__icon_error'),
+    warning: createUIKitClassname('step__icon_warning'),
+    success: createUIKitClassname('step__icon_success'),
+};

package/components/NewStepper/StepIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { StepIcon, type StepIconProps } from './StepIcon';
+export { stepIconClassnames } from './constants';

package/components/NewStepper/StepIcon/index.js

@@ -0,0 +1,2 @@
+export { StepIcon } from './StepIcon';
+export { stepIconClassnames } from './constants';

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type StepperContextProps = {
+    activeStep: number;
+    orientation: 'horizontal' | 'vertical';
+    connector: 'arrow' | 'line';
+    alternativeLabel: boolean;
+    onClickPrevStep?: (index: number) => void;
+    onClickStep?: (index: number) => void;
+};
+export declare const StepperContext: import("react").Context<StepperContextProps>;

package/components/NewStepper/StepperContext/StepperContext.js

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

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type StepperContextProps } from '../StepperContext';
+type Props = StepperContextProps & {
+    children: ReactNode;
+};
+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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { StepperContext } from '../StepperContext';
+export const StepperContextProvider = ({ children, orientation, activeStep, connector, alternativeLabel, onClickPrevStep, onClickStep, }) => {
+    const contextValue = useMemo(() => ({
+        activeStep,
+        orientation,
+        connector,
+        alternativeLabel,
+        onClickPrevStep,
+        onClickStep,
+    }), [
+        activeStep,
+        orientation,
+        connector,
+        alternativeLabel,
+        onClickPrevStep,
+        onClickStep,
+    ]);
+    return (_jsx(StepperContext.Provider, { value: contextValue, children: children }));
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './StepperContext';
+export * from './StepperContextProvider';

package/components/NewStepper/StepperContext/index.js

@@ -0,0 +1,2 @@
+export * from './StepperContext';
+export * from './StepperContextProvider';

package/components/NewStepper/constants.d.ts

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

package/components/NewStepper/constants.js

@@ -0,0 +1,14 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const stepperClassnames = {
+    root: createUIKitClassname('stepper'),
+    lineConnector: createUIKitClassname('stepper_connector-line'),
+    arrowConnector: createUIKitClassname('stepper_connector-arrow'),
+    orientationHorizontal: createUIKitClassname('stepper_orientation-horizontal'),
+    orientationVertical: createUIKitClassname('stepper_orientation-vertical'),
+    alternativeLabel: createUIKitClassname('stepper_alternative-label'),
+};
+export const STEPPER_ORDER_COUNTER_NAME = 'astral-ui-stepper-order';
+/**
+ * Задержка перед scrollIntoView после смены activeStep, что бы анимация появления текста завершилась
+ */
+export const MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS = 300;

package/components/NewStepper/index.d.ts

@@ -0,0 +1,4 @@
+export { NewStepper } from './NewStepper';
+export { Step, type StepProps, stepClassnames } from './Step';
+export type { StepperProps } from './types';
+export { stepIconClassnames } from './StepIcon';

package/components/NewStepper/index.js

@@ -0,0 +1,3 @@
+export { NewStepper } from './NewStepper';
+export { Step, stepClassnames } from './Step';
+export { stepIconClassnames } from './StepIcon';

package/components/NewStepper/public.d.ts

@@ -0,0 +1,4 @@
+export { NewStepper } from './NewStepper';
+export { Step, type StepProps, stepClassnames } from './Step';
+export { stepIconClassnames } from './StepIcon';
+export type { StepperProps } from './types';

package/components/NewStepper/public.js

@@ -0,0 +1,3 @@
+export { NewStepper } from './NewStepper';
+export { Step, stepClassnames } from './Step';
+export { stepIconClassnames } from './StepIcon';

package/components/NewStepper/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../styled").StyledComponent<{
+    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>, {}>;

package/components/NewStepper/styles.js

@@ -0,0 +1,44 @@
+import { styled } from '../styled';
+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;
+
+  &.${stepperClassnames.orientationHorizontal} {
+    flex-direction: row;
+
+    &.${stepperClassnames.arrowConnector} {
+      align-items: center;
+    }
+
+    &.${stepperClassnames.lineConnector} {
+      &:not(.${stepperClassnames.alternativeLabel}) {
+        align-items: center;
+      }
+    }
+  }
+
+  &.${stepperClassnames.orientationVertical} {
+    flex-direction: column;
+
+    &.${stepperClassnames.lineConnector} {
+      gap: ${({ theme }) => theme.microSpacing(1)};
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+
+    width: 100%;
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`;

package/components/NewStepper/types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export type StepperProps = {
+    activeStep?: number;
+    className?: string;
+    /**
+     * Тип соединителя между шагами
+     */
+    connector?: 'arrow' | 'line';
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Отображение названия шага под иконкой
+     *
+     * Работает только с `orientation="horizontal"` и типом `connector: "line"`.
+     */
+    alternativeLabel?: boolean;
+    /**
+     * Функция вызываемая при клике на предыдущий шаг. Делает кликабельными только предыдущие шаги.
+     */
+    onClickPrevStep?: (index: number) => void;
+    /**
+     * Функция вызываемая при клике на шаг. Делает все шаги кликабельными.
+     */
+    onClickStep?: (index: number) => void;
+    /**
+     * @example
+     * <NewStepper>
+     *   <Step label="Step 1" stepId={1} />
+     *   <Step label="Step 2" stepId={2} />
+     *   <Step label="Step 3" stepId={3} />
+     * </NewStepper>
+     */
+    children: ReactNode;
+};

package/components/NewStepper/types.js

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

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

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

package/components/NewStepper/useLogic/index.js

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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { StepperProps } from '../types';
+type UseLogicParams = StepperProps;
+export declare const useLogic: ({ orientation, connector, alternativeLabel, activeStep, onClickPrevStep, onClickStep, className, children, }: UseLogicParams) => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    stepperConnector: "line" | "arrow";
+    stepperAlternativeLabel: boolean;
+    activeStep: number;
+    onClickPrevStep: ((index: number) => void) | undefined;
+    orientation: "horizontal" | "vertical";
+    onClickStep: ((index: number) => void) | undefined;
+    className: string | undefined;
+    children: import("react").ReactNode;
+};
+export {};

package/components/NewStepper/useLogic/useLogic.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+import { useViewportType } from '../../useViewportType';
+import { MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS } from '../constants';
+import { validateStepperProps } from './utils';
+export const useLogic = ({ orientation = 'horizontal', connector = 'line', alternativeLabel = false, activeStep = 0, onClickPrevStep, onClickStep, className, children, }) => {
+    useEffect(() => {
+        validateStepperProps({ orientation, connector, alternativeLabel });
+    }, []);
+    const { isMobile } = useViewportType();
+    // На разрешении sm и ниже connector line + alternativeLabel выглядит как connector arrow без alternativeLabel
+    const isMobileDisplayStepper = isMobile && orientation === 'horizontal' && connector === 'line';
+    const stepperConnector = isMobileDisplayStepper ? 'arrow' : connector;
+    const stepperAlternativeLabel = isMobileDisplayStepper
+        ? false
+        : alternativeLabel;
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!isMobile || !containerRef.current) {
+            return;
+        }
+        const container = containerRef.current;
+        const runScroll = () => {
+            const activeStepElement = container.querySelector('[data-active-step="true"]');
+            if (activeStepElement) {
+                activeStepElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'center',
+                });
+            }
+        };
+        setTimeout(() => {
+            runScroll();
+        }, MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS);
+    }, [activeStep, isMobile, orientation]);
+    return {
+        containerRef,
+        stepperConnector,
+        stepperAlternativeLabel,
+        activeStep,
+        onClickPrevStep,
+        orientation,
+        onClickStep,
+        className,
+        children,
+    };
+};

package/components/NewStepper/useLogic/utils/index.d.ts

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

package/components/NewStepper/useLogic/utils/index.js

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

package/components/NewStepper/useLogic/utils/validateStepperProps/index.d.ts

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

package/components/NewStepper/useLogic/utils/validateStepperProps/index.js

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

package/components/NewStepper/useLogic/utils/validateStepperProps/validateStepperProps.d.ts

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/suspicious/noConsole: Сообщение для интеграторов */
+import type { StepperProps } from '../../../types';
+type ValidateStepperPropsParams = Pick<StepperProps, 'orientation' | 'connector' | 'alternativeLabel'>;
+export declare const validateStepperProps: ({ orientation, connector, alternativeLabel, }: ValidateStepperPropsParams) => void;
+export {};

package/components/NewStepper/useLogic/utils/validateStepperProps/validateStepperProps.js

@@ -0,0 +1,16 @@
+const VALID_COMBINATIONS = [
+    { orientation: 'horizontal', connector: 'line', alternativeLabel: true },
+    { orientation: 'vertical', connector: 'line', alternativeLabel: false },
+    { orientation: 'horizontal', connector: 'arrow', alternativeLabel: false },
+];
+export const validateStepperProps = ({ orientation, connector, alternativeLabel, }) => {
+    const isValid = VALID_COMBINATIONS.some((combo) => combo.orientation === orientation &&
+        combo.connector === connector &&
+        combo.alternativeLabel === alternativeLabel);
+    if (!isValid) {
+        console.error('Stepper: Неподдерживаемая комбинация параметров. Допустимые варианты:\n' +
+            '1) orientation="horizontal", connector="line", alternativeLabel=true\n' +
+            '2) orientation="vertical", connector="line", alternativeLabel=false\n' +
+            '3) orientation="horizontal", connector="arrow", alternativeLabel=false');
+    }
+};

package/components/Stepper/Stepper.d.ts

@@ -8,5 +8,8 @@ type ConnectorProp = `${ConnectorTypes}` | ReactElement<StepConnectorProps> | nu
 export type StepperProps = Omit<StepperPropsWithoutEmotionSpecific, 'connector'> & {
     connector?: ConnectorProp;
 };
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 export declare const Stepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/Stepper/Stepper.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ArrowConnector } from './ArrowConnector';
 import { StyledStepper } from './styles';
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 export const Stepper = (props) => {
     const { connector, ...restProps } = props;
     const connectorMemo = useMemo(() => {

package/components/StepperWizard/StepperWizard.d.ts

@@ -1,2 +1,5 @@
 import { type StepperWizardProps } from './types';
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 export declare const StepperWizard: (props: StepperWizardProps) => import("react/jsx-runtime").JSX.Element;

package/components/StepperWizard/StepperWizard.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Step, StepButton, StepLabel, Stepper } from '../Stepper';
 import { useLogic } from './useLogic';
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 export const StepperWizard = (props) => {
     const { clickableSteps, normalSteps, getStepButtonProps, getStepLabelProps } = useLogic(props);
     const { steps, onClickPrevStep, ...stepperProps } = props;

package/components/Typography/Typography.js

@@ -6,7 +6,7 @@ import { useTypographyColor } from './hooks';
 import { TypographyWrapper } from './styles';
 export const Typography = forwardRef(({ children, color, colorIntensity = '800', component, withoutCalt, className, ...props }, ref) => {
     const typographyColor = useTypographyColor({ color, colorIntensity });
-    return (_jsx(TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: classNames(className, {
+    return (_jsx(TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: classNames(typographyClassnames.root, className, {
             [typographyClassnames.withoutCalt]: withoutCalt,
         }), children: children }));
 });

package/components/Typography/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const typographyClassnames: {
+    root: string;
     withoutCalt: string;
 };

package/components/Typography/constants.js

@@ -1,3 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const typographyClassnames = {
+    root: createUIKitClassname('typography'),
     withoutCalt: 'typography_without-calt',
 };

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()] }) })] }));