@lokalise/harmony 1.34.3 → 1.36.0

package/dist/harmony81.cjs

@@ -2,10 +2,33 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
-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;
+const plan = require("./harmony8.cjs");
+const UpgradeIcon = require("./harmony97.cjs");
+const ProfileMenuContext = require("./harmony93.cjs");
+const UpgradeMenuItem_module = require("./harmony98.cjs");
+const UpgradeMenuItem = ({ upgradeOptionHref }) => {
+  const { planId, trialDaysLeft, showUpgradeCta } = ProfileMenuContext.useProfileMenu();
+  if (!showUpgradeCta) {
+    return null;
+  }
+  const isOnFreePlan = plan.isFreePlan(planId);
+  const daysNoun = trialDaysLeft === 1 ? "day" : "days";
+  const ctaMessage = isOnFreePlan ? "Your team is currently on the Free plan" : `Free trial ends in ${trialDaysLeft} ${daysNoun}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    louis.MenuItem,
+    {
+      "data-testid": "sidebar-upgrade-menu-item",
+      href: upgradeOptionHref,
+      className: `flex-col gap-1 items-start ${UpgradeMenuItem_module.default.container}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpgradeMenuItem_module.default.planCta, children: ctaMessage }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-row items-center gap-1 ${UpgradeMenuItem_module.default.upgradeIconWrapper}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UpgradeIcon.UpgradeIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "See upgrade options" })
+        ] })
+      ]
+    }
+  );
+};
+exports.UpgradeMenuItem = UpgradeMenuItem;
 //# sourceMappingURL=harmony81.cjs.map

package/dist/harmony81.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony81.cjs","sources":["../src/components/NavigationPanel/components/DropdownContent/DropdownContent.tsx"],"sourcesContent":["import { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { Fragment } from 'react'\nimport type { DropdownItem } from '../../types/navigation'\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;;"}
+{"version":3,"file":"harmony81.cjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/UpgradeMenuItem/UpgradeMenuItem.tsx"],"sourcesContent":["import { MenuItem } from '@lokalise/louis'\nimport { isFreePlan } from '@utils'\nimport { UpgradeIcon } from '../../../UpgradeIcon/UpgradeIcon'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport styles from './UpgradeMenuItem.module.css'\n\ntype UpgradeMenuItemProps = {\n\t/** URL to the upgrade page or pricing options */\n\tupgradeOptionHref: string\n}\n\n/**\n * A menu item component that displays upgrade call-to-action information.\n * Only renders when upgrade options should be shown (determined by context).\n *\n * The component displays different messages based on the team's current plan:\n * - For free plans: \"Your team is currently on the Free plan\"\n * - For trial plans: \"Free trial ends in X days\"\n *\n * Includes an upgrade icon and \"See upgrade options\" text, styled to draw attention\n * to the upgrade opportunity.\n *\n * @example\n * ```tsx\n * <UpgradeMenuItem upgradeOptionHref=\"/pricing\" />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context for plan information\n * and visibility control.\n */\nexport const UpgradeMenuItem = ({ upgradeOptionHref }: UpgradeMenuItemProps) => {\n\tconst { planId, trialDaysLeft, showUpgradeCta } = useProfileMenu()\n\n\tif (!showUpgradeCta) {\n\t\treturn null\n\t}\n\n\tconst isOnFreePlan = isFreePlan(planId)\n\n\tconst daysNoun = trialDaysLeft === 1 ? 'day' : 'days'\n\tconst ctaMessage = isOnFreePlan\n\t\t? 'Your team is currently on the Free plan'\n\t\t: `Free trial ends in ${trialDaysLeft} ${daysNoun}`\n\n\treturn (\n\t\t<MenuItem\n\t\t\tdata-testid=\"sidebar-upgrade-menu-item\"\n\t\t\thref={upgradeOptionHref}\n\t\t\tclassName={`flex-col gap-1 items-start ${styles.container}`}\n\t\t>\n\t\t\t<span className={styles.planCta}>{ctaMessage}</span>\n\t\t\t<div className={`flex-row items-center gap-1 ${styles.upgradeIconWrapper}`}>\n\t\t\t\t<UpgradeIcon />\n\t\t\t\t<span>See upgrade options</span>\n\t\t\t</div>\n\t\t</MenuItem>\n\t)\n}\n"],"names":["useProfileMenu","isFreePlan","jsxs","MenuItem","styles","jsx","UpgradeIcon"],"mappings":";;;;;;;;AA+BO,MAAM,kBAAkB,CAAC,EAAE,wBAA8C;AAC/E,QAAM,EAAE,QAAQ,eAAe,eAAA,IAAmBA,mBAAAA,eAAe;AAEjE,MAAI,CAAC,gBAAgB;AACb,WAAA;AAAA,EAAA;AAGF,QAAA,eAAeC,gBAAW,MAAM;AAEhC,QAAA,WAAW,kBAAkB,IAAI,QAAQ;AAC/C,QAAM,aAAa,eAChB,4CACA,sBAAsB,aAAa,IAAI,QAAQ;AAGjD,SAAAC,2BAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,MAAM;AAAA,MACN,WAAW,8BAA8BC,uBAAA,QAAO,SAAS;AAAA,MAEzD,UAAA;AAAA,QAAAC,2BAAA,IAAC,QAAK,EAAA,WAAWD,uBAAO,QAAA,SAAU,UAAW,YAAA;AAAA,wCAC5C,OAAI,EAAA,WAAW,+BAA+BA,+BAAO,kBAAkB,IACvE,UAAA;AAAA,UAAAC,2BAAA,IAACC,YAAY,aAAA,EAAA;AAAA,UACbD,2BAAAA,IAAC,UAAK,UAAmB,sBAAA,CAAA;AAAA,QAAA,EAC1B,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACD;AAEF;;"}

package/dist/harmony81.mjs

