"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepVertical = exports.StepVerticalBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const box_1 = require("../box");
const core_1 = require("../core");
const stepIndicator_1 = require("../stepIndicator");
const utils_1 = require("../utils");
const consts_1 = require("./consts");
const context_1 = require("./context");
const stepVerticalTail_1 = __importDefault(require("./stepVerticalTail"));
const stepVerticalTitle_1 = __importDefault(require("./stepVerticalTitle"));
exports.StepVerticalBase = core_1.styled.divBox `
  display: flex;
  position: relative;
  width: 100%;
`;
/**
 * Implements a vertical step component
 */
exports.StepVertical = (0, core_1.vui)(({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
    const context = (0, context_1.useStepperVerticalContext)();
    const size = (context === null || context === void 0 ? void 0 : context.size) || propSize;
    return ((0, jsx_runtime_1.jsxs)(exports.StepVerticalBase, { className: (0, utils_1.cs)(consts_1.stepClassName, className), ref: ref, children: [(0, jsx_runtime_1.jsx)(stepVerticalTail_1.default, { size: size, variant: variant }), (0, jsx_runtime_1.jsx)(box_1.Box, { flex: `0 0 ${size === 'md' ? 40 : 30}px`, children: (0, jsx_runtime_1.jsx)(stepIndicator_1.StepIndicator, { icon: icon, number: number, size: size, variant: variant }) }), (0, jsx_runtime_1.jsxs)(box_1.Box, { flex: "1", flexDirection: "column", children: [!!title && ((0, jsx_runtime_1.jsx)(stepVerticalTitle_1.default, { size: size, variant: variant, children: title })), !!description && ((0, jsx_runtime_1.jsx)(box_1.Box, { color: "sandstone.45", fontSize: `${size === 'md' ? 14 : 12}px`, children: description })), (0, jsx_runtime_1.jsx)(box_1.Box, { children: children })] })] }));
});
exports.StepVertical.displayName = 'StepVertical';
exports.default = exports.StepVertical;
//# sourceMappingURL=stepVertical.js.map