@xyo-network/react-shared 2.81.10 → 2.82.0

package/dist/neutral/index.cjs

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -85,21 +86,26 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/Ampersand.tsx
 var import_material = require("@mui/material");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Ampersand = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginX: 1, component: "span", ...props, children: "&" });
-};
+var import_react = __toESM(require("react"), 1);
+var Ampersand = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_material.Typography, {
+    marginX: 1,
+    component: "span",
+    ...props
+  }, "&");
+}, "Ampersand");
 
 // src/components/BasicHero/BasicHero.tsx
 var import_material5 = require("@mui/material");
 var import_react_button = require("@xylabs/react-button");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_link = require("@xylabs/react-link");
+var import_react4 = __toESM(require("react"), 1);
 
 // src/hooks/GradientStyles/GradientStyles.tsx
 var import_material2 = require("@mui/material");
 var import_styles = require("@mui/styles");
-var colorfulGradientLightMode = () => {
+var colorfulGradientLightMode = /* @__PURE__ */ __name(() => {
   return {
     background: {
       backgroundImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)"
@@ -119,8 +125,8 @@ var colorfulGradientLightMode = () => {
       display: "inline-block"
     }
   };
-};
-var colorfulGradientDarkMode = () => {
+}, "colorfulGradientLightMode");
+var colorfulGradientDarkMode = /* @__PURE__ */ __name(() => {
   return {
     background: {
       backgroundImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)"
@@ -140,19 +146,22 @@ var colorfulGradientDarkMode = () => {
       display: "inline-block"
     }
   };
-};
-var useGradientStyles = () => {
+}, "colorfulGradientDarkMode");
+var useGradientStyles = /* @__PURE__ */ __name(() => {
   const theme = (0, import_material2.useTheme)();
   const styles = theme.palette.mode === "dark" ? colorfulGradientDarkMode() : colorfulGradientLightMode();
   const classes = (0, import_styles.makeStyles)(styles);
-  return { classes, styles };
-};
+  return {
+    classes,
+    styles
+  };
+}, "useGradientStyles");
 
 // src/hooks/useDataState.ts
-var import_react = require("react");
-var useDataState = (defaultValue) => {
-  const [state, setState] = (0, import_react.useState)(defaultValue);
-  const setDataState = (value) => {
+var import_react2 = require("react");
+var useDataState = /* @__PURE__ */ __name((defaultValue) => {
+  const [state, setState] = (0, import_react2.useState)(defaultValue);
+  const setDataState = /* @__PURE__ */ __name((value) => {
     try {
       if (JSON.stringify(value) !== JSON.stringify(state)) {
         setState(value);
@@ -160,9 +169,12 @@ var useDataState = (defaultValue) => {
     } catch {
       console.error("setDataState failed!  Make sure data type is stringifiable!");
     }
-  };
-  return [state, setDataState];
-};
+  }, "setDataState");
+  return [
+    state,
+    setDataState
+  ];
+}, "useDataState");
 
 // src/hooks/useIsMobile.ts
 var import_material4 = require("@mui/material");
@@ -171,36 +183,40 @@ var import_material4 = require("@mui/material");
 var import_material3 = require("@mui/material");
 
 // src/hooks/useIsMobile.ts
-var useIsMobile = () => {
+var useIsMobile = /* @__PURE__ */ __name(() => {
   const theme = (0, import_material4.useTheme)();
   return (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
-};
-var useIsSmall = () => {
+}, "useIsMobile");
+var useIsSmall = /* @__PURE__ */ __name(() => {
   const theme = (0, import_material4.useTheme)();
   return (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
-};
+}, "useIsSmall");
 
 // src/hooks/usePayloadHash.ts
 var import_react_promise = require("@xylabs/react-promise");
 var import_payload_builder = require("@xyo-network/payload-builder");
-var usePayloadHash = (payload) => {
-  return (0, import_react_promise.usePromise)(async () => payload ? await import_payload_builder.PayloadBuilder.dataHash(payload) : void 0, [payload])[0];
-};
-var usePayloadHashes = (payloads) => {
-  return (0, import_react_promise.usePromise)(
-    async () => payloads ? await Promise.all(payloads.map(async (payload) => [payload, await import_payload_builder.PayloadBuilder.dataHash(payload)])) : void 0,
-    [payloads]
-  )[0];
-};
+var usePayloadHash = /* @__PURE__ */ __name((payload) => {
+  return (0, import_react_promise.usePromise)(async () => payload ? await import_payload_builder.PayloadBuilder.dataHash(payload) : void 0, [
+    payload
+  ])[0];
+}, "usePayloadHash");
+var usePayloadHashes = /* @__PURE__ */ __name((payloads) => {
+  return (0, import_react_promise.usePromise)(async () => payloads ? await Promise.all(payloads.map(async (payload) => [
+    payload,
+    await import_payload_builder.PayloadBuilder.dataHash(payload)
+  ])) : void 0, [
+    payloads
+  ])[0];
+}, "usePayloadHashes");
 
 // src/hooks/usePromise.ts
 var import_react_promise2 = require("@xylabs/react-promise");
 
 // src/hooks/useShareForwardRef.ts
-var import_react2 = require("react");
-var useShareForwardedRef = (forwardedRef, refresh = 0) => {
-  const innerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+var import_react3 = require("react");
+var useShareForwardedRef = /* @__PURE__ */ __name((forwardedRef, refresh = 0) => {
+  const innerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     if (!forwardedRef) {
       return;
     }
@@ -210,149 +226,155 @@ var useShareForwardedRef = (forwardedRef, refresh = 0) => {
     } else {
       forwardedRef.current = innerRef.current;
     }
-  }, [forwardedRef, refresh]);
+  }, [
+    forwardedRef,
+    refresh
+  ]);
   return innerRef;
-};
+}, "useShareForwardedRef");
 
 // src/components/BasicHero/BasicHero.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_react_flexbox.FlexGrowRow,
