@lokalise/harmony 1.37.0 → 1.37.1-exp-epic2x.1

package/dist/harmony78.cjs

@@ -1,35 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const ProfileMenuContext = require("./harmony97.cjs");
-const ProfileSettingsMenuItem_module = require("./harmony98.cjs");
-const ProfileSettingsMenuItem = ({
-  href,
-  onClick,
-  userEmail,
-  hideBottomDivider
-}) => {
-  const { isEndOfTrialActive, isTeamSuspended } = ProfileMenuContext.useProfileMenu();
-  if (isEndOfTrialActive || isTeamSuspended) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      louis.MenuItem,
-      {
-        href,
-        onClick: () => {
-          onClick == null ? void 0 : onClick();
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-col ${ProfileSettingsMenuItem_module.default.container}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Profile Settings" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ProfileSettingsMenuItem_module.default.profileEmail, children: userEmail })
-        ] })
-      }
-    ),
-    !hideBottomDivider && /* @__PURE__ */ jsxRuntime.jsx(louis.MenuDivider, {})
-  ] });
-};
-exports.ProfileSettingsMenuItem = ProfileSettingsMenuItem;
+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;
 //# sourceMappingURL=harmony78.cjs.map

package/dist/harmony78.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony78.cjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/ProfileSettingsMenuItem/ProfileSettingsMenuItem.tsx"],"sourcesContent":["import { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport styles from './ProfileSettingsMenuItem.module.css'\n\ntype ProfileSettingsMenuItemProps = {\n\t/** URL to the profile settings page */\n\thref: string\n\t/** User's email address to display below \"Profile Settings\" */\n\tuserEmail: string\n\t/** Optional callback function for tracking or additional actions */\n\tonClick?: () => void\n\t/** Whether to hide the divider that appears below this menu item */\n\thideBottomDivider?: boolean\n}\n\n/**\n * A menu item component that provides access to profile settings.\n *\n * Features:\n * - Displays \"Profile Settings\" with the user's email address below\n * - Conditionally renders based on team status\n * - Includes an optional divider below the item\n * - Will not render if:\n *   - Team is suspended\n *   - Team's trial period has ended\n *\n * @example\n * ```tsx\n * <ProfileSettingsMenuItem\n *   href=\"/settings/profile\"\n *   userEmail=\"user@example.com\"\n *   onClick={() => trackSettingsClick()}\n * />\n *\n * // Without bottom divider\n * <ProfileSettingsMenuItem\n *   href=\"/settings/profile\"\n *   userEmail=\"user@example.com\"\n *   hideBottomDivider\n * />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context for team status information.\n */\nexport const ProfileSettingsMenuItem = ({\n\thref,\n\tonClick,\n\tuserEmail,\n\thideBottomDivider,\n}: ProfileSettingsMenuItemProps) => {\n\tconst { isEndOfTrialActive, isTeamSuspended } = useProfileMenu()\n\n\tif (isEndOfTrialActive || isTeamSuspended) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<MenuItem\n\t\t\t\thref={href}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.()\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`flex-col ${styles.container}`}>\n\t\t\t\t\t<span>Profile Settings</span>\n\t\t\t\t\t<span className={styles.profileEmail}>{userEmail}</span>\n\t\t\t\t</div>\n\t\t\t</MenuItem>\n\n\t\t\t{!hideBottomDivider && <MenuDivider />}\n\t\t</>\n\t)\n}\n"],"names":["useProfileMenu","jsxs","Fragment","jsx","MenuItem","styles","MenuDivider"],"mappings":";;;;;;AA6CO,MAAM,0BAA0B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAoC;AACnC,QAAM,EAAE,oBAAoB,gBAAgB,IAAIA,kCAAe;AAE/D,MAAI,sBAAsB,iBAAiB;AACnC,WAAA;AAAA,EAAA;AAGR,SAEEC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,MAAA;AAAA,MAAA;AAAA,QACA;AAAA,QACA,SAAS,MAAM;AACJ;AAAA,QACX;AAAA,QAEA,0CAAC,OAAI,EAAA,WAAW,YAAYC,uCAAO,SAAS,IAC3C,UAAA;AAAA,UAAAF,2BAAAA,IAAC,UAAK,UAAgB,mBAAA,CAAA;AAAA,UACrBA,2BAAA,IAAA,QAAA,EAAK,WAAWE,+BAAA,QAAO,cAAe,UAAU,UAAA,CAAA;AAAA,QAAA,EAClD,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,IAEC,CAAC,qBAAqBF,+BAACG,MAAAA,aAAY,CAAA,CAAA;AAAA,EAAA,GACrC;AAEF;;"}
+{"version":3,"file":"harmony78.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;;"}

package/dist/harmony78.mjs

@@ -1,35 +1,6 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { MenuItem, MenuDivider } from "@lokalise/louis";
-import { useProfileMenu } from "./harmony97.mjs";
-import styles from "./harmony98.mjs";
-const ProfileSettingsMenuItem = ({
-  href,
-  onClick,
-  userEmail,
-  hideBottomDivider
-}) => {
-  const { isEndOfTrialActive, isTeamSuspended } = useProfileMenu();
-  if (isEndOfTrialActive || isTeamSuspended) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        href,
-        onClick: () => {
-          onClick == null ? void 0 : onClick();
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: `flex-col ${styles.container}`, children: [
-          /* @__PURE__ */ jsx("span", { children: "Profile Settings" }),
-          /* @__PURE__ */ jsx("span", { className: styles.profileEmail, children: userEmail })
-        ] })
-      }
-    ),
-    !hideBottomDivider && /* @__PURE__ */ jsx(MenuDivider, {})
-  ] });
-};
+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));
 export {
-  ProfileSettingsMenuItem
+  isNavigationItemVisible
 };
 //# sourceMappingURL=harmony78.mjs.map

