@astral/ui 4.49.0 → 4.50.0

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepClassnames = exports.stepStateClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.stepStateClassnames = {
+    active: (0, createUIKitClassname_1.createUIKitClassname)('step_active'),
+    completed: (0, createUIKitClassname_1.createUIKitClassname)('step_completed'),
+    error: (0, createUIKitClassname_1.createUIKitClassname)('step_error'),
+    warning: (0, createUIKitClassname_1.createUIKitClassname)('step_warning'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('step_disabled'),
+};
+exports.stepClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('step'),
+    label: (0, createUIKitClassname_1.createUIKitClassname)('step__label'),
+    description: (0, createUIKitClassname_1.createUIKitClassname)('step__description'),
+    iconContainer: (0, createUIKitClassname_1.createUIKitClassname)('step__icon-container'),
+    connector: (0, createUIKitClassname_1.createUIKitClassname)('step__connector'),
+    connectorLine: (0, createUIKitClassname_1.createUIKitClassname)('step_connector-line'),
+    connectorArrow: (0, createUIKitClassname_1.createUIKitClassname)('step_connector-arrow'),
+    alternativeLabel: (0, createUIKitClassname_1.createUIKitClassname)('step_alternative-label'),
+    orientationHorizontal: (0, createUIKitClassname_1.createUIKitClassname)('step_orientation-horizontal'),
+    orientationVertical: (0, createUIKitClassname_1.createUIKitClassname)('step_orientation-vertical'),
+    labelContainer: (0, createUIKitClassname_1.createUIKitClassname)('step__label-container'),
+    labelMobile: (0, createUIKitClassname_1.createUIKitClassname)('step__label-mobile'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('step__content'),
+    hasDescription: (0, createUIKitClassname_1.createUIKitClassname)('step_has-description'),
+    ...exports.stepStateClassnames,
+};

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

@@ -0,0 +1,3 @@
+export { Step } from './Step';
+export type { StepProps } from './types';
+export { stepClassnames } from './constants';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepClassnames = exports.Step = void 0;
+var Step_1 = require("./Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return Step_1.Step; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepClassnames", { enumerable: true, get: function () { return constants_1.stepClassnames; } });

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").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>, {}>;
+export declare const IconWrapper: import("@emotion/styled/dist/declarations/src/types").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>, {}>;
+export declare const ArrowConnector: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const LineConnector: import("@emotion/styled/dist/declarations/src/types").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>, {}>;
+export declare const LabelWrapper: import("@emotion/styled/dist/declarations/src/types").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>, {}>;
+export declare const StepContentWrapper: import("@emotion/styled/dist/declarations/src/types").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>, {}>;
+export declare const StyledButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "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;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,306 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButton = exports.StepContentWrapper = exports.LabelWrapper = exports.LineConnector = exports.ArrowConnector = exports.IconWrapper = exports.Wrapper = void 0;
+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");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.microSpacing(5)};
+  align-items: center;
+
+  &.${constants_3.stepClassnames.alternativeLabel} {
+    position: relative;
+
+    flex: 1;
+    flex-direction: column;
+
+    & .${constants_3.stepClassnames.labelContainer} {
+      flex-direction: column;
+
+      text-align: center;
+    }
+
+    &:first-of-type {
+      & .${constants_3.stepClassnames.connector} {
+        display: none;
+      }
+    }
+  }
+
+  &.${constants_3.stepClassnames.connectorArrow} {
+    & .${constants_3.stepClassnames.content} {
+      padding: ${({ theme }) => theme.microSpacing(5, 0)};
+    }
+    
+    &:not(:first-of-type) .${constants_3.stepClassnames.content} {
+      margin-left: ${({ theme }) => theme.spacing(2)};
+    }
+
+    &:last-of-type .${constants_3.stepClassnames.connector} {
+      display: none;
+    }
+  }
+
+  &.${constants_3.stepClassnames.connectorLine} {
+    &.${constants_3.stepClassnames.orientationHorizontal} {
+      & .${constants_3.stepClassnames.content} {
+        align-items: center;
+
+        padding: ${({ theme }) => theme.spacing(0, 1)};
+      }
+
+    
+      &.${constants_3.stepClassnames.alternativeLabel} {
+        & .${constants_3.stepClassnames.content} {
+          padding: ${({ theme }) => theme.microSpacing(3, 0)};
+        }
+      }
+    }
+
+    &.${constants_3.stepClassnames.orientationVertical} {
+      & .${constants_3.stepClassnames.content} {
+        padding: ${({ theme }) => theme.spacing(1, 0, 0)};
+      }
+
+      & .${constants_3.stepClassnames.connector}:not(.${constants_3.stepClassnames.hasDescription}) {
+        margin-bottom: ${({ theme }) => theme.microSpacing(1)};
+      }
+
+      &:last-of-type {
+        & .${constants_3.stepClassnames.description} {
+          min-height: 0;
+          margin: 0;
+          padding-left: ${({ theme }) => theme.spacing(6)};
+
+          border-left: none;
+
+          ${({ theme }) => theme.breakpoints.down('sm')} {
+            padding-left: ${({ theme }) => theme.spacing(7)};
+          }
+        }
+
+        & .${constants_3.stepClassnames.connector} {
+          display: none;
+        }
+      }
+
+      &:last-of-type {
+        & .${constants_3.stepClassnames.content} {
+          padding: ${({ theme }) => theme.spacing(1, 0)};
+    
+          & .${constants_3.stepClassnames.description} {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      & .${constants_3.stepClassnames.labelMobile} {
+        display: none;
+      }
+
+      & .${constants_3.stepClassnames.label} {
+        display: block;
+      }
+    }
+  }
+
+  & .${constants_3.stepClassnames.content} {
+    &.${constants_3.stepClassnames.active} {
+      & .${constants_3.stepClassnames.label} {
+        color: ${({ theme }) => theme.palette.grey[900]};
+      }
+
+      & .${constants_2.stepIconClassnames.root} {
+        color: ${({ theme }) => theme.palette.primary[800]};
+
+        &.${constants_2.stepIconClassnames.success} {
+          color: ${({ theme }) => theme.palette.success[800]};
+        }
+
+        &.${constants_2.stepIconClassnames.error} {
+          color: ${({ theme }) => theme.palette.error[800]};
+        }
+
+        &.${constants_2.stepIconClassnames.warning} {
+          color: ${({ theme }) => theme.palette.warning[800]};
+        }
+      }
+    }
+  }
+`;
+exports.IconWrapper = styled_1.styled.div `
+  display: flex;
+
+  & .${constants_2.stepIconClassnames.root} {
+    width: 20px;
+    height: 20px;
+
+    color: ${({ theme }) => theme.palette.grey[300]};
+    
+    transition: ${({ theme }) => theme.transitions.create(['color'], {
+    duration: theme.transitions.duration.shorter,
+})};
+
+    &.${constants_2.stepIconClassnames.active} {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
+
+    &.${constants_2.stepIconClassnames.success} {
+      color: ${({ theme }) => theme.palette.success[800]};
+    }
+
+    &.${constants_2.stepIconClassnames.error} {
+      color: ${({ theme }) => theme.palette.error[800]};
+    }
+
+    &.${constants_2.stepIconClassnames.warning} {
+      color: ${({ theme }) => theme.palette.warning[800]};
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+exports.ArrowConnector = (0, styled_1.styled)(NextOutlineMd_1.NextOutlineMd) `
+  width: 20px;
+  height: 20px;
+
+  color: ${({ theme }) => theme.palette.grey[400]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 24px;
+    height: 24px;
+  }
+`;
+exports.LineConnector = styled_1.styled.div `
+  flex: 1 1 auto;
+
+  height: 2px;
+
+  border-top: 2px solid ${({ theme }) => theme.palette.grey[300]};
+
+  &.${constants_3.stepClassnames.alternativeLabel} {
+    position: absolute;
+    top: 15px;
+    right: calc(50% + 14px);
+    left: calc(-50% + 14px);
+  }
+
+  &.${constants_3.stepClassnames.orientationVertical} {
+    min-height: 16px;
+
+    /* Смещение необходимо для центрирования линии относительно иконки, т.к. линия шириной 2px, то для выравнивания необходимо число не кратное 2ум  */
+    margin-left: 9px;
+
+    border-top: unset;
+    border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin-left: 11px;
+    }
+  }
+`;
+exports.LabelWrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+
+  color: ${({ theme }) => theme.palette.grey[600]};
+
+  & .${constants_1.typographyClassnames.root} {
+    transition: ${({ theme }) => theme.transitions.create(['color'], {
+    duration: theme.transitions.duration.shorter,
+})};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    white-space: nowrap;
+  }
+`;
+exports.StepContentWrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.microSpacing(1)};
+  }
+`;
+exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  width: 100%;
+  height: auto;
+  padding: 0;
+
+  background: transparent;
+  border: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.microSpacing(1)};
+  }
+
+  &:hover {
+    background: transparent;
+
+    & .${constants_3.stepClassnames.label} {
+      color: ${({ theme }) => theme.palette.grey[700]};
+    }
+
+    & .${constants_2.stepIconClassnames.root} {
+      color: ${({ theme }) => theme.palette.primary[700]};
+
+      &.${constants_2.stepIconClassnames.success} {
+        color: ${({ theme }) => theme.palette.success[700]};
+      }
+
+      &.${constants_2.stepIconClassnames.error} {
+        color: ${({ theme }) => theme.palette.error[700]};
+      }
+
+      &.${constants_2.stepIconClassnames.warning} {
+        color: ${({ theme }) => theme.palette.warning[700]};
+      }
+    }
+  }
+
+  &:active {
+    background: transparent;
+    & .${constants_3.stepClassnames.label} {
+      color: ${({ theme }) => theme.palette.grey[900]};
+    }
+
+    & .${constants_2.stepIconClassnames.root} {
+      color: ${({ theme }) => theme.palette.primary[800]};
+
+      &.${constants_2.stepIconClassnames.success} {
+        color: ${({ theme }) => theme.palette.success[800]};
+      }
+
+      &.${constants_2.stepIconClassnames.error} {
+        color: ${({ theme }) => theme.palette.error[800]};
+      }
+
+      &.${constants_2.stepIconClassnames.warning} {
+        color: ${({ theme }) => theme.palette.warning[700]};
+      }
+    }
+  }
+
+  &:focus-visible {
+    border-radius: ${({ theme }) => theme.shape.medium};
+    outline: 1px solid ${({ theme }) => theme.palette.components.focused};
+  }
+`;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,17 @@
+"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/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/node/components/NewStepper/Step/useLogic/useLogic.js

@@ -0,0 +1,59 @@
+"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, isCompleted, onClick, children, isError, isWarning, icon, label, isDisabled, className, }) => {
+    const { connector, activeStep, orientation, alternativeLabel, onClickPrevStep, onClickStep, } = (0, react_1.useContext)(StepperContext_1.StepperContext);
+    (0, react_1.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,
+    };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StepDefaultFillMd_1 = require("../../../icons/StepDefaultFillMd");
+const StepErrorFillMd_1 = require("../../../icons/StepErrorFillMd");
+const StepSuccessFillMd_1 = require("../../../icons/StepSuccessFillMd");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("./constants");
+const stepIcon = (0, cva_1.cva)(constants_1.stepIconClassnames.root, {
+    variants: {
+        isActive: {
+            true: constants_1.stepIconClassnames.active,
+        },
+        isCompleted: {
+            true: constants_1.stepIconClassnames.success,
+        },
+        isError: {
+            true: constants_1.stepIconClassnames.error,
+        },
+        isWarning: {
+            true: constants_1.stepIconClassnames.warning,
+        },
+    },
+});
+const StepIcon = ({ icon: Icon, isActive, isCompleted, isError, isWarning, }) => {
+    if (Icon) {
+        return ((0, jsx_runtime_1.jsx)(Icon, { isActive: isActive, isCompleted: isCompleted, isError: isError, isWarning: isWarning, className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
+    }
+    if (isError && !isActive) {
+        return (0, jsx_runtime_1.jsx)(StepErrorFillMd_1.StepErrorFillMd, { className: stepIcon({ isError: true }) });
+    }
+    if ((isCompleted && !isActive) || (isCompleted && isWarning && !isActive)) {
+        return ((0, jsx_runtime_1.jsx)(StepSuccessFillMd_1.StepSuccessFillMd, { className: stepIcon({ isCompleted: true, isWarning }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(StepDefaultFillMd_1.StepDefaultFillMd, { className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
+};
+exports.StepIcon = StepIcon;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepIconClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.stepIconClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('step__icon'),
+    active: (0, createUIKitClassname_1.createUIKitClassname)('step__icon_active'),
+    error: (0, createUIKitClassname_1.createUIKitClassname)('step__icon_error'),
+    warning: (0, createUIKitClassname_1.createUIKitClassname)('step__icon_warning'),
+    success: (0, createUIKitClassname_1.createUIKitClassname)('step__icon_success'),
+};

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

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

package/node/components/NewStepper/StepIcon/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepIconClassnames = exports.StepIcon = void 0;
+var StepIcon_1 = require("./StepIcon");
+Object.defineProperty(exports, "StepIcon", { enumerable: true, get: function () { return StepIcon_1.StepIcon; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepIconClassnames", { enumerable: true, get: function () { return constants_1.stepIconClassnames; } });

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type StepperContextProps = {
+    activeStep: number;
+    setActiveStep: (step: number) => void;
+    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/node/components/NewStepper/StepperContext/StepperContext.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+    onClickPrevStep: () => undefined,
+    onClickStep: () => undefined,
+});