@xyo-network/react-node-renderer 2.64.0 → 2.64.3

package/dist/node/components/module/graph/NodeHover.cjs

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/module/graph/NodeHover.tsx
+var NodeHover_exports = {};
+__export(NodeHover_exports, {
+  ModuleGraphNodeHover: () => ModuleGraphNodeHover
+});
+module.exports = __toCommonJS(NodeHover_exports);
+var import_react = require("react");
+
+// src/components/module/graph/Popper.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material.alpha)(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: address, color: "primary" })
+  ] }) });
+};
+
+// src/components/module/graph/NodeHover.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ModuleGraphNodeHover = ({ node }) => {
+  const { address, name } = (node == null ? void 0 : node.data()) ?? {};
+  const [boundingBox, setBoundingBox] = (0, import_react.useState)(node == null ? void 0 : node.renderedBoundingBox());
+  const ref = (0, import_react.useRef)(null);
+  const [currentEl, setCurrentEl] = (0, import_react.useState)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    if (node && ref.current) {
+      setBoundingBox(node.renderedBoundingBox());
+      setCurrentEl(ref.current);
+    }
+    const listener = () => {
+      setBoundingBox(node == null ? void 0 : node.renderedBoundingBox());
+    };
+    node == null ? void 0 : node.on("position", listener);
+    return () => {
+      node == null ? void 0 : node.off("position", void 0, listener);
+    };
+  }, [node]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: node ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref,
+        style: {
+          // backgroundColor: '#fff',
+          // opacity: 0.25,
+          cursor: "pointer",
+          height: boundingBox == null ? void 0 : boundingBox.h,
+          left: boundingBox == null ? void 0 : boundingBox.x1,
+          pointerEvents: "none",
+          position: "absolute",
+          top: boundingBox == null ? void 0 : boundingBox.y1,
+          width: boundingBox == null ? void 0 : boundingBox.w
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
+  ] }) : null });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModuleGraphNodeHover
+});
+//# sourceMappingURL=NodeHover.cjs.map

