@ixo/ui 0.0.6 → 0.0.7

package/dist/{components-BoLr9Qow.js → components-BpZDHiID.js}

@@ -1,7 +1,7 @@
 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, U as User, d as AngleRightSolid, e as EllipsisHSolid, f as AngleLeftSolid, G as Globe, D as Dashboard, h as Groups, i as UserCircleSolid, j as Assets$1, k as Claims, l as Accounts, H as HistorySolid, m as LinkedResources, n as Proposals, I as ImpactCredits, o as GoTo, p as Share, q as PiePiece, r as ImpactCertificates, s as CommentDotsSolid, t as CommentAltSolid, M as MicrophoneSolid, u as Command, v as ArrowCircleRightSolid, w as Protocols, x as Investments, O as Oracles, y as Projects, z as Daos, B as Star, F as Expand, J as LeafSolid, K as ArrowDownSolid, N as ArrowLeftSolid, Q as ArrowRightSolid, R as Play, T as CheckCircle, V as Events, W as ThumbsUpSolid, X as CommentsSolid, Y as CopySolid, Z as Hourglass, _ as Act, $ as Info$1, a0 as ClaimsW, a1 as TachometerAltSolid, a2 as UserCogSolid, a3 as UsersSolid } from "./UsersSolid-CYOWcNJV.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, U as User, d as SettingsBarSolid, e as AngleRightSolid, f as ArrowLeftSolid, G as Globe, h as PanelLeftSolid, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, H as HistorySolid, 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, M as MicrophoneSolid, v as Command, w as ArrowCircleRightSolid, x as Protocols, y as Investments, O as Oracles, z as Projects, B as Daos, F as Star, J as AngleLeftSolid, K as Expand, N as LeafSolid, Q as ArrowDownSolid, R as ArrowRightSolid, T as Play, V as CheckCircle, W as Events, X as ThumbsUpSolid, Y as CommentsSolid, Z as CopySolid, _ as Hourglass, $ as Act, a0 as Info$1, a1 as ClaimsW, a2 as TachometerAltSolid, a3 as UserCogSolid, a4 as UsersSolid, a5 as EllipsisHSolid } from "./UsersSolid-CCU2B_Nz.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useId, useMemo, 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, AppShell, Stack as Stack$1, Center, Divider, Paper, Text as Text$1, Badge as Badge$1 } from "@mantine/core";
@@ -17,7 +17,7 @@ import { useCombobox, useSelect } from "downshift";
 import dayjs from "dayjs";
 import { B as Blank } from "./Blank-CElsicB7.js";
 import { E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-16wxaghO.js";
-import { d as dark, l as light } from "./themes-B3gRP8Wm.js";
+import { d as dark, l as light } from "./themes-Dxo8D1cq.js";
 function SlideUpArea({ children, isVisible }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-GZOZ7L0s.js"));
-const Footer = lazy(() => import("./index-CNWC1hG3.js"));
+const Header$3 = lazy(() => import("./index-bDjw-Rwj.js"));
+const Footer = lazy(() => import("./index-CShQJ1Tu.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-BfkAX8vS.js"));
+const Header$2 = lazy(() => import("./index-B99v2MeE.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-7eiS7IVr.js"));
+const Badge = lazy(() => import("./index-BjIDCEma.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2142,7 +2142,7 @@ function SpaceItem({ icon, id, onClick }) {
         transition: "transform 0.2s ease"
       },
       pos: "relative",
-      bg: hovered ? theme.neutral.transparent10 : theme.bg.navScaled,
+      bg: hovered ? theme.neutral.transparent10 : theme.bg.navIconsBg,
       mih: 40,
       w: 40,
       onClick: () => onClick(id),
@@ -2164,93 +2164,31 @@ function MenuItem({ item, onMenuItemClick }) {
       style: {
         cursor: "pointer",
         borderRadius: 8,
-        backgroundColor: item.isActive ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+        backgroundColor: item.isActive ? theme.bg.navIconsBg : hovered ? theme.bg.navIconsBg : "transparent",
         transform: hovered ? "translateX(4px)" : "translateX(0px)",
         transition: "all 0.2s ease"
       },
       onClick: () => onMenuItemClick(item),
       children: [
-        /* @__PURE__ */ jsx(item.icon, { size: 20, color: "secondary" }),
-        /* @__PURE__ */ jsx(Text$1, { fz: 14, c: theme.neutral.lightGray, children: item.name })
+        /* @__PURE__ */ jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
+        /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, children: item.name })
       ]
     }
   );
 }
