@ixo/ui 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/.vite/manifest.json +34 -34
  2. package/dist/{UsersSolid-CCU2B_Nz.js → UsersSolid-DNy80FwB.js} +22 -22
  3. package/dist/{UsersSolid-CCU2B_Nz.js.map → UsersSolid-DNy80FwB.js.map} +1 -1
  4. package/dist/components/AppShellNavigation/index.d.ts +9 -2
  5. package/dist/components/AppShellNavigation/index.d.ts.map +1 -1
  6. package/dist/components/MoreMenu/components/Item/index.d.ts +1 -1
  7. package/dist/components/MoreMenu/components/Item/index.d.ts.map +1 -1
  8. package/dist/components/MoreMenu/components/Item/types.d.ts +2 -0
  9. package/dist/components/MoreMenu/components/Item/types.d.ts.map +1 -1
  10. package/dist/components/MoreMenu/index.d.ts +1 -1
  11. package/dist/components/MoreMenu/index.d.ts.map +1 -1
  12. package/dist/{components-BXmsMIj2.cjs → components-DZWScQb-.cjs} +262 -138
  13. package/dist/{components-BXmsMIj2.cjs.map → components-DZWScQb-.cjs.map} +1 -1
  14. package/dist/{components-BpZDHiID.js → components-DzTVsvZR.js} +266 -142
  15. package/dist/{components-BpZDHiID.js.map → components-DzTVsvZR.js.map} +1 -1
  16. package/dist/export/components.cjs +1 -1
  17. package/dist/export/components.mjs +1 -1
  18. package/dist/export/icons/index.mjs +23 -23
  19. package/dist/{index-PWSVsc4o.cjs → index-BC_7C1s0.cjs} +3 -3
  20. package/dist/{index-PWSVsc4o.cjs.map → index-BC_7C1s0.cjs.map} +1 -1
  21. package/dist/{index-BT8oG8gb.cjs → index-BRK_Dgig.cjs} +2 -2
  22. package/dist/{index-BT8oG8gb.cjs.map → index-BRK_Dgig.cjs.map} +1 -1
  23. package/dist/{index-BjIDCEma.js → index-BVNTRXVA.js} +2 -2
  24. package/dist/{index-BjIDCEma.js.map → index-BVNTRXVA.js.map} +1 -1
  25. package/dist/{index-CzX54ash.cjs → index-BmWX35JS.cjs} +2 -2
  26. package/dist/{index-CzX54ash.cjs.map → index-BmWX35JS.cjs.map} +1 -1
  27. package/dist/{index-D9LgjgB7.cjs → index-CGhflycE.cjs} +2 -2
  28. package/dist/{index-D9LgjgB7.cjs.map → index-CGhflycE.cjs.map} +1 -1
  29. package/dist/{index-BgZ9Odny.js → index-CJGghPVZ.js} +3 -3
  30. package/dist/{index-BgZ9Odny.js.map → index-CJGghPVZ.js.map} +1 -1
  31. package/dist/{index-ClHcM2hN.cjs → index-CXEK4K6T.cjs} +2 -2
  32. package/dist/{index-ClHcM2hN.cjs.map → index-CXEK4K6T.cjs.map} +1 -1
  33. package/dist/{index-BPWOdUVc.cjs → index-Cug-jyVN.cjs} +3 -3
  34. package/dist/{index-BPWOdUVc.cjs.map → index-Cug-jyVN.cjs.map} +1 -1
  35. package/dist/{index-COR4dGTK.js → index-D53wpwI2.js} +2 -2
  36. package/dist/{index-COR4dGTK.js.map → index-D53wpwI2.js.map} +1 -1
  37. package/dist/{index-B99v2MeE.js → index-DIPzU6oa.js} +2 -2
  38. package/dist/{index-B99v2MeE.js.map → index-DIPzU6oa.js.map} +1 -1
  39. package/dist/{index-CShQJ1Tu.js → index-DKXweZ7H.js} +3 -3
  40. package/dist/{index-CShQJ1Tu.js.map → index-DKXweZ7H.js.map} +1 -1
  41. package/dist/{index-DjAL33eG.js → index-DWEzVsG1.js} +2 -2
  42. package/dist/{index-DjAL33eG.js.map → index-DWEzVsG1.js.map} +1 -1
  43. package/dist/{index-bDjw-Rwj.js → index-DYbt2pjm.js} +3 -3
  44. package/dist/{index-bDjw-Rwj.js.map → index-DYbt2pjm.js.map} +1 -1
  45. package/dist/{index-w6bUS_-b.js → index-G8i06g3O.js} +2 -2
  46. package/dist/{index-w6bUS_-b.js.map → index-G8i06g3O.js.map} +1 -1
  47. package/dist/{index-BVBsdahb.cjs → index-H6le64x9.cjs} +2 -2
  48. package/dist/{index-BVBsdahb.cjs.map → index-H6le64x9.cjs.map} +1 -1
  49. package/dist/{index-BW9S8i4L.cjs → index-JnZlYiYC.cjs} +2 -2
  50. package/dist/{index-BW9S8i4L.cjs.map → index-JnZlYiYC.cjs.map} +1 -1
  51. package/dist/{index-De8-ozZj.js → index-QdzH132w.js} +2 -2
  52. package/dist/{index-De8-ozZj.js.map → index-QdzH132w.js.map} +1 -1
  53. package/dist/{index-DCp6OZLU.js → index-p092jpgE.js} +2 -2
  54. package/dist/{index-DCp6OZLU.js.map → index-p092jpgE.js.map} +1 -1
  55. package/dist/{index-RzNv9QED.cjs → index-ssANWiHO.cjs} +2 -2
  56. package/dist/{index-RzNv9QED.cjs.map → index-ssANWiHO.cjs.map} +1 -1
  57. package/dist/{index-DeJvbb_S.cjs → index-tddGE9xT.cjs} +2 -2
  58. package/dist/{index-DeJvbb_S.cjs.map → index-tddGE9xT.cjs.map} +1 -1
  59. package/package.json +1 -1
