@stakefish/ui/components/CardButton.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 { _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import Button from './Button.js';
import 'react';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';

var CardRoot = styled(Button)(function (_a) {
    var _b;
    var $active = _a.$active, theme = _a.theme;
    var initialBoxShadow = "inset 0 0 0 ".concat(theme.borders.size.secondary, "px ").concat(theme.palette.gray[300]);
    var activeBoxShadow = "".concat(theme.boxShadow.md, ",\n    inset 0 0 0 ").concat(theme.borders.size.secondary, "px ").concat(theme.palette.primary.main, "\n  ");
    return {
        "&.MuiButton-outlined": (_b = {
                color: theme.palette.text.primary,
                padding: theme.spacing(2, 2.5),
                borderRadius: theme.borders.radius.sm,
                boxShadow: $active ? activeBoxShadow : initialBoxShadow,
                transition: theme.transitions.create(["box-shadow"]),
                fontWeight: theme.typography.fontWeightMedium,
                "&:hover, &:focus, &:active": {
                    backgroundColor: "transparent"
                }
            },
            _b[theme.breakpoints.down("sm")] = {
                padding: theme.spacing(1.5, 2),
                borderRadius: theme.borders.radius.xs1,
                backgroundColor: $active ? theme.palette.gray.white : theme.palette.gray[100],
                boxShadow: $active ? activeBoxShadow : "none",
                "&:hover, &:focus, &:active": {
                    backgroundColor: $active ? theme.palette.gray.white : theme.palette.gray[100]
                }
            },
            _b)
    };
});
var CardButton = function (_a) {
    var _b = _a.active, active = _b === void 0 ? false : _b, children = _a.children, buttonProps = _a.buttonProps;
    return (jsx(CardRoot, __assign({ align: "left" }, buttonProps, { variant: "outlined", "$active": active }, { children: children }), void 0));
};

export { CardButton as default };