@@ -1,11 +1,34 @@
-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)) });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { MenuItem } from "@lokalise/louis";
+import { isFreePlan } from "./harmony8.mjs";
+import { UpgradeIcon } from "./harmony97.mjs";
+import { useProfileMenu } from "./harmony93.mjs";
+import styles from "./harmony98.mjs";
+const UpgradeMenuItem = ({ upgradeOptionHref }) => {
+  const { planId, trialDaysLeft, showUpgradeCta } = useProfileMenu();
+  if (!showUpgradeCta) {
+    return null;
+  }
+  const isOnFreePlan = isFreePlan(planId);
+  const daysNoun = trialDaysLeft === 1 ? "day" : "days";
+  const ctaMessage = isOnFreePlan ? "Your team is currently on the Free plan" : `Free trial ends in ${trialDaysLeft} ${daysNoun}`;
+  return /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      "data-testid": "sidebar-upgrade-menu-item",
+      href: upgradeOptionHref,
+      className: `flex-col gap-1 items-start ${styles.container}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.planCta, children: ctaMessage }),
+        /* @__PURE__ */ jsxs("div", { className: `flex-row items-center gap-1 ${styles.upgradeIconWrapper}`, children: [
+          /* @__PURE__ */ jsx(UpgradeIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: "See upgrade options" })
+        ] })
+      ]
+    }
+  );
+};
 export {
-  DropdownContent
+  UpgradeMenuItem
 };
 //# sourceMappingURL=harmony81.mjs.map

package/dist/harmony81.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony81.mjs","sources":["../src/components/NavigationPanel/components/DropdownContent/DropdownContent.tsx"],"sourcesContent":["import { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { Fragment } from 'react'\nimport type { DropdownItem } from '../../types/navigation'\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;"}
+{"version":3,"file":"harmony81.mjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/UpgradeMenuItem/UpgradeMenuItem.tsx"],"sourcesContent":["import { MenuItem } from '@lokalise/louis'\nimport { isFreePlan } from '@utils'\nimport { UpgradeIcon } from '../../../UpgradeIcon/UpgradeIcon'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport styles from './UpgradeMenuItem.module.css'\n\ntype UpgradeMenuItemProps = {\n\t/** URL to the upgrade page or pricing options */\n\tupgradeOptionHref: string\n}\n\n/**\n * A menu item component that displays upgrade call-to-action information.\n * Only renders when upgrade options should be shown (determined by context).\n *\n * The component displays different messages based on the team's current plan:\n * - For free plans: \"Your team is currently on the Free plan\"\n * - For trial plans: \"Free trial ends in X days\"\n *\n * Includes an upgrade icon and \"See upgrade options\" text, styled to draw attention\n * to the upgrade opportunity.\n *\n * @example\n * ```tsx\n * <UpgradeMenuItem upgradeOptionHref=\"/pricing\" />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context for plan information\n * and visibility control.\n */\nexport const UpgradeMenuItem = ({ upgradeOptionHref }: UpgradeMenuItemProps) => {\n\tconst { planId, trialDaysLeft, showUpgradeCta } = useProfileMenu()\n\n\tif (!showUpgradeCta) {\n\t\treturn null\n\t}\n\n\tconst isOnFreePlan = isFreePlan(planId)\n\n\tconst daysNoun = trialDaysLeft === 1 ? 'day' : 'days'\n\tconst ctaMessage = isOnFreePlan\n\t\t? 'Your team is currently on the Free plan'\n\t\t: `Free trial ends in ${trialDaysLeft} ${daysNoun}`\n\n\treturn (\n\t\t<MenuItem\n\t\t\tdata-testid=\"sidebar-upgrade-menu-item\"\n\t\t\thref={upgradeOptionHref}\n\t\t\tclassName={`flex-col gap-1 items-start ${styles.container}`}\n\t\t>\n\t\t\t<span className={styles.planCta}>{ctaMessage}</span>\n\t\t\t<div className={`flex-row items-center gap-1 ${styles.upgradeIconWrapper}`}>\n\t\t\t\t<UpgradeIcon />\n\t\t\t\t<span>See upgrade options</span>\n\t\t\t</div>\n\t\t</MenuItem>\n\t)\n}\n"],"names":[],"mappings":";;;;;;AA+BO,MAAM,kBAAkB,CAAC,EAAE,wBAA8C;AAC/E,QAAM,EAAE,QAAQ,eAAe,eAAA,IAAmB,eAAe;AAEjE,MAAI,CAAC,gBAAgB;AACb,WAAA;AAAA,EAAA;AAGF,QAAA,eAAe,WAAW,MAAM;AAEhC,QAAA,WAAW,kBAAkB,IAAI,QAAQ;AAC/C,QAAM,aAAa,eAChB,4CACA,sBAAsB,aAAa,IAAI,QAAQ;AAGjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,MAAM;AAAA,MACN,WAAW,8BAA8B,OAAO,SAAS;AAAA,MAEzD,UAAA;AAAA,QAAA,oBAAC,QAAK,EAAA,WAAW,OAAO,SAAU,UAAW,YAAA;AAAA,6BAC5C,OAAI,EAAA,WAAW,+BAA+B,OAAO,kBAAkB,IACvE,UAAA;AAAA,UAAA,oBAAC,aAAY,EAAA;AAAA,UACb,oBAAC,UAAK,UAAmB,sBAAA,CAAA;AAAA,QAAA,EAC1B,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACD;AAEF;"}

package/dist/harmony82.cjs

@@ -1,32 +1,62 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const floatingUi_core = require("./harmony106.cjs");
 const louis = require("@lokalise/louis");
-const clsx = require("./harmony67.cjs");
+const useEffectOnce = require("./harmony12.cjs");
+const clsx = require("./harmony70.cjs");
 const React = require("react");
