import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '../box';
import { styled, vui } from '../core';
import { StepIndicator } from '../stepIndicator';
import { cs } from '../utils';
import { stepClassName } from './consts';
import { useStepperVerticalContext } from './context';
import StepVerticalTail from './stepVerticalTail';
import StepVerticalTitle from './stepVerticalTitle';
export const StepVerticalBase = styled.divBox `
  display: flex;
  position: relative;
  width: 100%;
`;
/**
 * Implements a vertical step component
 */
export const StepVertical = vui(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
    const context = useStepperVerticalContext();
    const size = context?.size || propSize;
    return (_jsxs(StepVerticalBase, { className: cs(stepClassName, className), ref: ref, children: [_jsx(StepVerticalTail, { size: size, variant: variant }), _jsx(Box, { flex: `0 0 ${size === 'md' ? 40 : 30}px`, children: _jsx(StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), _jsxs(Box, { flex: "1", flexDirection: "column", children: [!!title && (_jsx(StepVerticalTitle, { size: size, variant: variant, children: title })), !!description && (_jsx(Box, { color: "sandstone.45", fontSize: `${size === 'md' ? 14 : 12}px`, children: description })), _jsx(Box, { children: children })] })] }));
});
StepVertical.displayName = 'StepVertical';
export default StepVertical;
//# sourceMappingURL=stepVertical.js.map