'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { createElement, isValidElement, } from 'react';
import { useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../utils/index.js";
import { IconMeta } from "./Icon.meta.js";
import { useTooltipCollector } from "./Tooltip.js";
export function Icon({ src, alt, size, color, className, style, ...props }) {
    useGDS();
    const iconContent = isValidElement(src) ? src : createElement(src);
    const collectTooltipContent = useTooltipCollector();
    if (collectTooltipContent && alt) {
        collectTooltipContent(alt);
    }
    if ('variant' in props) {
        /**
         * Just in case TS failed to catch a stray `variant` prop (e.g. in `IconGallery.stories.tsx`),
         * we don't want to render it as an (invalid) HTML attribute.
         */
        delete props.variant;
    }
    return (_jsx("span", { role: alt ? 'img' : undefined, "aria-label": alt || undefined, className: cn(`gds-icon root-flex items-center justify-center
        ${ /* Fix icons wobbling in Safari when rendered on top of opacity/background transitions */''}
        u:will-change-transform
        ${ /* Flip some icons horizontally in RTL so that `ArrowLeft` points right, etc. */''}
        rtl:data-[name*=Left]:*:-scale-x-100
        rtl:data-[name*=Right]:*:-scale-x-100
        u:aspect-square
        ${ /* Prevent the icon from being stretched vertically in a flex container, while allowing the height to be responsive (thanks to the `aspect-square`) and overridable (thanks to the unimportant variant) */''}
        u:h-max
        ${ /* Make the `size` prop work, while allowing sizing icons with `w-*` or `size-*` utilities (thanks to the unimportant variant) */''}
        u:w-(--gds-icon-size)
        ${ /* Prevent the icon from being squished in a flex container */''}
        u:shrink-0
        ${ /* Make the `color` prop work, while allowing coloring icons with `text-*` utilities (thanks to the unimportant variant) */''}
        u:text-(--gds-icon-color)
        ${ /* Make the SVG (or whatever element the inner icon is) fill this wrapper */''}
        u:*:w-full`, className), ...getCSSPropsAttributes(IconMeta, { size, color }, style), ...props, children: iconContent }));
}
//# sourceMappingURL=Icon.js.map