@vlinderclimate/net-zero-ui/components/Alert.js

<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var styles = require('@mui/material/styles');
var MuiAlert = require('@mui/material/Alert');
var theme_colors = require('../theme/colors.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var MuiAlert__default = /*#__PURE__*/_interopDefaultLegacy(MuiAlert);

var backgroundMap = {
    warning: theme_colors["default"].yellow.light + "55",
    success: theme_colors["default"].green.light + "55",
    error: theme_colors["default"].red.light + "55",
    info: theme_colors["default"].blue.light + "55"
};
var colorMap = {
    warning: theme_colors["default"].yellow.main,
    success: theme_colors["default"].text.positive,
    error: theme_colors["default"].text.negative,
    info: theme_colors["default"].blue.main
};
var StyledAlert = styles.styled(MuiAlert__default["default"])(function (_a) {
    var _b;
    var color = _a.color, icon = _a.icon, rounded = _a.$rounded, align = _a.align, theme = _a.theme;
    return (_b = {
            fontSize: theme.typography.fontSizeXs2,
            lineHeight: theme.typography.lineHeightS,
            fontWeight: theme.typography.fontWeightMedium,
            padding: theme.spacing(1.4, 2.5, 1.5),
            alignItems: "flex-start",
            justifyContent: align !== null && align !== void 0 ? align : "flex-start",
            backgroundColor: backgroundMap[color !== null && color !== void 0 ? color : "info"],
            borderRadius: rounded ? theme.borders.radius.sm : 0,
            opacity: 1,
            "&.MuiAlert-filled": {
                backgroundColor: colorMap[color !== null && color !== void 0 ? color : "info"],
                color: theme.palette.text.inversePrimary,
                "& *": {
                    color: theme.palette.text.inversePrimary
                },
                "& .MuiAlert-icon": {
                    color: theme.palette.text.inversePrimary
                }
            },
            "& .MuiAlert-message": {
                padding: 0,
                color: colorMap[color !== null && color !== void 0 ? color : "info"]
            },
            "& .MuiAlert-icon": {
                display: icon ? "flex" : "none",
                alignItems: "center",
                padding: 0,
                marginRight: theme.spacing(1),
                height: theme.typography.lineHeightS,
                // color: colorMap[color ?? "info"],
                opacity: 1
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            fontSize: "12px",
            lineHeight: "15px",
            borderRadius: rounded ? theme.borders.radius.xs1 : 0
        },
        _b);
});
var Alert = React.forwardRef(function (_a, ref) {
    var icon = _a.icon, _b = _a.filled, filled = _b === void 0 ? false : _b, _c = _a.rounded, rounded = _c === void 0 ? true : _c, align = _a.align, color = _a.color, props = tslib_es6.__rest(_a, ["icon", "filled", "rounded", "align", "color"]);
    var className = filled ? "MuiAlert-filled" : undefined;
    return (jsxRuntime.jsx(StyledAlert, tslib_es6.__assign({ ref: ref, className: className, color: color, icon: icon, "$rounded": rounded, align: align }, props, { elevation: 0 }), void 0));
});

exports.StyledAlert = StyledAlert;
exports.backgroundMap = backgroundMap;
exports.colorMap = colorMap;
exports["default"] = Alert;