import React from 'react';
import { classNames } from '../types';
export function PHXStepCircle({ className, steps }) {
    return (React.createElement("nav", { "aria-label": 'Progress', className: className },
        React.createElement("ol", { className: 'overflow-hidden' }, steps.map((step, stepIdx) => (React.createElement("li", { key: stepIdx + 1, className: classNames(stepIdx !== steps.length - 1 ? 'mb-6' : '', 'relative') },
            React.createElement(React.Fragment, null,
                stepIdx !== steps.length - 1 ? (React.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.createElement("div", { className: 'relative flex items-start' },
                    React.createElement("span", { className: 'relative z-10 flex h-5 w-5 items-center justify-center rounded-full border border-gray-900 bg-white' },
                        React.createElement("span", { className: '-ml-px rounded-full bg-transparent text-xs' }, stepIdx + 1)),
                    React.createElement("span", { className: 'ml-2 flex min-w-0 flex-col gap-y-1 w-full' },
                        React.createElement("span", { className: 'text-xs font-semibold text-gray-900' }, step.title),
                        (step === null || step === void 0 ? void 0 : step.component) && React.createElement("span", { className: 'text-xs' }, step.component))))))))));
}
//# sourceMappingURL=StepCircle.js.map