@@ -1,19 +1,19 @@
1
1
  import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
2
2
  import { isString, toggle, get, isFunction, assign } from "radash";
3
3
  import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
4
- 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";
4
+ 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, i as AngleLeftSolid, D as Dashboard, j as Groups, k as UserCircleSolid, l as Assets$1, m as Claims, n as Accounts, H as HistorySolid, o as LinkedResources, p as Proposals, I as ImpactCredits, q as GoTo, r as Share, s as PiePiece, t as ImpactCertificates, u as CommentDotsSolid, v as CommentAltSolid, M 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 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-DNy80FwB.js";
5
5
  import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useId, useMemo, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
6
6
  import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
7
- 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";
7
+ import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, AppShell, Stack as Stack$1, Center, Divider, Paper, Badge as Badge$1 } from "@mantine/core";
8
8
  import { cx, css } from "@emotion/css";
9
9
  import { createPortal } from "react-dom";
10
10
  import DOMPurify from "dompurify";
11
- import { Popover } from "react-tiny-popover";
12
- import { useDisclosure, useHover } from "@mantine/hooks";
13
11
  import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
12
+ import { useDisclosure, useHover } from "@mantine/hooks";
14
13
  import Markdown from "react-markdown";
15
14
  import remarkGfm from "remark-gfm";
16
15
  import { useCombobox, useSelect } from "downshift";
16
+ import { Popover as Popover$1 } from "react-tiny-popover";
17
17
  import dayjs from "dayjs";
18
18
  import { B as Blank } from "./Blank-CElsicB7.js";
19
19
  import { E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-16wxaghO.js";
@@ -774,8 +774,8 @@ function AccordionTable({
774
774
  }
775
775
  );
776
776
  }
777
- const Header$3 = lazy(() => import("./index-bDjw-Rwj.js"));
778
- const Footer = lazy(() => import("./index-CShQJ1Tu.js"));
777
+ const Header$3 = lazy(() => import("./index-DYbt2pjm.js"));
778
+ const Footer = lazy(() => import("./index-DKXweZ7H.js"));
779
779
  function ActionCard({ header, content, footer, useHoverMode = false }) {
780
780
  const hasContent = !!content || !!footer;
781
781
  const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
859
859
  }
860
860
  const CARD_WIDTH$1 = 350;
861
861
  const CARD_HEADER_HEIGHT = 158;
