@vectara/vectara-ui/lib/components/list/List.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiSpacer } from "../spacer/Spacer";
import { Fragment } from "react";
export const VuiList = ({ items, size = "m", alignItems = "center" }) => {
    return (_jsx(_Fragment, { children: items.map((item, index) => {
            const humanizedStep = index + 1;
            const numberClasses = classNames("vuiListNumber", `vuiListNumber--${size}`, {
                "vuiListNumber-isComplete": item.isComplete
            });
            return (_jsxs(Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: alignItems, spacing: size }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx("div", Object.assign({ className: numberClasses, "aria-label": `Step ${humanizedStep}` }, { children: humanizedStep })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1, alignItems: "start" }, { children: item.render() }))] })), index < items.length - 1 && _jsx(VuiSpacer, { size: "s" })] }, item.key));
        }) }));
};