@astral/ui 4.82.0 → 4.84.0

package/components/Onboarding/types/step.d.ts

@@ -0,0 +1,144 @@
+import { type ReactNode } from 'react';
+import { type DialogSize } from '../../Dialog';
+import { type TOUR_ID_ATTR } from '../constants';
+/**
+ * Содержимое шага.
+ */
+export type StepContent = ReactNode;
+/**
+ * Рантайм-переопределение содержимого шага.
+ */
+export type StepOverride = {
+    title?: StepContent;
+    content?: StepContent;
+};
+/**
+ * Тип шага:
+ * - `standalone` — самостоятельная модалка по центру экрана;
+ * - `highlight` — подсветка элемента UI рядом с popover.
+ */
+export type StepType = 'highlight' | 'standalone';
+/**
+ * Желаемая позиция popover относительно подсвечиваемого элемента.
+ */
+export type StepPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Описание одного шага тура.
+ */
+export type Step = {
+    /**
+     * Уникальное в рамках тура имя шага.
+     */
+    name: string;
+    /**
+     * Заголовок шага.
+     */
+    title?: StepContent;
+    /**
+     * Содержимое шага.
+     */
+    content?: StepContent;
+    /**
+     * Тип шага:
+     * - `standalone` — самостоятельная модалка по центру экрана;
+     * - `highlight` — подсветка элемента UI рядом с popover.
+     */
+    type: StepType;
+    /**
+     * Желаемая позиция popover (только для highlight).
+     * @default 'bottom'
+     */
+    position?: StepPosition;
+    /**
+     * Отступ подсветки вокруг выделяемого элемента.
+     * @default '8px'
+     * @example '4px'
+     */
+    highlightOffset?: `${number}px`;
+    /**
+     * Можно ли кликать по подсвечиваемому элементу во время тура.
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Показывать ли кнопку перехода вперёд.
+     * @default true
+     */
+    isNextButtonVisible?: boolean;
+    /**
+     * Показывать ли кнопку перехода назад.
+     * @default true
+     */
+    isPrevButtonVisible?: boolean;
+    /**
+     * Обратный вызов перед переходом к следующему шагу.
+     */
+    onNextClick?: () => void;
+    /**
+     * Обратный вызов перед переходом к предыдущему шагу.
+     */
+    onPrevClick?: () => void;
+    /**
+     * Пропускать шаг при навигации.
+     */
+    shouldSkip?: boolean | (() => boolean);
+    /**
+     * При переходе на этот шаг тур встаёт в ожидание и НЕ отрисовывает шаг, пока не
+     * будет вызван `tour.resume()`.
+     */
+    waitForResume?: boolean;
+    /**
+     * Размер диалога для standalone-шага. Для highlight-шага игнорируется.
+     * @default 'xs'
+     */
+    dialogSize?: DialogSize;
+    /**
+     * Сколько миллисекунд тур ждёт появления элемента highlight-шага в DOM.
+     *
+     * По умолчанию (`0`) элемент ищется сразу; если его нет — срабатывает `onError`.
+     * Задавайте, только когда элемент появляется сам (анимация, поздняя отрисовка).
+     * Если появление зависит от действия пользователя или загрузки данных —
+     * используйте `waitForResume`, а не тайм-аут: подобранное вручную значение
+     * сработает у вас, но на более медленном устройстве или соединении пользователя
+     * тур может не дождаться элемента.
+     * @default 0
+     */
+    waitForTimeout?: number;
+};
+/**
+ * Шаг с уже применёнными значениями по умолчанию.
+ */
+export type ResolvedStep = Step & {
+    isNextButtonVisible: boolean;
+    isPrevButtonVisible: boolean;
+    /**
+     * Итоговая позиция popover: значение по умолчанию -`'bottom'`.
+     */
+    position: StepPosition;
+    /**
+     * Итоговый размер диалога standalone-шага: значение по умолчанию `'xs'`.
+     */
+    dialogSize: DialogSize;
+    /**
+     * Итоговый тайм-аут ожидания элемента (мс)`
+     */
+    waitForTimeout: number;
+};
+/**
+ * Объект управления шагом, возвращаемый через `tour.steps[stepName]/tour.steps.stepName`.
+ */
+export type StepHandle = {
+    /**
+     * Параметры (атрибут `data-tour-id`) для передачи в подсвечиваемый элемент.
+     * @example <button {...tour.steps.save.getHighlightProps()} />
+     */
+    getHighlightProps: () => Record<typeof TOUR_ID_ATTR, string>;
+    setTitle: (title: StepContent) => void;
+    setContent: (content: StepContent) => void;
+};
+/**
+ * Карта объектов управления шагами по их литеральным именам — типобезопасный `tour.steps`.
+ */
+export type StepHandles<TSteps extends readonly Step[]> = {
+    [TName in TSteps[number]['name']]: StepHandle;
+};