862
- const Header$2 = lazy(() => import("./index-B99v2MeE.js"));
862
+ const Header$2 = lazy(() => import("./index-DIPzU6oa.js"));
863
863
  function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
864
864
  const wrapperRef = useRef(null);
865
865
  const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
1294
1294
  document.body
1295
1295
  );
1296
1296
  }
1297
- const Badge = lazy(() => import("./index-BjIDCEma.js"));
1297
+ const Badge = lazy(() => import("./index-BVNTRXVA.js"));
1298
1298
  function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
1299
1299
  const shadowScrollRef = useRef(null);
1300
1300
  const wrapperContentAreaRef = useRef(null);
@@ -1873,90 +1873,154 @@ function HtmlRender({ content, className }) {
1873
1873
  const safeHTML = DOMPurify.sanitize(content, { FORBID_ATTR: ["style"] });
1874
1874
  return /* @__PURE__ */ jsx(StyleDOMApplier, { children: /* @__PURE__ */ jsx("div", { className, dangerouslySetInnerHTML: { __html: safeHTML } }) });
1875
1875
  }
1876
- function Item({ label, disabled, active, onClick }) {
1877
- return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
1876
+ const Flex = forwardRef(
1877
+ ({
1878
+ direction = "row",
1879
+ align = "stretch",
1880
+ justify = "flex-start",
1881
+ gap = 0,
1882
+ m = 0,
1883
+ mt = 0,
1884
+ mb = 0,
1885
+ ml = 0,
1886
+ mr = 0,
1887
+ mx = 0,
1888
+ my = 0,
1889
+ p = 0,
1890
+ pt = 0,
1891
+ pb = 0,
1892
+ pl = 0,
1893
+ pr = 0,
1894
+ px = 0,
1895
+ py = 0,
1896
+ bg,
1897
+ radius = 0,
1898
+ children,
1899
+ ...props
1900
+ }, ref) => {
1901
+ return /* @__PURE__ */ jsx(
1902
+ "div",
1903
+ {
1904
+ ref,
1905
+ ...props,
1906
+ style: {
1907
+ display: "flex",
1908
+ flexDirection: direction,
1909
+ alignItems: align,
1910
+ justifyContent: justify,
1911
+ gap,
1912
+ margin: m,
1913
+ marginTop: mt || my,
1914
+ marginBottom: mb || my,
1915
+ marginLeft: ml || mx,
1916
+ marginRight: mr || mx,
1917
+ padding: p,
1918
+ paddingTop: pt || py,
1919
+ paddingBottom: pb || py,
1920
+ paddingLeft: pl || px,
1921
+ paddingRight: pr || px,
1922
+ backgroundColor: bg,
1923
+ borderRadius: radius,
1924
+ ...props.style
1925
+ },
1926
+ children
1927
+ }
1928
+ );
1929
+ }
1930
+ );
1931
+ Flex.displayName = "Flex";
1932
+ function Item({ icon, label, disabled, active, onClick }) {
1933
+ const IconComponent = icon;
1934
+ return /* @__PURE__ */ jsx(
1878
1935
  "button",
1879
1936
  {
1880
- css: ({ spacing, bg }) => ({
1937
+ css: ({ bg, colors }) => ({
1881
1938
  width: "100%",
1882
- background: active ? bg.actionPanel : "none",
1939
+ borderRadius: 4,
1940
+ padding: "4px 12px",
1941
+ background: bg.navIconsBg,
1883
1942
  border: "none",
1884
- padding: spacing,
1885
1943
  cursor: disabled ? "not-allowed" : "pointer",
1886
1944
  textAlign: "left",
1887
1945
  "&:hover": {
1888
- backgroundColor: disabled ? void 0 : bg.cardHighlight
1946
+ backgroundColor: disabled ? void 0 : colors.whiteTransparent10
1889
1947
  }
1890
1948
  }),
1891
1949
  disabled,
1892
1950
  onClick,
1893
- children: /* @__PURE__ */ jsx(
1894
- Typography.Text,
1895
- {
1896
- css: ({ fontSize, text, colors }) => ({
1897
- fontSize: fontSize.s,
1898
- color: disabled ? text.secondary : active ? colors.focus : text.main
1899
- }),
1900
- children: label
1901
- }
1902
- )
1951
+ children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
1952
+ IconComponent && /* @__PURE__ */ jsx(IconComponent, { size: 16 }),
1953
+ /* @__PURE__ */ jsx(
1954
+ Typography.Text,
1955
+ {
1956
+ css: ({ fontSize, text, colors }) => ({
1957
+ fontSize: fontSize.xs,
1958
+ color: disabled ? text.secondary : active ? colors.focus : text.overPicture
1959
+ }),
1960
+ children: label
1961
+ }
1962
+ )
1963
+ ] })
1903
1964
  }
1904
- ) });
1965
+ );
1905
1966
  }
