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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputError = InputError;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 *
 * InputError renders error messages for form fields, displaying validation errors
 * with an accompanying danger icon.
 *
 * @internal
 */
function InputError({ error, id }) {
    if (!error) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)("p", { className: errorStyles, id: id, children: [(0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationCircleIcon, { size: 20, ariaLabel: "Error", color: design_system_tokens_1.themeTokens.color.icon.danger }), (0, jsx_runtime_1.jsx)("span", { children: error })] }));
}
const errorStyles = (0, css_1.css)({
    display: "grid",
    margin: 0,
    gridTemplateColumns: "auto 1fr",
    alignItems: "start",
    gap: design_system_tokens_1.space[4],
    color: design_system_tokens_1.themeTokens.color.text.danger,
    font: design_system_tokens_1.text.body.regular.large,
    lineHeight: 1.25, // Note: Design tweak - line-height looked awkward on narrow inputs
    textWrap: "pretty",
    // Align icon with form inputs
    transform: `translateX(-${design_system_tokens_1.space[1]})`,
});