package/components/Onboarding/types/step.js

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

package/components/Onboarding/types/tour.d.ts

@@ -0,0 +1,168 @@
+import { type ResolvedStep, type Step } from './step';
+/**
+ * Конфигурация тура.
+ */
+export type OnboardingTourConfig<TSteps extends readonly Step[]> = {
+    /**
+     * Имя тура.
+     */
+    name: string;
+    /**
+     * Шаги тура.
+     */
+    steps: TSteps;
+    /**
+     * Можно ли кликать по подсвечиваемым элементам во время тура.
+     * Значение задаётся для всех шагов тура.
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Показывать точки прогресса. Если видимых шагов больше 6 — точки не
+     * отображаются никогда, даже при `true`.
+     * @default true
+     */
+    isDotsVisible?: boolean;
+    /**
+     * Показывать счётчик прогресса `n / total`.
+     * @default true
+     */
+    isCounterVisible?: boolean;
+    /**
+     * Тексты диалога подтверждения выхода.
+     */
+    confirmExit?: ConfirmExitConfig;
+    /**
+     * Настройки кнопок навигации внизу шага.
+     */
+    buttons?: OnboardingButtons;
+    /**
+     * Общий тайм-аут ожидания элементов highlight-шагов в DOM (мс).
+     * Переопределяется на уровне шага через `step.waitForTimeout`.
+     *
+     * По умолчанию (`0`) элементы ищутся синхронно, без ожидания.
+     * @default 0
+     */
+    waitForTimeout?: number;
+    /**
+     * Обработчик ошибок тура.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Обработчик закрытия тура, с причиной.
+     */
+    onClose?: (reason: OnboardingCloseReason) => void;
+};
+/**
+ * Причина, по которой тур ушёл с экрана.
+ * - `completed` — пройден до конца;
+ * - `dismissed` — пользователь прервал с подтверждением;
+ * - `closed` — программное закрытие или авто-закрытие из-за ошибки рендера шага.
+ */
+export type OnboardingCloseReason = 'completed' | 'dismissed' | 'closed';
+/**
+ * Настройка для диалога подтверждения выхода.
+ */
+export type ConfirmExitConfig = {
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+};
+/**
+ * Вариант кнопки завершения на последнем шаге тура.
+ */
+export type OnboardingFinishButtonVariant = 'contained' | 'text';
+/**
+ * Настройки кнопок навигации внизу шага.
+ */
+export type OnboardingButtons = {
+    /**
+     * Текст кнопки «назад».
+     * @default 'Назад'
+     */
+    prevLabel?: string;
+    /**
+     * Текст кнопки «вперёд».
+     * @default 'Далее'
+     */
+    nextLabel?: string;
+    /**
+     * Текст кнопки завершения на последнем шаге.
+     * @default 'Закрыть'
+     */
+    finishLabel?: string;
+    /**
+     * Вариант кнопки завершения на последнем шаге.
+     * @default 'contained'
+     */
+    finishVariant?: OnboardingFinishButtonVariant;
+};
+/**
+ * Презентационная конфигурация тура — статична на весь тур (не зависит от
+ * активного шага), значения по умолчанию уже применены в `StepResolver`. Вынесена из
+ * пошагового состояния, чтобы не дублировать проброс одних и тех же полей
+ * на каждом шаге.
+ */
+export type TourPresentation = {
+    /**
+     * Показывать точки прогресса (скрываются если шагов > 6, даже при `true`).
+     */
+    isDotsVisible: boolean;
+    /**
+     * Показывать счётчик прогресса `n / total`.
+     */
+    isCounterVisible: boolean;
+    /**
+     * Тексты диалога подтверждения выхода.
+     */
+    confirmExit: ConfirmExitConfig;
+    /**
+     * Настройки кнопок навигации
+     */
+    buttons: Required<OnboardingButtons>;
+};
+/**
+ * Состояние активного шага.
+ */
+export type ActiveStepState = TourPresentation & {
+    tourName: string;
+    step: ResolvedStep;
+    /**
+     * Позиция активного шага среди видимых шагов, с нуля.
+     */
+    position: number;
+    /**
+     * Число видимых шагов = число точек индикатора прогресса.
+     */
+    total: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    isInteractive: boolean;
+    /**
+     * Идёт ли сейчас запроса подтверждения выхода (показан ConfirmExit).
+     */
+    isConfirming: boolean;
+    onNext: () => void;
+    onPrev: () => void;
+    /**
+     * Переход к шагу по его позиции среди видимых шагов.
+     */
+    onSelectStep: (position: number) => void;
+    /**
+     * Единая точка выхода
+     */
+    requestClose: () => void;
+    /**
+     * Вызывается диалогом ConfirmExit при подтверждении выхода.
+     */
+    onConfirmExit: () => void;
+    /**
+     * Вызывается диалогом ConfirmExit при отмене выхода.
+     */
+    onCancelExit: () => void;
+    /**
+     * Обработчик ошибок тура.
+     */
+    onError: (error: Error) => void;
+};

