@xyo-network/react-shared 2.81.1 → 2.81.2

package/dist/node/index.cjs

@@ -38,6 +38,7 @@ __export(src_exports, {
   EllipsizeBox: () => EllipsizeBox,
   ErrorBoundary: () => ErrorBoundary,
   HashTableCell: () => HashTableCell,
+  LabeledTextFieldWrapper: () => LabeledTextFieldWrapper,
   ListItemButtonEx: () => ListItemButtonEx,
   ListItemButtonExTo: () => ListItemButtonExTo,
   ListModeContext: () => ListModeContext,
@@ -236,7 +237,7 @@ var SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subL
   );
 };
 var ButtonSection = ({ href, to, buttonText }) => {
-  const isMobile = useIsMobile();
+  const isMobile = useIsSmall();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_button.ButtonEx,
     {
@@ -278,7 +279,7 @@ var BasicHero = ({
   sx,
   ...props
 }) => {
-  const isMobile = useIsMobile();
+  const isMobile = useIsSmall();
   const { classes } = useGradientStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_flexbox.FlexGrowCol,
@@ -446,10 +447,20 @@ var ErrorBoundary = class extends import_react4.Component {
   }
 };
 
-// src/components/ListItemButtonEx.tsx
+// src/components/LabeledTextFieldWrapper.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 LabeledTextFieldWrapper = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material8.Stack, { flexDirection: "column", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material8.Typography, { gutterBottom: true, variant: "caption", children: label }),
+    children
+  ] });
+};
+
+// src/components/ListItemButtonEx.tsx
+var import_material9 = require("@mui/material");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
   const localOnClick = (event) => {
@@ -458,76 +469,76 @@ var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
       navigate(to, toOptions);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material8.ListItemButton, { onClick: localOnClick, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material9.ListItemButton, { onClick: localOnClick, ...props });
 };
 var ListItemButtonEx = ({ to, ...props }) => {
-  return to ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material8.ListItemButton, { ...props });
+  return to ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material9.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_material10 = require("@mui/material");
 var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = 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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_flexbox3.FlexGrowCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material10.Typography, { variant: "h2", children: "Sorry!" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material10.Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })
   ] });
 };
 
 // src/components/LoadResult.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function LoadResult(props) {
   const { notFound, error, searchResult, children } = props;
   if (notFound) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotFound, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotFound, {});
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
   }
-  return searchResult === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_flexbox4.FlexGrowRow, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+  return searchResult === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_flexbox4.FlexGrowRow, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
 }
 
 // src/components/Pipe.tsx
-var import_material10 = require("@mui/material");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_material11 = require("@mui/material");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Pipe = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material10.Typography, { marginX: 1, component: "span", ...props, children: "|" });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material11.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 import_material12 = require("@mui/material");
+var import_jsx_runtime10 = 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" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material12.Alert, { severity: "warning", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material12.AlertTitle, { children: "Missing Data" }),
     alertBody ?? "Payload is missing required data to render correctly"
   ] });
 };
 
 // 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 }) => ({
+var import_material13 = require("@mui/material");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var StyledScrollTableOnSm = (0, import_material13.styled)("div")(({ theme }) => ({
   [theme.breakpoints.down("md")]: {
     overflowX: "scroll"
   },
   display: "flex",
   flexGrow: 1
 }));
-var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledScrollTableOnSm, { children });
+var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledScrollTableOnSm, { children });
 
 // src/components/SectionSpacingRow/SectionSpacingRow.tsx
