@xyo-network/os-react-runtime 2.3.0 → 2.3.2

package/dist/browser/index.mjs

@@ -35,12 +35,15 @@ var ErrorRenderWithSupportDefault = (props) => {
 // src/components/RenderHtml.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var RenderHtml = ({ htmlString }) => {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      style: { height: 64, width: 64 },
-      dangerouslySetInnerHTML: { __html: htmlString }
-    }
+  return (
+    // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: { height: 64, width: 64 },
+        dangerouslySetInnerHTML: { __html: htmlString }
+      }
+    )
   );
 };
 
@@ -162,8 +165,8 @@ import { Stack as Stack2 } from "@mui/material";
 import { useColorSchemeEx as useColorSchemeEx4 } from "@xylabs/react-invertible-theme";
 
 // src/DappPage.tsx
-import { Container as Container3, Typography as Typography9 } from "@mui/material";
-import { FlexCol as FlexCol12 } from "@xylabs/react-flexbox";
+import { Container as Container3, Typography as Typography10 } from "@mui/material";
+import { FlexCol as FlexCol13 } from "@xylabs/react-flexbox";
 import { ThrownErrorBoundary } from "@xyo-network/react-error";
 
 // src/modules/Dapp/Button/hooks/useLaunchPoint.tsx
@@ -260,6 +263,7 @@ var ResourceHooks = class {
     const xyOs = useXyOsUiContext();
     return this.buildResource(xyOs, pathPrefix);
   };
