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

Opinionated design system for Drivy's projects.

import React, { Children } from 'react';
import cx from 'classnames';
import { Icon } from '../Icon/index.js';

const ICON_SIZE = 20;
const Pill = ({ icon, color = "onSurface", children, overlayed, className, size, }) => {
    const iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
        React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "surfaceFixed" : color }))) : null;
    return (React.createElement("div", { className: cx(className, "cobalt-Pill", {
            "cobalt-Pill--colorConnect": color === "connect",
            "cobalt-Pill--overlayed": overlayed,
            "cobalt-Pill--large": size === "large",
        }) },
        iconMarkup,
        " ",
        children));
};
const PillGroup = ({ children }) => {
    return (React.createElement("div", { className: "cobalt-PillGroup" }, Children.toArray(children).map((child, index) => (React.createElement("div", { className: "cobalt-PillGroup__Item", key: index }, child)))));
};

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