@stakefish/ui/components/Alert.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { styled } from '@mui/material/styles';
import MuiAlert from '@mui/material/Alert';
import colors from '../theme/colors.js';

var backgroundMap = {
    warning: colors.yellow.light,
    success: colors.green.light,
    error: colors.red.light,
    info: colors.blue.light
};
var colorMap = {
    warning: colors.yellow.main,
    success: colors.text.positive,
    error: colors.text.negative,
    info: colors.blue.main
};
var StyledAlert = styled(MuiAlert)(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.fontWeightBold,
            padding: theme.spacing(1.25, 2.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,
            "& *": {
                color: colorMap[color !== null && color !== void 0 ? color : "info"]
            },
            "a:hover": {
                textDecoration: "none"
            },
            "&.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
            },
            "& .MuiAlert-icon": {
                display: icon ? "flex" : "none",
                alignItems: "center",
                padding: 0,
                marginRight: theme.spacing(1),
                marginLeft: theme.spacing(-0.625),
                height: theme.typography.lineHeightS,
                color: colorMap[color !== null && color !== void 0 ? color : "info"],
                opacity: 1,
                "& path": {
                    fill: "currentColor"
                }
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            fontSize: theme.spacing(1.5),
            lineHeight: theme.spacing(1.875),
            borderRadius: $rounded ? theme.borders.radius.xs1 : 0,
            padding: $rounded ? theme.spacing(1.25, 2.5) : theme.spacing(0.75, 2),
            "& .MuiAlert-icon": {
                height: theme.spacing(1.875)
            }
        },
        _b);
});
var Alert = 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 = __rest(_a, ["icon", "filled", "rounded", "align", "color"]);
    var className = filled ? "MuiAlert-filled" : undefined;
    return (jsx(StyledAlert, __assign({ ref: ref, color: color, icon: icon, align: align, elevation: 0, "$rounded": rounded, className: className }, props), void 0));
});

export { backgroundMap, colorMap, Alert as default };