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

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from 'react/jsx-runtime';
import cx 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 ? (jsx("span", { className: "cobalt-Pill__Icon", children: jsx(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "surfaceFixed" : color }) })) : null;
    return (jsxs("div", { className: cx(className, "cobalt-Pill", {
            "cobalt-Pill--colorConnect": color === "connect",
            "cobalt-Pill--overlayed": overlayed,
            "cobalt-Pill--large": size === "large",
        }), children: [iconMarkup, " ", children] }));
};
const PillGroup = ({ children }) => {
    return (jsx("div", { className: "cobalt-PillGroup", children: Children.toArray(children).map((child, index) => {
            const childKey = isValidElement(child) && child.key != null
                ? child.key
                : `pill-group-item-${index}`;
            return (jsx("div", { className: "cobalt-PillGroup__Item", children: child }, childKey));
        }) }));
};

export { Pill, PillGroup, Pill as default };
//# sourceMappingURL=index.js.map