@xyo-network/react-shared 7.5.8 → 7.5.11

package/dist/browser/index.mjs

@@ -1,32 +1,28 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/Ampersand.tsx
 import { Typography } from "@mui/material";
-import React from "react";
-var Ampersand = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React.createElement(Typography, {
-    marginX: 1,
-    component: "span",
-    ...props
-  }, "&");
-}, "Ampersand");
+import { jsx } from "react/jsx-runtime";
+var Ampersand = (props) => {
+  return /* @__PURE__ */ jsx(Typography, { marginX: 1, component: "span", ...props, children: "&" });
+};
 
 // src/components/BasicHero/BasicHero.tsx
-import { Container, Grid, styled, Typography as Typography2 } from "@mui/material";
+import {
+  Container,
+  Grid,
+  styled,
+  Typography as Typography2
+} from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexGrowCol, FlexGrowRow } from "@xylabs/react-flexbox";
 import { LinkEx } from "@xylabs/react-link";
 import { useIsSmall } from "@xylabs/react-theme";
-import React2 from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/hooks/GradientStyles/GradientStyles.tsx
 import { useIsDark } from "@xylabs/react-theme";
-var colorfulGradientLightMode = /* @__PURE__ */ __name(() => {
+var colorfulGradientLightMode = () => {
   return {
-    background: {
-      backgroundImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)"
-    },
+    background: { backgroundImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)" },
     border: {
       borderImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
       borderImageSlice: 1,
@@ -42,12 +38,10 @@ var colorfulGradientLightMode = /* @__PURE__ */ __name(() => {
       display: "inline-block"
     }
   };
-}, "colorfulGradientLightMode");
-var colorfulGradientDarkMode = /* @__PURE__ */ __name(() => {
+};
+var colorfulGradientDarkMode = () => {
   return {
-    background: {
-      backgroundImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)"
-    },
+    background: { backgroundImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)" },
     border: {
       borderImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
       borderImageSlice: 1,
@@ -63,19 +57,19 @@ var colorfulGradientDarkMode = /* @__PURE__ */ __name(() => {
       display: "inline-block"
     }
   };
-}, "colorfulGradientDarkMode");
-var useGradientStyles = /* @__PURE__ */ __name(() => {
+};
+var useGradientStyles = () => {
   const dark = useIsDark();
   const styles = dark ? colorfulGradientDarkMode() : colorfulGradientLightMode();
   return styles;
-}, "useGradientStyles");
+};
 
 // src/hooks/payload/useBoundWitnessValidate.tsx
 import { usePromise } from "@xylabs/react-promise";
 import { assertEx } from "@xylabs/sdk-js";
 import { BoundWitnessValidator } from "@xyo-network/boundwitness-validator";
 import { isAnyPayload } from "@xyo-network/payload-model";
-var useValidateBoundWitness = /* @__PURE__ */ __name((input) => {
+var useValidateBoundWitness = (input) => {
   const [output, validationError] = usePromise(async () => {
     if (!input) return;
     const object = JSON.parse(input);
@@ -85,79 +79,58 @@ var useValidateBoundWitness = /* @__PURE__ */ __name((input) => {
       payload: validPayload,
       errors: errors2
     };
-  }, [
-    input
-  ]);
+  }, [input]);
   const { payload, errors } = output ?? {};
   return {
     payload,
-    errors: [
-      validationError,
-      ...errors ?? []
-    ].filter((error) => !!error)
+    errors: [validationError, ...errors ?? []].filter((error) => !!error)
   };
-}, "useValidateBoundWitness");
+};
 
 // src/hooks/payload/usePayloadHash.tsx
 import { usePromise as usePromise2 } from "@xylabs/react-promise";
 import { PayloadBuilder } from "@xyo-network/payload-builder";
-var usePayloadHash = /* @__PURE__ */ __name((payload) => {
+var usePayloadHash = (payload) => {
   return usePayloadRootHash(payload);
-}, "usePayloadHash");
-var usePayloadDataHash = /* @__PURE__ */ __name((payload) => {
-  return usePromise2(async () => payload ? await PayloadBuilder.dataHash(payload) : void 0, [
-    payload
-  ])[0];
-}, "usePayloadDataHash");
-var usePayloadRootHash = /* @__PURE__ */ __name((payload) => {
-  return usePromise2(async () => payload ? await PayloadBuilder.hash(payload) : void 0, [
-    payload
-  ])[0];
-}, "usePayloadRootHash");
-var usePayloadHashes = /* @__PURE__ */ __name((payloads) => {
-  return usePromise2(async () => payloads ? await Promise.all(payloads.map(async (payload) => [
-    payload,
-    await PayloadBuilder.dataHash(payload)
-  ])) : void 0, [
-    payloads
-  ])[0];
-}, "usePayloadHashes");
+};
+var usePayloadDataHash = (payload) => {
+  return usePromise2(async () => payload ? await PayloadBuilder.dataHash(payload) : void 0, [payload])[0];
+};
+var usePayloadRootHash = (payload) => {
+  return usePromise2(async () => payload ? await PayloadBuilder.hash(payload) : void 0, [payload])[0];
+};
+var usePayloadHashes = (payloads) => {
+  return usePromise2(
+    async () => payloads ? await Promise.all(payloads.map(async (payload) => [payload, await PayloadBuilder.dataHash(payload)])) : void 0,
+    [payloads]
+  )[0];
+};
 
 // src/hooks/payload/usePayloadValidate.tsx
 import { assertEx as assertEx2 } from "@xylabs/sdk-js";
 import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
 import { isAnyPayload as isAnyPayload2 } from "@xyo-network/payload-model";
 import { useMemo } from "react";
-var usePayloadValidate = /* @__PURE__ */ __name((input) => {
+var usePayloadValidate = (input) => {
   return useMemo(() => {
     if (!input) return {};
     try {
       const object = JSON.parse(input);
       const validPayload = assertEx2(isAnyPayload2(object) ? object : null, () => "Invalid payload");
       const { schema, ...fields } = validPayload;
-      const payload = new PayloadBuilder2({
-        schema
-      }).fields(fields).build();
-      return {
-        payload
-      };
+      const payload = new PayloadBuilder2({ schema }).fields(fields).build();
+      return { payload };
     } catch (error) {
-      return {
-        errors: [
-          error
-        ]
-      };
+      return { errors: [error] };
     }
-  }, [
-    input
-  ]);
-}, "usePayloadValidate");
+  }, [input]);
+};
 
 // src/hooks/useDataState.ts
 import { useState } from "react";
