import { jsx } from 'react/jsx-runtime';
import { forwardRef, useRef, useId, useLayoutEffect } from 'react';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';

import './Icon.css';const icon = "_icon_1901s_1";
const small = "_small_1901s_37";
const medium = "_medium_1901s_41";
const large = "_large_1901s_45";
const xlarge = "_xlarge_1901s_49";
const styles = {
	icon: icon,
	small: small,
	medium: medium,
	large: large,
	xlarge: xlarge
};

const URL_REF_ATTRS = [
  "fill",
  "stroke",
  "filter",
  "mask",
  "clip-path",
  "clipPath"
];
const HREF_ATTRS = ["href", "xlink:href"];
const URL_REF_PATTERN = /^url\(#(.+)\)$/;
const HREF_REF_PATTERN = /^#(.+)$/;
function uniquifySvgDomIds(svgRoot, idPrefix) {
  const elementsWithId = svgRoot.querySelectorAll("[id]");
  if (elementsWithId.length === 0) return;
  const prefixWithSeparator = `${idPrefix}-`;
  const elements = svgRoot.querySelectorAll("*");
  for (const element of elements) {
    const currentId = element.getAttribute("id");
    if (currentId && !currentId.startsWith(prefixWithSeparator)) {
      element.setAttribute("id", `${prefixWithSeparator}${currentId}`);
    }
    for (const attr of URL_REF_ATTRS) {
      const value = element.getAttribute(attr);
      if (!value) continue;
      const match = value.match(URL_REF_PATTERN);
      if (!match) continue;
      const refId = match[1];
      if (refId.startsWith(prefixWithSeparator)) continue;
      element.setAttribute(attr, `url(#${prefixWithSeparator}${refId})`);
    }
    for (const attr of HREF_ATTRS) {
      const value = element.getAttribute(attr);
      if (!value) continue;
      const match = value.match(HREF_REF_PATTERN);
      if (!match) continue;
      const refId = match[1];
      if (refId.startsWith(prefixWithSeparator)) continue;
      element.setAttribute(attr, `#${prefixWithSeparator}${refId}`);
    }
  }
}

const Icon = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    size = "medium",
    className,
    svg: Svg2,
    inherit,
    style,
    color,
    ...rest
  } = componentProps;
  const localRef = useRef(null);
  const mergedRef = useMergeRefs([localRef, ref]);
  const idPrefix = useId().replace(/:/g, "");
  useLayoutEffect(() => {
    const svg = localRef.current?.querySelector("svg");
    if (!svg) return;
    uniquifySvgDomIds(svg, idPrefix);
  }, [Svg2, idPrefix]);
  const iconClassNames = cx([styles["icon"]], className, {
    [styles["small"]]: size === "small",
    [styles["medium"]]: size === "medium",
    [styles["large"]]: size === "large",
    [styles["xlarge"]]: size === "xlarge"
  });
  const styleCombined = {
    color: color ? color : inherit ? "inherit" : void 0,
    ...style,
    ...layoutStyles
  };
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: iconClassNames,
      "data-anv": "icon",
      style: styleCombined,
      ref: mergedRef,
      ...rest,
      children: /* @__PURE__ */ jsx(Svg2, {})
    }
  );
});
Icon.displayName = "Icon";

export { Icon as I };
//# sourceMappingURL=Icon-B4uCvMU9.js.map