package/dist/harmony78.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony78.mjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/ProfileSettingsMenuItem/ProfileSettingsMenuItem.tsx"],"sourcesContent":["import { MenuDivider, MenuItem } from '@lokalise/louis'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport styles from './ProfileSettingsMenuItem.module.css'\n\ntype ProfileSettingsMenuItemProps = {\n\t/** URL to the profile settings page */\n\thref: string\n\t/** User's email address to display below \"Profile Settings\" */\n\tuserEmail: string\n\t/** Optional callback function for tracking or additional actions */\n\tonClick?: () => void\n\t/** Whether to hide the divider that appears below this menu item */\n\thideBottomDivider?: boolean\n}\n\n/**\n * A menu item component that provides access to profile settings.\n *\n * Features:\n * - Displays \"Profile Settings\" with the user's email address below\n * - Conditionally renders based on team status\n * - Includes an optional divider below the item\n * - Will not render if:\n *   - Team is suspended\n *   - Team's trial period has ended\n *\n * @example\n * ```tsx\n * <ProfileSettingsMenuItem\n *   href=\"/settings/profile\"\n *   userEmail=\"user@example.com\"\n *   onClick={() => trackSettingsClick()}\n * />\n *\n * // Without bottom divider\n * <ProfileSettingsMenuItem\n *   href=\"/settings/profile\"\n *   userEmail=\"user@example.com\"\n *   hideBottomDivider\n * />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context for team status information.\n */\nexport const ProfileSettingsMenuItem = ({\n\thref,\n\tonClick,\n\tuserEmail,\n\thideBottomDivider,\n}: ProfileSettingsMenuItemProps) => {\n\tconst { isEndOfTrialActive, isTeamSuspended } = useProfileMenu()\n\n\tif (isEndOfTrialActive || isTeamSuspended) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<MenuItem\n\t\t\t\thref={href}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.()\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`flex-col ${styles.container}`}>\n\t\t\t\t\t<span>Profile Settings</span>\n\t\t\t\t\t<span className={styles.profileEmail}>{userEmail}</span>\n\t\t\t\t</div>\n\t\t\t</MenuItem>\n\n\t\t\t{!hideBottomDivider && <MenuDivider />}\n\t\t</>\n\t)\n}\n"],"names":[],"mappings":";;;;AA6CO,MAAM,0BAA0B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAoC;AACnC,QAAM,EAAE,oBAAoB,gBAAgB,IAAI,eAAe;AAE/D,MAAI,sBAAsB,iBAAiB;AACnC,WAAA;AAAA,EAAA;AAGR,SAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,SAAS,MAAM;AACJ;AAAA,QACX;AAAA,QAEA,+BAAC,OAAI,EAAA,WAAW,YAAY,OAAO,SAAS,IAC3C,UAAA;AAAA,UAAA,oBAAC,UAAK,UAAgB,mBAAA,CAAA;AAAA,UACrB,oBAAA,QAAA,EAAK,WAAW,OAAO,cAAe,UAAU,UAAA,CAAA;AAAA,QAAA,EAClD,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,IAEC,CAAC,qBAAqB,oBAAC,aAAY,CAAA,CAAA;AAAA,EAAA,GACrC;AAEF;"}
+{"version":3,"file":"harmony78.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;"}

package/dist/harmony79.cjs

