@lokalise/harmony 1.40.2 → 1.40.3-exp-epic2x.2

package/dist/harmony4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony4.mjs","sources":["../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport styles from './Sidebar.module.css'\nimport { Avatar } from './Widgets/Avatar/Avatar'\nimport { IconLink } from './Widgets/IconLink/IconLink'\nimport { Menu } from './Widgets/Menu/Menu'\nimport { ProfileMenu } from './Widgets/ProfileMenu/ProfileMenu'\nimport { ProfileSettingsMenuItem } from './Widgets/ProfileMenu/ProfileSettingsMenuItem/ProfileSettingsMenuItem'\nimport { TeamMenuItem } from './Widgets/ProfileMenu/TeamMenuItem/TeamMenuItem'\nimport { TeamSwitch } from './Widgets/ProfileMenu/TeamSwitch/TeamSwitch'\nimport { UpgradeMenuItem } from './Widgets/ProfileMenu/UpgradeMenuItem/UpgradeMenuItem'\nimport { Tasks } from './Widgets/Tasks'\n\ntype SidebarProps = HTMLProps<HTMLElement> & {\n\tchildren: ReactNode\n}\n\n/**\n * Sidebar is a self-contained component using widgets\n */\nconst Sidebar = ({ children, ...navProps }: SidebarProps) => (\n\t<nav {...navProps} className={styles.sidebarContainer}>\n\t\t{children}\n\t</nav>\n)\n\n/**\n * Use to wrap elements to the top section of the Sidebar\n */\nconst Top = ({ children }: PropsWithChildren) => <div>{children}</div>\nSidebar.Top = Top\n\n/**\n * Use to wrap elements to the bottom section of the Sidebar\n */\nconst Bottom = ({ children }: PropsWithChildren) => <div>{children}</div>\nSidebar.Bottom = Bottom\n\nSidebar.Avatar = Avatar\nSidebar.IconLink = IconLink\nSidebar.Menu = Menu\nSidebar.ProfileMenu = ProfileMenu\nSidebar.TeamSwitch = TeamSwitch\nSidebar.TeamMenuItem = TeamMenuItem\nSidebar.UpgradeMenuItem = UpgradeMenuItem\nSidebar.ProfileSettingsMenuItem = ProfileSettingsMenuItem\nSidebar.Tasks = Tasks\n\nexport { Sidebar }\n"],"names":[],"mappings":";;;;;;;;;;;AAmBA,MAAM,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,MACvC,oBAAA,OAAA,EAAK,GAAG,UAAU,WAAW,OAAO,kBACnC,SACF,CAAA;AAMD,MAAM,MAAM,CAAC,EAAE,SAAkC,MAAA,oBAAC,SAAK,UAAS;AAChE,QAAQ,MAAM;AAKd,MAAM,SAAS,CAAC,EAAE,SAAkC,MAAA,oBAAC,SAAK,UAAS;AACnE,QAAQ,SAAS;AAEjB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO;AACf,QAAQ,cAAc;AACtB,QAAQ,aAAa;AACrB,QAAQ,eAAe;AACvB,QAAQ,kBAAkB;AAC1B,QAAQ,0BAA0B;AAClC,QAAQ,QAAQ;"}
+{"version":3,"file":"harmony4.mjs","sources":["../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import { SidebarProvider } from '@components/Sidebar/SidebarProvider'\nimport type { HTMLProps } from 'react'\nimport { SidebarContent, type SidebarContentProps } from './SidebarContent/SidebarContent'\nimport type { SidebarConfig } from './types'\n\ntype SidebarProps = HTMLProps<HTMLElement> & {\n\tconfig: SidebarConfig\n\tchildren?: SidebarContentProps['children']\n}\n\n/**\n * The main Sidebar component. Wraps children with SidebarProvider and renders SidebarContent.\n *\n * @example\n * ```\n * <Sidebar config={sidebarConfig}>\n *   <YourAppContent />\n * </Sidebar>\n * ```\n */\n\nexport const Sidebar = ({ config, children, ...navProps }: SidebarProps) => {\n\treturn (\n\t\t<SidebarProvider data={config.data} jwt={config.jwt}>\n\t\t\t<SidebarContent widgetsConfig={config.widgets} {...navProps}>\n\t\t\t\t{children}\n\t\t\t</SidebarContent>\n\t\t</SidebarProvider>\n\t)\n}\n"],"names":[],"mappings":";;;AAqBO,MAAM,UAAU,CAAC,EAAE,QAAQ,UAAU,GAAG,eAA6B;AAC3E,6BACE,iBAAgB,EAAA,MAAM,OAAO,MAAM,KAAK,OAAO,KAC/C,UAAC,oBAAA,gBAAA,EAAe,eAAe,OAAO,SAAU,GAAG,UACjD,SACF,CAAA,GACD;AAEF;"}

package/dist/harmony5.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
 const React = require("react");