-    {
-      width: "100%",
-      sx: { flexDirection: { md: "row", xs: "column" }, justifyContent: { md: backgroundImageAlignment ? "flex-start" : "center", xs: "center" } },
-      children: [
-        subLinkIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-          subLinkIcon,
-          "\xA0"
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material5.Typography, { children: [
-          subLinkText1,
-          "\xA0"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_link.LinkEx, { href: subLinkPath, underline: "always", target: "_blank", color: "inherit", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material5.Typography, { children: subLinkText2 }) })
-      ]
+var SubLinkSection = /* @__PURE__ */ __name(({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexGrowRow, {
+    width: "100%",
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      },
+      justifyContent: {
+        md: backgroundImageAlignment ? "flex-start" : "center",
+        xs: "center"
+      }
     }
-  );
-};
-var ButtonSection = ({ href, to, buttonText }) => {
+  }, subLinkIcon ? /* @__PURE__ */ import_react4.default.createElement("span", null, subLinkIcon, "\xA0") : null, /* @__PURE__ */ import_react4.default.createElement(import_material5.Typography, null, subLinkText1, "\xA0"), /* @__PURE__ */ import_react4.default.createElement(import_react_link.LinkEx, {
+    href: subLinkPath,
+    underline: "always",
+    target: "_blank",
+    color: "inherit"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_material5.Typography, null, subLinkText2)));
+}, "SubLinkSection");
+var ButtonSection = /* @__PURE__ */ __name(({ href, to, buttonText }) => {
   const isMobile = useIsSmall();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_button.ButtonEx,
-    {
-      fullWidth: true,
-      marginTop: 1,
-      marginBottom: 1,
-      marginRight: isMobile ? 2 : 1,
-      marginLeft: isMobile ? 2 : 0,
-      target: href ?? "_blank",
-      to,
-      href,
-      color: "primary",
-      variant: "contained",
-      paddingX: 3,
-      sx: { display: href || to ? "flex" : "none" },
-      children: buttonText
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_button.ButtonEx, {
+    fullWidth: true,
+    marginTop: 1,
+    marginBottom: 1,
+    marginRight: isMobile ? 2 : 1,
+    marginLeft: isMobile ? 2 : 0,
+    target: href ?? "_blank",
+    to,
+    href,
+    color: "primary",
+    variant: "contained",
+    paddingX: 3,
+    sx: {
+      display: href || to ? "flex" : "none"
     }
-  );
-};
-var BasicHero = ({
-  backgroundImage,
-  title,
-  gradientTitle,
-  backgroundColor,
-  textColor,
-  desc,
-  heroImage,
-  title2,
-  subLinkText1,
-  subLinkText2,
-  subLinkPath,
-  button1Text,
-  button2Text,
-  button2To,
-  button1To,
-  button2Href,
-  button1Href,
-  subLinkIcon,
-  sx,
-  ...props
-}) => {
+  }, buttonText);
+}, "ButtonSection");
+var BasicHero = /* @__PURE__ */ __name(({ backgroundImage, title, gradientTitle, backgroundColor, textColor, desc, heroImage, title2, subLinkText1, subLinkText2, subLinkPath, button1Text, button2Text, button2To, button1To, button2Href, button1Href, subLinkIcon, sx, ...props }) => {
   const isMobile = useIsSmall();
   const { classes } = useGradientStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_flexbox.FlexGrowCol,
-    {
-      sx: {
-        backgroundImage: `url(${backgroundImage})`,
-        backgroundPosition: { lg: "bottom", md: "center left", xs: "top left" },
-        minHeight: {
-          md: "500px",
-          sm: "400px",
-          xs: "200px"
-        },
-        ...sx
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexGrowCol, {
+    sx: {
+      backgroundImage: `url(${backgroundImage})`,
+      backgroundPosition: {
+        lg: "bottom",
+        md: "center left",
+        xs: "top left"
       },
-      style: {
-        backgroundColor: backgroundColor ?? "",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        color: textColor ?? ""
+      minHeight: {
+        md: "500px",
+        sm: "400px",
+        xs: "200px"
       },
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material5.Container, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        import_material5.Grid,
-        {
-          container: true,
-          justifyContent: "center",
-          alignItems: "center",
-          sx: {
-            alignItems: { xs: "center" },
-            justifyContent: { xs: "center" }
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material5.Grid, { item: true, xs: 12, sm: 8, md: backgroundImage ? 6 : 8, lg: backgroundImage ? 6 : 8, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexGrowCol, { paddingY: 2, sx: { alignItems: { xs: backgroundImage && !isMobile ? "flex-start" : "center" } }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material5.Typography, { variant: "h1", component: "h1", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: [
-                title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: `${title} ` }) : null,
-                gradientTitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: classes().heading, children: [
-                  " ",
-                  ` ${gradientTitle}`
-                ] }) : null,
-                title2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: ` ${title2}` }) : null
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material5.Typography, { variant: "body1", component: "h2", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: desc }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexGrowRow, { sx: { flexDirection: { lg: "row", xs: "column" } }, width: "100%", marginTop: 1, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonSection, { href: button1Href, to: button1To, buttonText: button1Text }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonSection, { href: button2Href, to: button2To, buttonText: button2Text })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                SubLinkSection,
-                {
-                  subLinkIcon,
-                  subLinkText1,
-                  subLinkText2,
-                  subLinkPath,
-                  backgroundImageAlignment: backgroundImage ? true : false
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material5.Grid, { item: true, xs: 12, md: 6, children: heroImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: heroImage, width: "100%" }) : null })
-          ]
-        }
-      ) })
+      ...sx
+    },
+    style: {
+      backgroundColor: backgroundColor ?? "",
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "cover",
+      color: textColor ?? ""
+    },
+    ...props
+  }, /* @__PURE__ */ import_react4.default.createElement(import_material5.Container, null, /* @__PURE__ */ import_react4.default.createElement(import_material5.Grid, {
+    container: true,
+    justifyContent: "center",
+    alignItems: "center",
+    sx: {
+      alignItems: {
+        xs: "center"
+      },
+      justifyContent: {
+        xs: "center"
+      }
     }
-  );
-};
+  }, /* @__PURE__ */ import_react4.default.createElement(import_material5.Grid, {
+    item: true,
+    xs: 12,
+    sm: 8,
+    md: backgroundImage ? 6 : 8,
+    lg: backgroundImage ? 6 : 8
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexGrowCol, {
+    paddingY: 2,
+    sx: {
+      alignItems: {
+        xs: backgroundImage && !isMobile ? "flex-start" : "center"
+      }
+    }
+  }, /* @__PURE__ */ import_react4.default.createElement(import_material5.Typography, {
+    variant: "h1",
+    component: "h1",
+    gutterBottom: true,
+    textAlign: backgroundImage && !isMobile ? "left" : "center"
+  }, title ? /* @__PURE__ */ import_react4.default.createElement("span", null, `${title} `) : null, gradientTitle ? /* @__PURE__ */ import_react4.default.createElement("span", {
+    className: classes().heading
+  }, " ", ` ${gradientTitle}`) : null, title2 ? /* @__PURE__ */ import_react4.default.createElement("span", null, ` ${title2}`) : null), /* @__PURE__ */ import_react4.default.createElement(import_material5.Typography, {
+    variant: "body1",
+    component: "h2",
+    gutterBottom: true,
+    textAlign: backgroundImage && !isMobile ? "left" : "center"
+  }, desc), /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexGrowRow, {
+    sx: {
+      flexDirection: {
+        lg: "row",
+        xs: "column"
+      }
+    },
+    width: "100%",
+    marginTop: 1
+  }, /* @__PURE__ */ import_react4.default.createElement(ButtonSection, {
+    href: button1Href,
+    to: button1To,
+    buttonText: button1Text
+  }), /* @__PURE__ */ import_react4.default.createElement(ButtonSection, {
+    href: button2Href,
+    to: button2To,
+    buttonText: button2Text
+  })), /* @__PURE__ */ import_react4.default.createElement(SubLinkSection, {
+    subLinkIcon,
+    subLinkText1,
+    subLinkText2,
+    subLinkPath,
+    backgroundImageAlignment: backgroundImage ? true : false
+  }))), /* @__PURE__ */ import_react4.default.createElement(import_material5.Grid, {
+    item: true,
+    xs: 12,
+    md: 6
+  }, heroImage ? /* @__PURE__ */ import_react4.default.createElement("img", {
+    src: heroImage,
+    width: "100%"
+  }) : null))));
+}, "BasicHero");
 
 // src/components/Ellipsize.tsx
 var import_material6 = require("@mui/material");
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react5 = __toESM(require("react"), 1);
 var ComponentName = "Ellipsize";
 var EllipsizeRoot = (0, import_material6.styled)(import_material6.Box, {
   name: ComponentName,
-  shouldForwardProp: (prop) => prop !== "beforeLineHeight",
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "beforeLineHeight", "shouldForwardProp"),
   slot: "Root"
 })(({ beforeLineHeight }) => ({
   "&": {
@@ -365,7 +387,9 @@ var EllipsizeRoot = (0, import_material6.styled)(import_material6.Box, {
       float: "left",
       visibility: "hidden",
       // since we are `display: block`, lineHeight is the height
-      ...beforeLineHeight && { lineHeight: beforeLineHeight }
+      ...beforeLineHeight && {
+        lineHeight: beforeLineHeight
+      }
     }
   }
 }));
@@ -377,7 +401,7 @@ var EllipsizeInnerWrap = (0, import_material6.styled)(import_material6.Box, {
 }));
 var EllipsizeContentWrap = (0, import_material6.styled)(import_material6.Typography, {
   name: ComponentName,
-  shouldForwardProp: (prop) => prop !== "ellipsisPosition",
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "ellipsisPosition", "shouldForwardProp"),
   slot: "contentWrap"
 })(({ theme, ellipsisPosition, fontFamily }) => {
   return theme.unstable_sx({
@@ -394,36 +418,53 @@ var EllipsizeContentWrap = (0, import_material6.styled)(import_material6.Typogra
     } : {}
   });
 });
