import React from "react";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { Text } from "~/components/deprecated/components/Text";
export const Legend = () => {
    const { labels, colors } = useRootElement();
    return (React.createElement("ul", { className: styles.container }, labels.map((label, index) => (React.createElement("li", { key: label, className: styles.item },
        React.createElement("div", { className: styles.itemColor, 
            // This is being used because the colors can be customized
            // and tailwind does not like string concatenation
            style: {
                backgroundColor: (colors === null || colors === void 0 ? void 0 : colors[index]) || "#000",
            } }),
        React.createElement(Text, { noMargin: true, lineClamp: 1, variant: "caption1" }, label))))));
};
//# sourceMappingURL=index.js.map