package/components/Onboarding/types/tour.js

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

package/components/Onboarding/ui/ConfirmExit/ConfirmExit.d.ts

@@ -0,0 +1,10 @@
+export type ConfirmExitProps = {
+    open: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+};
+export declare const ConfirmExit: ({ open, onConfirm, onCancel, title, description, confirmText, cancelText, }: ConfirmExitProps) => import("react/jsx-runtime").JSX.Element;

package/components/Onboarding/ui/ConfirmExit/ConfirmExit.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmExitDialog } from './styles';
+export const ConfirmExit = ({ open, onConfirm, onCancel, title = 'Выйти из обучения?', description = 'Вы сможете пройти его заново в любой момент', confirmText = 'Выйти', cancelText = 'Продолжить', }) => (_jsx(ConfirmExitDialog, { open: open, title: title, description: description, onClose: onCancel, actions: {
+        confirm: { text: confirmText, variant: 'text', onClick: onConfirm },
+        cancel: { text: cancelText, variant: 'contained' },
+    } }));

package/components/Onboarding/ui/ConfirmExit/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmExit } from './ConfirmExit';
+export type { ConfirmExitProps } from './ConfirmExit';

package/components/Onboarding/ui/ConfirmExit/index.js

@@ -0,0 +1 @@
+export { ConfirmExit } from './ConfirmExit';

package/components/Onboarding/ui/ConfirmExit/styles.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const ConfirmExitDialog: import("../../../styled").StyledComponent<{
+    title?: string | undefined;
+    description?: import("react").ReactNode;
+    onClose: () => void;
+    actions: {
+        confirm: Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+            variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+            loading?: boolean | undefined;
+            color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+            component?: import("react").ElementType | undefined;
+            selected?: boolean | undefined;
+            size?: "large" | "medium" | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            text: string;
+        };
+        cancel?: (Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+            variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+            loading?: boolean | undefined;
+            color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+            component?: import("react").ElementType | undefined;
+            selected?: boolean | undefined;
+            size?: "large" | "medium" | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            text: string;
+        }) | undefined;
+    };
+} & Pick<import("../../..").DialogProps, "className" | "aria-describedby" | "aria-labelledby" | "open" | "size" | "disablePortal" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "disableBackdropClick"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Onboarding/ui/ConfirmExit/styles.js

