@ixo/ui 0.0.39 → 0.1.0

package/dist/{components-HlNIe7CZ.js → components-Dd5AcCq0.js}

@@ -1,16 +1,16 @@
 import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
-import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, e as Canvas, H as HistorySolid, U as User, f as AngleLeftSolid, M as MinusCircleSolid, h as SettingsBarSolid, G as Globe, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, n as LinkedResources, o as Proposals, I as ImpactCredits, p as GoTo, q as Share, r as PiePiece, s as ImpactCertificates, t as CommentDotsSolid, u as CommentAltSolid, v as MicrophoneSolid, w as Command, x as ArrowCircleRightSolid, y as Protocols, z as Investments, O as Oracles, B as Projects, F as Daos, J as Star, K as AngleRightSolid, N as Expand, Q as LeafSolid, R as ArrowDownSolid, T as ArrowRightSolid, V as Play, W as CheckCircle, X as Events, Y as ThumbsUpSolid, Z as CommentsSolid, _ as CopySolid, $ as Hourglass, a0 as Act, a1 as Info$1, a2 as ClaimsW, a3 as TachometerAltSolid, a4 as UserCogSolid, a5 as UsersSolid, a6 as EllipsisHSolid } from "./UsersSolid-C6NkfomI.js";
+import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, e as Canvas, H as HistorySolid, U as User, f as AngleLeftSolid, M as MinusCircleSolid, h as SettingsBarSolid, G as Globe, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, n as LinkedResources, o as Proposals, I as ImpactCredits, p as GoTo, q as Share, r as PiePiece, s as ImpactCertificates, t as CommentDotsSolid, u as CommentAltSolid, v as MicrophoneSolid, w as Command, x as ArrowCircleRightSolid, y as Protocols, z as Investments, O as Oracles, B as Projects, F as Daos, J as Star, K as AngleRightSolid, N as Expand, Q as LeafSolid, R as ArrowDownSolid, T as ArrowRightSolid, V as Play, W as CheckCircle, X as Events, Y as ThumbsUpSolid, Z as CommentsSolid, _ as CopySolid, $ as Hourglass, a0 as Act, a1 as Info$1, a2 as ClaimsW, a3 as TachometerAltSolid, a4 as UserCogSolid, a5 as UsersSolid, a6 as EllipsisHSolid } from "./UsersSolid-CU7U_J3x.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useMemo, useId, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
 import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, Divider, ScrollArea, Space } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
