import React from 'react';
import { Box, alpha, makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {
        letterSpacing: '0.00714286rem',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '32px',
        backgroundColor: (props) => {
            var _a, _b;
            return ((_a = props.status) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'ok'
                ? alpha(theme.palette.success.light, 0.3)
                : ((_b = props.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'warning'
                    ? alpha(theme.palette.warning.light, 0.3)
                    : alpha(theme.palette.error.light, 0.3);
        },
        borderRadius: '8px',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
        boxSizing: 'border-box',
        boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15)',
        fontSize: '0.875rem',
        maxWidth: '100%',
        position: 'relative',
        fontWeight: 500,
        padding: '10px'
    }
}));
export const IndicatorChip = (props) => {
    const classes = useStyles(props);
    const { text } = props;
    return React.createElement(Box, { className: classes.root }, text);
};
//# sourceMappingURL=IndicatorChip.js.map