@@ -0,0 +1,11 @@
+import { ConfirmDialog } from '../../../ConfirmDialog';
+import { confirmDialogClassnames } from '../../../ConfirmDialog/constants';
+import { styled } from '../../../styled';
+import { onboardingModalSurface } from '../styles';
+export const ConfirmExitDialog = styled(ConfirmDialog) `
+  ${({ theme }) => onboardingModalSurface(theme)};
+  
+  .${confirmDialogClassnames.confirmButton} {
+    order: -1;
+  }
+`;

package/components/Onboarding/ui/OnboardingContainer/OnboardingContainer.d.ts

@@ -0,0 +1,12 @@
+import { type Onboarding } from '../../Onboarding';
+export type OnboardingContainerProps = {
+    /**
+     * Экземпляр онбординга, созданный через `createOnboarding`. Контейнер
+     * показывает туры только этого экземпляра.
+     */
+    onboarding: Onboarding;
+};
+/**
+ * Контейнер онбординга.
+ */
+export declare const OnboardingContainer: ({ onboarding, }: OnboardingContainerProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/Onboarding/ui/OnboardingContainer/OnboardingContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConfirmExit } from '../ConfirmExit';
+import { StepStrategy } from '../StepStrategy';
+import { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
+import { useLogic } from './useLogic';
+/**
+ * Контейнер онбординга.
+ */
+export const OnboardingContainer = ({ onboarding, }) => {
+    const { activeStep, isClosing } = useLogic(onboarding);
+    if (!activeStep) {
+        return null;
+    }
+    return (_jsxs(OnboardingErrorBoundary, { onError: activeStep.onError, children: [_jsx(StepStrategy, { activeStep: activeStep, isClosing: isClosing }), _jsx(ConfirmExit, { open: activeStep.isConfirming && !isClosing, onConfirm: activeStep.onConfirmExit, onCancel: activeStep.onCancelExit, ...activeStep.confirmExit })] }));
+};

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/OnboardingErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+import { Component, type ReactNode } from 'react';
+export type OnboardingErrorBoundaryProps = {
+    /**
+     * Вызывается при перехвате ошибки render активного шага.
+     */
+    onError: (error: Error) => void;
+    children: ReactNode;
+};
+type State = {
+    hasError: boolean;
+};
+/**
+ * ErrorBoundary онбординга: при ошибке закрывает тур и вызывает `onError`
+ * (не использует глобальный UIKit-boundary,т.к у него другой контракт).
+ */
+export declare class OnboardingErrorBoundary extends Component<OnboardingErrorBoundaryProps, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error): void;
+    render(): ReactNode;
+}
+export {};

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/OnboardingErrorBoundary.js

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+/**
+ * ErrorBoundary онбординга: при ошибке закрывает тур и вызывает `onError`
+ * (не использует глобальный UIKit-boundary,т.к у него другой контракт).
+ */
+export class OnboardingErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        return this.state.hasError ? null : this.props.children;
+    }
+}

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
+export type { OnboardingErrorBoundaryProps } from './OnboardingErrorBoundary';

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/index.js

@@ -0,0 +1 @@
+export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';

package/components/Onboarding/ui/OnboardingContainer/index.d.ts

@@ -0,0 +1 @@
+export { OnboardingContainer, type OnboardingContainerProps, } from './OnboardingContainer';

package/components/Onboarding/ui/OnboardingContainer/index.js

@@ -0,0 +1 @@
+export { OnboardingContainer, } from './OnboardingContainer';

package/components/Onboarding/ui/OnboardingContainer/useLogic/index.d.ts

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

package/components/Onboarding/ui/OnboardingContainer/useLogic/index.js

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

package/components/Onboarding/ui/OnboardingContainer/useLogic/useLogic.d.ts

@@ -0,0 +1,10 @@
+import { type Onboarding } from '../../../Onboarding';
+import { type ActiveStepState } from '../../../types';
+export type UseLogicResult = {
+    activeStep: ActiveStepState | null;
+    isClosing: boolean;
+};
+/**
+ * Логика контейнера: читает шаг из store, держит его при закрытии для анимации.
+ */
+export declare const useLogic: (onboarding: Onboarding) => UseLogicResult;

