@xyo-network/react-shared 2.81.1 → 2.81.2

package/dist/browser/index.js

@@ -152,7 +152,7 @@ var SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subL
   );
 };
 var ButtonSection = ({ href, to, buttonText }) => {
-  const isMobile = useIsMobile();
+  const isMobile = useIsSmall();
   return /* @__PURE__ */ jsx2(
     ButtonEx,
     {
@@ -194,7 +194,7 @@ var BasicHero = ({
   sx,
   ...props
 }) => {
-  const isMobile = useIsMobile();
+  const isMobile = useIsSmall();
   const { classes } = useGradientStyles();
   return /* @__PURE__ */ jsx2(
     FlexGrowCol,
@@ -361,10 +361,20 @@ var ErrorBoundary = class extends Component {
   }
 };
 
+// src/components/LabeledTextFieldWrapper.tsx
+import { Stack, Typography as Typography5 } from "@mui/material";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var LabeledTextFieldWrapper = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ jsxs3(Stack, { flexDirection: "column", ...props, children: [
+    /* @__PURE__ */ jsx5(Typography5, { gutterBottom: true, variant: "caption", children: label }),
+    children
+  ] });
+};
+
 // src/components/ListItemButtonEx.tsx
 import { ListItemButton } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
   const navigate = useNavigate();
   const localOnClick = (event) => {
@@ -373,59 +383,59 @@ var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
       navigate(to, toOptions);
     }
   };
-  return /* @__PURE__ */ jsx5(ListItemButton, { onClick: localOnClick, ...props });
+  return /* @__PURE__ */ jsx6(ListItemButton, { onClick: localOnClick, ...props });
 };
 var ListItemButtonEx = ({ to, ...props }) => {
-  return to ? /* @__PURE__ */ jsx5(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ jsx5(ListItemButton, { ...props });
+  return to ? /* @__PURE__ */ jsx6(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ jsx6(ListItemButton, { ...props });
 };
 
 // src/components/LoadResult.tsx
 import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
 
 // src/components/NotFound.tsx
-import { Typography as Typography5 } from "@mui/material";
+import { Typography as Typography6 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var NotFound = (props) => {
-  return /* @__PURE__ */ jsxs3(FlexGrowCol2, { ...props, children: [
-    /* @__PURE__ */ jsx6(Typography5, { variant: "h2", children: "Sorry!" }),
-    /* @__PURE__ */ jsx6(Typography5, { marginY: 3, variant: "body2", children: "Can't find anything here" })
+  return /* @__PURE__ */ jsxs4(FlexGrowCol2, { ...props, children: [
+    /* @__PURE__ */ jsx7(Typography6, { variant: "h2", children: "Sorry!" }),
+    /* @__PURE__ */ jsx7(Typography6, { marginY: 3, variant: "body2", children: "Can't find anything here" })
   ] });
 };
 
 // src/components/LoadResult.tsx
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8 } from "react/jsx-runtime";
 function LoadResult(props) {
   const { notFound, error, searchResult, children } = props;
   if (notFound) {
-    return /* @__PURE__ */ jsx7(NotFound, {});
+    return /* @__PURE__ */ jsx8(NotFound, {});
   }
   if (error) {
-    return /* @__PURE__ */ jsx7(Fragment, { children });
+    return /* @__PURE__ */ jsx8(Fragment, { children });
   }
-  return searchResult === void 0 ? /* @__PURE__ */ jsx7(FlexGrowRow2, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ jsx7(Fragment, { children });
+  return searchResult === void 0 ? /* @__PURE__ */ jsx8(FlexGrowRow2, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ jsx8(Fragment, { children });
 }
 
 // src/components/Pipe.tsx
-import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { Typography as Typography7 } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Pipe = (props) => {
-  return /* @__PURE__ */ jsx8(Typography6, { marginX: 1, component: "span", ...props, children: "|" });
+  return /* @__PURE__ */ jsx9(Typography7, { marginX: 1, component: "span", ...props, children: "|" });
 };
 
 // src/components/pluginValidation/DataMissing.tsx
 import { Alert, AlertTitle } from "@mui/material";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var PayloadDataMissing = ({ alertBody, ...props }) => {
-  return /* @__PURE__ */ jsxs4(Alert, { severity: "warning", ...props, children: [
-    /* @__PURE__ */ jsx9(AlertTitle, { children: "Missing Data" }),
+  return /* @__PURE__ */ jsxs5(Alert, { severity: "warning", ...props, children: [
+    /* @__PURE__ */ jsx10(AlertTitle, { children: "Missing Data" }),
     alertBody ?? "Payload is missing required data to render correctly"
   ] });
 };
 
 // src/components/ScrollTableOnSm.tsx
 import { styled as styled2 } from "@mui/material";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var StyledScrollTableOnSm = styled2("div")(({ theme }) => ({
   [theme.breakpoints.down("md")]: {
     overflowX: "scroll"
@@ -433,16 +443,16 @@ var StyledScrollTableOnSm = styled2("div")(({ theme }) => ({
   display: "flex",
   flexGrow: 1
 }));
-var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx10(StyledScrollTableOnSm, { children });
+var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx11(StyledScrollTableOnSm, { children });
 
 // src/components/SectionSpacingRow/SectionSpacingRow.tsx
 import { useTheme as useTheme3 } from "@mui/material";
 import { FlexGrowRow as FlexGrowRow3 } from "@xylabs/react-flexbox";
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var SectionSpacingRow = forwardRef2(({ children, sx, ...props }, ref) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     FlexGrowRow3,
     {
       sx: {
@@ -466,7 +476,7 @@ import { forwardRef as forwardRef4 } from "react";
 import { styled as styled3, TableCell } from "@mui/material";
 import { LinkEx as LinkEx2 } from "@xylabs/react-link";
 import { forwardRef as forwardRef3, useMemo } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var EllipsisTableCellRoot = styled3(TableCell, {
   name: "EllipsisTableCell",
   shouldForwardProp: (prop) => prop !== "width",
@@ -481,29 +491,29 @@ var EllipsisTableCellWithRef = forwardRef3(
         return children;
       }
       if (href || link || to) {
-        return /* @__PURE__ */ jsx12(LinkEx2, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
+        return /* @__PURE__ */ jsx13(LinkEx2, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
       }
       return value;
     }, [children, href, link, to, value]);
-    return /* @__PURE__ */ jsx12(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx12(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
+    return /* @__PURE__ */ jsx13(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx13(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
   }
 );
 EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
 var EllipsisTableCell = EllipsisTableCellWithRef;
 
 // src/components/TableCell/AddressTableCell.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var AddressTableCell = 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__ */ jsx13(EllipsisTableCell, { value, href, to, ref, link, ...props });
+  return /* @__PURE__ */ jsx14(EllipsisTableCell, { value, href, to, ref, link, ...props });
 });
 AddressTableCell.displayName = "AddressTableCell";
 
 // src/components/TableCell/HashTableCell.tsx
 import { useEvent } from "@xyo-network/react-event";
 import { useRef as useRef2 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
   const ref = useRef2(null);
   const [tableCellRef, dispatch] = useEvent(void 0, ref);
@@ -516,7 +526,7 @@ var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashC
       dispatch?.("hash", "click", value);
     }
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     EllipsisTableCell,
     {
       onClick: handleCellClick,
@@ -531,30 +541,30 @@ var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashC
 
 // src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
 import { Avatar, useTheme as useTheme4 } from "@mui/material";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var ThemeTokenAvatar = ({ ...props }) => {
   const theme = useTheme4();
-  return /* @__PURE__ */ jsx15(Avatar, { sx: { background: theme.palette.common.white }, ...props });
+  return /* @__PURE__ */ jsx16(Avatar, { sx: { background: theme.palette.common.white }, ...props });
 };
 
 // src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
 import { AvatarGroup } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ThemeTokenAvatarGroup = ({ images, ...props }) => {
-  return /* @__PURE__ */ jsx16(AvatarGroup, { ...props, children: images?.map((image, index) => /* @__PURE__ */ jsx16(ThemeTokenAvatar, { src: image }, index)) });
+  return /* @__PURE__ */ jsx17(AvatarGroup, { ...props, children: images?.map((image, index) => /* @__PURE__ */ jsx17(ThemeTokenAvatar, { src: image }, index)) });
 };
 
 // src/components/TokenBar/TokenBar.tsx
-import { Paper, Typography as Typography7 } from "@mui/material";
+import { Paper, Typography as Typography8 } from "@mui/material";
 import { FlexRow } from "@xylabs/react-flexbox";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 var TokenBar = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
-  return /* @__PURE__ */ jsx17(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ jsxs5(FlexRow, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxs5(Typography7, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
+  return /* @__PURE__ */ jsx18(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ jsxs6(FlexRow, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs6(Typography8, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
       text1,
       text1Suffix
     ] }),
-    /* @__PURE__ */ jsxs5(Typography7, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
+    /* @__PURE__ */ jsxs6(Typography8, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
       text2,
       text2Suffix
     ] })
@@ -712,15 +722,15 @@ var useGetTokenData = (symbols) => {
 };
 
 // src/components/TokenSummary/TokenSummary.tsx
-import { CardHeader, Typography as Typography8 } from "@mui/material";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+import { CardHeader, Typography as Typography9 } from "@mui/material";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx19(
       CardHeader,
       {
-        avatar: /* @__PURE__ */ jsx18(ThemeTokenAvatar, { src: icon, alt: symbol }),
-        title: /* @__PURE__ */ jsx18(Typography8, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
+        avatar: /* @__PURE__ */ jsx19(ThemeTokenAvatar, { src: icon, alt: symbol }),
+        title: /* @__PURE__ */ jsx19(Typography9, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
         ...props
       }
     ),
@@ -729,11 +739,11 @@ var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
 };
 
 // src/components/TypographyEx.tsx
-import { Typography as Typography9 } from "@mui/material";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { Typography as Typography10 } from "@mui/material";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var TypographyEx = ({ gradient, ...props }) => {
   const { classes } = useGradientStyles();
-  return /* @__PURE__ */ jsx19(Typography9, { className: gradient === "text" ? classes().heading : void 0, ...props });
+  return /* @__PURE__ */ jsx20(Typography10, { className: gradient === "text" ? classes().heading : void 0, ...props });
 };
 
 // src/contexts/contextEx/create.ts
@@ -759,7 +769,7 @@ var ResolvedDivinerContext = () => createContextEx();
 
 // src/contexts/diviner/Provider.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, children, context }) => {
   const [diviner, setDiviner] = useState3(divinerProp);
   useEffect2(() => {
@@ -774,7 +784,7 @@ var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, childre
       return diviner;
     }
   };
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     context.Provider,
     {
       value: {
@@ -792,10 +802,10 @@ var ListModeContext = createContextEx();
 
 // src/contexts/ListMode/Provider.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ListModeProvider = ({ children, defaultListMode }) => {
   const [listMode, setListMode] = useState4(defaultListMode ?? "default");
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ListModeContext.Provider,
     {
       value: {
@@ -889,14 +899,14 @@ import {
   TimerRounded as TimerRoundedIcon,
   VisibilityRounded as VisibilityRoundedIcon
 } from "@mui/icons-material";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var networkComponents = [
-  { icon: (props) => /* @__PURE__ */ jsx22(HubRoundedIcon, { ...props }), name: "Node", slug: "node" },
-  { icon: (props) => /* @__PURE__ */ jsx22(TimerRoundedIcon, { ...props }), name: "Sentinel", slug: "sentinel" },
-  { icon: (props) => /* @__PURE__ */ jsx22(InsertLinkRoundedIcon, { ...props }), name: "Bridge", slug: "bridge" },
-  { icon: (props) => /* @__PURE__ */ jsx22(Inventory2RoundedIcon, { ...props }), name: "Archivist", slug: "archivist" },
-  { icon: (props) => /* @__PURE__ */ jsx22(BubbleChartRoundedIcon, { ...props }), name: "Diviner", slug: "diviner" },
-  { icon: (props) => /* @__PURE__ */ jsx22(VisibilityRoundedIcon, { ...props }), name: "Witness", slug: "witness" }
+  { icon: (props) => /* @__PURE__ */ jsx23(HubRoundedIcon, { ...props }), name: "Node", slug: "node" },
+  { icon: (props) => /* @__PURE__ */ jsx23(TimerRoundedIcon, { ...props }), name: "Sentinel", slug: "sentinel" },
+  { icon: (props) => /* @__PURE__ */ jsx23(InsertLinkRoundedIcon, { ...props }), name: "Bridge", slug: "bridge" },
+  { icon: (props) => /* @__PURE__ */ jsx23(Inventory2RoundedIcon, { ...props }), name: "Archivist", slug: "archivist" },
+  { icon: (props) => /* @__PURE__ */ jsx23(BubbleChartRoundedIcon, { ...props }), name: "Diviner", slug: "diviner" },
+  { icon: (props) => /* @__PURE__ */ jsx23(VisibilityRoundedIcon, { ...props }), name: "Witness", slug: "witness" }
 ];
 var findNetworkComponentIndex = (slug) => {
   return networkComponents.findIndex((info) => info.slug === slug);
@@ -913,6 +923,7 @@ export {
   EllipsizeBox,
   ErrorBoundary,
   HashTableCell,
+  LabeledTextFieldWrapper,
   ListItemButtonEx,
   ListItemButtonExTo,
   ListModeContext,