import { jsx as e } from "react/jsx-runtime";
import { InfoIconModal as C } from "./index-InfoIconModal.js";
import { breakpoints as i } from "./index-breakpoints.js";
import { useWindowResize as g } from "./index-use-window.resize.js";
import { IconSize as v, Icon as M } from "./index-Icon.js";
import { IconNames as P } from "./index-IconNames.js";
import { ModalService as t } from "./index-ModalService.js";
import { Popover as b } from "./index-Popover.js";
import { useState as w } from "react";
import l from "./index-InfoIcon.module.scss.js";
const U = (a) => {
  const {
    message: r,
    size: c = v.large,
    title: m,
    replacements: n,
    testId: s,
    maxWidth: x,
    modalBackgroundColor: d,
    hasModalPuller: p,
    icon: f = P.info
  } = a, [z, h] = w(""), u = g(), I = () => {
    const o = t.open(e(C, {
      hasPuller: p,
      backgroundColor: d,
      title: m,
      message: r,
      replacements: n,
      onTouchEnd: () => {
        t.closeEv(o);
      },
      onOutsideClick: () => {
        t.closeEv(o);
      }
    }));
    return o;
  }, k = () => {
    if (u <= i.tablet) {
      const o = I();
      h(o);
    }
  };
  return e(b, {
    "data-testid": `${s}-`,
    replacements: n,
    position: "top",
    message: r,
    hideUnderBreakpoint: i.desktop,
    children: e("span", {
      "data-testid": s,
      className: l.container,
      children: e(M, {
        onClick: k,
        color: "--n400",
        hoverColor: "--n500",
        hasCircle: !0,
        fillColor: "--n200",
        type: c,
        className: l.icon,
        children: f
      })
    })
  });
};
export {
  U as InfoIcon
};
