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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Legend = Legend;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const utils_1 = require("../../../utils");
/**
 *
 * Legend renders accessible labels for form field groups with support for
 * required/optional markers, help popovers, and disabled states.
 *
 * @internal
 */
function Legend({ label, hasOptionalMarker, hasRequiredMarker, popover, disabled, hideLabel }) {
    if (!label) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)("legend", { className: (0, css_1.cx)(labelStyles, { [disabledStyles]: disabled, [accessibleHiddenStyles]: hideLabel }), children: [label, hasOptionalMarker && !hasRequiredMarker && " (optional)", hasRequiredMarker && !hasOptionalMarker && " (required)", popover] }));
}
const labelStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.primary,
    font: design_system_tokens_1.text.body.bold.medium,
    padding: 0,
    display: "grid",
    gridTemplateColumns: "auto auto",
    alignItems: "center",
    gap: design_system_tokens_1.space[4],
    "&:not(:has(+ p)), &:has(+ p.hasHiddenDescription)": {
        marginBottom: design_system_tokens_1.space[16],
    },
});
const disabledStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
});
const accessibleHiddenStyles = (0, css_1.css)({
    ...utils_1.accessibilityStyles.hidden,
});