@xyo-network/react-shared 4.4.5 → 4.4.7

package/dist/browser/index.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps, BoxProps, TypographyTypeMap, StackProps, ListItemButtonProps, AlertProps, TableCellProps, AvatarProps, AvatarGroupProps, PaperProps, CardHeaderProps, SvgIconProps } from '@mui/material';
+import { TypographyProps, PopoverProps, StandardTextFieldProps, FormControlProps, InputAdornmentProps, BoxProps, TypographyTypeMap, StackProps, ListItemButtonProps, AlertProps, TableCellProps, AvatarProps, AvatarGroupProps, PaperProps, CardHeaderProps, SvgIconProps } from '@mui/material';
 export { useMediaQuery } from '@mui/material';
 import * as React from 'react';
 import React__default, { ReactElement, PropsWithChildren, ReactNode, Context, Dispatch, SetStateAction, CSSProperties, ForwardedRef } from 'react';
@@ -36,6 +36,36 @@ interface BasicHeroProps extends FlexBoxProps {
 }
 declare const BasicHero: React__default.FC<BasicHeroProps>;
 
+interface FixedPointPopoverProps extends PopoverProps {
+    fixedPoint?: number;
+    minFixedPoint?: number;
+    onFixedPointChange?: (value: number) => void;
+}
+declare const FixedPointPopover: React__default.FC<FixedPointPopoverProps>;
+
+interface BigIntTextFieldProps extends StandardTextFieldProps {
+    defaultFixedPoint?: number;
+    hideAdornment?: boolean;
+    onChangeFixedPoint?: (value: bigint) => void;
+}
+declare const BigIntTextField: React__default.FC<BigIntTextFieldProps>;
+interface InputWithFormControlProps extends FormControlProps {
+    textFieldProps?: BigIntTextFieldProps;
+}
+declare const WithFormControl: React__default.FC<InputWithFormControlProps>;
+
+declare const BigIntInput: {
+    TextField: React.FC<BigIntTextFieldProps>;
+    WithFormControl: React.FC<InputWithFormControlProps>;
+};
+
+interface FixedPointInputAdornmentProps extends InputAdornmentProps {
+    fixedPoint?: number;
+    minFixedPoint?: number;
+    onFixedPointChange?: (value: number) => void;
+}
+declare const FixedPointInputAdornment: React__default.FC<FixedPointInputAdornmentProps>;
+
 interface EllipsizeRootProps extends BoxProps {
     beforeLineHeight?: string | number;
 }
@@ -308,4 +338,4 @@ declare const findNetworkComponent: (slug: string) => NetworkComponentDetails |
 
 type SizeProp = 'small' | 'medium' | 'large';
 
