@octopusdeploy/design-system-components/dist/src/components/CodeDecorator/CodeDecorator.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeDecorator = CodeDecorator;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 * CodeDecorator A styled inline code element for highlighting technical terms, commands, and snippets within text
 * @param {string} value - The value to display in the code decorator
 */
function CodeDecorator({ value }) {
    return (0, jsx_runtime_1.jsx)("code", { className: (0, css_1.cx)(codeStyles), children: value });
}
exports.default = CodeDecorator;
// TODO: Design has a "Highlight" type, but no matching token
const codeStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.code.regular.medium,
    backgroundColor: design_system_tokens_1.themeTokens.color.background.tertiary,
    borderRadius: design_system_tokens_1.borderRadius.small,
    padding: design_system_tokens_1.space[4],
    color: design_system_tokens_1.themeTokens.color.text.primary,
});