-const NavItemContents = require("./harmony87.cjs");
-const styles_module = require("./harmony88.cjs");
-const NavigationTabsItem = React.forwardRef(
-  ({ label, href = "", disabled = false, badge, onClick, novel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { tooltip: "You do not have access to this function", show: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+const Tasks_module = require("./harmony107.cjs");
+const TasksContext = require("./harmony108.cjs");
+const TasksPopover = require("./harmony109.cjs");
+const TasksProvider = require("./harmony110.cjs");
+const taskEvents = require("./harmony111.cjs");
+const Tasks = TasksProvider.withTasksContext(() => {
+  const [open, setOpen] = React.useState(false);
+  const { tasksCount } = TasksContext.useTasks();
+  useEffectOnce.useEffectOnce(() => {
+    const showDialog = () => {
+      setOpen(true);
+    };
+    document.addEventListener(taskEvents.TaskEvents.ShowDialog, showDialog);
+    return () => {
+      document.removeEventListener(taskEvents.TaskEvents.ShowDialog, showDialog);
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { tooltip: "Tasks", placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
+    louis.Popover,
     {
-      className: disabled ? styles_module.default.projectNavigationItemDisabled : styles_module.default.projectNavigationItem,
-      children: onClick || disabled || !href ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      content: /* @__PURE__ */ jsxRuntime.jsx(TasksPopover.TasksPopover, {}),
+      placement: "right",
+      open,
+      onOpenChange: setOpen,
+      middlewares: [
+        floatingUi_core.shift({
+          // Adding some spacing to the top and bottom so the popover
+          // doesn't extend to the edges of the screen.
+          padding: {
+            top: 32,
+            bottom: 32
+          }
+        })
+      ],
+      children: (visible) => /* @__PURE__ */ jsxRuntime.jsxs(
+        louis.Button,
         {
           type: "button",
-          ref,
-          className: clsx.clsx(styles_module.default.withNavLinkStyle, {
-            [styles_module.default.disabled]: disabled
+          "data-testid": "sidebar-tasks-widget-button",
+          "aria-label": "Tasks",
+          className: clsx.clsx(Tasks_module.default.navItem, {
+            [Tasks_module.default.activeNavItem]: visible
           }),
-          disabled,
-          onClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(NavItemContents.NavItemContents, { label, badge, novel })
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(louis.JobIcon, { size: "25px" }),
+            tasksCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Tasks_module.default.badge, "aria-label": `${tasksCount} items requiring attention`, children: tasksCount > 9 ? "9+" : tasksCount })
+          ]
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: styles_module.default.withNavLinkStyle, children: /* @__PURE__ */ jsxRuntime.jsx(NavItemContents.NavItemContents, { label, badge, novel }) })
+      )
     }
-  ) })
-);
-NavigationTabsItem.displayName = "NavigationTabsItem";
-exports.NavigationTabsItem = NavigationTabsItem;
+  ) });
+});
+exports.Tasks = Tasks;
 //# sourceMappingURL=harmony82.cjs.map