-export { AddressTableCell, type AddressTableCellProps, Ampersand, BasicHero, type BasicHeroProps, type ContextExProviderProps, type ContextExState, type DivinerProviderProps, EllipsisTableCell, type EllipsisTableCellProps, EllipsisTableCellWithRef, EllipsizeBox, type EllipsizeBoxProps, type EllipsizeRootProps, type EmptyObject, type GradientStyles, HashTableCell, type HashTableCellProps, LabeledTextFieldWrapper, type LabeledTextFieldWrapperProps, ListItemButtonEx, type ListItemButtonExProps, ListItemButtonExTo, type ListMode, ListModeContext, type ListModeContextState, ListModeProvider, type ListModeProviderProps, LoadResult, type LoadResultProps, type NetworkComponentDetails, type NetworkComponentSlug, NotFound, PayloadDataMissing, type PayloadDataMissingProps, Pipe, ResolvedDivinerContext, ResolvedDivinerProvider, type ResolvedDivinerState, ScrollTableOnSm, SectionSpacingRow, type SizeProp, ThemeTokenAvatar, ThemeTokenAvatarGroup, type ThemeTokenAvatarGroupProps, TokenBar, type TokenBarProps, TokenData, TokenSummary, type TokenSummaryProps, TypographyEx, type TypographyExProps, type TypographyWithComponentProps, type ValidatedResponse, assertDefinedEx, colorfulGradientDarkMode, colorfulGradientLightMode, createContextEx, findNetworkComponent, findNetworkComponentIndex, getActualPaddingX, networkComponents, parseMeausureString, parsePadding, useContextEx, useDataState, useGetTokenData, useGradientStyles, useIsMobile, useIsSmall, useListMode, usePayloadHash, usePayloadHashes, usePayloadRootHash, usePayloadValidate, useProvided, useShareForwardedRef, useValidateBoundWitness };
+export { AddressTableCell, type AddressTableCellProps, Ampersand, BasicHero, type BasicHeroProps, BigIntInput, BigIntTextField, type BigIntTextFieldProps, type ContextExProviderProps, type ContextExState, type DivinerProviderProps, EllipsisTableCell, type EllipsisTableCellProps, EllipsisTableCellWithRef, EllipsizeBox, type EllipsizeBoxProps, type EllipsizeRootProps, type EmptyObject, FixedPointInputAdornment, type FixedPointInputAdornmentProps, FixedPointPopover, type FixedPointPopoverProps, type GradientStyles, HashTableCell, type HashTableCellProps, type InputWithFormControlProps, LabeledTextFieldWrapper, type LabeledTextFieldWrapperProps, ListItemButtonEx, type ListItemButtonExProps, ListItemButtonExTo, type ListMode, ListModeContext, type ListModeContextState, ListModeProvider, type ListModeProviderProps, LoadResult, type LoadResultProps, type NetworkComponentDetails, type NetworkComponentSlug, NotFound, PayloadDataMissing, type PayloadDataMissingProps, Pipe, ResolvedDivinerContext, ResolvedDivinerProvider, type ResolvedDivinerState, ScrollTableOnSm, SectionSpacingRow, type SizeProp, ThemeTokenAvatar, ThemeTokenAvatarGroup, type ThemeTokenAvatarGroupProps, TokenBar, type TokenBarProps, TokenData, TokenSummary, type TokenSummaryProps, TypographyEx, type TypographyExProps, type TypographyWithComponentProps, type ValidatedResponse, WithFormControl, assertDefinedEx, colorfulGradientDarkMode, colorfulGradientLightMode, createContextEx, findNetworkComponent, findNetworkComponentIndex, getActualPaddingX, networkComponents, parseMeausureString, parsePadding, useContextEx, useDataState, useGetTokenData, useGradientStyles, useIsMobile, useIsSmall, useListMode, usePayloadHash, usePayloadHashes, usePayloadRootHash, usePayloadValidate, useProvided, useShareForwardedRef, useValidateBoundWitness };

package/dist/browser/index.mjs

@@ -376,9 +376,144 @@ var BasicHero = /* @__PURE__ */ __name(({ backgroundImage, title, gradientTitle,
   }) : 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) => {
+    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");
+
+// src/components/bigint/TextField.tsx
+import { FormControl, FormHelperText as FormHelperText2, TextField as TextField2 } from "@mui/material";
+import React5, { useEffect as useEffect2, useMemo as useMemo2, 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 }) => {
+  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");
+
+// src/components/bigint/TextField.tsx
+var BigIntTextField = /* @__PURE__ */ __name(({ defaultFixedPoint = 18, helperText, hideAdornment, onChangeFixedPoint, onChange, ...props }) => {
+  const [value, setValue] = useState3(0);
+  const [rawValue, setRawValue] = useState3("");
+  const [fixedPoint, setFixedPoint] = useState3(defaultFixedPoint);
+  const [error, setError] = useState3();
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    onChange?.(event);
+    const filteredValue = event.target.value.replaceAll(/[^\d.]/g, "");
+    if (filteredValue.split(".").length > 2) return;
+    setRawValue(filteredValue);
+    const value2 = Number.parseFloat(filteredValue || "0");
+    if (Number.isNaN(value2)) setValue(0);
+    setValue(value2);
+  }, "handleChange");
+  const onFixedPointChange = /* @__PURE__ */ __name((fixedPoint2) => setFixedPoint(fixedPoint2), "onFixedPointChange");
+  const bigIntValue = useMemo2(() => {
+    const fixedValue = value * 10 ** fixedPoint;
+    setError(void 0);
+    try {
+      return BigInt(fixedValue);
+    } catch (e) {
+      console.error(e);
+      setError(e);
+    }
+  }, [
+    value,
+    fixedPoint
+  ]);
+  useEffect2(() => {
+    if (bigIntValue) onChangeFixedPoint?.(bigIntValue);
+  }, [
+    bigIntValue
+  ]);
+  const minFixedPoint = rawValue.split(".")[1]?.length;
+  const resolvedHelperText = useMemo2(() => {
+    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
+        })
+      }
+    },
+    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");
+
+// src/components/bigint/Input.ts
+var BigIntInput = {
+  TextField: BigIntTextField,
+  WithFormControl
+};
+
 // src/components/Ellipsize.tsx
 import { Box, styled, Typography as Typography3 } from "@mui/material";