1906
- function MoreMenu({ items, controlColor = "primary", positions = ["bottom", "right", "left", "top"] }) {
1907
- const { value: isVisible, toggle: toggleMenu, off: hideMenu } = useToggle(false);
1908
- return /* @__PURE__ */ jsx(
1967
+ function MoreMenu({ items, controlColor = "primary" }) {
1968
+ const theme = useUITheme();
1969
+ const [opened, setOpened] = useState(false);
1970
+ return /* @__PURE__ */ jsxs(
1909
1971
  Popover,
1910
1972
  {
1911
- isOpen: isVisible,
1912
- positions,
1913
- align: "start",
1914
- onClickOutside: hideMenu,
1915
- content: /* @__PURE__ */ jsx(
1916
- "ul",
1917
- {
1918
- css: ({ bg, neutral }) => ({
1919
- padding: 0,
1920
- margin: 0,
1921
- listStyle: "none",
1922
- whiteSpace: "nowrap",
1923
- borderWidth: 1,
1924
- borderStyle: "solid",
1925
- borderColor: bg.actionPanel,
1926
- backgroundColor: neutral.whiteFull
1927
- }),
1928
- children: items.map((item) => /* @__PURE__ */ jsx(
1973
+ opened,
1974
+ onChange: setOpened,
1975
+ closeOnClickOutside: true,
1976
+ styles: {
1977
+ dropdown: {
1978
+ background: theme.bg.navIconsBg,
1979
+ border: "none",
1980
+ padding: "12px 4px",
1981
+ marginLeft: 10
1982
+ }
1983
+ },
1984
+ trapFocus: true,
1985
+ width: 200,
1986
+ position: "right-start",
1987
+ shadow: "md",
1988
+ children: [
1989
+ /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
1990
+ "button",
1991
+ {
1992
+ css: {
1993
+ background: "none",
1994
+ border: "none",
1995
+ padding: 0,
1996
+ cursor: "pointer",
1997
+ position: "relative",
1998
+ display: "flex",
1999
+ alignItems: "center",
2000
+ justifyContent: "center"
2001
+ },
2002
+ onClick: () => setOpened((o) => !o),
2003
+ children: /* @__PURE__ */ jsx(EllipsisVSolid, { size: 20, color: controlColor })
2004
+ }
2005
+ ) }),
2006
+ /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
2007
+ /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 12, c: theme.text.secondary, children: "Page" }),
2008
+ items.map((item) => /* @__PURE__ */ jsx(
1929
2009
  Item,
1930
2010
  {
2011
+ icon: item.icon,
1931
2012
  label: item.label,
1932
2013
  disabled: item.disabled,
1933
2014
  active: item.active,
1934
2015
  onClick: () => {
1935
2016
  item.onClick();
1936
- hideMenu();
2017
+ setOpened(false);
1937
2018
  }
1938
2019
  },
1939
2020
  item.label
1940
2021
  ))
1941
- }
1942
- ),
1943
- children: /* @__PURE__ */ jsx(
1944
- "button",
1945
- {
1946
- css: {
1947
- background: "none",
1948
- border: "none",
1949
- padding: 0,
1950
- cursor: "pointer",
1951
- position: "relative",
1952
- display: "flex",
1953
- alignItems: "center",
1954
- justifyContent: "center"
1955
- },
1956
- onClick: toggleMenu,
1957
- children: /* @__PURE__ */ jsx(EllipsisVSolid, { color: controlColor })
1958
- }
1959
- )
2022
+ ] })
2023
+ ]
1960
2024
  }