-const Breadcrumbs_module = require("./harmony86.cjs");
+const Breadcrumbs_module = require("./harmony78.cjs");
 const Breadcrumbs = ({ items }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className: Breadcrumbs_module.default.breadcrumbs, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(louis.Link, { className: Breadcrumbs_module.default.breadcrumbsItem, href: item.link, rel: "noreferrer", children: item.name }),

package/dist/harmony5.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "@lokalise/louis";
 import { Fragment } from "react";
-import classes from "./harmony86.mjs";
+import classes from "./harmony78.mjs";
 const Breadcrumbs = ({ items }) => {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className: classes.breadcrumbs, children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Link, { className: classes.breadcrumbsItem, href: item.link, rel: "noreferrer", children: item.name }),

package/dist/harmony6.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
 const styles_module = require("./harmony74.cjs");
-const DropdownContent = require("./harmony87.cjs");
-const NavigationTabsItem = require("./harmony88.cjs");
-const helpers = require("./harmony89.cjs");
+const DropdownContent = require("./harmony79.cjs");
+const NavigationTabsItem = require("./harmony80.cjs");
+const helpers = require("./harmony81.cjs");
 const NavigationTabs = ({ navigation, activeItem }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Project", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles_module.default.navigationTabList, "aria-orientation": "horizontal", children: navigation.filter(helpers.isNavigationItemVisible).map((item) => {
   var _a, _b, _c;
   if (item.dropdown) {

package/dist/harmony6.mjs

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Menu, MenuList } from "@lokalise/louis";
 import classes from "./harmony74.mjs";
-import { DropdownContent } from "./harmony87.mjs";
-import { NavigationTabsItem } from "./harmony88.mjs";
-import { isNavigationItemVisible } from "./harmony89.mjs";
+import { DropdownContent } from "./harmony79.mjs";
+import { NavigationTabsItem } from "./harmony80.mjs";
+import { isNavigationItemVisible } from "./harmony81.mjs";
 const NavigationTabs = ({ navigation, activeItem }) => /* @__PURE__ */ jsx("nav", { "aria-label": "Project", children: /* @__PURE__ */ jsx("ul", { className: classes.navigationTabList, "aria-orientation": "horizontal", children: navigation.filter(isNavigationItemVisible).map((item) => {
   var _a, _b, _c;
   if (item.dropdown) {

package/dist/harmony7.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
 const reactTable = require("@tanstack/react-table");
-const TableHeaderCell = require("./harmony90.cjs");
+const TableHeaderCell = require("./harmony82.cjs");
 const Table = ({ headers, rows, tbodyRef }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(louis.Table, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(louis.TableHeader, { children: headers.map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(louis.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(

package/dist/harmony7.mjs

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Table as Table$1, TableHeader, TableRow, TableBody, TableCell } from "@lokalise/louis";
 import { flexRender } from "@tanstack/react-table";
-import { TableHeaderCell } from "./harmony90.mjs";
+import { TableHeaderCell } from "./harmony82.mjs";
 const Table = ({ headers, rows, tbodyRef }) => {
   return /* @__PURE__ */ jsxs(Table$1, { children: [
     /* @__PURE__ */ jsx(TableHeader, { children: headers.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(

package/dist/harmony75.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const React = require("react");
-const utils = require("./harmony115.cjs");
+const utils = require("./harmony102.cjs");
 function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1e3, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
   const skipResize = React.useRef(skipOnMount);
   const onResizeRef = utils.useCallbackRef(onResize);

package/dist/harmony75.mjs

@@ -1,5 +1,5 @@
 import { useRef, useState, useCallback, useEffect } from "react";
-import { useCallbackRef, useRefProxy, getDimensions, patchResizeCallback } from "./harmony115.mjs";
+import { useCallbackRef, useRefProxy, getDimensions, patchResizeCallback } from "./harmony102.mjs";
 function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1e3, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
   const skipResize = useRef(skipOnMount);
   const onResizeRef = useCallbackRef(onResize);

package/dist/harmony76.cjs

@@ -1,9 +1,42 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const sidebarContainer = "_sidebarContainer_bmdti_1";
-const styles = {
-  sidebarContainer
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const SidebarContext = require("./harmony92.cjs");
+const SidebarProvider = ({
+  data,
+  jwt,
+  children
+}) => {
+  const { userTeams, currentTeam } = data;
+  const otherTeams = React.useMemo(() => {
+    var _a;
+    if (((_a = currentTeam.result) == null ? void 0 : _a.id) && userTeams.result) {
+      const currentTeamId = currentTeam.result.id;
+      return {
+        result: userTeams.result.filter((userTeam) => userTeam.id !== currentTeamId),
+        loading: false,
+        error: false
+      };
+    }
+    return {
+      result: null,
+      loading: true,
+      error: false
+    };
+  }, [currentTeam, userTeams]);
+  const providerValue = React.useMemo(
+    () => ({
+      jwt,
+      data: {
+        userTeams,
+        currentTeam,
+        otherTeams
+      }
+    }),
+    [jwt, userTeams, currentTeam, otherTeams]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.SidebarContext.Provider, { value: providerValue, children });
 };
-exports.default = styles;
-exports.sidebarContainer = sidebarContainer;
+exports.SidebarProvider = SidebarProvider;
 //# sourceMappingURL=harmony76.cjs.map

package/dist/harmony76.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony76.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"harmony76.cjs","sources":["../src/components/Sidebar/SidebarProvider.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from 'react'\nimport { SidebarContext } from './SidebarContext'\nimport type {\n\tSidebarContextProps,\n\tSidebarDataItem,\n\tSidebarProviderProps,\n\tSidebarTeam,\n} from './types'\n\nexport const SidebarProvider = ({\n\tdata,\n\tjwt,\n\tchildren,\n}: PropsWithChildren<SidebarProviderProps>) => {\n\tconst { userTeams, currentTeam } = data\n\n\tconst otherTeams: SidebarDataItem<SidebarTeam[]> = useMemo(() => {\n\t\tif (currentTeam.result?.id && userTeams.result) {\n\t\t\tconst currentTeamId = currentTeam.result.id\n\t\t\treturn {\n\t\t\t\tresult: userTeams.result.filter((userTeam) => userTeam.id !== currentTeamId),\n\t\t\t\tloading: false,\n\t\t\t\terror: false,\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tresult: null,\n\t\t\tloading: true,\n\t\t\terror: false,\n\t\t}\n\t}, [currentTeam, userTeams])\n\n\tconst providerValue = useMemo<SidebarContextProps>(\n\t\t() => ({\n\t\t\tjwt,\n\t\t\tdata: {\n\t\t\t\tuserTeams,\n\t\t\t\tcurrentTeam,\n\t\t\t\totherTeams,\n\t\t\t},\n\t\t}),\n\t\t[jwt, userTeams, currentTeam, otherTeams],\n\t)\n\n\treturn <SidebarContext.Provider value={providerValue}>{children}</SidebarContext.Provider>\n}\n"],"names":["useMemo","SidebarContext"],"mappings":";;;;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACD,MAA+C;AACxC,QAAA,EAAE,WAAW,YAAA,IAAgB;AAE7B,QAAA,aAA6CA,MAAAA,QAAQ,MAAM;;AAChE,UAAI,iBAAY,WAAZ,mBAAoB,OAAM,UAAU,QAAQ;AACzC,YAAA,gBAAgB,YAAY,OAAO;AAClC,aAAA;AAAA,QACN,QAAQ,UAAU,OAAO,OAAO,CAAC,aAAa,SAAS,OAAO,aAAa;AAAA,QAC3E,SAAS;AAAA,QACT,OAAO;AAAA,MACR;AAAA,IAAA;AAGM,WAAA;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,IACR;AAAA,EAAA,GACE,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,gBAAgBA,MAAA;AAAA,IACrB,OAAO;AAAA,MACN;AAAA,MACA,MAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACD;AAAA,IAED,CAAC,KAAK,WAAW,aAAa,UAAU;AAAA,EACzC;AAEA,wCAAQC,eAAAA,eAAe,UAAf,EAAwB,OAAO,eAAgB,UAAS;AACjE;;"}

package/dist/harmony76.mjs

@@ -1,9 +1,42 @@
-const sidebarContainer = "_sidebarContainer_bmdti_1";
-const styles = {
-  sidebarContainer
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { SidebarContext } from "./harmony92.mjs";
+const SidebarProvider = ({
+  data,
+  jwt,
+  children
+}) => {
+  const { userTeams, currentTeam } = data;
+  const otherTeams = useMemo(() => {
+    var _a;
+    if (((_a = currentTeam.result) == null ? void 0 : _a.id) && userTeams.result) {
+      const currentTeamId = currentTeam.result.id;
+      return {
+        result: userTeams.result.filter((userTeam) => userTeam.id !== currentTeamId),
+        loading: false,
+        error: false
+      };
+    }
+    return {
+      result: null,
+      loading: true,
+      error: false
+    };
+  }, [currentTeam, userTeams]);
+  const providerValue = useMemo(
+    () => ({
+      jwt,
+      data: {
+        userTeams,
+        currentTeam,
+        otherTeams
+      }
+    }),
+    [jwt, userTeams, currentTeam, otherTeams]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: providerValue, children });
 };
 export {
-  styles as default,
-  sidebarContainer
+  SidebarProvider
 };
 //# sourceMappingURL=harmony76.mjs.map

package/dist/harmony76.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony76.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"harmony76.mjs","sources":["../src/components/Sidebar/SidebarProvider.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from 'react'\nimport { SidebarContext } from './SidebarContext'\nimport type {\n\tSidebarContextProps,\n\tSidebarDataItem,\n\tSidebarProviderProps,\n\tSidebarTeam,\n} from './types'\n\nexport const SidebarProvider = ({\n\tdata,\n\tjwt,\n\tchildren,\n}: PropsWithChildren<SidebarProviderProps>) => {\n\tconst { userTeams, currentTeam } = data\n\n\tconst otherTeams: SidebarDataItem<SidebarTeam[]> = useMemo(() => {\n\t\tif (currentTeam.result?.id && userTeams.result) {\n\t\t\tconst currentTeamId = currentTeam.result.id\n\t\t\treturn {\n\t\t\t\tresult: userTeams.result.filter((userTeam) => userTeam.id !== currentTeamId),\n\t\t\t\tloading: false,\n\t\t\t\terror: false,\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tresult: null,\n\t\t\tloading: true,\n\t\t\terror: false,\n\t\t}\n\t}, [currentTeam, userTeams])\n\n\tconst providerValue = useMemo<SidebarContextProps>(\n\t\t() => ({\n\t\t\tjwt,\n\t\t\tdata: {\n\t\t\t\tuserTeams,\n\t\t\t\tcurrentTeam,\n\t\t\t\totherTeams,\n\t\t\t},\n\t\t}),\n\t\t[jwt, userTeams, currentTeam, otherTeams],\n\t)\n\n\treturn <SidebarContext.Provider value={providerValue}>{children}</SidebarContext.Provider>\n}\n"],"names":[],"mappings":";;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACD,MAA+C;AACxC,QAAA,EAAE,WAAW,YAAA,IAAgB;AAE7B,QAAA,aAA6C,QAAQ,MAAM;;AAChE,UAAI,iBAAY,WAAZ,mBAAoB,OAAM,UAAU,QAAQ;AACzC,YAAA,gBAAgB,YAAY,OAAO;AAClC,aAAA;AAAA,QACN,QAAQ,UAAU,OAAO,OAAO,CAAC,aAAa,SAAS,OAAO,aAAa;AAAA,QAC3E,SAAS;AAAA,QACT,OAAO;AAAA,MACR;AAAA,IAAA;AAGM,WAAA;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,IACR;AAAA,EAAA,GACE,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,gBAAgB;AAAA,IACrB,OAAO;AAAA,MACN;AAAA,MACA,MAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACD;AAAA,IAED,CAAC,KAAK,WAAW,aAAa,UAAU;AAAA,EACzC;AAEA,6BAAQ,eAAe,UAAf,EAAwB,OAAO,eAAgB,UAAS;AACjE;"}

package/dist/harmony77.cjs

@@ -1,12 +1,40 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Avatar_module = require("./harmony102.cjs");
-const Avatar = ({
-  src,
-  href = "/",
-  ariaLabel = "Lokalise App Home",
-  alt = "Lokalise Logo"
-}) => /* @__PURE__ */ jsxRuntime.jsx("a", { className: Avatar_module.default.logoLink, href, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt }) });
-exports.Avatar = Avatar;
+const IconLink = require("./harmony93.cjs");
+const ProfileMenu = require("./harmony94.cjs");
+const useSidebar = require("./harmony95.cjs");
+const louis = require("@lokalise/louis");
+const permissions = require("./harmony96.cjs");
+const Avatar = require("./harmony97.cjs");
+const HelpMenu = require("./harmony98.cjs");
+const SidebarContent_module = require("./harmony99.cjs");
+const SidebarContent = ({ widgetsConfig, children, ...navProps }) => {
+  const sidebarContextProps = useSidebar.useSidebar();
+  const { jwt } = sidebarContextProps;
+  const { avatar } = widgetsConfig;
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...navProps, className: SidebarContent_module.default.sidebarContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { ...avatar }),
+      jwt.loading ? /* @__PURE__ */ jsxRuntime.jsx(louis.Skeleton, { description: "Top Section Loader", animated: true, className: SidebarContent_module.default.sidebarSkeleton, children: Array.from({ length: 3 }).map(() => /* @__PURE__ */ jsxRuntime.jsx(
+        louis.Rectangle,
+        {
+          height: 40,
+          width: 40
+        },
+        `sidebar-top-widget-loader-${crypto.randomUUID()}`
+      )) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: jwt.result && !jwt.result.isEndOfTrialActive && !jwt.result.isTeamSuspended && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconLink.IconLink, { to: "/projects", label: "Projects", icon: louis.ProjectIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconLink.IconLink, { to: "/order", label: "Order", icon: louis.ShoppingBagIcon }),
+        permissions.canAccessReporting(jwt.result) && /* @__PURE__ */ jsxRuntime.jsx(IconLink.IconLink, { to: "/analytics", label: "Analytics", icon: louis.ChartLineIcon })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(HelpMenu.HelpMenu, { ...widgetsConfig.helpMenu })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      children && typeof children === "function" ? children(sidebarContextProps) : children,
+      /* @__PURE__ */ jsxRuntime.jsx(ProfileMenu.ProfileMenu, { config: widgetsConfig.profileMenu })
+    ] })
+  ] });
+};
+exports.SidebarContent = SidebarContent;
 //# sourceMappingURL=harmony77.cjs.map

package/dist/harmony77.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony77.cjs","sources":["../src/components/Sidebar/Widgets/Avatar/Avatar.tsx"],"sourcesContent":["import styles from './Avatar.module.css'\n\ntype AvatarProps = {\n\t/** URL of the avatar/logo image */\n\tsrc: string\n\t/** Link destination when avatar is clicked. Defaults to '/' */\n\thref?: string\n\t/** Accessibility label for the avatar link. Defaults to 'Home' */\n\tariaLabel?: string\n\t/** Alt text for the avatar image. Defaults to 'Lokalise' */\n\talt?: string\n}\n\n/**\n * Display company main avatar / logo in the top section of the Sidebar.\n * Used as the main branding element and home navigation link.\n */\nexport const Avatar = ({\n\tsrc,\n\thref = '/',\n\tariaLabel = 'Lokalise App Home',\n\talt = 'Lokalise Logo',\n}: AvatarProps) => (\n\t<a className={styles.logoLink} href={href} aria-label={ariaLabel}>\n\t\t<img src={src} alt={alt} />\n\t</a>\n)\n"],"names":["jsx","styles"],"mappings":";;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AACP,MACEA,2BAAAA,IAAA,KAAA,EAAE,WAAWC,cAAA,QAAO,UAAU,MAAY,cAAY,WACtD,UAACD,2BAAAA,IAAA,OAAA,EAAI,KAAU,IAAA,CAAU,EAC1B,CAAA;;"}
+{"version":3,"file":"harmony77.cjs","sources":["../src/components/Sidebar/SidebarContent/SidebarContent.tsx"],"sourcesContent":["import { IconLink } from '@components/Sidebar/Widgets/IconLink/IconLink'\nimport { ProfileMenu } from '@components/Sidebar/Widgets/ProfileMenu/ProfileMenu'\nimport { useSidebar } from '@components/Sidebar/hooks/useSidebar'\nimport type { SidebarWidgetsConfig } from '@components/Sidebar/types'\nimport type { SidebarContextProps } from '@components/Sidebar/types'\nimport { ChartLineIcon, ProjectIcon, Rectangle, ShoppingBagIcon, Skeleton } from '@lokalise/louis'\nimport { canAccessReporting } from '@utils/user/permissions'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { Avatar } from '../Widgets/Avatar/Avatar'\nimport { HelpMenu } from '../Widgets/HelpMenu/HelpMenu'\nimport styles from './SidebarContent.module.css'\n\nexport type SidebarContentProps = HTMLProps<HTMLElement> & {\n\twidgetsConfig: SidebarWidgetsConfig\n\tchildren?: ((props: SidebarContextProps) => ReactNode) | ReactNode\n}\n\nexport const SidebarContent = ({ widgetsConfig, children, ...navProps }: SidebarContentProps) => {\n\tconst sidebarContextProps = useSidebar()\n\n\tconst { jwt } = sidebarContextProps\n\n\tconst { avatar } = widgetsConfig\n\n\treturn (\n\t\t<nav {...navProps} className={styles.sidebarContainer}>\n\t\t\t<div>\n\t\t\t\t<Avatar {...avatar} />\n\n\t\t\t\t{jwt.loading ? (\n\t\t\t\t\t<Skeleton description={'Top Section Loader'} animated className={styles.sidebarSkeleton}>\n\t\t\t\t\t\t{Array.from({ length: 3 }).map(() => (\n\t\t\t\t\t\t\t<Rectangle\n\t\t\t\t\t\t\t\tkey={`sidebar-top-widget-loader-${crypto.randomUUID()}`}\n\t\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Skeleton>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{jwt.result && !jwt.result.isEndOfTrialActive && !jwt.result.isTeamSuspended && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/** TODO - All URLs should be pointing to Expert here. We need resolve URL function to deal with this */}\n\t\t\t\t\t\t\t\t<IconLink to=\"/projects\" label={'Projects'} icon={ProjectIcon} />\n\t\t\t\t\t\t\t\t<IconLink to=\"/order\" label=\"Order\" icon={ShoppingBagIcon} />\n\n\t\t\t\t\t\t\t\t{canAccessReporting(jwt.result) && (\n\t\t\t\t\t\t\t\t\t<IconLink to=\"/analytics\" label=\"Analytics\" icon={ChartLineIcon} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<HelpMenu {...widgetsConfig.helpMenu} />\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{children && typeof children === 'function' ? children(sidebarContextProps) : children}\n\t\t\t\t<ProfileMenu config={widgetsConfig.profileMenu} />\n\t\t\t</div>\n\t\t</nav>\n\t)\n}\n"],"names":["useSidebar","styles","jsxs","jsx","Avatar","Skeleton","Rectangle","Fragment","IconLink","ProjectIcon","ShoppingBagIcon","canAccessReporting","ChartLineIcon","HelpMenu","ProfileMenu"],"mappings":";;;;;;;;;;;AAiBO,MAAM,iBAAiB,CAAC,EAAE,eAAe,UAAU,GAAG,eAAoC;AAChG,QAAM,sBAAsBA,WAAAA,WAAW;AAEjC,QAAA,EAAE,QAAQ;AAEV,QAAA,EAAE,WAAW;AAEnB,yCACE,OAAK,EAAA,GAAG,UAAU,WAAWC,8BAAO,kBACpC,UAAA;AAAA,IAAAC,gCAAC,OACA,EAAA,UAAA;AAAA,MAACC,2BAAAA,IAAAC,OAAA,QAAA,EAAQ,GAAG,QAAQ;AAAA,MAEnB,IAAI,UACJD,2BAAAA,IAACE,kBAAS,aAAa,sBAAsB,UAAQ,MAAC,WAAWJ,8BAAO,iBACtE,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAG,CAAA,EAAE,IAAI,MAC9BE,2BAAA;AAAA,QAACG,MAAA;AAAA,QAAA;AAAA,UAEA,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,QAFF,6BAA6B,OAAO,YAAY;AAAA,MAAA,CAItD,EAAA,CACF,IAEAH,+BAAAI,WAAAA,UAAA,EACE,cAAI,UAAU,CAAC,IAAI,OAAO,sBAAsB,CAAC,IAAI,OAAO,mBAG3DL,gCAAAK,WAAAA,UAAA,EAAA,UAAA;AAAA,QAAAJ,+BAACK,SAAAA,YAAS,IAAG,aAAY,OAAO,YAAY,MAAMC,MAAAA,aAAa;AAAA,uCAC9DD,SAAAA,UAAS,EAAA,IAAG,UAAS,OAAM,SAAQ,MAAME,MAAAA,iBAAiB;AAAA,QAE1DC,YAAAA,mBAAmB,IAAI,MAAM,KAC7BR,2BAAA,IAACK,SAAS,UAAA,EAAA,IAAG,cAAa,OAAM,aAAY,MAAMI,MAAAA,cAAe,CAAA;AAAA,MAAA,EAAA,CAEnE,EAEF,CAAA;AAAA,MAEAT,2BAAAA,IAAAU,SAAA,UAAA,EAAU,GAAG,cAAc,SAAU,CAAA;AAAA,IAAA,GACvC;AAAA,oCACC,OACC,EAAA,UAAA;AAAA,MAAA,YAAY,OAAO,aAAa,aAAa,SAAS,mBAAmB,IAAI;AAAA,MAC7EV,2BAAAA,IAAAW,YAAAA,aAAA,EAAY,QAAQ,cAAc,YAAa,CAAA;AAAA,IAAA,EACjD,CAAA;AAAA,EAAA,GACD;AAEF;;"}

package/dist/harmony77.mjs

@@ -1,12 +1,40 @@
-import { jsx } from "react/jsx-runtime";
-import styles from "./harmony102.mjs";
-const Avatar = ({
-  src,
-  href = "/",
-  ariaLabel = "Lokalise App Home",
-  alt = "Lokalise Logo"
-}) => /* @__PURE__ */ jsx("a", { className: styles.logoLink, href, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("img", { src, alt }) });
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { IconLink } from "./harmony93.mjs";
+import { ProfileMenu } from "./harmony94.mjs";
+import { useSidebar } from "./harmony95.mjs";
+import { Skeleton, Rectangle, ProjectIcon, ShoppingBagIcon, ChartLineIcon } from "@lokalise/louis";
+import { canAccessReporting } from "./harmony96.mjs";
+import { Avatar } from "./harmony97.mjs";
+import { HelpMenu } from "./harmony98.mjs";
+import styles from "./harmony99.mjs";
+const SidebarContent = ({ widgetsConfig, children, ...navProps }) => {
+  const sidebarContextProps = useSidebar();
+  const { jwt } = sidebarContextProps;
+  const { avatar } = widgetsConfig;
+  return /* @__PURE__ */ jsxs("nav", { ...navProps, className: styles.sidebarContainer, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Avatar, { ...avatar }),
+      jwt.loading ? /* @__PURE__ */ jsx(Skeleton, { description: "Top Section Loader", animated: true, className: styles.sidebarSkeleton, children: Array.from({ length: 3 }).map(() => /* @__PURE__ */ jsx(
+        Rectangle,
+        {
+          height: 40,
+          width: 40
+        },
+        `sidebar-top-widget-loader-${crypto.randomUUID()}`
+      )) }) : /* @__PURE__ */ jsx(Fragment, { children: jwt.result && !jwt.result.isEndOfTrialActive && !jwt.result.isTeamSuspended && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(IconLink, { to: "/projects", label: "Projects", icon: ProjectIcon }),
+        /* @__PURE__ */ jsx(IconLink, { to: "/order", label: "Order", icon: ShoppingBagIcon }),
+        canAccessReporting(jwt.result) && /* @__PURE__ */ jsx(IconLink, { to: "/analytics", label: "Analytics", icon: ChartLineIcon })
+      ] }) }),
+      /* @__PURE__ */ jsx(HelpMenu, { ...widgetsConfig.helpMenu })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      children && typeof children === "function" ? children(sidebarContextProps) : children,
+      /* @__PURE__ */ jsx(ProfileMenu, { config: widgetsConfig.profileMenu })
+    ] })
+  ] });
+};
 export {
-  Avatar
+  SidebarContent
 };
 //# sourceMappingURL=harmony77.mjs.map

package/dist/harmony77.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony77.mjs","sources":["../src/components/Sidebar/Widgets/Avatar/Avatar.tsx"],"sourcesContent":["import styles from './Avatar.module.css'\n\ntype AvatarProps = {\n\t/** URL of the avatar/logo image */\n\tsrc: string\n\t/** Link destination when avatar is clicked. Defaults to '/' */\n\thref?: string\n\t/** Accessibility label for the avatar link. Defaults to 'Home' */\n\tariaLabel?: string\n\t/** Alt text for the avatar image. Defaults to 'Lokalise' */\n\talt?: string\n}\n\n/**\n * Display company main avatar / logo in the top section of the Sidebar.\n * Used as the main branding element and home navigation link.\n */\nexport const Avatar = ({\n\tsrc,\n\thref = '/',\n\tariaLabel = 'Lokalise App Home',\n\talt = 'Lokalise Logo',\n}: AvatarProps) => (\n\t<a className={styles.logoLink} href={href} aria-label={ariaLabel}>\n\t\t<img src={src} alt={alt} />\n\t</a>\n)\n"],"names":[],"mappings":";;AAiBO,MAAM,SAAS,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AACP,MACE,oBAAA,KAAA,EAAE,WAAW,OAAO,UAAU,MAAY,cAAY,WACtD,UAAC,oBAAA,OAAA,EAAI,KAAU,IAAA,CAAU,EAC1B,CAAA;"}
+{"version":3,"file":"harmony77.mjs","sources":["../src/components/Sidebar/SidebarContent/SidebarContent.tsx"],"sourcesContent":["import { IconLink } from '@components/Sidebar/Widgets/IconLink/IconLink'\nimport { ProfileMenu } from '@components/Sidebar/Widgets/ProfileMenu/ProfileMenu'\nimport { useSidebar } from '@components/Sidebar/hooks/useSidebar'\nimport type { SidebarWidgetsConfig } from '@components/Sidebar/types'\nimport type { SidebarContextProps } from '@components/Sidebar/types'\nimport { ChartLineIcon, ProjectIcon, Rectangle, ShoppingBagIcon, Skeleton } from '@lokalise/louis'\nimport { canAccessReporting } from '@utils/user/permissions'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { Avatar } from '../Widgets/Avatar/Avatar'\nimport { HelpMenu } from '../Widgets/HelpMenu/HelpMenu'\nimport styles from './SidebarContent.module.css'\n\nexport type SidebarContentProps = HTMLProps<HTMLElement> & {\n\twidgetsConfig: SidebarWidgetsConfig\n\tchildren?: ((props: SidebarContextProps) => ReactNode) | ReactNode\n}\n\nexport const SidebarContent = ({ widgetsConfig, children, ...navProps }: SidebarContentProps) => {\n\tconst sidebarContextProps = useSidebar()\n\n\tconst { jwt } = sidebarContextProps\n\n\tconst { avatar } = widgetsConfig\n\n\treturn (\n\t\t<nav {...navProps} className={styles.sidebarContainer}>\n\t\t\t<div>\n\t\t\t\t<Avatar {...avatar} />\n\n\t\t\t\t{jwt.loading ? (\n\t\t\t\t\t<Skeleton description={'Top Section Loader'} animated className={styles.sidebarSkeleton}>\n\t\t\t\t\t\t{Array.from({ length: 3 }).map(() => (\n\t\t\t\t\t\t\t<Rectangle\n\t\t\t\t\t\t\t\tkey={`sidebar-top-widget-loader-${crypto.randomUUID()}`}\n\t\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Skeleton>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{jwt.result && !jwt.result.isEndOfTrialActive && !jwt.result.isTeamSuspended && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/** TODO - All URLs should be pointing to Expert here. We need resolve URL function to deal with this */}\n\t\t\t\t\t\t\t\t<IconLink to=\"/projects\" label={'Projects'} icon={ProjectIcon} />\n\t\t\t\t\t\t\t\t<IconLink to=\"/order\" label=\"Order\" icon={ShoppingBagIcon} />\n\n\t\t\t\t\t\t\t\t{canAccessReporting(jwt.result) && (\n\t\t\t\t\t\t\t\t\t<IconLink to=\"/analytics\" label=\"Analytics\" icon={ChartLineIcon} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<HelpMenu {...widgetsConfig.helpMenu} />\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{children && typeof children === 'function' ? children(sidebarContextProps) : children}\n\t\t\t\t<ProfileMenu config={widgetsConfig.profileMenu} />\n\t\t\t</div>\n\t\t</nav>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBO,MAAM,iBAAiB,CAAC,EAAE,eAAe,UAAU,GAAG,eAAoC;AAChG,QAAM,sBAAsB,WAAW;AAEjC,QAAA,EAAE,QAAQ;AAEV,QAAA,EAAE,WAAW;AAEnB,8BACE,OAAK,EAAA,GAAG,UAAU,WAAW,OAAO,kBACpC,UAAA;AAAA,IAAA,qBAAC,OACA,EAAA,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAQ,GAAG,QAAQ;AAAA,MAEnB,IAAI,UACJ,oBAAC,YAAS,aAAa,sBAAsB,UAAQ,MAAC,WAAW,OAAO,iBACtE,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAG,CAAA,EAAE,IAAI,MAC9B;AAAA,QAAC;AAAA,QAAA;AAAA,UAEA,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,QAFF,6BAA6B,OAAO,YAAY;AAAA,MAAA,CAItD,EAAA,CACF,IAEA,oBAAA,UAAA,EACE,cAAI,UAAU,CAAC,IAAI,OAAO,sBAAsB,CAAC,IAAI,OAAO,mBAG3D,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA,oBAAC,YAAS,IAAG,aAAY,OAAO,YAAY,MAAM,aAAa;AAAA,4BAC9D,UAAS,EAAA,IAAG,UAAS,OAAM,SAAQ,MAAM,iBAAiB;AAAA,QAE1D,mBAAmB,IAAI,MAAM,KAC7B,oBAAC,UAAS,EAAA,IAAG,cAAa,OAAM,aAAY,MAAM,cAAe,CAAA;AAAA,MAAA,EAAA,CAEnE,EAEF,CAAA;AAAA,MAEA,oBAAA,UAAA,EAAU,GAAG,cAAc,SAAU,CAAA;AAAA,IAAA,GACvC;AAAA,yBACC,OACC,EAAA,UAAA;AAAA,MAAA,YAAY,OAAO,aAAa,aAAa,SAAS,mBAAmB,IAAI;AAAA,MAC7E,oBAAA,aAAA,EAAY,QAAQ,cAAc,YAAa,CAAA;AAAA,IAAA,EACjD,CAAA;AAAA,EAAA,GACD;AAEF;"}

package/dist/harmony78.cjs

@@ -1,21 +1,12 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const clsx = require("./harmony73.cjs");
-const IconLink_module = require("./harmony103.cjs");
-const IconLink = ({ label, to, icon: Icon }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { placement: "right", tooltip: label, children: /* @__PURE__ */ jsxRuntime.jsx(
-    louis.Link,
-    {
-      "aria-label": label,
-      className: clsx.clsx(IconLink_module.default.link, {
-        [IconLink_module.default.active]: typeof window !== "undefined" && window.location.pathname.startsWith(to)
-      }),
-      href: to,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "25px" })
-    }
-  ) });
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const breadcrumbsItem = "_breadcrumbsItem_1hm6a_1";
+const breadcrumbs = "_breadcrumbs_1hm6a_1";
+const classes = {
+  breadcrumbsItem,
+  breadcrumbs
 };
-exports.IconLink = IconLink;
+exports.breadcrumbs = breadcrumbs;
+exports.breadcrumbsItem = breadcrumbsItem;
+exports.default = classes;
 //# sourceMappingURL=harmony78.cjs.map

package/dist/harmony78.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony78.cjs","sources":["../src/components/Sidebar/Widgets/IconLink/IconLink.tsx"],"sourcesContent":["import { Link, type SvgIconProps, Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { FC } from 'react'\nimport styles from './IconLink.module.css'\n\ntype IconLinkProps = {\n\t/** URL destination for the link */\n\tto: string\n\t/** Text to display in the tooltip when hovering over the icon */\n\tlabel: string\n\t/** Icon component from @lokalise/louis to display */\n\ticon: FC<SvgIconProps>\n}\n\n/**\n * A navigation link component that displays an icon with a tooltip.\n * When hovered, shows a tooltip with the label text.\n * The link is highlighted when the current URL matches its destination.\n *\n * @example\n * ```tsx\n * <IconLink to=\"/projects\" label=\"Projects\" icon={FolderOpenIcon} />\n * ```\n */\nexport const IconLink = ({ label, to, icon: Icon }: IconLinkProps) => {\n\treturn (\n\t\t<Tooltip placement=\"right\" tooltip={label}>\n\t\t\t<Link\n\t\t\t\taria-label={label}\n\t\t\t\tclassName={clsx(styles.link, {\n\t\t\t\t\t[styles.active]: typeof window !== 'undefined' && window.location.pathname.startsWith(to),\n\t\t\t\t})}\n\t\t\t\thref={to}\n\t\t\t>\n\t\t\t\t<Icon size=\"25px\" />\n\t\t\t</Link>\n\t\t</Tooltip>\n\t)\n}\n"],"names":["jsx","Tooltip","Link","clsx","styles"],"mappings":";;;;;;AAwBO,MAAM,WAAW,CAAC,EAAE,OAAO,IAAI,MAAM,WAA0B;AACrE,SACEA,2BAAA,IAAAC,MAAA,SAAA,EAAQ,WAAU,SAAQ,SAAS,OACnC,UAAAD,2BAAA;AAAA,IAACE,MAAA;AAAA,IAAA;AAAA,MACA,cAAY;AAAA,MACZ,WAAWC,KAAAA,KAAKC,gBAAA,QAAO,MAAM;AAAA,QAC5B,CAACA,gBAAO,QAAA,MAAM,GAAG,OAAO,WAAW,eAAe,OAAO,SAAS,SAAS,WAAW,EAAE;AAAA,MAAA,CACxF;AAAA,MACD,MAAM;AAAA,MAEN,UAAAJ,2BAAAA,IAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,IAAA;AAAA,EAAA,GAEpB;AAEF;;"}
+{"version":3,"file":"harmony78.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/harmony78.mjs

@@ -1,21 +1,12 @@
-import { jsx } from "react/jsx-runtime";
-import { Tooltip, Link } from "@lokalise/louis";
-import { clsx } from "./harmony73.mjs";
-import styles from "./harmony103.mjs";
-const IconLink = ({ label, to, icon: Icon }) => {
-  return /* @__PURE__ */ jsx(Tooltip, { placement: "right", tooltip: label, children: /* @__PURE__ */ jsx(
-    Link,
-    {
-      "aria-label": label,
-      className: clsx(styles.link, {
-        [styles.active]: typeof window !== "undefined" && window.location.pathname.startsWith(to)
-      }),
-      href: to,
-      children: /* @__PURE__ */ jsx(Icon, { size: "25px" })
-    }
-  ) });
+const breadcrumbsItem = "_breadcrumbsItem_1hm6a_1";
+const breadcrumbs = "_breadcrumbs_1hm6a_1";
+const classes = {
+  breadcrumbsItem,
+  breadcrumbs
 };
 export {
-  IconLink
+  breadcrumbs,
+  breadcrumbsItem,
+  classes as default
 };
 //# sourceMappingURL=harmony78.mjs.map

package/dist/harmony78.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony78.mjs","sources":["../src/components/Sidebar/Widgets/IconLink/IconLink.tsx"],"sourcesContent":["import { Link, type SvgIconProps, Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { FC } from 'react'\nimport styles from './IconLink.module.css'\n\ntype IconLinkProps = {\n\t/** URL destination for the link */\n\tto: string\n\t/** Text to display in the tooltip when hovering over the icon */\n\tlabel: string\n\t/** Icon component from @lokalise/louis to display */\n\ticon: FC<SvgIconProps>\n}\n\n/**\n * A navigation link component that displays an icon with a tooltip.\n * When hovered, shows a tooltip with the label text.\n * The link is highlighted when the current URL matches its destination.\n *\n * @example\n * ```tsx\n * <IconLink to=\"/projects\" label=\"Projects\" icon={FolderOpenIcon} />\n * ```\n */\nexport const IconLink = ({ label, to, icon: Icon }: IconLinkProps) => {\n\treturn (\n\t\t<Tooltip placement=\"right\" tooltip={label}>\n\t\t\t<Link\n\t\t\t\taria-label={label}\n\t\t\t\tclassName={clsx(styles.link, {\n\t\t\t\t\t[styles.active]: typeof window !== 'undefined' && window.location.pathname.startsWith(to),\n\t\t\t\t})}\n\t\t\t\thref={to}\n\t\t\t>\n\t\t\t\t<Icon size=\"25px\" />\n\t\t\t</Link>\n\t\t</Tooltip>\n\t)\n}\n"],"names":[],"mappings":";;;;AAwBO,MAAM,WAAW,CAAC,EAAE,OAAO,IAAI,MAAM,WAA0B;AACrE,SACE,oBAAA,SAAA,EAAQ,WAAU,SAAQ,SAAS,OACnC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,KAAK,OAAO,MAAM;AAAA,QAC5B,CAAC,OAAO,MAAM,GAAG,OAAO,WAAW,eAAe,OAAO,SAAS,SAAS,WAAW,EAAE;AAAA,MAAA,CACxF;AAAA,MACD,MAAM;AAAA,MAEN,UAAA,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,IAAA;AAAA,EAAA,GAEpB;AAEF;"}
+{"version":3,"file":"harmony78.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/harmony79.cjs

@@ -2,25 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
-const clsx = require("./harmony73.cjs");
-const Menu_module = require("./harmony104.cjs");
-const Menu = ({ children, icon: Icon }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    louis.Menu,
-    {
-      menuButton: ({ opened }) => /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { placement: "right", tooltip: "Help", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: clsx.clsx(Menu_module.default.dropdownButton, {
-            [Menu_module.default.dropdownButtonActive]: opened
-          }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "25px" })
-        }
-      ) }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(louis.MenuList, { placement: "right-start", children })
-    }
-  );
-};
-exports.Menu = Menu;
+const React = require("react");
+const DropdownContent = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+  !!index && item.some((value) => value.visible) && /* @__PURE__ */ jsxRuntime.jsx(louis.MenuDivider, {}),
+  item.filter(({ visible }) => visible).map(({ link, label, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: link || "#", "aria-label": label, onClick, children: label }, label))
+] }, item[0].label)) });
+exports.DropdownContent = DropdownContent;
 //# sourceMappingURL=harmony79.cjs.map