-import React3, { forwardRef, useCallback, useState as useState2 } from "react";
+import React6, { forwardRef, useCallback, useState as useState4 } from "react";
 var ComponentName = "Ellipsize";
 var EllipsizeRoot = styled(Box, {
   name: ComponentName,
@@ -427,7 +562,7 @@ var EllipsizeContentWrap = styled(Typography3, {
   });
 });
 var useClientHeight = /* @__PURE__ */ __name(() => {
-  const [contentWrapHeight, setContentWrapHeight] = useState2();
+  const [contentWrapHeight, setContentWrapHeight] = useState4();
   const contentWrapRef = useCallback((node) => {
     if (node !== null) {
       setContentWrapHeight(node.clientHeight + "px");
@@ -441,11 +576,11 @@ var useClientHeight = /* @__PURE__ */ __name(() => {
 var EllipsizeBox = /* @__PURE__ */ forwardRef(({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
   const { contentWrapRef, contentWrapHeight } = useClientHeight();
   const sharedRef = useShareForwardedRef(ref);
-  return /* @__PURE__ */ React3.createElement(EllipsizeRoot, {
+  return /* @__PURE__ */ React6.createElement(EllipsizeRoot, {
     beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0,
     ...props,
     ref: sharedRef
-  }, /* @__PURE__ */ React3.createElement(EllipsizeInnerWrap, null, /* @__PURE__ */ React3.createElement(EllipsizeContentWrap, {
+  }, /* @__PURE__ */ React6.createElement(EllipsizeInnerWrap, null, /* @__PURE__ */ React6.createElement(EllipsizeContentWrap, {
     ref: contentWrapRef,
     component: "span",
     ellipsisPosition,
@@ -457,12 +592,12 @@ EllipsizeBox.displayName = "EllipsizeBox";
 
 // src/components/LabeledTextFieldWrapper.tsx
 import { Stack, Typography as Typography4 } from "@mui/material";
-import React4 from "react";
+import React7 from "react";
 var LabeledTextFieldWrapper = /* @__PURE__ */ __name(({ children, label, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(Stack, {
+  return /* @__PURE__ */ React7.createElement(Stack, {
     flexDirection: "column",
     ...props
-  }, /* @__PURE__ */ React4.createElement(Typography4, {
+  }, /* @__PURE__ */ React7.createElement(Typography4, {
     gutterBottom: true,
     variant: "caption"
   }, label), children);
@@ -470,7 +605,7 @@ var LabeledTextFieldWrapper = /* @__PURE__ */ __name(({ children, label, ...prop
 
 // src/components/ListItemButtonEx.tsx
 import { ListItemButton } from "@mui/material";
-import React5 from "react";
+import React8 from "react";
 import { useNavigate } from "react-router-dom";
 var ListItemButtonExTo = /* @__PURE__ */ __name(({ to, toOptions, onClick, ...props }) => {
   const navigate = useNavigate();
@@ -480,30 +615,30 @@ var ListItemButtonExTo = /* @__PURE__ */ __name(({ to, toOptions, onClick, ...pr
       void navigate(to, toOptions);
     }
   }, "localOnClick");
-  return /* @__PURE__ */ React5.createElement(ListItemButton, {
+  return /* @__PURE__ */ React8.createElement(ListItemButton, {
     onClick: localOnClick,
     ...props
   });
 }, "ListItemButtonExTo");
 var ListItemButtonEx = /* @__PURE__ */ __name(({ to, ...props }) => {
-  return to ? /* @__PURE__ */ React5.createElement(ListItemButtonExTo, {
+  return to ? /* @__PURE__ */ React8.createElement(ListItemButtonExTo, {
     to,
     ...props
-  }) : /* @__PURE__ */ React5.createElement(ListItemButton, props);
+  }) : /* @__PURE__ */ React8.createElement(ListItemButton, props);
 }, "ListItemButtonEx");
 
 // src/components/LoadResult.tsx
 import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
-import React7 from "react";
+import React10 from "react";
 
 // src/components/NotFound.tsx
 import { Typography as Typography5 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
-import React6 from "react";
+import React9 from "react";
 var NotFound = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React6.createElement(FlexGrowCol2, props, /* @__PURE__ */ React6.createElement(Typography5, {
+  return /* @__PURE__ */ React9.createElement(FlexGrowCol2, props, /* @__PURE__ */ React9.createElement(Typography5, {
     variant: "h2"
-  }, "Sorry!"), /* @__PURE__ */ React6.createElement(Typography5, {
+  }, "Sorry!"), /* @__PURE__ */ React9.createElement(Typography5, {
     marginY: 3,
     variant: "body2"
   }, "Can't find anything here"));
@@ -513,23 +648,23 @@ var NotFound = /* @__PURE__ */ __name((props) => {
 function LoadResult(props) {
   const { notFound, error, searchResult, children } = props;
   if (notFound) {
-    return /* @__PURE__ */ React7.createElement(NotFound, null);
+    return /* @__PURE__ */ React10.createElement(NotFound, null);
   }
   if (error) {
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
+    return /* @__PURE__ */ React10.createElement(React10.Fragment, null, children);
   }
-  return searchResult === void 0 ? /* @__PURE__ */ React7.createElement(FlexGrowRow2, {
+  return searchResult === void 0 ? /* @__PURE__ */ React10.createElement(FlexGrowRow2, {
     busy: true,
     minHeight: "50px"
-  }) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
+  }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, children);
 }
 __name(LoadResult, "LoadResult");
 
 // src/components/Pipe.tsx
 import { Typography as Typography6 } from "@mui/material";
-import React8 from "react";
+import React11 from "react";
 var Pipe = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React8.createElement(Typography6, {
+  return /* @__PURE__ */ React11.createElement(Typography6, {
     marginX: 1,
     component: "span",
     ...props
@@ -538,17 +673,17 @@ var Pipe = /* @__PURE__ */ __name((props) => {
 
 // src/components/pluginValidation/DataMissing.tsx
 import { Alert, AlertTitle } from "@mui/material";
-import React9 from "react";
+import React12 from "react";
 var PayloadDataMissing = /* @__PURE__ */ __name(({ alertBody, ...props }) => {
-  return /* @__PURE__ */ React9.createElement(Alert, {
+  return /* @__PURE__ */ React12.createElement(Alert, {
     severity: "warning",
     ...props
-  }, /* @__PURE__ */ React9.createElement(AlertTitle, null, "Missing Data"), alertBody ?? "Payload is missing required data to render correctly");
+  }, /* @__PURE__ */ React12.createElement(AlertTitle, null, "Missing Data"), alertBody ?? "Payload is missing required data to render correctly");
 }, "PayloadDataMissing");
 
 // src/components/ScrollTableOnSm.tsx
 import { styled as styled2 } from "@mui/material";
-import React10 from "react";
+import React13 from "react";
 var StyledScrollTableOnSm = styled2("div")(({ theme }) => ({
   [theme.breakpoints.down("md")]: {
     overflowX: "scroll"
@@ -556,15 +691,15 @@ var StyledScrollTableOnSm = styled2("div")(({ theme }) => ({
   display: "flex",
   flexGrow: 1
 }));
-var ScrollTableOnSm = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React10.createElement(StyledScrollTableOnSm, null, children), "ScrollTableOnSm");
+var ScrollTableOnSm = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React13.createElement(StyledScrollTableOnSm, null, children), "ScrollTableOnSm");
 
 // src/components/SectionSpacingRow/SectionSpacingRow.tsx
 import { useTheme as useTheme3 } from "@mui/material";
 import { FlexGrowRow as FlexGrowRow3 } from "@xylabs/react-flexbox";
-import React11, { forwardRef as forwardRef2 } from "react";
+import React14, { forwardRef as forwardRef2 } from "react";
 var SectionSpacingRow = /* @__PURE__ */ forwardRef2(({ children, sx, ...props }, ref) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ React11.createElement(FlexGrowRow3, {
+  return /* @__PURE__ */ React14.createElement(FlexGrowRow3, {
     sx: {
       paddingBottom: {
         md: theme.spacing(5),
@@ -584,12 +719,12 @@ var SectionSpacingRow = /* @__PURE__ */ forwardRef2(({ children, sx, ...props },
 SectionSpacingRow.displayName = "SectionSpacingRow";
 
 // src/components/TableCell/AddressTableCell.tsx
-import React13, { forwardRef as forwardRef4 } from "react";
+import React16, { forwardRef as forwardRef4 } from "react";
 
 // src/components/TableCell/EllipsisTableCell.tsx
 import { styled as styled3, TableCell } from "@mui/material";
 import { asLinkHrefOrToProps, LinkEx as LinkEx2 } from "@xylabs/react-link";
-import React12, { forwardRef as forwardRef3, useMemo as useMemo2 } from "react";
+import React15, { forwardRef as forwardRef3, useMemo as useMemo3 } from "react";
 var EllipsisTableCellRoot = styled3(TableCell, {
   name: "EllipsisTableCell",
   shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "width", "shouldForwardProp"),
@@ -598,12 +733,12 @@ var EllipsisTableCellRoot = styled3(TableCell, {
   width
 }));
 var EllipsisTableCellWithRef = /* @__PURE__ */ forwardRef3(({ children, href, link = false, to, value, ...props }, ref) => {
-  const data = useMemo2(() => {
+  const data = useMemo3(() => {
     if (children) {
       return children;
     }
     if (href || link || to) {
-      return /* @__PURE__ */ React12.createElement(LinkEx2, {
+      return /* @__PURE__ */ React15.createElement(LinkEx2, {
         title: value,
         ...asLinkHrefOrToProps({
           to,
@@ -620,7 +755,7 @@ var EllipsisTableCellWithRef = /* @__PURE__ */ forwardRef3(({ children, href, li
     to,
     value
   ]);
-  return /* @__PURE__ */ React12.createElement(EllipsisTableCellRoot, props, /* @__PURE__ */ React12.createElement(EllipsizeBox, {
+  return /* @__PURE__ */ React15.createElement(EllipsisTableCellRoot, props, /* @__PURE__ */ React15.createElement(EllipsizeBox, {
     ref,
     sx: {
       cursor: link || to || href ? "pointer" : "inherit"
@@ -634,7 +769,7 @@ var EllipsisTableCell = EllipsisTableCellWithRef;
 var AddressTableCell = /* @__PURE__ */ forwardRef4(({ 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__ */ React13.createElement(EllipsisTableCell, {
+  return /* @__PURE__ */ React16.createElement(EllipsisTableCell, {
     value,
     href,
     to,
@@ -647,9 +782,9 @@ AddressTableCell.displayName = "AddressTableCell";
 
 // src/components/TableCell/HashTableCell.tsx
 import { useEvent } from "@xyo-network/react-event";
-import React14, { useRef as useRef2 } from "react";
+import React17, { useRef as useRef3 } from "react";
 var HashTableCell = /* @__PURE__ */ __name(({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const [tableCellRef, dispatch] = useEvent(void 0, ref);
   const hashPath = `/${dataType}/hash/${value}?network=${network ?? "main"}`;
   const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath;
@@ -660,7 +795,7 @@ var HashTableCell = /* @__PURE__ */ __name(({ value, archive, dataType, network,
       dispatch?.("hash", "click", value);
     }
   }, "handleCellClick");
-  return /* @__PURE__ */ React14.createElement(EllipsisTableCell, {
+  return /* @__PURE__ */ React17.createElement(EllipsisTableCell, {
     onClick: handleCellClick,
     ref: tableCellRef,
     value,
@@ -671,11 +806,11 @@ var HashTableCell = /* @__PURE__ */ __name(({ value, archive, dataType, network,
 }, "HashTableCell");
 
 // src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
-import { Avatar, useTheme as useTheme4 } from "@mui/material";
-import React15 from "react";
+import { Avatar as Avatar2, useTheme as useTheme4 } from "@mui/material";
+import React18 from "react";
 var ThemeTokenAvatar = /* @__PURE__ */ __name(({ ...props }) => {
   const theme = useTheme4();
-  return /* @__PURE__ */ React15.createElement(Avatar, {
+  return /* @__PURE__ */ React18.createElement(Avatar2, {
     sx: {
       background: theme.palette.common.white
     },
@@ -685,9 +820,9 @@ var ThemeTokenAvatar = /* @__PURE__ */ __name(({ ...props }) => {
 
 // src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
 import { AvatarGroup } from "@mui/material";
-import React16 from "react";
+import React19 from "react";
 var ThemeTokenAvatarGroup = /* @__PURE__ */ __name(({ images, ...props }) => {
-  return /* @__PURE__ */ React16.createElement(AvatarGroup, props, images?.map((image, index) => /* @__PURE__ */ React16.createElement(ThemeTokenAvatar, {
+  return /* @__PURE__ */ React19.createElement(AvatarGroup, props, images?.map((image, index) => /* @__PURE__ */ React19.createElement(ThemeTokenAvatar, {
     key: index,
     src: image
   })));
@@ -696,20 +831,20 @@ var ThemeTokenAvatarGroup = /* @__PURE__ */ __name(({ images, ...props }) => {
 // src/components/TokenBar/TokenBar.tsx
 import { Paper, Typography as Typography7 } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
-import React17 from "react";
+import React20 from "react";
 var TokenBar = /* @__PURE__ */ __name(({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
-  return /* @__PURE__ */ React17.createElement(Paper, {
+  return /* @__PURE__ */ React20.createElement(Paper, {
     elevation: 0,
     className: "TokenBar-root",
     ...props
-  }, /* @__PURE__ */ React17.createElement(FlexRow, {
+  }, /* @__PURE__ */ React20.createElement(FlexRow, {
     justifyContent: "space-between"
-  }, /* @__PURE__ */ React17.createElement(Typography7, {
+  }, /* @__PURE__ */ React20.createElement(Typography7, {
     variant: "body1",
     fontWeight: 300,
     margin: 1,
     ...text1Props
-  }, text1, text1Suffix), /* @__PURE__ */ React17.createElement(Typography7, {
+  }, text1, text1Suffix), /* @__PURE__ */ React20.createElement(Typography7, {
     variant: "body1",
     fontWeight: 300,
     textTransform: "uppercase",
@@ -871,14 +1006,14 @@ var useGetTokenData = /* @__PURE__ */ __name((symbols) => {
 
 // src/components/TokenSummary/TokenSummary.tsx
 import { CardHeader, Typography as Typography8 } from "@mui/material";
-import React18 from "react";
+import React21 from "react";
 var TokenSummary = /* @__PURE__ */ __name(({ icon, symbol, symbolElement, children, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(CardHeader, {
-    avatar: /* @__PURE__ */ React18.createElement(ThemeTokenAvatar, {
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(CardHeader, {
+    avatar: /* @__PURE__ */ React21.createElement(ThemeTokenAvatar, {
       src: icon,
       alt: symbol
     }),
-    title: /* @__PURE__ */ React18.createElement(Typography8, {
+    title: /* @__PURE__ */ React21.createElement(Typography8, {
       variant: "h6",
       fontWeight: 300,
       textTransform: "uppercase"
@@ -889,10 +1024,10 @@ var TokenSummary = /* @__PURE__ */ __name(({ icon, symbol, symbolElement, childr
 
 // src/components/TypographyEx.tsx
 import { Typography as Typography9 } from "@mui/material";
-import React19 from "react";
+import React22 from "react";
 var TypographyEx = /* @__PURE__ */ __name(({ gradient, ...props }) => {
   const { classes } = useGradientStyles();
-  return /* @__PURE__ */ React19.createElement(Typography9, {
+  return /* @__PURE__ */ React22.createElement(Typography9, {
     className: gradient === "text" ? classes().heading : void 0,
     ...props
   });
@@ -923,10 +1058,10 @@ var ResolvedDivinerContext = /* @__PURE__ */ __name(() => createContextEx(), "Re
 
 // src/contexts/diviner/Provider.tsx
 import { useResetState } from "@xylabs/react-hooks";
-import React20, { useMemo as useMemo3 } from "react";
+import React23, { useMemo as useMemo4 } from "react";
 var ResolvedDivinerProvider = /* @__PURE__ */ __name(({ diviner: divinerProp, required = false, children, context }) => {
   const [diviner, setDiviner] = useResetState(divinerProp);
-  const value = useMemo3(() => {
+  const value = useMemo4(() => {
     const resolveDiviner = /* @__PURE__ */ __name(() => {
       if (divinerProp) {
         return diviner === divinerProp ? diviner : void 0;
@@ -943,7 +1078,7 @@ var ResolvedDivinerProvider = /* @__PURE__ */ __name(({ diviner: divinerProp, re
     setDiviner,
     divinerProp
   ]);
-  return /* @__PURE__ */ React20.createElement(context.Provider, {
+  return /* @__PURE__ */ React23.createElement(context.Provider, {
     value
   }, diviner ? children : required ? null : children);
 }, "ResolvedDivinerProvider");
@@ -952,10 +1087,10 @@ var ResolvedDivinerProvider = /* @__PURE__ */ __name(({ diviner: divinerProp, re
 var ListModeContext = createContextEx();
 
 // src/contexts/ListMode/Provider.tsx
-import React21, { useMemo as useMemo4, useState as useState3 } from "react";
+import React24, { useMemo as useMemo5, useState as useState5 } from "react";
 var ListModeProvider = /* @__PURE__ */ __name(({ children, defaultListMode }) => {
-  const [listMode, setListMode] = useState3(defaultListMode ?? "default");
-  const value = useMemo4(() => ({
+  const [listMode, setListMode] = useState5(defaultListMode ?? "default");
+  const value = useMemo5(() => ({
     listMode,
     provided: true,
     setListMode
@@ -963,7 +1098,7 @@ var ListModeProvider = /* @__PURE__ */ __name(({ children, defaultListMode }) =>
     listMode,
     setListMode
   ]);
-  return /* @__PURE__ */ React21.createElement(ListModeContext.Provider, {
+  return /* @__PURE__ */ React24.createElement(ListModeContext.Provider, {
     value
   }, children);
 }, "ListModeProvider");
@@ -1042,35 +1177,35 @@ var getActualPaddingX = /* @__PURE__ */ __name((element) => {
 
 // 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 React22 from "react";
+import React25 from "react";
 var networkComponents = [
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React22.createElement(HubRoundedIcon, props), "icon"),
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(HubRoundedIcon, props), "icon"),
     name: "Node",
     slug: "node"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React22.createElement(TimerRoundedIcon, props), "icon"),
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(TimerRoundedIcon, props), "icon"),
     name: "Sentinel",
     slug: "sentinel"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React22.createElement(InsertLinkRoundedIcon, props), "icon"),
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(InsertLinkRoundedIcon, props), "icon"),
     name: "Bridge",
     slug: "bridge"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React22.createElement(Inventory2RoundedIcon, props), "icon"),
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(Inventory2RoundedIcon, props), "icon"),
     name: "Archivist",
     slug: "archivist"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React22.createElement(BubbleChartRoundedIcon, props), "icon"),
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(BubbleChartRoundedIcon, props), "icon"),
     name: "Diviner",
     slug: "diviner"
   },
   {
-    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React22.createElement(VisibilityRoundedIcon, props), "icon"),
+    icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(VisibilityRoundedIcon, props), "icon"),
     name: "Witness",
     slug: "witness"
   }
@@ -1085,9 +1220,13 @@ export {
   AddressTableCell,
   Ampersand,
   BasicHero,
+  BigIntInput,
+  BigIntTextField,
   EllipsisTableCell,
   EllipsisTableCellWithRef,
   EllipsizeBox,
+  FixedPointInputAdornment,
+  FixedPointPopover,
   HashTableCell,
   LabeledTextFieldWrapper,
   ListItemButtonEx,
@@ -1108,6 +1247,7 @@ export {
   TokenData,
   TokenSummary,
   TypographyEx,
+  WithFormControl,
   assertDefinedEx,
   colorfulGradientDarkMode,
   colorfulGradientLightMode,