-function RoomItem({ room }) {
-  const { hovered, ref } = useHover();
-  const theme = useUITheme();
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      ref,
-      align: "center",
-      gap: 8,
-      px: 12,
-      py: 4,
-      ml: 16,
-      style: {
-        cursor: "pointer",
-        borderRadius: 6,
-        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "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 })
-      ]
-    }
-  );
-}
-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(
-      Flex,
-      {
-        ref,
-        align: "center",
-        justify: "space-between",
-        px: 12,
-        py: 4,
-        style: {
-          cursor: "pointer",
-          borderRadius: 6,
-          backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
-          transition: "all 0.15s ease"
-        },
-        onClick: toggle2,
-        children: [
-          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
-          /* @__PURE__ */ jsx(
-            Center,
-            {
-              sx: {
-                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
-                transition: "transform 0.2s ease"
-              },
-              children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
-            }
-          )
-        ]
-      }
-    ),
-    !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
-  ] });
-}
 function AppShellNavigation({
   spaces,
+  pageItem,
   selectedSpace,
   menuItems,
-  roomCategories,
   companyIcon,
   onAddSpaceClick,
   avatarIcon,
   onMenuItemClick,
-  onPersonalSpaceClick,
+  onSettingsIconClick,
+  onBackClick,
+  isBackButtonVisible,
+  footerMenuItems,
   children
 }) {
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -2264,7 +2202,7 @@ function AppShellNavigation({
           background: theme.bg.navScaled
         }
       },
-      bg: theme.bg.navScaled,
+      bg: theme.bg.navIconsBg,
       navbar: {
         width: desktopOpened ? 300 : 56,
         breakpoint: "sm"
@@ -2273,8 +2211,8 @@ function AppShellNavigation({
         /* @__PURE__ */ jsx(AppShell.Navbar, { children: /* @__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, { align: "center", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, gap: 8, children: [
-              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, 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 }),
-              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: onPersonalSpaceClick, children: /* @__PURE__ */ jsx(User, { color: "secondary" }) }),
+              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, 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 }),
+              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
               /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
               /* @__PURE__ */ jsx(
                 Stack$1,
@@ -2300,46 +2238,25 @@ function AppShellNavigation({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
+            /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { 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.navScaled, h: 40, w: 40, onClick: avatarIcon.onClick, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
-              !desktopOpened && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(AngleRightSolid, { color: "secondary" }) })
+              /* @__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" }) }),
+              !desktopOpened && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(AngleRightSolid, { color: "secondary" }) })
             ] })
           ] }),
-          desktopOpened && /* @__PURE__ */ jsxs(Stack$1, { w: "100%", gap: 5, py: 16, px: 12, children: [
-            /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
-              /* @__PURE__ */ jsx(Text$1, { lh: 1, c: theme.text.overPicture, children: spaces.find(({ id }) => id === selectedSpace)?.name || "Unknown" }),
-              /* @__PURE__ */ jsxs(Flex, { gap: 12, align: "center", children: [
-                /* @__PURE__ */ jsx(EllipsisHSolid, { color: "secondary" }),
-                /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(AngleLeftSolid, { color: "secondary" }) })
-              ] })
+          desktopOpened && /* @__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(Text$1, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+                ] }),
+                /* @__PURE__ */ jsx(Flex, { gap: 12, align: "center", children: /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(PanelLeftSolid, { size: 22, color: "secondary" }) }) })
+              ] }),
+              menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id))
             ] }),
-            menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
-            /* @__PURE__ */ jsxs(
-              Flex,
-              {
-                align: "center",
-                gap: 8,
-                px: 12,
-                py: 6,
-                style: {
-                  cursor: "pointer",
-                  borderRadius: 8,
-                  backgroundColor: "transparent"
-                },
-                onClick: () => {
-                },
-                children: [
-                  /* @__PURE__ */ jsx(EllipsisHSolid, { size: 20, color: "secondary" }),
-                  /* @__PURE__ */ jsx(Text$1, { fz: 14, c: theme.neutral.lightGray, children: "More" })
-                ]
-              }
-            ),
-            roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Text$1, { pl: 11, mt: 16, fz: 14, c: theme.neutral.lightGray, children: "Rooms" }),
-              /* @__PURE__ */ jsx(Stack$1, { gap: 8, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
-            ] })
+            /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerMenuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)) })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(AppShell.Main, { children })
@@ -2471,8 +2388,6 @@ function ButtonBasic({
           width = "100%";
         }
         const baseStyles = {
-          fontFamily: '"DM Sans", "Roboto", Arial, sans-serif',
-          // DM Sans from Figma
           fontSize,
           fontWeight: 400,
           lineHeight,
@@ -2631,7 +2546,6 @@ function ButtonSubtle({ state = "default", type = "iconLeft", disabled = false,
           padding: isIconOnly ? "2px" : "2px 8px",
           width: isIconOnly ? "28px" : "auto",
           height: isIconOnly ? "28px" : "auto",
-          fontFamily: "DM Sans",
           fontSize: "16px",
           fontWeight: 400,
           lineHeight: "1.5em",
@@ -4397,7 +4311,6 @@ const EcosystemCard = ({ title = "Ecosystem Name", subtitle = "Short Ecosystem S
                   backdropFilter: "blur(30px)",
                   WebkitBackdropFilter: "blur(30px)",
                   color: "#fff",
-                  fontFamily: "Roboto",
                   fontWeight: 700,
                   fontSize: 20,
                   boxShadow: "0 4px 24px 0 rgba(0,0,0,0.04)"
@@ -5278,13 +5191,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-DRT7h4xd.js"));
-const Header$1 = lazy(() => import("./index-ufMtBCkV.js"));
-const Content = lazy(() => import("./index-Bd5Hg5BP.js"));
+const MainAction = lazy(() => import("./index-DjAL33eG.js"));
+const Header$1 = lazy(() => import("./index-w6bUS_-b.js"));
+const Content = lazy(() => import("./index-COR4dGTK.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-BwK5-98B.js"));
-const Actions = lazy(() => import("./index-D-yx5xCK.js"));
+const Assets = lazy(() => import("./index-DCp6OZLU.js"));
+const Actions = lazy(() => import("./index-BgZ9Odny.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);
@@ -10598,4 +10511,4 @@ export {
   CardSelector as y,
   CardOutput as z
 };
-//# sourceMappingURL=components-BoLr9Qow.js.map
+//# sourceMappingURL=components-BpZDHiID.js.map