package/dist/harmony82.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony82.cjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.tsx"],"sourcesContent":["import { Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport { NavItemContents } from './NavItemContents'\nimport classes from './styles.module.css'\n\ntype NavigationTabsItemProps = {\n\tlabel: string\n\tbadge?: number\n\tdisabled?: boolean\n\tactive?: boolean\n\tonClick?: () => void\n\thref?: string\n\tnovel?: string\n}\n\nexport const NavigationTabsItem = forwardRef<HTMLButtonElement, NavigationTabsItemProps>(\n\t({ label, href = '', disabled = false, badge, onClick, novel }, ref) => (\n\t\t<Tooltip tooltip=\"You do not have access to this function\" show={disabled}>\n\t\t\t<div\n\t\t\t\tclassName={disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem}\n\t\t\t>\n\t\t\t\t{onClick || disabled || !href ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={clsx(classes.withNavLinkStyle, {\n\t\t\t\t\t\t\t[classes.disabled]: disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<a href={href} className={classes.withNavLinkStyle}>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</a>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Tooltip>\n\t),\n)\n\nNavigationTabsItem.displayName = 'NavigationTabsItem'\n"],"names":["forwardRef","jsx","Tooltip","classes","clsx","NavItemContents"],"mappings":";;;;;;;;AAgBO,MAAM,qBAAqBA,MAAA;AAAA,EACjC,CAAC,EAAE,OAAO,OAAO,IAAI,WAAW,OAAO,OAAO,SAAS,MAAA,GAAS,QAC/DC,2BAAA,IAACC,iBAAQ,SAAQ,2CAA0C,MAAM,UAChE,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW,WAAWE,cAAAA,QAAQ,gCAAgCA,cAAQ,QAAA;AAAA,MAErE,UAAA,WAAW,YAAY,CAAC,OACxBF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,WAAWG,KAAAA,KAAKD,cAAA,QAAQ,kBAAkB;AAAA,YACzC,CAACA,cAAAA,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACpB;AAAA,UACD;AAAA,UACA;AAAA,UAEA,UAACF,2BAAA,IAAAI,gBAAA,iBAAA,EAAgB,OAAc,OAAc,MAAc,CAAA;AAAA,QAAA;AAAA,MAAA,IAG5DJ,2BAAAA,IAAC,KAAE,EAAA,MAAY,WAAWE,cAAA,QAAQ,kBACjC,UAAAF,2BAAA,IAACI,gBAAgB,iBAAA,EAAA,OAAc,OAAc,MAAc,CAAA,EAC5D,CAAA;AAAA,IAAA;AAAA,EAAA,EAGH,CAAA;AAEF;AAEA,mBAAmB,cAAc;;"}
+{"version":3,"file":"harmony82.cjs","sources":["../src/components/Sidebar/Widgets/Tasks/Tasks.tsx"],"sourcesContent":["import { shift } from '@floating-ui/core'\nimport { Button, JobIcon, Popover, Tooltip } from '@lokalise/louis'\nimport { useEffectOnce } from '@utils'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport styles from './Tasks.module.css'\nimport { useTasks } from './TasksContext'\nimport { TasksPopover } from './TasksPopover/TasksPopover'\nimport { withTasksContext } from './TasksProvider'\nimport { TaskEvents } from './utils/taskEvents'\n\nexport const Tasks = withTasksContext(() => {\n\tconst [open, setOpen] = useState(false)\n\n\tconst { tasksCount } = useTasks()\n\n\tuseEffectOnce(() => {\n\t\tconst showDialog = () => {\n\t\t\tsetOpen(true)\n\t\t}\n\n\t\tdocument.addEventListener(TaskEvents.ShowDialog, showDialog)\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(TaskEvents.ShowDialog, showDialog)\n\t\t}\n\t})\n\n\treturn (\n\t\t<Tooltip tooltip=\"Tasks\" placement=\"right\">\n\t\t\t<Popover\n\t\t\t\tcontent={<TasksPopover />}\n\t\t\t\tplacement=\"right\"\n\t\t\t\topen={open}\n\t\t\t\tonOpenChange={setOpen}\n\t\t\t\tmiddlewares={[\n\t\t\t\t\tshift({\n\t\t\t\t\t\t// Adding some spacing to the top and bottom so the popover\n\t\t\t\t\t\t// doesn't extend to the edges of the screen.\n\t\t\t\t\t\tpadding: {\n\t\t\t\t\t\t\ttop: 32,\n\t\t\t\t\t\t\tbottom: 32,\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t{(visible) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdata-testid=\"sidebar-tasks-widget-button\"\n\t\t\t\t\t\taria-label=\"Tasks\"\n\t\t\t\t\t\tclassName={clsx(styles.navItem, {\n\t\t\t\t\t\t\t[styles.activeNavItem]: visible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<JobIcon size=\"25px\" />\n\t\t\t\t\t\t{tasksCount > 0 && (\n\t\t\t\t\t\t\t<div className={styles.badge} aria-label={`${tasksCount} items requiring attention`}>\n\t\t\t\t\t\t\t\t{tasksCount > 9 ? '9+' : tasksCount}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</Popover>\n\t\t</Tooltip>\n\t)\n})\n"],"names":["withTasksContext","useState","useTasks","useEffectOnce","TaskEvents","jsx","Tooltip","Popover","TasksPopover","shift","jsxs","Button","clsx","styles","JobIcon"],"mappings":";;;;;;;;;;;;;AAWa,MAAA,QAAQA,+BAAiB,MAAM;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AAEhC,QAAA,EAAE,WAAW,IAAIC,sBAAS;AAEhCC,gBAAAA,cAAc,MAAM;AACnB,UAAM,aAAa,MAAM;AACxB,cAAQ,IAAI;AAAA,IACb;AAES,aAAA,iBAAiBC,sBAAW,YAAY,UAAU;AAE3D,WAAO,MAAM;AACH,eAAA,oBAAoBA,sBAAW,YAAY,UAAU;AAAA,IAC/D;AAAA,EAAA,CACA;AAED,SACEC,2BAAA,IAAAC,MAAA,SAAA,EAAQ,SAAQ,SAAQ,WAAU,SAClC,UAAAD,2BAAA;AAAA,IAACE,MAAA;AAAA,IAAA;AAAA,MACA,wCAAUC,aAAa,cAAA,EAAA;AAAA,MACvB,WAAU;AAAA,MACV;AAAA,MACA,cAAc;AAAA,MACd,aAAa;AAAA,QACZC,sBAAM;AAAA;AAAA;AAAA,UAGL,SAAS;AAAA,YACR,KAAK;AAAA,YACL,QAAQ;AAAA,UAAA;AAAA,QAET,CAAA;AAAA,MACF;AAAA,MAEC,WAAC,YACDC,2BAAA;AAAA,QAACC,MAAA;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,cAAW;AAAA,UACX,WAAWC,KAAAA,KAAKC,aAAA,QAAO,SAAS;AAAA,YAC/B,CAACA,aAAAA,QAAO,aAAa,GAAG;AAAA,UAAA,CACxB;AAAA,UAED,UAAA;AAAA,YAACR,2BAAAA,IAAAS,MAAA,SAAA,EAAQ,MAAK,OAAO,CAAA;AAAA,YACpB,aAAa,KACZT,+BAAA,OAAA,EAAI,WAAWQ,aAAO,QAAA,OAAO,cAAY,GAAG,UAAU,8BACrD,UAAa,aAAA,IAAI,OAAO,WAC1B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAAA,GAGH;AAEF,CAAC;;"}

package/dist/harmony82.mjs

@@ -1,32 +1,62 @@
-import { jsx } from "react/jsx-runtime";
-import { Tooltip } from "@lokalise/louis";
-import { clsx } from "./harmony67.mjs";
-import { forwardRef } from "react";
-import { NavItemContents } from "./harmony87.mjs";
-import classes from "./harmony88.mjs";
-const NavigationTabsItem = forwardRef(
-  ({ label, href = "", disabled = false, badge, onClick, novel }, ref) => /* @__PURE__ */ jsx(Tooltip, { tooltip: "You do not have access to this function", show: disabled, children: /* @__PURE__ */ jsx(
-    "div",
+import { jsx, jsxs } from "react/jsx-runtime";
+import { shift } from "./harmony106.mjs";
+import { Tooltip, Popover, Button, JobIcon } from "@lokalise/louis";
+import { useEffectOnce } from "./harmony12.mjs";
+import { clsx } from "./harmony70.mjs";
+import { useState } from "react";
+import styles from "./harmony107.mjs";
+import { useTasks } from "./harmony108.mjs";
+import { TasksPopover } from "./harmony109.mjs";
+import { withTasksContext } from "./harmony110.mjs";
+import { TaskEvents } from "./harmony111.mjs";
+const Tasks = withTasksContext(() => {
+  const [open, setOpen] = useState(false);
+  const { tasksCount } = useTasks();
+  useEffectOnce(() => {
+    const showDialog = () => {
+      setOpen(true);
+    };
+    document.addEventListener(TaskEvents.ShowDialog, showDialog);
+    return () => {
+      document.removeEventListener(TaskEvents.ShowDialog, showDialog);
+    };
+  });
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: "Tasks", placement: "right", children: /* @__PURE__ */ jsx(
+    Popover,
     {
-      className: disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem,
-      children: onClick || disabled || !href ? /* @__PURE__ */ jsx(
-        "button",
+      content: /* @__PURE__ */ jsx(TasksPopover, {}),
+      placement: "right",
+      open,
+      onOpenChange: setOpen,
+      middlewares: [
+        shift({
+          // Adding some spacing to the top and bottom so the popover
+          // doesn't extend to the edges of the screen.
+          padding: {
+            top: 32,
+            bottom: 32
+          }
+        })
+      ],
+      children: (visible) => /* @__PURE__ */ jsxs(
+        Button,
         {
           type: "button",
-          ref,
-          className: clsx(classes.withNavLinkStyle, {
-            [classes.disabled]: disabled
+          "data-testid": "sidebar-tasks-widget-button",
+          "aria-label": "Tasks",
+          className: clsx(styles.navItem, {
+            [styles.activeNavItem]: visible
           }),
-          disabled,
-          onClick,
-          children: /* @__PURE__ */ jsx(NavItemContents, { label, badge, novel })
+          children: [
+            /* @__PURE__ */ jsx(JobIcon, { size: "25px" }),
+            tasksCount > 0 && /* @__PURE__ */ jsx("div", { className: styles.badge, "aria-label": `${tasksCount} items requiring attention`, children: tasksCount > 9 ? "9+" : tasksCount })
+          ]
         }
-      ) : /* @__PURE__ */ jsx("a", { href, className: classes.withNavLinkStyle, children: /* @__PURE__ */ jsx(NavItemContents, { label, badge, novel }) })
+      )
     }
-  ) })
-);
-NavigationTabsItem.displayName = "NavigationTabsItem";
+  ) });
+});
 export {
-  NavigationTabsItem
+  Tasks
 };
 //# sourceMappingURL=harmony82.mjs.map

package/dist/harmony82.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony82.mjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.tsx"],"sourcesContent":["import { Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport { NavItemContents } from './NavItemContents'\nimport classes from './styles.module.css'\n\ntype NavigationTabsItemProps = {\n\tlabel: string\n\tbadge?: number\n\tdisabled?: boolean\n\tactive?: boolean\n\tonClick?: () => void\n\thref?: string\n\tnovel?: string\n}\n\nexport const NavigationTabsItem = forwardRef<HTMLButtonElement, NavigationTabsItemProps>(\n\t({ label, href = '', disabled = false, badge, onClick, novel }, ref) => (\n\t\t<Tooltip tooltip=\"You do not have access to this function\" show={disabled}>\n\t\t\t<div\n\t\t\t\tclassName={disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem}\n\t\t\t>\n\t\t\t\t{onClick || disabled || !href ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={clsx(classes.withNavLinkStyle, {\n\t\t\t\t\t\t\t[classes.disabled]: disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<a href={href} className={classes.withNavLinkStyle}>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</a>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Tooltip>\n\t),\n)\n\nNavigationTabsItem.displayName = 'NavigationTabsItem'\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,qBAAqB;AAAA,EACjC,CAAC,EAAE,OAAO,OAAO,IAAI,WAAW,OAAO,OAAO,SAAS,MAAA,GAAS,QAC/D,oBAAC,WAAQ,SAAQ,2CAA0C,MAAM,UAChE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW,WAAW,QAAQ,gCAAgC,QAAQ;AAAA,MAErE,UAAA,WAAW,YAAY,CAAC,OACxB;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,WAAW,KAAK,QAAQ,kBAAkB;AAAA,YACzC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACpB;AAAA,UACD;AAAA,UACA;AAAA,UAEA,UAAC,oBAAA,iBAAA,EAAgB,OAAc,OAAc,MAAc,CAAA;AAAA,QAAA;AAAA,MAAA,IAG5D,oBAAC,KAAE,EAAA,MAAY,WAAW,QAAQ,kBACjC,UAAA,oBAAC,iBAAgB,EAAA,OAAc,OAAc,MAAc,CAAA,EAC5D,CAAA;AAAA,IAAA;AAAA,EAAA,EAGH,CAAA;AAEF;AAEA,mBAAmB,cAAc;"}
+{"version":3,"file":"harmony82.mjs","sources":["../src/components/Sidebar/Widgets/Tasks/Tasks.tsx"],"sourcesContent":["import { shift } from '@floating-ui/core'\nimport { Button, JobIcon, Popover, Tooltip } from '@lokalise/louis'\nimport { useEffectOnce } from '@utils'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport styles from './Tasks.module.css'\nimport { useTasks } from './TasksContext'\nimport { TasksPopover } from './TasksPopover/TasksPopover'\nimport { withTasksContext } from './TasksProvider'\nimport { TaskEvents } from './utils/taskEvents'\n\nexport const Tasks = withTasksContext(() => {\n\tconst [open, setOpen] = useState(false)\n\n\tconst { tasksCount } = useTasks()\n\n\tuseEffectOnce(() => {\n\t\tconst showDialog = () => {\n\t\t\tsetOpen(true)\n\t\t}\n\n\t\tdocument.addEventListener(TaskEvents.ShowDialog, showDialog)\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(TaskEvents.ShowDialog, showDialog)\n\t\t}\n\t})\n\n\treturn (\n\t\t<Tooltip tooltip=\"Tasks\" placement=\"right\">\n\t\t\t<Popover\n\t\t\t\tcontent={<TasksPopover />}\n\t\t\t\tplacement=\"right\"\n\t\t\t\topen={open}\n\t\t\t\tonOpenChange={setOpen}\n\t\t\t\tmiddlewares={[\n\t\t\t\t\tshift({\n\t\t\t\t\t\t// Adding some spacing to the top and bottom so the popover\n\t\t\t\t\t\t// doesn't extend to the edges of the screen.\n\t\t\t\t\t\tpadding: {\n\t\t\t\t\t\t\ttop: 32,\n\t\t\t\t\t\t\tbottom: 32,\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t{(visible) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdata-testid=\"sidebar-tasks-widget-button\"\n\t\t\t\t\t\taria-label=\"Tasks\"\n\t\t\t\t\t\tclassName={clsx(styles.navItem, {\n\t\t\t\t\t\t\t[styles.activeNavItem]: visible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<JobIcon size=\"25px\" />\n\t\t\t\t\t\t{tasksCount > 0 && (\n\t\t\t\t\t\t\t<div className={styles.badge} aria-label={`${tasksCount} items requiring attention`}>\n\t\t\t\t\t\t\t\t{tasksCount > 9 ? '9+' : tasksCount}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</Popover>\n\t\t</Tooltip>\n\t)\n})\n"],"names":[],"mappings":";;;;;;;;;;;AAWa,MAAA,QAAQ,iBAAiB,MAAM;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEhC,QAAA,EAAE,WAAW,IAAI,SAAS;AAEhC,gBAAc,MAAM;AACnB,UAAM,aAAa,MAAM;AACxB,cAAQ,IAAI;AAAA,IACb;AAES,aAAA,iBAAiB,WAAW,YAAY,UAAU;AAE3D,WAAO,MAAM;AACH,eAAA,oBAAoB,WAAW,YAAY,UAAU;AAAA,IAC/D;AAAA,EAAA,CACA;AAED,SACE,oBAAA,SAAA,EAAQ,SAAQ,SAAQ,WAAU,SAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,6BAAU,cAAa,EAAA;AAAA,MACvB,WAAU;AAAA,MACV;AAAA,MACA,cAAc;AAAA,MACd,aAAa;AAAA,QACZ,MAAM;AAAA;AAAA;AAAA,UAGL,SAAS;AAAA,YACR,KAAK;AAAA,YACL,QAAQ;AAAA,UAAA;AAAA,QAET,CAAA;AAAA,MACF;AAAA,MAEC,WAAC,YACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,cAAW;AAAA,UACX,WAAW,KAAK,OAAO,SAAS;AAAA,YAC/B,CAAC,OAAO,aAAa,GAAG;AAAA,UAAA,CACxB;AAAA,UAED,UAAA;AAAA,YAAC,oBAAA,SAAA,EAAQ,MAAK,OAAO,CAAA;AAAA,YACpB,aAAa,KACZ,oBAAA,OAAA,EAAI,WAAW,OAAO,OAAO,cAAY,GAAG,UAAU,8BACrD,UAAa,aAAA,IAAI,OAAO,WAC1B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAAA,GAGH;AAEF,CAAC;"}

package/dist/harmony83.cjs

@@ -1,6 +1,12 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const hasVisibleItems = (dropdownSections) => (dropdownSections == null ? void 0 : dropdownSections.some((section) => section.some((item) => item.visible))) ?? false;
-const isNavigationItemVisible = (item) => item.visible && (!item.dropdown || hasVisibleItems(item.dropdown));
-exports.isNavigationItemVisible = isNavigationItemVisible;
+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.breadcrumbs = breadcrumbs;
+exports.breadcrumbsItem = breadcrumbsItem;
+exports.default = classes;
 //# sourceMappingURL=harmony83.cjs.map

package/dist/harmony83.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony83.cjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/helpers.ts"],"sourcesContent":["import type { DropdownItem, NavigationTabsItem } from '../../types/navigation'\n\nconst hasVisibleItems = (dropdownSections?: DropdownItem[][]): boolean =>\n\tdropdownSections?.some((section) => section.some((item) => item.visible)) ?? false\n\nexport const isNavigationItemVisible = (item: NavigationTabsItem): boolean =>\n\titem.visible && (!item.dropdown || hasVisibleItems(item.dropdown))\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,CAAC,sBACxB,qDAAkB,KAAK,CAAC,YAAY,QAAQ,KAAK,CAAC,SAAS,KAAK,OAAO,OAAM;AAEjE,MAAA,0BAA0B,CAAC,SACvC,KAAK,YAAY,CAAC,KAAK,YAAY,gBAAgB,KAAK,QAAQ;;"}
+{"version":3,"file":"harmony83.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/harmony83.mjs

@@ -1,6 +1,12 @@
-const hasVisibleItems = (dropdownSections) => (dropdownSections == null ? void 0 : dropdownSections.some((section) => section.some((item) => item.visible))) ?? false;
-const isNavigationItemVisible = (item) => item.visible && (!item.dropdown || hasVisibleItems(item.dropdown));
+const breadcrumbsItem = "_breadcrumbsItem_1hm6a_1";
+const breadcrumbs = "_breadcrumbs_1hm6a_1";
+const classes = {
+  breadcrumbsItem,
+  breadcrumbs
+};
 export {
-  isNavigationItemVisible
+  breadcrumbs,
+  breadcrumbsItem,
+  classes as default
 };
 //# sourceMappingURL=harmony83.mjs.map

package/dist/harmony83.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony83.mjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/helpers.ts"],"sourcesContent":["import type { DropdownItem, NavigationTabsItem } from '../../types/navigation'\n\nconst hasVisibleItems = (dropdownSections?: DropdownItem[][]): boolean =>\n\tdropdownSections?.some((section) => section.some((item) => item.visible)) ?? false\n\nexport const isNavigationItemVisible = (item: NavigationTabsItem): boolean =>\n\titem.visible && (!item.dropdown || hasVisibleItems(item.dropdown))\n"],"names":[],"mappings":"AAEA,MAAM,kBAAkB,CAAC,sBACxB,qDAAkB,KAAK,CAAC,YAAY,QAAQ,KAAK,CAAC,SAAS,KAAK,OAAO,OAAM;AAEjE,MAAA,0BAA0B,CAAC,SACvC,KAAK,YAAY,CAAC,KAAK,YAAY,gBAAgB,KAAK,QAAQ;"}
+{"version":3,"file":"harmony83.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/harmony84.cjs

@@ -2,42 +2,10 @@
 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 clsx = require("./harmony67.cjs");
-const SortingIcon = require("./harmony85.cjs");
-const TableHeaderCell_module = require("./harmony86.cjs");
-const Cell = ({ children, align, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    louis.TableHeaderCell,
-    {
-      className: clsx.clsx(
-        {
-          [TableHeaderCell_module.default.centeredCell]: align === "center",
-          [TableHeaderCell_module.default.rightAlignedCell]: align === "right"
-        },
-        className
-      ),
-      children
-    }
-  );
-};
-const TableHeaderCell = ({ header, align = "left", className }) => {
-  const renderValue = () => reactTable.flexRender(header.column.columnDef.header, header.getContext());
-  if (header.column.getCanSort()) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { align, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: header.column.getToggleSortingHandler(),
-        className: TableHeaderCell_module.default.headerSortButton,
-        children: [
-          renderValue(),
-          /* @__PURE__ */ jsxRuntime.jsx(SortingIcon.SortingIcon, { direction: header.column.getIsSorted() })
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { align, className, children: renderValue() });
-};
-exports.TableHeaderCell = TableHeaderCell;
+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=harmony84.cjs.map

package/dist/harmony84.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony84.cjs","sources":["../src/components/Table/components/TableHeaderCell.tsx"],"sourcesContent":["import { TableHeaderCell as LouisTableHeaderCell } from '@lokalise/louis'\nimport { type Header, flexRender } from '@tanstack/react-table'\nimport cx from 'clsx'\nimport type { PropsWithChildren } from 'react'\nimport { SortingIcon } from './SortingIcon'\nimport styles from './TableHeaderCell.module.css'\n\ntype CellProps = {\n\talign?: 'left' | 'center' | 'right'\n\tclassName?: string\n}\n\ntype TableHeaderProps<T> = CellProps & {\n\theader: Header<T, unknown>\n}\n\nconst Cell = ({ children, align, className }: PropsWithChildren<CellProps>) => {\n\treturn (\n\t\t<LouisTableHeaderCell\n\t\t\tclassName={cx(\n\t\t\t\t{\n\t\t\t\t\t[styles.centeredCell]: align === 'center',\n\t\t\t\t\t[styles.rightAlignedCell]: align === 'right',\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</LouisTableHeaderCell>\n\t)\n}\n\nexport const TableHeaderCell = <T,>({ header, align = 'left', className }: TableHeaderProps<T>) => {\n\tconst renderValue = () => flexRender(header.column.columnDef.header, header.getContext())\n\n\tif (header.column.getCanSort()) {\n\t\treturn (\n\t\t\t<Cell align={align} className={className}>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\tclassName={styles.headerSortButton}\n\t\t\t\t>\n\t\t\t\t\t{renderValue()}\n\t\t\t\t\t<SortingIcon direction={header.column.getIsSorted()} />\n\t\t\t\t</button>\n\t\t\t</Cell>\n\t\t)\n\t}\n\n\treturn (\n\t\t<Cell align={align} className={className}>\n\t\t\t{renderValue()}\n\t\t</Cell>\n\t)\n}\n"],"names":["jsx","LouisTableHeaderCell","cx","styles","flexRender","jsxs","SortingIcon"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,CAAC,EAAE,UAAU,OAAO,gBAA8C;AAE7E,SAAAA,2BAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACA,WAAWC,KAAA;AAAA,QACV;AAAA,UACC,CAACC,uBAAA,QAAO,YAAY,GAAG,UAAU;AAAA,UACjC,CAACA,uBAAA,QAAO,gBAAgB,GAAG,UAAU;AAAA,QACtC;AAAA,QACA;AAAA,MACD;AAAA,MAEC;AAAA,IAAA;AAAA,EACF;AAEF;AAEO,MAAM,kBAAkB,CAAK,EAAE,QAAQ,QAAQ,QAAQ,gBAAqC;AAC5F,QAAA,cAAc,MAAMC,WAAW,WAAA,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY;AAEpF,MAAA,OAAO,OAAO,cAAc;AAE9B,WAAAJ,2BAAAA,IAAC,MAAK,EAAA,OAAc,WACnB,UAAAK,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,OAAO,OAAO,wBAAwB;AAAA,QAC/C,WAAWF,uBAAO,QAAA;AAAA,QAEjB,UAAA;AAAA,UAAY,YAAA;AAAA,yCACZG,YAAY,aAAA,EAAA,WAAW,OAAO,OAAO,cAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEvD;AAAA,EAAA;AAIF,SACEN,2BAAAA,IAAA,MAAA,EAAK,OAAc,WAClB,yBACF;AAEF;;"}
+{"version":3,"file":"harmony84.cjs","sources":["../src/components/NavigationPanel/components/DropdownContent/DropdownContent.tsx"],"sourcesContent":["import { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { Fragment } from 'react'\nimport type { DropdownItem } from '../../types/navigation'\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/harmony84.mjs

@@ -1,43 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { TableHeaderCell as TableHeaderCell$1 } from "@lokalise/louis";
-import { flexRender } from "@tanstack/react-table";
-import { clsx } from "./harmony67.mjs";
-import { SortingIcon } from "./harmony85.mjs";
-import styles from "./harmony86.mjs";
-const Cell = ({ children, align, className }) => {
-  return /* @__PURE__ */ jsx(
-    TableHeaderCell$1,
-    {
-      className: clsx(
-        {
-          [styles.centeredCell]: align === "center",
-          [styles.rightAlignedCell]: align === "right"
-        },
-        className
-      ),
-      children
-    }
-  );
-};
-const TableHeaderCell = ({ header, align = "left", className }) => {
-  const renderValue = () => flexRender(header.column.columnDef.header, header.getContext());
-  if (header.column.getCanSort()) {
-    return /* @__PURE__ */ jsx(Cell, { align, className, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: header.column.getToggleSortingHandler(),
-        className: styles.headerSortButton,
-        children: [
-          renderValue(),
-          /* @__PURE__ */ jsx(SortingIcon, { direction: header.column.getIsSorted() })
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(Cell, { align, className, children: renderValue() });
-};
+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 {
-  TableHeaderCell
+  DropdownContent
 };
 //# sourceMappingURL=harmony84.mjs.map

package/dist/harmony84.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony84.mjs","sources":["../src/components/Table/components/TableHeaderCell.tsx"],"sourcesContent":["import { TableHeaderCell as LouisTableHeaderCell } from '@lokalise/louis'\nimport { type Header, flexRender } from '@tanstack/react-table'\nimport cx from 'clsx'\nimport type { PropsWithChildren } from 'react'\nimport { SortingIcon } from './SortingIcon'\nimport styles from './TableHeaderCell.module.css'\n\ntype CellProps = {\n\talign?: 'left' | 'center' | 'right'\n\tclassName?: string\n}\n\ntype TableHeaderProps<T> = CellProps & {\n\theader: Header<T, unknown>\n}\n\nconst Cell = ({ children, align, className }: PropsWithChildren<CellProps>) => {\n\treturn (\n\t\t<LouisTableHeaderCell\n\t\t\tclassName={cx(\n\t\t\t\t{\n\t\t\t\t\t[styles.centeredCell]: align === 'center',\n\t\t\t\t\t[styles.rightAlignedCell]: align === 'right',\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</LouisTableHeaderCell>\n\t)\n}\n\nexport const TableHeaderCell = <T,>({ header, align = 'left', className }: TableHeaderProps<T>) => {\n\tconst renderValue = () => flexRender(header.column.columnDef.header, header.getContext())\n\n\tif (header.column.getCanSort()) {\n\t\treturn (\n\t\t\t<Cell align={align} className={className}>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\tclassName={styles.headerSortButton}\n\t\t\t\t>\n\t\t\t\t\t{renderValue()}\n\t\t\t\t\t<SortingIcon direction={header.column.getIsSorted()} />\n\t\t\t\t</button>\n\t\t\t</Cell>\n\t\t)\n\t}\n\n\treturn (\n\t\t<Cell align={align} className={className}>\n\t\t\t{renderValue()}\n\t\t</Cell>\n\t)\n}\n"],"names":["LouisTableHeaderCell","cx"],"mappings":";;;;;;AAgBA,MAAM,OAAO,CAAC,EAAE,UAAU,OAAO,gBAA8C;AAE7E,SAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACA,WAAWC;AAAAA,QACV;AAAA,UACC,CAAC,OAAO,YAAY,GAAG,UAAU;AAAA,UACjC,CAAC,OAAO,gBAAgB,GAAG,UAAU;AAAA,QACtC;AAAA,QACA;AAAA,MACD;AAAA,MAEC;AAAA,IAAA;AAAA,EACF;AAEF;AAEO,MAAM,kBAAkB,CAAK,EAAE,QAAQ,QAAQ,QAAQ,gBAAqC;AAC5F,QAAA,cAAc,MAAM,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY;AAEpF,MAAA,OAAO,OAAO,cAAc;AAE9B,WAAA,oBAAC,MAAK,EAAA,OAAc,WACnB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,OAAO,OAAO,wBAAwB;AAAA,QAC/C,WAAW,OAAO;AAAA,QAEjB,UAAA;AAAA,UAAY,YAAA;AAAA,8BACZ,aAAY,EAAA,WAAW,OAAO,OAAO,cAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEvD;AAAA,EAAA;AAIF,SACE,oBAAA,MAAA,EAAK,OAAc,WAClB,yBACF;AAEF;"}
+{"version":3,"file":"harmony84.mjs","sources":["../src/components/NavigationPanel/components/DropdownContent/DropdownContent.tsx"],"sourcesContent":["import { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { Fragment } from 'react'\nimport type { DropdownItem } from '../../types/navigation'\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/harmony85.cjs

@@ -2,14 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
-const SortingIcon = ({ direction }) => {
-  if (direction === "asc") {
-    return /* @__PURE__ */ jsxRuntime.jsx(louis.SortAscendingIcon, { ariaLabel: "ascending sorting" });
-  }
-  if (direction === "desc") {
-    return /* @__PURE__ */ jsxRuntime.jsx(louis.SortDescendingIcon, { ariaLabel: "descending sorting" });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(louis.SortIcon, { ariaLabel: "sorting" });
-};
-exports.SortingIcon = SortingIcon;
+const clsx = require("./harmony70.cjs");
+const React = require("react");
+const NavItemContents = require("./harmony101.cjs");
+const styles_module = require("./harmony102.cjs");
+const NavigationTabsItem = React.forwardRef(
+  ({ label, href = "", disabled = false, badge, onClick, novel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { tooltip: "You do not have access to this function", show: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: disabled ? styles_module.default.projectNavigationItemDisabled : styles_module.default.projectNavigationItem,
+      children: onClick || disabled || !href ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          ref,
+          className: clsx.clsx(styles_module.default.withNavLinkStyle, {
+            [styles_module.default.disabled]: disabled
+          }),
+          disabled,
+          onClick,
+          children: /* @__PURE__ */ jsxRuntime.jsx(NavItemContents.NavItemContents, { label, badge, novel })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: styles_module.default.withNavLinkStyle, children: /* @__PURE__ */ jsxRuntime.jsx(NavItemContents.NavItemContents, { label, badge, novel }) })
+    }
+  ) })
+);
+NavigationTabsItem.displayName = "NavigationTabsItem";
+exports.NavigationTabsItem = NavigationTabsItem;
 //# sourceMappingURL=harmony85.cjs.map

package/dist/harmony85.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony85.cjs","sources":["../src/components/Table/components/SortingIcon.tsx"],"sourcesContent":["import { SortAscendingIcon, SortDescendingIcon, SortIcon } from '@lokalise/louis'\nimport type { SortDirection } from '@tanstack/react-table'\n\ntype SortingIconProps = {\n\tdirection: SortDirection | false\n}\n\nexport const SortingIcon = ({ direction }: SortingIconProps) => {\n\tif (direction === 'asc') {\n\t\treturn <SortAscendingIcon ariaLabel=\"ascending sorting\" />\n\t}\n\tif (direction === 'desc') {\n\t\treturn <SortDescendingIcon ariaLabel=\"descending sorting\" />\n\t}\n\treturn <SortIcon ariaLabel=\"sorting\" />\n}\n"],"names":["jsx","SortAscendingIcon","SortDescendingIcon","SortIcon"],"mappings":";;;;AAOO,MAAM,cAAc,CAAC,EAAE,gBAAkC;AAC/D,MAAI,cAAc,OAAO;AACjB,WAAAA,2BAAA,IAACC,MAAkB,mBAAA,EAAA,WAAU,oBAAoB,CAAA;AAAA,EAAA;AAEzD,MAAI,cAAc,QAAQ;AAClB,WAAAD,2BAAA,IAACE,MAAmB,oBAAA,EAAA,WAAU,qBAAqB,CAAA;AAAA,EAAA;AAEpD,SAAAF,2BAAA,IAACG,MAAS,UAAA,EAAA,WAAU,UAAU,CAAA;AACtC;;"}
+{"version":3,"file":"harmony85.cjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.tsx"],"sourcesContent":["import { Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport { NavItemContents } from './NavItemContents'\nimport classes from './styles.module.css'\n\ntype NavigationTabsItemProps = {\n\tlabel: string\n\tbadge?: number\n\tdisabled?: boolean\n\tactive?: boolean\n\tonClick?: () => void\n\thref?: string\n\tnovel?: string\n}\n\nexport const NavigationTabsItem = forwardRef<HTMLButtonElement, NavigationTabsItemProps>(\n\t({ label, href = '', disabled = false, badge, onClick, novel }, ref) => (\n\t\t<Tooltip tooltip=\"You do not have access to this function\" show={disabled}>\n\t\t\t<div\n\t\t\t\tclassName={disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem}\n\t\t\t>\n\t\t\t\t{onClick || disabled || !href ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={clsx(classes.withNavLinkStyle, {\n\t\t\t\t\t\t\t[classes.disabled]: disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<a href={href} className={classes.withNavLinkStyle}>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</a>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Tooltip>\n\t),\n)\n\nNavigationTabsItem.displayName = 'NavigationTabsItem'\n"],"names":["forwardRef","jsx","Tooltip","classes","clsx","NavItemContents"],"mappings":";;;;;;;;AAgBO,MAAM,qBAAqBA,MAAA;AAAA,EACjC,CAAC,EAAE,OAAO,OAAO,IAAI,WAAW,OAAO,OAAO,SAAS,MAAA,GAAS,QAC/DC,2BAAA,IAACC,iBAAQ,SAAQ,2CAA0C,MAAM,UAChE,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW,WAAWE,cAAAA,QAAQ,gCAAgCA,cAAQ,QAAA;AAAA,MAErE,UAAA,WAAW,YAAY,CAAC,OACxBF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,WAAWG,KAAAA,KAAKD,cAAA,QAAQ,kBAAkB;AAAA,YACzC,CAACA,cAAAA,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACpB;AAAA,UACD;AAAA,UACA;AAAA,UAEA,UAACF,2BAAA,IAAAI,gBAAA,iBAAA,EAAgB,OAAc,OAAc,MAAc,CAAA;AAAA,QAAA;AAAA,MAAA,IAG5DJ,2BAAAA,IAAC,KAAE,EAAA,MAAY,WAAWE,cAAA,QAAQ,kBACjC,UAAAF,2BAAA,IAACI,gBAAgB,iBAAA,EAAA,OAAc,OAAc,MAAc,CAAA,EAC5D,CAAA;AAAA,IAAA;AAAA,EAAA,EAGH,CAAA;AAEF;AAEA,mBAAmB,cAAc;;"}