package/components/Onboarding/ui/OnboardingContainer/useLogic/useLogic.js

@@ -0,0 +1,14 @@
+import { useTheme } from '../../../../theme/hooks/useTheme';
+import { useActiveStep } from '../../hooks/useActiveStep';
+import { useDelayedActiveStep } from '../../hooks/useDelayedActiveStep';
+import { useKeyboardNav } from '../../hooks/useKeyboardNav';
+/**
+ * Логика контейнера: читает шаг из store, держит его при закрытии для анимации.
+ */
+export const useLogic = (onboarding) => {
+    const theme = useTheme();
+    const currentStep = useActiveStep(onboarding.activeStepStore);
+    const { active: activeStep, isClosing } = useDelayedActiveStep(currentStep, theme.transitions.duration.enteringScreen);
+    useKeyboardNav(currentStep);
+    return { activeStep, isClosing };
+};

package/components/Onboarding/ui/Overlay/Overlay.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { type Rect } from '../../utils/geometry';
+export type OverlayProps = {
+    /**
+     * Hole (null для сплошного затемнения).
+     */
+    hole: Rect | null;
+    /**
+     * Проходят ли клики сквозь overlay
+     */
+    isInteractive?: boolean;
+    /**
+     * Показан ли overlay.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Идёт переезд hole на новую цель.
+     */
+    isHoleMoving?: boolean;
+    /**
+     * Клик по overlay.
+     */
+    onClose: () => void;
+};
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+export declare const Overlay: ({ hole, isInteractive, isVisible, isHoleMoving, onClose, }: OverlayProps) => import("react").ReactPortal;

package/components/Onboarding/ui/Overlay/Overlay.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { cva } from '../../../utils/cva';
+import { DEFAULT_HIGHLIGHT_RADIUS } from '../../constants';
+import { overlayClassnames } from './constants';
+import { Backdrop, HoleBlocker, OverlayRoot } from './styles';
+import { useLogic } from './useLogic';
+const rootCva = cva(overlayClassnames.root, {
+    variants: {
+        isHidden: {
+            true: overlayClassnames.hidden,
+        },
+        isHoleMoving: {
+            true: overlayClassnames.holeMoving,
+        },
+    },
+});
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+export const Overlay = ({ hole, isInteractive, isVisible = true, isHoleMoving = false, onClose, }) => {
+    const { viewport, clampedHole, path } = useLogic(hole);
+    return createPortal(_jsxs(OverlayRoot, { viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", className: rootCva({ isHidden: !isVisible, isHoleMoving }), children: [_jsx(Backdrop, { d: path, fillRule: "evenodd", onClick: onClose, className: overlayClassnames.backdrop }), !isInteractive && clampedHole && (_jsx(HoleBlocker, { x: clampedHole.x, y: clampedHole.y, width: clampedHole.width, height: clampedHole.height, rx: DEFAULT_HIGHLIGHT_RADIUS, className: overlayClassnames.holeBlocker }))] }), document.body);
+};

package/components/Onboarding/ui/Overlay/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const overlayClassnames: {
+    root: string;
+    hidden: string;
+    holeMoving: string;
+    backdrop: string;
+    holeBlocker: string;
+};

package/components/Onboarding/ui/Overlay/constants.js

@@ -0,0 +1,8 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const overlayClassnames = {
+    root: createUIKitClassname('onboarding-overlay'),
+    hidden: createUIKitClassname('onboarding-overlay_hidden'),
+    holeMoving: createUIKitClassname('onboarding-overlay_hole-moving'),
+    backdrop: createUIKitClassname('onboarding-overlay__backdrop'),
+    holeBlocker: createUIKitClassname('onboarding-overlay__hole-blocker'),
+};

package/components/Onboarding/ui/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';

package/components/Onboarding/ui/Overlay/index.js

@@ -0,0 +1 @@
+export { Overlay } from './Overlay';

package/components/Onboarding/ui/Overlay/styles.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+export declare const OverlayRoot: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+export declare const Backdrop: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGPathElement>, {}>;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+export declare const HoleBlocker: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGRectElement>, {}>;