@drivy/cobalt/components/Pill/index.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { Children, isValidElement } from "react";
import { Icon } from "../Icon/index.js";
const ICON_SIZE = 20;
const Pill = ({ icon, color = "onSurface", children, overlayed, className, size })=>{
    const iconMarkup = icon ? /*#__PURE__*/ jsx("span", {
        className: "cobalt-Pill__Icon",
        children: /*#__PURE__*/ jsx(Icon, {
            source: icon,
            size: ICON_SIZE,
            color: overlayed ? "surfaceFixed" : color
        })
    }) : null;
    return /*#__PURE__*/ jsxs("div", {
        className: classnames(className, "cobalt-Pill", {
            "cobalt-Pill--colorConnect": "connect" === color,
            "cobalt-Pill--overlayed": overlayed,
            "cobalt-Pill--large": "large" === size
        }),
        children: [
            iconMarkup,
            " ",
            children
        ]
    });
};
const PillGroup = ({ children })=>/*#__PURE__*/ jsx("div", {
        className: "cobalt-PillGroup",
        children: Children.toArray(children).map((child, index)=>{
            const childKey = /*#__PURE__*/ isValidElement(child) && null != child.key ? child.key : `pill-group-item-${index}`;
            return /*#__PURE__*/ jsx("div", {
                className: "cobalt-PillGroup__Item",
                children: child
            }, childKey);
        })
    });
const components_Pill = Pill;
export default components_Pill;
export { Pill, PillGroup };

//# sourceMappingURL=index.js.map