package/dist/node/components/module/graph/NodeHover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { NodeSingular } from 'cytoscape'\nimport { useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<HTMLDivElement | null>(null)\n\n  useLayoutEffect(() => {\n    if (node && ref.current) {\n      setBoundingBox(node.renderedBoundingBox())\n      setCurrentEl(ref.current)\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  return (\n    <>\n      {node ? (\n        <>\n          <div\n            ref={ref}\n            style={{\n              // backgroundColor: '#fff',\n              // opacity: 0.25,\n              cursor: 'pointer',\n              height: boundingBox?.h,\n              left: boundingBox?.x1,\n              pointerEvents: 'none',\n              position: 'absolute',\n              top: boundingBox?.y1,\n              width: boundingBox?.w,\n            }}\n          ></div>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkD;;;ACDlD,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAYlB;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;;;ADaQ,IAAAA,sBAAA;AA1BD,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,6BAAM,qBAAqB;AAC1E,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AAEtE,oCAAgB,MAAM;AACpB,QAAI,QAAQ,IAAI,SAAS;AACvB,qBAAe,KAAK,oBAAoB,CAAC;AACzC,mBAAa,IAAI,OAAO;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,6EACG,iBACC,8EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA;AAAA;AAAA,UAGL,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACD;AAAA,IACD,6CAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC;AAAA,KAC9F,IACE,MACN;AAEJ;","names":["import_jsx_runtime"]}

package/dist/node/components/module/graph/NodeHover.d.cts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NodeSingular } from 'cytoscape';
+export interface ModuleHoverProps {
+    node?: NodeSingular;
+}
+export declare const ModuleGraphNodeHover: React.FC<ModuleHoverProps>;
+//# sourceMappingURL=NodeHover.d.ts.map

package/dist/node/components/module/graph/NodeHover.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3D,CAAA"}

package/dist/node/components/module/graph/NodeHover.d.mts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NodeSingular } from 'cytoscape';
+export interface ModuleHoverProps {
+    node?: NodeSingular;
+}
+export declare const ModuleGraphNodeHover: React.FC<ModuleHoverProps>;
+//# sourceMappingURL=NodeHover.d.ts.map

package/dist/node/components/module/graph/NodeHover.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3D,CAAA"}

package/dist/node/components/module/graph/NodeHover.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NodeSingular } from 'cytoscape';
+export interface ModuleHoverProps {
+    node?: NodeSingular;
+}
+export declare const ModuleGraphNodeHover: React.FC<ModuleHoverProps>;
+//# sourceMappingURL=NodeHover.d.ts.map

package/dist/node/components/module/graph/NodeHover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3D,CAAA"}

package/dist/node/components/module/graph/NodeHover.js

@@ -0,0 +1,63 @@
+// src/components/module/graph/NodeHover.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+
+// src/components/module/graph/Popper.tsx
+import { alpha, Chip, Popper, Typography } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { Identicon } from "@xylabs/react-identicon";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ jsx(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs(FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ jsxs(FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ jsx(Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ jsx(Chip, { label: address, color: "primary" })
+  ] }) });
+};
+
+// src/components/module/graph/NodeHover.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ModuleGraphNodeHover = ({ node }) => {
+  const { address, name } = (node == null ? void 0 : node.data()) ?? {};
+  const [boundingBox, setBoundingBox] = useState(node == null ? void 0 : node.renderedBoundingBox());
+  const ref = useRef(null);
+  const [currentEl, setCurrentEl] = useState(null);
+  useLayoutEffect(() => {
+    if (node && ref.current) {
+      setBoundingBox(node.renderedBoundingBox());
+      setCurrentEl(ref.current);
+    }
+    const listener = () => {
+      setBoundingBox(node == null ? void 0 : node.renderedBoundingBox());
+    };
+    node == null ? void 0 : node.on("position", listener);
+    return () => {
+      node == null ? void 0 : node.off("position", void 0, listener);
+    };
+  }, [node]);
+  return /* @__PURE__ */ jsx2(Fragment, { children: node ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref,
+        style: {
+          // backgroundColor: '#fff',
+          // opacity: 0.25,
+          cursor: "pointer",
+          height: boundingBox == null ? void 0 : boundingBox.h,
+          left: boundingBox == null ? void 0 : boundingBox.x1,
+          pointerEvents: "none",
+          position: "absolute",
+          top: boundingBox == null ? void 0 : boundingBox.y1,
+          width: boundingBox == null ? void 0 : boundingBox.w
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx2(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
+  ] }) : null });
+};
+export {
+  ModuleGraphNodeHover
+};
+//# sourceMappingURL=NodeHover.js.map

package/dist/node/components/module/graph/NodeHover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { NodeSingular } from 'cytoscape'\nimport { useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<HTMLDivElement | null>(null)\n\n  useLayoutEffect(() => {\n    if (node && ref.current) {\n      setBoundingBox(node.renderedBoundingBox())\n      setCurrentEl(ref.current)\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  return (\n    <>\n      {node ? (\n        <>\n          <div\n            ref={ref}\n            style={{\n              // backgroundColor: '#fff',\n              // opacity: 0.25,\n              cursor: 'pointer',\n              height: boundingBox?.h,\n              left: boundingBox?.x1,\n              pointerEvents: 'none',\n              position: 'absolute',\n              top: boundingBox?.y1,\n              width: boundingBox?.w,\n            }}\n          ></div>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";AACA,SAAS,iBAAiB,QAAQ,gBAAgB;;;ACDlD,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAYlB,SACE,KADF;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;;;ADaQ,mBACE,OAAAA,MADF,QAAAC,aAAA;AA1BD,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,6BAAM,qBAAqB;AAC1E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AAEtE,kBAAgB,MAAM;AACpB,QAAI,QAAQ,IAAI,SAAS;AACvB,qBAAe,KAAK,oBAAoB,CAAC;AACzC,mBAAa,IAAI,OAAO;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,gBAAAD,KAAA,YACG,iBACC,gBAAAC,MAAA,YACE;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA;AAAA;AAAA,UAGL,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACD;AAAA,IACD,gBAAAA,KAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC;AAAA,KAC9F,IACE,MACN;AAEJ;","names":["jsx","jsxs"]}

package/dist/node/components/module/graph/Popper.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/module/graph/Popper.tsx
+var Popper_exports = {};
+__export(Popper_exports, {
+  ModuleHoverPopper: () => ModuleHoverPopper
+});
+module.exports = __toCommonJS(Popper_exports);
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material.alpha)(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: address, color: "primary" })
+  ] }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModuleHoverPopper
+});
+//# sourceMappingURL=Popper.cjs.map

package/dist/node/components/module/graph/Popper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAYlB;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;","names":[]}

package/dist/node/components/module/graph/Popper.d.cts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PopperProps } from '@mui/material';
+export interface ModuleHoverPopperProps extends PopperProps {
+    address?: string;
+    element?: HTMLElement | null;
+    name?: string;
+}
+export declare const ModuleHoverPopper: React.FC<ModuleHoverPopperProps>;
+//# sourceMappingURL=Popper.d.ts.map

package/dist/node/components/module/graph/Popper.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAY9D,CAAA"}

package/dist/node/components/module/graph/Popper.d.mts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PopperProps } from '@mui/material';
+export interface ModuleHoverPopperProps extends PopperProps {
+    address?: string;
+    element?: HTMLElement | null;
+    name?: string;
+}
+export declare const ModuleHoverPopper: React.FC<ModuleHoverPopperProps>;
+//# sourceMappingURL=Popper.d.ts.map

package/dist/node/components/module/graph/Popper.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAY9D,CAAA"}

package/dist/node/components/module/graph/Popper.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PopperProps } from '@mui/material';
+export interface ModuleHoverPopperProps extends PopperProps {
+    address?: string;
+    element?: HTMLElement | null;
+    name?: string;
+}
+export declare const ModuleHoverPopper: React.FC<ModuleHoverPopperProps>;
+//# sourceMappingURL=Popper.d.ts.map

package/dist/node/components/module/graph/Popper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAY9D,CAAA"}

package/dist/node/components/module/graph/Popper.js

@@ -0,0 +1,18 @@
+// src/components/module/graph/Popper.tsx
+import { alpha, Chip, Popper, Typography } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { Identicon } from "@xylabs/react-identicon";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ jsx(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs(FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ jsxs(FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ jsx(Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ jsx(Chip, { label: address, color: "primary" })
+  ] }) });
+};
+export {
+  ModuleHoverPopper
+};
+//# sourceMappingURL=Popper.js.map

package/dist/node/components/module/graph/Popper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";AAAA,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAYlB,SACE,KADF;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;","names":[]}