@penaprieto/design-system/dist/components/Tag/Tag.js

Multi-brand React design system with design tokens from Figma

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tag = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Tag.css");
const Icon_1 = require("../Icon");
const Tag = ({ label, variant = 'info', size = 'medium', icon, className = '', }) => {
    const rootClassName = [
        'ds-tag',
        `ds-tag--${size}`,
        `ds-tag--${variant}`,
        className,
    ]
        .filter(Boolean)
        .join(' ');
    const getIconSize = () => {
        switch (size) {
            case 'small':
                return 12;
            case 'large':
                return 20;
            default:
                return 16;
        }
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClassName, children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: "ds-tag__icon", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: getIconSize() }) })), (0, jsx_runtime_1.jsx)("span", { className: "ds-tag__text", children: label })] }));
};
exports.Tag = Tag;