1961
2025
  );
1962
2026
  }
@@ -2072,62 +2136,6 @@ function Avatar({ src, rounded = true, size = 62, did }) {
2072
2136
  }
2073
2137
  return /* @__PURE__ */ jsx(User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
2074
2138
  }
2075
- const Flex = forwardRef(
2076
- ({
2077
- direction = "row",
2078
- align = "stretch",
2079
- justify = "flex-start",
2080
- gap = 0,
2081
- m = 0,
2082
- mt = 0,
2083
- mb = 0,
2084
- ml = 0,
2085
- mr = 0,
2086
- mx = 0,
2087
- my = 0,
2088
- p = 0,
2089
- pt = 0,
2090
- pb = 0,
2091
- pl = 0,
2092
- pr = 0,
2093
- px = 0,
2094
- py = 0,
2095
- bg,
2096
- radius = 0,
2097
- children,
2098
- ...props
2099
- }, ref) => {
2100
- return /* @__PURE__ */ jsx(
2101
- "div",
2102
- {
2103
- ref,
2104
- ...props,
2105
- style: {
2106
- display: "flex",
2107
- flexDirection: direction,
2108
- alignItems: align,
2109
- justifyContent: justify,
2110
- gap,
2111
- margin: m,
2112
- marginTop: mt || my,
2113
- marginBottom: mb || my,
2114
- marginLeft: ml || mx,
2115
- marginRight: mr || mx,
2116
- padding: p,
2117
- paddingTop: pt || py,
2118
- paddingBottom: pb || py,
2119
- paddingLeft: pl || px,
2120
- paddingRight: pr || px,
2121
- backgroundColor: bg,
2122
- borderRadius: radius,
2123
- ...props.style
2124
- },
2125
- children
2126
- }
2127
- );
2128
- }
2129
- );
2130
- Flex.displayName = "Flex";
2131
2139
  function SpaceItem({ icon, id, onClick }) {
2132
2140
  const { hovered, ref } = useHover();
2133
2141
  const theme = useUITheme();
@@ -2150,7 +2158,82 @@ function SpaceItem({ icon, id, onClick }) {
2150
2158
  }
2151
2159
  );
2152
2160
  }
