@stakefish/ui/components/Card.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 { styled } from '@mui/material/styles';
import MuiCard from '@mui/material/Card';
import colors from '../theme/colors.js';

var CardSizeVariants;
(function (CardSizeVariants) {
    CardSizeVariants["Initial"] = "initial";
    CardSizeVariants["Small"] = "small";
    CardSizeVariants["Medium"] = "medium";
    CardSizeVariants["Large"] = "large";
})(CardSizeVariants || (CardSizeVariants = {}));
var CardColorVariants;
(function (CardColorVariants) {
    CardColorVariants["Initial"] = "initial";
    CardColorVariants["Muted"] = "muted";
    CardColorVariants["Primary"] = "primary";
    CardColorVariants["Secondary"] = "secondary";
    CardColorVariants["Positive"] = "positive";
    CardColorVariants["Negative"] = "negative";
})(CardColorVariants || (CardColorVariants = {}));
var sizeMap = new Map([
    [CardSizeVariants.Initial, { y: 0, x: 0 }],
    [CardSizeVariants.Small, { y: 2, x: 2.5 }],
    [CardSizeVariants.Medium, { y: 4, x: 4 }],
    [CardSizeVariants.Large, { y: 6, x: 8 }]
]);
var colorMap = new Map([
    [CardColorVariants.Initial, colors.text.primary],
    [CardColorVariants.Muted, colors.text.primary],
    [CardColorVariants.Primary, colors.text.primary],
    [CardColorVariants.Secondary, colors.text.inversePrimary],
    [CardColorVariants.Positive, colors.text.primary],
    [CardColorVariants.Negative, colors.text.primary]
]);
var backgroundMap = new Map([
    [CardColorVariants.Initial, colors.gray.white],
    [CardColorVariants.Muted, colors.gray[100]],
    [CardColorVariants.Primary, colors.primary.main],
    [CardColorVariants.Secondary, colors.secondary.main],
    [CardColorVariants.Positive, colors.green.light],
    [CardColorVariants.Negative, colors.red.light]
]);
var StyledCard = styled(MuiCard)(function (_a) {
    var _b;
    var _c = _a.color, color = _c === void 0 ? CardColorVariants.Initial : _c, _d = _a.size, size = _d === void 0 ? CardSizeVariants.Medium : _d, selected = _a.selected, $bubble = _a.$bubble, theme = _a.theme;
    var padding = sizeMap.get(size);
    var bg = backgroundMap.get(color);
    return _b = {
            padding: padding ? theme.spacing(padding.y, padding.x) : "0",
            marginBottom: theme.spacing(0.8),
            borderRadius: theme.borders.radius.sm,
            color: colorMap.get(color),
            backgroundColor: backgroundMap.get(color),
            position: "relative",
            overflow: "visible",
            boxShadow: selected
                ? "".concat(theme.boxShadow.md, ", \n        inset 0 0 0 ").concat(theme.borders.size.primary, "px ").concat(theme.palette.primary.main)
                : "none",
            zIndex: 1,
            "&:after": {
                content: "''",
                top: -1,
                left: -24,
                position: "absolute",
                border: "0px solid",
                width: "38px",
                height: "26px",
                backgroundColor: "transparent",
                borderBottomLeftRadius: "50%",
                borderBottomRightRadius: "50%",
                boxShadow: bg ? "-14px 9px 0px 3px ".concat(bg) : "none",
                transform: "rotateY(180deg)",
                zIndex: 0,
                display: $bubble ? "block" : "none"
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            boxShadow: selected
                ? "".concat(theme.boxShadow.md, ",\n          inset 0 0 0 ").concat(theme.borders.size.secondary, "px ").concat(theme.palette.primary.main)
                : "none"
        },
        _b;
});
var Card = function (_a) {
    var children = _a.children, color = _a.color, size = _a.size, selected = _a.selected, $bubble = _a.$bubble, props = __rest(_a, ["children", "color", "size", "selected", "$bubble"]);
    var styleProps = { color: color, size: size, selected: selected, $bubble: $bubble };
    return (jsx(StyledCard, __assign({}, styleProps, props, { children: children }), void 0));
};

export { CardColorVariants, CardSizeVariants, backgroundMap, colorMap, Card as default, sizeMap };