-var useClientHeight = () => {
-  const [contentWrapHeight, setContentWrapHeight] = (0, import_react3.useState)();
-  const contentWrapRef = (0, import_react3.useCallback)((node) => {
+var useClientHeight = /* @__PURE__ */ __name(() => {
+  const [contentWrapHeight, setContentWrapHeight] = (0, import_react5.useState)();
+  const contentWrapRef = (0, import_react5.useCallback)((node) => {
     if (node !== null) {
       setContentWrapHeight(node.clientHeight + "px");
     }
   }, []);
-  return { contentWrapHeight, contentWrapRef };
-};
-var EllipsizeBox = (0, import_react3.forwardRef)(
-  ({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
-    const { contentWrapRef, contentWrapHeight } = useClientHeight();
-    const sharedRef = useShareForwardedRef(ref);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EllipsizeRoot, { beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EllipsizeInnerWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EllipsizeContentWrap, { ref: contentWrapRef, component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children }) }) });
-  }
-);
+  return {
+    contentWrapHeight,
+    contentWrapRef
+  };
+}, "useClientHeight");
+var EllipsizeBox = /* @__PURE__ */ (0, import_react5.forwardRef)(({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
+  const { contentWrapRef, contentWrapHeight } = useClientHeight();
+  const sharedRef = useShareForwardedRef(ref);
+  return /* @__PURE__ */ import_react5.default.createElement(EllipsizeRoot, {
+    beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0,
+    ...props,
+    ref
+  }, /* @__PURE__ */ import_react5.default.createElement(EllipsizeInnerWrap, null, /* @__PURE__ */ import_react5.default.createElement(EllipsizeContentWrap, {
+    ref: contentWrapRef,
+    component: "span",
+    ellipsisPosition,
+    variant: "body2",
+    ...typographyProps
+  }, children)));
+});
 EllipsizeBox.displayName = "EllipsizeBox";
 
 // src/components/ErrorBoundary.tsx
 var import_material7 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react4.Component {
+var import_react6 = __toESM(require("react"), 1);
+var ErrorBoundary = class extends import_react6.Component {
+  static {
+    __name(this, "ErrorBoundary");
+  }
   constructor(props) {
     super(props);
-    this.state = { error: void 0 };
+    this.state = {
+      error: void 0
+    };
   }
   static getDerivedStateFromError(error) {
-    return { error };
+    return {
+      error
+    };
   }
   componentDidCatch(error, errorInfo) {
     console.error(`${error}: ${errorInfo}`);
@@ -433,19 +474,13 @@ var ErrorBoundary = class extends import_react4.Component {
       if (this.props.fallbackWithError) {
         return this.props.fallbackWithError(this.state.error);
       }
-      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox2.FlexCol, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material7.Typography, { variant: "h1", children: "Something went wrong." }),
-        this.props.scope && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material7.Typography, { variant: "h2", children: [
-          "[",
-          this.props.scope,
-          "]"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material7.Typography, { variant: "body1", children: [
-          "[",
-          this.state.error?.message,
-          "]"
-        ] })
-      ] });
+      return this.props.fallback ?? /* @__PURE__ */ import_react6.default.createElement(import_react_flexbox2.FlexCol, null, /* @__PURE__ */ import_react6.default.createElement(import_material7.Typography, {
+        variant: "h1"
+      }, "Something went wrong."), this.props.scope && /* @__PURE__ */ import_react6.default.createElement(import_material7.Typography, {
+        variant: "h2"
+      }, "[", this.props.scope, "]"), /* @__PURE__ */ import_react6.default.createElement(import_material7.Typography, {
+        variant: "body1"
+      }, "[", this.state.error?.message, "]"));
     }
     return this.props.children;
   }
