@ixo/ui 0.0.40 → 0.1.1

package/dist/{components-C4syxh7E.cjs → components-kyZV4xKe.cjs}

@@ -24,16 +24,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const radash = require("radash");
 const react = require("@emotion/react");
-const UsersSolid = require("./UsersSolid-DjJvkV7c.cjs");
+const UsersSolid = require("./UsersSolid-C29C53eo.cjs");
 const react$1 = require("react");
 const constants = require("./constants-DFJRYpE2.cjs");
 const core = require("@mantine/core");
 const css = require("@emotion/css");
 const reactDom = require("react-dom");
 const DOMPurify = require("dompurify");
-const useUITheme = require("./useUITheme-DqgAb7n1.cjs");
 const hooks = require("@mantine/hooks");
 const useEventSubscribe = require("./useEventSubscribe-B019T27n.cjs");
+const useUITheme = require("./useUITheme-DqgAb7n1.cjs");
 const Markdown = require("react-markdown");
 const remarkGfm = require("remark-gfm");
 const downshift = require("downshift");
@@ -426,11 +426,11 @@ function Td({ children, value, description, icon: Icon, iconNoColor, image, tag,
             Icon ? /* @__PURE__ */ jsxRuntime.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"
@@ -468,8 +468,8 @@ function Td({ children, value, description, icon: Icon, iconNoColor, image, tag,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      css: ({ text, fontSize }) => ({
-                        color: text.overPicture,
+                      css: ({ fontSize }) => ({
+                        color: "var(--mantine-color-neutralColor-8)",
                         fontSize: fontSize.regular
                       }),
                       children: value
@@ -478,8 +478,8 @@ function Td({ children, value, description, icon: Icon, iconNoColor, image, tag,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      css: ({ text, fontSize }) => ({
-                        color: text.overPicture,
+                      css: ({ fontSize }) => ({
+                        color: "var(--mantine-color-neutralColor-8)",
                         fontSize: fontSize.xs,
                         opacity: 0.7
                       }),
@@ -502,7 +502,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,
@@ -546,17 +546,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
           }
         };
       },
@@ -579,7 +580,7 @@ function Table({ children }) {
             width: "100%",
             borderCollapse: "separate",
             borderSpacing: `0 ${theme.spacing * 2}px`,
-            background: "transparent"
+            background: "neutral.1"
           }),
           children
         }
@@ -797,8 +798,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DJJDuYPt.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-CAhZlLHI.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CdvEC2KX.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-kAjxkAWZ.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -882,7 +883,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BZZVVGWc.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CghhpKGt.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1317,7 +1318,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Br-LPA19.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-BqhR9ZZk.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -1958,28 +1959,28 @@ function Item({ icon, label, disabled, active, onClick }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
-        IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 16 }),
+        IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 16, color: "overPicture" }),
         /* @__PURE__ */ jsxRuntime.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
           }
@@ -1989,7 +1990,6 @@ function Item({ icon, label, disabled, active, onClick }) {
   );
 }
 function MoreMenu({ items, controlColor = "primary" }) {
-  const theme = useUITheme.useUITheme();
   const [opened, setOpened] = react$1.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Popover,
@@ -1999,7 +1999,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
@@ -2028,7 +2028,7 @@ function MoreMenu({ items, controlColor = "primary" }) {
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(core.Popover.Dropdown, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ml: 12, mb: 10, fz: 12, c: theme.text.secondary, children: "Page" }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ml: 12, mb: 10, fz: 12, c: "neutralColor.8", children: "Page" }),
           items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             Item,
             {
@@ -2126,12 +2126,11 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
   );
 }
 function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, onCanvasCycle, isHistoryOpened, canvasMode = "hidden", oracleModel, sessionTitle }) {
-  const theme = useUITheme.useUITheme();
   const canvasActive = canvasMode !== "hidden";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { bg: theme.bg.navIconsBg, py: 16, justify: "space-between", align: "center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { bg: "neutralColor.4", py: 16, justify: "space-between", align: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 6, align: "center", children: [
-      sessionTitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "overPicture", size: "s", children: sessionTitle }),
-      oracleModel && /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { fw: 300, size: "sm", fz: 12, bg: theme.neutral.transparent10, tt: "initial", children: oracleModel })
+      sessionTitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "neutralColor.8", fz: 14, children: sessionTitle }),
+      oracleModel && /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { fw: 300, size: "sm", fz: 12, c: "neutralColor.8", bg: "neutralColor.3", tt: "initial", children: oracleModel })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: 6, align: "center", justify: "flex-end", children: isHistoryOpened ? /* @__PURE__ */ jsxRuntime.jsx(
       core.Center,
@@ -2140,17 +2139,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__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18 })
+        children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18, color: "secondary" })
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { size: 18 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { size: 18, color: "secondary" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         core.Center,
         {
@@ -2159,10 +2158,10 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, o
             borderRadius: 24
           },
           onClick: onCanvasCycle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Canvas, { size: 18, color: canvasActive ? "primary" : void 0 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Canvas, { size: 18, color: canvasActive ? "primary" : "secondary" })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.HistorySolid, { size: 18 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.HistorySolid, { size: 18, color: "secondary" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         core.Center,
         {
@@ -2170,14 +2169,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__ */ jsxRuntime.jsx(UsersSolid.Close, { size: 18 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Close, { size: 18, color: "secondary" })
         }
       )
     ] }) })
