"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXStepCircle = PHXStepCircle;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
function PHXStepCircle({ className, steps }) {
    return (react_1.default.createElement("nav", { "aria-label": 'Progress', className: className },
        react_1.default.createElement("ol", { className: 'overflow-hidden' }, steps.map((step, stepIdx) => (react_1.default.createElement("li", { key: stepIdx + 1, className: (0, types_1.classNames)(stepIdx !== steps.length - 1 ? 'mb-6' : '', 'relative') },
            react_1.default.createElement(react_1.default.Fragment, null,
                stepIdx !== steps.length - 1 ? (react_1.default.createElement("div", { "aria-hidden": 'true', className: 'absolute left-2 top-5 ml-px mt-0.5 h-full w-[1px] bg-gray-300' })) : null,
                react_1.default.createElement("div", { className: 'relative flex items-start' },
                    react_1.default.createElement("span", { className: 'relative z-10 flex h-5 w-5 items-center justify-center rounded-full border border-gray-900 bg-white' },
                        react_1.default.createElement("span", { className: '-ml-px rounded-full bg-transparent text-xs' }, stepIdx + 1)),
                    react_1.default.createElement("span", { className: 'ml-2 flex min-w-0 flex-col gap-y-1 w-full' },
                        react_1.default.createElement("span", { className: 'text-xs font-semibold text-gray-900' }, step.title),
                        (step === null || step === void 0 ? void 0 : step.component) && react_1.default.createElement("span", { className: 'text-xs' }, step.component))))))))));
}
//# sourceMappingURL=StepCircle.js.map