@@ -453,79 +488,98 @@ var ErrorBoundary = class extends import_react4.Component {
 
 // src/components/LabeledTextFieldWrapper.tsx
 var import_material8 = require("@mui/material");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var LabeledTextFieldWrapper = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material8.Stack, { flexDirection: "column", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material8.Typography, { gutterBottom: true, variant: "caption", children: label }),
-    children
-  ] });
-};
+var import_react7 = __toESM(require("react"), 1);
+var LabeledTextFieldWrapper = /* @__PURE__ */ __name(({ children, label, ...props }) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_material8.Stack, {
+    flexDirection: "column",
+    ...props
+  }, /* @__PURE__ */ import_react7.default.createElement(import_material8.Typography, {
+    gutterBottom: true,
+    variant: "caption"
+  }, label), children);
+}, "LabeledTextFieldWrapper");
 
 // src/components/ListItemButtonEx.tsx
 var import_material9 = require("@mui/material");
+var import_react8 = __toESM(require("react"), 1);
 var import_react_router_dom = require("react-router-dom");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
+var ListItemButtonExTo = /* @__PURE__ */ __name(({ to, toOptions, onClick, ...props }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
-  const localOnClick = (event) => {
+  const localOnClick = /* @__PURE__ */ __name((event) => {
     onClick?.(event);
     if (to) {
       navigate(to, toOptions);
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material9.ListItemButton, { onClick: localOnClick, ...props });
-};
-var ListItemButtonEx = ({ to, ...props }) => {
-  return to ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material9.ListItemButton, { ...props });
-};
+  }, "localOnClick");
+  return /* @__PURE__ */ import_react8.default.createElement(import_material9.ListItemButton, {
+    onClick: localOnClick,
+    ...props
+  });
+}, "ListItemButtonExTo");
+var ListItemButtonEx = /* @__PURE__ */ __name(({ to, ...props }) => {
+  return to ? /* @__PURE__ */ import_react8.default.createElement(ListItemButtonExTo, {
+    to,
+    ...props
+  }) : /* @__PURE__ */ import_react8.default.createElement(import_material9.ListItemButton, props);
+}, "ListItemButtonEx");
 
 // src/components/LoadResult.tsx
 var import_react_flexbox4 = require("@xylabs/react-flexbox");
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/NotFound.tsx
 var import_material10 = require("@mui/material");
 var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var NotFound = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_flexbox3.FlexGrowCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material10.Typography, { variant: "h2", children: "Sorry!" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material10.Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })
-  ] });
-};
+var import_react9 = __toESM(require("react"), 1);
+var NotFound = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_flexbox3.FlexGrowCol, props, /* @__PURE__ */ import_react9.default.createElement(import_material10.Typography, {
+    variant: "h2"
+  }, "Sorry!"), /* @__PURE__ */ import_react9.default.createElement(import_material10.Typography, {
+    marginY: 3,
+    variant: "body2"
+  }, "Can't find anything here"));
+}, "NotFound");
 
 // src/components/LoadResult.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
 function LoadResult(props) {
   const { notFound, error, searchResult, children } = props;
   if (notFound) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotFound, {});
+    return /* @__PURE__ */ import_react10.default.createElement(NotFound, null);
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
+    return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, children);
   }
-  return searchResult === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_flexbox4.FlexGrowRow, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
+  return searchResult === void 0 ? /* @__PURE__ */ import_react10.default.createElement(import_react_flexbox4.FlexGrowRow, {
+    busy: true,
+    minHeight: "50px"
+  }) : /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, children);
 }
+__name(LoadResult, "LoadResult");
 
 // src/components/Pipe.tsx
 var import_material11 = require("@mui/material");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Pipe = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material11.Typography, { marginX: 1, component: "span", ...props, children: "|" });
-};
+var import_react11 = __toESM(require("react"), 1);
+var Pipe = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ import_react11.default.createElement(import_material11.Typography, {
+    marginX: 1,
+    component: "span",
+    ...props
+  }, "|");
+}, "Pipe");
 
 // src/components/pluginValidation/DataMissing.tsx
 var import_material12 = require("@mui/material");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var PayloadDataMissing = ({ alertBody, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material12.Alert, { severity: "warning", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material12.AlertTitle, { children: "Missing Data" }),
-    alertBody ?? "Payload is missing required data to render correctly"
-  ] });
-};
+var import_react12 = __toESM(require("react"), 1);
+var PayloadDataMissing = /* @__PURE__ */ __name(({ alertBody, ...props }) => {
+  return /* @__PURE__ */ import_react12.default.createElement(import_material12.Alert, {
+    severity: "warning",
+    ...props
+  }, /* @__PURE__ */ import_react12.default.createElement(import_material12.AlertTitle, null, "Missing Data"), alertBody ?? "Payload is missing required data to render correctly");
+}, "PayloadDataMissing");
 
 // src/components/ScrollTableOnSm.tsx
 var import_material13 = require("@mui/material");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react13 = __toESM(require("react"), 1);
 var StyledScrollTableOnSm = (0, import_material13.styled)("div")(({ theme }) => ({
   [theme.breakpoints.down("md")]: {
     overflowX: "scroll"
@@ -533,133 +587,168 @@ var StyledScrollTableOnSm = (0, import_material13.styled)("div")(({ theme }) =>
   display: "flex",
   flexGrow: 1
 }));
-var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledScrollTableOnSm, { children });
+var ScrollTableOnSm = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react13.default.createElement(StyledScrollTableOnSm, null, children), "ScrollTableOnSm");
 
 // src/components/SectionSpacingRow/SectionSpacingRow.tsx
 var import_material14 = require("@mui/material");
 var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_react5 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var SectionSpacingRow = (0, import_react5.forwardRef)(({ children, sx, ...props }, ref) => {
+var import_react14 = __toESM(require("react"), 1);
+var SectionSpacingRow = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, sx, ...props }, ref) => {
   const theme = (0, import_material14.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_flexbox5.FlexGrowRow,
-    {
-      sx: {
-        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
-        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
-        ...sx
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox5.FlexGrowRow, {
+    sx: {
+      paddingBottom: {
+        md: theme.spacing(5),
+        xs: theme.spacing(5)
       },
-      width: "100%",
-      ref,
-      ...props,
-      children
-    }
-  );
+      paddingTop: {
+        md: theme.spacing(5),
+        xs: theme.spacing(5)
+      },
+      ...sx
+    },
+    width: "100%",
+    ref,
+    ...props
+  }, children);
 });
 SectionSpacingRow.displayName = "SectionSpacingRow";
 
 // src/components/TableCell/AddressTableCell.tsx
-var import_react7 = require("react");
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/TableCell/EllipsisTableCell.tsx
 var import_material15 = require("@mui/material");
 var import_react_link2 = require("@xylabs/react-link");
-var import_react6 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react15 = __toESM(require("react"), 1);
 var EllipsisTableCellRoot = (0, import_material15.styled)(import_material15.TableCell, {
   name: "EllipsisTableCell",
-  shouldForwardProp: (prop) => prop !== "width",
+  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "width", "shouldForwardProp"),
   slot: "Root"
 })(({ width = "100%" }) => ({
   width
 }));
