/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../styles/styler.js";
import { normalIconSizes } from "../tokens/configs/sizes.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/Icon.tsx
/**
* **🎨 A component for displaying icons**
*
* @description
* [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
* other items. They are available in four different sizes: `xs`, `sm`, `md`, and
* `lg`. Each size also supports an outline and fill variant. Icons can be
* colored using the `color` prop.
*
* The component is available in the `@yahoo/uds` package but is meant to be used
* with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
* A separate package provides modularity from the core library, better
* versioning strategies, and tree shakeability.
*
* @example
* ```tsx
* import { Icon } from '@yahoo/uds';
* import { AddFolder } from '@yahoo/uds-icons';
*
* <Icon name={AddFolder} variant="fill" size="sm" />
* ```
*
* @usage
* - If you need to display an icon.
*
* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
*
* @related [IconButton](https://uds.build/docs/components/icon-button)
*/
const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
	const availableVariants = SVGIcon.metadata?.variants ?? [];
	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
	const isMulticolor = effectiveVariant === "multicolor";
	const styles = getStyles({
		flex: "none",
		color: isMulticolor || color === "inherit" ? void 0 : color,
		className: cx(className, !isMulticolor && "[&_path]:fill-current")
	});
	const sizePx = normalIconSizes[size];
	return /* @__PURE__ */ jsx("svg", {
		ref,
		xmlns: "http://www.w3.org/2000/svg",
		width: sizePx,
		height: sizePx,
		viewBox: `0 0 ${sizePx} ${sizePx}`,
		"aria-hidden": "true",
		focusable: "false",
		className: styles,
		...props,
		children: /* @__PURE__ */ jsx(SVGIcon, {
			size,
			variant: effectiveVariant
		})
	});
});
Icon.displayName = "Icon";

//#endregion
export { Icon };