'use client';
import cx from 'classnames';
import React, { memo } from 'react';
import { classNameForHighlightSize } from '~/styles/classNameForHighlightSize';
import { classNameForIconColor } from '~/styles/classNameForIconColor';
import { tokens } from '~/tokens';
import { wrapResponsive } from '~/utilities/opaque-responsive';
import { classNameForResponsiveValue, createResponsiveClassNameLookup } from '~/utilities/responsive-style';
import styles from './Icon.module.css';
const classNameSizeLookup = createResponsiveClassNameLookup(styles, {
    '8px': 'sizePx8',
    '10px': 'sizePx10',
    '12px': 'sizePx12',
    '16px': 'sizePx16',
    '20px': 'sizePx20',
    '24px': 'sizePx24',
    '32px': 'sizePx32',
    '40px': 'sizePx40',
    '48px': 'sizePx48',
    '64px': 'sizePx64',
    '88px': 'sizePx88',
});
const verticalAlignMap = {
    baseline: styles.verticalAlignBaseline,
    sub: styles.verticalAlignSub,
    super: styles.verticalAlignSuper,
    'text-top': styles.verticalAlignTextTop,
    'text-bottom': styles.verticalAlignTextBottom,
    middle: styles.verticalAlignMiddle,
    top: styles.verticalAlignTop,
    bottom: styles.verticalAlignBottom,
};
export const Icon = memo(function IconWrapper({ innerRef, size = '16px', color = tokens.global.content.regular.default, highlight = false, highlightColor = tokens.global.primary.surfaceMuted.default, highlightSize = tokens.global.space.x40, children, verticalAlign, title, id, 'data-tag': dataTag, className, style, ...props }) {
    const responsiveSize = wrapResponsive(size);
    const classList = cx(styles.root, classNameForIconColor({ color }), classNameForResponsiveValue(responsiveSize, classNameSizeLookup), verticalAlign && verticalAlignMap[verticalAlign], className);
    const icon = (<span ref={innerRef} title={title} aria-hidden id={id} data-tag={dataTag} className={classList} style={style} {...props}>
      {children}
    </span>);
    if (highlight) {
        const hightlightClassList = cx(styles.highlight, classNameForIconColor({ color: highlightColor }), classNameForHighlightSize({ highlightSize }));
        return (<span className={hightlightClassList} data-tag={dataTag && 'icon-highlight-container'}>
        {icon}
      </span>);
    }
    return icon;
});
//# sourceMappingURL=Icon.jsx.map