@vlinderclimate/net-zero-ui/components/Card.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 styles = require('@mui/material/styles');
var MuiCard = require('@mui/material/Card');
var theme_colors = require('../theme/colors.js');

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

var MuiCard__default = /*#__PURE__*/_interopDefaultLegacy(MuiCard);

exports.CardSizeVariants = void 0;
(function (CardSizeVariants) {
    CardSizeVariants["Initial"] = "initial";
    CardSizeVariants["Small"] = "small";
    CardSizeVariants["Medium"] = "medium";
    CardSizeVariants["Large"] = "large";
})(exports.CardSizeVariants || (exports.CardSizeVariants = {}));
exports.CardColorVariants = void 0;
(function (CardColorVariants) {
    CardColorVariants["Initial"] = "initial";
    CardColorVariants["Muted"] = "muted";
    CardColorVariants["Primary"] = "primary";
    CardColorVariants["Secondary"] = "secondary";
    CardColorVariants["Positive"] = "positive";
    CardColorVariants["Negative"] = "negative";
})(exports.CardColorVariants || (exports.CardColorVariants = {}));
var sizeMap = new Map([
    [exports.CardSizeVariants.Initial, { y: 0, x: 0 }],
    [exports.CardSizeVariants.Small, { y: 2, x: 3 }],
    [exports.CardSizeVariants.Medium, { y: 3.75, x: 4 }],
    [exports.CardSizeVariants.Large, { y: 10, x: 15 }]
]);
var sizeMobileMap = new Map([
    [exports.CardSizeVariants.Initial, { y: 0, x: 0 }],
    [exports.CardSizeVariants.Small, { y: 1, x: 2 }],
    [exports.CardSizeVariants.Medium, { y: 2, x: 3 }],
    [exports.CardSizeVariants.Large, { y: 3, x: 4 }]
]);
var colorMap = new Map([
    [exports.CardColorVariants.Initial, theme_colors["default"].text.primary],
    [exports.CardColorVariants.Muted, theme_colors["default"].text.primary],
    [exports.CardColorVariants.Primary, theme_colors["default"].text.primary],
    [exports.CardColorVariants.Secondary, theme_colors["default"].text.inversePrimary],
    [exports.CardColorVariants.Positive, theme_colors["default"].text.primary],
    [exports.CardColorVariants.Negative, theme_colors["default"].text.primary]
]);
var backgroundMap = new Map([
    [exports.CardColorVariants.Initial, theme_colors["default"].gray.white],
    [exports.CardColorVariants.Muted, theme_colors["default"].gray[200]],
    [exports.CardColorVariants.Primary, theme_colors["default"].primary.main],
    [exports.CardColorVariants.Secondary, theme_colors["default"].secondary.main],
    [exports.CardColorVariants.Positive, theme_colors["default"].green.light],
    [exports.CardColorVariants.Negative, theme_colors["default"].red.light]
]);
var StyledCard = styles.styled(MuiCard__default["default"])(function (_a) {
    var _b;
    var _c = _a.color, color = _c === void 0 ? exports.CardColorVariants.Initial : _c, _d = _a.size, size = _d === void 0 ? exports.CardSizeVariants.Medium : _d, bordered = _a.bordered, rounded = _a.rounded, theme = _a.theme;
    var padding = sizeMap.get(size);
    var paddingMobile = sizeMobileMap.get(size);
    var bg = backgroundMap.get(color);
    return _b = {
            padding: padding ? theme.spacing(padding.y, padding.x) : "0",
            marginBottom: theme.spacing(0.8),
            color: colorMap.get(color),
            backgroundColor: bg,
            position: "relative",
            overflow: "visible",
            boxShadow: bordered ? "inset 0 0 0 1px " + theme.palette.gray[400] : "none",
            borderRadius: rounded ? theme.borders.radius.m : 0,
            zIndex: 1,
            "a &": {
                boxShadow: bordered ? "inset 0 0 0 1px " + theme.palette.gray[400] + ",  0px 2px 1px rgba(0, 0, 0, 0.04)" : "none"
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            padding: paddingMobile ? theme.spacing(paddingMobile.y, paddingMobile.x) : "0",
            borderRadius: rounded ? theme.borders.radius.s : 0
        },
        _b;
});
var Overlay = styles.styled("div")(function (_a) {
    var _b = _a.color, color = _b === void 0 ? exports.CardColorVariants.Initial : _b;
    var bg = backgroundMap.get(color);
    return {
        position: "absolute",
        left: -8,
        right: -8,
        top: -8,
        bottom: -8,
        backgroundColor: bg,
        opacity: 0.8,
        zIndex: 10
    };
});
var Card = function (_a) {
    var children = _a.children, color = _a.color, size = _a.size, rounded = _a.rounded, bordered = _a.bordered, disabled = _a.disabled, props = tslib_es6.__rest(_a, ["children", "color", "size", "rounded", "bordered", "disabled"]);
    return (jsxRuntime.jsxs(StyledCard, tslib_es6.__assign({ disabled: disabled, size: size !== null && size !== void 0 ? size : undefined, color: color !== null && color !== void 0 ? color : undefined, rounded: rounded ? 1 : undefined, bordered: bordered ? 1 : undefined }, props, { children: [children, disabled && jsxRuntime.jsx(Overlay, { color: color }, void 0)] }), void 0));
};

exports.backgroundMap = backgroundMap;
exports.colorMap = colorMap;
exports["default"] = Card;
exports.sizeMap = sizeMap;
exports.sizeMobileMap = sizeMobileMap;