+  // eslint-disable-next-line @eslint-react/hooks-extra/no-redundant-custom-hook
   useResourceViewsFromContext = (context, pathPrefix) => {
     const [resource, resourceError] = this.buildResource(context, pathPrefix);
     const views = this.buildViews(resource);
@@ -347,7 +351,7 @@ import { useEffect as useEffect4 } from "react";
 var biosBoot;
 var useBios = () => {
   const [biosExternalInterface, biosError] = usePromise2(async () => {
-    if (biosBoot) return await biosBoot;
+    if (biosBoot !== void 0) return await biosBoot;
     biosBoot = boot();
     return await biosBoot;
   }, []);
@@ -365,7 +369,7 @@ var kernelBoot;
 var useKernel = (locator, params) => {
   const bios = useBios();
   const [kernelExternalInterface, kernelError] = usePromise3(async () => {
-    if (kernelBoot) return await kernelBoot;
+    if (kernelBoot !== void 0) return await kernelBoot;
     if (bios) {
       kernelBoot = async function() {
         const kernel = new Kernel();
@@ -1428,9 +1432,9 @@ var DappIconButton = ({
     }
     return str;
   };
-  const onClickIcon = () => {
+  const onClickIcon = async () => {
     XyOsMonitor2.trackEvent("Launch dApp", { "Dapp Name": `${dappName}` });
-    sendIntent?.(DappIntentCaller2.buildIntent(DappIntentCaller2.OsDappName, DappIntentTypes5.Launch, dappName)).catch(console.error);
+    await sendIntent?.(DappIntentCaller2.buildIntent(DappIntentCaller2.OsDappName, DappIntentTypes5.Launch, dappName));
   };
   return /* @__PURE__ */ jsxs2(FlexCol2, { alignItems: "stretch", justifyContent: "stretch", children: [
     /* @__PURE__ */ jsx7(DappLaunchFrame, { id: "dapp-launch-frame", open: intentType === DappIntentTypes5.Launch, launchLeft, launchTop, children }),
@@ -1476,9 +1480,9 @@ var DappIconButton = ({
 
 // src/modules/Dapp/modules/Window/AppBar.tsx
 import {
-  ArrowDropDownCircleOutlined,
   BugReport,
-  CancelOutlined
+  CloseRounded,
+  RemoveRounded
 } from "@mui/icons-material";
 import {
   AppBar,
@@ -1573,7 +1577,7 @@ var DappBar = ({
           {
             disableGutters: true,
             sx: { paddingX: 2 },
-            children: /* @__PURE__ */ jsx9(Typography2, { noWrap: true, variant: "h5", letterSpacing: "-1px", fontWeight: "300", children: title })
+            children: /* @__PURE__ */ jsx9(Typography2, { noWrap: true, variant: "h6", letterSpacing: "-1px", children: title })
           }
         ),
         /* @__PURE__ */ jsx9(FlexGrowRow2, {}),
@@ -1613,19 +1617,15 @@ var DappBar = ({
               /* @__PURE__ */ jsx9(Tooltip2, { title: "Minimize", children: /* @__PURE__ */ jsx9(
                 IconButton2,
                 {
-                  onClick: () => {
-                    sendIntent?.(DappIntentCaller3.buildIntent(DappIntentCaller3.OsDappName, DappIntentTypes6.Minimize, name))?.catch(console.error);
-                  },
-                  children: /* @__PURE__ */ jsx9(ArrowDropDownCircleOutlined, { htmlColor: "inherit" })
+                  onClick: async () => await sendIntent?.(DappIntentCaller3.buildIntent(DappIntentCaller3.OsDappName, DappIntentTypes6.Minimize, name)),
+                  children: /* @__PURE__ */ jsx9(RemoveRounded, { htmlColor: "inherit" })
                 }
               ) }),
               /* @__PURE__ */ jsx9(Tooltip2, { title: "Close", children: /* @__PURE__ */ jsx9(
                 IconButton2,
                 {
-                  onClick: () => {
-                    sendIntent?.(DappIntentCaller3.buildIntent(DappIntentCaller3.OsDappName, DappIntentTypes6.Close, name))?.catch(console.error);
-                  },
-                  children: /* @__PURE__ */ jsx9(CancelOutlined, { htmlColor: "inherit" })
+                  onClick: async () => await sendIntent?.(DappIntentCaller3.buildIntent(DappIntentCaller3.OsDappName, DappIntentTypes6.Close, name)),
+                  children: /* @__PURE__ */ jsx9(CloseRounded, { htmlColor: "inherit" })
                 }
               ) })
             ]
@@ -1901,7 +1901,7 @@ var DefaultComingSoon = ({
 };
 
 // src/modules/Dapp/modules/Window/DappWindow.tsx
-import { FlexCol as FlexCol9 } from "@xylabs/react-flexbox";
+import { FlexCol as FlexCol10 } from "@xylabs/react-flexbox";
 import { NameTransforms as NameTransforms4 } from "@xyo-network/os-runtime";
 import { ErrorBoundary, ErrorRender as ErrorRender3 } from "@xyo-network/react-error";
 import { NodeProvider as NodeProvider2 } from "@xyo-network/react-node";
@@ -2072,9 +2072,7 @@ var DappAccessDialog = ({
     children ? /* @__PURE__ */ jsx15(DialogContent2, { dividers: true, children }) : null,
     /* @__PURE__ */ jsxs9(DialogActions2, { children: [
       /* @__PURE__ */ jsx15(Button, { variant: "outlined", onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ jsx15(Button, { variant: "contained", onClick: () => {
-        handleAllow().catch(console.error);
-      }, children: "Allow" })
+      /* @__PURE__ */ jsx15(Button, { variant: "contained", onClick: handleAllow, children: "Allow" })
     ] })
   ] });
 };
@@ -2736,34 +2734,49 @@ var StyledBottomNavigationAction = styled3(BottomNavigationAction, { name: "Styl
 });
 
 // src/modules/Dapp/modules/Window/menu/Drawer.tsx
-import { BugReport as BugReport2 } from "@mui/icons-material";
 import {
-  Divider as Divider3,
+  alpha as alpha4,
+  darken,
   Drawer,
-  IconButton as IconButton3,
   List,
   ListItem,
-  ListItemButton,
   ListItemIcon,
   ListItemText,
+  Tooltip as Tooltip4,
+  Typography as Typography8,
+  useTheme as useTheme7
+} from "@mui/material";
+import {
+  FlexCol as FlexCol9,
+  FlexGrowRow as FlexGrowRow5,
+  FlexRow as FlexRow8
+} from "@xylabs/react-flexbox";
+import { useColorSchemeEx as useColorSchemeEx2 } from "@xylabs/react-invertible-theme";
+import { XyOsMonitor as XyOsMonitor3 } from "@xyo-network/os-runtime";
+import { useEffect as useEffect17, useState as useState17 } from "react";
+
+// src/modules/Dapp/modules/Window/menu/BottomMenuArea.tsx
+import {
+  BugReport as BugReport2,
+  KeyboardArrowDownRounded,
+  KeyboardArrowUpRounded
+} from "@mui/icons-material";
+import {
+  Card as Card3,
+  Collapse,
+  Divider as Divider3,
+  IconButton as IconButton3,
   Stack,
-  styled as styled4,
   Toolbar as Toolbar2,
   Tooltip as Tooltip3,
   Typography as Typography7,
   useTheme as useTheme6
 } from "@mui/material";
 import { RotationAnimation } from "@xylabs/react-animation";
-import {
-  FlexCol as FlexCol8,
-  FlexGrowRow as FlexGrowRow5,
-  FlexRow as FlexRow7
-} from "@xylabs/react-flexbox";
-import { DarkModeIconButtonForColorScheme as DarkModeIconButtonForColorScheme2, useColorSchemeEx as useColorSchemeEx2 } from "@xylabs/react-invertible-theme";
+import { FlexCol as FlexCol8, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
+import { DarkModeIconButtonForColorScheme as DarkModeIconButtonForColorScheme2 } from "@xylabs/react-invertible-theme";
 import { LinkEx as LinkEx2 } from "@xylabs/react-link";
-import { XyOsMonitor as XyOsMonitor3 } from "@xyo-network/os-runtime";
-import { useEffect as useEffect17, useState as useState16 } from "react";
-import XyoOSLogoBlack from "./xyoOS-Icon-Black-ACSS4SEQ.svg";
+import { useState as useState16 } from "react";
 import XyoOSLogoWhite from "./xyoOS-Icon-White-47MP66MD.svg";
 
 // src/modules/Dapp/modules/Window/menu/SocialData.tsx
@@ -2820,8 +2833,125 @@ var socialLinksData = [
   }
 ];
 
-// src/modules/Dapp/modules/Window/menu/Drawer.tsx
+// src/modules/Dapp/modules/Window/menu/BottomMenuArea.tsx
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var BottomMenuArea = ({ openDebug, backgroundColor }) => {
+  const theme = useTheme6();
+  const [expanded, setExpanded] = useState16(false);
+  const logo = XyoOSLogoWhite;
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+  return /* @__PURE__ */ jsxs11(
+    Card3,
+    {
+      sx: {
+        position: "relative",
+        borderTopLeftRadius: "10px",
+        borderTopRightRadius: "10px",
+        borderBottomLeftRadius: "0px",
+        borderBottomRightRadius: "0px",
+        backgroundColor,
+        overflow: "hidden"
+      },
+      elevation: 4,
+      children: [
+        /* @__PURE__ */ jsx23(FlexCol8, { paddingY: 1, alignItems: "stretch", children: /* @__PURE__ */ jsxs11(
+          Stack,
+          {
+            paddingX: 2,
+            justifyContent: "space-between",
+            flexDirection: "row",
+            gap: 0.5,
+            onClick: handleExpandClick,
+            sx: { textTransform: "none", cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx23(Typography7, { gutterBottom: false, children: "More" }),
+              expanded ? /* @__PURE__ */ jsx23(KeyboardArrowUpRounded, { sx: { color: "#fff" } }) : /* @__PURE__ */ jsx23(KeyboardArrowDownRounded, { sx: { color: "#fff" } })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs11(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, sx: { paddingBottom: 3, color: "#fff" }, children: [
+          /* @__PURE__ */ jsx23(Divider3, { flexItem: true }),
+          /* @__PURE__ */ jsxs11(FlexCol8, { alignItems: "center", children: [
+            /* @__PURE__ */ jsxs11(Toolbar2, { sx: { paddingX: 1.5 }, children: [
+              /* @__PURE__ */ jsx23(Tooltip3, { title: "Debug Node View", children: /* @__PURE__ */ jsx23(IconButton3, { onClick: openDebug, sx: { color: "#fff" }, children: /* @__PURE__ */ jsx23(BugReport2, {}) }) }),
+              /* @__PURE__ */ jsx23(Tooltip3, { title: "Toggle Light/Dark Mode", children: /* @__PURE__ */ jsx23("span", { children: /* @__PURE__ */ jsx23(DarkModeIconButtonForColorScheme2, { defaultLightModeColor: "warning" }) }) })
+            ] }),
+            /* @__PURE__ */ jsx23(FlexRow7, { flexWrap: "wrap", children: socialLinksData.map((social, index) => /* @__PURE__ */ jsx23(RotationAnimation, { rotation: 20, children: /* @__PURE__ */ jsx23(
+              IconButton3,
+              {
+                sx: { color: "#fff" },
+                href: social.link,
+                target: "_blank",
+                children: social.icon
+              }
+            ) }, index)) }),
+            /* @__PURE__ */ jsxs11(FlexRow7, { padding: 1, justifyContent: "center", gap: 0.5, children: [
+              /* @__PURE__ */ jsx23(Typography7, { variant: "body2", color: theme.palette.text.primary, children: "Powered By" }),
+              /* @__PURE__ */ jsx23(
+                "img",
+                {
+                  style: { color: theme.palette.text.primary, fill: theme.palette.text.primary },
+                  src: logo,
+                  width: "auto",
+                  height: "20px"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx23(Typography7, { variant: "caption", color: theme.palette.text.primary, children: "Copyright \xA9 2024 XY Labs, Inc." }),
+            /* @__PURE__ */ jsxs11(Stack, { gap: 0.5, flexDirection: "row", children: [
+              /* @__PURE__ */ jsx23(LinkEx2, { color: "inherit", target: "_blank", href: "https://xylabs.com/privacy/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "Privacy" }) }),
+              " ",
+              "\u2022",
+              " ",
+              /* @__PURE__ */ jsx23(LinkEx2, { color: "inherit", target: "_blank", href: "https://xylabs.com/terms/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "Terms" }) }),
+              " ",
+              "\u2022",
+              " ",
+              /* @__PURE__ */ jsx23(LinkEx2, { color: "inherit", target: "_blank", href: "https://xyo.network/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "XYO Website" }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/modules/Dapp/modules/Window/menu/StyledListItems.tsx
+import { ListItemButton, styled as styled4 } from "@mui/material";
+var StyledMenuIconWrapSpan = styled4("span", { name: "StyledMenuIconWrapSpan" })(() => ({
+  alignItems: "center",
+  display: "inline-flex",
+  flexDirection: "column"
+}));
+var StyledListItemButton = styled4(ListItemButton, { name: "StyledListItemButton" })(({ theme, active }) => {
+  const activeOrHoverColor = theme.palette.primary.main;
+  return {
+    "position": "relative",
+    "padding": "8px 16px",
+    "borderRadius": "12px",
+    "transition": "background-color 0.3s ease",
+    "&:hover": {
+      backgroundColor: "transparent",
+      borderRadius: "12px"
+    },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: "6px",
+      backgroundColor: active ? activeOrHoverColor : "transparent",
+      borderRadius: "0 4px 4px 0",
+      transition: "background-color 0.3s ease"
+    }
+  };
+});
+
+// src/modules/Dapp/modules/Window/menu/Drawer.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var DappMenuDrawer = ({
   activePath,
   context,
@@ -2833,11 +2963,11 @@ var DappMenuDrawer = ({
   version,
   ...props
 }) => {
-  const [path, setPath] = useState16("");
+  const [path, setPath] = useState17("");
   const { darkMode } = useColorSchemeEx2();
-  const theme = useTheme6();
-  const activeColor = darkMode ? theme.palette.primary.main : theme.palette.secondary.main;
-  const logo = darkMode ? XyoOSLogoWhite : XyoOSLogoBlack;
+  const theme = useTheme7();
+  const drawerColor = darkMode ? theme.palette.background.paper : darken(theme.palette.primary.main, 0.5);
+  const activeColor = theme.palette.primary.light;
   useEffect17(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       const newPath = menuItems.find((item) => activePath === item.path)?.path ?? "";
@@ -2854,124 +2984,106 @@ var DappMenuDrawer = ({
     debugOpen,
     openDebug
   } = useDebugClick();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Drawer,
     {
       variant: "permanent",
       anchor: "left",
       PaperProps: {
         sx: {
-          background: "transparent",
-          borderRight: "none",
-          position: "static"
+          position: "static",
+          backgroundColor: drawerColor,
+          borderRight: "none"
         }
       },
-      sx: { borderRight: `solid ${darkMode ? theme.palette.grey[900] : theme.palette.grey[300]}`, maxWidth: "280px" },
+      sx: { width: "280px" },
       ...props,
-      children: /* @__PURE__ */ jsxs11(FlexCol8, { alignItems: "stretch", justifyContent: "space-between", height: "100dvh", children: [
-        /* @__PURE__ */ jsxs11(FlexCol8, { paddingY: 1, paddingX: 2, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsx23(Tooltip3, { title: version, children: /* @__PURE__ */ jsxs11(
+      children: /* @__PURE__ */ jsxs12(FlexCol9, { alignItems: "stretch", justifyContent: "space-between", height: "100dvh", children: [
+        /* @__PURE__ */ jsxs12(FlexCol9, { alignItems: "stretch", justifyContent: "flex-start", flexGrow: 1, overflow: "auto", children: [
+          /* @__PURE__ */ jsx24(Tooltip4, { title: version, children: /* @__PURE__ */ jsxs12(
             FlexGrowRow5,
             {
-              marginBottom: 2,
+              id: "dapp-name-and-icon",
+              padding: 2,
               justifyContent: "flex-start",
               gap: 1,
               sx: { cursor: "pointer" },
+              flexGrow: 0,
               children: [
                 iconSvg ? RenderHtml({ htmlString: iconSvg }) : null,
-                /* @__PURE__ */ jsx23(Typography7, { noWrap: true, variant: "h5", letterSpacing: "-1px", fontWeight: "300", children: name })
+                /* @__PURE__ */ jsx24(Typography8, { noWrap: true, variant: "h6", letterSpacing: "-1px", children: name })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx23(DebugDialogWithNode, { closeDebug, debugOpen, context }),
-          /* @__PURE__ */ jsx23(List, { sx: { p: 0 }, children: menuItems?.map(({
+          /* @__PURE__ */ jsx24(DebugDialogWithNode, { closeDebug, debugOpen, context }),
+          /* @__PURE__ */ jsx24(List, { sx: { p: 0, overflow: "auto" }, children: menuItems?.map(({
             svgIcon: icon,
             primaryText,
             path: pathFromPayload
-          }) => {
-            return /* @__PURE__ */ jsx23(
-              ListItem,
-              {
-                disablePadding: true,
-                sx: {
-                  // Note: setting color here lets it cascade down to both text and svg elements with fill="currentColor"
-                  // see - https://css-tricks.com/cascading-svg-fill-color/
-                  color: pathFromPayload === path ? activeColor : void 0
-                },
-                children: /* @__PURE__ */ jsxs11(ListItemButton, { onClick: () => handleChange(pathFromPayload), children: [
-                  /* @__PURE__ */ jsx23(ListItemIcon, { sx: { color: "inherit" }, children: /* @__PURE__ */ jsx23(
-                    StyledMenuIconWrapSpan,
+          }) => /* @__PURE__ */ jsx24(
+            ListItem,
+            {
+              disablePadding: true,
+              sx: { paddingBottom: 1 },
+              children: /* @__PURE__ */ jsx24(
+                StyledListItemButton,
+                {
+                  onClick: () => handleChange(pathFromPayload),
+                  active: pathFromPayload === path,
+                  disableRipple: true,
+                  disableTouchRipple: true,
+                  children: /* @__PURE__ */ jsxs12(
+                    FlexRow8,
                     {
-                      ref: (ref) => {
-                        if (ref) {
-                          ref.innerHTML = icon ?? "";
-                        }
-                      }
+                      flexGrow: 1,
+                      paddingX: 2,
+                      paddingY: 0.5,
+                      sx: { "&:hover": { backgroundColor: alpha4("#ffffff", 0.05) }, "borderRadius": "10px" },
+                      children: [
+                        /* @__PURE__ */ jsx24(
+                          ListItemIcon,
+                          {
+                            sx: { color: pathFromPayload === path ? activeColor : alpha4("#fff", 0.3), justifyContent: "center" },
+                            children: /* @__PURE__ */ jsx24(
+                              StyledMenuIconWrapSpan,
+                              {
+                                ref: (ref) => {
+                                  if (ref) {
+                                    ref.innerHTML = icon ?? "";
+                                  }
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx24(
+                          ListItemText,
+                          {
+                            primaryTypographyProps: {
+                              fontWeight: path === pathFromPayload ? "bold" : "inherit",
+                              color: pathFromPayload === path ? "inherit" : alpha4(theme.palette.text.primary, 0.5)
+                            },
+                            primary: primaryText,
+                            style: { opacity: pathFromPayload === path ? 1 : 0.5 }
+                          }
+                        )
+                      ]
                     }
-                  ) }),
-                  /* @__PURE__ */ jsx23(ListItemText, { primary: primaryText })
-                ] })
-              },
-              primaryText
-            );
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs11(FlexCol8, { children: [
-          /* @__PURE__ */ jsx23(Divider3, { variant: "middle", flexItem: true }),
-          /* @__PURE__ */ jsxs11(FlexCol8, { padding: 2, children: [
-            /* @__PURE__ */ jsxs11(Toolbar2, { sx: { paddingX: 1.5 }, children: [
-              /* @__PURE__ */ jsx23(Tooltip3, { title: "Debug Node View", children: /* @__PURE__ */ jsx23(IconButton3, { onClick: openDebug, children: /* @__PURE__ */ jsx23(BugReport2, { sx: { color: theme.palette.text.primary } }) }) }),
-              /* @__PURE__ */ jsx23(Tooltip3, { title: "Toggle Light/Dark Mode", children: /* @__PURE__ */ jsx23("span", { children: /* @__PURE__ */ jsx23(DarkModeIconButtonForColorScheme2, { defaultLightModeColor: "warning" }) }) })
-            ] }),
-            /* @__PURE__ */ jsx23(FlexRow7, { flexWrap: "wrap", children: socialLinksData.map((social, index) => {
-              return /* @__PURE__ */ jsx23(RotationAnimation, { rotation: 20, children: /* @__PURE__ */ jsx23(
-                IconButton3,
-                {
-                  sx: { color: theme.palette.text.primary },
-                  href: social.link,
-                  target: "_blank",
-                  children: social.icon
-                }
-              ) }, index);
-            }) }),
-            /* @__PURE__ */ jsxs11(FlexRow7, { padding: 1, justifyContent: "center", gap: 0.5, children: [
-              /* @__PURE__ */ jsx23(Typography7, { variant: "body2", color: theme.palette.text.primary, children: "Powered By" }),
-              /* @__PURE__ */ jsx23(
-                "img",
-                {
-                  style: { color: theme.palette.text.primary, fill: theme.palette.text.primary },
-                  src: logo,
-                  width: "auto",
-                  height: "20px"
+                  )
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsx23(LinkEx2, { target: "_blank", href: "https://xylabs.com/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "Copyright \xA9 2024 XY Labs, Inc." }) }),
-            /* @__PURE__ */ jsxs11(Stack, { gap: 0.5, flexDirection: "row", children: [
-              /* @__PURE__ */ jsx23(LinkEx2, { target: "_blank", href: "https://xylabs.com/privacy/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "Privacy" }) }),
-              " ",
-              "\u2022",
-              " ",
-              /* @__PURE__ */ jsx23(LinkEx2, { target: "_blank", href: "https://xylabs.com/terms/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "Terms" }) }),
-              " ",
-              "\u2022",
-              " ",
-              /* @__PURE__ */ jsx23(LinkEx2, { target: "_blank", href: "https://xyo.network/", children: /* @__PURE__ */ jsx23(Typography7, { variant: "caption", children: "XYO Website" }) })
-            ] })
-          ] })
-        ] })
+            },
+            primaryText
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx24(BottomMenuArea, { openDebug, backgroundColor: theme.palette.primary.dark })
       ] })
     }
   );
 };
-var StyledMenuIconWrapSpan = styled4("span", { name: "StyledMenuIconWrapSpan" })(() => ({
-  alignItems: "center",
-  display: "inline-flex",
-  flexDirection: "column"
-}));
 
 // src/modules/Dapp/modules/Window/DappWindow.tsx
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var DappWindow = ({
   dappSet,
   xnsNodeUrl,
@@ -3006,21 +3118,21 @@ var DappWindow = ({
     onPathChange
   } = useDappMenu(context, name);
   const resolvedError = nodeCreateError || menuError;
-  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-    active ? /* @__PURE__ */ jsx24(Helmet, { children: /* @__PURE__ */ jsxs12("title", { children: [
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    active ? /* @__PURE__ */ jsx25(Helmet, { children: /* @__PURE__ */ jsxs13("title", { children: [
       activePath ? `${new NameTransforms4(activePath).deSlug()} | ` : "",
       " ",
       name,
       " ",
       "dApp"
     ] }) }) : null,
-    /* @__PURE__ */ jsx24(ErrorBoundary, { children: /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsx25(ErrorBoundary, { children: /* @__PURE__ */ jsxs13(
       DappChrome,
       {
-        appBar: /* @__PURE__ */ jsx24(Fragment2, { children: /* @__PURE__ */ jsx24(DappBar, { context, name, version, title: activePath ? new NameTransforms4(activePath).deSlug() : "" }) }),
+        appBar: /* @__PURE__ */ jsx25(Fragment2, { children: /* @__PURE__ */ jsx25(DappBar, { context, name, version, title: activePath ? new NameTransforms4(activePath).deSlug() : "" }) }),
         height: "100dvh",
         width: "100dvw",
-        largeScreenMenu: /* @__PURE__ */ jsx24(
+        largeScreenMenu: /* @__PURE__ */ jsx25(
           DappMenuDrawer,
           {
             context,
@@ -3032,7 +3144,7 @@ var DappWindow = ({
             menuItems: menuItemsVisible
           }
         ),
-        smallScreenMenu: /* @__PURE__ */ jsx24(
+        smallScreenMenu: /* @__PURE__ */ jsx25(
           DappBottomNavigation,
           {
             activePath,
@@ -3042,15 +3154,15 @@ var DappWindow = ({
             sx: { display: menuConfig ? "flex" : "none" }
           }
         ),
-        splashScreen: resolvedError ? null : /* @__PURE__ */ jsx24(DappLoadingFlexbox, { minimize: minimized, name, open }),
+        splashScreen: resolvedError ? null : /* @__PURE__ */ jsx25(DappLoadingFlexbox, { minimize: minimized, name, open }),
         children: [
-          resolvedError || errors?.length > 0 ? /* @__PURE__ */ jsxs12(FlexCol9, { padding: 2, children: [
-            resolvedError ? /* @__PURE__ */ jsx24(ErrorRender3, { error: resolvedError, scope: "DappWindow" }) : null,
-            errors.map((error, index) => /* @__PURE__ */ jsx24(ErrorRender3, { error, scope: "DappWindowErrors" }, index))
+          resolvedError || errors?.length > 0 ? /* @__PURE__ */ jsxs13(FlexCol10, { padding: 2, children: [
+            resolvedError ? /* @__PURE__ */ jsx25(ErrorRender3, { error: resolvedError, scope: "DappWindow" }) : null,
+            errors.map((error, index) => /* @__PURE__ */ jsx25(ErrorRender3, { error, scope: "DappWindowErrors" }, index))
           ] }) : null,
-          /* @__PURE__ */ jsx24(WalletProvider, { rootWallet: dappWallet, children: context === null ? null : /* @__PURE__ */ jsx24(XyOsUiContextProvider, { value: context, children: /* @__PURE__ */ jsx24(NodeProvider2, { node: context?.root, children: active ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
-            /* @__PURE__ */ jsx24(
-              FlexCol9,
+          /* @__PURE__ */ jsx25(WalletProvider, { rootWallet: dappWallet, children: context === null ? null : /* @__PURE__ */ jsx25(XyOsUiContextProvider, { value: context, children: /* @__PURE__ */ jsx25(NodeProvider2, { node: context?.root, children: active ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+            /* @__PURE__ */ jsx25(
+              FlexCol10,
               {
                 position: "absolute",
                 top: 0,
@@ -3060,10 +3172,10 @@ var DappWindow = ({
                 alignItems: "stretch",
                 justifyContent: "stretch",
                 sx: { overflowY: scrollable ? "auto" : "hidden" },
-                children: /* @__PURE__ */ jsx24(TypedDappComponent, { name })
+                children: /* @__PURE__ */ jsx25(TypedDappComponent, { name })
               }
             ),
-            /* @__PURE__ */ jsx24(DappAccessFlexbox, { context })
+            /* @__PURE__ */ jsx25(DappAccessFlexbox, { context })
           ] }) : null }) }) })
         ]
       }
@@ -3072,28 +3184,28 @@ var DappWindow = ({
 };
 
 // src/modules/Dapp/Container.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var DappContainer = ({
   dappSet,
   xnsNodeUrl,
   xnsNetwork
 }) => {
   const { dapp, dappIcon } = dappSet;
-  return /* @__PURE__ */ jsx25(DappIconButton, { dappIcon, dappIconSvg: dapp.params.iconSvg, dappName: dapp?.config.name, children: /* @__PURE__ */ jsx25(DappWindow, { dappSet, xnsNodeUrl, xnsNetwork }) });
+  return /* @__PURE__ */ jsx26(DappIconButton, { dappIcon, dappIconSvg: dapp.params.iconSvg, dappName: dapp?.config.name, children: /* @__PURE__ */ jsx26(DappWindow, { dappSet, xnsNodeUrl, xnsNetwork }) });
 };
 
 // src/modules/Dapp/ContainerFlexbox.tsx
 import { Container as Container2 } from "@mui/material";
-import { FlexCol as FlexCol10 } from "@xylabs/react-flexbox";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { FlexCol as FlexCol11 } from "@xylabs/react-flexbox";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ContainerFlexbox = ({
   children,
   containerProps,
   scrollable = true,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx26(
-    FlexCol10,
+  return /* @__PURE__ */ jsx27(
+    FlexCol11,
     {
       id: "container-flexbox",
       alignItems: "center",
@@ -3103,7 +3215,7 @@ var ContainerFlexbox = ({
       gap: 2,
       overflow: scrollable ? "auto" : "unset",
       ...props,
-      children: /* @__PURE__ */ jsx26(Container2, { ...containerProps, children })
+      children: /* @__PURE__ */ jsx27(Container2, { ...containerProps, children })
     }
   );
 };
@@ -3118,18 +3230,18 @@ import { useMemo as useMemo13 } from "react";
 
 // src/modules/Dapp/Page/DividerChip.tsx
 import { Chip as Chip2, CircularProgress } from "@mui/material";
-import { Fragment as Fragment3, jsx as jsx27 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28 } from "react/jsx-runtime";
 var DividerChip = ({ registeredDapps, ...props }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Chip2,
     {
-      avatar: registeredDapps === void 0 ? /* @__PURE__ */ jsx27("span", { children: /* @__PURE__ */ jsx27(
+      avatar: registeredDapps === void 0 ? /* @__PURE__ */ jsx28("span", { children: /* @__PURE__ */ jsx28(
         CircularProgress,
         {
           size: "small",
           sx: { display: "inline" }
         }
-      ) }) : /* @__PURE__ */ jsx27(Fragment3, {}),
+      ) }) : /* @__PURE__ */ jsx28(Fragment3, {}),
       label: `${registeredDapps?.length ? "" : "Loading "}Beta dApps`,
       size: "small",
       sx: { gap: 0.5 },
@@ -3139,7 +3251,7 @@ var DividerChip = ({ registeredDapps, ...props }) => {
 };
 
 // src/modules/Dapp/Page/Row.tsx
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 var DappsRow = ({
   chipLabel,
   installType,
@@ -3148,14 +3260,14 @@ var DappsRow = ({
   xnsNodeUrl
 }) => {
   const filteredRegisteredDappSets = useMemo13(() => DappInstallTypeFilters[installType](registeredDappsSet), [installType, registeredDappsSet]);
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsx29(
       Divider4,
       {
         variant: "middle",
         sx: { marginY: 3 },
         flexItem: true,
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx29(
           DividerChip,
           {
             label: `${filteredRegisteredDappSets === void 0 ? "Loading " : ""}${chipLabel}`,
@@ -3164,8 +3276,8 @@ var DappsRow = ({
         )
       }
     ),
-    filteredRegisteredDappSets?.length ? /* @__PURE__ */ jsx28(Fade2, { in: !!filteredRegisteredDappSets?.length, timeout: 1e3, children: /* @__PURE__ */ jsx28(StyledGridContainer, { children: filteredRegisteredDappSets?.map(
-      (dappSet, index) => /* @__PURE__ */ jsx28(DappContainer, { dappSet, xnsNodeUrl, xnsNetwork }, index)
+    filteredRegisteredDappSets?.length ? /* @__PURE__ */ jsx29(Fade2, { in: !!filteredRegisteredDappSets?.length, timeout: 1e3, children: /* @__PURE__ */ jsx29(StyledGridContainer, { children: filteredRegisteredDappSets?.map(
+      (dappSet, index) => /* @__PURE__ */ jsx29(DappContainer, { dappSet, xnsNodeUrl, xnsNetwork }, index)
     ) }) }) : null
   ] });
 };
@@ -3181,7 +3293,7 @@ var StyledGridContainer = styled5("div", { name: "StyledGridContainer" })(({ the
 
 // src/modules/network/components/LoadingIndicator.tsx
 import { SignalCellularAltOutlined } from "@mui/icons-material";
-import { Tooltip as Tooltip4, useTheme as useTheme7 } from "@mui/material";
+import { Tooltip as Tooltip5, useTheme as useTheme8 } from "@mui/material";
 import { useColorSchemeEx as useColorSchemeEx3 } from "@xylabs/react-invertible-theme";
 import { useMemo as useMemo16 } from "react";
 
@@ -3283,11 +3395,11 @@ var StyledNetworkLoadingIndicator = styled6("div", { name: "StyledNetworkLoading
 }));
 
 // src/modules/network/components/LoadingIndicator.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
-var WaitingForNetwork = () => /* @__PURE__ */ jsx29(Tooltip4, { title: "Waiting for Network initialization", children: /* @__PURE__ */ jsx29(StyledNetworkLoadingIndicator, {}) });
+import { jsx as jsx30 } from "react/jsx-runtime";
+var WaitingForNetwork = () => /* @__PURE__ */ jsx30(Tooltip5, { title: "Waiting for Network initialization", children: /* @__PURE__ */ jsx30(StyledNetworkLoadingIndicator, {}) });
 var NetworkLoadingIndicator = ({ highContrast }) => {
   const { darkMode } = useColorSchemeEx3();
-  const theme = useTheme7();
+  const theme = useTheme8();
   const { networkReady } = useOsNetwork();
   const highContrastSuccessColor = darkMode ? theme.palette.success.dark : theme.palette.success.main;
   const successColor = highContrast ? highContrastSuccessColor : theme.palette.success.main;
@@ -3296,31 +3408,31 @@ var NetworkLoadingIndicator = ({ highContrast }) => {
   const NetworkComponent = useMemo16(() => {
     if (networkReady) {
       const connectionReady = true;
-      return connectionReady ? () => /* @__PURE__ */ jsx29(Tooltip4, { title: "Connected to Network", children: /* @__PURE__ */ jsx29(SignalCellularAltOutlined, { sx: { color: successColor } }) }) : () => /* @__PURE__ */ jsx29(Tooltip4, { title: "Error Connecting to Network", children: /* @__PURE__ */ jsx29(SignalCellularAltOutlined, { sx: { color: errorColor } }) });
+      return connectionReady ? () => /* @__PURE__ */ jsx30(Tooltip5, { title: "Connected to Network", children: /* @__PURE__ */ jsx30(SignalCellularAltOutlined, { sx: { color: successColor } }) }) : () => /* @__PURE__ */ jsx30(Tooltip5, { title: "Error Connecting to Network", children: /* @__PURE__ */ jsx30(SignalCellularAltOutlined, { sx: { color: errorColor } }) });
     } else {
       return WaitingForNetwork;
     }
   }, [errorColor, networkReady, successColor]);
-  return /* @__PURE__ */ jsx29(NetworkComponent, {});
+  return /* @__PURE__ */ jsx30(NetworkComponent, {});
 };
 
 // src/modules/network/components/NetworkButton.tsx
 import { NotInterested } from "@mui/icons-material";
 import { Button as Button2 } from "@mui/material";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 var NetworkButton = ({
   disabled,
   startIcon,
   ...props
 }) => {
   const { networkReady } = useOsNetwork();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Button2,
     {
       disabled: disabled || !networkReady,
-      startIcon: /* @__PURE__ */ jsxs14(Fragment5, { children: [
+      startIcon: /* @__PURE__ */ jsxs15(Fragment5, { children: [
         startIcon,
-        networkReady === false ? /* @__PURE__ */ jsx30(NotInterested, {}) : null
+        networkReady === false ? /* @__PURE__ */ jsx31(NotInterested, {}) : null
       ] }),
       ...props
     }
@@ -3328,31 +3440,31 @@ var NetworkButton = ({
 };
 
 // src/modules/network/components/NetworkReady.tsx
-import { Typography as Typography8 } from "@mui/material";
-import { FlexCol as FlexCol11 } from "@xylabs/react-flexbox";
-import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Typography as Typography9 } from "@mui/material";
+import { FlexCol as FlexCol12 } from "@xylabs/react-flexbox";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 var NetworkReadyFlexBox = ({
   children,
   skipCheck,
   ...props
 }) => {
   const { networkReady } = useOsNetwork();
-  return /* @__PURE__ */ jsx31(Fragment6, { children: networkReady || skipCheck ? children : /* @__PURE__ */ jsxs15(FlexCol11, { height: "100%", ...props, children: [
-    /* @__PURE__ */ jsx31(LoadingOsLogo, { widthInPixels: 100, busy: true }),
-    /* @__PURE__ */ jsx31(Typography8, { fontFamily: "monospace", children: "Loading XYO Name Service..." })
+  return /* @__PURE__ */ jsx32(Fragment6, { children: networkReady || skipCheck ? children : /* @__PURE__ */ jsxs16(FlexCol12, { height: "100%", ...props, children: [
+    /* @__PURE__ */ jsx32(LoadingOsLogo, { widthInPixels: 100, busy: true }),
+    /* @__PURE__ */ jsx32(Typography9, { fontFamily: "monospace", children: "Loading XYO Name Service..." })
   ] }) });
 };
 
 // src/DappPage.tsx
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var DappTitle = ({
   subtitle,
   title,
   ...props
 }) => {
-  return title ? /* @__PURE__ */ jsxs16(FlexCol12, { alignItems: "flex-start", gap: 1, ...props, children: [
-    /* @__PURE__ */ jsx32(Typography9, { variant: "h3", children: /* @__PURE__ */ jsx32("b", { children: title }) }),
-    /* @__PURE__ */ jsx32(Typography9, { gutterBottom: true, variant: "subtitle2", children: subtitle })
+  return title ? /* @__PURE__ */ jsxs17(FlexCol13, { alignItems: "flex-start", gap: 1, ...props, children: [
+    /* @__PURE__ */ jsx33(Typography10, { variant: "h3", children: /* @__PURE__ */ jsx33("b", { children: title }) }),
+    /* @__PURE__ */ jsx33(Typography10, { gutterBottom: true, variant: "subtitle2", children: subtitle })
   ] }) : null;
 };
 var InnerDappPage = ({
@@ -3363,13 +3475,12 @@ var InnerDappPage = ({
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs16(
-    FlexCol12,
+  return /* @__PURE__ */ jsxs17(
+    FlexCol13,
     {
       id: "innerPage",
       sx: {
-        marginX: { sm: 2 },
-        marginY: 2,
+        margin: 2,
         ...sx
       },
       gap: noScroll ? 0 : 2,
@@ -3377,7 +3488,7 @@ var InnerDappPage = ({
       justifyContent: "flex-start",
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx32(DappTitle, { subtitle, title, marginX: 1 }) : null,
+        title ? /* @__PURE__ */ jsx33(DappTitle, { subtitle, title, marginX: 1 }) : null,
         children
       ]
     }
@@ -3392,14 +3503,14 @@ var DappPage = ({
   rollbar,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ThrownErrorBoundary,
     {
-      errorComponent: (error, boundaryName) => /* @__PURE__ */ jsx32(ErrorRenderWithSupportDefault, { errorContext: boundaryName, error, scope: "DappPage" }),
+      errorComponent: (error, boundaryName) => /* @__PURE__ */ jsx33(ErrorRenderWithSupportDefault, { errorContext: boundaryName, error, scope: "DappPage" }),
       rollbar,
       scope: "DappPage",
-      children: /* @__PURE__ */ jsx32(NetworkReadyFlexBox, { skipCheck: !checkNetwork, children: container ? /* @__PURE__ */ jsx32(Container3, { disableGutters: true, maxWidth: container === true ? "md" : container, children: noScroll ? /* @__PURE__ */ jsx32(
-        FlexCol12,
+      children: /* @__PURE__ */ jsx33(NetworkReadyFlexBox, { skipCheck: !checkNetwork, children: container ? /* @__PURE__ */ jsx33(Container3, { disableGutters: true, maxWidth: container === true ? "md" : container, children: noScroll ? /* @__PURE__ */ jsx33(
+        FlexCol13,
         {
           sx: {
             position: "absolute",
@@ -3408,9 +3519,9 @@ var DappPage = ({
             right: 0,
             bottom: 0
           },
-          children: /* @__PURE__ */ jsx32(InnerDappPage, { noScroll, title, subtitle, ...props, flexGrow: 1 })
+          children: /* @__PURE__ */ jsx33(InnerDappPage, { noScroll, title, subtitle, ...props, flexGrow: 1 })
         }
-      ) : /* @__PURE__ */ jsx32(FlexCol12, { width: "100%", height: "100%", alignItems: "stretch", children: /* @__PURE__ */ jsx32(InnerDappPage, { noScroll, title, subtitle, ...props, flexGrow: 1 }) }) }) : noScroll ? /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx33(FlexCol13, { width: "100%", height: "100%", alignItems: "stretch", children: /* @__PURE__ */ jsx33(InnerDappPage, { noScroll, title, subtitle, ...props, flexGrow: 1 }) }) }) : noScroll ? /* @__PURE__ */ jsx33(
         InnerDappPage,
         {
           sx: {
@@ -3426,32 +3537,32 @@ var DappPage = ({
           ...props,
           flexGrow: 1
         }
-      ) : /* @__PURE__ */ jsx32(InnerDappPage, { noScroll, title, subtitle, ...props, flexGrow: 1 }) })
+      ) : /* @__PURE__ */ jsx33(InnerDappPage, { noScroll, title, subtitle, ...props, flexGrow: 1 }) })
     }
   );
 };
 
 // src/components/Widgets/StackOfWidgets.tsx
 import {
-  alpha as alpha6,
+  alpha as alpha7,
   Box as Box3,
-  useTheme as useTheme9
+  useTheme as useTheme10
 } from "@mui/material";
 import {
   animated as animated2,
   to as interpolate,
   useSprings
 } from "@react-spring/web";
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { useDrag } from "react-use-gesture";
 
 // src/components/Widgets/Types/BarGraph/HorizontalBarGraph.tsx
-import { Typography as Typography10 } from "@mui/material";
-import { FlexCol as FlexCol13, FlexGrowRow as FlexGrowRow6 } from "@xylabs/react-flexbox";
+import { Typography as Typography11 } from "@mui/material";
+import { FlexCol as FlexCol14, FlexGrowRow as FlexGrowRow6 } from "@xylabs/react-flexbox";
 
 // src/components/Widgets/Types/BarGraph/StyledLinearProgress.tsx
 import {
-  alpha as alpha4,
+  alpha as alpha5,
   LinearProgress,
   styled as styled7
 } from "@mui/material";
@@ -3460,13 +3571,13 @@ var StyledLinearProgress = styled7(LinearProgress, { name: "StyledLinearProgress
   "MozBoxSizing": "border-box",
   "WebkitBoxSizing": "border-box",
   "background": "transparent",
-  "borderBottom": `1px solid ${alpha4(theme.palette.text.secondary, 0.3)}`,
+  "borderBottom": `1px solid ${alpha5(theme.palette.text.secondary, 0.3)}`,
   "boxSizing": "border-box",
   "height": theme.spacing(0.25)
 }));
 
 // src/components/Widgets/Types/BarGraph/HorizontalBarGraph.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var sampleData = [
   { name: "United States", value: 134 },
   { name: "South Africa", value: 400 },
@@ -3485,20 +3596,23 @@ var HorizontalBarGraph = ({ items = sampleData, ...props }) => {
   });
   console.log(itemsSortedByValue);
   const topValue = itemsSortedByValue[0].value;
-  return /* @__PURE__ */ jsx33(FlexCol13, { alignItems: "stretch", gap: 0.5, ...props, children: items.slice(0, 5).map((item, index) => /* @__PURE__ */ jsxs17(FlexCol13, { alignItems: "stretch", children: [
-    /* @__PURE__ */ jsxs17(FlexGrowRow6, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx33(Typography10, { variant: "caption", maxWidth: "50%", noWrap: true, children: item.name }),
-      /* @__PURE__ */ jsx33(Typography10, { variant: "caption", maxWidth: "50%", children: item.value })
-    ] }),
-    /* @__PURE__ */ jsx33(StyledLinearProgress, { color: "primary", value: item.value / (topValue * 1.25) * 100, variant: "determinate" })
-  ] }, index)) });
+  return /* @__PURE__ */ jsx34(FlexCol14, { alignItems: "stretch", gap: 0.5, ...props, children: items.slice(0, 5).map((item, index) => (
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    /* @__PURE__ */ jsxs18(FlexCol14, { alignItems: "stretch", children: [
+      /* @__PURE__ */ jsxs18(FlexGrowRow6, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx34(Typography11, { variant: "caption", maxWidth: "50%", noWrap: true, children: item.name }),
+        /* @__PURE__ */ jsx34(Typography11, { variant: "caption", maxWidth: "50%", children: item.value })
+      ] }),
+      /* @__PURE__ */ jsx34(StyledLinearProgress, { color: "primary", value: item.value / (topValue * 1.25) * 100, variant: "determinate" })
+    ] }, index)
+  )) });
 };
 
 // src/components/Widgets/Types/DataColumns/TwoColTwoStat.tsx
-import { Typography as Typography11, useTheme as useTheme8 } from "@mui/material";
-import { FlexCol as FlexCol14, FlexGrowRow as FlexGrowRow7 } from "@xylabs/react-flexbox";
+import { Typography as Typography12, useTheme as useTheme9 } from "@mui/material";
+import { FlexCol as FlexCol15, FlexGrowRow as FlexGrowRow7 } from "@xylabs/react-flexbox";
 import { useEffect as useEffect18 } from "react";
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var MAX_LENGTH = 2;
 var validateProps = (props) => {
   if (props.length > MAX_LENGTH) {
@@ -3506,37 +3620,40 @@ var validateProps = (props) => {
   }
 };
 var TwoColTwoStat = ({ items, ...props }) => {
-  const theme = useTheme8();
+  const theme = useTheme9();
   useEffect18(() => {
     validateProps(items);
   }, [items]);
-  return /* @__PURE__ */ jsx34(FlexGrowRow7, { gap: 2, ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs18(FlexCol14, { flexGrow: 1, alignItems: "start", children: [
-    /* @__PURE__ */ jsx34(Typography11, { variant: "h2", fontWeight: theme.typography.fontWeightMedium, children: item.rawInsightValue }),
-    /* @__PURE__ */ jsx34(Typography11, { variant: "body2", children: item.subtitle })
-  ] }, `stat-${index}-${item.unit}`)) });
+  return /* @__PURE__ */ jsx35(FlexGrowRow7, { gap: 2, ...props, children: items.map((item, index) => (
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    /* @__PURE__ */ jsxs19(FlexCol15, { flexGrow: 1, alignItems: "start", children: [
+      /* @__PURE__ */ jsx35(Typography12, { variant: "h2", fontWeight: theme.typography.fontWeightMedium, children: item.rawInsightValue }),
+      /* @__PURE__ */ jsx35(Typography12, { variant: "body2", children: item.subtitle })
+    ] }, `stat-${index}-${item.unit}`)
+  )) });
 };
 
 // src/components/Widgets/Types/Examples/BarGraph.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var ExampleBarGraphWidget = () => {
-  return /* @__PURE__ */ jsx35(WidgetCard, { widgetContent: /* @__PURE__ */ jsx35(HorizontalBarGraph, {}), widgetName: "Friend Locations", timeOfData: 1715713478, widgetPath: "/profile" });
+  return /* @__PURE__ */ jsx36(WidgetCard, { widgetContent: /* @__PURE__ */ jsx36(HorizontalBarGraph, {}), widgetName: "Friend Locations", timeOfData: 1715713478, widgetPath: "/profile" });
 };
 
 // src/components/Widgets/Types/Tables/BooleanTable.tsx
 import { CircleRounded } from "@mui/icons-material";
 import {
-  alpha as alpha5,
+  alpha as alpha6,
   Paper as Paper2,
   styled as styled8,
   TableRow,
-  Typography as Typography12
+  Typography as Typography13
 } from "@mui/material";
 import {
-  FlexCol as FlexCol15,
+  FlexCol as FlexCol16,
   FlexGrowRow as FlexGrowRow8,
-  FlexRow as FlexRow8
+  FlexRow as FlexRow9
 } from "@xylabs/react-flexbox";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var sampleData2 = [
   { name: "@arietrouw", value: true },
   { name: "@officialxyo", value: false },
@@ -3548,7 +3665,7 @@ var StyledLightTableRow = styled8(Paper2, { name: "StyledLightTableRow" })(({ th
   backgroundColor: "transparent",
   padding: theme.spacing(0.75)
 }));
-var StyledTableColumnTitle = styled8(Typography12, { name: "StyledTableColumnTitle" })(({ theme }) => ({
+var StyledTableColumnTitle = styled8(Typography13, { name: "StyledTableColumnTitle" })(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontWeight: theme.typography.fontWeightBold,
   textTransform: "uppercase"
@@ -3558,11 +3675,11 @@ var DefaultTrueOutput = styled8(CircleRounded, { name: "DefaultTrueOutput" })(({
   fontSize: "10px"
 }));
 var DefaultFalseOutput = styled8(CircleRounded, { name: "DefaultFalseOutput" })(({ theme }) => ({
-  fill: alpha5(theme.palette.text.disabled, 0.5),
+  fill: alpha6(theme.palette.text.disabled, 0.5),
   fontSize: "10px"
 }));
-var defaultTrueOutput = /* @__PURE__ */ jsx36(DefaultTrueOutput, {});
-var defaultFalseOutput = /* @__PURE__ */ jsx36(DefaultFalseOutput, {});
+var defaultTrueOutput = /* @__PURE__ */ jsx37(DefaultTrueOutput, {});
+var defaultFalseOutput = /* @__PURE__ */ jsx37(DefaultFalseOutput, {});
 var BooleanTable = ({
   items = sampleData2,
   tableHeaders,
@@ -3570,22 +3687,22 @@ var BooleanTable = ({
   falseOutput = defaultFalseOutput,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs19(FlexCol15, { alignItems: "stretch", ...props, children: [
-    /* @__PURE__ */ jsx36(FlexRow8, { paddingBottom: 0.5, justifyContent: "space-between", children: tableHeaders.map((name) => /* @__PURE__ */ jsx36(StyledTableColumnTitle, { variant: "caption", children: name }, name)) }),
-    /* @__PURE__ */ jsx36(FlexCol15, { alignItems: "stretch", gap: 0.25, children: items.slice(0, 4).map((item, index) => /* @__PURE__ */ jsx36(TableRow, { children: /* @__PURE__ */ jsxs19(FlexGrowRow8, { flexGrow: 1, justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx36(Typography12, { variant: "caption", noWrap: true, maxWidth: "70%", children: item.name }),
+  return /* @__PURE__ */ jsxs20(FlexCol16, { alignItems: "stretch", ...props, children: [
+    /* @__PURE__ */ jsx37(FlexRow9, { paddingBottom: 0.5, justifyContent: "space-between", children: tableHeaders.map((name) => /* @__PURE__ */ jsx37(StyledTableColumnTitle, { variant: "caption", children: name }, name)) }),
+    /* @__PURE__ */ jsx37(FlexCol16, { alignItems: "stretch", gap: 0.25, children: items.slice(0, 4).map((item, index) => /* @__PURE__ */ jsx37(TableRow, { children: /* @__PURE__ */ jsxs20(FlexGrowRow8, { flexGrow: 1, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx37(Typography13, { variant: "caption", noWrap: true, maxWidth: "70%", children: item.name }),
       item.value ? trueOutput : falseOutput
     ] }) }, index)) })
   ] });
 };
 
 // src/components/Widgets/Types/Examples/BooleanTable.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ExampleBooleanTableWidget = () => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     WidgetCard,
     {
-      widgetContent: /* @__PURE__ */ jsx37(
+      widgetContent: /* @__PURE__ */ jsx38(
         BooleanTable,
         {
           items: [
@@ -3606,12 +3723,12 @@ var ExampleBooleanTableWidget = () => {
 };
 
 // src/components/Widgets/Types/Examples/TwoColTwoStat.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var ExampleTwoColTwoStatWidget = () => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     WidgetCard,
     {
-      widgetContent: /* @__PURE__ */ jsx38(
+      widgetContent: /* @__PURE__ */ jsx39(
         TwoColTwoStat,
         {
           items: [
@@ -3638,11 +3755,11 @@ var ExampleTwoColTwoStatWidget = () => {
 };
 
 // src/components/Widgets/StackOfWidgets.tsx
-import { Fragment as Fragment7, jsx as jsx39 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40 } from "react/jsx-runtime";
 var cards = [
-  /* @__PURE__ */ jsx39(ExampleBarGraphWidget, {}, "bar-graph"),
-  /* @__PURE__ */ jsx39(ExampleBooleanTableWidget, {}, "boolean-table"),
-  /* @__PURE__ */ jsx39(ExampleTwoColTwoStatWidget, {}, "two-column")
+  /* @__PURE__ */ jsx40(ExampleBarGraphWidget, {}, "bar-graph"),
+  /* @__PURE__ */ jsx40(ExampleBooleanTableWidget, {}, "boolean-table"),
+  /* @__PURE__ */ jsx40(ExampleTwoColTwoStatWidget, {}, "two-column")
 ];
 var to = (i) => ({
   delay: i * 100,
@@ -3659,8 +3776,8 @@ var from = (_i) => ({
 });
 var trans = (r, s) => `perspective(1500px)  rotateY(${r / 10}deg) scale(${s})`;
 function Deck() {
-  const [gone] = useState17(() => /* @__PURE__ */ new Set());
-  const theme = useTheme9();
+  const [gone] = useState18(() => /* @__PURE__ */ new Set());
+  const theme = useTheme10();
   const [props, api] = useSprings(cards.length, (i) => ({
     ...to(i),
     from: from(i)
@@ -3698,12 +3815,12 @@ function Deck() {
         api.start((i) => to(i));
       }, 600);
   });
-  return /* @__PURE__ */ jsx39(Fragment7, { children: props.map(({
+  return /* @__PURE__ */ jsx40(Fragment7, { children: props.map(({
     x,
     y,
     rot,
     scale
-  }, i) => /* @__PURE__ */ jsx39(
+  }, i) => /* @__PURE__ */ jsx40(
     animated2.div,
     {
       style: {
@@ -3718,14 +3835,14 @@ function Deck() {
         x,
         y
       },
-      children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx40(
         animated2.div,
         {
           ...bind(i),
           style: {
             // WebkitBackdropFilter: 'blur(10px)',
             // backdropFilter: 'blur(10px)',
-            backgroundColor: alpha6(theme.palette.background.paper, 0.2),
+            backgroundColor: alpha7(theme.palette.background.paper, 0.2),
             backgroundPosition: "center center",
             backgroundRepeat: "no-repeat",
             backgroundSize: "auto 85%",
@@ -3746,7 +3863,7 @@ function Deck() {
   )) });
 }
 var StackOfWidgets = () => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     Box3,
     {
       sx: {
@@ -3757,26 +3874,26 @@ var StackOfWidgets = () => {
         justifyContent: "center",
         width: "300px"
       },
-      children: /* @__PURE__ */ jsx39(Deck, {})
+      children: /* @__PURE__ */ jsx40(Deck, {})
     }
   );
 };
 
 // src/components/Widgets/WidgetCardExamples.tsx
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 var WidgetCardExamples = () => {
   const { darkMode } = useColorSchemeEx4();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     DappPage,
     {
       sx: { backgroundImage: darkMode ? `url(${default18})` : `url(${default19})`, backgroundSize: "cover" },
       container: "xl",
       title: "Example Widget Cards",
-      children: /* @__PURE__ */ jsxs20(Stack2, { gap: 2, flexDirection: "row", flexWrap: "wrap", children: [
-        /* @__PURE__ */ jsx40(ExampleTwoColTwoStatWidget, {}),
-        /* @__PURE__ */ jsx40(ExampleBarGraphWidget, {}),
-        /* @__PURE__ */ jsx40(ExampleBooleanTableWidget, {}),
-        /* @__PURE__ */ jsx40(StackOfWidgets, {})
+      children: /* @__PURE__ */ jsxs21(Stack2, { gap: 2, flexDirection: "row", flexWrap: "wrap", children: [
+        /* @__PURE__ */ jsx41(ExampleTwoColTwoStatWidget, {}),
+        /* @__PURE__ */ jsx41(ExampleBarGraphWidget, {}),
+        /* @__PURE__ */ jsx41(ExampleBooleanTableWidget, {}),
+        /* @__PURE__ */ jsx41(StackOfWidgets, {})
       ] })
     }
   );
@@ -3785,7 +3902,7 @@ var WidgetCardExamples = () => {
 // src/DappPathSwitcher.tsx
 import { animated as animated3, useTransition } from "@react-spring/web";
 import { ErrorRender as ErrorRender4 } from "@xyo-network/react-error";
-import { Fragment as Fragment8, jsx as jsx41 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx42 } from "react/jsx-runtime";
 var DappPathSwitcher = ({ activePath, pathToComponent }) => {
   const transitions = useTransition(activePath, {
     enter: { opacity: 1, transform: "translate3d(0, 0, 0)" },
@@ -3794,7 +3911,7 @@ var DappPathSwitcher = ({ activePath, pathToComponent }) => {
   });
   const possibleZIndex = pathToComponent?.findIndex((item) => item.path === activePath);
   const zIndex = possibleZIndex !== -1 && possibleZIndex !== void 0 ? possibleZIndex : 1;
-  return /* @__PURE__ */ jsx41(Fragment8, { children: transitions((transitionProps, activePath2) => /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(Fragment8, { children: transitions((transitionProps, activePath2) => /* @__PURE__ */ jsx42(
     animated3.div,
     {
       style: {
@@ -3815,7 +3932,7 @@ var DappPathSwitcher = ({ activePath, pathToComponent }) => {
       children: (() => {
         const activeIndex = pathToComponent?.findIndex(({ path: componentPath }) => activePath2 === componentPath);
         const activeItem = pathToComponent && activeIndex !== -1 && activeIndex !== void 0 ? pathToComponent[activeIndex] : void 0;
-        return activeItem ? activeItem.component : /* @__PURE__ */ jsx41(ErrorRender4, { error: new Error(`No component found for path: ${activePath2}`), scope: "DappPathSwitcher" });
+        return activeItem ? activeItem.component : /* @__PURE__ */ jsx42(ErrorRender4, { error: new Error(`No component found for path: ${activePath2}`), scope: "DappPathSwitcher" });
       })()
     }
   )) });
@@ -3823,8 +3940,8 @@ var DappPathSwitcher = ({ activePath, pathToComponent }) => {
 
 // src/dapps/shared/accounts/components/AnimatedComponents/GenericAnimations/ShiftAnimation.tsx
 import { animated as animated4, useSpring as useSpring2 } from "@react-spring/web";
-import { useEffect as useEffect19, useState as useState18 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useState as useState19 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var MovementData = {
   down: [
     {
@@ -3892,7 +4009,7 @@ var ShiftAnimation = ({
   animationDirection,
   children
 }) => {
-  const [isShifted, setIsShifted] = useState18(startAnimation);
+  const [isShifted, setIsShifted] = useState19(startAnimation);
   const anim = useSpring2({
     backfaceVisibility: "hidden",
     config: {
@@ -3920,26 +4037,26 @@ var ShiftAnimation = ({
       window.clearTimeout(timeoutId);
     };
   }, [isShifted]);
-  return /* @__PURE__ */ jsx42(animated4.div, { style: anim, children });
+  return /* @__PURE__ */ jsx43(animated4.div, { style: anim, children });
 };
 
 // src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPoint.tsx
 import { FiberManualRecordRounded } from "@mui/icons-material";
 import {
-  alpha as alpha7,
+  alpha as alpha8,
   Box as Box4,
-  useTheme as useTheme10
+  useTheme as useTheme11
 } from "@mui/material";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var TwoToneBulletPoint = (props) => {
-  const theme = useTheme10();
-  return /* @__PURE__ */ jsx43(Box4, { ...props, children: /* @__PURE__ */ jsx43(
+  const theme = useTheme11();
+  return /* @__PURE__ */ jsx44(Box4, { ...props, children: /* @__PURE__ */ jsx44(
     FiberManualRecordRounded,
     {
       fontSize: "small",
       sx: {
         "&:hover": { padding: 0.2 },
-        "backgroundColor": alpha7(theme.palette.secondary.main, 0.2),
+        "backgroundColor": alpha8(theme.palette.secondary.main, 0.2),
         "borderRadius": 2,
         "padding": 0.4
       },
@@ -3949,25 +4066,28 @@ var TwoToneBulletPoint = (props) => {
 };
 
 // src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPointList.tsx
-import { FlexCol as FlexCol16, FlexGrowRow as FlexGrowRow9 } from "@xylabs/react-flexbox";
-import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
+import { FlexCol as FlexCol17, FlexGrowRow as FlexGrowRow9 } from "@xylabs/react-flexbox";
+import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
 var TwoToneBulletPointList = ({ list }) => {
-  return /* @__PURE__ */ jsx44(FlexCol16, { alignItems: "flex-start", gap: 1, children: list.map((item, index) => {
-    return /* @__PURE__ */ jsxs21(FlexGrowRow9, { alignItems: "flex-start", justifyContent: "flex-start", gap: 1, children: [
-      /* @__PURE__ */ jsx44(TwoToneBulletPoint, { marginTop: "4px" }),
-      item
-    ] }, index + "bulletPointList");
+  return /* @__PURE__ */ jsx45(FlexCol17, { alignItems: "flex-start", gap: 1, children: list.map((item, index) => {
+    return (
+      // eslint-disable-next-line @eslint-react/no-array-index-key
+      /* @__PURE__ */ jsxs22(FlexGrowRow9, { alignItems: "flex-start", justifyContent: "flex-start", gap: 1, children: [
+        /* @__PURE__ */ jsx45(TwoToneBulletPoint, { marginTop: "4px" }),
+        item
+      ] }, index + "bulletPointList")
+    );
   }) });
 };
 
 // src/dapps/shared/accounts/components/InputFields/CoinbaseEmail.tsx
 import { FormControl, TextField } from "@mui/material";
 import { LabeledTextFieldWrapper } from "@xyo-network/react-shared";
-import { useState as useState19 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var CoinbaseEmailInput = ({ existingEmail, ...props }) => {
-  const [email, setEmail] = useState19(existingEmail);
-  const [valid, setValid] = useState19();
+  const [email, setEmail] = useState20(existingEmail);
+  const [valid, setValid] = useState20();
   const handleBlur = (event) => {
     setValid(!!event.target.value);
   };
@@ -3976,7 +4096,7 @@ var CoinbaseEmailInput = ({ existingEmail, ...props }) => {
     setValid(!!emailFromEvent);
     setEmail(emailFromEvent);
   };
-  return /* @__PURE__ */ jsx45(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx45(LabeledTextFieldWrapper, { label: "Primary Cryptowallet", children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx46(LabeledTextFieldWrapper, { label: "Primary Cryptowallet", children: /* @__PURE__ */ jsx46(
     TextField,
     {
       fullWidth: true,
@@ -3995,11 +4115,11 @@ var CoinbaseEmailInput = ({ existingEmail, ...props }) => {
 // src/dapps/shared/accounts/components/InputFields/PrimaryCryptowallet.tsx
 import { FormControl as FormControl2, TextField as TextField2 } from "@mui/material";
 import { LabeledTextFieldWrapper as LabeledTextFieldWrapper2 } from "@xyo-network/react-shared";
-import { useState as useState20 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { useState as useState21 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var PrimaryCryptoWalletInput = ({ existingPrimaryCryptoWallet, ...props }) => {
-  const [primaryWallet, setPrimaryWallet] = useState20(existingPrimaryCryptoWallet);
-  const [valid, setValid] = useState20();
+  const [primaryWallet, setPrimaryWallet] = useState21(existingPrimaryCryptoWallet);
+  const [valid, setValid] = useState21();
   const handleBlur = (event) => {
     setValid(!!event.target.value);
   };
@@ -4008,7 +4128,7 @@ var PrimaryCryptoWalletInput = ({ existingPrimaryCryptoWallet, ...props }) => {
     setValid(!!nameFromEvent);
     setPrimaryWallet(nameFromEvent);
   };
-  return /* @__PURE__ */ jsx46(FormControl2, { fullWidth: true, children: /* @__PURE__ */ jsx46(LabeledTextFieldWrapper2, { label: "Primary Cryptowallet", children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(FormControl2, { fullWidth: true, children: /* @__PURE__ */ jsx47(LabeledTextFieldWrapper2, { label: "Primary Cryptowallet", children: /* @__PURE__ */ jsx47(
     TextField2,
     {
       fullWidth: true,
@@ -4028,11 +4148,11 @@ var PrimaryCryptoWalletInput = ({ existingPrimaryCryptoWallet, ...props }) => {
 // src/dapps/shared/accounts/components/InputFields/SecondaryCryptowallet.tsx
 import { FormControl as FormControl3, TextField as TextField3 } from "@mui/material";
 import { LabeledTextFieldWrapper as LabeledTextFieldWrapper3 } from "@xyo-network/react-shared";
-import { useState as useState21 } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { useState as useState22 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var SecondaryCryptoWalletInput = ({ existingSecondaryCryptoWallet, ...props }) => {
-  const [secondaryWallet, setSecondaryWallet] = useState21(existingSecondaryCryptoWallet);
-  const [valid, setValid] = useState21();
+  const [secondaryWallet, setSecondaryWallet] = useState22(existingSecondaryCryptoWallet);
+  const [valid, setValid] = useState22();
   const handleBlur = (event) => {
     setValid(!!event.target.value);
   };
@@ -4041,7 +4161,7 @@ var SecondaryCryptoWalletInput = ({ existingSecondaryCryptoWallet, ...props }) =
     setValid(!!walletFromEvent);
     setSecondaryWallet(walletFromEvent);
   };
-  return /* @__PURE__ */ jsx47(FormControl3, { fullWidth: true, children: /* @__PURE__ */ jsx47(LabeledTextFieldWrapper3, { label: "Secondary Cryptowallet", children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(FormControl3, { fullWidth: true, children: /* @__PURE__ */ jsx48(LabeledTextFieldWrapper3, { label: "Secondary Cryptowallet", children: /* @__PURE__ */ jsx48(
     TextField3,
     {
       variant: "filled",
@@ -4059,78 +4179,81 @@ var SecondaryCryptoWalletInput = ({ existingSecondaryCryptoWallet, ...props }) =
 };
 
 // src/dapps/shared/accounts/components/PaymentMethods.tsx
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { FormGroupCreditCardProvider } from "@xyo-network/react-form-credit-card";
 
 // src/dapps/shared/accounts/components/AccountCard.tsx
 import {
-  Card as Card3,
+  Card as Card4,
   CardContent as CardContent4,
   Divider as Divider5,
-  Typography as Typography13
+  Typography as Typography14
 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol4, FlexGrowRow as FlexGrowRow10 } from "@xylabs/react-flexbox";
-import { jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
 var AccountCard = ({ items, ...props }) => {
-  return /* @__PURE__ */ jsx48(Card3, { ...props, children: /* @__PURE__ */ jsx48(CardContent4, { children: /* @__PURE__ */ jsx48(FlexGrowCol4, { width: "100%", gap: 2, children: items.map((item, index) => {
-    return /* @__PURE__ */ jsxs22(FlexGrowCol4, { gap: 2, width: "100%", alignItems: "stretch", children: [
-      /* @__PURE__ */ jsxs22(
-        FlexGrowRow10,
-        {
-          sx: {
-            alignItems: "stretch",
-            flexDirection: { md: "row", xs: "column" },
-            justifyContent: "space-between"
-          },
-          gap: 2,
-          children: [
-            /* @__PURE__ */ jsxs22(
-              FlexGrowCol4,
-              {
-                alignItems: "flex-start",
-                width: "100%",
-                sx: { maxWidth: { md: "40%", xs: "100%" } },
-                children: [
-                  /* @__PURE__ */ jsx48(Typography13, { variant: "h5", gutterBottom: true, children: item.title }),
-                  /* @__PURE__ */ jsx48(Typography13, { variant: "body1", gutterBottom: true, children: item.desc })
-                ]
-              }
-            ),
-            item?.component
-          ]
-        }
-      ),
-      items.length === 1 || index === items.length - 1 ? null : /* @__PURE__ */ jsx48(Divider5, { flexItem: true })
-    ] }, index);
+  return /* @__PURE__ */ jsx49(Card4, { ...props, children: /* @__PURE__ */ jsx49(CardContent4, { children: /* @__PURE__ */ jsx49(FlexGrowCol4, { width: "100%", gap: 2, children: items.map((item, index) => {
+    return (
+      // eslint-disable-next-line @eslint-react/no-array-index-key
+      /* @__PURE__ */ jsxs23(FlexGrowCol4, { gap: 2, width: "100%", alignItems: "stretch", children: [
+        /* @__PURE__ */ jsxs23(
+          FlexGrowRow10,
+          {
+            sx: {
+              alignItems: "stretch",
+              flexDirection: { md: "row", xs: "column" },
+              justifyContent: "space-between"
+            },
+            gap: 2,
+            children: [
+              /* @__PURE__ */ jsxs23(
+                FlexGrowCol4,
+                {
+                  alignItems: "flex-start",
+                  width: "100%",
+                  sx: { maxWidth: { md: "40%", xs: "100%" } },
+                  children: [
+                    /* @__PURE__ */ jsx49(Typography14, { variant: "h5", gutterBottom: true, children: item.title }),
+                    /* @__PURE__ */ jsx49(Typography14, { variant: "body1", gutterBottom: true, children: item.desc })
+                  ]
+                }
+              ),
+              item?.component
+            ]
+          }
+        ),
+        items.length === 1 || index === items.length - 1 ? null : /* @__PURE__ */ jsx49(Divider5, { flexItem: true })
+      ] }, index)
+    );
   }) }) }) });
 };
 
 // src/dapps/shared/accounts/components/PaymentMethods.tsx
-import { Fragment as Fragment9, jsx as jsx49 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx50 } from "react/jsx-runtime";
 var PaymentMethods = () => {
-  return /* @__PURE__ */ jsx49(DappPage, { title: "Payment Methods", children: /* @__PURE__ */ jsx49(Grid, { container: true, spacing: 3, children: /* @__PURE__ */ jsx49(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(DappPage, { title: "Payment Methods", children: /* @__PURE__ */ jsx50(Grid2, { container: true, spacing: 3, children: /* @__PURE__ */ jsx50(Grid2, { size: { xs: 12 }, children: /* @__PURE__ */ jsx50(
     AccountCard,
     {
       sx: { height: "100%" },
       items: [
         {
           // TODO - needs a default implementation
-          component: /* @__PURE__ */ jsx49(FormGroupCreditCardProvider, { children: /* @__PURE__ */ jsx49(Fragment9, {}) }),
+          component: /* @__PURE__ */ jsx50(FormGroupCreditCardProvider, { children: /* @__PURE__ */ jsx50(Fragment9, {}) }),
           desc: "Save a credit card to your node to complete credit payments seamlessly.",
           title: "Credit Card"
         },
         {
-          component: /* @__PURE__ */ jsx49(CoinbaseEmailInput, {}),
+          component: /* @__PURE__ */ jsx50(CoinbaseEmailInput, {}),
           desc: "Use your Coinbase Account receive payments easily.",
           title: "Coinbase Email"
         },
         {
-          component: /* @__PURE__ */ jsx49(PrimaryCryptoWalletInput, {}),
+          component: /* @__PURE__ */ jsx50(PrimaryCryptoWalletInput, {}),
           desc: "This is the primary crypto wallet on your node.",
           title: "Primary Crypto Wallet"
         },
         {
-          component: /* @__PURE__ */ jsx49(SecondaryCryptoWalletInput, {}),
+          component: /* @__PURE__ */ jsx50(SecondaryCryptoWalletInput, {}),
           desc: "This is the secondary crypto wallet on your node.",
           title: "Secondary Crypto Wallet"
         }
@@ -4146,15 +4269,13 @@ var isCreditCardInput = isPayloadOfSchemaTypeWithMeta(CreditCardInputSchema);
 
 // src/dapps/shared/name-service/DomainIcon.tsx
 import { createSvgIcon } from "@mui/material";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
 var XnsDomainIcon = createSvgIcon(
-  /* @__PURE__ */ jsx50("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 400 400", children: /* @__PURE__ */ jsx50(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M384.67,118.15c-10.22-25.59-24.44-47.14-42.66-64.65-18.21-17.5-39.36-30.79-63.45-39.86C254.48,4.58,228.67.04,201.11.04c-33.77,0-63.36,5.25-88.78,15.73-25.41,10.49-46.56,24.71-63.45,42.66-16.89,17.95-29.42,38.43-37.6,61.45C3.11,142.91-.62,166.94.08,192c.89,34.48,8.09,60.92,21.6,79.32,13.51,18.4,34.48,27.59,62.92,27.59,8.72,0,17.01-1.23,24.93-3.53v4.75c0,2.43,1.96,4.39,4.39,4.39h37.48c2.43,0,4.39-1.96,4.39-4.39v-115.59l76.94,117.99c.81,1.24,2.19,1.99,3.68,1.99h37.47c2.43,0,4.39-1.96,4.39-4.39V104.6c0-2.43-1.96-4.39-4.39-4.39h-37.47c-2.43,0-4.39,1.96-4.39,4.39v115.59l-76.94-117.99c-.81-1.24-2.19-1.99-3.68-1.99h-37.48c-2.43,0-4.39,1.96-4.39,4.39v135.87c-.62,1.06-1.28,2.06-2,2.99-5.33,6.93-13.24,10.39-23.73,10.39-9.24,0-16.4-2.62-21.46-7.86-5.06-5.24-8.62-12.4-10.66-21.46-2.04-9.06-3.24-19.46-3.6-31.19-.54-27.55,3.55-50.75,12.26-69.59,8.71-18.83,20.49-34.08,35.32-45.72,14.85-11.64,31.15-20.09,48.93-25.33,17.77-5.24,35.46-7.86,53.06-7.86,24.89,0,47.01,3.96,66.38,11.86,19.37,7.91,35.68,19.02,48.92,33.33,13.25,14.31,23.2,31.19,29.86,50.65,6.67,19.46,9.83,40.84,9.47,64.12-.7,23.11-4.89,43.9-12.53,62.39-7.64,18.49-18.31,34.31-32,47.46-13.69,13.15-29.86,23.19-48.52,30.13-18.66,6.93-39.1,10.4-61.32,10.4-12.44,0-24.83-1.38-37.19-4.13-8.79-1.96-17.06-4.49-24.81-7.57-5.09-2.02-10.82.46-12.7,5.61l-8.56,23.42c-1.79,4.91.65,10.33,5.49,12.31,11.06,4.53,22.55,8.02,34.45,10.49,15.02,3.11,30.26,4.66,45.73,4.66,28.97,0,55.63-4.8,79.98-14.4,24.36-9.59,45.51-23.15,63.46-40.66,17.95-17.5,31.81-38.08,41.59-61.72,9.77-23.64,14.66-49.32,14.66-77.05,0-33.06-5.11-62.39-15.33-87.98Z"
-    }
-  ) }),
+  /* @__PURE__ */ jsxs24("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 400 400", children: [
+    /* @__PURE__ */ jsx51("path", { fill: "currentColor", d: "M0,314.34V85.34h43.89l99.55,152.67V85.34h43.89v229h-43.89L43.89,161.68v152.67H0Z" }),
+    /* @__PURE__ */ jsx51("path", { fill: "currentColor", d: "M298.99,319.12c-16.96,0-32.26-3-45.88-8.99-13.62-5.99-24.81-14.58-33.56-25.76-8.75-11.18-14.29-24.52-16.62-40l45.17-6.68c3.18,13.15,9.75,23.27,19.72,30.37,9.96,7.1,21.31,10.65,34.03,10.65,7.1,0,14-1.11,20.67-3.34,6.68-2.23,12.17-5.51,16.46-9.86,4.29-4.35,6.44-9.7,6.44-16.06,0-2.33-.35-4.59-1.03-6.76-.69-2.17-1.83-4.21-3.42-6.12-1.59-1.91-3.84-3.71-6.76-5.41-2.92-1.69-6.6-3.23-11.05-4.61l-59.48-17.49c-4.45-1.27-9.62-3.07-15.5-5.41-5.88-2.33-11.58-5.67-17.1-10.02-5.51-4.35-10.1-10.1-13.76-17.26-3.66-7.16-5.49-16.19-5.49-27.11,0-15.37,3.87-28.15,11.61-38.33,7.74-10.18,18.08-17.76,31.01-22.74,12.93-4.98,27.25-7.42,42.94-7.32,15.8.21,29.9,2.92,42.3,8.11,12.4,5.2,22.79,12.75,31.17,22.66,8.37,9.92,14.42,22.03,18.13,36.34l-46.76,7.95c-1.7-7.42-4.83-13.68-9.38-18.77-4.56-5.09-9.99-8.96-16.3-11.61-6.31-2.65-12.91-4.08-19.8-4.29-6.79-.21-13.17.72-19.16,2.78-5.99,2.07-10.87,5.06-14.63,8.99-3.76,3.92-5.65,8.59-5.65,14,0,4.98,1.54,9.04,4.61,12.17,3.07,3.13,6.94,5.65,11.61,7.55,4.66,1.91,9.44,3.5,14.31,4.77l39.76,10.81c5.94,1.59,12.51,3.68,19.72,6.28,7.21,2.6,14.13,6.2,20.75,10.81,6.62,4.61,12.09,10.68,16.38,18.21,4.29,7.53,6.44,17.07,6.44,28.63,0,12.3-2.57,23.03-7.71,32.2-5.14,9.17-12.06,16.75-20.75,22.74-8.69,5.99-18.53,10.47-29.5,13.44-10.97,2.97-22.29,4.45-33.95,4.45Z" }),
+    /* @__PURE__ */ jsx51("circle", { fill: "#3898e7", cx: "372.52", cy: "291.63", r: "27.48" })
+  ] }),
   "XNSDomain"
 );
 
@@ -4163,7 +4284,7 @@ import { InfoOutlined } from "@mui/icons-material";
 import {
   TableCell,
   TableHead,
-  Tooltip as Tooltip5
+  Tooltip as Tooltip6
 } from "@mui/material";
 
 // src/dapps/shared/table/head/hooks/useVisibleColumns.tsx
@@ -4185,16 +4306,16 @@ var StyledTableRowHeader = styled9(
 )(({ theme }) => ({ "& .MuiTableCell-root": { backgroundColor: theme.palette.background.paper } }));
 
 // src/dapps/shared/table/head/components/Head.tsx
-import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
 var TableHeadEx = ({ payloads, ...props }) => {
   const [VisibleTableCells] = useVisibleColumns(payloads);
-  return /* @__PURE__ */ jsx51(TableHead, { ...props, children: /* @__PURE__ */ jsx51(StyledTableRowHeader, { children: VisibleTableCells.map((headCell) => /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(TableHead, { ...props, children: /* @__PURE__ */ jsx52(StyledTableRowHeader, { children: VisibleTableCells.map((headCell) => /* @__PURE__ */ jsx52(
     TableCell,
     {
       align: headCell.align ?? "left",
       padding: headCell.disablePadding ? "none" : "normal",
       width: headCell.width ?? "auto",
-      children: headCell.tooltip ? /* @__PURE__ */ jsxs23(
+      children: headCell.tooltip ? /* @__PURE__ */ jsxs25(
         "span",
         {
           style: {
@@ -4204,7 +4325,7 @@ var TableHeadEx = ({ payloads, ...props }) => {
           },
           children: [
             headCell.label,
-            /* @__PURE__ */ jsx51(Tooltip5, { title: headCell.tooltip, children: /* @__PURE__ */ jsx51(InfoOutlined, { sx: { fontSize: "16px" } }) })
+            /* @__PURE__ */ jsx52(Tooltip6, { title: headCell.tooltip, children: /* @__PURE__ */ jsx52(InfoOutlined, { sx: { fontSize: "16px" } }) })
           ]
         }
       ) : headCell.label
@@ -4225,15 +4346,15 @@ var isTableHeadCell = isPayloadOfSchemaType(TableHeadCellSchema);
 // src/dapps/shared/table/NextIteratorFlexbox.tsx
 import { ArrowCircleLeftOutlined, ArrowCircleRightOutlined } from "@mui/icons-material";
 import { IconButton as IconButton4, LinearProgress as LinearProgress2 } from "@mui/material";
-import { FlexRow as FlexRow9 } from "@xylabs/react-flexbox";
-import { jsx as jsx52, jsxs as jsxs24 } from "react/jsx-runtime";
+import { FlexRow as FlexRow10 } from "@xylabs/react-flexbox";
+import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var NextIteratorFlexbox = ({
   next: changePage,
   loading,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs24(FlexRow9, { justifyContent: "space-between", gap: 2, ...props, children: [
-    /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs26(FlexRow10, { justifyContent: "space-between", gap: 2, ...props, children: [
+    /* @__PURE__ */ jsx53(
       LinearProgress2,
       {
         sx: {
@@ -4243,37 +4364,33 @@ var NextIteratorFlexbox = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxs24(FlexRow9, { children: [
-      /* @__PURE__ */ jsx52(IconButton4, { onClick: () => {
-        changePage("asc").catch(console.error);
-      }, children: /* @__PURE__ */ jsx52(ArrowCircleLeftOutlined, {}) }),
-      /* @__PURE__ */ jsx52(IconButton4, { onClick: () => {
-        changePage("desc").catch(console.error);
-      }, children: /* @__PURE__ */ jsx52(ArrowCircleRightOutlined, {}) })
+    /* @__PURE__ */ jsxs26(FlexRow10, { children: [
+      /* @__PURE__ */ jsx53(IconButton4, { onClick: () => changePage("asc"), children: /* @__PURE__ */ jsx53(ArrowCircleLeftOutlined, {}) }),
+      /* @__PURE__ */ jsx53(IconButton4, { onClick: () => changePage("desc"), children: /* @__PURE__ */ jsx53(ArrowCircleRightOutlined, {}) })
     ] })
   ] });
 };
 
 // src/settings/Theme/ThemeProvider.tsx
-import { InvertibleCssVarsProvider } from "@xylabs/react-invertible-theme";
+import { InvertibleMuiThemeProvider } from "@xylabs/react-invertible-theme";
 import { useMemo as useMemo18 } from "react";
 
 // src/settings/Theme/ThemeCssVars.ts
 import {
-  alpha as alpha8,
-  darken,
-  experimental_extendTheme as extendTheme,
+  alpha as alpha9,
+  createTheme,
+  darken as darken2,
   lighten
 } from "@mui/material";
 var defaultIconBackground = "#A060E0";
 var defaultIconBackgroundHover = "#bdade8";
 var DynamicIconBgGradientBuilder = {
-  iconBgGradientBuilder: (baseColor) => `linear-gradient(148deg, ${baseColor} 0%, ${darken(baseColor, 0.3)} 100%);`,
+  iconBgGradientBuilder: (baseColor) => `linear-gradient(148deg, ${baseColor} 0%, ${darken2(baseColor, 0.3)} 100%);`,
   iconBgHoverGradientBuilder: (baseColor) => `linear-gradient(148deg, ${lighten(baseColor, 0.5)} 0%, ${lighten(baseColor, 0.2)} 100%);`
 };
 var StaticIconBgGradient = {
-  iconGradient: `linear-gradient(148deg, ${defaultIconBackground} 0%, ${darken(defaultIconBackground, 0.35)} 100%);`,
-  iconGradientHover: `linear-gradient(148deg, ${defaultIconBackgroundHover} 0%, ${darken(defaultIconBackgroundHover, 0.35)} 100%);`
+  iconGradient: `linear-gradient(148deg, ${defaultIconBackground} 0%, ${darken2(defaultIconBackground, 0.35)} 100%);`,
+  iconGradientHover: `linear-gradient(148deg, ${defaultIconBackgroundHover} 0%, ${darken2(defaultIconBackgroundHover, 0.35)} 100%);`
 };
 var lightPalette = {
   background: {
@@ -4287,8 +4404,8 @@ var lightPalette = {
   },
   ...DynamicIconBgGradientBuilder,
   ...StaticIconBgGradient,
-  primary: { main: "#100029" },
-  secondary: { main: "#A060E0" },
+  primary: { main: "#463dc6", light: "#b2adfb" },
+  secondary: { main: "#186ecc" },
   success: {
     dark: "#347f21",
     light: "#94dd80",
@@ -4296,29 +4413,36 @@ var lightPalette = {
   },
   text: {
     disabled: "#49454D",
-    primary: "#1D1B1E",
+    primary: "#0d0d47",
     secondary: "#49454D"
   },
   warning: { main: "#ffc805" }
 };
 var darkPalette = {
   background: {
-    default: "#121212",
-    paper: "#1E1E1E"
+    default: "#020223",
+    paper: "#19193F"
+  },
+  error: { main: "#f6594e" },
+  success: {
+    main: "#7efc81",
+    contrastText: "#011e01"
   },
-  error: { main: "#ffb4ab" },
-  success: { main: "#94dd80" },
   ...DynamicIconBgGradientBuilder,
   ...StaticIconBgGradient,
-  primary: { main: "#C9BFFA" },
-  secondary: { main: "#C9C3DA" },
+  primary: { main: "#5658F3", light: "#7c72ff" },
+  secondary: {
+    main: "#66caf7",
+    contrastText: "#020223"
+  },
+  warning: { main: "#f7d866" },
   text: {
     disabled: "#a5acdb",
-    primary: "#F4F4F4",
-    secondary: "#daddf2"
+    primary: "#E3E4EB",
+    secondary: "#e3e4eba3"
   }
 };
-var ThemeCssVars = extendTheme({
+var ThemeCssVars = createTheme({
   colorSchemes: {
     dark: { palette: darkPalette },
     light: { palette: lightPalette }
@@ -4338,10 +4462,10 @@ var ThemeCssVars = extendTheme({
         root: ({ theme }) => ({
           WebkitBackdropFilter: "blur(20px)",
           backdropFilter: "blur(20px)",
-          backgroundColor: alpha8(theme.palette.background.paper, 0.2),
+          backgroundColor: alpha9(theme.palette.background.paper, 0.2),
           boxShadow: "none",
-          color: "#1D1B1E",
-          [theme.getColorSchemeSelector("dark")]: { color: "#CBC4CE" }
+          color: "#16163D",
+          ...theme.applyStyles("dark", { color: "#CBC4CE" })
         })
       }
     },
@@ -4351,7 +4475,7 @@ var ThemeCssVars = extendTheme({
         root: ({ theme }) => ({
           WebkitBackdropFilter: "blur(20px)",
           backdropFilter: "blur(20px)",
-          backgroundColor: alpha8(theme.palette.background.paper, 0.7),
+          backgroundColor: alpha9(theme.palette.background.paper, 0.7),
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between"
@@ -4384,6 +4508,15 @@ var ThemeCssVars = extendTheme({
       }
     },
     MuiContainer: { styleOverrides: { root: { maxWidth: "xl" } } },
+    MuiDrawer: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "& .MuiTypography-root, & .MuiButton-root": { color: "#FFFFFF" },
+          "paperProps": { backgroundColor: "#19193F" },
+          ...theme.applyStyles("dark", { color: theme.palette.secondary.main })
+        })
+      }
+    },
     MuiFilledInput: {
       defaultProps: { disableUnderline: true },
       styleOverrides: {
@@ -4410,18 +4543,28 @@ var ThemeCssVars = extendTheme({
           whiteSpace: "nowrap"
         }
       }
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: ({ theme }) => ({
+          ...theme.typography.body1,
+          color: "inherit",
+          maxWidth: 250,
+          border: `1px solid ${theme.palette.background.default}`,
+          backgroundColor: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px"
+        })
+      }
     }
   },
+  shape: { borderRadius: 6 },
   spacing: 12,
   typography: {
     allVariants: { fontFamily: ["Manrope", "san-serif"].join(",") },
-    body1: {
-      fontSize: "16px",
-      fontWeight: 400
-    },
+    body1: { fontSize: "16px" },
     button: {
       fontSize: "1rem",
-      fontWeight: 500,
       textTransform: "capitalize"
     },
     fontWeightBold: 700,
@@ -4444,7 +4587,7 @@ var ThemeCssVars = extendTheme({
 });
 
 // src/settings/Theme/ThemeProvider.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var AppOsThemeProvider = ({ children }) => {
   const initialValue = useMemo18(() => {
     const validValues = ["light", "dark"];
@@ -4452,7 +4595,7 @@ var AppOsThemeProvider = ({ children }) => {
     if (savedValue && validValues.includes(savedValue)) return savedValue;
     return "system";
   }, []);
-  return /* @__PURE__ */ jsx53(InvertibleCssVarsProvider, { theme: ThemeCssVars, defaultMode: initialValue, children });
+  return /* @__PURE__ */ jsx54(InvertibleMuiThemeProvider, { theme: ThemeCssVars, defaultMode: initialValue, children });
 };
 
 // src/StyledBuilder.tsx
@@ -4513,6 +4656,8 @@ export {
   ShiftAnimation,
   StyledDappIconBuilder,
   StyledGridContainer,
+  StyledListItemButton,
+  StyledMenuIconWrapSpan,
   TableHeadCellSchema,
   TableHeadEx,
   TwoToneBulletPoint,