@xyo-network/react-shared 2.61.1 → 2.63.1

package/dist/index.js

@@ -1,1102 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  AddressTableCell: () => AddressTableCell,
-  Ampersand: () => Ampersand,
-  BasicHero: () => BasicHero,
-  EllipsisTableCell: () => EllipsisTableCell,
-  EllipsisTableCellWithRef: () => EllipsisTableCellWithRef,
-  EllipsizeBox: () => EllipsizeBox,
-  ErrorBoundary: () => ErrorBoundary,
-  HashTableCell: () => HashTableCell,
-  ListItemButtonEx: () => ListItemButtonEx,
-  ListItemButtonExTo: () => ListItemButtonExTo,
-  ListModeContext: () => ListModeContext,
-  ListModeProvider: () => ListModeProvider,
-  LoadResult: () => LoadResult,
-  NotFound: () => NotFound,
-  PayloadDataMissing: () => PayloadDataMissing,
-  Pipe: () => Pipe,
-  PixelContext: () => PixelContext,
-  PixelProvider: () => PixelProvider,
-  ResolvedDivinerContext: () => ResolvedDivinerContext,
-  ResolvedDivinerProvider: () => ResolvedDivinerProvider,
-  ScrollTableOnSm: () => ScrollTableOnSm,
-  SectionSpacingRow: () => SectionSpacingRow,
-  ThemeTokenAvatar: () => ThemeTokenAvatar,
-  ThemeTokenAvatarGroup: () => ThemeTokenAvatarGroup,
-  TokenBar: () => TokenBar,
-  TokenData: () => TokenData,
-  TokenSummary: () => TokenSummary,
-  TypographyEx: () => TypographyEx,
-  assertDefinedEx: () => assertDefinedEx,
-  colorfulGradientDarkMode: () => colorfulGradientDarkMode,
-  colorfulGradientLightMode: () => colorfulGradientLightMode,
-  createContextEx: () => createContextEx,
-  findNetworkComponent: () => findNetworkComponent,
-  findNetworkComponentIndex: () => findNetworkComponentIndex,
-  getActualPaddingX: () => getActualPaddingX,
-  networkComponents: () => networkComponents,
-  parseMeausureString: () => parseMeausureString,
-  parsePadding: () => parsePadding,
-  useContextEx: () => useContextEx,
-  useDataState: () => useDataState,
-  useGetTokenData: () => useGetTokenData,
-  useGradientStyles: () => useGradientStyles,
-  useIsMobile: () => useIsMobile,
-  useListMode: () => useListMode,
-  useMediaQuery: () => import_material3.useMediaQuery,
-  usePayloadHash: () => usePayloadHash,
-  usePayloadHashes: () => usePayloadHashes,
-  usePixel: () => usePixel,
-  usePromise: () => usePromise2,
-  useProvided: () => useProvided,
-  useShareForwardedRef: () => useShareForwardedRef
-});
-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: "&" });
-};
-
-// 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");
-
-// src/hooks/GradientStyles/GradientStyles.tsx
-var import_material2 = require("@mui/material");
-var import_styles = require("@mui/styles");
-var colorfulGradientLightMode = () => {
-  return {
-    background: {
-      backgroundImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)"
-    },
-    border: {
-      borderImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
-      borderImageSlice: 1,
-      borderImageSource: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
-      borderRadius: 0,
-      borderStyle: "solid",
-      borderWidth: "2px"
-    },
-    heading: {
-      WebkitBackgroundClip: "text",
-      WebkitTextFillColor: "transparent",
-      background: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
-      display: "inline-block"
-    }
-  };
-};
-var colorfulGradientDarkMode = () => {
-  return {
-    background: {
-      backgroundImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)"
-    },
-    border: {
-      borderImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
-      borderImageSlice: 1,
-      borderImageSource: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
-      borderRadius: 0,
-      borderStyle: "solid",
-      borderWidth: "2px"
-    },
-    heading: {
-      WebkitBackgroundClip: "text",
-      WebkitTextFillColor: "transparent",
-      background: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
-      display: "inline-block"
-    }
-  };
-};
-var useGradientStyles = () => {
-  const theme = (0, import_material2.useTheme)();
-  const styles = theme.palette.mode === "dark" ? colorfulGradientDarkMode() : colorfulGradientLightMode();
-  const classes = (0, import_styles.makeStyles)(styles);
-  return { classes, styles };
-};
-
-// src/hooks/useDataState.ts
-var import_react = require("react");
-var useDataState = (defaultValue) => {
-  const [state, setState] = (0, import_react.useState)(defaultValue);
-  const setDataState = (value) => {
-    try {
-      if (JSON.stringify(value) !== JSON.stringify(state)) {
-        setState(value);
-      }
-    } catch (ex) {
-      console.error("setDataState failed!  Make sure data type is stringifiable!");
-    }
-  };
-  return [state, setDataState];
-};
-
-// src/hooks/useIsMobile.ts
-var import_material4 = require("@mui/material");
-
-// src/hooks/useMediaQuery.ts
-var import_material3 = require("@mui/material");
-
-// src/hooks/useIsMobile.ts
-var useIsMobile = () => {
-  const theme = (0, import_material4.useTheme)();
-  return (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
-};
-
-// src/hooks/usePayloadHash.ts
-var import_react_promise = require("@xylabs/react-promise");
-var import_core = require("@xyo-network/core");
-var usePayloadHash = (payload) => {
-  return (0, import_react_promise.usePromise)(async () => payload ? await import_core.PayloadHasher.hashAsync(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_core.PayloadHasher.hashAsync(payload)])) : void 0,
-    [payloads]
-  )[0];
-};
-
-// src/hooks/usePromise.ts
-var import_react_promise2 = require("@xylabs/react-promise");
-var usePromise2 = import_react_promise2.usePromise;
-
-// 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)(() => {
-    if (!forwardedRef) {
-      return;
-    }
-    if (typeof forwardedRef === "function") {
-      forwardedRef(innerRef.current);
-      return;
-    } else {
-      forwardedRef.current = innerRef.current;
-    }
-  }, [forwardedRef, refresh]);
-  return innerRef;
-};
-
-// 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 ButtonSection = ({ href, to, buttonText }) => {
-  const isMobile = useIsMobile();
-  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
-    }
-  );
-};
-var BasicHero = ({
-  backgroundImage,
-  title,
-  gradientTitle,
-  backgroundColor,
-  textColor,
-  desc,
-  heroImage,
-  title2,
-  subLinkText1,
-  subLinkText2,
-  subLinkPath,
-  button1Text,
-  button2Text,
-  button2To,
-  button1To,
-  button2Href,
-  button1Href,
-  subLinkIcon,
-  sx,
-  ...props
-}) => {
-  const isMobile = useIsMobile();
-  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 ?? {}
-      },
-      style: {
-        backgroundColor: backgroundColor ?? "",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        color: textColor ?? ""
-      },
-      ...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 })
-          ]
-        }
-      ) })
-    }
-  );
-};
-
-// src/components/Ellipsize.tsx
-var import_material6 = require("@mui/material");
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ComponentName = "Ellipsize";
-var EllipsizeRoot = (0, import_material6.styled)(import_material6.Box, {
-  name: ComponentName,
-  shouldForwardProp: (prop) => prop !== "beforeLineHeight",
-  slot: "Root"
-})(({ beforeLineHeight }) => ({
-  "&": {
-    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
-    // the pseudo element with a hidden character establishes the proper height of the content and hides it
-    ":before": {
-      content: "'nbsp;'",
-      display: "block",
-      // take the pseudo element out of the `display: block` flow so it won't push against our actual content
-      float: "left",
-      visibility: "hidden",
-      // since we are `display: block`, lineHeight is the height
-      ...beforeLineHeight && { lineHeight: beforeLineHeight }
-    }
-  }
-}));
-var EllipsizeInnerWrap = (0, import_material6.styled)(import_material6.Box, {
-  name: ComponentName,
-  slot: "innerWrap"
-})(() => ({
-  position: "relative"
-}));
-var EllipsizeContentWrap = (0, import_material6.styled)(import_material6.Typography, {
-  name: ComponentName,
-  shouldForwardProp: (prop) => prop !== "ellipsisPosition",
-  slot: "contentWrap"
-})(({ theme, ellipsisPosition, fontFamily }) => {
-  return theme.unstable_sx({
-    fontFamily: fontFamily ?? "monospace",
-    left: 0,
-    overflow: "hidden",
-    position: "absolute",
-    right: 0,
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    ...ellipsisPosition === "start" ? {
-      direction: "rtl",
-      textAlign: "left"
-    } : {}
-  });
-});
-var useClientHeight = () => {
-  const [contentWrapHeight, setContentWrapHeight] = (0, import_react3.useState)();
-  const contentWrapRef = (0, import_react3.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 }) }) });
-  }
-);
-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 {
-  constructor(props) {
-    super(props);
-    this.state = { error: void 0 };
-  }
-  static getDerivedStateFromError(error) {
-    return { error };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error(`${error}: ${errorInfo}`);
-  }
-  render() {
-    if (this.state.error) {
-      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." }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material7.Typography, { variant: "body1", children: [
-          "[",
-          this.state.error?.message,
-          "]"
-        ] })
-      ] });
-    }
-    return this.props.children;
-  }
-};
-
-// src/components/ListItemButtonEx.tsx
-var import_material8 = require("@mui/material");
-var import_react_router_dom = require("react-router-dom");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
-  const navigate = (0, import_react_router_dom.useNavigate)();
-  const localOnClick = (event) => {
-    onClick?.(event);
-    if (to) {
-      navigate(to, toOptions);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material8.ListItemButton, { onClick: localOnClick, ...props });
-};
-var ListItemButtonEx = ({ to, ...props }) => {
-  if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListItemButtonExTo, { to, ...props });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material8.ListItemButton, { ...props });
-  }
-};
-
-// src/components/LoadResult.tsx
-var import_react_flexbox4 = require("@xylabs/react-flexbox");
-
-// src/components/NotFound.tsx
-var import_material9 = require("@mui/material");
-var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var NotFound = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox3.FlexGrowCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material9.Typography, { variant: "h2", children: "Sorry!" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material9.Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })
-  ] });
-};
-
-// src/components/LoadResult.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function LoadResult(props) {
-  const { notFound, error, searchResult, children } = props;
-  if (notFound) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotFound, {});
-  }
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
-  }
-  if (searchResult === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_flexbox4.FlexGrowRow, { busy: true, minHeight: "50px" });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
-  }
-}
-
-// src/components/Pipe.tsx
-var import_material10 = require("@mui/material");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Pipe = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material10.Typography, { marginX: 1, component: "span", ...props, children: "|" });
-};
-
-// src/components/pluginValidation/DataMissing.tsx
-var import_material11 = require("@mui/material");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var PayloadDataMissing = ({ alertBody, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material11.Alert, { severity: "warning", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material11.AlertTitle, { children: "Missing Data" }),
-    alertBody ?? "Payload is missing required data to render correctly"
-  ] });
-};
-
-// src/components/ScrollTableOnSm.tsx
-var import_material12 = require("@mui/material");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var StyledScrollTableOnSm = (0, import_material12.styled)("div")(({ theme }) => ({
-  [theme.breakpoints.down("md")]: {
-    overflowX: "scroll"
-  },
-  display: "flex",
-  flexGrow: 1
-}));
-var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledScrollTableOnSm, { children });
-
-// src/components/SectionSpacingRow/SectionSpacingRow.tsx
-var import_material13 = require("@mui/material");
-var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_react5 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var SectionSpacingRow = (0, import_react5.forwardRef)(({ children, sx, ...props }, ref) => {
-  const theme = (0, import_material13.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.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
-      },
-      width: "100%",
-      ref,
-      ...props,
-      children
-    }
-  );
-});
-SectionSpacingRow.displayName = "SectionSpacingRow";
-
-// src/components/TableCell/AddressTableCell.tsx
-var import_react7 = require("react");
-
-// src/components/TableCell/EllipsisTableCell.tsx
-var import_material14 = require("@mui/material");
-var import_react_link2 = require("@xylabs/react-link");
-var import_react6 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var EllipsisTableCellRoot = (0, import_material14.styled)(import_material14.TableCell, {
-  name: "EllipsisTableCell",
-  shouldForwardProp: (prop) => prop !== "width",
-  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_runtime12.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_runtime12.jsx)(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
-  }
-);
-EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
-var EllipsisTableCell = EllipsisTableCellWithRef;
-
-// src/components/TableCell/AddressTableCell.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var AddressTableCell = (0, import_react7.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_runtime13.jsx)(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_runtime14 = require("react/jsx-runtime");
-var HashTableCell = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
-  const ref = (0, import_react8.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 = () => {
-    dispatch?.("hash", "click", value);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    EllipsisTableCell,
-    {
-      onClick: handleCellClick,
-      ref: tableCellRef,
-      value,
-      href: exploreDomain ? `${exploreDomain}${explorePath}}` : void 0,
-      to: exploreDomain ? void 0 : explorePath,
-      ...props
-    }
-  );
-};
-
-// src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
-var import_material15 = require("@mui/material");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ThemeTokenAvatar = ({ ...props }) => {
-  const theme = (0, import_material15.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material15.Avatar, { sx: { background: theme.palette.common.white }, ...props });
-};
-
-// src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
-var import_material16 = require("@mui/material");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ThemeTokenAvatarGroup = ({ images, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material16.AvatarGroup, { ...props, children: images?.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ThemeTokenAvatar, { src: image }, index)) });
-};
-
-// src/components/TokenBar/TokenBar.tsx
-var import_material17 = require("@mui/material");
-var import_react_flexbox6 = require("@xylabs/react-flexbox");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TokenBar = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material17.Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_flexbox6.FlexRow, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material17.Typography, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
-      text1,
-      text1Suffix
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material17.Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
-      text2,
-      text2Suffix
-    ] })
-  ] }) });
-};
-
-// src/components/TokenData/img/ada.png
-var ada_default = "./ada-JCPSRXND.png";
-
-// src/components/TokenData/img/btc.png
-var btc_default = "./btc-SRW7TEQV.png";
-
-// src/components/TokenData/img/busd.png
-var busd_default = "./busd-RAN4SWCI.png";
-
-// src/components/TokenData/img/dai.png
-var dai_default = "./dai-FZSM2RYY.png";
-
-// src/components/TokenData/img/dogecoin.png
-var dogecoin_default = "./dogecoin-QOIF7Q5M.png";
-
-// src/components/TokenData/img/dot.png
-var dot_default = "./dot-P5Z7IW2O.png";
-
-// src/components/TokenData/img/ethereum.png
-var ethereum_default = "./ethereum-3SLTXYTT.png";
-
-// src/components/TokenData/img/frax.png
-var frax_default = "./frax-TQDXCCOP.png";
-
-// src/components/TokenData/img/link.png
-var link_default = "./link-THYNVLXG.png";
-
-// src/components/TokenData/img/sol.png
-var sol_default = "./sol-A4J5S4EN.png";
-
-// src/components/TokenData/img/tether.png
-var tether_default = "./tether-3X63FB23.png";
-
-// src/components/TokenData/img/usd-coin.png
-var usd_coin_default = "./usd-coin-UCS44T5B.png";
-
-// src/components/TokenData/img/weth.png
-var weth_default = "./weth-HDGYDSJB.png";
-
-// src/components/TokenData/img/wrapped-bitcoin.png
-var wrapped_bitcoin_default = "./wrapped-bitcoin-TS5QFJLK.png";
-
-// src/components/TokenData/img/xyo.png
-var xyo_default = "./xyo-RLMLL56X.png";
-
-// src/components/TokenData/TokenData.ts
-var TokenData = [
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/multi-collateral-dai/",
-    etherscanLink: "https://etherscan.io/token/0x6b175474e89094c44da98b954eedeac495271d0f",
-    icon: dai_default,
-    readableName: "Dai",
-    tokenSymbol: "dai",
-    uniqueTokenId: "dai"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/weth/",
-    etherscanLink: "https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
-    icon: weth_default,
-    readableName: "Weth",
-    tokenSymbol: "weth",
-    uniqueTokenId: "weth"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/ethereum/",
-    etherscanLink: "n/a",
-    icon: ethereum_default,
-    readableName: "Ethereum",
-    tokenSymbol: "eth",
-    uniqueTokenId: "ethereum"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/bitcoin/",
-    etherscanLink: "n/a",
-    icon: btc_default,
-    readableName: "Bitcoin",
-    tokenSymbol: "btc",
-    uniqueTokenId: "btc"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/xyo/",
-    etherscanLink: "https://etherscan.io/token/0x55296f69f40ea6d20e478533c15a6b08b654e758",
-    icon: xyo_default,
-    readableName: "XYO",
-    tokenSymbol: "xyo",
-    uniqueTokenId: "xyo"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/frax/",
-    etherscanLink: "https://etherscan.io/token/0x853d955acef822db058eb8505911ed77f175b99e",
-    icon: frax_default,
-    readableName: "Frax",
-    tokenSymbol: "frax",
-    uniqueTokenId: "frax"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/wrapped-bitcoin/",
-    etherscanLink: "https://etherscan.io/token/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
-    icon: wrapped_bitcoin_default,
-    readableName: "Wrapped BTC",
-    tokenSymbol: "wbtc",
-    uniqueTokenId: "wbtc"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/usd-coin/",
-    etherscanLink: "https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
-    icon: usd_coin_default,
-    readableName: "USDC",
-    tokenSymbol: "usdc",
-    uniqueTokenId: "usdc"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/tether/",
-    etherscanLink: "https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7",
-    icon: tether_default,
-    readableName: "Tether",
-    tokenSymbol: "usdt",
-    uniqueTokenId: "usdt"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/cardano/",
-    etherscanLink: "https://etherscan.io/token/0xc14777c94229582e5758c5a79b83dde876b9be98",
-    icon: ada_default,
-    readableName: "Cardano",
-    tokenSymbol: "ada",
-    uniqueTokenId: "ada"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/binance-usd/",
-    etherscanLink: "https://etherscan.io/token/0x4Fabb145d64652a948d72533023f6E7A623C7C53",
-    icon: busd_default,
-    readableName: "Binance USD",
-    tokenSymbol: "busd",
-    uniqueTokenId: "busd"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/dogecoin/",
-    etherscanLink: "https://etherscan.io/token/0x7618b5024a6349f9aef10ddfd33e3428c734551e",
-    icon: dogecoin_default,
-    readableName: "Dogecoin",
-    tokenSymbol: "doge",
-    uniqueTokenId: "doge"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/polkadot-new/",
-    etherscanLink: "https://etherscan.io/token/0x2d4fb6dd969992c881d8e534c747cc925d5ba221",
-    icon: dot_default,
-    readableName: "Polkadot",
-    tokenSymbol: "dot",
-    uniqueTokenId: "dot"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/chainlink/",
-    etherscanLink: "https://etherscan.io/token/0x514910771af9ca656af840dff83e8264ecf986ca",
-    icon: link_default,
-    readableName: "ChainLink",
-    tokenSymbol: "link",
-    uniqueTokenId: "link"
-  },
-  {
-    coinmarketcapLink: "https://coinmarketcap.com/currencies/solana/",
-    etherscanLink: "https://etherscan.io/token/0x1f54638b7737193ffd86c19ec51907a7c41755d8",
-    icon: sol_default,
-    readableName: "Solana",
-    tokenSymbol: "sol",
-    uniqueTokenId: "sol"
-  }
-];
-
-// src/components/TokenData/useGetTokenData.tsx
-var useGetTokenData = (symbols) => {
-  return symbols?.map((symbol) => {
-    const additionalTokenData = TokenData.find((x) => x.tokenSymbol === symbol);
-    const checkedTokenData = additionalTokenData ? additionalTokenData : TokenData[0];
-    return checkedTokenData;
-  });
-};
-
-// src/components/TokenSummary/TokenSummary.tsx
-var import_material18 = require("@mui/material");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_material18.CardHeader,
-      {
-        avatar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ThemeTokenAvatar, { src: icon, alt: symbol }),
-        title: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material18.Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
-        ...props
-      }
-    ),
-    children
-  ] });
-};
-
-// src/components/TypographyEx.tsx
-var import_material19 = require("@mui/material");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var TypographyEx = ({ gradient, ...props }) => {
-  const { classes } = useGradientStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material19.Typography, { className: gradient === "text" ? classes().heading : void 0, ...props });
-};
-
-// src/contexts/contextEx/create.ts
-var import_react9 = require("react");
-var createContextEx = () => (0, import_react9.createContext)({ provided: false });
-
-// src/contexts/contextEx/use.ts
-var import_react10 = require("react");
-var useContextEx = (context, contextName, required = true) => {
-  const { provided, ...props } = (0, import_react10.useContext)(context);
-  if (!provided && required) {
-    throw 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);
-  return provided;
-};
-
-// src/contexts/diviner/Context.tsx
-var ResolvedDivinerContext = () => createContextEx();
-
-// src/contexts/diviner/Provider.tsx
-var import_react11 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, children, context }) => {
-  const [diviner, setDiviner] = (0, import_react11.useState)(divinerProp);
-  (0, import_react11.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_runtime20.jsx)(
-    context.Provider,
-    {
-      value: {
-        diviner: resolveDiviner(),
-        provided: true,
-        setDiviner
-      },
-      children: diviner ? children : required ? null : children
-    }
-  );
-};
-
-// src/contexts/ListMode/Context.ts
-var ListModeContext = createContextEx();
-
-// src/contexts/ListMode/Provider.tsx
-var import_react12 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ListModeProvider = ({ children, defaultListMode }) => {
-  const [listMode, setListMode] = (0, import_react12.useState)(defaultListMode ?? "default");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    ListModeContext.Provider,
-    {
-      value: {
-        listMode,
-        provided: true,
-        setListMode
-      },
-      children
-    }
-  );
-};
-
-// src/contexts/ListMode/use.ts
-var useListMode = (required = false) => {
-  return useContextEx(ListModeContext, "ListMode", required);
-};
-
-// src/contexts/Pixel/Context.ts
-var PixelContext = createContextEx();
-
-// src/contexts/Pixel/Provider.tsx
-var import_pixel = require("@xylabs/pixel");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var PixelProvider = (props) => {
-  const { children, id } = props;
-  import_pixel.XyPixel.init(id);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    PixelContext.Provider,
-    {
-      value: {
-        pixel: import_pixel.XyPixel.instance,
-        provided: true
-      },
-      children
-    }
-  );
-};
-
-// src/contexts/Pixel/use.ts
-var usePixel = (required = true) => {
-  const { pixel } = useContextEx(PixelContext, "Pixel", required);
-  return pixel;
-};
-
-// src/lib/assertDefinedEx.ts
-var assertDefinedEx = (expr, message) => {
-  if (expr !== null && expr !== void 0)
-    return expr;
-  throw Error(message);
-};
-
-// src/lib/getActualPaddingX.ts
-var parseMeausureString = (measure, absolute) => {
-  if (measure !== void 0 && measure !== null && measure.length > 0) {
-    if (measure.endsWith("px")) {
-      return parseFloat(measure.substring(0, measure.length - 2));
-    } else if (measure.endsWith("%")) {
-      if (absolute !== void 0) {
-        return parseFloat(measure.substring(0, measure.length - 1)) / 100 * absolute;
-      }
-      throw Error("Error Parsing Measure [missing absolute]");
-    } else if (measure.endsWith("vw")) {
-      return parseFloat(measure.substring(0, measure.length - 2)) / 100 * window.innerWidth;
-    } else if (measure.endsWith("vh")) {
-      return parseFloat(measure.substring(0, measure.length - 2)) / 100 * window.innerHeight;
-    }
-    throw Error(`Error Parsing Measure [${measure}]`);
-  }
-};
-var parsePadding = (padding) => {
-  const parts = padding.split(" ");
-  switch (parts.length) {
-    case 4: {
-      return {
-        bottom: parts[2],
-        left: parts[3],
-        right: parts[1],
-        top: parts[0]
-      };
-    }
-    case 3: {
-      return {
-        bottom: parts[2],
-        right: parts[1],
-        top: parts[0]
-      };
-    }
-    case 2: {
-      return {
-        bottom: parts[0],
-        left: parts[1],
-        right: parts[1],
-        top: parts[0]
-      };
-    }
-    case 1: {
-      return {
-        bottom: parts[0],
-        left: parts[0],
-        right: parts[0],
-        top: parts[0]
-      };
-    }
-  }
-};
-var getActualPaddingX = (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;
-};
-
-// src/lib/networkComponents.tsx
-var import_BubbleChartRounded = __toESM(require("@mui/icons-material/BubbleChartRounded"));
-var import_HubRounded = __toESM(require("@mui/icons-material/HubRounded"));
-var import_InsertLinkRounded = __toESM(require("@mui/icons-material/InsertLinkRounded"));
-var import_Inventory2Rounded = __toESM(require("@mui/icons-material/Inventory2Rounded"));
-var import_TimerRounded = __toESM(require("@mui/icons-material/TimerRounded"));
-var import_VisibilityRounded = __toESM(require("@mui/icons-material/VisibilityRounded"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var networkComponents = [
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_HubRounded.default, { ...props }), name: "Node", slug: "node" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_TimerRounded.default, { ...props }), name: "Sentinel", slug: "sentinel" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_InsertLinkRounded.default, { ...props }), name: "Bridge", slug: "bridge" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Inventory2Rounded.default, { ...props }), name: "Archivist", slug: "archivist" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_BubbleChartRounded.default, { ...props }), name: "Diviner", slug: "diviner" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_VisibilityRounded.default, { ...props }), name: "Witness", slug: "witness" }
-];
-var findNetworkComponentIndex = (slug) => {
-  return networkComponents.findIndex((info) => info.slug === slug);
-};
-var findNetworkComponent = (slug) => {
-  return networkComponents.find((info) => info.slug === slug);
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  AddressTableCell,
-  Ampersand,
-  BasicHero,
-  EllipsisTableCell,
-  EllipsisTableCellWithRef,
-  EllipsizeBox,
-  ErrorBoundary,
-  HashTableCell,
-  ListItemButtonEx,
-  ListItemButtonExTo,
-  ListModeContext,
-  ListModeProvider,
-  LoadResult,
-  NotFound,
-  PayloadDataMissing,
-  Pipe,
-  PixelContext,
-  PixelProvider,
-  ResolvedDivinerContext,
-  ResolvedDivinerProvider,
-  ScrollTableOnSm,
-  SectionSpacingRow,
-  ThemeTokenAvatar,
-  ThemeTokenAvatarGroup,
-  TokenBar,
-  TokenData,
-  TokenSummary,
-  TypographyEx,
-  assertDefinedEx,
-  colorfulGradientDarkMode,
-  colorfulGradientLightMode,
-  createContextEx,
-  findNetworkComponent,
-  findNetworkComponentIndex,
-  getActualPaddingX,
-  networkComponents,
-  parseMeausureString,
-  parsePadding,
-  useContextEx,
-  useDataState,
-  useGetTokenData,
-  useGradientStyles,
-  useIsMobile,
-  useListMode,
-  useMediaQuery,
-  usePayloadHash,
-  usePayloadHashes,
-  usePixel,
-  usePromise,
-  useProvided,
-  useShareForwardedRef
-});
-//# sourceMappingURL=index.js.map