@dossierhq/design/lib/components/Tag/Tag.js

The design system for Dossier.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { toColorClassName } from '../../config/Colors.js';
import { toClassName } from '../../utils/ClassNameUtils.js';
export const Tag = ({ className, color, transform, children }) => {
    const tagClassName = toClassName('tag', (transform === undefined || transform === 'capitalized') && 'is-capitalized', toColorClassName(color));
    if (typeof children === 'string') {
        return _jsx("span", { className: toClassName(tagClassName, 'control', className), children: children });
    }
    return (_jsx("div", { className: toClassName('control', className), children: _jsxs("span", { className: "tags has-addons", children: [_jsx("span", { className: tagClassName, children: children[0] }), children[1]] }) }));
};
Tag.displayName = 'Tag';
Tag.Remove = ({ onClick }) => {
    return _jsx("span", { className: "tag is-delete is-clickable", onClick: onClick });
};
Tag.Remove.displayName = 'Tag.Remove';
Tag.Clear = ({ onClick, children }) => {
    return (_jsx("span", { className: "tag is-clickable is-white", onClick: onClick, children: children }));
};
Tag.Clear.displayName = 'Tag.Clear';
Tag.Group = ({ children }) => {
    return _jsx("div", { className: "field is-grouped is-grouped-multiline", children: children });
};
Tag.Group.displayName = 'Tag.Group';
//# sourceMappingURL=Tag.js.map