"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tag = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const icons_1 = require("../../icons");
const breakpoints_1 = require("../../utils/breakpoints");
const Tag = ({ color = 'neutral', disabled, onClick, onClose, children, style, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { onClick: onClick, style: {
            backgroundColor: (0, varsUtilities_1.color)('action', color, 'subtleNormal'),
            borderRadius: 4,
            cursor: disabled ? 'not-allowed' : 'pointer',
            display: 'flex',
            alignItems: 'center',
            opacity: disabled ? 0.5 : 1,
            padding: '0px 8px',
            pointerEvents: disabled ? 'none' : '',
            width: 'fit-content',
            '&:hover': onClick
                ? {
                    backgroundColor: (0, varsUtilities_1.color)('action', color, 'subtleHover'),
                }
                : null,
            [breakpoints_1.BpTablet]: {
                backgroundColor: (0, varsUtilities_1.color)('action', color, 'subtleNormal'),
            },
            '&:active': onClick
                ? {
                    backgroundColor: (0, varsUtilities_1.color)('action', color, 'subtleActive'),
                }
                : null,
            ...style,
        } },
        react_1.default.createElement(Text_1.Text, { selectable: "none", size: 14, weight: "medium", style: { marginRight: 4 } }, children),
        react_1.default.createElement(inlines_1.styled.div, { onClick: (e) => {
                e.stopPropagation();
                e.preventDefault();
                onClose?.();
            }, style: {
                width: '16px',
                height: '16px',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                '&:hover': {
                    backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleHover'),
                },
                [breakpoints_1.BpTablet]: {
                    backgroundColor: (0, varsUtilities_1.color)('action', color, 'subtleNormal'),
                },
                '&:active': {
                    backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive'),
                },
            } },
            react_1.default.createElement(icons_1.IconSmallClose, null))));
};
exports.Tag = Tag;
//# sourceMappingURL=index.js.map