@@ -2,34 +2,35 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
-const plan = require("./harmony8.cjs");
-const ProfileMenuContext = require("./harmony97.cjs");
-const TeamMenuItem_module = require("./harmony99.cjs");
-const TeamMenuItem = ({ team, onClick, hidePlanLabel }) => {
-  const { currentTeam, planId } = ProfileMenuContext.useProfileMenu();
-  const contextTeam = team || currentTeam;
-  if (!contextTeam) {
-    return null;
+const reactTable = require("@tanstack/react-table");
+const clsx = require("./harmony70.cjs");
+const SortingIcon = require("./harmony91.cjs");
+const TableHeaderCell_module = require("./harmony92.cjs");
+const TableHeaderCell = ({
+  header,
+  align = "left",
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  louis.TableHeaderCell,
+  {
+    className: clsx.clsx(className, {
+      [TableHeaderCell_module.default.centeredCell]: align === "center",
+      [TableHeaderCell_module.default.rightAlignedCell]: align === "right"
+    }),
+    ...rest,
+    children: [
+      reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+      header.column.getCanSort() && /* @__PURE__ */ jsxRuntime.jsx(
+        SortColumnButton,
+        {
+          direction: header.column.getIsSorted(),
+          onSortToggle: header.column.getToggleSortingHandler()
+        }
+      )
+    ]
   }
-  const planLabel = plan.isFreePlan(planId) ? "Free" : plan.isTrialPlan(planId) ? "Trial" : void 0;
-  const WrapperNode = onClick ? louis.MenuItem : "div";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    WrapperNode,
-    {
-      className: TeamMenuItem_module.default.wrapper,
-      ...onClick && { onClick: () => onClick(contextTeam) },
-      children: [
-        contextTeam.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: TeamMenuItem_module.default.profileImage, src: contextTeam.logoUrl, alt: "Team logo" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${TeamMenuItem_module.default.defaultProfileImage}`, children: /* @__PURE__ */ jsxRuntime.jsx(louis.UserIcon, { size: "25px" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TeamMenuItem_module.default.teamDetails, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TeamMenuItem_module.default.planWrapper, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { title: contextTeam.name, className: TeamMenuItem_module.default.teamName, children: contextTeam.name }),
-            planLabel && !hidePlanLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TeamMenuItem_module.default.teamName, children: planLabel })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: TeamMenuItem_module.default.membership, children: contextTeam.role })
-        ] })
-      ]
-    }
-  );
-};
-exports.TeamMenuItem = TeamMenuItem;
+);
+const SortColumnButton = ({ direction, onSortToggle }) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onSortToggle, className: TableHeaderCell_module.default.headerSortButton, children: /* @__PURE__ */ jsxRuntime.jsx(SortingIcon.SortingIcon, { direction }) });
+exports.TableHeaderCell = TableHeaderCell;
 //# sourceMappingURL=harmony79.cjs.map

package/dist/harmony79.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony79.cjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/TeamMenuItem/TeamMenuItem.tsx"],"sourcesContent":["import { MenuItem, UserIcon } from '@lokalise/louis'\nimport { isFreePlan, isTrialPlan } from '../../../../../utils/billing/plan/plan'\nimport type { SidebarTeam } from '../../../types'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport styles from './TeamMenuItem.module.css'\n\ntype TeamMenuItemProps = {\n\t/** Team to display. If not provided, uses the current team from context */\n\tteam?: SidebarTeam\n\t/** Callback for when the team item is clicked. If provided, renders as a clickable MenuItem */\n\tonClick?: (team: SidebarTeam) => void\n\t/** Whether to hide the plan label (Free/Trial). Useful when displaying multiple teams */\n\thidePlanLabel?: boolean\n}\n\n/**\n * A component that displays team information in a menu item format.\n * Renders team logo (or default user icon), team name, role, and plan label.\n *\n * The component can be used in two modes:\n * 1. As a static display of the current team (when no onClick handler is provided)\n * 2. As a clickable menu item for team switching (when onClick handler is provided)\n *\n * @example\n * ```tsx\n * // Static current team display\n * <TeamMenuItem />\n *\n * // Clickable team item for switching\n * <TeamMenuItem\n *   team={someTeam}\n *   onClick={(team) => handleTeamSwitch(team)}\n *   hidePlanLabel\n * />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context for current team\n * and plan information.\n */\nexport const TeamMenuItem = ({ team, onClick, hidePlanLabel }: TeamMenuItemProps) => {\n\tconst { currentTeam, planId } = useProfileMenu()\n\n\tconst contextTeam = team || currentTeam\n\n\tif (!contextTeam) {\n\t\treturn null\n\t}\n\n\tconst planLabel = isFreePlan(planId) ? 'Free' : isTrialPlan(planId) ? 'Trial' : undefined\n\n\tconst WrapperNode = onClick ? MenuItem : 'div'\n\n\treturn (\n\t\t<WrapperNode\n\t\t\tclassName={styles.wrapper}\n\t\t\t{...(onClick && { onClick: () => onClick(contextTeam) })}\n\t\t>\n\t\t\t{contextTeam.logoUrl ? (\n\t\t\t\t<img className={styles.profileImage} src={contextTeam.logoUrl} alt=\"Team logo\" />\n\t\t\t) : (\n\t\t\t\t<span className={`${styles.defaultProfileImage}`}>\n\t\t\t\t\t<UserIcon size=\"25px\" />\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<div className={styles.teamDetails}>\n\t\t\t\t<div className={styles.planWrapper}>\n\t\t\t\t\t<span title={contextTeam.name} className={styles.teamName}>\n\t\t\t\t\t\t{contextTeam.name}\n\t\t\t\t\t</span>\n\t\t\t\t\t{planLabel && !hidePlanLabel && <span className={styles.teamName}>{planLabel}</span>}\n\t\t\t\t</div>\n\t\t\t\t<span className={styles.membership}>{contextTeam.role}</span>\n\t\t\t</div>\n\t\t</WrapperNode>\n\t)\n}\n"],"names":["useProfileMenu","isFreePlan","isTrialPlan","MenuItem","jsxs","styles","jsx","UserIcon"],"mappings":";;;;;;;AAwCO,MAAM,eAAe,CAAC,EAAE,MAAM,SAAS,oBAAuC;AACpF,QAAM,EAAE,aAAa,OAAO,IAAIA,kCAAe;AAE/C,QAAM,cAAc,QAAQ;AAE5B,MAAI,CAAC,aAAa;AACV,WAAA;AAAA,EAAA;AAGF,QAAA,YAAYC,gBAAW,MAAM,IAAI,SAASC,iBAAY,MAAM,IAAI,UAAU;AAE1E,QAAA,cAAc,UAAUC,MAAAA,WAAW;AAGxC,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC,oBAAO,QAAA;AAAA,MACjB,GAAI,WAAW,EAAE,SAAS,MAAM,QAAQ,WAAW,EAAE;AAAA,MAErD,UAAA;AAAA,QAAY,YAAA,yCACX,OAAI,EAAA,WAAWA,oBAAAA,QAAO,cAAc,KAAK,YAAY,SAAS,KAAI,YAAA,CAAY,IAE9EC,+BAAA,QAAA,EAAK,WAAW,GAAGD,oBAAO,QAAA,mBAAmB,IAC7C,UAACC,2BAAAA,IAAAC,MAAAA,UAAA,EAAS,MAAK,OAAA,CAAO,EACvB,CAAA;AAAA,QAEAH,2BAAA,KAAA,OAAA,EAAI,WAAWC,oBAAAA,QAAO,aACtB,UAAA;AAAA,UAACD,2BAAA,KAAA,OAAA,EAAI,WAAWC,oBAAAA,QAAO,aACtB,UAAA;AAAA,YAACC,2BAAAA,IAAA,QAAA,EAAK,OAAO,YAAY,MAAM,WAAWD,oBAAAA,QAAO,UAC/C,sBAAY,KACd,CAAA;AAAA,YACC,aAAa,CAAC,iBAAiBC,2BAAAA,IAAC,UAAK,WAAWD,4BAAO,UAAW,UAAU,UAAA,CAAA;AAAA,UAAA,GAC9E;AAAA,yCACC,QAAK,EAAA,WAAWA,oBAAAA,QAAO,YAAa,sBAAY,KAAK,CAAA;AAAA,QAAA,EACvD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACD;AAEF;;"}
+{"version":3,"file":"harmony79.cjs","sources":["../src/components/Table/components/TableHeaderCell.tsx"],"sourcesContent":["import {\n\tTableHeaderCell as LouisTableHeaderCell,\n\ttype TableHeaderCellProps as LouisTableHeaderCellProps,\n} from '@lokalise/louis'\nimport { type Header, type SortDirection, flexRender } from '@tanstack/react-table'\nimport cx from 'clsx'\nimport { SortingIcon } from './SortingIcon'\nimport styles from './TableHeaderCell.module.css'\n\ntype TableHeaderProps<T> = LouisTableHeaderCellProps & {\n\theader: Header<T, unknown>\n}\n\nexport const TableHeaderCell = <T,>({\n\theader,\n\talign = 'left',\n\tclassName,\n\t...rest\n}: TableHeaderProps<T>) => (\n\t<LouisTableHeaderCell\n\t\tclassName={cx(className, {\n\t\t\t[styles.centeredCell]: align === 'center',\n\t\t\t[styles.rightAlignedCell]: align === 'right',\n\t\t})}\n\t\t{...rest}\n\t>\n\t\t{flexRender(header.column.columnDef.header, header.getContext())}\n\t\t{header.column.getCanSort() && (\n\t\t\t<SortColumnButton\n\t\t\t\tdirection={header.column.getIsSorted()}\n\t\t\t\tonSortToggle={header.column.getToggleSortingHandler()}\n\t\t\t/>\n\t\t)}\n\t</LouisTableHeaderCell>\n)\n\ntype SortColumnButtonProps = {\n\tdirection: SortDirection | false\n\tonSortToggle?: (event: unknown) => void\n}\n\nconst SortColumnButton = ({ direction, onSortToggle }: SortColumnButtonProps) => (\n\t<button type=\"button\" onClick={onSortToggle} className={styles.headerSortButton}>\n\t\t<SortingIcon direction={direction} />\n\t</button>\n)\n"],"names":["jsxs","LouisTableHeaderCell","cx","styles","flexRender","jsx","SortingIcon"],"mappings":";;;;;;;;AAaO,MAAM,kBAAkB,CAAK;AAAA,EACnC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACJ,MACCA,2BAAA;AAAA,EAACC,MAAA;AAAA,EAAA;AAAA,IACA,WAAWC,UAAG,WAAW;AAAA,MACxB,CAACC,uBAAA,QAAO,YAAY,GAAG,UAAU;AAAA,MACjC,CAACA,uBAAA,QAAO,gBAAgB,GAAG,UAAU;AAAA,IAAA,CACrC;AAAA,IACA,GAAG;AAAA,IAEH,UAAA;AAAA,MAAAC,WAAA,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY;AAAA,MAC9D,OAAO,OAAO,WAAA,KACdC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAW,OAAO,OAAO,YAAY;AAAA,UACrC,cAAc,OAAO,OAAO,wBAAwB;AAAA,QAAA;AAAA,MAAA;AAAA,IACrD;AAAA,EAAA;AAEF;AAQD,MAAM,mBAAmB,CAAC,EAAE,WAAW,aAAa,qCAClD,UAAO,EAAA,MAAK,UAAS,SAAS,cAAc,WAAWF,+BAAO,kBAC9D,UAACE,2BAAA,IAAAC,yBAAA,EAAY,UAAsB,CAAA,GACpC;;"}

package/dist/harmony79.mjs

@@ -1,35 +1,36 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { MenuItem, UserIcon } from "@lokalise/louis";
-import { isFreePlan, isTrialPlan } from "./harmony8.mjs";
-import { useProfileMenu } from "./harmony97.mjs";
-import styles from "./harmony99.mjs";
-const TeamMenuItem = ({ team, onClick, hidePlanLabel }) => {
-  const { currentTeam, planId } = useProfileMenu();
-  const contextTeam = team || currentTeam;
-  if (!contextTeam) {
-    return null;
+import { TableHeaderCell as TableHeaderCell$1 } from "@lokalise/louis";
+import { flexRender } from "@tanstack/react-table";
+import { clsx } from "./harmony70.mjs";
+import { SortingIcon } from "./harmony91.mjs";
+import styles from "./harmony92.mjs";
+const TableHeaderCell = ({
+  header,
+  align = "left",
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  TableHeaderCell$1,
+  {
+    className: clsx(className, {
+      [styles.centeredCell]: align === "center",
+      [styles.rightAlignedCell]: align === "right"
+    }),
+    ...rest,
+    children: [
+      flexRender(header.column.columnDef.header, header.getContext()),
+      header.column.getCanSort() && /* @__PURE__ */ jsx(
+        SortColumnButton,
+        {
+          direction: header.column.getIsSorted(),
+          onSortToggle: header.column.getToggleSortingHandler()
+        }
+      )
+    ]
   }
-  const planLabel = isFreePlan(planId) ? "Free" : isTrialPlan(planId) ? "Trial" : void 0;
-  const WrapperNode = onClick ? MenuItem : "div";
-  return /* @__PURE__ */ jsxs(
-    WrapperNode,
-    {
-      className: styles.wrapper,
-      ...onClick && { onClick: () => onClick(contextTeam) },
-      children: [
-        contextTeam.logoUrl ? /* @__PURE__ */ jsx("img", { className: styles.profileImage, src: contextTeam.logoUrl, alt: "Team logo" }) : /* @__PURE__ */ jsx("span", { className: `${styles.defaultProfileImage}`, children: /* @__PURE__ */ jsx(UserIcon, { size: "25px" }) }),
-        /* @__PURE__ */ jsxs("div", { className: styles.teamDetails, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.planWrapper, children: [
-            /* @__PURE__ */ jsx("span", { title: contextTeam.name, className: styles.teamName, children: contextTeam.name }),
-            planLabel && !hidePlanLabel && /* @__PURE__ */ jsx("span", { className: styles.teamName, children: planLabel })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: styles.membership, children: contextTeam.role })
-        ] })
-      ]
-    }
-  );
-};
+);
+const SortColumnButton = ({ direction, onSortToggle }) => /* @__PURE__ */ jsx("button", { type: "button", onClick: onSortToggle, className: styles.headerSortButton, children: /* @__PURE__ */ jsx(SortingIcon, { direction }) });
 export {
-  TeamMenuItem
+  TableHeaderCell
 };
 //# sourceMappingURL=harmony79.mjs.map

package/dist/harmony79.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony79.mjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/TeamMenuItem/TeamMenuItem.tsx"],"sourcesContent":["import { MenuItem, UserIcon } from '@lokalise/louis'\nimport { isFreePlan, isTrialPlan } from '../../../../../utils/billing/plan/plan'\nimport type { SidebarTeam } from '../../../types'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport styles from './TeamMenuItem.module.css'\n\ntype TeamMenuItemProps = {\n\t/** Team to display. If not provided, uses the current team from context */\n\tteam?: SidebarTeam\n\t/** Callback for when the team item is clicked. If provided, renders as a clickable MenuItem */\n\tonClick?: (team: SidebarTeam) => void\n\t/** Whether to hide the plan label (Free/Trial). Useful when displaying multiple teams */\n\thidePlanLabel?: boolean\n}\n\n/**\n * A component that displays team information in a menu item format.\n * Renders team logo (or default user icon), team name, role, and plan label.\n *\n * The component can be used in two modes:\n * 1. As a static display of the current team (when no onClick handler is provided)\n * 2. As a clickable menu item for team switching (when onClick handler is provided)\n *\n * @example\n * ```tsx\n * // Static current team display\n * <TeamMenuItem />\n *\n * // Clickable team item for switching\n * <TeamMenuItem\n *   team={someTeam}\n *   onClick={(team) => handleTeamSwitch(team)}\n *   hidePlanLabel\n * />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context for current team\n * and plan information.\n */\nexport const TeamMenuItem = ({ team, onClick, hidePlanLabel }: TeamMenuItemProps) => {\n\tconst { currentTeam, planId } = useProfileMenu()\n\n\tconst contextTeam = team || currentTeam\n\n\tif (!contextTeam) {\n\t\treturn null\n\t}\n\n\tconst planLabel = isFreePlan(planId) ? 'Free' : isTrialPlan(planId) ? 'Trial' : undefined\n\n\tconst WrapperNode = onClick ? MenuItem : 'div'\n\n\treturn (\n\t\t<WrapperNode\n\t\t\tclassName={styles.wrapper}\n\t\t\t{...(onClick && { onClick: () => onClick(contextTeam) })}\n\t\t>\n\t\t\t{contextTeam.logoUrl ? (\n\t\t\t\t<img className={styles.profileImage} src={contextTeam.logoUrl} alt=\"Team logo\" />\n\t\t\t) : (\n\t\t\t\t<span className={`${styles.defaultProfileImage}`}>\n\t\t\t\t\t<UserIcon size=\"25px\" />\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<div className={styles.teamDetails}>\n\t\t\t\t<div className={styles.planWrapper}>\n\t\t\t\t\t<span title={contextTeam.name} className={styles.teamName}>\n\t\t\t\t\t\t{contextTeam.name}\n\t\t\t\t\t</span>\n\t\t\t\t\t{planLabel && !hidePlanLabel && <span className={styles.teamName}>{planLabel}</span>}\n\t\t\t\t</div>\n\t\t\t\t<span className={styles.membership}>{contextTeam.role}</span>\n\t\t\t</div>\n\t\t</WrapperNode>\n\t)\n}\n"],"names":[],"mappings":";;;;;AAwCO,MAAM,eAAe,CAAC,EAAE,MAAM,SAAS,oBAAuC;AACpF,QAAM,EAAE,aAAa,OAAO,IAAI,eAAe;AAE/C,QAAM,cAAc,QAAQ;AAE5B,MAAI,CAAC,aAAa;AACV,WAAA;AAAA,EAAA;AAGF,QAAA,YAAY,WAAW,MAAM,IAAI,SAAS,YAAY,MAAM,IAAI,UAAU;AAE1E,QAAA,cAAc,UAAU,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW,OAAO;AAAA,MACjB,GAAI,WAAW,EAAE,SAAS,MAAM,QAAQ,WAAW,EAAE;AAAA,MAErD,UAAA;AAAA,QAAY,YAAA,8BACX,OAAI,EAAA,WAAW,OAAO,cAAc,KAAK,YAAY,SAAS,KAAI,YAAA,CAAY,IAE9E,oBAAA,QAAA,EAAK,WAAW,GAAG,OAAO,mBAAmB,IAC7C,UAAC,oBAAA,UAAA,EAAS,MAAK,OAAA,CAAO,EACvB,CAAA;AAAA,QAEA,qBAAA,OAAA,EAAI,WAAW,OAAO,aACtB,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAW,OAAO,aACtB,UAAA;AAAA,YAAC,oBAAA,QAAA,EAAK,OAAO,YAAY,MAAM,WAAW,OAAO,UAC/C,sBAAY,KACd,CAAA;AAAA,YACC,aAAa,CAAC,iBAAiB,oBAAC,UAAK,WAAW,OAAO,UAAW,UAAU,UAAA,CAAA;AAAA,UAAA,GAC9E;AAAA,8BACC,QAAK,EAAA,WAAW,OAAO,YAAa,sBAAY,KAAK,CAAA;AAAA,QAAA,EACvD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACD;AAEF;"}
+{"version":3,"file":"harmony79.mjs","sources":["../src/components/Table/components/TableHeaderCell.tsx"],"sourcesContent":["import {\n\tTableHeaderCell as LouisTableHeaderCell,\n\ttype TableHeaderCellProps as LouisTableHeaderCellProps,\n} from '@lokalise/louis'\nimport { type Header, type SortDirection, flexRender } from '@tanstack/react-table'\nimport cx from 'clsx'\nimport { SortingIcon } from './SortingIcon'\nimport styles from './TableHeaderCell.module.css'\n\ntype TableHeaderProps<T> = LouisTableHeaderCellProps & {\n\theader: Header<T, unknown>\n}\n\nexport const TableHeaderCell = <T,>({\n\theader,\n\talign = 'left',\n\tclassName,\n\t...rest\n}: TableHeaderProps<T>) => (\n\t<LouisTableHeaderCell\n\t\tclassName={cx(className, {\n\t\t\t[styles.centeredCell]: align === 'center',\n\t\t\t[styles.rightAlignedCell]: align === 'right',\n\t\t})}\n\t\t{...rest}\n\t>\n\t\t{flexRender(header.column.columnDef.header, header.getContext())}\n\t\t{header.column.getCanSort() && (\n\t\t\t<SortColumnButton\n\t\t\t\tdirection={header.column.getIsSorted()}\n\t\t\t\tonSortToggle={header.column.getToggleSortingHandler()}\n\t\t\t/>\n\t\t)}\n\t</LouisTableHeaderCell>\n)\n\ntype SortColumnButtonProps = {\n\tdirection: SortDirection | false\n\tonSortToggle?: (event: unknown) => void\n}\n\nconst SortColumnButton = ({ direction, onSortToggle }: SortColumnButtonProps) => (\n\t<button type=\"button\" onClick={onSortToggle} className={styles.headerSortButton}>\n\t\t<SortingIcon direction={direction} />\n\t</button>\n)\n"],"names":["LouisTableHeaderCell","cx"],"mappings":";;;;;;AAaO,MAAM,kBAAkB,CAAK;AAAA,EACnC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACJ,MACC;AAAA,EAACA;AAAAA,EAAA;AAAA,IACA,WAAWC,KAAG,WAAW;AAAA,MACxB,CAAC,OAAO,YAAY,GAAG,UAAU;AAAA,MACjC,CAAC,OAAO,gBAAgB,GAAG,UAAU;AAAA,IAAA,CACrC;AAAA,IACA,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY;AAAA,MAC9D,OAAO,OAAO,WAAA,KACd;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAW,OAAO,OAAO,YAAY;AAAA,UACrC,cAAc,OAAO,OAAO,wBAAwB;AAAA,QAAA;AAAA,MAAA;AAAA,IACrD;AAAA,EAAA;AAEF;AAQD,MAAM,mBAAmB,CAAC,EAAE,WAAW,aAAa,0BAClD,UAAO,EAAA,MAAK,UAAS,SAAS,cAAc,WAAW,OAAO,kBAC9D,UAAC,oBAAA,aAAA,EAAY,UAAsB,CAAA,GACpC;"}

package/dist/harmony80.cjs

@@ -1,22 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ProfileMenuContext = require("./harmony97.cjs");
-const TeamMenuItem = require("./harmony79.cjs");
-const TeamSwitch_module = require("./harmony100.cjs");
-const TeamSwitch = ({ onSwitchTeam }) => {
-  const { otherTeams } = ProfileMenuContext.useProfileMenu();
-  if (otherTeams.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-testid": "sidebar-team-switch",
-      className: `flex-col items-stretch ${TeamSwitch_module.default.teamsContainer}`,
-      children: otherTeams.map((team) => /* @__PURE__ */ jsxRuntime.jsx(TeamMenuItem.TeamMenuItem, { team, onClick: onSwitchTeam, hidePlanLabel: true }, team.id))
+const React = require("react");
+const useSidebarDataLoader = (callback) => {
+  const [result, setResult] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(false);
+  const loadData = async (args) => {
+    const result2 = await callback(args);
+    if (result2) {
+      setResult(result2);
+      setLoading(false);
+      setError(false);
+      return result2;
     }
-  );
+    setError(true);
+    setLoading(false);
+    return null;
+  };
+  return {
+    data: {
+      result,
+      loading,
+      error
+    },
+    loadData
+  };
 };
-exports.TeamSwitch = TeamSwitch;
+exports.useSidebarDataLoader = useSidebarDataLoader;
 //# sourceMappingURL=harmony80.cjs.map

package/dist/harmony80.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony80.cjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/TeamSwitch/TeamSwitch.tsx"],"sourcesContent":["import type { SidebarTeam } from '../../../types'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport { TeamMenuItem } from '../TeamMenuItem/TeamMenuItem'\nimport styles from './TeamSwitch.module.css'\n\ntype TeamSwitchProps = {\n\t/** Callback function triggered when a user selects a different team */\n\tonSwitchTeam: (team: SidebarTeam) => void\n}\n\n/**\n * A component that displays a list of available teams for switching.\n * It automatically excludes the current team from the list and renders\n * nothing if there are no other teams available.\n *\n * Uses the ProfileMenu context to access the list of other teams and\n * renders each team as a TeamMenuItem with click functionality.\n *\n * @example\n * ```tsx\n * <TeamSwitch\n *   onSwitchTeam={(team) => {\n *     console.log(`Switching to team: ${team.name}`);\n *     // Handle team switch logic\n *   }}\n * />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context.\n */\nexport const TeamSwitch = ({ onSwitchTeam }: TeamSwitchProps) => {\n\tconst { otherTeams } = useProfileMenu()\n\n\tif (otherTeams.length === 0) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"sidebar-team-switch\"\n\t\t\tclassName={`flex-col items-stretch ${styles.teamsContainer}`}\n\t\t>\n\t\t\t{otherTeams.map((team) => (\n\t\t\t\t<TeamMenuItem team={team} key={team.id} onClick={onSwitchTeam} hidePlanLabel />\n\t\t\t))}\n\t\t</div>\n\t)\n}\n"],"names":["useProfileMenu","jsx","styles","TeamMenuItem"],"mappings":";;;;;;AA+BO,MAAM,aAAa,CAAC,EAAE,mBAAoC;AAC1D,QAAA,EAAE,WAAW,IAAIA,kCAAe;AAElC,MAAA,WAAW,WAAW,GAAG;AACrB,WAAA;AAAA,EAAA;AAIP,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,WAAW,0BAA0BC,kBAAA,QAAO,cAAc;AAAA,MAEzD,UAAW,WAAA,IAAI,CAAC,SACfD,2BAAAA,IAAAE,aAAAA,cAAA,EAAa,MAA0B,SAAS,cAAc,eAAa,KAA7C,GAAA,KAAK,EAAyC,CAC7E;AAAA,IAAA;AAAA,EACF;AAEF;;"}
+{"version":3,"file":"harmony80.cjs","sources":["../src/components/Sidebar/hooks/useSidebarDataLoader.ts"],"sourcesContent":["import type { SidebarDataBase } from '@components/Sidebar/types'\nimport { useState } from 'react'\n\nexport const useSidebarDataLoader = <T, A = void>(\n\tcallback: (args: A) => Promise<T | null>,\n): {\n\tdata: SidebarDataBase<T>\n\tloadData: (args: A) => Promise<T | null>\n} => {\n\tconst [result, setResult] = useState<T | null>(null)\n\n\tconst [loading, setLoading] = useState(true)\n\n\tconst [error, setError] = useState(false)\n\n\tconst loadData = async (args: A): Promise<T | null> => {\n\t\tconst result = await callback(args)\n\n\t\tif (result) {\n\t\t\tsetResult(result)\n\t\t\tsetLoading(false)\n\t\t\tsetError(false)\n\n\t\t\treturn result\n\t\t}\n\n\t\tsetError(true)\n\t\tsetLoading(false)\n\t\treturn null\n\t}\n\n\treturn {\n\t\tdata: {\n\t\t\tresult,\n\t\t\tloading,\n\t\t\terror,\n\t\t},\n\t\tloadData,\n\t}\n}\n"],"names":["useState","result"],"mappings":";;;AAGa,MAAA,uBAAuB,CACnC,aAII;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAmB,IAAI;AAEnD,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,IAAI;AAE3C,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,KAAK;AAElC,QAAA,WAAW,OAAO,SAA+B;AAChDC,UAAAA,UAAS,MAAM,SAAS,IAAI;AAElC,QAAIA,SAAQ;AACX,gBAAUA,OAAM;AAChB,iBAAW,KAAK;AAChB,eAAS,KAAK;AAEPA,aAAAA;AAAAA,IAAA;AAGR,aAAS,IAAI;AACb,eAAW,KAAK;AACT,WAAA;AAAA,EACR;AAEO,SAAA;AAAA,IACN,MAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD;AACD;;"}

package/dist/harmony80.mjs

@@ -1,22 +1,30 @@
-import { jsx } from "react/jsx-runtime";
-import { useProfileMenu } from "./harmony97.mjs";
-import { TeamMenuItem } from "./harmony79.mjs";
-import styles from "./harmony100.mjs";
-const TeamSwitch = ({ onSwitchTeam }) => {
-  const { otherTeams } = useProfileMenu();
-  if (otherTeams.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-testid": "sidebar-team-switch",
-      className: `flex-col items-stretch ${styles.teamsContainer}`,
-      children: otherTeams.map((team) => /* @__PURE__ */ jsx(TeamMenuItem, { team, onClick: onSwitchTeam, hidePlanLabel: true }, team.id))
+import { useState } from "react";
+const useSidebarDataLoader = (callback) => {
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const loadData = async (args) => {
+    const result2 = await callback(args);
+    if (result2) {
+      setResult(result2);
+      setLoading(false);
+      setError(false);
+      return result2;
     }
-  );
+    setError(true);
+    setLoading(false);
+    return null;
+  };
+  return {
+    data: {
+      result,
+      loading,
+      error
+    },
+    loadData
+  };
 };
 export {
-  TeamSwitch
+  useSidebarDataLoader
 };
 //# sourceMappingURL=harmony80.mjs.map

package/dist/harmony80.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony80.mjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/TeamSwitch/TeamSwitch.tsx"],"sourcesContent":["import type { SidebarTeam } from '../../../types'\nimport { useProfileMenu } from '../ProfileMenuContext'\nimport { TeamMenuItem } from '../TeamMenuItem/TeamMenuItem'\nimport styles from './TeamSwitch.module.css'\n\ntype TeamSwitchProps = {\n\t/** Callback function triggered when a user selects a different team */\n\tonSwitchTeam: (team: SidebarTeam) => void\n}\n\n/**\n * A component that displays a list of available teams for switching.\n * It automatically excludes the current team from the list and renders\n * nothing if there are no other teams available.\n *\n * Uses the ProfileMenu context to access the list of other teams and\n * renders each team as a TeamMenuItem with click functionality.\n *\n * @example\n * ```tsx\n * <TeamSwitch\n *   onSwitchTeam={(team) => {\n *     console.log(`Switching to team: ${team.name}`);\n *     // Handle team switch logic\n *   }}\n * />\n * ```\n *\n * @note This component must be used within a ProfileMenu component\n * as it requires access to the ProfileMenu context.\n */\nexport const TeamSwitch = ({ onSwitchTeam }: TeamSwitchProps) => {\n\tconst { otherTeams } = useProfileMenu()\n\n\tif (otherTeams.length === 0) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"sidebar-team-switch\"\n\t\t\tclassName={`flex-col items-stretch ${styles.teamsContainer}`}\n\t\t>\n\t\t\t{otherTeams.map((team) => (\n\t\t\t\t<TeamMenuItem team={team} key={team.id} onClick={onSwitchTeam} hidePlanLabel />\n\t\t\t))}\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";;;;AA+BO,MAAM,aAAa,CAAC,EAAE,mBAAoC;AAC1D,QAAA,EAAE,WAAW,IAAI,eAAe;AAElC,MAAA,WAAW,WAAW,GAAG;AACrB,WAAA;AAAA,EAAA;AAIP,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,WAAW,0BAA0B,OAAO,cAAc;AAAA,MAEzD,UAAW,WAAA,IAAI,CAAC,SACf,oBAAA,cAAA,EAAa,MAA0B,SAAS,cAAc,eAAa,KAA7C,GAAA,KAAK,EAAyC,CAC7E;AAAA,IAAA;AAAA,EACF;AAEF;"}
+{"version":3,"file":"harmony80.mjs","sources":["../src/components/Sidebar/hooks/useSidebarDataLoader.ts"],"sourcesContent":["import type { SidebarDataBase } from '@components/Sidebar/types'\nimport { useState } from 'react'\n\nexport const useSidebarDataLoader = <T, A = void>(\n\tcallback: (args: A) => Promise<T | null>,\n): {\n\tdata: SidebarDataBase<T>\n\tloadData: (args: A) => Promise<T | null>\n} => {\n\tconst [result, setResult] = useState<T | null>(null)\n\n\tconst [loading, setLoading] = useState(true)\n\n\tconst [error, setError] = useState(false)\n\n\tconst loadData = async (args: A): Promise<T | null> => {\n\t\tconst result = await callback(args)\n\n\t\tif (result) {\n\t\t\tsetResult(result)\n\t\t\tsetLoading(false)\n\t\t\tsetError(false)\n\n\t\t\treturn result\n\t\t}\n\n\t\tsetError(true)\n\t\tsetLoading(false)\n\t\treturn null\n\t}\n\n\treturn {\n\t\tdata: {\n\t\t\tresult,\n\t\t\tloading,\n\t\t\terror,\n\t\t},\n\t\tloadData,\n\t}\n}\n"],"names":["result"],"mappings":";AAGa,MAAA,uBAAuB,CACnC,aAII;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,IAAI;AAEnD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAElC,QAAA,WAAW,OAAO,SAA+B;AAChDA,UAAAA,UAAS,MAAM,SAAS,IAAI;AAElC,QAAIA,SAAQ;AACX,gBAAUA,OAAM;AAChB,iBAAW,KAAK;AAChB,eAAS,KAAK;AAEPA,aAAAA;AAAAA,IAAA;AAGR,aAAS,IAAI;AACb,eAAW,KAAK;AACT,WAAA;AAAA,EACR;AAEO,SAAA;AAAA,IACN,MAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD;AACD;"}

package/dist/harmony81.cjs

@@ -1,34 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const plan = require("./harmony8.cjs");
-const UpgradeIcon = require("./harmony101.cjs");
-const ProfileMenuContext = require("./harmony97.cjs");
-const UpgradeMenuItem_module = require("./harmony102.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;
+const React = require("react");
+const SidebarContext = React.createContext({});
+exports.SidebarContext = SidebarContext;
 //# sourceMappingURL=harmony81.cjs.map

package/dist/harmony81.cjs.map

@@ -1 +1 @@
-{"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;;"}
+{"version":3,"file":"harmony81.cjs","sources":["../src/components/Sidebar/SidebarContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { SidebarContextProps } from './types'\n\nexport const SidebarContext = createContext({} as SidebarContextProps)\n\nexport const useSidebar = () => {\n\tconst context = useContext(SidebarContext)\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t'You are using useSidebar hook outside its context. Please review your code implementation',\n\t\t)\n\t}\n\n\treturn context\n}\n"],"names":["createContext"],"mappings":";;;AAGa,MAAA,iBAAiBA,MAAc,cAAA,CAAyB,CAAA;;"}

package/dist/harmony81.mjs

@@ -1,34 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { MenuItem } from "@lokalise/louis";
-import { isFreePlan } from "./harmony8.mjs";
-import { UpgradeIcon } from "./harmony101.mjs";
-import { useProfileMenu } from "./harmony97.mjs";
-import styles from "./harmony102.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" })
-        ] })
-      ]
-    }
-  );
-};
+import { createContext } from "react";
+const SidebarContext = createContext({});
 export {
-  UpgradeMenuItem
+  SidebarContext
 };
 //# sourceMappingURL=harmony81.mjs.map

package/dist/harmony81.mjs.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"harmony81.mjs","sources":["../src/components/Sidebar/SidebarContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { SidebarContextProps } from './types'\n\nexport const SidebarContext = createContext({} as SidebarContextProps)\n\nexport const useSidebar = () => {\n\tconst context = useContext(SidebarContext)\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t'You are using useSidebar hook outside its context. Please review your code implementation',\n\t\t)\n\t}\n\n\treturn context\n}\n"],"names":[],"mappings":";AAGa,MAAA,iBAAiB,cAAc,CAAyB,CAAA;"}

package/dist/harmony82.cjs

@@ -1,62 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const floatingUi_core = require("./harmony108.cjs");
 const louis = require("@lokalise/louis");
-const useEffectOnce = require("./harmony12.cjs");
 const clsx = require("./harmony70.cjs");
-const React = require("react");
-const Tasks_module = require("./harmony109.cjs");
-const TasksContext = require("./harmony110.cjs");
-const TasksPopover = require("./harmony111.cjs");
-const TasksProvider = require("./harmony112.cjs");
-const taskEvents = require("./harmony113.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,
+const IconLink_module = require("./harmony96.cjs");
+const IconLink = ({ label, to, icon: Icon }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { placement: "right", tooltip: label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    louis.Link,
     {
-      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",
-          "data-testid": "sidebar-tasks-widget-button",
-          "aria-label": "Tasks",
-          className: clsx.clsx(Tasks_module.default.navItem, {
-            [Tasks_module.default.activeNavItem]: visible
-          }),
-          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 })
-          ]
-        }
-      )
+      "aria-label": label,
+      className: clsx.clsx(IconLink_module.default.link, {
+        [IconLink_module.default.active]: window.location.pathname.startsWith(to)
+      }),
+      href: to,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "25px" })
     }
   ) });
-});
-exports.Tasks = Tasks;
+};
+exports.IconLink = IconLink;
 //# sourceMappingURL=harmony82.cjs.map