@xyo-network/os-react-runtime 5.0.12 → 6.0.0

package/dist/browser/index.mjs

@@ -3,10 +3,10 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 
 // src/helpers/BridgeActivityHelper.ts
 import { assertEx } from "@xylabs/assert";
+import { BaseEmitter } from "@xylabs/events";
 import { GenericPayloadDivinerConfigSchema } from "@xyo-network/diviner-payload-generic";
 import { PayloadDivinerQuerySchema } from "@xyo-network/diviner-payload-model";
-import { ModuleBaseEmitter } from "@xyo-network/module-event-emitter";
-var BridgeActivityHelper = class extends ModuleBaseEmitter {
+var BridgeActivityHelper = class extends BaseEmitter {
   static {
     __name(this, "BridgeActivityHelper");
   }
@@ -43,14 +43,14 @@ var GenericPayloadDivinerTags = {
   "network.xyo.generic.payload.diviner": "GenericPayloadDiviner"
 };
 var BrowserLocator = new ModuleFactoryLocator();
-BrowserLocator.register(GenericPayloadDiviner, GenericPayloadDivinerTags);
-BrowserLocator.register(IndexedDbArchivist, {
+BrowserLocator.register(GenericPayloadDiviner.factory(), GenericPayloadDivinerTags);
+BrowserLocator.register(IndexedDbArchivist.factory(), {
   "network.xyo.archivist.persistence.scope": "device"
 }, "network.xyo.archivist.config");
-BrowserLocator.register(IndexedDbPayloadDiviner, {
+BrowserLocator.register(IndexedDbPayloadDiviner.factory(), {
   "network.xyo.archivist.persistence.scope": "device"
 }, "network.xyo.diviner.payload.config");
-BrowserLocator.register(IndexedDbBoundWitnessDiviner, {
+BrowserLocator.register(IndexedDbBoundWitnessDiviner.factory(), {
   "network.xyo.archivist.persistence.scope": "device"
 }, "network.xyo.diviner.boundwitness.config");
 BrowserLocator.freeze();
@@ -309,32 +309,29 @@ var ResourceHooks = class {
   constructor(buildResource, buildViews) {
     this.buildResource = buildResource;
     this.buildViews = buildViews;
-    this.resourceViewsFromContext = (context, pathPrefix) => {
-      const [resource, resourceError] = this.buildResource(context, pathPrefix);
-      const views = this.buildViews(resource);
-      return {
-        ...views,
-        resource,
-        resourceError
-      };
-    };
-    this.useBuildResourceFromProvidedNode = (pathPrefix) => {
-      const xyOs = useXyOsUiContext();
-      return this.buildResource(xyOs, pathPrefix);
+  }
+  resourceViewsFromContext = /* @__PURE__ */ __name((context, pathPrefix) => {
+    const [resource, resourceError] = this.buildResource(context, pathPrefix);
+    const views = this.buildViews(resource);
+    return {
+      ...views,
+      resource,
+      resourceError
     };
-    this.useResourceViewsFromProvidedNode = (pathPrefix) => {
-      const [resource, resourceError] = this.useBuildResourceFromProvidedNode(pathPrefix);
-      const views = this.buildViews(resource);
-      return {
-        ...views,
-        resource,
-        resourceError
-      };
+  }, "resourceViewsFromContext");
+  useBuildResourceFromProvidedNode = /* @__PURE__ */ __name((pathPrefix) => {
+    const xyOs = useXyOsUiContext();
+    return this.buildResource(xyOs, pathPrefix);
+  }, "useBuildResourceFromProvidedNode");
+  useResourceViewsFromProvidedNode = /* @__PURE__ */ __name((pathPrefix) => {
+    const [resource, resourceError] = this.useBuildResourceFromProvidedNode(pathPrefix);
+    const views = this.buildViews(resource);
+    return {
+      ...views,
+      resource,
+      resourceError
     };
-  }
-  resourceViewsFromContext;
-  useBuildResourceFromProvidedNode;
-  useResourceViewsFromProvidedNode;
+  }, "useResourceViewsFromProvidedNode");
 };
 
 // src/modules/resource/useCleanup.ts
@@ -1189,7 +1186,7 @@ var DappLaunchFrame = /* @__PURE__ */ __name(({ bgColor, children, id, launchLef
     style: {
       ...scaleProps,
       alignItems: "start",
-      background: bgColor ?? theme.palette.background.default,
+      background: bgColor ?? theme.vars?.palette.background.default,
       display: "flex",
       height: "100%",
       justifyContent: "start",
@@ -1214,8 +1211,9 @@ var decomposeProps = /* @__PURE__ */ __name((dappIcon, props) => {
 }, "decomposeProps");
 
 // src/modules/Dapp/Button/StyledComponents.tsx
-import { alpha, styled } from "@mui/material";
+import { styled } from "@mui/material";
 import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
+import { alphaCss } from "@xylabs/react-theme";
 import { TypographyEx } from "@xyo-network/react-shared";
 var borderRadiusFactor = 1.5;
 var StyledDappIconButtonEx = styled(ButtonEx2, {
@@ -1229,7 +1227,7 @@ var StyledDappIconButtonEx = styled(ButtonEx2, {
     "&:before": {
       WebkitBackdropFilter: "blur(20px)",
       backdropFilter: "blur(20px)",
-      backgroundColor: alpha(theme.palette.background.paper, 0.5),
+      backgroundColor: alphaCss(theme.vars?.palette.background.paper ?? "#fff", 0.5),
       borderRadius: theme.spacing(borderRadiusFactor),
       content: "''",
       inset: 0,
@@ -1246,9 +1244,9 @@ var StyledDappIconButtonEx = styled(ButtonEx2, {
     },
     "WebkitBackdropFilter": "blur(20px)",
     "backdropFilter": "blur(20px)",
-    "backgroundColor": alpha(theme.palette.background.paper, 0.5),
+    "backgroundColor": alphaCss(theme.vars?.palette.background.paper ?? "#fff", 0.5),
     "borderRadius": theme.spacing(borderRadiusFactor),
-    "color": theme.palette.text.primary,
+    "color": theme.vars?.palette.text.primary,
     "position": "relative",
     "transition": "transform 0.15s linear"
   };
@@ -1258,14 +1256,14 @@ var StyledDappName = styled(TypographyEx, {
 })(({ theme }) => ({
   // WebkitBoxOrient: 'vertical',
   WebkitLineClamp: 2,
-  color: theme.palette.text.primary,
+  color: theme.vars?.palette.text.primary,
   flexWrap: "wrap",
   fontWeight: 700,
   letterSpacing: "-0.5px",
   lineClamp: 2,
   textAlign: "center",
   textOverflow: "ellipsis",
-  textShadow: `1px 1px 3px ${alpha(theme.palette.common.black, 0.3)}`,
+  textShadow: `1px 1px 3px ${alphaCss(theme.vars?.palette.common.black ?? "#000", 0.3)}`,
   whiteSpace: "initial",
   wordWrap: "break-word"
 }));
@@ -1763,7 +1761,9 @@ var useManageDappInjectableParamsFromRoute = /* @__PURE__ */ __name((context) =>
     try {
       if (context) {
         const mod = assertEx7(await context?.root.resolve("DappArchivist"), () => "DappArchivist not found");
-        archivist = asArchivistInstance(mod, () => "DappArchivist not is not an Archivist");
+        archivist = asArchivistInstance(mod, () => "DappArchivist not is not an Archivist", {
+          required: true
+        });
         archivist.on("inserted", listener);
       }
     } catch (e) {
@@ -2178,7 +2178,7 @@ var DappChromeSmall = /* @__PURE__ */ __name(({ appBar, children, screenMenu, sp
     id: "dapp-chrome-small",
     justifyContent: "start",
     sx: {
-      background: /* @__PURE__ */ __name((theme) => theme.palette.background.default, "background")
+      background: /* @__PURE__ */ __name((theme) => theme.vars?.palette.background.default, "background")
     }
   }, appBar, /* @__PURE__ */ React11.createElement(FlexGrowCol, {
     sx: {
@@ -2197,7 +2197,7 @@ var DappChromeLarge = /* @__PURE__ */ __name(({ appBar, children, screenMenu, sp
     id: "dapp-chrome-large",
     justifyContent: "start",
     sx: {
-      background: /* @__PURE__ */ __name((theme) => theme.palette.background.default, "background")
+      background: /* @__PURE__ */ __name((theme) => theme.vars?.palette.background.default, "background")
     }
   }, appBar, /* @__PURE__ */ React11.createElement(FlexGrowCol, {
     sx: {
@@ -2219,8 +2219,9 @@ var DappChrome = /* @__PURE__ */ __name(({ largeScreenMenu, smallScreenMenu, ...
 }, "DappChrome");
 
 // src/modules/Dapp/modules/Window/components/DefaultComingSoon/DefaultComingSoon.tsx
-import { alpha as alpha2, Card as Card2, CardContent as CardContent2, Chip, Container, Divider as Divider2, Typography as Typography4, useTheme as useTheme4 } from "@mui/material";
+import { Card as Card2, CardContent as CardContent2, Chip, Container, Divider as Divider2, Typography as Typography4, useTheme as useTheme4 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol3, FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
+import { alphaCss as alphaCss2 } from "@xylabs/react-theme";
 import React15 from "react";
 
 // src/modules/Dapp/modules/Window/components/DefaultComingSoon/InstallButtonSection.tsx
@@ -2276,7 +2277,7 @@ var DeveloperLinkSection = /* @__PURE__ */ __name(({ developerLink = "https://xy
     },
     ...props
   }, /* @__PURE__ */ React13.createElement(LinkEx, {
-    color: theme.palette.info.main,
+    color: theme.vars?.palette.info.main,
     href: developerLink,
     target: "_blank"
   }, developerLink));
@@ -2333,7 +2334,7 @@ var SummarySection = /* @__PURE__ */ __name(({ name, dappIconSvg, version = "1.0
     fontSize: "small"
   }), /* @__PURE__ */ React14.createElement(Typography3, {
     variant: "body1",
-    color: theme.palette.success.main
+    color: theme.vars?.palette.success.main
   }, "XY Labs")), developerLink ? /* @__PURE__ */ React14.createElement(DeveloperLinkSection, {
     developerLink
   }) : null)))));
@@ -2359,8 +2360,8 @@ var DefaultComingSoon = /* @__PURE__ */ __name(({ children, desc = defaultDescri
   }, /* @__PURE__ */ React15.createElement(Chip, {
     label: "This app is not yet publicly available on xyOS",
     sx: {
-      backgroundColor: alpha2(theme.palette.info.main, 0.2),
-      color: theme.palette.info.main,
+      backgroundColor: alphaCss2(theme.vars?.palette.info.main ?? "#000", 0.2),
+      color: theme.vars?.palette.info.main,
       width: "100%"
     }
   })), /* @__PURE__ */ React15.createElement(FlexGrowCol3, {
@@ -2442,15 +2443,15 @@ var StyledBottomNavigationAction = styled2(BottomNavigationAction, {
   const darkMode = useIsDark();
   return {
     "&.Mui-selected": {
-      color: darkMode ? theme.palette.primary.main : theme.palette.secondary.main
+      color: darkMode ? theme.vars?.palette.primary.main : theme.vars?.palette.secondary.main
     }
   };
 });
 
 // src/modules/Dapp/modules/Window/components/menu/Drawer.tsx
-import { alpha as alpha3, darken, Drawer, List, ListItem, ListItemIcon, ListItemText, Tooltip as Tooltip3, Typography as Typography6, useTheme as useTheme6 } from "@mui/material";
+import { alpha, Drawer, List, ListItem, ListItemIcon, ListItemText, Tooltip as Tooltip3, Typography as Typography6, useTheme as useTheme6 } from "@mui/material";
 import { FlexCol as FlexCol6, FlexGrowRow as FlexGrowRow4, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
-import { useIsDark as useIsDark2 } from "@xylabs/react-theme";
+import { alphaCss as alphaCss3, darkenCss, useIsDark as useIsDark2 } from "@xylabs/react-theme";
 import { XyOsMonitor as XyOsMonitor3 } from "@xyo-network/os-runtime";
 import React19, { useEffect as useEffect16, useState as useState15 } from "react";
 
@@ -2629,18 +2630,18 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
     gap: 0.5
   }, /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "body2",
-    color: theme.palette.text.primary
+    color: theme.vars?.palette.text.primary
   }, "Powered By"), /* @__PURE__ */ React18.createElement("img", {
     style: {
-      color: theme.palette.text.primary,
-      fill: theme.palette.text.primary
+      color: theme.vars?.palette.text.primary,
+      fill: theme.vars?.palette.text.primary
     },
     src: default21,
     width: "auto",
     height: "20px"
   })), /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "caption",
-    color: theme.palette.text.primary
+    color: theme.vars?.palette.text.primary
   }, "Copyright \xA9 2024 XY Labs, Inc."), /* @__PURE__ */ React18.createElement(Stack, {
     gap: 0.5,
     flexDirection: "row"
@@ -2678,7 +2679,7 @@ var StyledListItemButton = styled3(ListItemButton, {
   name: "StyledListItemButton",
   shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "active", "shouldForwardProp")
 })(({ theme, active }) => {
-  const activeOrHoverColor = theme.palette.primary.main;
+  const activeOrHoverColor = theme.vars?.palette.primary.main;
   return {
     "position": "relative",
     "padding": "8px 16px",
@@ -2707,8 +2708,8 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
   const [path, setPath] = useState15("");
   const darkMode = useIsDark2();
   const theme = useTheme6();
-  const drawerColor = darkMode ? theme.palette.background.paper : darken(theme.palette.primary.main, 0.5);
-  const activeColor = theme.palette.primary.light;
+  const drawerColor = darkMode ? theme.vars?.palette.background.paper : darkenCss(theme.vars?.palette.primary.main ?? "#fff", 0.5);
+  const activeColor = theme.vars?.palette.primary.light;
   useEffect16(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       const newPath = menuItems.find((item) => activePath === item.path)?.path ?? "";
@@ -2793,13 +2794,13 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     paddingY: 0.5,
     sx: {
       "&:hover": {
-        backgroundColor: alpha3("#ffffff", 0.05)
+        backgroundColor: alpha("#ffffff", 0.05)
       },
       "borderRadius": "10px"
     }
   }, /* @__PURE__ */ React19.createElement(ListItemIcon, {
     sx: {
-      color: pathFromPayload === path ? activeColor : alpha3("#fff", 0.3),
+      color: pathFromPayload === path ? activeColor : alpha("#fff", 0.3),
       justifyContent: "center"
     }
   }, /* @__PURE__ */ React19.createElement(StyledMenuIconWrapSpan, {
@@ -2809,9 +2810,13 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
       }
     }, "ref")
   })), /* @__PURE__ */ React19.createElement(ListItemText, {
-    primaryTypographyProps: {
-      fontWeight: path === pathFromPayload ? "bold" : "inherit",
-      color: pathFromPayload === path ? "inherit" : alpha3(theme.palette.text.primary, 0.5)
+    slotProps: {
+      primary: {
+        typography: {
+          fontWeight: path === pathFromPayload ? "bold" : "inherit",
+          color: pathFromPayload === path ? "inherit" : alphaCss3(theme.vars?.palette.text.primary ?? "#000", 0.5)
+        }
+      }
     },
     primary: primaryText,
     style: {
@@ -2819,7 +2824,7 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     }
   }))))))), /* @__PURE__ */ React19.createElement(BottomMenuArea, {
     openDebug,
-    backgroundColor: theme.palette.primary.dark
+    backgroundColor: theme.vars?.palette.primary.dark ?? "#000"
   })));
 }, "DappMenuDrawer");
 
@@ -3033,8 +3038,8 @@ var StyledSplashContainer = styled4(FlexCol8, {
   name: "StyledSplashContainer"
 })(({ theme }) => {
   return {
-    background: theme.palette.background.default,
-    color: theme.palette.text.primary,
+    background: theme.vars?.palette.background.default,
+    color: theme.vars?.palette.text.primary,
     gap: theme.spacing(1),
     height: "100%",
     left: 0,
@@ -3301,10 +3306,10 @@ var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
   const darkMode = useIsDark3();
   const theme = useTheme7();
   const { networkReady } = useOsNetwork();
-  const highContrastSuccessColor = darkMode ? theme.palette.success.dark : theme.palette.success.main;
-  const successColor = highContrast ? highContrastSuccessColor : theme.palette.success.main;
-  const highContrastErrorColor = darkMode ? theme.palette.success.dark : theme.palette.error.main;
-  const errorColor = highContrast ? highContrastErrorColor : theme.palette.error.main;
+  const highContrastSuccessColor = darkMode ? theme.vars?.palette.success.dark : theme.vars?.palette.success.main;
+  const successColor = highContrast ? highContrastSuccessColor : theme.vars?.palette.success.main;
+  const highContrastErrorColor = darkMode ? theme.vars?.palette.success.dark : theme.vars?.palette.error.main;
+  const errorColor = highContrast ? highContrastErrorColor : theme.vars?.palette.error.main;
   const NetworkComponent = useMemo17(() => {
     if (networkReady) {
       const connectionReady = true;
@@ -3663,7 +3668,8 @@ var ShiftAnimation = /* @__PURE__ */ __name(({ startAnimation = false, animation
 
 // src/modules/dapps/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPoint.tsx
 import { FiberManualRecordRounded } from "@mui/icons-material";
-import { alpha as alpha4, Box as Box2, useTheme as useTheme8 } from "@mui/material";
+import { Box as Box2, useTheme as useTheme8 } from "@mui/material";
+import { alphaCss as alphaCss4 } from "@xylabs/react-theme";
 import React36 from "react";
 var TwoToneBulletPoint = /* @__PURE__ */ __name((props) => {
   const theme = useTheme8();
@@ -3673,7 +3679,7 @@ var TwoToneBulletPoint = /* @__PURE__ */ __name((props) => {
       "&:hover": {
         padding: 0.2
       },
-      "backgroundColor": alpha4(theme.palette.secondary.main, 0.2),
+      "backgroundColor": alphaCss4(theme.vars?.palette.secondary.main ?? "#000", 0.2),
       "borderRadius": 2,
       "padding": 0.4
     },
@@ -3954,7 +3960,7 @@ var StyledTableRowHeader = styled7(TableRow, {
   name: "StyledTableRowHeader"
 })(({ theme }) => ({
   "& .MuiTableCell-root": {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: theme.vars?.palette.background.paper
   }
 }));
 
@@ -4015,9 +4021,10 @@ var NextIteratorFlexbox = /* @__PURE__ */ __name(({ next: changePage, loading, .
 
 // src/modules/widgets/WidgetCard.tsx
 import { ArrowForwardRounded, HistoryRounded, RefreshRounded } from "@mui/icons-material";
-import { alpha as alpha5, Box as Box3, CardContent as CardContent4, IconButton as IconButton4, Tooltip as Tooltip6, Typography as Typography11, useTheme as useTheme9 } from "@mui/material";
+import { Box as Box3, CardContent as CardContent4, IconButton as IconButton4, Tooltip as Tooltip6, Typography as Typography11, useTheme as useTheme9 } from "@mui/material";
 import { ButtonEx as ButtonEx5 } from "@xylabs/react-button";
 import { FlexCol as FlexCol14, FlexGrowRow as FlexGrowRow7, FlexRow as FlexRow9 } from "@xylabs/react-flexbox";
+import { alphaCss as alphaCss5 } from "@xylabs/react-theme";
 import { CardEx } from "@xyo-network/react-card";
 import { DateTime } from "luxon";
 import React46 from "react";
@@ -4060,7 +4067,7 @@ var WidgetCard = /* @__PURE__ */ __name(({ widgetName, widgetContent, widgetPath
   return /* @__PURE__ */ React46.createElement(CardEx, {
     ...props,
     sx: {
-      backgroundColor: alpha5(theme.palette.background.paper, 0.4),
+      backgroundColor: alphaCss5(theme.vars?.palette.background.paper ?? "#000", 0.4),
       display: "flex",
       height: "300px",
       width: "300px"
@@ -4082,7 +4089,7 @@ var WidgetCard = /* @__PURE__ */ __name(({ widgetName, widgetContent, widgetPath
     justifyContent: "space-between",
     alignItems: "center"
   }, /* @__PURE__ */ React46.createElement(Typography11, {
-    color: theme.palette.text.primary,
+    color: theme.vars?.palette.text.primary,
     fontWeight: theme.typography.fontWeightMedium,
     variant: "h6"
   }, widgetName), /* @__PURE__ */ React46.createElement(IconButton4, null, /* @__PURE__ */ React46.createElement(RefreshRounded, null))), /* @__PURE__ */ React46.createElement(Box3, {
@@ -4116,8 +4123,9 @@ import { useIsDark as useIsDark4 } from "@xylabs/react-theme";
 import React54 from "react";
 
 // src/modules/widgets/StackOfWidgets.tsx
-import { alpha as alpha8, Box as Box4, useTheme as useTheme11 } from "@mui/material";
+import { Box as Box4, useTheme as useTheme11 } from "@mui/material";
 import { animated as animated4, to as interpolate, useSprings } from "@react-spring/web";
+import { alphaCss as alphaCss8 } from "@xylabs/react-theme";
 import React53, { useState as useState22 } from "react";
 import { useDrag } from "react-use-gesture";
 
@@ -4127,7 +4135,8 @@ import { FlexCol as FlexCol15, FlexGrowRow as FlexGrowRow8 } from "@xylabs/react
 import React47 from "react";
 
 // src/modules/widgets/Types/BarGraph/StyledLinearProgress.tsx
-import { alpha as alpha6, LinearProgress as LinearProgress2, styled as styled8 } from "@mui/material";
+import { LinearProgress as LinearProgress2, styled as styled8 } from "@mui/material";
+import { alphaCss as alphaCss6 } from "@xylabs/react-theme";
 var StyledLinearProgress = styled8(LinearProgress2, {
   name: "StyledLinearProgress"
 })(({ theme }) => ({
@@ -4137,7 +4146,7 @@ var StyledLinearProgress = styled8(LinearProgress2, {
   "MozBoxSizing": "border-box",
   "WebkitBoxSizing": "border-box",
   "background": "transparent",
-  "borderBottom": `1px solid ${alpha6(theme.palette.text.secondary, 0.3)}`,
+  "borderBottom": `1px solid ${alphaCss6(theme.vars?.palette.text.secondary ?? "#000", 0.3)}`,
   "boxSizing": "border-box",
   "height": theme.spacing(0.25)
 }));
@@ -4259,8 +4268,9 @@ import React51 from "react";
 
 // src/modules/widgets/Types/Tables/BooleanTable.tsx
 import { CircleRounded } from "@mui/icons-material";
-import { alpha as alpha7, Paper as Paper2, styled as styled9, TableRow as TableRow2, Typography as Typography14 } from "@mui/material";
+import { Paper as Paper2, styled as styled9, TableRow as TableRow2, Typography as Typography14 } from "@mui/material";
 import { FlexCol as FlexCol17, FlexGrowRow as FlexGrowRow10, FlexRow as FlexRow10 } from "@xylabs/react-flexbox";
+import { alphaCss as alphaCss7 } from "@xylabs/react-theme";
 import React50 from "react";
 var sampleData2 = [
   {
@@ -4293,20 +4303,20 @@ var StyledLightTableRow = styled9(Paper2, {
 var StyledTableColumnTitle = styled9(Typography14, {
   name: "StyledTableColumnTitle"
 })(({ theme }) => ({
-  color: theme.palette.text.secondary,
+  color: theme.vars?.palette.text.secondary,
   fontWeight: theme.typography.fontWeightBold,
   textTransform: "uppercase"
 }));
 var DefaultTrueOutput = styled9(CircleRounded, {
   name: "DefaultTrueOutput"
 })(({ theme }) => ({
-  fill: theme.palette.success.main,
+  fill: theme.vars?.palette.success.main,
   fontSize: "10px"
 }));
 var DefaultFalseOutput = styled9(CircleRounded, {
   name: "DefaultFalseOutput"
 })(({ theme }) => ({
-  fill: alpha7(theme.palette.text.disabled, 0.5),
+  fill: alphaCss7(theme.vars?.palette.text.disabled ?? "#111", 0.5),
   fontSize: "10px"
 }));
 var defaultTrueOutput = /* @__PURE__ */ React50.createElement(DefaultTrueOutput, null);
@@ -4478,7 +4488,7 @@ function Deck() {
     style: {
       // WebkitBackdropFilter: 'blur(10px)',
       // backdropFilter: 'blur(10px)',
-      backgroundColor: alpha8(theme.palette.background.paper, 0.2),
+      backgroundColor: alphaCss8(theme.vars?.palette.background.paper ?? "#000", 0.2),
       backgroundPosition: "center center",
       backgroundRepeat: "no-repeat",
       backgroundSize: "auto 85%",
@@ -4532,16 +4542,17 @@ import { ThemeProvider } from "@mui/material";
 import React55, { useMemo as useMemo20 } from "react";
 
 // src/settings/Theme/ThemeCssVars.ts
-import { alpha as alpha9, createTheme, darken as darken2, lighten } from "@mui/material";
+import { createTheme, darken, lighten } from "@mui/material";
+import { alphaCss as alphaCss9 } from "@xylabs/react-theme";
 var defaultIconBackground = "#A060E0";
 var defaultIconBackgroundHover = "#bdade8";
 var DynamicIconBgGradientBuilder = {
-  iconBgGradientBuilder: /* @__PURE__ */ __name((baseColor) => `linear-gradient(148deg, ${baseColor} 0%, ${darken2(baseColor, 0.3)} 100%);`, "iconBgGradientBuilder"),
+  iconBgGradientBuilder: /* @__PURE__ */ __name((baseColor) => `linear-gradient(148deg, ${baseColor} 0%, ${darken(baseColor, 0.3)} 100%);`, "iconBgGradientBuilder"),
   iconBgHoverGradientBuilder: /* @__PURE__ */ __name((baseColor) => `linear-gradient(148deg, ${lighten(baseColor, 0.5)} 0%, ${lighten(baseColor, 0.2)} 100%);`, "iconBgHoverGradientBuilder")
 };
 var StaticIconBgGradient = {
-  iconGradient: `linear-gradient(148deg, ${defaultIconBackground} 0%, ${darken2(defaultIconBackground, 0.35)} 100%);`,
-  iconGradientHover: `linear-gradient(148deg, ${defaultIconBackgroundHover} 0%, ${darken2(defaultIconBackgroundHover, 0.35)} 100%);`
+  iconGradient: `linear-gradient(148deg, ${defaultIconBackground} 0%, ${darken(defaultIconBackground, 0.35)} 100%);`,
+  iconGradientHover: `linear-gradient(148deg, ${defaultIconBackgroundHover} 0%, ${darken(defaultIconBackgroundHover, 0.35)} 100%);`
 };
 var lightPalette = {
   background: {
@@ -4641,7 +4652,7 @@ var ThemeCssVars = createTheme({
         root: /* @__PURE__ */ __name(({ theme }) => ({
           WebkitBackdropFilter: "blur(20px)",
           backdropFilter: "blur(20px)",
-          backgroundColor: alpha9(theme.palette.background.paper, 0.2),
+          backgroundColor: alphaCss9(theme.vars?.palette.background.paper ?? "#000", 0.2),
           boxShadow: "none",
           color: "#16163D",
           ...theme.applyStyles("dark", {
@@ -4658,7 +4669,7 @@ var ThemeCssVars = createTheme({
         root: /* @__PURE__ */ __name(({ theme }) => ({
           WebkitBackdropFilter: "blur(20px)",
           backdropFilter: "blur(20px)",
-          backgroundColor: alpha9(theme.palette.background.paper, 0.7),
+          backgroundColor: alphaCss9(theme.vars?.palette.background.paper ?? "#000", 0.7),
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between"
@@ -4709,7 +4720,7 @@ var ThemeCssVars = createTheme({
             backgroundColor: "#19193F"
           },
           ...theme.applyStyles("dark", {
-            color: theme.palette.secondary.main
+            color: theme.vars?.palette.secondary.main
           })
         }), "root")
       }
@@ -4721,7 +4732,7 @@ var ThemeCssVars = createTheme({
       styleOverrides: {
         root: /* @__PURE__ */ __name(({ theme }) => ({
           "&.Mui-error": {
-            border: `${theme.palette.error.main} 1px solid`
+            border: `${theme.vars?.palette.error.main} 1px solid`
           },
           "border": "transparent 1px solid",
           "borderRadius": theme.shape.borderRadius
@@ -4763,8 +4774,8 @@ var ThemeCssVars = createTheme({
           ...theme.typography.body1,
           color: "inherit",
           maxWidth: 250,
-          border: `1px solid ${theme.palette.background.default}`,
-          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.vars?.palette.background.default}`,
+          backgroundColor: theme.vars?.palette.background.paper,
           padding: theme.spacing(1),
           boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px"
         }), "tooltip")