-var EllipsisTableCellWithRef = (0, import_react6.forwardRef)(
-  ({ children, href, link = false, to, value, ...props }, ref) => {
-    const data = (0, import_react6.useMemo)(() => {
-      if (children) {
-        return children;
-      }
-      if (href || link || to) {
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_link2.LinkEx, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
-      }
-      return value;
-    }, [children, href, link, to, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
-  }
-);
+var EllipsisTableCellWithRef = /* @__PURE__ */ (0, import_react15.forwardRef)(({ children, href, link = false, to, value, ...props }, ref) => {
+  const data = (0, import_react15.useMemo)(() => {
+    if (children) {
+      return children;
+    }
+    if (href || link || to) {
+      return /* @__PURE__ */ import_react15.default.createElement(import_react_link2.LinkEx, {
+        title: value,
+        to,
+        href,
+        target: href ? "_blank" : void 0
+      }, value);
+    }
+    return value;
+  }, [
+    children,
+    href,
+    link,
+    to,
+    value
+  ]);
+  return /* @__PURE__ */ import_react15.default.createElement(EllipsisTableCellRoot, {
+    ref,
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement(EllipsizeBox, {
+    sx: {
+      cursor: link || to || href ? "pointer" : "inherit"
+    }
+  }, data));
+});
 EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
 var EllipsisTableCell = EllipsisTableCellWithRef;
 
 // src/components/TableCell/AddressTableCell.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var AddressTableCell = (0, import_react7.forwardRef)(({ value, archive, exploreDomain, link, ...props }, ref) => {
+var AddressTableCell = /* @__PURE__ */ (0, import_react16.forwardRef)(({ value, archive, exploreDomain, link, ...props }, ref) => {
   const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : void 0;
   const to = exploreDomain === void 0 && archive ? `/archive/${archive}/address/${value}` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EllipsisTableCell, { value, href, to, ref, link, ...props });
+  return /* @__PURE__ */ import_react16.default.createElement(EllipsisTableCell, {
+    value,
+    href,
+    to,
+    ref,
+    link,
+    ...props
+  });
 });
 AddressTableCell.displayName = "AddressTableCell";
 
 // src/components/TableCell/HashTableCell.tsx
 var import_react_event = require("@xyo-network/react-event");
-var import_react8 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
-  const ref = (0, import_react8.useRef)(null);
+var import_react17 = __toESM(require("react"), 1);
+var HashTableCell = /* @__PURE__ */ __name(({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
+  const ref = (0, import_react17.useRef)(null);
   const [tableCellRef, dispatch] = (0, import_react_event.useEvent)(void 0, ref);
   const hashPath = `/${dataType}/hash/${value}?network=${network ?? "main"}`;
   const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath;
-  const handleCellClick = () => {
+  const handleCellClick = /* @__PURE__ */ __name(() => {
     if (onHashClick) {
       onHashClick(value);
     } else {
       dispatch?.("hash", "click", value);
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    EllipsisTableCell,
-    {
-      onClick: handleCellClick,
-      ref: tableCellRef,
-      value,
-      href: exploreDomain ? `${exploreDomain}${explorePath}}` : void 0,
-      to: exploreDomain ? void 0 : explorePath,
-      ...props
-    }
-  );
-};
+  }, "handleCellClick");
+  return /* @__PURE__ */ import_react17.default.createElement(EllipsisTableCell, {
+    onClick: handleCellClick,
+    ref: tableCellRef,
+    value,
+    href: exploreDomain ? `${exploreDomain}${explorePath}}` : void 0,
+    to: exploreDomain ? void 0 : explorePath,
+    ...props
+  });
+}, "HashTableCell");
 
 // src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
 var import_material16 = require("@mui/material");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ThemeTokenAvatar = ({ ...props }) => {
+var import_react18 = __toESM(require("react"), 1);
+var ThemeTokenAvatar = /* @__PURE__ */ __name(({ ...props }) => {
   const theme = (0, import_material16.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material16.Avatar, { sx: { background: theme.palette.common.white }, ...props });
-};
+  return /* @__PURE__ */ import_react18.default.createElement(import_material16.Avatar, {
+    sx: {
+      background: theme.palette.common.white
+    },
+    ...props
+  });
+}, "ThemeTokenAvatar");
 
 // src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
 var import_material17 = require("@mui/material");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var ThemeTokenAvatarGroup = ({ images, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material17.AvatarGroup, { ...props, children: images?.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeTokenAvatar, { src: image }, index)) });
-};
+var import_react19 = __toESM(require("react"), 1);
+var ThemeTokenAvatarGroup = /* @__PURE__ */ __name(({ images, ...props }) => {
+  return /* @__PURE__ */ import_react19.default.createElement(import_material17.AvatarGroup, props, images?.map((image, index) => /* @__PURE__ */ import_react19.default.createElement(ThemeTokenAvatar, {
+    key: index,
+    src: image
+  })));
+}, "ThemeTokenAvatarGroup");
 
 // src/components/TokenBar/TokenBar.tsx
 var import_material18 = require("@mui/material");
 var import_react_flexbox6 = require("@xylabs/react-flexbox");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var TokenBar = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material18.Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_flexbox6.FlexRow, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material18.Typography, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
-      text1,
-      text1Suffix
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material18.Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
-      text2,
-      text2Suffix
-    ] })
-  ] }) });
-};
+var import_react20 = __toESM(require("react"), 1);
+var TokenBar = /* @__PURE__ */ __name(({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
+  return /* @__PURE__ */ import_react20.default.createElement(import_material18.Paper, {
+    elevation: 0,
+    className: "TokenBar-root",
+    ...props
+  }, /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox6.FlexRow, {
+    justifyContent: "space-between"
+  }, /* @__PURE__ */ import_react20.default.createElement(import_material18.Typography, {
+    variant: "body1",
+    fontWeight: 300,
+    margin: 1,
+    ...text1Props
+  }, text1, text1Suffix), /* @__PURE__ */ import_react20.default.createElement(import_material18.Typography, {
+    variant: "body1",
+    fontWeight: 300,
+    textTransform: "uppercase",
+    color: "gray",
+    margin: 1,
+    ...text2Props
+  }, text2, text2Suffix)));
+}, "TokenBar");
 
 // src/components/TokenData/img/index.ts
 var import_ada = __toESM(require("./ada-JCPSRXND.png"), 1);
