"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Status = void 0;
const react_1 = __importDefault(require("react"));
const useTheme_1 = require("../../hooks/useTheme");
const inlines_1 = require("inlines");
const utils_1 = require("../../utils");
const varsUtilities_1 = require("../../varsUtilities");
const icons_1 = require("../../icons");
const components_1 = require("../../components");
const Status = ({ color: colorProp = 'default', ghost, children, onClick, style, light, }) => {
    const { theme } = (0, useTheme_1.useTheme)();
    const color = colorProp === 'white'
        ? theme === 'dark'
            ? 'inverted'
            : 'default'
        : colorProp;
    const contentColor = light || ghost
        ? color === 'neutral' || (color === 'inverted' && ghost)
            ? 'default'
            : color
        : (0, utils_1.isSemanticColor)(color)
            ? color === 'warning'
                ? 'default'
                : 'inverted'
            : color === 'orange'
                ? 'grey'
                : 'white';
    return (react_1.default.createElement(inlines_1.styled.div, { onClick: onClick, style: {
            backgroundColor: ghost
                ? null
                : (0, varsUtilities_1.color)((0, utils_1.isSemanticColor)(color) ? 'background' : 'nonSemanticBackground', color, light ? 'muted' : 'strong'),
            color: color === 'default'
                ? (0, varsUtilities_1.color)('content', 'default', 'primary')
                : (0, varsUtilities_1.color)((0, utils_1.isSemanticColor)(color) ? 'content' : 'nonSemanticContent', contentColor, 'primary'),
            borderRadius: '4px',
            minWidth: '24px',
            width: 'fit-content',
            padding: ' 0px 8px 0px 4px',
            maxHeight: '24px',
            height: '24px',
            display: 'flex',
            alignItems: 'center',
            ...style,
        } },
        react_1.default.createElement(icons_1.IconSmallDot, { style: {
                marginRight: '4px',
            }, color: "inherit" }),
        react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                color: 'inherit',
                height: '24px',
                lineHeight: '24px',
            } }, children)));
};
exports.Status = Status;
// pulsate
//# sourceMappingURL=index.js.map