2153
- function MenuItem({ item, onMenuItemClick }) {
2161
+ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
2162
+ const { hovered, ref } = useHover();
2163
+ const theme = useUITheme();
2164
+ const { value: isExpanded, toggle: toggle2 } = useToggle(false);
2165
+ const hasChildren = item.children && item.children.length > 0;
2166
+ const handleItemClick = () => {
2167
+ onMenuItemClick(item);
2168
+ };
2169
+ const handleToggleClick = (e) => {
2170
+ e.stopPropagation();
2171
+ toggle2();
2172
+ };
2173
+ return /* @__PURE__ */ jsxs(Stack$1, { gap: 1, children: [
2174
+ /* @__PURE__ */ jsxs(
2175
+ Flex,
2176
+ {
2177
+ ref,
2178
+ align: "center",
2179
+ gap: 8,
2180
+ justify: "space-between",
2181
+ pl: 12 + depth * 16,
2182
+ pr: 12,
2183
+ py: 6,
2184
+ style: {
2185
+ cursor: "pointer",
2186
+ borderRadius: 8,
2187
+ backgroundColor: item.isActive ? theme.bg.navIconsBg : hovered ? theme.bg.navIconsBg : "transparent",
2188
+ transform: hovered ? "translateX(4px)" : "translateX(0px)",
2189
+ transition: "all 0.2s ease"
2190
+ },
2191
+ onClick: handleItemClick,
2192
+ children: [
2193
+ /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
2194
+ /* @__PURE__ */ jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
2195
+ /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name })
2196
+ ] }),
2197
+ /* @__PURE__ */ jsxs(Flex, { children: [
2198
+ hasChildren && /* @__PURE__ */ jsx(
2199
+ Center,
2200
+ {
2201
+ onClick: handleToggleClick,
2202
+ p: 4,
2203
+ sx: {
2204
+ cursor: "pointer",
2205
+ borderRadius: 4,
2206
+ transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
2207
+ transition: "transform 0.2s ease",
2208
+ "&:hover": {
2209
+ backgroundColor: theme.neutral.transparent10
2210
+ }
2211
+ },
2212
+ children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
2213
+ }
2214
+ ),
2215
+ item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsx(
2216
+ Center,
2217
+ {
2218
+ sx: {
2219
+ cursor: "pointer",
2220
+ borderRadius: 4,
2221
+ transition: "transform 0.2s ease",
2222
+ "&:hover": {
2223
+ backgroundColor: theme.neutral.transparent10
2224
+ }
2225
+ },
2226
+ children: /* @__PURE__ */ jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
2227
+ }
2228
+ )
2229
+ ] })
2230
+ ]
2231
+ }
2232
+ ),
2233
+ hasChildren && isExpanded && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: item.children?.map((childItem) => /* @__PURE__ */ jsx(MenuItem, { item: childItem, onMenuItemClick, depth: depth + 1 }, childItem.id)) })
2234
+ ] });
2235
+ }
2236
+ function RoomItem({ room }) {
2154
2237
  const { hovered, ref } = useHover();
2155
2238
  const theme = useUITheme();
2156
2239
  return /* @__PURE__ */ jsxs(
@@ -2160,22 +2243,61 @@ function MenuItem({ item, onMenuItemClick }) {
2160
2243
  align: "center",
2161
2244
  gap: 8,
2162
2245
  px: 12,
2163
- py: 6,
2246
+ py: 4,
2247
+ ml: 16,
2164
2248
  style: {
2165
2249
  cursor: "pointer",
2166
- borderRadius: 8,
2167
- backgroundColor: item.isActive ? theme.bg.navIconsBg : hovered ? theme.bg.navIconsBg : "transparent",
2168
- transform: hovered ? "translateX(4px)" : "translateX(0px)",
2169
- transition: "all 0.2s ease"
2250
+ borderRadius: 6,
2251
+ backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
2252
+ transform: hovered ? "translateX(2px)" : "translateX(0px)",
2253
+ transition: "all 0.15s ease"
2170
2254
  },
2171
- onClick: () => onMenuItemClick(item),
2255
+ onClick: () => room.onClick(room.id),
2172
2256
  children: [
2173
- /* @__PURE__ */ jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
2174
- /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, children: item.name })
2257
+ /* @__PURE__ */ jsx(room.icon, { size: 16, color: "secondary" }),
2258
+ /* @__PURE__ */ jsx(Text$1, { fz: 13, c: theme.text.secondary, children: room.name })
2175
2259
  ]
2176
2260
  }
2177
2261
  );
2178
2262
  }
2263
+ function RoomCategory({ category }) {
2264
+ const { hovered, ref } = useHover();
2265
+ const theme = useUITheme();
2266
+ const { value, toggle: toggle2 } = useToggle(false);
2267
+ return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
2268
+ /* @__PURE__ */ jsxs(
2269
+ Flex,
2270
+ {
2271
+ ref,
2272
+ align: "center",
2273
+ justify: "space-between",
2274
+ px: 12,
2275
+ py: 4,
2276
+ style: {
2277
+ cursor: "pointer",
2278
+ borderRadius: 6,
2279
+ backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
2280
+ transition: "all 0.15s ease"
2281
+ },
2282
+ onClick: toggle2,
2283
+ children: [
2284
+ /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
2285
+ /* @__PURE__ */ jsx(
2286
+ Center,
2287
+ {
2288
+ sx: {
2289
+ transform: value ? "rotate(-90deg)" : "rotate(0deg)",
2290
+ transition: "transform 0.2s ease"
2291
+ },
2292
+ children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
2293
+ }
2294
+ )
2295
+ ]
2296
+ }
2297
+ ),
2298
+ !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
2299
+ ] });
2300
+ }
2179
2301
  function AppShellNavigation({
2180
2302
  spaces,
2181
2303
  pageItem,
@@ -2189,6 +2311,7 @@ function AppShellNavigation({
2189
2311
  onBackClick,
2190
2312
  isBackButtonVisible,
2191
2313
  footerMenuItems,
2314
+ roomCategories,
2192
2315
  children
2193
2316
  }) {
2194
2317
  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -2212,7 +2335,7 @@ function AppShellNavigation({
2212
2335
  /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
2213
2336
  /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, gap: 8, children: [
2214
2337
  /* @__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 }),
2215
- /* @__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 }),
2338
+ avatarIcon && /* @__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 }),
2216
2339
  /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
2217
2340
  /* @__PURE__ */ jsx(
2218
2341
  Stack$1,
@@ -2254,7 +2377,8 @@ function AppShellNavigation({
2254
2377
  ] }),
2255
2378
  /* @__PURE__ */ jsx(Flex, { gap: 12, align: "center", children: /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(PanelLeftSolid, { size: 22, color: "secondary" }) }) })
2256
2379
  ] }),
2257
- menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id))
2380
+ menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
2381
+ roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
2258
2382
  ] }),