@@ -2220,7 +2219,7 @@ function Avatar({ src, rounded = true, size = 62, did }) {
 }
 const MIN_WIDTH = 200;
 const MAX_WIDTH = 700;
-function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
+function AsideResizable({ children, navbarWidth, asideMaximized, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = react$1.useState(false);
   const [ref] = hooks.useResizeObserver();
   const isShowingRef = react$1.useRef(false);
@@ -2297,9 +2296,9 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.AppShell.Aside,
     {
-      w: width,
+      w: asideMaximized ? "100%" : width,
       miw: 200,
-      maw: MAX_WIDTH,
+      maw: asideMaximized ? `calc(100% - ${navbarWidth}px)` : MAX_WIDTH,
       ref,
       sx: {
         overflowY: "auto",
@@ -2311,7 +2310,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !asideMaximized && /* @__PURE__ */ jsxRuntime.jsx(
           core.Box,
           {
             w: 4,
@@ -2334,7 +2333,6 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   );
 }
 function NavigationItemSkeleton() {
-  const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Flex,
     {
@@ -2345,7 +2343,7 @@ function NavigationItemSkeleton() {
       py: 6,
       style: {
         borderRadius: 8,
-        backgroundColor: theme.bg.navIconsBg
+        backgroundColor: "var(--mantine-color-neutralColor-5)"
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", gap: 4, style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2379,7 +2377,6 @@ function NavigationItemSkeleton() {
 }
 function RoomItem({ room }) {
   const { hovered, ref } = hooks.useHover();
-  const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Flex,
     {
@@ -2392,21 +2389,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__ */ jsxRuntime.jsx(room.icon, { size: 16, color: "secondary" }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 13, c: theme.text.secondary, children: room.name })
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 13, c: "neutralColor.8", children: room.name })
       ]
     }
   );
 }
 function RoomCategory({ category }) {
   const { hovered, ref } = hooks.useHover();
-  const theme = useUITheme.useUITheme();
   const { value, toggle } = useToggle(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 2, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2420,12 +2416,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: toggle,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: "neutralColor.7", children: category.name }),
           /* @__PURE__ */ jsxRuntime.jsx(
             core.Center,
             {
@@ -2448,7 +2444,6 @@ function hasActiveDescendant(children) {
 }
 function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { hovered, ref } = hooks.useHover();
-  const theme = useUITheme.useUITheme();
   const hasChildren = item.children && item.children.length > 0;
   const hasActiveChild = react$1.useMemo(() => hasActiveDescendant(item.children), [item.children]);
   const initialExpanded = item?.isActive === true || hasActiveChild;
@@ -2492,7 +2487,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__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
@@ -2520,7 +2515,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"
         },
@@ -2528,7 +2523,7 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
             renderIcon(),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: shouldShowActiveStyle ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: item.isActive ? "neutralColor.8" : "neutralColor.7", style: { flex: 1 }, children: item.name }),
             item.badgeCount ? /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { size: "xs", variant: "filled", ml: 4, style: { minWidth: "16px", height: "15px", padding: "0 4px", fontSize: "8px" }, children: item.badgeCount }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Flex, { children: item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2539,7 +2534,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__ */ jsxRuntime.jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
@@ -2552,7 +2547,6 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   ] });
 }
 function SelectedIndicator() {
-  const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2561,7 +2555,7 @@ function SelectedIndicator() {
         left: -8,
         width: 4,
         height: 30,
-        backgroundColor: theme.neutral.whiteFull,
+        backgroundColor: "var(--mantine-color-neutralColor-8)",
         borderRadius: 4
       }
     }
@@ -2569,7 +2563,6 @@ function SelectedIndicator() {
 }
 function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
   const { hovered, ref } = hooks.useHover();
