/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.98.7
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, memo } from 'react';
import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty, } from '../tasty';
const IconElement = tasty({
    as: 'span',
    styles: {
        display: 'inline-grid',
        placeContent: 'center',
        verticalAlign: 'sub',
        width: '1em 1em',
        height: 'min 1em',
        fontSize: '$icon-size',
        transition: 'theme, width, height',
        textAlign: 'center',
        textTransform: 'none',
        textRendering: 'optimizeLegibility',
        '-webkit-font-smoothing': 'antialiased',
        '& svg': {
            transition: 'all',
            width: 'min 1em',
            height: '1em 1em',
            strokeWidth: '$stroke-width',
            fontSize: 'inherit',
        },
    },
    styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
});
export const Icon = memo(forwardRef(function Icon(props, ref) {
    let { size, styles, stroke, ...rest } = props;
    if (size) {
        styles = {
            ...styles,
            fontSize: size,
        };
    }
    if (stroke) {
        styles = {
            ...styles,
            '$stroke-width': stroke,
        };
    }
    return _jsx(IconElement, { ref: ref, qa: "Icon", ...rest, styles: styles });
}));

        