-var useDataState = /* @__PURE__ */ __name((defaultValue) => {
+var useDataState = (defaultValue) => {
   const [state, setState] = useState(defaultValue);
-  const setDataState = /* @__PURE__ */ __name((value) => {
+  const setDataState = (value) => {
     try {
       if (JSON.stringify(value) !== JSON.stringify(state)) {
         setState(value);
@@ -165,19 +138,16 @@ var useDataState = /* @__PURE__ */ __name((defaultValue) => {
     } catch {
       console.error("setDataState failed!  Make sure data type is stringifiable!");
     }
-  }, "setDataState");
-  return [
-    state,
-    setDataState
-  ];
-}, "useDataState");
+  };
+  return [state, setDataState];
+};
 
 // src/hooks/useMediaQuery.ts
 import { useMediaQuery } from "@mui/material";
 
 // src/hooks/useShareForwardRef.ts
 import { useEffect, useRef } from "react";
-var useShareForwardedRef = /* @__PURE__ */ __name((forwardedRef, refresh = 0) => {
+var useShareForwardedRef = (forwardedRef, refresh = 0) => {
   const innerRef = useRef(null);
   useEffect(() => {
     if (!forwardedRef) {
@@ -188,257 +158,315 @@ var useShareForwardedRef = /* @__PURE__ */ __name((forwardedRef, refresh = 0) =>
     } else {
       forwardedRef.current = innerRef.current;
     }
-  }, [
-    forwardedRef,
-    refresh
-  ]);
+  }, [forwardedRef, refresh]);
   return innerRef;
-}, "useShareForwardedRef");
+};
 
 // src/components/BasicHero/BasicHero.tsx
-var SubLinkSection = /* @__PURE__ */ __name(({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
-  return /* @__PURE__ */ React2.createElement(FlexGrowRow, {
-    width: "100%",
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SubLinkSection = ({
+  backgroundImageAlignment,
+  subLinkIcon,
+  subLinkPath,
+  subLinkText1,
+  subLinkText2
+}) => {
+  return /* @__PURE__ */ jsxs(
+    FlexGrowRow,
+    {
+      width: "100%",
+      sx: {
+        flexDirection: { md: "row", xs: "column" },
+        justifyContent: { md: backgroundImageAlignment ? "flex-start" : "center", xs: "center" }
       },
-      justifyContent: {
-        md: backgroundImageAlignment ? "flex-start" : "center",
-        xs: "center"
-      }
+      children: [
+        subLinkIcon ? /* @__PURE__ */ jsxs("span", { children: [
+          subLinkIcon,
+          "\xA0"
+        ] }) : null,
+        /* @__PURE__ */ jsxs(Typography2, { children: [
+          subLinkText1,
+          "\xA0"
+        ] }),
+        /* @__PURE__ */ jsx2(LinkEx, { href: subLinkPath, underline: "always", target: "_blank", color: "inherit", children: /* @__PURE__ */ jsx2(Typography2, { children: subLinkText2 }) })
+      ]
     }
-  }, subLinkIcon ? /* @__PURE__ */ React2.createElement("span", null, subLinkIcon, "\xA0") : null, /* @__PURE__ */ React2.createElement(Typography2, null, subLinkText1, "\xA0"), /* @__PURE__ */ React2.createElement(LinkEx, {
-    href: subLinkPath,
-    underline: "always",
-    target: "_blank",
-    color: "inherit"
-  }, /* @__PURE__ */ React2.createElement(Typography2, null, subLinkText2)));
-}, "SubLinkSection");
-var ButtonSection = /* @__PURE__ */ __name(({ href, to, buttonText }) => {
+  );
+};
+var ButtonSection = ({
+  href,
+  to,
+  buttonText
+}) => {
   const isMobile = useIsSmall();
-  return href ? /* @__PURE__ */ React2.createElement(ButtonEx, {
-    fullWidth: true,
-    marginTop: 1,
-    marginBottom: 1,
-    marginRight: isMobile ? 2 : 1,
-    marginLeft: isMobile ? 2 : 0,
-    target: href ?? "_blank",
-    href,
-    color: "primary",
-    variant: "contained",
-    paddingX: 3,
-    sx: {
-      display: href || to ? "flex" : "none"
+  return href ? /* @__PURE__ */ jsx2(
+    ButtonEx,
+    {
+      fullWidth: true,
+      marginTop: 1,
+      marginBottom: 1,
+      marginRight: isMobile ? 2 : 1,
+      marginLeft: isMobile ? 2 : 0,
+      target: href ?? "_blank",
+      href,
+      color: "primary",
+      variant: "contained",
+      paddingX: 3,
+      sx: { display: href || to ? "flex" : "none" },
+      children: buttonText
     }
-  }, buttonText) : to ? /* @__PURE__ */ React2.createElement(ButtonEx, {
-    fullWidth: true,
-    marginTop: 1,
-    marginBottom: 1,
-    marginRight: isMobile ? 2 : 1,
-    marginLeft: isMobile ? 2 : 0,
-    to,
-    color: "primary",
-    variant: "contained",
-    paddingX: 3,
-    sx: {
-      display: href || to ? "flex" : "none"
+  ) : to ? /* @__PURE__ */ jsx2(
+    ButtonEx,
+    {
+      fullWidth: true,
+      marginTop: 1,
+      marginBottom: 1,
+      marginRight: isMobile ? 2 : 1,
+      marginLeft: isMobile ? 2 : 0,
+      to,
+      color: "primary",
+      variant: "contained",
+      paddingX: 3,
+      sx: { display: href || to ? "flex" : "none" },
+      children: buttonText
     }
-  }, buttonText) : /* @__PURE__ */ React2.createElement(ButtonEx, {
-    fullWidth: true,
-    marginTop: 1,
-    marginBottom: 1,
-    marginRight: isMobile ? 2 : 1,
-    marginLeft: isMobile ? 2 : 0,
-    color: "primary",
-    variant: "contained",
-    paddingX: 3,
-    sx: {
-      display: href || to ? "flex" : "none"
+  ) : /* @__PURE__ */ jsx2(
+    ButtonEx,
+    {
+      fullWidth: true,
+      marginTop: 1,
+      marginBottom: 1,
+      marginRight: isMobile ? 2 : 1,
+      marginLeft: isMobile ? 2 : 0,
+      color: "primary",
+      variant: "contained",
+      paddingX: 3,
+      sx: { display: href || to ? "flex" : "none" },
+      children: buttonText
     }
-  }, 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 }) => {
+  );
+};
+var BasicHero = ({
+  backgroundImage,
+  title,
+  gradientTitle,
+  backgroundColor,
+  textColor,
+  desc,
+  heroImage,
+  title2,
+  subLinkText1,
+  subLinkText2,
+  subLinkPath,
+  button1Text,
+  button2Text,
+  button2To,
+  button1To,
+  button2Href,
+  button1Href,
+  subLinkIcon,
+  sx,
+  ...props
+  // eslint-disable-next-line complexity
+}) => {
   const isMobile = useIsSmall();
   const styles = useGradientStyles();
-  const StyledSpan = styled("span")({
-    ...styles.heading
-  });
-  return /* @__PURE__ */ React2.createElement(FlexGrowCol, {
-    sx: {
-      backgroundImage: `url(${backgroundImage})`,
-      backgroundPosition: {
-        lg: "bottom",
-        md: "center left",
-        xs: "top left"
+  const StyledSpan = useMemo2(() => styled("span")({ ...styles.heading }), [styles.heading]);
+  return /* @__PURE__ */ jsx2(
+    FlexGrowCol,
+    {
+      sx: {
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundPosition: {
+          lg: "bottom",
+          md: "center left",
+          xs: "top left"
+        },
+        minHeight: {
+          md: "500px",
+          sm: "400px",
+          xs: "200px"
+        },
+        ...sx
       },
-      minHeight: {
-        md: "500px",
-        sm: "400px",
-        xs: "200px"
+      style: {
+        backgroundColor: backgroundColor ?? "",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        color: textColor ?? ""
       },
-      ...sx
-    },
-    style: {
-      backgroundColor: backgroundColor ?? "",
-      backgroundRepeat: "no-repeat",
-      backgroundSize: "cover",
-      color: textColor ?? ""
-    },
-    ...props
-  }, /* @__PURE__ */ React2.createElement(Container, null, /* @__PURE__ */ React2.createElement(Grid, {
-    container: true,
-    justifyContent: "center",
-    alignItems: "center",
-    sx: {
-      alignItems: {
-        xs: "center"
-      },
-      justifyContent: {
-        xs: "center"
-      }
-    }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    size: {
-      xs: 12,
-      sm: 8,
-      md: backgroundImage ? 6 : 8,
-      lg: backgroundImage ? 6 : 8
-    }
-  }, /* @__PURE__ */ React2.createElement(FlexGrowCol, {
-    paddingY: 2,
-    sx: {
-      alignItems: {
-        xs: backgroundImage && !isMobile ? "flex-start" : "center"
-      }
-    }
-  }, /* @__PURE__ */ React2.createElement(Typography2, {
-    variant: "h1",
-    component: "h1",
-    gutterBottom: true,
-    textAlign: backgroundImage && !isMobile ? "left" : "center"
-  }, title ? /* @__PURE__ */ React2.createElement("span", null, `${title} `) : null, gradientTitle ? /* @__PURE__ */ React2.createElement(StyledSpan, null, " ", ` ${gradientTitle}`) : null, title2 ? /* @__PURE__ */ React2.createElement("span", null, ` ${title2}`) : null), /* @__PURE__ */ React2.createElement(Typography2, {
-    variant: "body1",
-    component: "h2",
-    gutterBottom: true,
-    textAlign: backgroundImage && !isMobile ? "left" : "center"
-  }, desc), /* @__PURE__ */ React2.createElement(FlexGrowRow, {
-    sx: {
-      flexDirection: {
-        lg: "row",
-        xs: "column"
-      }
-    },
-    width: "100%",
-    marginTop: 1
-  }, button1Href ? /* @__PURE__ */ React2.createElement(ButtonSection, {
-    href: button1Href,
-    buttonText: button1Text
-  }) : button1To ? /* @__PURE__ */ React2.createElement(ButtonSection, {
-    to: button1To,
-    buttonText: button1Text
-  }) : /* @__PURE__ */ React2.createElement(ButtonSection, {
-    buttonText: button1Text
-  }), button2Href ? /* @__PURE__ */ React2.createElement(ButtonSection, {
-    href: button2Href,
-    buttonText: button2Text
-  }) : button2To ? /* @__PURE__ */ React2.createElement(ButtonSection, {
-    to: button2To,
-    buttonText: button2Text
-  }) : /* @__PURE__ */ React2.createElement(ButtonSection, {
-    buttonText: button2Text
-  })), /* @__PURE__ */ React2.createElement(SubLinkSection, {
-    subLinkIcon,
-    subLinkText1,
-    subLinkText2,
-    subLinkPath,
-    backgroundImageAlignment: backgroundImage ? true : false
-  }))), /* @__PURE__ */ React2.createElement(Grid, {
-    size: {
-      xs: 12,
-      md: 6
+      ...props,
+      children: /* @__PURE__ */ jsx2(Container, { children: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          container: true,
+          justifyContent: "center",
+          alignItems: "center",
+          sx: {
+            alignItems: { xs: "center" },
+            justifyContent: { xs: "center" }
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              Grid,
+              {
+                size: {
+                  xs: 12,
+                  sm: 8,
+                  md: backgroundImage ? 6 : 8,
+                  lg: backgroundImage ? 6 : 8
+                },
+                children: /* @__PURE__ */ jsxs(FlexGrowCol, { paddingY: 2, sx: { alignItems: { xs: backgroundImage && !isMobile ? "flex-start" : "center" } }, children: [
+                  /* @__PURE__ */ jsxs(Typography2, { variant: "h1", component: "h1", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: [
+                    title ? /* @__PURE__ */ jsx2("span", { children: `${title} ` }) : null,
+                    gradientTitle ? /* @__PURE__ */ jsxs(StyledSpan, { children: [
+                      " ",
+                      ` ${gradientTitle}`
+                    ] }) : null,
+                    title2 ? /* @__PURE__ */ jsx2("span", { children: ` ${title2}` }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx2(Typography2, { variant: "body1", component: "h2", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: desc }),
+                  /* @__PURE__ */ jsxs(
+                    FlexGrowRow,
+                    {
+                      sx: { flexDirection: { lg: "row", xs: "column" } },
+                      width: "100%",
+                      marginTop: 1,
+                      children: [
+                        button1Href ? /* @__PURE__ */ jsx2(ButtonSection, { href: button1Href, buttonText: button1Text }) : button1To ? /* @__PURE__ */ jsx2(ButtonSection, { to: button1To, buttonText: button1Text }) : /* @__PURE__ */ jsx2(ButtonSection, { buttonText: button1Text }),
+                        button2Href ? /* @__PURE__ */ jsx2(ButtonSection, { href: button2Href, buttonText: button2Text }) : button2To ? /* @__PURE__ */ jsx2(ButtonSection, { to: button2To, buttonText: button2Text }) : /* @__PURE__ */ jsx2(ButtonSection, { buttonText: button2Text })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    SubLinkSection,
+                    {
+                      subLinkIcon,
+                      subLinkText1,
+                      subLinkText2,
+                      subLinkPath,
+                      backgroundImageAlignment: backgroundImage ? true : false
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx2(Grid, { size: { xs: 12, md: 6 }, children: heroImage ? /* @__PURE__ */ jsx2("img", { src: heroImage, width: "100%" }) : null })
+          ]
+        }
+      ) })
     }
-  }, heroImage ? /* @__PURE__ */ React2.createElement("img", {
-    src: heroImage,
-    width: "100%"
-  }) : null))));
-}, "BasicHero");
+  );
+};
 
 // src/components/bigint/FixedPointPopover.tsx
-import { FormHelperText, Popover, TextField } from "@mui/material";
-import React3 from "react";
-var FixedPointPopover = /* @__PURE__ */ __name(({ fixedPoint, minFixedPoint: minimumPoint, onFixedPointChange, ...props }) => {
-  const handleChange = /* @__PURE__ */ __name((event) => {
+import {
+  FormHelperText,
+  Popover,
+  TextField
+} from "@mui/material";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FixedPointPopover = ({
+  fixedPoint,
+  minFixedPoint: minimumPoint,
+  onFixedPointChange,
+  ...props
+}) => {
+  const handleChange = (event) => {
     const fixedPointInteger = Number.parseInt(event.target.value, 10);
     if (Number.isNaN(fixedPointInteger)) return;
     onFixedPointChange?.(fixedPointInteger);
-  }, "handleChange");
-  return /* @__PURE__ */ React3.createElement(Popover, {
-    slotProps: {
-      paper: {
-        sx: {
-          p: 2
-        }
-      }
-    },
-    ...props
-  }, /* @__PURE__ */ React3.createElement(TextField, {
-    slotProps: {
-      htmlInput: {
-        min: minimumPoint
-      }
-    },
-    value: fixedPoint,
-    onChange: handleChange,
-    type: "number"
-  }), /* @__PURE__ */ React3.createElement(FormHelperText, null, "Set the Fixed Point"));
-}, "FixedPointPopover");
+  };
+  return /* @__PURE__ */ jsxs2(Popover, { slotProps: { paper: { sx: { p: 2 } } }, ...props, children: [
+    /* @__PURE__ */ jsx3(TextField, { slotProps: { htmlInput: { min: minimumPoint } }, value: fixedPoint, onChange: handleChange, type: "number" }),
+    /* @__PURE__ */ jsx3(FormHelperText, { children: "Set the Fixed Point" })
+  ] });
+};
 
 // src/components/bigint/helpers/formatBigIntInput.ts
-var formatBigIntInput = /* @__PURE__ */ __name((rawValue) => {
+var formatBigIntInput = (rawValue) => {
   const filteredValue = rawValue.replaceAll(/[^\d.]/g, "");
   if (filteredValue.split(".").length > 2) return;
   return filteredValue;
-}, "formatBigIntInput");
+};
 
 // src/components/bigint/TextField.tsx
-import { FormControl, FormHelperText as FormHelperText2, TextField as TextField2 } from "@mui/material";
+import {
+  FormControl,
+  FormHelperText as FormHelperText2,
+  TextField as TextField2
+} from "@mui/material";
 import { isDefined, toFixedPoint } from "@xylabs/sdk-js";
-import React5, { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+import {
+  useEffect as useEffect3,
+  useMemo as useMemo3,
+  useState as useState3
+} from "react";
 
 // src/components/bigint/InputAdornment.tsx
-import { Avatar, IconButton, InputAdornment } from "@mui/material";
-import React4, { useRef as useRef2, useState as useState2 } from "react";
-var FixedPointInputAdornment = /* @__PURE__ */ __name(({ fixedPoint, minFixedPoint, onFixedPointChange, ...props }) => {
+import {
+  Avatar,
+  IconButton,
+  InputAdornment
+} from "@mui/material";
+import {
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FixedPointInputAdornment = ({
+  fixedPoint,
+  minFixedPoint,
+  onFixedPointChange,
+  ...props
+}) => {
   const ref = useRef2(null);
   const [open, setOpen] = useState2(false);
-  return /* @__PURE__ */ React4.createElement(InputAdornment, props, /* @__PURE__ */ React4.createElement(FixedPointPopover, {
-    anchorEl: ref.current,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "left"
-    },
-    fixedPoint,
-    minFixedPoint,
-    onClose: /* @__PURE__ */ __name(() => setOpen(false), "onClose"),
-    onFixedPointChange,
-    open
-  }), /* @__PURE__ */ React4.createElement(IconButton, {
-    size: "small",
-    ref,
-    onClick: /* @__PURE__ */ __name(() => setOpen(!open), "onClick")
-  }, /* @__PURE__ */ React4.createElement(Avatar, {
-    sx: {
-      fontSize: ".75rem",
-      height: "20px",
-      width: "20px"
-    }
-  }, fixedPoint)));
-}, "FixedPointInputAdornment");
+  const [anchorEl, setAnchorEl] = useState2(null);
+  useEffect2(() => {
+    setAnchorEl(ref.current);
+  }, []);
+  return /* @__PURE__ */ jsxs3(InputAdornment, { ...props, children: [
+    /* @__PURE__ */ jsx4(
+      FixedPointPopover,
+      {
+        anchorEl,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        fixedPoint,
+        minFixedPoint,
+        onClose: () => setOpen(false),
+        onFixedPointChange,
+        open
+      }
+    ),
+    /* @__PURE__ */ jsx4(IconButton, { size: "small", ref, onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx4(
+      Avatar,
+      {
+        sx: {
+          fontSize: ".75rem",
+          height: "20px",
+          width: "20px"
+        },
+        children: fixedPoint
+      }
+    ) })
+  ] });
+};
 
 // src/components/bigint/TextField.tsx
-var BigIntTextField = /* @__PURE__ */ __name(({ defaultFixedPoint = 18, defaultRawValue, helperText, hideAdornment, onChangeFixedPoint, onChangeFormatted, onChange, resetValue, ...props }) => {
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var BigIntTextField = ({
+  defaultFixedPoint = 18,
+  defaultRawValue,
+  helperText,
+  hideAdornment,
+  onChangeFixedPoint,
+  onChangeFormatted,
+  onChange,
+  resetValue,
+  ...props
+}) => {
   const [rawValue, setRawValue] = useState3("");
   const [fixedPoint, setFixedPoint] = useState3(defaultFixedPoint);
   const [error, setError] = useState3();
@@ -455,17 +483,17 @@ var BigIntTextField = /* @__PURE__ */ __name(({ defaultFixedPoint = 18, defaultR
       if (formattedValue) setRawValue(formattedValue);
     }
   }
-  const handleChange = /* @__PURE__ */ __name((event) => {
+  const handleChange = (event) => {
     onChange?.(event);
     const formattedValue = formatBigIntInput(event.target.value);
     if (isDefined(formattedValue)) {
       setRawValue(formattedValue);
       onChangeFormatted?.(formattedValue);
     }
-  }, "handleChange");
-  const onFixedPointChange = /* @__PURE__ */ __name((fixedPoint2) => setFixedPoint(fixedPoint2), "onFixedPointChange");
-  useEffect2(() => {
-    const bigIntValue = /* @__PURE__ */ __name(() => {
+  };
+  const onFixedPointChange = (fixedPoint2) => setFixedPoint(fixedPoint2);
+  useEffect3(() => {
+    const bigIntValue = () => {
       if (rawValue) {
         const fixedValue = toFixedPoint(rawValue, fixedPoint);
         setError(void 0);
@@ -479,43 +507,43 @@ var BigIntTextField = /* @__PURE__ */ __name(({ defaultFixedPoint = 18, defaultR
       } else {
         return;
       }
-    }, "bigIntValue");
+    };
     onChangeFixedPoint?.(bigIntValue());
-  }, [
-    fixedPoint,
-    onChangeFixedPoint,
-    rawValue
-  ]);
+  }, [fixedPoint, onChangeFixedPoint, rawValue]);
   const minFixedPoint = rawValue.split(".")[1]?.length;
-  const resolvedHelperText = useMemo2(() => {
+  const resolvedHelperText = useMemo3(() => {
     if (error) return "Cannot convert to BigInt";
     return helperText ?? "Enter a number";
-  }, [
-    helperText,
-    error
-  ]);
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(TextField2, {
-    onChange: handleChange,
-    type: "string",
-    error: Boolean(error),
-    slotProps: {
-      htmlInput: {
-        pattern: "[0-9]*[.]?[0-9]*"
-      },
-      input: {
-        startAdornment: hideAdornment ? null : /* @__PURE__ */ React5.createElement(FixedPointInputAdornment, {
-          position: "start",
-          fixedPoint,
-          minFixedPoint,
-          onFixedPointChange
-        })
+  }, [helperText, error]);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx5(
+      TextField2,
+      {
+        onChange: handleChange,
+        type: "string",
+        error: Boolean(error),
+        slotProps: {
+          htmlInput: { pattern: "[0-9]*[.]?[0-9]*" },
+          input: {
+            startAdornment: hideAdornment ? null : /* @__PURE__ */ jsx5(
+              FixedPointInputAdornment,
+              {
+                position: "start",
+                fixedPoint,
+                minFixedPoint,
+                onFixedPointChange
+              }
+            )
+          }
+        },
+        value: rawValue,
+        ...props
       }
-    },
-    value: rawValue,
-    ...props
-  }), /* @__PURE__ */ React5.createElement(FormHelperText2, null, resolvedHelperText));
-}, "BigIntTextField");
-var WithFormControl = /* @__PURE__ */ __name(({ textFieldProps, ...props }) => /* @__PURE__ */ React5.createElement(FormControl, props, /* @__PURE__ */ React5.createElement(BigIntTextField, textFieldProps)), "WithFormControl");
+    ),
+    /* @__PURE__ */ jsx5(FormHelperText2, { children: resolvedHelperText })
+  ] });
+};
+var WithFormControl = ({ textFieldProps, ...props }) => /* @__PURE__ */ jsx5(FormControl, { ...props, children: /* @__PURE__ */ jsx5(BigIntTextField, { ...textFieldProps }) });
 
 // src/components/bigint/Input.ts
 var BigIntInput = {
@@ -524,12 +552,16 @@ var BigIntInput = {
 };
 
 // src/components/Ellipsize.tsx
-import { Box, styled as styled2, Typography as Typography3 } from "@mui/material";
-import React6 from "react";
+import {
+  Box,
+  styled as styled2,
+  Typography as Typography3
+} from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ComponentName = "Ellipsize";
 var EllipsizeRoot = styled2(Box, {
   name: ComponentName,
-  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "beforeLineHeight", "shouldForwardProp"),
+  shouldForwardProp: (prop) => prop !== "beforeLineHeight",
   slot: "Root"
 })(({ beforeLineHeight = 0 }) => ({
   "&": {
@@ -548,14 +580,16 @@ var EllipsizeRoot = styled2(Box, {
 var EllipsizeInnerWrap = styled2(Box, {
   name: ComponentName,
   slot: "innerWrap"
-})(() => ({
-  position: "relative"
-}));
+})(() => ({ position: "relative" }));
 var EllipsizeContentWrap = styled2(Typography3, {
   name: ComponentName,
-  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "ellipsisPosition", "shouldForwardProp"),
+  shouldForwardProp: (prop) => prop !== "ellipsisPosition",
   slot: "contentWrap"
-})(({ theme, ellipsisPosition, fontFamily }) => {
+})(({
+  theme,
+  ellipsisPosition,
+  fontFamily
+}) => {
   return theme.unstable_sx({
     fontFamily: fontFamily ?? "monospace",
     left: 0,
@@ -570,275 +604,268 @@ var EllipsizeContentWrap = styled2(Typography3, {
     } : {}
   });
 });
-var EllipsizeBox = /* @__PURE__ */ __name(({ ref, innerWrapProps, children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }) => {
+var EllipsizeBox = ({
+  ref,
+  innerWrapProps,
+  children,
+  ellipsisPosition = "start",
+  disableSharedRef,
+  typographyProps,
+  ...props
+}) => {
   const sharedRef = useShareForwardedRef(ref);
   const { sx: innerWrapSx, ...remainingInnerWrapProps } = innerWrapProps ?? {};
-  return /* @__PURE__ */ React6.createElement(EllipsizeRoot, {
-    ref: sharedRef,
-    ...props
-  }, /* @__PURE__ */ React6.createElement(EllipsizeInnerWrap, {
-    ...remainingInnerWrapProps,
-    sx: {
-      alignItems: "center",
-      display: "flex",
-      ...innerWrapSx
+  return /* @__PURE__ */ jsx6(EllipsizeRoot, { ref: sharedRef, ...props, children: /* @__PURE__ */ jsx6(
+    EllipsizeInnerWrap,
+    {
+      ...remainingInnerWrapProps,
+      sx: {
+        alignItems: "center",
+        display: "flex",
+        ...innerWrapSx
+      },
+      children: /* @__PURE__ */ jsx6(EllipsizeContentWrap, { component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children })
     }
-  }, /* @__PURE__ */ React6.createElement(EllipsizeContentWrap, {
-    component: "span",
-    ellipsisPosition,
-    variant: "body2",
-    ...typographyProps
-  }, children)));
-}, "EllipsizeBox");
+  ) });
+};
 EllipsizeBox.displayName = "EllipsizeBox";
 
 // src/components/LabeledTextFieldWrapper.tsx
 import { Stack, Typography as Typography4 } from "@mui/material";
-import React7 from "react";
-var LabeledTextFieldWrapper = /* @__PURE__ */ __name(({ children, label, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(Stack, {
-    flexDirection: "column",
-    ...props
-  }, /* @__PURE__ */ React7.createElement(Typography4, {
-    gutterBottom: true,
-    variant: "caption"
-  }, label), children);
-}, "LabeledTextFieldWrapper");
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var LabeledTextFieldWrapper = ({
+  children,
+  label,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs5(Stack, { flexDirection: "column", ...props, children: [
+    /* @__PURE__ */ jsx7(Typography4, { gutterBottom: true, variant: "caption", children: label }),
+    children
+  ] });
+};
 
 // src/components/ListItemButtonEx.tsx
 import { ListItemButton } from "@mui/material";
-import React8 from "react";
 import { useNavigate } from "react-router-dom";
-var ListItemButtonExTo = /* @__PURE__ */ __name(({ to, toOptions, onClick, ...props }) => {
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ListItemButtonExTo = ({
+  to,
+  toOptions,
+  onClick,
+  ...props
+}) => {
   const navigate = useNavigate();
-  const localOnClick = /* @__PURE__ */ __name((event) => {
+  const localOnClick = (event) => {
     onClick?.(event);
     if (to) {
       void navigate(to, toOptions);
     }
-  }, "localOnClick");
-  return /* @__PURE__ */ React8.createElement(ListItemButton, {
-    onClick: localOnClick,
-    ...props
-  });
-}, "ListItemButtonExTo");
-var ListItemButtonEx = /* @__PURE__ */ __name(({ to, ...props }) => {
-  return to ? /* @__PURE__ */ React8.createElement(ListItemButtonExTo, {
-    to,
-    ...props
-  }) : /* @__PURE__ */ React8.createElement(ListItemButton, props);
-}, "ListItemButtonEx");
+  };
+  return /* @__PURE__ */ jsx8(ListItemButton, { onClick: localOnClick, ...props });
+};
+var ListItemButtonEx = ({ to, ...props }) => {
+  return to ? /* @__PURE__ */ jsx8(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ jsx8(ListItemButton, { ...props });
+};
 
 // src/components/LoadResult.tsx
 import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
-import React10 from "react";
 
 // src/components/NotFound.tsx
 import { Typography as Typography5 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
-import React9 from "react";
-var NotFound = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React9.createElement(FlexGrowCol2, props, /* @__PURE__ */ React9.createElement(Typography5, {
-    variant: "h2"
-  }, "Sorry!"), /* @__PURE__ */ React9.createElement(Typography5, {
-    marginY: 3,
-    variant: "body2"
-  }, "Can't find anything here"));
-}, "NotFound");
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var NotFound = (props) => {
+  return /* @__PURE__ */ jsxs6(FlexGrowCol2, { ...props, children: [
+    /* @__PURE__ */ jsx9(Typography5, { variant: "h2", children: "Sorry!" }),
+    /* @__PURE__ */ jsx9(Typography5, { marginY: 3, variant: "body2", children: "Can't find anything here" })
+  ] });
+};
 
 // src/components/LoadResult.tsx
+import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
 function LoadResult(props) {
-  const { notFound, error, searchResult, children } = props;
+  const {
+    notFound,
+    error,
+    searchResult,
+    children
+  } = props;
   if (notFound) {
-    return /* @__PURE__ */ React10.createElement(NotFound, null);
+    return /* @__PURE__ */ jsx10(NotFound, {});
   }
   if (error) {
-    return /* @__PURE__ */ React10.createElement(React10.Fragment, null, children);
+    return /* @__PURE__ */ jsx10(Fragment2, { children });
   }
-  return searchResult === void 0 ? /* @__PURE__ */ React10.createElement(FlexGrowRow2, {
-    busy: true,
-    minHeight: "50px"
-  }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, children);
+  return searchResult === void 0 ? /* @__PURE__ */ jsx10(FlexGrowRow2, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ jsx10(Fragment2, { children });
 }
-__name(LoadResult, "LoadResult");
 
 // src/components/Pipe.tsx
 import { Typography as Typography6 } from "@mui/material";
-import React11 from "react";
-var Pipe = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React11.createElement(Typography6, {
-    marginX: 1,
-    component: "span",
-    ...props
-  }, "|");
-}, "Pipe");
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Pipe = (props) => {
+  return /* @__PURE__ */ jsx11(Typography6, { marginX: 1, component: "span", ...props, children: "|" });
+};
 
 // src/components/pluginValidation/DataMissing.tsx
 import { Alert, AlertTitle } from "@mui/material";
-import React12 from "react";
-var PayloadDataMissing = /* @__PURE__ */ __name(({ alertBody, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(Alert, {
-    severity: "warning",
-    ...props
-  }, /* @__PURE__ */ React12.createElement(AlertTitle, null, "Missing Data"), alertBody ?? "Payload is missing required data to render correctly");
-}, "PayloadDataMissing");
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var PayloadDataMissing = ({ alertBody, ...props }) => {
+  return /* @__PURE__ */ jsxs7(Alert, { severity: "warning", ...props, children: [
+    /* @__PURE__ */ jsx12(AlertTitle, { children: "Missing Data" }),
+    alertBody ?? "Payload is missing required data to render correctly"
+  ] });
+};
 
 // src/components/ScrollTableOnSm.tsx
 import { styled as styled3 } from "@mui/material";
-import React13 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var StyledScrollTableOnSm = styled3("div")(({ theme }) => ({
-  [theme.breakpoints.down("md")]: {
-    overflowX: "scroll"
-  },
+  [theme.breakpoints.down("md")]: { overflowX: "scroll" },
   display: "flex",
   flexGrow: 1
 }));
-var ScrollTableOnSm = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React13.createElement(StyledScrollTableOnSm, null, children), "ScrollTableOnSm");
+var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx13(StyledScrollTableOnSm, { children });
 
 // src/components/SectionSpacingRow/SectionSpacingRow.tsx
 import { useTheme } from "@mui/material";
 import { FlexGrowRow as FlexGrowRow3 } from "@xylabs/react-flexbox";
-import React14 from "react";
-var SectionSpacingRow = /* @__PURE__ */ __name(({ ref, children, sx, ...props }) => {
+import { jsx as jsx14 } from "react/jsx-runtime";
+var SectionSpacingRow = ({
+  ref,
+  children,
+  sx,
+  ...props
+}) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React14.createElement(FlexGrowRow3, {
-    sx: {
-      paddingBottom: {
-        md: theme.spacing(5),
-        xs: theme.spacing(5)
-      },
-      paddingTop: {
-        md: theme.spacing(5),
-        xs: theme.spacing(5)
+  return /* @__PURE__ */ jsx14(
+    FlexGrowRow3,
+    {
+      sx: {
+        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
+        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
+        ...sx
       },
-      ...sx
-    },
-    width: "100%",
-    ref,
-    ...props
-  }, children);
-}, "SectionSpacingRow");
+      width: "100%",
+      ref,
+      ...props,
+      children
+    }
+  );
+};
 SectionSpacingRow.displayName = "SectionSpacingRow";
 
-// src/components/TableCell/AddressTableCell.tsx
-import React16 from "react";
-
 // src/components/TableCell/EllipsisTableCell.tsx
 import { styled as styled4, TableCell } from "@mui/material";
 import { asLinkHrefOrToProps, LinkEx as LinkEx2 } from "@xylabs/react-link";
-import React15, { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var EllipsisTableCellRoot = styled4(TableCell, {
   name: "EllipsisTableCell",
-  shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "width", "shouldForwardProp"),
+  shouldForwardProp: (prop) => prop !== "width",
   slot: "Root"
-})(({ width = "100%" }) => ({
-  width
-}));
-var EllipsisTableCellWithRef = /* @__PURE__ */ __name(({ ref, children, href, link = false, to, value, ...props }) => {
-  const data = useMemo3(() => {
+})(({ width = "100%" }) => ({ width }));
+var EllipsisTableCellWithRef = ({
+  ref,
+  children,
+  href,
+  link = false,
+  to,
+  value,
+  ...props
+}) => {
+  const data = useMemo4(() => {
     if (children) {
       return children;
     }
     if (href || link || to) {
-      return /* @__PURE__ */ React15.createElement(LinkEx2, {
-        title: value,
-        ...asLinkHrefOrToProps({
-          to,
-          href
-        }),
-        target: href ? "_blank" : void 0
-      }, value);
+      return /* @__PURE__ */ jsx15(LinkEx2, { title: value, ...asLinkHrefOrToProps({ to, href }), target: href ? "_blank" : void 0, children: value });
     }
     return value;
-  }, [
-    children,
-    href,
-    link,
-    to,
-    value
-  ]);
-  return /* @__PURE__ */ React15.createElement(EllipsisTableCellRoot, props, /* @__PURE__ */ React15.createElement(EllipsizeBox, {
-    ref,
-    sx: {
-      cursor: link || to || href ? "pointer" : "inherit"
+  }, [children, href, link, to, value]);
+  return /* @__PURE__ */ jsx15(EllipsisTableCellRoot, { ...props, children: /* @__PURE__ */ jsx15(
+    EllipsizeBox,
+    {
+      ref,
+      sx: { cursor: link || to || href ? "pointer" : "inherit" },
+      children: data
     }
-  }, data));
-}, "EllipsisTableCellWithRef");
+  ) });
+};
 EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
 var EllipsisTableCell = EllipsisTableCellWithRef;
 
 // src/components/TableCell/AddressTableCell.tsx
-var AddressTableCell = /* @__PURE__ */ __name(({ ref, value, archive, exploreDomain, link, ...props }) => {
+import { jsx as jsx16 } from "react/jsx-runtime";
+var AddressTableCell = ({
+  ref,
+  value,
+  archive,
+  exploreDomain,
+  link,
+  ...props
+}) => {
   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__ */ React16.createElement(EllipsisTableCell, {
-    value,
-    href,
-    to,
-    ref,
-    link,
-    ...props
-  });
-}, "AddressTableCell");
+  return /* @__PURE__ */ jsx16(EllipsisTableCell, { value, href, to, ref, link, ...props });
+};
 AddressTableCell.displayName = "AddressTableCell";
 
 // src/components/TableCell/HashTableCell.tsx
-import React17 from "react";
-var HashTableCell = /* @__PURE__ */ __name(({ ref, value, dataType, ...props }) => {
-  return /* @__PURE__ */ React17.createElement(EllipsisTableCell, {
-    value,
-    ...props
-  });
-}, "HashTableCell");
+import { jsx as jsx17 } from "react/jsx-runtime";
+var HashTableCell = ({
+  ref,
+  value,
+  dataType,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx17(
+    EllipsisTableCell,
+    {
+      value,
+      ...props
+    }
+  );
+};
 
 // src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
 import { Avatar as Avatar2, useTheme as useTheme2 } from "@mui/material";
-import React18 from "react";
-var ThemeTokenAvatar = /* @__PURE__ */ __name(({ ...props }) => {
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ThemeTokenAvatar = ({ ...props }) => {
   const theme = useTheme2();
-  return /* @__PURE__ */ React18.createElement(Avatar2, {
-    sx: {
-      background: theme.vars.palette.common.white
-    },
-    ...props
-  });
-}, "ThemeTokenAvatar");
+  return /* @__PURE__ */ jsx18(Avatar2, { sx: { background: theme.vars.palette.common.white }, ...props });
+};
 
 // src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
 import { AvatarGroup } from "@mui/material";
-import React19 from "react";
-var ThemeTokenAvatarGroup = /* @__PURE__ */ __name(({ images, ...props }) => {
-  return /* @__PURE__ */ React19.createElement(AvatarGroup, props, images?.map((image, index) => /* @__PURE__ */ React19.createElement(ThemeTokenAvatar, {
-    key: index,
-    src: image
-  })));
-}, "ThemeTokenAvatarGroup");
+import { jsx as jsx19 } from "react/jsx-runtime";
+var ThemeTokenAvatarGroup = ({ images, ...props }) => {
+  return /* @__PURE__ */ jsx19(AvatarGroup, { ...props, children: images?.map((image) => /* @__PURE__ */ jsx19(ThemeTokenAvatar, { src: image }, image)) });
+};
 
 // src/components/TokenBar/TokenBar.tsx
 import { Paper, Typography as Typography7 } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
-import React20 from "react";
-var TokenBar = /* @__PURE__ */ __name(({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
-  return /* @__PURE__ */ React20.createElement(Paper, {
-    elevation: 0,
-    className: "TokenBar-root",
-    ...props
-  }, /* @__PURE__ */ React20.createElement(FlexRow, {
-    justifyContent: "space-between"
-  }, /* @__PURE__ */ React20.createElement(Typography7, {
-    variant: "body1",
-    fontWeight: 300,
-    margin: 1,
-    ...text1Props
-  }, text1, text1Suffix), /* @__PURE__ */ React20.createElement(Typography7, {
-    variant: "body1",
-    fontWeight: 300,
-    textTransform: "uppercase",
-    color: "gray",
-    margin: 1,
-    ...text2Props
-  }, text2, text2Suffix)));
-}, "TokenBar");
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+var TokenBar = ({
+  text1,
+  text1Props,
+  text1Suffix,
+  text2,
+  text2Props,
+  text2Suffix,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx20(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ jsxs8(FlexRow, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs8(Typography7, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
+      text1,
+      text1Suffix
+    ] }),
+    /* @__PURE__ */ jsxs8(Typography7, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
+      text2,
+      text2Suffix
+    ] })
+  ] }) });
+};
 
 // src/components/TokenData/img/index.ts
 import { default as default2 } from "./ada-JCPSRXND.png";
@@ -991,7 +1018,7 @@ var TokenData = [
 ];
 
 // src/components/TokenData/useGetTokenData.tsx
-var getTokenData = /* @__PURE__ */ __name((symbols) => {
+var getTokenData = (symbols) => {
   return symbols?.map((symbol) => {
     const additionalTokenData = TokenData.find((x) => x.tokenSymbol.toLowerCase() === symbol?.toLowerCase());
     const checkedTokenData = additionalTokenData ?? {
@@ -1004,78 +1031,87 @@ var getTokenData = /* @__PURE__ */ __name((symbols) => {
     };
     return checkedTokenData;
   });
-}, "getTokenData");
+};
 
 // src/components/TokenSummary/TokenSummary.tsx
 import { CardHeader, Typography as Typography8 } from "@mui/material";
-import React21 from "react";
-var TokenSummary = /* @__PURE__ */ __name(({ icon, symbol, symbolElement, children, ...props }) => {
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(CardHeader, {
-    avatar: /* @__PURE__ */ React21.createElement(ThemeTokenAvatar, {
-      src: icon,
-      alt: symbol
-    }),
-    title: /* @__PURE__ */ React21.createElement(Typography8, {
-      variant: "h6",
-      fontWeight: 300,
-      textTransform: "uppercase"
-    }, symbolElement ?? symbol),
-    ...props
-  }), children);
-}, "TokenSummary");
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+var TokenSummary = ({
+  icon,
+  symbol,
+  symbolElement,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx21(
+      CardHeader,
+      {
+        avatar: /* @__PURE__ */ jsx21(ThemeTokenAvatar, { src: icon, alt: symbol }),
+        title: /* @__PURE__ */ jsx21(Typography8, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
+        ...props
+      }
+    ),
+    children
+  ] });
+};
 
 // src/components/TypographyEx.tsx
 import { Typography as Typography9 } from "@mui/material";
-import React22 from "react";
-var TypographyEx = /* @__PURE__ */ __name(({ gradient, ...props }) => {
+import { jsx as jsx22 } from "react/jsx-runtime";
+var TypographyEx = ({ gradient, ...props }) => {
   const styles = useGradientStyles();
-  return /* @__PURE__ */ React22.createElement(Typography9, {
-    style: gradient === "text" ? styles.heading : void 0,
-    ...props
-  });
-}, "TypographyEx");
+  return /* @__PURE__ */ jsx22(Typography9, { style: gradient === "text" ? styles.heading : void 0, ...props });
+};
 
 // src/contexts/diviner/Context.ts
 import { createContextEx } from "@xylabs/react-shared";
-var ResolvedDivinerContext = /* @__PURE__ */ __name(() => createContextEx(), "ResolvedDivinerContext");
+var ResolvedDivinerContext = () => createContextEx();
 
 // src/contexts/diviner/Provider.tsx
 import { useResetState } from "@xylabs/react-hooks";
-import React23, { useMemo as useMemo4 } from "react";
-var ResolvedDivinerProvider = /* @__PURE__ */ __name(({ diviner: divinerProp, required = false, children, context: Context }) => {
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var ResolvedDivinerProvider = ({
+  diviner: divinerProp,
+  required = false,
+  children,
+  context: Context
+}) => {
   const [diviner, setDiviner] = useResetState(divinerProp);
-  const value = useMemo4(() => {
-    const resolveDiviner = /* @__PURE__ */ __name(() => {
+  const value = useMemo5(() => {
+    const resolveDiviner = () => {
       if (divinerProp) {
         return diviner === divinerProp ? diviner : void 0;
       } else {
         return diviner;
       }
-    }, "resolveDiviner");
+    };
     return {
       diviner: resolveDiviner(),
       provided: true,
       setDiviner
     };
-  }, [
-    setDiviner,
-    divinerProp,
-    diviner
-  ]);
-  return /* @__PURE__ */ React23.createElement(Context, {
-    value
-  }, diviner ? children : required ? null : children);
-}, "ResolvedDivinerProvider");
+  }, [setDiviner, divinerProp, diviner]);
+  return /* @__PURE__ */ jsx23(
+    Context,
+    {
+      value,
+      children: diviner ? children : required ? null : children
+    }
+  );
+};
 
 // src/contexts/ListMode/Context.ts
 import { createContextEx as createContextEx2 } from "@xylabs/react-shared";
 var ListModeContext = createContextEx2();
 
 // src/contexts/ListMode/Provider.tsx
-import React24, { useMemo as useMemo5, useState as useState4 } from "react";
-var ListModeProvider = /* @__PURE__ */ __name(({ children, defaultListMode }) => {
+import { useMemo as useMemo6, useState as useState4 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ListModeProvider = ({ children, defaultListMode }) => {
   const [listMode, setListMode] = useState4(defaultListMode ?? "default");
-  const value = useMemo5(() => ({
+  const value = useMemo6(() => ({
     listMode,
     provided: true,
     setListMode
@@ -1083,25 +1119,29 @@ var ListModeProvider = /* @__PURE__ */ __name(({ children, defaultListMode }) =>
     listMode,
     setListMode
   ]);
-  return /* @__PURE__ */ React24.createElement(ListModeContext, {
-    value
-  }, children);
-}, "ListModeProvider");
+  return /* @__PURE__ */ jsx24(
+    ListModeContext,
+    {
+      value,
+      children
+    }
+  );
+};
 
 // src/contexts/ListMode/use.ts
 import { useContextEx } from "@xylabs/react-shared";
-var useListMode = /* @__PURE__ */ __name((required = false) => {
+var useListMode = (required = false) => {
   return useContextEx(ListModeContext, "ListMode", required);
-}, "useListMode");
+};
 
 // src/lib/assertDefinedEx.ts
-var assertDefinedEx = /* @__PURE__ */ __name((expr, message) => {
+var assertDefinedEx = (expr, message) => {
   if (expr !== null && expr !== void 0) return expr;
   throw new Error(message);
-}, "assertDefinedEx");
+};
 
 // src/lib/getActualPaddingX.ts
-var parseMeausureString = /* @__PURE__ */ __name((measure, absolute) => {
+var parseMeausureString = (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)));
@@ -1117,8 +1157,8 @@ var parseMeausureString = /* @__PURE__ */ __name((measure, absolute) => {
     }
     throw new Error(`Error Parsing Measure [${measure}]`);
   }
-}, "parseMeausureString");
-var parsePadding = /* @__PURE__ */ __name((padding) => {
+};
+var parsePadding = (padding) => {
   const parts = padding.split(" ");
   switch (parts.length) {
     case 4: {
@@ -1153,55 +1193,62 @@ var parsePadding = /* @__PURE__ */ __name((padding) => {
       };
     }
   }
-}, "parsePadding");
-var getActualPaddingX = /* @__PURE__ */ __name((element) => {
+};
+var getActualPaddingX = (element) => {
   const padding = parsePadding(globalThis.getComputedStyle(element, null).getPropertyValue("padding"));
   const paddingLeft = parseMeausureString(globalThis.getComputedStyle(element, null).getPropertyValue("padding-left") ?? padding?.left, element.clientWidth) ?? 0;
   const paddingRight = parseMeausureString(globalThis.getComputedStyle(element, null).getPropertyValue("padding-right") ?? padding?.right, element.clientWidth) ?? 0;
   return paddingLeft + paddingRight;
-}, "getActualPaddingX");
+};
 
 // src/lib/networkComponents.tsx
-import { BubbleChartRounded as BubbleChartRoundedIcon, HubRounded as HubRoundedIcon, InsertLinkRounded as InsertLinkRoundedIcon, Inventory2Rounded as Inventory2RoundedIcon, TimerRounded as TimerRoundedIcon, VisibilityRounded as VisibilityRoundedIcon } from "@mui/icons-material";
-import React25 from "react";
+import {
+  BubbleChartRounded as BubbleChartRoundedIcon,
+  HubRounded as HubRoundedIcon,
+  InsertLinkRounded as InsertLinkRoundedIcon,
+  Inventory2Rounded as Inventory2RoundedIcon,
+  TimerRounded as TimerRoundedIcon,
+  VisibilityRounded as VisibilityRoundedIcon
+} from "@mui/icons-material";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var networkComponents = [
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(HubRoundedIcon, props), "icon"),
+    icon: (props) => /* @__PURE__ */ jsx25(HubRoundedIcon, { ...props }),
     name: "Node",
     slug: "node"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(TimerRoundedIcon, props), "icon"),
+    icon: (props) => /* @__PURE__ */ jsx25(TimerRoundedIcon, { ...props }),
     name: "Sentinel",
     slug: "sentinel"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(InsertLinkRoundedIcon, props), "icon"),
+    icon: (props) => /* @__PURE__ */ jsx25(InsertLinkRoundedIcon, { ...props }),
     name: "Bridge",
     slug: "bridge"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(Inventory2RoundedIcon, props), "icon"),
+    icon: (props) => /* @__PURE__ */ jsx25(Inventory2RoundedIcon, { ...props }),
     name: "Archivist",
     slug: "archivist"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(BubbleChartRoundedIcon, props), "icon"),
+    icon: (props) => /* @__PURE__ */ jsx25(BubbleChartRoundedIcon, { ...props }),
     name: "Diviner",
     slug: "diviner"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(VisibilityRoundedIcon, props), "icon"),
+    icon: (props) => /* @__PURE__ */ jsx25(VisibilityRoundedIcon, { ...props }),
     name: "Witness",
     slug: "witness"
   }
 ];
-var findNetworkComponentIndex = /* @__PURE__ */ __name((slug) => {
+var findNetworkComponentIndex = (slug) => {
   return networkComponents.findIndex((info) => info.slug === slug);
-}, "findNetworkComponentIndex");
-var findNetworkComponent = /* @__PURE__ */ __name((slug) => {
+};
+var findNetworkComponent = (slug) => {
   return networkComponents.find((info) => info.slug === slug);
-}, "findNetworkComponent");
+};
 export {
   AddressTableCell,
   Ampersand,