@octopusdeploy/design-system-components/dist/src/components/Page/ErrorPanel.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorPanel = ErrorPanel;
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");
const Callout_1 = require("../Callout");
const Link_1 = require("../Link");
function ErrorPanel({ error }) {
    return ((0, jsx_runtime_1.jsxs)(Callout_1.Callout, { title: error.message, hideTitle: !error.message, type: "danger", children: [error.details.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: errorPanelStyles.list, children: error.details.map((detail, index) => detail.text || detail.link ? ((0, jsx_runtime_1.jsxs)("li", { children: [detail.text, detail.link && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: detail.link, children: "More information..." }) }))] }, index)) : null) })), error.help?.text && (0, jsx_runtime_1.jsx)("div", { className: errorPanelStyles.note, children: error.help.text }), error.help?.link && (0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: error.help.link, children: "More information..." })] }));
}
const errorPanelStyles = {
    list: (0, css_1.css)({
        ...utils_1.resetStyles.list,
        display: "flex",
        flexDirection: "column",
        gap: design_system_tokens_1.space[8],
        listStyleType: "disc",
        paddingLeft: design_system_tokens_1.space[16],
        paddingTop: design_system_tokens_1.space[8],
    }),
    note: (0, css_1.css)({
        marginTop: design_system_tokens_1.space[8],
        font: design_system_tokens_1.text.body.regular.xSmall,
        color: design_system_tokens_1.themeTokens.color.text.tertiary,
    }),
};