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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputLabel = InputLabel;
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 InputLabel({ id, label, htmlFor, isDisabled, popover, hasDefaultMarker, hasOptionalMarker, hasRequiredMarker, isRadioOrCheckbox }) {
    const defaultMarker = hasDefaultMarker && (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(suffixDefaultTextStyles, { [suffixDefaultTextDisabledStyles]: isDisabled }), children: " (Default)" });
    const optionalMarker = hasOptionalMarker && !hasRequiredMarker && " (optional)";
    const requiredMarker = hasRequiredMarker && !hasOptionalMarker && " (required)";
    return ((0, jsx_runtime_1.jsxs)("div", { className: inputLabelContainerStyles, children: [(0, jsx_runtime_1.jsxs)("label", { id: id, className: (0, css_1.cx)(inputLabelStyles, { [inputLabelRadioOrCheckboxStyles]: isRadioOrCheckbox, [inputLabelDisabledStyles]: isDisabled }), htmlFor: htmlFor, children: [label, " ", optionalMarker, " ", requiredMarker, " ", defaultMarker] }), popover && (0, jsx_runtime_1.jsx)("div", { className: popoverContainerStyles, children: popover })] }));
}
exports.default = InputLabel;
const inputLabelContainerStyles = (0, css_1.css)({
    display: "grid",
    gridTemplateColumns: `auto auto`,
    gap: design_system_tokens_1.space[4],
    justifyContent: "flex-start",
});
const inputLabelStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.bold.medium,
    lineHeight: design_system_tokens_1.lineHeight.xSmall,
    color: design_system_tokens_1.themeTokens.color.text.primary,
    margin: 0,
    cursor: "pointer",
});
const inputLabelRadioOrCheckboxStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.medium,
    lineHeight: design_system_tokens_1.lineHeight.xSmall,
});
const inputLabelDisabledStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
    cursor: "not-allowed",
});
const suffixDefaultTextStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
});
const suffixDefaultTextDisabledStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
    cursor: "not-allowed",
});
const popoverContainerStyles = (0, css_1.css)({
    transform: "translateY(-1px)",
});