package/dist/harmony79.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony79.cjs","sources":["../src/components/Sidebar/Widgets/Menu/Menu.tsx"],"sourcesContent":["import { MenuList, type SvgIconProps, Tooltip, Menu as UIMenu } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { FC, PropsWithChildren } from 'react'\nimport styles from './Menu.module.css'\n\ntype MenuProps = PropsWithChildren<{\n\t/** Icon component from @lokalise/louis to display in the menu button */\n\ticon: FC<SvgIconProps>\n}>\n\n/**\n * A dropdown menu component that displays an icon button which reveals a menu list when clicked.\n * The menu is positioned to the right of the button and includes a tooltip.\n *\n * Used primarily for dropdown menus in the Sidebar, such as the Help menu.\n *\n * @example\n * ```tsx\n * <Menu icon={HelpCenterIcon}>\n *   <MenuItem href=\"/docs\">Documentation</MenuItem>\n *   <MenuItem href=\"/tutorial\">Tutorials</MenuItem>\n *   <MenuDivider />\n *   <MenuItem href=\"/blog\">Blog</MenuItem>\n * </Menu>\n * ```\n */\nexport const Menu = ({ children, icon: Icon }: MenuProps) => {\n\treturn (\n\t\t<UIMenu\n\t\t\tmenuButton={({ opened }) => (\n\t\t\t\t<Tooltip placement=\"right\" tooltip=\"Help\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={clsx(styles.dropdownButton, {\n\t\t\t\t\t\t\t[styles.dropdownButtonActive]: opened,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon size=\"25px\" />\n\t\t\t\t\t</button>\n\t\t\t\t</Tooltip>\n\t\t\t)}\n\t\t>\n\t\t\t<MenuList placement=\"right-start\">{children}</MenuList>\n\t\t</UIMenu>\n\t)\n}\n"],"names":["jsx","UIMenu","Tooltip","clsx","styles","MenuList"],"mappings":";;;;;;AA0BO,MAAM,OAAO,CAAC,EAAE,UAAU,MAAM,WAAsB;AAE3D,SAAAA,2BAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACA,YAAY,CAAC,EAAE,OAAO,qCACpBC,MAAQ,SAAA,EAAA,WAAU,SAAQ,SAAQ,QAClC,UAAAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,WAAWG,KAAAA,KAAKC,YAAA,QAAO,gBAAgB;AAAA,YACtC,CAACA,YAAAA,QAAO,oBAAoB,GAAG;AAAA,UAAA,CAC/B;AAAA,UAED,UAAAJ,2BAAAA,IAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA,GAEpB;AAAA,MAGD,UAACA,2BAAA,IAAAK,MAAA,UAAA,EAAS,WAAU,eAAe,SAAS,CAAA;AAAA,IAAA;AAAA,EAC7C;AAEF;;"}
+{"version":3,"file":"harmony79.cjs","sources":["../src/components/NavigationPanel/components/DropdownContent/DropdownContent.tsx"],"sourcesContent":["import type { DropdownItem } from '@features/navigation/types/navigation'\nimport { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { Fragment } from 'react'\n\nexport const DropdownContent = ({ items }: { items: DropdownItem[][] }) => (\n\t<>\n\t\t{items.map((item, index) => (\n\t\t\t<Fragment key={item[0].label}>\n\t\t\t\t{!!index && item.some((value) => value.visible) && <MenuDivider />}\n\t\t\t\t{item\n\t\t\t\t\t.filter(({ visible }) => visible)\n\t\t\t\t\t.map(({ link, label, onClick }) => (\n\t\t\t\t\t\t<MenuItem key={label} href={link || '#'} aria-label={label} onClick={onClick}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t</Fragment>\n\t\t))}\n\t</>\n)\n"],"names":["jsx","Fragment","jsxs","MenuDivider","MenuItem"],"mappings":";;;;;AAIO,MAAM,kBAAkB,CAAC,EAAE,MAAA,MACjCA,2BAAAA,IAAAC,WAAAA,UAAA,EACE,UAAM,MAAA,IAAI,CAAC,MAAM,UACjBC,2BAAAA,KAACD,MAAAA,UAAA,EACC,UAAA;AAAA,EAAC,CAAA,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU,MAAM,OAAO,KAAKD,+BAACG,MAAAA,aAAY,CAAA,CAAA;AAAA,EAC/D,KACC,OAAO,CAAC,EAAE,cAAc,OAAO,EAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,MAC3BH,+BAAAI,MAAAA,UAAA,EAAqB,MAAM,QAAQ,KAAK,cAAY,OAAO,SAC1D,UADa,MAAA,GAAA,KAEf,CACA;AAAA,EAAA,GARY,KAAK,CAAC,EAAE,KASvB,CACA,EACF,CAAA;;"}

package/dist/harmony79.mjs

@@ -1,26 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import { Menu as Menu$1, MenuList, Tooltip } from "@lokalise/louis";
-import { clsx } from "./harmony73.mjs";
-import styles from "./harmony104.mjs";
-const Menu = ({ children, icon: Icon }) => {
-  return /* @__PURE__ */ jsx(
-    Menu$1,
-    {
-      menuButton: ({ opened }) => /* @__PURE__ */ jsx(Tooltip, { placement: "right", tooltip: "Help", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: clsx(styles.dropdownButton, {
-            [styles.dropdownButtonActive]: opened
-          }),
-          children: /* @__PURE__ */ jsx(Icon, { size: "25px" })
-        }
-      ) }),
-      children: /* @__PURE__ */ jsx(MenuList, { placement: "right-start", children })
-    }
-  );
-};
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { MenuDivider, MenuItem } from "@lokalise/louis";
+import { Fragment as Fragment$1 } from "react";
+const DropdownContent = ({ items }) => /* @__PURE__ */ jsx(Fragment, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  !!index && item.some((value) => value.visible) && /* @__PURE__ */ jsx(MenuDivider, {}),
+  item.filter(({ visible }) => visible).map(({ link, label, onClick }) => /* @__PURE__ */ jsx(MenuItem, { href: link || "#", "aria-label": label, onClick, children: label }, label))
+] }, item[0].label)) });
 export {
-  Menu
+  DropdownContent
 };
 //# sourceMappingURL=harmony79.mjs.map