@@ -803,124 +892,133 @@ var TokenData = [
 ];
 
 // src/components/TokenData/useGetTokenData.tsx
-var useGetTokenData = (symbols) => {
+var useGetTokenData = /* @__PURE__ */ __name((symbols) => {
   return symbols?.map((symbol) => {
     const additionalTokenData = TokenData.find((x) => x.tokenSymbol === symbol);
     const checkedTokenData = additionalTokenData ?? TokenData[0];
     return checkedTokenData;
   });
-};
+}, "useGetTokenData");
 
 // src/components/TokenSummary/TokenSummary.tsx
 var import_material19 = require("@mui/material");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_material19.CardHeader,
-      {
-        avatar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ThemeTokenAvatar, { src: icon, alt: symbol }),
-        title: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
-        ...props
-      }
-    ),
-    children
-  ] });
-};
+var import_react21 = __toESM(require("react"), 1);
+var TokenSummary = /* @__PURE__ */ __name(({ icon, symbol, symbolElement, children, ...props }) => {
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(import_material19.CardHeader, {
+    avatar: /* @__PURE__ */ import_react21.default.createElement(ThemeTokenAvatar, {
+      src: icon,
+      alt: symbol
+    }),
+    title: /* @__PURE__ */ import_react21.default.createElement(import_material19.Typography, {
+      variant: "h6",
+      fontWeight: 300,
+      textTransform: "uppercase"
+    }, symbolElement ?? symbol),
+    ...props
+  }), children);
+}, "TokenSummary");
 
 // src/components/TypographyEx.tsx
 var import_material20 = require("@mui/material");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var TypographyEx = ({ gradient, ...props }) => {
+var import_react22 = __toESM(require("react"), 1);
+var TypographyEx = /* @__PURE__ */ __name(({ gradient, ...props }) => {
   const { classes } = useGradientStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material20.Typography, { className: gradient === "text" ? classes().heading : void 0, ...props });
-};
+  return /* @__PURE__ */ import_react22.default.createElement(import_material20.Typography, {
+    className: gradient === "text" ? classes().heading : void 0,
+    ...props
+  });
+}, "TypographyEx");
 
 // src/contexts/contextEx/create.ts
-var import_react9 = require("react");
-var createContextEx = () => (0, import_react9.createContext)({ provided: false });
+var import_react23 = require("react");
+var createContextEx = /* @__PURE__ */ __name(() => (0, import_react23.createContext)({
+  provided: false
+}), "createContextEx");
 
 // src/contexts/contextEx/use.ts
-var import_react10 = require("react");
-var useContextEx = (context, contextName, required = true) => {
-  const { provided, ...props } = (0, import_react10.useContext)(context);
+var import_react24 = require("react");
+var useContextEx = /* @__PURE__ */ __name((context, contextName, required = true) => {
+  const { provided, ...props } = (0, import_react24.useContext)(context);
   if (!provided && required) {
     throw new Error(`use${contextName} can not be used outside of a ${contextName}Context when required=true`);
   }
   return props;
-};
-var useProvided = (context) => {
-  const { provided } = (0, import_react10.useContext)(context);
+}, "useContextEx");
+var useProvided = /* @__PURE__ */ __name((context) => {
+  const { provided } = (0, import_react24.useContext)(context);
   return provided;
-};
+}, "useProvided");
 
-// src/contexts/diviner/Context.tsx
-var ResolvedDivinerContext = () => createContextEx();
+// src/contexts/diviner/Context.ts
+var ResolvedDivinerContext = /* @__PURE__ */ __name(() => createContextEx(), "ResolvedDivinerContext");
 
 // src/contexts/diviner/Provider.tsx