2259
2383
  /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerMenuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)) })
2260
2384
  ] })
@@ -3395,7 +3519,7 @@ function DomainToolbar({ items, active, onClick }) {
3395
3519
  backgroundColor: colors.focusTransparent10,
3396
3520
  borderRadius: WRAPPER_SIZE$2 / 2
3397
3521
  }),
3398
- children: /* @__PURE__ */ jsx(Popover, { isOpen: visibleTooltip === item.id, padding: 21, reposition: false, containerStyle: { zIndex: "3" }, content: /* @__PURE__ */ jsx(Tooltip$3, { tooltip: item.tooltip }), children: /* @__PURE__ */ jsx(
3522
+ children: /* @__PURE__ */ jsx(Popover$1, { isOpen: visibleTooltip === item.id, padding: 21, reposition: false, containerStyle: { zIndex: "3" }, content: /* @__PURE__ */ jsx(Tooltip$3, { tooltip: item.tooltip }), children: /* @__PURE__ */ jsx(
3399
3523
  "button",
3400
3524
  {
3401
3525
  type: "button",
@@ -3813,7 +3937,7 @@ function DomainToolbarTypes({ domainType, active, onClick, ConnectActive }) {
3813
3937
  borderRadius: WRAPPER_SIZE$1 / 2
3814
3938
  }),
3815
3939
  children: /* @__PURE__ */ jsx(
3816
- Popover,
3940
+ Popover$1,
3817
3941
  {
3818
3942
  isOpen: visibleTooltip === item.id && !isInChatMode,
3819
3943
  padding: 21,
@@ -5191,13 +5315,13 @@ function ActionButton({ onClick, left, right }) {
5191
5315
  }
5192
5316
  );
5193
5317
  }
5194
- const MainAction = lazy(() => import("./index-DjAL33eG.js"));
5195
- const Header$1 = lazy(() => import("./index-w6bUS_-b.js"));
5196
- const Content = lazy(() => import("./index-COR4dGTK.js"));
5318
+ const MainAction = lazy(() => import("./index-DWEzVsG1.js"));
5319
+ const Header$1 = lazy(() => import("./index-G8i06g3O.js"));
5320
+ const Content = lazy(() => import("./index-D53wpwI2.js"));
5197
5321
  const Map = lazy(() => import("./index-D5Ufmf-s.js"));
5198
5322
  const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
5199
- const Assets = lazy(() => import("./index-DCp6OZLU.js"));
5200
- const Actions = lazy(() => import("./index-BgZ9Odny.js"));
5323
+ const Assets = lazy(() => import("./index-p092jpgE.js"));
5324
+ const Actions = lazy(() => import("./index-CJGghPVZ.js"));
5201
5325
  const HOVER_BORDER_WIDTH = 1;
5202
5326
  function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
5203
5327
  const wrapperRef = useRef(null);
@@ -5452,7 +5576,7 @@ function Tooltip$1({ children, content, className, classNameWrapper, positions }
5452
5576
  return children;
5453
5577
  }
5454
5578
  return /* @__PURE__ */ jsx(
5455
- Popover,
5579
+ Popover$1,
5456
5580
  {
5457
5581
  isOpen,
5458
5582
  reposition: true,
@@ -10511,4 +10635,4 @@ export {
10511
10635
  CardSelector as y,
10512
10636
  CardOutput as z
10513
10637
  };
10514
- //# sourceMappingURL=components-BpZDHiID.js.map
10638
+ //# sourceMappingURL=components-DzTVsvZR.js.map