-import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
 import { useResizeObserver, useHover, useDisclosure } from "@mantine/hooks";
 import { a as useLocalStorage, E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-BuXZL79s.js";
+import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCombobox, useSelect } from "downshift";
@@ -403,11 +403,11 @@ function Td({ children, value, description, icon: Icon, iconNoColor, image, tag,
             Icon ? /* @__PURE__ */ jsx(
               "div",
               {
-                css: ({ radius, glass }) => ({
+                css: ({ radius }) => ({
                   width: radius.roundButtons,
                   height: radius.roundButtons,
                   borderRadius: radius.small / 2,
-                  backgroundColor: glass.lighter,
+                  backgroundColor: "var(--mantine-color-neutralColor-5)",
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center"
@@ -445,8 +445,8 @@ function Td({ children, value, description, icon: Icon, iconNoColor, image, tag,
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      css: ({ text, fontSize }) => ({
-                        color: text.overPicture,
+                      css: ({ fontSize }) => ({
+                        color: "var(--mantine-color-neutralColor-8)",
                         fontSize: fontSize.regular
                       }),
                       children: value
@@ -455,8 +455,8 @@ function Td({ children, value, description, icon: Icon, iconNoColor, image, tag,
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      css: ({ text, fontSize }) => ({
-                        color: text.overPicture,
+                      css: ({ fontSize }) => ({
+                        color: "var(--mantine-color-neutralColor-8)",
                         fontSize: fontSize.xs,
                         opacity: 0.7
                       }),
@@ -479,7 +479,7 @@ function Th({ children, align = "center", shrink, expand }) {
     "th",
     {
       css: (theme) => ({
-        color: theme.text.overPicture,
+        color: "var(--mantine-color-neutralColor-8)",
         fontFamily: theme.font.main,
         fontSize: theme.fontSize.s,
         textAlign: align,
@@ -523,17 +523,18 @@ function Tr({ children, selected, onClick }) {
       ref: wrapperRef,
       onClick: handleClick,
       role: onClick ? "button" : void 0,
-      css: ({ glass }) => {
+      css: () => {
         return {
           cursor: onClick ? "pointer" : void 0,
           "& > td": {
             borderStyle: "solid",
             borderWidth: 1,
             borderColor: "transparent",
-            backgroundColor: selected ? glass.lighter : glass.base
+            backgroundColor: selected ? "var(--mantine-color-neutralColor-5)" : "var(--mantine-color-neutralColor-3)",
+            color: "var(--mantine-color-neutralColor-8)"
           },
           "&:hover > td": {
-            backgroundColor: onClick ? glass.lighter : void 0
+            backgroundColor: onClick ? "var(--mantine-color-neutralColor-8)" : void 0
           }
         };
       },
@@ -556,7 +557,7 @@ function Table({ children }) {
             width: "100%",
             borderCollapse: "separate",
             borderSpacing: `0 ${theme.spacing * 2}px`,
-            background: "transparent"
+            background: "neutral.1"
           }),
           children
         }
@@ -774,8 +775,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-CHd1dAzt.js"));
-const Footer = lazy(() => import("./index-9UUyZZ-F.js"));
+const Header$3 = lazy(() => import("./index-CHxc81t7.js"));
+const Footer = lazy(() => import("./index-BQ756FwG.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +860,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-DBFKFDFv.js"));
+const Header$2 = lazy(() => import("./index-JPCFjEIL.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1295,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index--70UT2n_.js"));
+const Badge = lazy(() => import("./index-znGVxTmK.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -1935,28 +1936,28 @@ function Item({ icon, label, disabled, active, onClick }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      css: ({ bg, colors }) => ({
+      css: () => ({
         width: "100%",
         borderRadius: 4,
         padding: "4px 12px",
-        background: bg.navIconsBg,
+        background: "var(--mantine-color-neutralColor-5)",
         border: "none",
         cursor: disabled ? "not-allowed" : "pointer",
         textAlign: "left",
         "&:hover": {
-          backgroundColor: disabled ? void 0 : colors.whiteTransparent10
+          backgroundColor: disabled ? void 0 : "var(--mantine-color-neutralColor-6)"
         }
       }),
       disabled,
       onClick,
       children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
-        IconComponent && /* @__PURE__ */ jsx(IconComponent, { size: 16 }),
+        IconComponent && /* @__PURE__ */ jsx(IconComponent, { size: 16, color: "overPicture" }),
         /* @__PURE__ */ jsx(
           Typography.Text,
           {
-            css: ({ fontSize, text, colors }) => ({
+            css: ({ fontSize }) => ({
               fontSize: fontSize.xs,
-              color: disabled ? text.secondary : active ? colors.focus : text.overPicture
+              color: disabled ? "var(--mantine-color-neutralColor-8)" : active ? "var(--mantine-color-neutralColor-8)" : "var(--mantine-color-neutralColor-8)"
             }),
             children: label
           }
@@ -1966,7 +1967,6 @@ function Item({ icon, label, disabled, active, onClick }) {
   );
 }
 function MoreMenu({ items, controlColor = "primary" }) {
-  const theme = useUITheme();
   const [opened, setOpened] = useState(false);
   return /* @__PURE__ */ jsxs(
     Popover,
@@ -1976,7 +1976,7 @@ function MoreMenu({ items, controlColor = "primary" }) {
       closeOnClickOutside: true,
       styles: {
         dropdown: {
-          background: theme.bg.navIconsBg,
+          background: "var(--mantine-color-neutralColor-4)",
           border: "none",
           padding: "12px 4px",
           marginLeft: 10
@@ -2005,7 +2005,7 @@ function MoreMenu({ items, controlColor = "primary" }) {
           }
         ) }),
         /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
-          /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 12, c: theme.text.secondary, children: "Page" }),
+          /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 12, c: "neutralColor.8", children: "Page" }),
           items.map((item) => /* @__PURE__ */ jsx(
             Item,
             {
@@ -2103,12 +2103,11 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
   );
 }
 function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, onCanvasCycle, isHistoryOpened, canvasMode = "hidden", oracleModel, sessionTitle }) {
-  const theme = useUITheme();
   const canvasActive = canvasMode !== "hidden";
-  return /* @__PURE__ */ jsxs(Flex, { bg: theme.bg.navIconsBg, py: 16, justify: "space-between", align: "center", children: [
+  return /* @__PURE__ */ jsxs(Flex, { bg: "neutralColor.4", py: 16, justify: "space-between", align: "center", children: [
     /* @__PURE__ */ jsxs(Flex, { gap: 6, align: "center", children: [
-      sessionTitle && /* @__PURE__ */ jsx(Typography.Text, { color: "overPicture", size: "s", children: sessionTitle }),
-      oracleModel && /* @__PURE__ */ jsx(Badge$1, { fw: 300, size: "sm", fz: 12, bg: theme.neutral.transparent10, tt: "initial", children: oracleModel })
+      sessionTitle && /* @__PURE__ */ jsx(Text$1, { c: "neutralColor.8", fz: 14, children: sessionTitle }),
+      oracleModel && /* @__PURE__ */ jsx(Badge$1, { fw: 300, size: "sm", fz: 12, c: "neutralColor.8", bg: "neutralColor.3", tt: "initial", children: oracleModel })
     ] }),
     /* @__PURE__ */ jsx(Flex, { gap: 6, align: "center", justify: "flex-end", children: isHistoryOpened ? /* @__PURE__ */ jsx(
       Center,
@@ -2117,17 +2116,17 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, o
           cursor: "pointer",
           borderRadius: 8,
           transition: "background 0.15s",
-          background: theme.neutral.transparent10,
+          background: "var(--mantine-color-neutralColor-5)",
           "&:hover": {
-            background: theme.neutral.transparent30
+            background: "var(--mantine-color-neutralColor-6)"
           }
         },
         p: 4,
         onClick: onHistoryClose,
-        children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18 })
+        children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18, color: "secondary" })
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsx(PlusSolid, { size: 18 }) }),
+      /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsx(PlusSolid, { size: 18, color: "secondary" }) }),
       /* @__PURE__ */ jsx(
         Center,
         {
@@ -2136,10 +2135,10 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, o
             borderRadius: 24
           },
           onClick: onCanvasCycle,
-          children: /* @__PURE__ */ jsx(Canvas, { size: 18, color: canvasActive ? "primary" : void 0 })
+          children: /* @__PURE__ */ jsx(Canvas, { size: 18, color: canvasActive ? "primary" : "secondary" })
         }
       ),
-      /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsx(HistorySolid, { size: 18 }) }),
+      /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsx(HistorySolid, { size: 18, color: "secondary" }) }),
       /* @__PURE__ */ jsx(
         Center,
         {
@@ -2147,14 +2146,14 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, o
             cursor: "pointer",
             borderRadius: 8,
             transition: "background 0.15s",
-            background: theme.neutral.transparent10,
+            background: "var(--mantine-color-neutralColor-5)",
             "&:hover": {
-              background: theme.neutral.transparent30
+              background: "var(--mantine-color-neutralColor-6)"
             }
           },
           p: 4,
           onClick: onClose,
-          children: /* @__PURE__ */ jsx(Close, { size: 18 })
+          children: /* @__PURE__ */ jsx(Close, { size: 18, color: "secondary" })
         }
       )
     ] }) })
@@ -2311,7 +2310,6 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   );
 }
 function NavigationItemSkeleton() {
-  const theme = useUITheme();
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2322,7 +2320,7 @@ function NavigationItemSkeleton() {
       py: 6,
       style: {
         borderRadius: 8,
-        backgroundColor: theme.bg.navIconsBg
+        backgroundColor: "var(--mantine-color-neutralColor-5)"
       },
       children: [
         /* @__PURE__ */ jsx(Flex, { align: "center", gap: 4, style: { flex: 1 }, children: /* @__PURE__ */ jsx(
@@ -2356,7 +2354,6 @@ function NavigationItemSkeleton() {
 }
 function RoomItem({ room }) {
   const { hovered, ref } = useHover();
-  const theme = useUITheme();
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2369,21 +2366,20 @@ function RoomItem({ room }) {
       style: {
         cursor: "pointer",
         borderRadius: 6,
-        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
+        backgroundColor: room.isActive || hovered ? "var(--mantine-color-neutralColor-5)" : "transparent",
         transform: hovered ? "translateX(2px)" : "translateX(0px)",
         transition: "all 0.15s ease"
       },
       onClick: () => room.onClick(room.id),
       children: [
         /* @__PURE__ */ jsx(room.icon, { size: 16, color: "secondary" }),
-        /* @__PURE__ */ jsx(Text$1, { fz: 13, c: theme.text.secondary, children: room.name })
+        /* @__PURE__ */ jsx(Text$1, { fz: 13, c: "neutralColor.8", children: room.name })
       ]
     }
   );
 }
 function RoomCategory({ category }) {
   const { hovered, ref } = useHover();
-  const theme = useUITheme();
   const { value, toggle: toggle2 } = useToggle(false);
   return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
     /* @__PURE__ */ jsxs(
@@ -2397,12 +2393,12 @@ function RoomCategory({ category }) {
         style: {
           cursor: "pointer",
           borderRadius: 6,
-          backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
+          backgroundColor: hovered ? "var(--mantine-color-neutralColor-6)" : "transparent",
           transition: "all 0.15s ease"
         },
         onClick: toggle2,
         children: [
-          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: "neutralColor.7", children: category.name }),
           /* @__PURE__ */ jsx(
             Center,
             {
@@ -2425,7 +2421,6 @@ function hasActiveDescendant(children) {
 }
 function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { hovered, ref } = useHover();
-  const theme = useUITheme();
   const hasChildren = item.children && item.children.length > 0;
   const hasActiveChild = useMemo(() => hasActiveDescendant(item.children), [item.children]);
   const initialExpanded = item?.isActive === true || hasActiveChild;
@@ -2469,7 +2464,7 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
             transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
             transition: "transform 0.2s ease",
             "&:hover": {
-              backgroundColor: theme.neutral.transparent10
+              backgroundColor: "neutralColor.5"
             }
           },
           children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
@@ -2497,7 +2492,7 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         style: {
           cursor: "pointer",
           borderRadius: 8,
-          backgroundColor: shouldShowActiveStyle ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+          backgroundColor: shouldShowActiveStyle ? "var(--mantine-color-neutralColor-6)" : hovered ? "var(--mantine-color-neutralColor-6)" : "transparent",
           transform: hovered ? "translateX(4px)" : "translateX(0px)",
           transition: "all 0.2s ease"
         },
@@ -2505,7 +2500,7 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         children: [
           /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
             renderIcon(),
-            /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: shouldShowActiveStyle ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
+            /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? "neutralColor.8" : "neutralColor.7", style: { flex: 1 }, children: item.name }),
             item.badgeCount ? /* @__PURE__ */ jsx(Badge$1, { size: "xs", variant: "filled", ml: 4, style: { minWidth: "16px", height: "15px", padding: "0 4px", fontSize: "8px" }, children: item.badgeCount }) : null
           ] }),
           /* @__PURE__ */ jsx(Flex, { children: item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsx(
@@ -2516,7 +2511,7 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
                 borderRadius: 4,
                 transition: "transform 0.2s ease",
                 "&:hover": {
-                  backgroundColor: theme.neutral.transparent10
+                  background: "var(--mantine-color-neutralColor-5)"
                 }
               },
               children: /* @__PURE__ */ jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
@@ -2529,7 +2524,6 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   ] });
 }
 function SelectedIndicator() {
-  const theme = useUITheme();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -2538,7 +2532,7 @@ function SelectedIndicator() {
         left: -8,
         width: 4,
         height: 30,
-        backgroundColor: theme.neutral.whiteFull,
+        backgroundColor: "var(--mantine-color-neutralColor-8)",
         borderRadius: 4
       }
     }
@@ -2546,7 +2540,6 @@ function SelectedIndicator() {
 }
 function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
   const { hovered, ref } = useHover();
-  const theme = useUITheme();
   const isSelected = selectedSpace === id;
   return /* @__PURE__ */ jsxs(
     Center,
@@ -2557,7 +2550,7 @@ function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
         borderRadius: 24
       },
       pos: "relative",
-      bg: hovered ? theme.neutral.transparent30 : theme.bg.navIconsBg,
+      bg: hovered ? "neutralColor.6" : "neutralColor.5",
       mih: 40,
       w: 40,
       onClick: () => onClick(id),
@@ -2604,8 +2597,6 @@ function AppShellNavigation({
   avatarIcon,
   onMenuItemClick,
   onSettingsIconClick,
-  onBackClick,
-  isBackButtonVisible,
   footerContent,
   roomCategories,
   right,
@@ -2626,7 +2617,6 @@ function AppShellNavigation({
 }) {
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
   const [asideWidth, setAsideWidth] = useState(450);
-  const theme = useUITheme();
   const [isSplitResizing, setIsSplitResizing] = useState(false);
   const isSplitResizingRef = useRef(false);
   const mainContainerRef = useRef(null);
@@ -2752,14 +2742,14 @@ function AppShellNavigation({
       withBorder: false,
       styles: {
         navbar: {
-          background: theme.bg.navIconsBg,
+          background: "var(--mantine-color-neutralColor-4)",
           transition: isNavbarResizing ? "none" : "width 0.3s ease"
         },
         aside: {
-          background: theme.bg.navScaled
+          background: "var(--mantine-color-neutralColor-4)"
         }
       },
-      bg: theme.bg.centralCanvasBg,
+      bg: "neutralColor.2",
       navbar: {
         width: isNavbarNotCollapsed ? navbarWidth : 56,
         breakpoint: "sm"
@@ -2778,7 +2768,7 @@ function AppShellNavigation({
               right: 0,
               h: "100%",
               pos: "absolute",
-              bg: isNavbarResizing ? theme.colors.focus : "transparent",
+              bg: isNavbarResizing ? "accent.5" : "transparent",
               sx: {
                 zIndex: 2,
                 cursor: "col-resize",
@@ -2788,17 +2778,17 @@ function AppShellNavigation({
             }
           ),
           /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
-            /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
+            /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: "neutralColor.2", children: [
               /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1 }, gap: 8, children: [
                 /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", h: 40, w: 40, onClick: companyIcon.onClick, children: [
                   typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon,
                   companyIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
                 ] }),
-                avatarIcon && /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: [
+                avatarIcon && /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: "neutralColor.5", h: 40, w: 40, onClick: avatarIcon.onClick, children: [
                   /* @__PURE__ */ jsx(Tooltip$4, { label: "Home", position: "right", withArrow: true, ml: 5, fz: 12, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
                   avatarIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
                 ] }),
-                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: "neutralColor.5" }),
                 temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     SpaceItem,
@@ -2811,7 +2801,7 @@ function AppShellNavigation({
                     },
                     temporarySpace.id
                   ),
-                  /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
+                  /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: "neutralColor.5" })
                 ] }),
                 /* @__PURE__ */ jsx(
                   ScrollArea,
@@ -2831,21 +2821,18 @@ function AppShellNavigation({
                   }
                 )
               ] }),
-              onAddSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
-              onMinusSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsx(MinusCircleSolid, { color: "secondary" }) }),
+              onAddSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
+              onMinusSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsx(MinusCircleSolid, { color: "secondary" }) }),
               /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 8, children: [
-                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
-                /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) })
+                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: "neutralColor.5" }),
+                /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) })
               ] })
             ] }),
             isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
             isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
               /* @__PURE__ */ jsxs(Stack$1, { gap: 5, children: [
                 /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
-                  /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "10px", children: [
-                    isBackButtonVisible ? /* @__PURE__ */ jsx(Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsx(Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsx(Globe, { size: 18 }) }),
-                    /* @__PURE__ */ jsx(Tooltip$4, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsx(Text$1, { lh: 1, c: theme.text.overPicture, children: cutText(pageItem.pageTitle, 21) || "Unknown" }) })
-                  ] }),
+                  /* @__PURE__ */ jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsx(Tooltip$4, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsx(Text$1, { lh: 1, c: "neutralColor.8", children: cutText(pageItem.pageTitle, 19) || "Unknown" }) }) }),
                   isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsx(
                     Center,
                     {
@@ -2853,9 +2840,9 @@ function AppShellNavigation({
                         cursor: "pointer",
                         borderRadius: 8,
                         transition: "background 0.15s",
-                        background: theme.neutral.transparent10,
+                        background: "var(--mantine-color-neutralColor-5)",
                         "&:hover": {
-                          background: theme.neutral.transparent30
+                          background: "var(--mantine-color-neutralColor-6)"
                         }
                       },
                       p: 4,
@@ -2902,7 +2889,7 @@ function AppShellNavigation({
                   /* @__PURE__ */ jsx(
                     Box,
                     {
-                      bg: theme.bg.navIconsBg,
+                      bg: "neutralColor.5",
                       style: {
                         width: getCanvasWidth(),
                         minWidth: shouldShowCanvas && canvasMode === "split" ? CANVAS_MIN_WIDTH : void 0,
@@ -2912,7 +2899,7 @@ function AppShellNavigation({
                         height: "100%",
                         transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
                         opacity: shouldShowCanvas ? 1 : 0,
-                        borderLeft: `1px solid ${theme.neutral.transparent10}`
+                        borderLeft: "1px solid var(--mantine-color-neutralColor-6)"
                       },
                       children: canvasContent
                     }
@@ -2922,7 +2909,7 @@ function AppShellNavigation({
                     {
                       w: 4,
                       h: "100%",
-                      bg: isSplitResizing ? theme.colors.focus : "transparent",
+                      bg: isSplitResizing ? "accent.5" : "transparent",
                       sx: {
                         cursor: "col-resize",
                         flexShrink: 0,
@@ -3385,18 +3372,17 @@ function CardHeader({ left, right }) {
   ] }) });
 }
 function OracleMessage({ oracleName, message }) {
-  const theme = useUITheme();
   return /* @__PURE__ */ jsxs(Box, { mb: 32, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-      /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.colors.focus, children: oracleName || "Oracle" }),
-      /* @__PURE__ */ jsx(Badge$1, { tt: "capitalize", c: theme.colors.focus, size: "md", bg: theme.colors.focusTransparent10, children: "Oracle" })
+      /* @__PURE__ */ jsx(Text$1, { fz: 12, c: "accent.5", children: oracleName || "Oracle" }),
+      /* @__PURE__ */ jsx(Badge$1, { tt: "capitalize", c: "accent.5", size: "md", bg: "accent.0", children: "Oracle" })
     ] }),
     /* @__PURE__ */ jsx(Box, { mt: 12, mb: 4, sx: { borderRadius: 16 }, children: /* @__PURE__ */ jsx(
       Markdown,
       {
         remarkPlugins: [remarkGfm],
         components: {
-          a: ({ children, href }) => /* @__PURE__ */ jsx("a", { href, style: { color: theme.colors.focus, textDecoration: "underline" }, children }),
+          a: ({ children, href }) => /* @__PURE__ */ jsx("a", { href, style: { color: "var(--mantine-color-accent-5)", textDecoration: "underline" }, children }),
           ul: ({ children, ...props }) => /* @__PURE__ */ jsx(
             "ul",
             {
@@ -3442,7 +3428,7 @@ function OracleMessage({ oracleName, message }) {
                 marginBottom: 12,
                 fontSize: "1.1em",
                 fontWeight: 600,
-                color: theme.neutral.transparent50
+                color: "var(--mantine-color-neutralColor-6)"
               },
               children
             }
@@ -3456,7 +3442,7 @@ function OracleMessage({ oracleName, message }) {
                 marginBottom: 8,
                 fontSize: "1em",
                 fontWeight: 500,
-                color: theme.neutral.transparent50
+                color: "var(--mantine-color-neutralColor-6)"
               },
               children
             }
@@ -3467,7 +3453,8 @@ function OracleMessage({ oracleName, message }) {
               ...props,
               style: {
                 margin: "8px 0",
-                lineHeight: 1.6
+                lineHeight: 1.6,
+                color: "var(--mantine-color-neutralColor-8)"
               },
               children
             }
@@ -3492,11 +3479,11 @@ function OracleMessage({ oracleName, message }) {
             {
               ...props,
               style: {
-                border: `1px solid ${theme.text.secondary}`,
+                border: "1px solid var(--mantine-color-neutralColor-7)",
                 padding: "8px 12px",
                 fontWeight: 600,
                 textAlign: "left",
-                backgroundColor: theme.bg.centralCanvasBg
+                backgroundColor: "var(--mantine-color-neutralColor-5)"
               },
               children
             }
@@ -3506,7 +3493,7 @@ function OracleMessage({ oracleName, message }) {
             {
               ...props,
               style: {
-                border: `1px solid ${theme.text.secondary}`,
+                border: "1px solid var(--mantine-color-neutralColor-7)",
                 padding: "8px 12px",
                 textAlign: "left"
               },
@@ -3520,10 +3507,9 @@ function OracleMessage({ oracleName, message }) {
   ] });
 }
 function UserMessage({ message, sender }) {
-  const theme = useUITheme();
-  return /* @__PURE__ */ jsxs(Box, { w: "fit-content", bg: theme.neutral.transparent10, sx: { borderRadius: 16 }, py: 12, px: 16, mb: 32, children: [
-    /* @__PURE__ */ jsx(Text$1, { c: theme.text.overPicture, fz: 12, children: sender }),
-    /* @__PURE__ */ jsx(Text$1, { c: theme.text.overPicture, mt: 10, sx: { wordBreak: "break-all" }, children: message }, message)
+  return /* @__PURE__ */ jsxs(Box, { w: "fit-content", bg: "neutralColor.6", sx: { borderRadius: 16 }, py: 12, px: 16, mb: 32, children: [
+    /* @__PURE__ */ jsx(Text$1, { c: "neutralColor.8", fz: 12, children: sender }),
+    /* @__PURE__ */ jsx(Text$1, { c: "neutralColor.8", mt: 10, sx: { wordBreak: "break-all" }, children: message }, message)
   ] });
 }
 function CardHero({ title, description, tag, pictogram: Pictogram, active, onClick, cornerIcon }) {
@@ -4657,11 +4643,11 @@ const CommandItem = ({
       px: 12,
       py: 8,
       align: "center",
-      bg: isSelected ? theme.colors.whiteTransparent30 : hovered ? theme.colors.whiteTransparent30 : theme.colors.whiteTransparent10,
+      bg: isSelected || hovered ? "var(--mantine-color-neutralColor-2)" : "var(--mantine-color-neutralColor-5)",
       gap: 14,
       style: {
         cursor: "pointer",
-        outline: hovered || isSelected ? `1px solid ${theme.colors.whiteTransparent30}` : "none",
+        outline: "none",
         transition: "all 0.2s ease",
         transform: hovered || isSelected ? "translateY(-1px)" : "translateY(0)",
         boxShadow: hovered || isSelected ? "0 4px 12px rgba(0, 0, 0, 0.15)" : "none"
@@ -4670,10 +4656,10 @@ const CommandItem = ({
         /* @__PURE__ */ jsx(Icon, { size: 26, color: "secondary" }),
         /* @__PURE__ */ jsxs(Stack$1, { gap: 0, children: [
           /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 6, children: [
-            /* @__PURE__ */ jsx(Text$1, { c: theme.text.overPicture, children: name }),
-            /* @__PURE__ */ jsx(Badge$1, { size: "sm", fw: 300, c: theme.colors.focus, bg: theme.colors.focusTransparent50, children: points > 0 ? `${points} AMP's` : "Free" })
+            /* @__PURE__ */ jsx(Text$1, { c: "neutralColor.8", children: name }),
+            /* @__PURE__ */ jsx(Badge$1, { size: "sm", fw: 300, c: theme.colors.focus, bg: "accent.7", children: points > 0 ? `${points} AMP's` : "Free" })
           ] }),
-          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.transparent50, children: description })
+          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: "neutralColor.7", children: description })
         ] })
       ]
     }
@@ -4939,7 +4925,7 @@ function FloatingInput({
           Box,
           {
             p: 16,
-            bg: theme.bg.navSpaces,
+            bg: "neutralColor.2",
             w: 340,
             pos: "absolute",
             left: "50%",
@@ -4955,7 +4941,7 @@ function FloatingInput({
             children: [
               filteredCommands.length !== 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsxs(Flex, { mb: 20, align: "center", justify: "space-between", children: [
-                  /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.text.secondary, children: "Commands" }),
+                  /* @__PURE__ */ jsx(Text$1, { fz: 12, c: "neutralColor.8", children: "Commands" }),
                   /* @__PURE__ */ jsx(EllipsisVSolid, { color: "secondary" })
                 ] }),
                 /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.colors.focus, children: oracleModel }),
@@ -5973,13 +5959,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-Cdq0xepm.js"));
-const Header$1 = lazy(() => import("./index-DhGqlduA.js"));
-const Content = lazy(() => import("./index-E541J7_X.js"));
+const MainAction = lazy(() => import("./index-DCeJ-EjR.js"));
+const Header$1 = lazy(() => import("./index-CNVan44C.js"));
+const Content = lazy(() => import("./index-CJf3kiYw.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-BmURKcEG.js"));
-const Actions = lazy(() => import("./index-BJlA64RQ.js"));
+const Assets = lazy(() => import("./index-DcOglj4H.js"));
+const Actions = lazy(() => import("./index-LMTN501y.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -11272,4 +11258,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-HlNIe7CZ.js.map
+//# sourceMappingURL=components-Dd5AcCq0.js.map