-var import_material13 = require("@mui/material");
+var import_material14 = 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 import_jsx_runtime12 = 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)(
+  const theme = (0, import_material14.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_react_flexbox5.FlexGrowRow,
     {
       sx: {
@@ -548,11 +559,11 @@ SectionSpacingRow.displayName = "SectionSpacingRow";
 var import_react7 = require("react");
 
 // src/components/TableCell/EllipsisTableCell.tsx
-var import_material14 = require("@mui/material");
+var import_material15 = 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, {
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var EllipsisTableCellRoot = (0, import_material15.styled)(import_material15.TableCell, {
   name: "EllipsisTableCell",
   shouldForwardProp: (prop) => prop !== "width",
   slot: "Root"
@@ -566,29 +577,29 @@ var EllipsisTableCellWithRef = (0, import_react6.forwardRef)(
         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 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_link2.LinkEx, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
       }
       return value;
     }, [children, href, link, to, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
   }
 );
 EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
 var EllipsisTableCell = EllipsisTableCellWithRef;
 
 // src/components/TableCell/AddressTableCell.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = 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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.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 import_jsx_runtime15 = require("react/jsx-runtime");
 var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
   const ref = (0, import_react8.useRef)(null);
   const [tableCellRef, dispatch] = (0, import_react_event.useEvent)(void 0, ref);
@@ -601,7 +612,7 @@ var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashC
       dispatch == null ? void 0 : dispatch("hash", "click", value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     EllipsisTableCell,
     {
       onClick: handleCellClick,
@@ -615,31 +626,31 @@ var HashTableCell = ({ value, archive, dataType, network, exploreDomain, onHashC
 };
 
 // src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
-var import_material15 = require("@mui/material");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_material16 = require("@mui/material");
+var import_jsx_runtime16 = 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 });
+  const theme = (0, import_material16.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material16.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 import_material17 = require("@mui/material");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ThemeTokenAvatarGroup = ({ images, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material16.AvatarGroup, { ...props, children: images == null ? void 0 : images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ThemeTokenAvatar, { src: image }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material17.AvatarGroup, { ...props, children: images == null ? void 0 : images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeTokenAvatar, { src: image }, index)) });
 };
 
 // src/components/TokenBar/TokenBar.tsx
-var import_material17 = require("@mui/material");
+var import_material18 = require("@mui/material");
 var import_react_flexbox6 = require("@xylabs/react-flexbox");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material18.Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_flexbox6.FlexRow, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material18.Typography, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
       text1,
       text1Suffix
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material17.Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material18.Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
       text2,
       text2Suffix
     ] })
@@ -797,15 +808,15 @@ var useGetTokenData = (symbols) => {
 };
 
 // src/components/TokenSummary/TokenSummary.tsx
-var import_material18 = require("@mui/material");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_material19 = require("@mui/material");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_material18.CardHeader,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_material19.CardHeader,
       {
-        avatar: /* @__PURE__ */ (0, import_jsx_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 }),
+        avatar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ThemeTokenAvatar, { src: icon, alt: symbol }),
+        title: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
         ...props
       }
     ),
@@ -814,11 +825,11 @@ var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
 };
 
 // src/components/TypographyEx.tsx
-var import_material19 = require("@mui/material");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_material20 = require("@mui/material");
+var import_jsx_runtime20 = 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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material20.Typography, { className: gradient === "text" ? classes().heading : void 0, ...props });
 };
 
 // src/contexts/contextEx/create.ts
@@ -844,7 +855,7 @@ var ResolvedDivinerContext = () => createContextEx();
 
 // src/contexts/diviner/Provider.tsx
 var import_react11 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, children, context }) => {
   const [diviner, setDiviner] = (0, import_react11.useState)(divinerProp);
   (0, import_react11.useEffect)(() => {
@@ -859,7 +870,7 @@ var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, childre
       return diviner;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     context.Provider,
     {
       value: {
@@ -877,10 +888,10 @@ var ListModeContext = createContextEx();
 
 // src/contexts/ListMode/Provider.tsx
 var import_react12 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ListModeProvider = ({ children, defaultListMode }) => {
   const [listMode, setListMode] = (0, import_react12.useState)(defaultListMode ?? "default");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ListModeContext.Provider,
     {
       value: {
@@ -967,14 +978,14 @@ var getActualPaddingX = (element) => {
 
 // src/lib/networkComponents.tsx
 var import_icons_material = require("@mui/icons-material");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var networkComponents = [
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_material.HubRounded, { ...props }), name: "Node", slug: "node" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_material.TimerRounded, { ...props }), name: "Sentinel", slug: "sentinel" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_material.InsertLinkRounded, { ...props }), name: "Bridge", slug: "bridge" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_material.Inventory2Rounded, { ...props }), name: "Archivist", slug: "archivist" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_material.BubbleChartRounded, { ...props }), name: "Diviner", slug: "diviner" },
-  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_material.VisibilityRounded, { ...props }), name: "Witness", slug: "witness" }
+  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.HubRounded, { ...props }), name: "Node", slug: "node" },
+  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.TimerRounded, { ...props }), name: "Sentinel", slug: "sentinel" },
+  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.InsertLinkRounded, { ...props }), name: "Bridge", slug: "bridge" },
+  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.Inventory2Rounded, { ...props }), name: "Archivist", slug: "archivist" },
+  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.BubbleChartRounded, { ...props }), name: "Diviner", slug: "diviner" },
+  { icon: (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons_material.VisibilityRounded, { ...props }), name: "Witness", slug: "witness" }
 ];
 var findNetworkComponentIndex = (slug) => {
   return networkComponents.findIndex((info) => info.slug === slug);
@@ -992,6 +1003,7 @@ var findNetworkComponent = (slug) => {
   EllipsizeBox,
   ErrorBoundary,
   HashTableCell,
+  LabeledTextFieldWrapper,
   ListItemButtonEx,
   ListItemButtonExTo,
   ListModeContext,