import { jsx as _jsx } from "react/jsx-runtime";
import cx from 'classnames';
import './styles.scss';
export const IconWeights = ['regular', 'heavy'];
export const IconSizes = [
    'x-large',
    'large',
    'medium',
    'small',
    'x-small',
];
export default function Icon({ name, className = '', size, weight = 'regular', filled = false, disabled = false, title, onClick, onMouseDown, onMouseUp, }) {
    const getClassNames = cx('ds-icon material-symbols-outlined', className, size, weight, {
        disabled: disabled,
    });
    const style = {
        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' 24`,
    };
    return (_jsx("span", { className: getClassNames, style: style, onClick: (e) => onClick && !disabled && onClick(e), onMouseDown: (e) => onMouseDown && onMouseDown(e), onMouseUp: (e) => onMouseUp && onMouseUp(e), title: title, translate: "no", children: name }));
}
