@octopusdeploy/design-system-components/dist/src/components/Badge/CounterBadge.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CounterBadge = CounterBadge;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function CounterBadge({ type, label }) {
    return (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.root, type === "solid" ? styles.solid : styles.outlined), children: label });
}
const styles = {
    root: (0, css_1.css)({
        display: "inline-block",
        borderRadius: design_system_tokens_1.borderRadius.circle,
        alignContent: "center",
        font: design_system_tokens_1.text.body.bold.small,
        padding: `0 ${design_system_tokens_1.space[6]}`,
    }),
    solid: (0, css_1.css)({
        color: design_system_tokens_1.themeTokens.color.text.primary,
        backgroundColor: design_system_tokens_1.themeTokens.color.background.tertiary,
    }),
    outlined: (0, css_1.css)({
        color: design_system_tokens_1.themeTokens.color.text.secondary,
        boxShadow: `inset 0 0 0 ${design_system_tokens_1.borderWidth[1]} ${design_system_tokens_1.themeTokens.color.border.primary}`,
    }),
};