import { E as compilerRuntimeExports, r as reactExports, j as jsxRuntimeExports } from "./vendor-react-DYNCg6N5.js";
import { c as createStyles, k as Tooltip, b as Box, T as Text } from "./vendor-mantine-h0WlM2Mj.js";
import { u as useCopyToClipboard } from "./useCopyToClipboard-C-S2RacD.js";
import { u as useTranslation } from "./vendor-i18n-wisIXUFi.js";
const useStyles = createStyles((theme) => ({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center",
    padding: `${theme.spacing.xs} 0px `,
    width: "100%"
  },
  title: {
    color: theme.colors.brandGray[0],
    fontSize: "12px"
  },
  description: {
    fontSize: "14px",
    lineHeight: "204%"
  },
  link: {
    cursor: "pointer"
  },
  rounded: {
    border: "none",
    borderRadius: "34px",
    backgroundColor: "#F2F4F7",
    padding: "4px 12px",
    margin: "8px 4px"
  },
  group: {
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "row"
  },
  listGroup: {
    display: "flex",
    flexDirection: "column",
    width: "100%"
  }
}));
const EllipsisTooltip = (props) => {
  const $ = compilerRuntimeExports.c(14);
  const {
    width: t0,
    children,
    className: t1
  } = props;
  const width = t0 === void 0 ? 100 : t0;
  const className = t1 === void 0 ? "" : t1;
  const textRef = reactExports.useRef(null);
  const [isTruncated, setIsTruncated] = reactExports.useState(false);
  let t2;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = () => {
      const el = textRef.current;
      if (el) {
        setIsTruncated(el.scrollWidth > el.clientWidth);
      }
    };
    $[0] = t2;
  } else {
    t2 = $[0];
  }
  let t3;
  if ($[1] !== children || $[2] !== width) {
    t3 = [children, width];
    $[1] = children;
    $[2] = width;
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  reactExports.useEffect(t2, t3);
  let t4;
  if ($[4] !== width) {
    t4 = {
      display: "inline-block",
      width: "fit-content",
      maxWidth: width,
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    };
    $[4] = width;
    $[5] = t4;
  } else {
    t4 = $[5];
  }
  const styles = t4;
  const t5 = !isTruncated;
  let t6;
  if ($[6] !== children || $[7] !== className || $[8] !== styles) {
    t6 = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: textRef, className, style: styles, children });
    $[6] = children;
    $[7] = className;
    $[8] = styles;
    $[9] = t6;
  } else {
    t6 = $[9];
  }
  let t7;
  if ($[10] !== children || $[11] !== t5 || $[12] !== t6) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { zIndex: 1300, disabled: t5, label: children, color: "gray", children: t6 });
    $[10] = children;
    $[11] = t5;
    $[12] = t6;
    $[13] = t7;
  } else {
    t7 = $[13];
  }
  return t7;
};
const TextField = ({
  title,
  description,
  link,
  leftSection
}) => {
  const {
    classes,
    cx
  } = useStyles();
  const {
    t
  } = useTranslation();
  const {
    copy
  } = useCopyToClipboard();
  const copyText = reactExports.useCallback(async () => {
    await copy(description ?? "");
  }, [description]);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.container, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: classes.title, children: title }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.group, children: [
      leftSection ? leftSection : null,
      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { maw: 300, onClick: copyText, children: /* @__PURE__ */ jsxRuntimeExports.jsx(EllipsisTooltip, { "data-text": description, className: cx(classes.description, {
        [classes.link]: description && link
      }), width: 300, children: description ? description : t("noInformation") }) })
    ] })
  ] });
};
export {
  EllipsisTooltip as E,
  TextField as T,
  useStyles as u
};
//# sourceMappingURL=index-D4BAIihc.js.map
