import React from "react";
import styled, { useTheme } from "styled-components";
import Flex from "../../Flex";
import Text from "../../../asorted/Text";
import { rgba } from "../../../../styles/helpers";
export default function NumberedList({ steps, bgIndexColor, indexColor, textColor }) {
    const { colors } = useTheme();
    const backgroundIndexColor = bgIndexColor ?? colors.primary.c80;
    const indexTextColor = indexColor ?? colors.neutral.c00;
    const mainTextColor = textColor ?? rgba(colors.neutral.c100, 0.7);
    return (React.createElement(Flex, { flexDirection: "column", rowGap: "14px" }, steps?.map((step, index) => (React.createElement(Flex, { key: index, flexDirection: "row", alignItems: "center" },
        NumberItem(index + 1, backgroundIndexColor, indexTextColor),
        typeof step.element === "string" ? (React.createElement(Text, { key: index, fontSize: 14, variant: "body", color: mainTextColor, ml: "12px", fontWeight: "500", flex: 1 }, step.element)) : (step.element))))));
}
const NumberItem = (index, bgColor, color) => {
    return (React.createElement(StyledNumberItem, { bgColor: bgColor },
        React.createElement(Text, { color: color, fontWeight: "900", fontSize: "11px" }, index)));
};
const StyledNumberItem = styled(Flex) `
  border-radius: 50%;
  background-color: ${p => p.bgColor};
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
`;
//# sourceMappingURL=index.js.map