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 { useStepperHorizontalContext } from './context';
import StepHorizontalTail from './stepHorizontalTail';
import StepHorizontalTitle from './stepHorizontalTitle';
export const StepHorizontalBase = styled.divBox `
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
`;
/**
 * Implements a Horizontal step component
 */
export const StepHorizontal = vui(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
    const context = useStepperHorizontalContext();
    const size = context?.size || propSize;
    return (_jsxs(StepHorizontalBase, { className: cs(stepClassName, stepClassName + variant, className), ref: ref, children: [_jsx(StepHorizontalTail, { size: size, variant: variant }), _jsx(Box, { display: "block", textAlign: "center", children: _jsx(StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), _jsxs(Box, { display: "block", textAlign: "center", children: [!!title && (_jsx(StepHorizontalTitle, { size: size, variant: variant, children: title })), !!description && (_jsx(Box, { color: "sandstone.45", display: "block", fontSize: `${size === 'md' ? 14 : 12}px`, textAlign: "center", children: description })), _jsx(Box, { display: "block", children: children })] })] }));
});
StepHorizontal.displayName = 'StepHorizontal';
export default StepHorizontal;
//# sourceMappingURL=stepHorizontal.js.map