@octopusdeploy/design-system-components/dist/src/components/Form/Note/Note.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Note = Note;
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 Note({ heading, children, style, checkboxNote, className }) {
    const customStyle = checkboxNote ? { style, display: "block" } : style;
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: noteHeaderStyles, children: heading }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(noteStyles, className), style: customStyle, children: children })] }));
}
exports.default = Note;
const noteStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.xSmall,
    textAlign: "left",
    marginBottom: design_system_tokens_1.space[8],
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
    // TODO temporary fix for link color
    // We are planning to deprecate this component in the future
    a: {
        color: design_system_tokens_1.themeTokens.color.text.link.default,
    },
});
const noteHeaderStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.bold.xSmall,
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
    margin: 0,
});