@ixo/ui 0.0.32 → 0.0.34

package/dist/{components-CauA8pj8.cjs → components-BpMWfEEt.cjs}

@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DoAqrgoe.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-DkNehzf5.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-C5RwHoR5.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-ChMy4OWq.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -882,7 +882,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-BPxg0Mo_.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BYkENVo6.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 +1317,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Dl77uT7x.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-CrKmiIcJ.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2207,6 +2207,7 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
 const MIN_WIDTH = 200;
+const MAX_WIDTH = 700;
 function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = react$1.useState(false);
   const [ref] = hooks.useResizeObserver();
@@ -2242,7 +2243,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   const handleMouseMove = (e) => {
     if (!isResizing) return;
     const newWidth = window.innerWidth - e.clientX;
-    const maxWidth = window.innerWidth - 600;
+    const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     const constrainedWidth = Math.min(Math.max(newWidth, MIN_WIDTH), maxWidth);
     onWidthChange?.(constrainedWidth);
   };
@@ -2253,7 +2254,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     }
   }, [width, asideCollapsed, onAsideToggle]);
   react$1.useEffect(() => {
-    const maxWidth = window.innerWidth - 600;
+    const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     if (width >= maxWidth && onMaxExpand && !hasFiredMaxExpand.current) {
       hasFiredMaxExpand.current = true;
       clearListeners();
@@ -2264,7 +2265,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   }, [width, onMaxExpand]);
   react$1.useEffect(() => {
     const handleWindowResize = () => {
-      const newMaxWidth = window.innerWidth - 600;
+      const newMaxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
       const newMinWidth = MIN_WIDTH;
       if (width > newMaxWidth) {
         onWidthChange?.(newMaxWidth);
@@ -2286,7 +2287,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     {
       w: width,
       miw: 200,
-      maw: window.innerWidth - 340,
+      maw: MAX_WIDTH,
       ref,
       sx: {
         overflowY: "auto",
@@ -2522,7 +2523,7 @@ function SelectedIndicator() {
     }
   );
 }
-function SpaceItem({ icon, id, selectedSpace, onClick }) {
+function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
   const { hovered, ref } = hooks.useHover();
   const theme = useUITheme.useUITheme();
   const isSelected = selectedSpace === id;
@@ -2540,7 +2541,7 @@ function SpaceItem({ icon, id, selectedSpace, onClick }) {
       w: 40,
       onClick: () => onClick(id),
       children: [
-        typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon,
+        /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: name, ml: 5, fz: 12, position: "right", withArrow: true, children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon }),
         isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
       ]
     }
@@ -2576,6 +2577,65 @@ function AppShellNavigation({
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = hooks.useDisclosure(true);
   const [asideWidth, setAsideWidth] = react$1.useState(450);
   const theme = useUITheme.useUITheme();
+  const [navbarWidth, setNavbarWidth] = react$1.useState(isAiOpened ? 450 : 300);
+  const [isNavbarResizing, setIsNavbarResizing] = react$1.useState(false);
+  const isNavbarResizingRef = react$1.useRef(false);
+  react$1.useEffect(() => {
+    const minWidth = isAiOpened ? 450 : 300;
+    if (navbarWidth < minWidth) {
+      setNavbarWidth(minWidth);
+    }
+  }, [isAiOpened, navbarWidth]);
+  function clearNavbarListeners() {
+    document.removeEventListener("mousemove", handleNavbarMouseMove);
+    document.removeEventListener("mouseup", handleNavbarMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+  const handleNavbarMouseMove = react$1.useCallback(
+    (e) => {
+      if (!isNavbarResizingRef.current) return;
+      const minWidth = isAiOpened ? 450 : 300;
+      const maxWidth = 700;
+      const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
+      setNavbarWidth(newWidth);
+    },
+    [isAiOpened]
+  );
+  const handleNavbarMouseUp = react$1.useCallback(() => {
+    setIsNavbarResizing(false);
+    isNavbarResizingRef.current = false;
+  }, []);
+  const handleNavbarMouseDown = (e) => {
+    e.preventDefault();
+    setIsNavbarResizing(true);
+    isNavbarResizingRef.current = true;
+  };
+  react$1.useEffect(() => {
+    if (isNavbarResizing) {
+      document.addEventListener("mousemove", handleNavbarMouseMove);
+      document.addEventListener("mouseup", handleNavbarMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      console.count("2");
+      clearNavbarListeners();
+    }
+    return () => clearNavbarListeners();
+  }, [isNavbarResizing, handleNavbarMouseMove, handleNavbarMouseUp]);
+  react$1.useEffect(() => {
+    const handleWindowResize = () => {
+      const maxWidth = 700;
+      const minWidth = isAiOpened ? 450 : 300;
+      if (navbarWidth > maxWidth) {
+        setNavbarWidth(maxWidth);
+      } else if (navbarWidth < minWidth) {
+        setNavbarWidth(minWidth);
+      }
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [navbarWidth, isAiOpened]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.AppShell,
     {
@@ -2583,7 +2643,7 @@ function AppShellNavigation({
       styles: {
         navbar: {
           background: theme.bg.navIconsBg,
-          transition: "width 0.3s ease"
+          transition: isNavbarResizing ? "none" : "width 0.3s ease"
         },
         aside: {
           background: theme.bg.navScaled
@@ -2591,7 +2651,7 @@ function AppShellNavigation({
       },
       bg: theme.bg.centralCanvasBg,
       navbar: {
-        width: isNavbarNotCollapsed ? isAiOpened ? 450 : 300 : 56,
+        width: isNavbarNotCollapsed ? navbarWidth : 56,
         breakpoint: "sm"
       },
       aside: {
@@ -2599,90 +2659,109 @@ function AppShellNavigation({
         breakpoint: "sm"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Navbar, { children: /* @__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, { 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: [
-                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 }),
-              temporarySpace && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SpaceItem,
-                  {
-                    selectedSpace,
-                    icon: temporarySpace.icon,
-                    name: temporarySpace.name,
-                    id: temporarySpace.id,
-                    onClick: temporarySpace.onClick
-                  },
-                  temporarySpace.id
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Stack,
-                {
-                  align: "center",
-                  gap: 8,
-                  style: {
-                    flex: 1,
-                    overflowY: "auto",
-                    maxHeight: "calc(100vh - 300px)",
-                    scrollbarWidth: "none",
-                    msOverflowStyle: "none"
-                  },
-                  sx: {
-                    "&::-webkit-scrollbar": {
-                      display: "none"
-                    }
-                  },
-                  children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
-                }
-              )
-            ] }),
-            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" }) }),
-            /* @__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" }) })
-            ] })
-          ] }),
-          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.jsxs(Flex, { align: "center", gap: "10px", children: [
-                  isBackButtonVisible ? /* @__PURE__ */ jsxRuntime.jsx(core.Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsxRuntime.jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Globe, { size: 18 }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Navbar, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { sx: { position: "relative", height: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Box,
+            {
+              w: 4,
+              top: 0,
+              right: 0,
+              h: "100%",
+              pos: "absolute",
+              bg: isNavbarResizing ? theme.colors.focus : "transparent",
+              sx: {
+                zIndex: 2,
+                cursor: "col-resize",
+                transition: "background-color 0.2s ease"
+              },
+              onMouseDown: handleNavbarMouseDown
+            }
+          ),
+          /* @__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, { 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, {})
                 ] }),
-                isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsx(
-                  core.Center,
+                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: [
+                  /* @__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 }),
+                temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SpaceItem,
+                    {
+                      selectedSpace,
+                      icon: temporarySpace.icon,
+                      name: temporarySpace.name,
+                      id: temporarySpace.id,
+                      onClick: temporarySpace.onClick
+                    },
+                    temporarySpace.id
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  core.Stack,
                   {
+                    align: "center",
+                    gap: 8,
+                    style: {
+                      flex: 1,
+                      overflowY: "auto",
+                      maxHeight: "calc(100vh - 300px)",
+                      scrollbarWidth: "none",
+                      msOverflowStyle: "none"
+                    },
                     sx: {
-                      cursor: "pointer",
-                      borderRadius: 8,
-                      transition: "background 0.15s",
-                      background: theme.neutral.transparent10,
-                      "&:hover": {
-                        background: theme.neutral.transparent30
+                      "&::-webkit-scrollbar": {
+                        display: "none"
                       }
                     },
-                    p: 4,
-                    onClick: onAiOpen,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, { size: 18, color: "primary" })
+                    children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
                   }
                 )
               ] }),
-              loading ? /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
-              roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
+              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" }) }),
+              /* @__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.Stack, { gap: 5, children: footerContent })
+            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.jsxs(Flex, { align: "center", gap: "10px", children: [
+                    isBackButtonVisible ? /* @__PURE__ */ jsxRuntime.jsx(core.Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsxRuntime.jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Globe, { size: 18 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+                  ] }),
+                  isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Center,
+                    {
+                      sx: {
+                        cursor: "pointer",
+                        borderRadius: 8,
+                        transition: "background 0.15s",
+                        background: theme.neutral.transparent10,
+                        "&:hover": {
+                          background: theme.neutral.transparent30
+                        }
+                      },
+                      p: 4,
+                      onClick: onAiOpen,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, { size: 18, color: "primary" })
+                    }
+                  )
+                ] }),
+                loading ? /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: footerContent })
+            ] })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children }),
@@ -5707,13 +5786,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-BLdnv_e1.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CnChWDoH.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-4-WAoT04.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DmZxf_3K.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-T_N7l0dY.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-CJEzVPBB.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-BWrX_4fe.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-DO_9y-Xf.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-DYyekNVE.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-YrKDHLOm.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);
@@ -11026,4 +11105,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-CauA8pj8.cjs.map
+//# sourceMappingURL=components-BpMWfEEt.cjs.map