import 'core-js/modules/es.object.assign.js';
import { __rest } from '../../../_virtual/_tslib.js';
import { jsx } from 'react/jsx-runtime';
import { styled, css, useTheme } from '@mui/material';
import { transientPropCheck, getThemeColor } from '../../styles/theme/utils.js';

let _ = t => t,
  _t;
const IconFontWrapper = styled('div', transientPropCheck)(({
  $color,
  $fill
}) => css(_t || (_t = _`
    display: flex;
    align-items: center;
    max-width: 24px;
    color: ${0};
    font-variation-settings: 'FILL' ${0}, 'wght' 400, 'GRAD' 0,
      'opsz' 48;
  `), $color, $fill ? 1 : 0));
// IconFont component can be used to centralise the way we import svg icons
//  and make easier to switch between icons just by changing the iconName property.
const IconFont = _a => {
  var {
      name,
      fill = false,
      fontSize = 24,
      color
    } = _a,
    props = __rest(_a, ["name", "fill", "fontSize", "color"]);
  const theme = useTheme();
  const renderingColor = color ? getThemeColor(theme.palette, color) : 'inherit';
  return jsx(IconFontWrapper, Object.assign({
    "$color": renderingColor || 'inherit',
    "$fill": fill
  }, props, {
    children: jsx("span", Object.assign({
      className: "material-symbols-outlined",
      style: {
        color: 'inherit',
        fontSize
      }
    }, {
      children: name
    }))
  }));
};

export { IconFont, IconFont as default };
