@lunit/oui/dist/presentations/presentations.styled.js

Lunit Oncology UI components

import { jsx as _jsx } from "react/jsx-runtime";
import { Typography } from '@mui/material';
import theme from '../theme';
export const PresentationTypography = (props) => {
    const { size, isDimmed, ...rest } = props;
    if (size === 'small-dimmed') {
        return (_jsx(Typography, { variant: "body_m2", ...rest, sx: { color: theme.palette.neutralGrey[40] } }));
    }
    if (size === 'small') {
        return (_jsx(Typography, { variant: "body8", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
    }
    if (size === 'small-bold') {
        return (_jsx(Typography, { variant: "body8", ...rest, sx: { fontWeight: 'bold', color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
    }
    if (size === 'medium') {
        return (_jsx(Typography, { variant: "body5", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
    }
    if (size === 'medium-bold') {
        return (_jsx(Typography, { variant: "body_b1", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
    }
    if (size === 'large-bold') {
        return (_jsx(Typography, { variant: "h9", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
    }
    return _jsx(Typography, { ...rest });
};
export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = false, }) => {
    if (symbol === 'circle') {
        return (_jsx("div", { style: {
                height: '100%',
                width: '10px',
                display: 'flex',
                opacity: isDimmed ? 0.5 : 1,
            }, children: _jsx("span", { style: {
                    height: '6px',
                    width: '6px',
                    backgroundColor: color,
                    borderRadius: '50%',
                    border: '1px solid black',
                } }) }));
    }
    if (symbol === 'rectangle') {
        return (_jsx("div", { style: {
                height: '100%',
                width: '10px',
                display: 'flex',
                opacity: isDimmed ? 0.5 : 1,
            }, children: _jsx("span", { style: {
                    height: '10px',
                    width: '10px',
                    backgroundColor: color,
                } }) }));
    }
    if (symbol === 'border-circle') {
        return (_jsx("div", { style: {
                height: '100%',
                width: '10px',
                display: 'flex',
                opacity: isDimmed ? 0.5 : 1,
            }, children: _jsx("span", { style: {
                    height: '10px',
                    width: '10px',
                    backgroundColor: color,
                    borderRadius: '50%',
                    border: '1px solid black',
                } }) }));
    }
    if (symbol === 'border-rectangle') {
        return (_jsx("div", { style: {
                height: '100%',
                width: '10px',
                display: 'flex',
                opacity: isDimmed ? 0.5 : 1,
            }, children: _jsx("span", { style: {
                    height: '10px',
                    width: '10px',
                    backgroundColor: color,
                    border: '1px solid black',
                } }) }));
    }
    // Fallback
    return (_jsx("div", { style: {
            height: '100%',
            width: '10px',
            display: 'flex',
            opacity: isDimmed ? 0.5 : 1,
        }, children: _jsx("span", { style: {
                height: '10px',
                width: '10px',
                backgroundColor: 'black',
            } }) }));
};