package/dist/harmony79.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony79.mjs","sources":["../src/components/Sidebar/Widgets/Menu/Menu.tsx"],"sourcesContent":["import { MenuList, type SvgIconProps, Tooltip, Menu as UIMenu } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { FC, PropsWithChildren } from 'react'\nimport styles from './Menu.module.css'\n\ntype MenuProps = PropsWithChildren<{\n\t/** Icon component from @lokalise/louis to display in the menu button */\n\ticon: FC<SvgIconProps>\n}>\n\n/**\n * A dropdown menu component that displays an icon button which reveals a menu list when clicked.\n * The menu is positioned to the right of the button and includes a tooltip.\n *\n * Used primarily for dropdown menus in the Sidebar, such as the Help menu.\n *\n * @example\n * ```tsx\n * <Menu icon={HelpCenterIcon}>\n *   <MenuItem href=\"/docs\">Documentation</MenuItem>\n *   <MenuItem href=\"/tutorial\">Tutorials</MenuItem>\n *   <MenuDivider />\n *   <MenuItem href=\"/blog\">Blog</MenuItem>\n * </Menu>\n * ```\n */\nexport const Menu = ({ children, icon: Icon }: MenuProps) => {\n\treturn (\n\t\t<UIMenu\n\t\t\tmenuButton={({ opened }) => (\n\t\t\t\t<Tooltip placement=\"right\" tooltip=\"Help\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={clsx(styles.dropdownButton, {\n\t\t\t\t\t\t\t[styles.dropdownButtonActive]: opened,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon size=\"25px\" />\n\t\t\t\t\t</button>\n\t\t\t\t</Tooltip>\n\t\t\t)}\n\t\t>\n\t\t\t<MenuList placement=\"right-start\">{children}</MenuList>\n\t\t</UIMenu>\n\t)\n}\n"],"names":["UIMenu"],"mappings":";;;;AA0BO,MAAM,OAAO,CAAC,EAAE,UAAU,MAAM,WAAsB;AAE3D,SAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACA,YAAY,CAAC,EAAE,OAAO,0BACpB,SAAQ,EAAA,WAAU,SAAQ,SAAQ,QAClC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,WAAW,KAAK,OAAO,gBAAgB;AAAA,YACtC,CAAC,OAAO,oBAAoB,GAAG;AAAA,UAAA,CAC/B;AAAA,UAED,UAAA,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA,GAEpB;AAAA,MAGD,UAAC,oBAAA,UAAA,EAAS,WAAU,eAAe,SAAS,CAAA;AAAA,IAAA;AAAA,EAC7C;AAEF;"}
+{"version":3,"file":"harmony79.mjs","sources":["../src/components/NavigationPanel/components/DropdownContent/DropdownContent.tsx"],"sourcesContent":["import type { DropdownItem } from '@features/navigation/types/navigation'\nimport { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { Fragment } from 'react'\n\nexport const DropdownContent = ({ items }: { items: DropdownItem[][] }) => (\n\t<>\n\t\t{items.map((item, index) => (\n\t\t\t<Fragment key={item[0].label}>\n\t\t\t\t{!!index && item.some((value) => value.visible) && <MenuDivider />}\n\t\t\t\t{item\n\t\t\t\t\t.filter(({ visible }) => visible)\n\t\t\t\t\t.map(({ link, label, onClick }) => (\n\t\t\t\t\t\t<MenuItem key={label} href={link || '#'} aria-label={label} onClick={onClick}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t</Fragment>\n\t\t))}\n\t</>\n)\n"],"names":["Fragment"],"mappings":";;;AAIO,MAAM,kBAAkB,CAAC,EAAE,MAAA,MACjC,oBAAA,UAAA,EACE,UAAM,MAAA,IAAI,CAAC,MAAM,UACjB,qBAACA,YAAA,EACC,UAAA;AAAA,EAAC,CAAA,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU,MAAM,OAAO,KAAK,oBAAC,aAAY,CAAA,CAAA;AAAA,EAC/D,KACC,OAAO,CAAC,EAAE,cAAc,OAAO,EAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,MAC3B,oBAAA,UAAA,EAAqB,MAAM,QAAQ,KAAK,cAAY,OAAO,SAC1D,UADa,MAAA,GAAA,KAEf,CACA;AAAA,EAAA,GARY,KAAK,CAAC,EAAE,KASvB,CACA,EACF,CAAA;"}

package/dist/harmony8.cjs

@@ -4,13 +4,13 @@ const jsxRuntime = require("react/jsx-runtime");
 const NavigationPanel = require("./harmony3.cjs");
 const Breadcrumbs = require("./harmony5.cjs");
 const NavigationTabs = require("./harmony6.cjs");
-const NavigationClient = require("./harmony91.cjs");
-const useNavigation = require("./harmony92.cjs");
-const useNavigationQueries = require("./harmony93.cjs");
-const NavigationClientProvider = require("./harmony94.cjs");
+const NavigationClient = require("./harmony83.cjs");
+const useNavigation = require("./harmony84.cjs");
+const useNavigationQueries = require("./harmony85.cjs");
+const NavigationClientProvider = require("./harmony86.cjs");
 const reactQuery = require("@tanstack/react-query");
 const React = require("react");
-const queryClient = require("./harmony95.cjs");
+const queryClient = require("./harmony87.cjs");
 const ProjectNavigationPanelInner = ({
   page,
   projectId

package/dist/harmony8.mjs

@@ -2,13 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationPanel } from "./harmony3.mjs";
 import { Breadcrumbs } from "./harmony5.mjs";
 import { NavigationTabs } from "./harmony6.mjs";
-import { NavigationClient } from "./harmony91.mjs";
-import { useNavigation } from "./harmony92.mjs";
-import { useNavigationData } from "./harmony93.mjs";
-import { NavigationClientProvider } from "./harmony94.mjs";
+import { NavigationClient } from "./harmony83.mjs";
+import { useNavigation } from "./harmony84.mjs";
+import { useNavigationData } from "./harmony85.mjs";
+import { NavigationClientProvider } from "./harmony86.mjs";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { queryClient } from "./harmony95.mjs";
+import { queryClient } from "./harmony87.mjs";
 const ProjectNavigationPanelInner = ({
   page,
   projectId