-  const theme = useUITheme.useUITheme();
   const isSelected = selectedSpace === id;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Center,
@@ -2580,7 +2573,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),
@@ -2631,6 +2624,7 @@ function AppShellNavigation({
   roomCategories,
   right,
   asideCollapsed = true,
+  asideMaximized = false,
   onAsideToggle,
   onMaxExpand,
   onAiOpen,
@@ -2647,7 +2641,6 @@ function AppShellNavigation({
 }) {
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = hooks.useDisclosure(true);
   const [asideWidth, setAsideWidth] = react$1.useState(450);
-  const theme = useUITheme.useUITheme();
   const [isSplitResizing, setIsSplitResizing] = react$1.useState(false);
   const isSplitResizingRef = react$1.useRef(false);
   const mainContainerRef = react$1.useRef(null);
@@ -2773,14 +2766,15 @@ 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-2)",
+          borderLeft: "1px solid var(--mantine-color-neutralColor-6)"
         }
       },
-      bg: theme.bg.centralCanvasBg,
+      bg: "neutralColor.2",
       navbar: {
         width: isNavbarNotCollapsed ? navbarWidth : 56,
         breakpoint: "sm"
@@ -2799,7 +2793,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",
@@ -2809,17 +2803,17 @@ function AppShellNavigation({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { style: { height: "100%" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { p: 8, w: 56, justify: "space-between", h: "100%", bg: "neutralColor.2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", style: { flex: 1 }, gap: 8, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", h: 40, w: 40, onClick: companyIcon.onClick, children: [
                   typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon,
                   companyIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
                 ] }),
-                avatarIcon && /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: [
+                avatarIcon && /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: "neutralColor.5", h: 40, w: 40, onClick: avatarIcon.onClick, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: "Home", position: "right", withArrow: true, ml: 5, fz: 12, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
                   avatarIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: "neutralColor.5" }),
                 temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     SpaceItem,
@@ -2832,7 +2826,7 @@ function AppShellNavigation({
                     },
                     temporarySpace.id
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: "neutralColor.5" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   core.ScrollArea,
@@ -2852,18 +2846,18 @@ function AppShellNavigation({
                   }
                 )
               ] }),
