@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, marginSize = "default" }) {
    if (!label) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)("legend", { className: (0, css_1.cx)(labelStyles, { [smallMarginStyles]: marginSize === "small", [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 smallMarginStyles = (0, css_1.css)({
    // `&&` doubles the class specificity (.css-x.css-x) so this reliably overrides
    // labelStyles' equal-specificity margin rule regardless of Emotion's insertion order.
    "&&:not(:has(+ p)), &&:has(+ p.hasHiddenDescription)": {
        marginBottom: design_system_tokens_1.space[8],
    },
    // When a visible description follows, the label "block" extends to include it, so the
    // 8px gap belongs below the description. Override FormDescription's default 16px
    // (legendDescriptionStyles) via the higher-specificity adjacent-sibling selector.
    "&& + p:not(.hasHiddenDescription)": {
        marginBottom: design_system_tokens_1.space[8],
    },
});
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,
});