@mtg-rio/mui-mentions/dist/esm/Mention.js

@mention people in a MUI TextField

import { Box } from '@mui/material';
import React from 'react';
const Mention = ({ display, color }) => {
    return (React.createElement(Box, { component: 'span', sx: { position: 'relative' } },
        display,
        React.createElement(Box, { component: 'span', sx: {
                position: 'absolute',
                left: '-1px',
                top: '-2px',
                bottom: 0,
                right: '-1px',
                backgroundColor: (theme) => getColor(theme.palette.mode, color),
                borderRadius: '3px',
                color: 'transparent',
            } })));
};
export default Mention;
/**
 * Converts the provided color into a format suitable for passing to sx.backgroundColor.
 * @param mode The current palette mode.
 * @param color The color to convert.
 * @returns A color usable by sx.backgroundColor.
 */
function getColor(mode, color) {
    if (!color) {
        if (mode === 'light') {
            return 'primary.light';
        }
        return 'info.dark';
    }
    switch (color) {
        case 'primary':
        case 'secondary':
        case 'info':
        case 'success':
        case 'warning':
        case 'error':
            if (mode === 'light')
                return `${color}.light`;
            return `${color}.dark`;
    }
    return color;
}
//# sourceMappingURL=Mention.js.map