-              onAddSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { color: "secondary" }) }),
-              onMinusSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.MinusCircleSolid, { color: "secondary" }) }),
+              onAddSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { color: "secondary" }) }),
+              onMinusSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.MinusCircleSolid, { color: "secondary" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", gap: 8, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
-                /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.SettingsBarSolid, { size: 22, color: "secondary" }) })
+                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: "neutralColor.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: "neutralColor.5", h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.SettingsBarSolid, { size: 22, color: "secondary" }) })
               ] })
             ] }),
             isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
             isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 5, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: cutText(pageItem.pageTitle, 19) || "Unknown" }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", gap: "10px", children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: pageItem.pageTitle || "Unknown", disabled: !isTitleOverflowing, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: "neutralColor.8", children: cutText(pageItem.pageTitle, 19) || "Unknown" }) }) }),
                   isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsx(
                     core.Center,
                     {
@@ -2871,9 +2865,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,
@@ -2920,7 +2914,7 @@ function AppShellNavigation({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     core.Box,
                     {
-                      bg: theme.bg.navIconsBg,
+                      bg: "neutralColor.5",
                       style: {
                         width: getCanvasWidth(),
                         minWidth: shouldShowCanvas && canvasMode === "split" ? CANVAS_MIN_WIDTH : void 0,
@@ -2930,7 +2924,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
                     }
@@ -2940,7 +2934,7 @@ function AppShellNavigation({
                     {
                       w: 4,
                       h: "100%",
-                      bg: isSplitResizing ? theme.colors.focus : "transparent",
+                      bg: isSplitResizing ? "accent.5" : "transparent",
                       sx: {
                         cursor: "col-resize",
                         flexShrink: 0,
@@ -2970,7 +2964,19 @@ function AppShellNavigation({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(AsideResizable, { asideCollapsed, onAsideToggle, onMaxExpand, width: asideWidth, onWidthChange: setAsideWidth, children: right })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AsideResizable,
+          {
+            navbarWidth,
+            asideCollapsed,
+            asideMaximized,
+            onAsideToggle,
+            onMaxExpand,
+            width: asideWidth,
+            onWidthChange: setAsideWidth,
+            children: right
+          }
+        )
       ]
     }
   );
@@ -3403,18 +3409,17 @@ function CardHeader({ left, right }) {
   ] }) });
 }
 function OracleMessage({ oracleName, message }) {
-  const theme = useUITheme.useUITheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { mb: 32, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.colors.focus, children: oracleName || "Oracle" }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { tt: "capitalize", c: theme.colors.focus, size: "md", bg: theme.colors.focusTransparent10, children: "Oracle" })
+      /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: "accent.5", children: oracleName || "Oracle" }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { tt: "capitalize", c: "accent.5", size: "md", bg: "accent.0", children: "Oracle" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(core.Box, { mt: 12, mb: 4, sx: { borderRadius: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
       Markdown,
       {
         remarkPlugins: [remarkGfm],
         components: {
-          a: ({ children, href }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, style: { color: theme.colors.focus, textDecoration: "underline" }, children }),
+          a: ({ children, href }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, style: { color: "var(--mantine-color-accent-5)", textDecoration: "underline" }, children }),
           ul: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
             "ul",
             {
@@ -3460,7 +3465,7 @@ function OracleMessage({ oracleName, message }) {
                 marginBottom: 12,
                 fontSize: "1.1em",
                 fontWeight: 600,
-                color: theme.neutral.transparent50
+                color: "var(--mantine-color-neutralColor-6)"
               },
               children
             }
@@ -3474,7 +3479,7 @@ function OracleMessage({ oracleName, message }) {
                 marginBottom: 8,
                 fontSize: "1em",
                 fontWeight: 500,
-                color: theme.neutral.transparent50
+                color: "var(--mantine-color-neutralColor-6)"
               },
               children
             }
@@ -3485,7 +3490,8 @@ function OracleMessage({ oracleName, message }) {
               ...props,
               style: {
                 margin: "8px 0",
-                lineHeight: 1.6
+                lineHeight: 1.6,
+                color: "var(--mantine-color-neutralColor-8)"
               },
               children
             }
@@ -3510,11 +3516,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
             }
@@ -3524,7 +3530,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"
               },
@@ -3538,10 +3544,9 @@ function OracleMessage({ oracleName, message }) {
   ] });
 }
 function UserMessage({ message, sender }) {
-  const theme = useUITheme.useUITheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { w: "fit-content", bg: theme.neutral.transparent10, sx: { borderRadius: 16 }, py: 12, px: 16, mb: 32, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: theme.text.overPicture, fz: 12, children: sender }),
-    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: theme.text.overPicture, mt: 10, sx: { wordBreak: "break-all" }, children: message }, message)
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { w: "fit-content", bg: "neutralColor.6", sx: { borderRadius: 16 }, py: 12, px: 16, mb: 32, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "neutralColor.8", fz: 12, children: sender }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "neutralColor.8", mt: 10, sx: { wordBreak: "break-all" }, children: message }, message)
   ] });
 }
 function CardHero({ title, description, tag, pictogram: Pictogram, active, onClick, cornerIcon }) {
@@ -4675,11 +4680,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"
@@ -4688,10 +4693,10 @@ const CommandItem = ({
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 26, color: "secondary" }),
         /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 0, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 6, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: theme.text.overPicture, children: name }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { size: "sm", fw: 300, c: theme.colors.focus, bg: theme.colors.focusTransparent50, children: points > 0 ? `${points} AMP's` : "Free" })
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: "neutralColor.8", children: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { size: "sm", fw: 300, c: theme.colors.focus, bg: "accent.7", children: points > 0 ? `${points} AMP's` : "Free" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.neutral.transparent50, children: description })
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: "neutralColor.7", children: description })
         ] })
       ]
     }
@@ -4957,7 +4962,7 @@ function FloatingInput({
           core.Box,
           {
             p: 16,
-            bg: theme.bg.navSpaces,
+            bg: "neutralColor.2",
             w: 340,
             pos: "absolute",
             left: "50%",
@@ -4973,7 +4978,7 @@ function FloatingInput({
             children: [
               filteredCommands.length !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 20, align: "center", justify: "space-between", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.text.secondary, children: "Commands" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: "neutralColor.8", children: "Commands" }),
                   /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisVSolid, { color: "secondary" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.colors.focus, children: oracleModel }),
@@ -5991,13 +5996,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CF_eiQT5.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-w1HUie3I.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-53vLP_Z1.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-wbesxk1o.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-W8LiSKfV.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-DEb3PU0a.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-DjL20pr9.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-vV5U7oln.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-ovSIwiD8.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-BUqAh_QT.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -11288,4 +11293,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-C4syxh7E.cjs.map
+//# sourceMappingURL=components-kyZV4xKe.cjs.map