-var import_react11 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, children, context }) => {
-  const [diviner, setDiviner] = (0, import_react11.useState)(divinerProp);
-  (0, import_react11.useEffect)(() => {
+var import_react25 = __toESM(require("react"), 1);
+var ResolvedDivinerProvider = /* @__PURE__ */ __name(({ diviner: divinerProp, required = false, children, context }) => {
+  const [diviner, setDiviner] = (0, import_react25.useState)(divinerProp);
+  (0, import_react25.useEffect)(() => {
     if (divinerProp) {
       setDiviner(divinerProp);
     }
-  }, [divinerProp, setDiviner]);
-  const resolveDiviner = () => {
-    if (divinerProp) {
-      return diviner === divinerProp ? diviner : void 0;
-    } else {
-      return diviner;
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    context.Provider,
-    {
-      value: {
-        diviner: resolveDiviner(),
-        provided: true,
-        setDiviner
-      },
-      children: diviner ? children : required ? null : children
-    }
-  );
-};
+  }, [
+    divinerProp,
+    setDiviner
+  ]);
+  const value = (0, import_react25.useMemo)(() => {
+    const resolveDiviner = /* @__PURE__ */ __name(() => {
+      if (divinerProp) {
+        return diviner === divinerProp ? diviner : void 0;
+      } else {
+        return diviner;
+      }
+    }, "resolveDiviner");
+    return {
+      diviner: resolveDiviner(),
+      provided: true,
+      setDiviner
+    };
+  }, [
+    setDiviner,
+    divinerProp
+  ]);
+  return /* @__PURE__ */ import_react25.default.createElement(context.Provider, {
+    value
+  }, diviner ? children : required ? null : children);
+}, "ResolvedDivinerProvider");
 
 // src/contexts/ListMode/Context.ts
 var ListModeContext = createContextEx();
 
 // src/contexts/ListMode/Provider.tsx
-var import_react12 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var ListModeProvider = ({ children, defaultListMode }) => {
-  const [listMode, setListMode] = (0, import_react12.useState)(defaultListMode ?? "default");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    ListModeContext.Provider,
-    {
-      value: {
-        listMode,
-        provided: true,
-        setListMode
-      },
-      children
-    }
-  );
-};
+var import_react26 = __toESM(require("react"), 1);
+var ListModeProvider = /* @__PURE__ */ __name(({ children, defaultListMode }) => {
+  const [listMode, setListMode] = (0, import_react26.useState)(defaultListMode ?? "default");
+  const value = (0, import_react26.useMemo)(() => ({
+    listMode,
+    provided: true,
+    setListMode
+  }), [
+    listMode,
+    setListMode
+  ]);
+  return /* @__PURE__ */ import_react26.default.createElement(ListModeContext.Provider, {
+    value
+  }, children);
+}, "ListModeProvider");
 
 // src/contexts/ListMode/use.ts
-var useListMode = (required = false) => {
+var useListMode = /* @__PURE__ */ __name((required = false) => {
   return useContextEx(ListModeContext, "ListMode", required);
-};
+}, "useListMode");
 
 // src/lib/assertDefinedEx.ts
-var assertDefinedEx = (expr, message) => {
+var assertDefinedEx = /* @__PURE__ */ __name((expr, message) => {
   if (expr !== null && expr !== void 0) return expr;
   throw new Error(message);
-};
+}, "assertDefinedEx");
 
 // src/lib/getActualPaddingX.ts
-var parseMeausureString = (measure, absolute) => {
+var parseMeausureString = /* @__PURE__ */ __name((measure, absolute) => {
   if (measure !== void 0 && measure !== null && measure.length > 0) {
     if (measure.endsWith("px")) {
       return Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2)));
@@ -936,8 +1034,8 @@ var parseMeausureString = (measure, absolute) => {
     }
     throw new Error(`Error Parsing Measure [${measure}]`);
   }
-};
-var parsePadding = (padding) => {
+}, "parseMeausureString");
+var parsePadding = /* @__PURE__ */ __name((padding) => {
   const parts = padding.split(" ");
   switch (parts.length) {
     case 4: {
@@ -972,29 +1070,53 @@ var parsePadding = (padding) => {
       };
     }
   }
-};
-var getActualPaddingX = (element) => {
+}, "parsePadding");
+var getActualPaddingX = /* @__PURE__ */ __name((element) => {
   const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue("padding"));
   const paddingLeft = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue("padding-left") ?? padding?.left, element.clientWidth) ?? 0;
   const paddingRight = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue("padding-right") ?? padding?.right, element.clientWidth) ?? 0;
   return paddingLeft + paddingRight;
-};
+}, "getActualPaddingX");
 
 // src/lib/networkComponents.tsx
 var import_icons_material = require("@mui/icons-material");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react27 = __toESM(require("react"), 1);
 var networkComponents = [
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.HubRounded, { ...props }), name: "Node", slug: "node" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.TimerRounded, { ...props }), name: "Sentinel", slug: "sentinel" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.InsertLinkRounded, { ...props }), name: "Bridge", slug: "bridge" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.Inventory2Rounded, { ...props }), name: "Archivist", slug: "archivist" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.BubbleChartRounded, { ...props }), name: "Diviner", slug: "diviner" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.VisibilityRounded, { ...props }), name: "Witness", slug: "witness" }
+  {
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react27.default.createElement(import_icons_material.HubRounded, props), "icon"),
+    name: "Node",
+    slug: "node"
+  },
+  {
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react27.default.createElement(import_icons_material.TimerRounded, props), "icon"),
+    name: "Sentinel",
+    slug: "sentinel"
+  },
+  {
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react27.default.createElement(import_icons_material.InsertLinkRounded, props), "icon"),
+    name: "Bridge",
+    slug: "bridge"
+  },
+  {
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react27.default.createElement(import_icons_material.Inventory2Rounded, props), "icon"),
+    name: "Archivist",
+    slug: "archivist"
+  },
+  {
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react27.default.createElement(import_icons_material.BubbleChartRounded, props), "icon"),
+    name: "Diviner",
+    slug: "diviner"
+  },
+  {
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react27.default.createElement(import_icons_material.VisibilityRounded, props), "icon"),
+    name: "Witness",
+    slug: "witness"
+  }
 ];
-var findNetworkComponentIndex = (slug) => {
+var findNetworkComponentIndex = /* @__PURE__ */ __name((slug) => {
   return networkComponents.findIndex((info) => info.slug === slug);
-};
-var findNetworkComponent = (slug) => {
+}, "findNetworkComponentIndex");
+var findNetworkComponent = /* @__PURE__ */ __name((slug) => {
   return networkComponents.find((info) => info.slug === slug);
-};
+}, "findNetworkComponent");
 //# sourceMappingURL=index.cjs.map