@lokalise/harmony 1.26.1 → 1.26.2

package/dist/harmony56.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony56.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":"harmony56.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/harmony57.cjs

@@ -1,35 +1,64 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const plan = require("./harmony7.cjs");
-const ProfileMenuContext = require("./harmony70.cjs");
-const TeamMenuItem_module = require("./harmony72.cjs");
-const TeamMenuItem = ({ team, onClick, hidePlanLabel }) => {
-  const { currentTeam, planId } = ProfileMenuContext.useProfileMenu();
-  const contextTeam = team || currentTeam;
-  if (!contextTeam) {
-    return null;
-  }
-  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 })
-        ] })
-      ]
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const React = require("react");
+const utils = require("./harmony90.cjs");
+function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1e3, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
+  const skipResize = React.useRef(skipOnMount);
+  const onResizeRef = utils.useCallbackRef(onResize);
+  const [size, setSize] = React.useState({
+    width: void 0,
+    height: void 0
+  });
+  const { refProxy, refElement } = utils.useRefProxy(targetRef);
+  const { box } = observerOptions || {};
+  const resizeCallback = React.useCallback((entries) => {
+    if (!handleWidth && !handleHeight)
+      return;
+    if (skipResize.current) {
+      skipResize.current = false;
+      return;
     }
-  );
-};
-exports.TeamMenuItem = TeamMenuItem;
+    const shouldSetSize = (prevSize, nextSize) => handleWidth && prevSize.width !== nextSize.width || handleHeight && prevSize.height !== nextSize.height;
+    entries.forEach((entry) => {
+      const dimensions = utils.getDimensions(entry, box);
+      setSize((prevSize) => {
+        if (!shouldSetSize(prevSize, dimensions))
+          return prevSize;
+        onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({
+          width: dimensions.width,
+          height: dimensions.height,
+          entry
+        });
+        return dimensions;
+      });
+    });
+  }, [handleWidth, handleHeight, skipResize, box]);
+  const resizeHandler = React.useCallback(utils.patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
+    resizeCallback,
+    refreshMode,
+    refreshRate,
+    refreshOptions
+  ]);
+  React.useEffect(() => {
+    let resizeObserver;
+    if (refElement) {
+      resizeObserver = new window.ResizeObserver(resizeHandler);
+      resizeObserver.observe(refElement, observerOptions);
+    } else if (size.width || size.height) {
+      onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({
+        width: null,
+        height: null,
+        entry: null
+      });
+      setSize({ width: void 0, height: void 0 });
+    }
+    return () => {
+      var _a, _b, _c;
+      (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+      (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
+    };
+  }, [resizeHandler, refElement]);
+  return Object.assign({ ref: refProxy }, size);
+}
+exports.default = useResizeDetector;
 //# sourceMappingURL=harmony57.cjs.map

package/dist/harmony57.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony57.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":"harmony57.cjs","sources":["../node_modules/react-resize-detector/build/useResizeDetector.js"],"sourcesContent":["import { useRef, useState, useCallback, useEffect } from 'react';\nimport { useCallbackRef, useRefProxy, getDimensions, patchResizeCallback } from './utils.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize, } = {}) {\n    // If `skipOnMount` is enabled, skip the first resize event\n    const skipResize = useRef(skipOnMount);\n    // Wrap the `onResize` callback with a ref to avoid re-renders\n    const onResizeRef = useCallbackRef(onResize);\n    const [size, setSize] = useState({\n        width: undefined,\n        height: undefined,\n    });\n    // Create a proxy ref to handle conditional rendering and dynamic ref changes of the target element\n    const { refProxy, refElement } = useRefProxy(targetRef);\n    const { box } = observerOptions || {};\n    const resizeCallback = useCallback((entries) => {\n        if (!handleWidth && !handleHeight)\n            return;\n        if (skipResize.current) {\n            skipResize.current = false;\n            return;\n        }\n        // Only update the size if one of the observed dimensions has changed\n        const shouldSetSize = (prevSize, nextSize) => (handleWidth && prevSize.width !== nextSize.width) || (handleHeight && prevSize.height !== nextSize.height);\n        entries.forEach((entry) => {\n            const dimensions = getDimensions(entry, box);\n            setSize((prevSize) => {\n                if (!shouldSetSize(prevSize, dimensions))\n                    return prevSize;\n                onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({\n                    width: dimensions.width,\n                    height: dimensions.height,\n                    entry,\n                });\n                return dimensions;\n            });\n        });\n    }, [handleWidth, handleHeight, skipResize, box]);\n    // Throttle/Debounce the resize event if refreshMode is configured\n    const resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [\n        resizeCallback,\n        refreshMode,\n        refreshRate,\n        refreshOptions,\n    ]);\n    // Attach ResizeObserver to the element\n    useEffect(() => {\n        let resizeObserver;\n        if (refElement) {\n            resizeObserver = new window.ResizeObserver(resizeHandler);\n            resizeObserver.observe(refElement, observerOptions);\n        }\n        // If refElement is not available, reset the size\n        else if (size.width || size.height) {\n            onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({\n                width: null,\n                height: null,\n                entry: null,\n            });\n            setSize({ width: undefined, height: undefined });\n        }\n        // Disconnect the ResizeObserver when the component is unmounted\n        return () => {\n            var _a, _b, _c;\n            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);\n            (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);\n        };\n    }, [resizeHandler, refElement]);\n    return Object.assign({ ref: refProxy }, size);\n}\n\nexport { useResizeDetector as default };\n//# sourceMappingURL=useResizeDetector.js.map\n"],"names":["useRef","useCallbackRef","useState","useRefProxy","useCallback","getDimensions","patchResizeCallback","useEffect"],"mappings":";;;;AAIA,SAAS,kBAAkB,EAAE,cAAc,OAAO,aAAa,cAAc,KAAM,gBAAgB,cAAc,MAAM,eAAe,MAAM,WAAW,iBAAiB,SAAW,IAAG,IAAI;AAEtL,QAAM,aAAaA,MAAM,OAAC,WAAW;AAErC,QAAM,cAAcC,MAAc,eAAC,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAIC,eAAS;AAAA,IAC7B,OAAO;AAAA,IACP,QAAQ;AAAA,EAChB,CAAK;AAED,QAAM,EAAE,UAAU,eAAeC,MAAAA,YAAY,SAAS;AACtD,QAAM,EAAE,QAAQ,mBAAmB,CAAE;AACrC,QAAM,iBAAiBC,kBAAY,CAAC,YAAY;AAC5C,QAAI,CAAC,eAAe,CAAC;AACjB;AACJ,QAAI,WAAW,SAAS;AACpB,iBAAW,UAAU;AACrB;AAAA,IACZ;AAEQ,UAAM,gBAAgB,CAAC,UAAU,aAAc,eAAe,SAAS,UAAU,SAAS,SAAW,gBAAgB,SAAS,WAAW,SAAS;AAClJ,YAAQ,QAAQ,CAAC,UAAU;AACvB,YAAM,aAAaC,MAAAA,cAAc,OAAO,GAAG;AAC3C,cAAQ,CAAC,aAAa;AAClB,YAAI,CAAC,cAAc,UAAU,UAAU;AACnC,iBAAO;AACX,wBAAgB,QAAQ,gBAAgB,SAAS,SAAS,YAAY;AAAA,UAClE,OAAO,WAAW;AAAA,UAClB,QAAQ,WAAW;AAAA,UACnB;AAAA,QACpB,CAAiB;AACD,eAAO;AAAA,MACvB,CAAa;AAAA,IACb,CAAS;AAAA,EACJ,GAAE,CAAC,aAAa,cAAc,YAAY,GAAG,CAAC;AAE/C,QAAM,gBAAgBD,MAAAA,YAAYE,MAAmB,oBAAC,gBAAgB,aAAa,aAAa,cAAc,GAAG;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACR,CAAK;AAEDC,QAAAA,UAAU,MAAM;AACZ,QAAI;AACJ,QAAI,YAAY;AACZ,uBAAiB,IAAI,OAAO,eAAe,aAAa;AACxD,qBAAe,QAAQ,YAAY,eAAe;AAAA,IAC9D,WAEiB,KAAK,SAAS,KAAK,QAAQ;AAChC,sBAAgB,QAAQ,gBAAgB,SAAS,SAAS,YAAY;AAAA,QAClE,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MACvB,CAAa;AACD,cAAQ,EAAE,OAAO,QAAW,QAAQ,OAAS,CAAE;AAAA,IAC3D;AAEQ,WAAO,MAAM;AACT,UAAI,IAAI,IAAI;AACZ,OAAC,KAAK,mBAAmB,QAAQ,mBAAmB,SAAS,SAAS,eAAe,gBAAgB,QAAQ,OAAO,SAAS,SAAS,GAAG,KAAK,cAAc;AAC5J,OAAC,MAAM,KAAK,eAAe,YAAY,QAAQ,OAAO,SAAS,SAAS,GAAG,KAAK,EAAE;AAAA,IACrF;AAAA,EACT,GAAO,CAAC,eAAe,UAAU,CAAC;AAC9B,SAAO,OAAO,OAAO,EAAE,KAAK,SAAQ,GAAI,IAAI;AAChD;;","x_google_ignoreList":[0]}

package/dist/harmony57.mjs

@@ -1,35 +1,64 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { MenuItem, UserIcon } from "@lokalise/louis";
-import { isFreePlan, isTrialPlan } from "./harmony7.mjs";
-import { useProfileMenu } from "./harmony70.mjs";
-import styles from "./harmony72.mjs";
-const TeamMenuItem = ({ team, onClick, hidePlanLabel }) => {
-  const { currentTeam, planId } = useProfileMenu();
-  const contextTeam = team || currentTeam;
-  if (!contextTeam) {
-    return null;
-  }
-  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 })
-        ] })
-      ]
+import { useRef, useState, useCallback, useEffect } from "react";
+import { useCallbackRef, useRefProxy, getDimensions, patchResizeCallback } from "./harmony90.mjs";
+function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1e3, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
+  const skipResize = useRef(skipOnMount);
+  const onResizeRef = useCallbackRef(onResize);
+  const [size, setSize] = useState({
+    width: void 0,
+    height: void 0
+  });
+  const { refProxy, refElement } = useRefProxy(targetRef);
+  const { box } = observerOptions || {};
+  const resizeCallback = useCallback((entries) => {
+    if (!handleWidth && !handleHeight)
+      return;
+    if (skipResize.current) {
+      skipResize.current = false;
+      return;
     }
-  );
-};
+    const shouldSetSize = (prevSize, nextSize) => handleWidth && prevSize.width !== nextSize.width || handleHeight && prevSize.height !== nextSize.height;
+    entries.forEach((entry) => {
+      const dimensions = getDimensions(entry, box);
+      setSize((prevSize) => {
+        if (!shouldSetSize(prevSize, dimensions))
+          return prevSize;
+        onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({
+          width: dimensions.width,
+          height: dimensions.height,
+          entry
+        });
+        return dimensions;
+      });
+    });
+  }, [handleWidth, handleHeight, skipResize, box]);
+  const resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
+    resizeCallback,
+    refreshMode,
+    refreshRate,
+    refreshOptions
+  ]);
+  useEffect(() => {
+    let resizeObserver;
+    if (refElement) {
+      resizeObserver = new window.ResizeObserver(resizeHandler);
+      resizeObserver.observe(refElement, observerOptions);
+    } else if (size.width || size.height) {
+      onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({
+        width: null,
+        height: null,
+        entry: null
+      });
+      setSize({ width: void 0, height: void 0 });
+    }
+    return () => {
+      var _a, _b, _c;
+      (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+      (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
+    };
+  }, [resizeHandler, refElement]);
+  return Object.assign({ ref: refProxy }, size);
+}
 export {
-  TeamMenuItem
+  useResizeDetector as default
 };
 //# sourceMappingURL=harmony57.mjs.map

package/dist/harmony57.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony57.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":"harmony57.mjs","sources":["../node_modules/react-resize-detector/build/useResizeDetector.js"],"sourcesContent":["import { useRef, useState, useCallback, useEffect } from 'react';\nimport { useCallbackRef, useRefProxy, getDimensions, patchResizeCallback } from './utils.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize, } = {}) {\n    // If `skipOnMount` is enabled, skip the first resize event\n    const skipResize = useRef(skipOnMount);\n    // Wrap the `onResize` callback with a ref to avoid re-renders\n    const onResizeRef = useCallbackRef(onResize);\n    const [size, setSize] = useState({\n        width: undefined,\n        height: undefined,\n    });\n    // Create a proxy ref to handle conditional rendering and dynamic ref changes of the target element\n    const { refProxy, refElement } = useRefProxy(targetRef);\n    const { box } = observerOptions || {};\n    const resizeCallback = useCallback((entries) => {\n        if (!handleWidth && !handleHeight)\n            return;\n        if (skipResize.current) {\n            skipResize.current = false;\n            return;\n        }\n        // Only update the size if one of the observed dimensions has changed\n        const shouldSetSize = (prevSize, nextSize) => (handleWidth && prevSize.width !== nextSize.width) || (handleHeight && prevSize.height !== nextSize.height);\n        entries.forEach((entry) => {\n            const dimensions = getDimensions(entry, box);\n            setSize((prevSize) => {\n                if (!shouldSetSize(prevSize, dimensions))\n                    return prevSize;\n                onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({\n                    width: dimensions.width,\n                    height: dimensions.height,\n                    entry,\n                });\n                return dimensions;\n            });\n        });\n    }, [handleWidth, handleHeight, skipResize, box]);\n    // Throttle/Debounce the resize event if refreshMode is configured\n    const resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [\n        resizeCallback,\n        refreshMode,\n        refreshRate,\n        refreshOptions,\n    ]);\n    // Attach ResizeObserver to the element\n    useEffect(() => {\n        let resizeObserver;\n        if (refElement) {\n            resizeObserver = new window.ResizeObserver(resizeHandler);\n            resizeObserver.observe(refElement, observerOptions);\n        }\n        // If refElement is not available, reset the size\n        else if (size.width || size.height) {\n            onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({\n                width: null,\n                height: null,\n                entry: null,\n            });\n            setSize({ width: undefined, height: undefined });\n        }\n        // Disconnect the ResizeObserver when the component is unmounted\n        return () => {\n            var _a, _b, _c;\n            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);\n            (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);\n        };\n    }, [resizeHandler, refElement]);\n    return Object.assign({ ref: refProxy }, size);\n}\n\nexport { useResizeDetector as default };\n//# sourceMappingURL=useResizeDetector.js.map\n"],"names":[],"mappings":";;AAIA,SAAS,kBAAkB,EAAE,cAAc,OAAO,aAAa,cAAc,KAAM,gBAAgB,cAAc,MAAM,eAAe,MAAM,WAAW,iBAAiB,SAAW,IAAG,IAAI;AAEtL,QAAM,aAAa,OAAO,WAAW;AAErC,QAAM,cAAc,eAAe,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS;AAAA,IAC7B,OAAO;AAAA,IACP,QAAQ;AAAA,EAChB,CAAK;AAED,QAAM,EAAE,UAAU,eAAe,YAAY,SAAS;AACtD,QAAM,EAAE,QAAQ,mBAAmB,CAAE;AACrC,QAAM,iBAAiB,YAAY,CAAC,YAAY;AAC5C,QAAI,CAAC,eAAe,CAAC;AACjB;AACJ,QAAI,WAAW,SAAS;AACpB,iBAAW,UAAU;AACrB;AAAA,IACZ;AAEQ,UAAM,gBAAgB,CAAC,UAAU,aAAc,eAAe,SAAS,UAAU,SAAS,SAAW,gBAAgB,SAAS,WAAW,SAAS;AAClJ,YAAQ,QAAQ,CAAC,UAAU;AACvB,YAAM,aAAa,cAAc,OAAO,GAAG;AAC3C,cAAQ,CAAC,aAAa;AAClB,YAAI,CAAC,cAAc,UAAU,UAAU;AACnC,iBAAO;AACX,wBAAgB,QAAQ,gBAAgB,SAAS,SAAS,YAAY;AAAA,UAClE,OAAO,WAAW;AAAA,UAClB,QAAQ,WAAW;AAAA,UACnB;AAAA,QACpB,CAAiB;AACD,eAAO;AAAA,MACvB,CAAa;AAAA,IACb,CAAS;AAAA,EACJ,GAAE,CAAC,aAAa,cAAc,YAAY,GAAG,CAAC;AAE/C,QAAM,gBAAgB,YAAY,oBAAoB,gBAAgB,aAAa,aAAa,cAAc,GAAG;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACR,CAAK;AAED,YAAU,MAAM;AACZ,QAAI;AACJ,QAAI,YAAY;AACZ,uBAAiB,IAAI,OAAO,eAAe,aAAa;AACxD,qBAAe,QAAQ,YAAY,eAAe;AAAA,IAC9D,WAEiB,KAAK,SAAS,KAAK,QAAQ;AAChC,sBAAgB,QAAQ,gBAAgB,SAAS,SAAS,YAAY;AAAA,QAClE,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MACvB,CAAa;AACD,cAAQ,EAAE,OAAO,QAAW,QAAQ,OAAS,CAAE;AAAA,IAC3D;AAEQ,WAAO,MAAM;AACT,UAAI,IAAI,IAAI;AACZ,OAAC,KAAK,mBAAmB,QAAQ,mBAAmB,SAAS,SAAS,eAAe,gBAAgB,QAAQ,OAAO,SAAS,SAAS,GAAG,KAAK,cAAc;AAC5J,OAAC,MAAM,KAAK,eAAe,YAAY,QAAQ,OAAO,SAAS,SAAS,GAAG,KAAK,EAAE;AAAA,IACrF;AAAA,EACT,GAAO,CAAC,eAAe,UAAU,CAAC;AAC9B,SAAO,OAAO,OAAO,EAAE,KAAK,SAAQ,GAAI,IAAI;AAChD;","x_google_ignoreList":[0]}

package/dist/harmony58.cjs

@@ -1,22 +1,9 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ProfileMenuContext = require("./harmony70.cjs");
-const TeamMenuItem = require("./harmony57.cjs");
-const TeamSwitch_module = require("./harmony73.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))
-    }
-  );
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const sidebarContainer = "_sidebarContainer_bmdti_1";
+const styles = {
+  sidebarContainer
 };
-exports.TeamSwitch = TeamSwitch;
+exports.default = styles;
+exports.sidebarContainer = sidebarContainer;
 //# sourceMappingURL=harmony58.cjs.map

package/dist/harmony58.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony58.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":"harmony58.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/harmony58.mjs

@@ -1,22 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { useProfileMenu } from "./harmony70.mjs";
-import { TeamMenuItem } from "./harmony57.mjs";
-import styles from "./harmony73.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))
-    }
-  );
+const sidebarContainer = "_sidebarContainer_bmdti_1";
+const styles = {
+  sidebarContainer
 };
 export {
-  TeamSwitch
+  styles as default,
+  sidebarContainer
 };
 //# sourceMappingURL=harmony58.mjs.map

package/dist/harmony58.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony58.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":"harmony58.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/harmony59.cjs

@@ -1,34 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const plan = require("./harmony7.cjs");
-const UpgradeIcon = require("./harmony74.cjs");
-const ProfileMenuContext = require("./harmony70.cjs");
-const UpgradeMenuItem_module = require("./harmony75.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 Avatar_module = require("./harmony74.cjs");
+const Avatar = ({
+  src,
+  href = "/",
+  ariaLabel = "Lokalise App Home",
+  alt = "Lokalise Logo"
+}) => /* @__PURE__ */ jsxRuntime.jsx("a", { className: Avatar_module.default.logoLink, href, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt }) });
+exports.Avatar = Avatar;
 //# sourceMappingURL=harmony59.cjs.map

package/dist/harmony59.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony59.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":"harmony59.cjs","sources":["../src/components/Sidebar/Widgets/Avatar/Avatar.tsx"],"sourcesContent":["import styles from './Avatar.module.css'\n\ntype AvatarProps = {\n\t/** URL of the avatar/logo image */\n\tsrc: string\n\t/** Link destination when avatar is clicked. Defaults to '/' */\n\thref?: string\n\t/** Accessibility label for the avatar link. Defaults to 'Home' */\n\tariaLabel?: string\n\t/** Alt text for the avatar image. Defaults to 'Lokalise' */\n\talt?: string\n}\n\n/**\n * Display company main avatar / logo in the top section of the Sidebar.\n * Used as the main branding element and home navigation link.\n */\nexport const Avatar = ({\n\tsrc,\n\thref = '/',\n\tariaLabel = 'Lokalise App Home',\n\talt = 'Lokalise Logo',\n}: AvatarProps) => (\n\t<a className={styles.logoLink} href={href} aria-label={ariaLabel}>\n\t\t<img src={src} alt={alt} />\n\t</a>\n)\n"],"names":["jsx","styles"],"mappings":";;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AACP,MACEA,2BAAAA,IAAA,KAAA,EAAE,WAAWC,cAAA,QAAO,UAAU,MAAY,cAAY,WACtD,UAACD,2BAAAA,IAAA,OAAA,EAAI,KAAU,IAAA,CAAU,EAC1B,CAAA;;"}

package/dist/harmony59.mjs

@@ -1,34 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { MenuItem } from "@lokalise/louis";
-import { isFreePlan } from "./harmony7.mjs";
-import { UpgradeIcon } from "./harmony74.mjs";
-import { useProfileMenu } from "./harmony70.mjs";
-import styles from "./harmony75.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 { jsx } from "react/jsx-runtime";
+import styles from "./harmony74.mjs";
+const Avatar = ({
+  src,
+  href = "/",
+  ariaLabel = "Lokalise App Home",
+  alt = "Lokalise Logo"
+}) => /* @__PURE__ */ jsx("a", { className: styles.logoLink, href, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("img", { src, alt }) });
 export {
-  UpgradeMenuItem
+  Avatar
 };
 //# sourceMappingURL=harmony59.mjs.map

package/dist/harmony59.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony59.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":"harmony59.mjs","sources":["../src/components/Sidebar/Widgets/Avatar/Avatar.tsx"],"sourcesContent":["import styles from './Avatar.module.css'\n\ntype AvatarProps = {\n\t/** URL of the avatar/logo image */\n\tsrc: string\n\t/** Link destination when avatar is clicked. Defaults to '/' */\n\thref?: string\n\t/** Accessibility label for the avatar link. Defaults to 'Home' */\n\tariaLabel?: string\n\t/** Alt text for the avatar image. Defaults to 'Lokalise' */\n\talt?: string\n}\n\n/**\n * Display company main avatar / logo in the top section of the Sidebar.\n * Used as the main branding element and home navigation link.\n */\nexport const Avatar = ({\n\tsrc,\n\thref = '/',\n\tariaLabel = 'Lokalise App Home',\n\talt = 'Lokalise Logo',\n}: AvatarProps) => (\n\t<a className={styles.logoLink} href={href} aria-label={ariaLabel}>\n\t\t<img src={src} alt={alt} />\n\t</a>\n)\n"],"names":[],"mappings":";;AAiBO,MAAM,SAAS,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AACP,MACE,oBAAA,KAAA,EAAE,WAAW,OAAO,UAAU,MAAY,cAAY,WACtD,UAAC,oBAAA,OAAA,EAAI,KAAU,IAAA,CAAU,EAC1B,CAAA;"}

package/dist/harmony6.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
-const styles_module = require("./harmony49.cjs");
-const DropdownContent = require("./harmony62.cjs");
-const NavigationTabsItem = require("./harmony63.cjs");
-const helpers = require("./harmony64.cjs");
+const styles_module = require("./harmony56.cjs");
+const DropdownContent = require("./harmony69.cjs");
+const NavigationTabsItem = require("./harmony70.cjs");
+const helpers = require("./harmony71.cjs");
 const NavigationTabs = ({ navigation, activeItem }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Project", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles_module.default.navigationTabList, "aria-orientation": "horizontal", children: navigation.filter(helpers.isNavigationItemVisible).map((item) => {
   var _a, _b, _c;
   if (item.dropdown) {

package/dist/harmony6.mjs

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Menu, MenuList } from "@lokalise/louis";
-import classes from "./harmony49.mjs";
-import { DropdownContent } from "./harmony62.mjs";
-import { NavigationTabsItem } from "./harmony63.mjs";
-import { isNavigationItemVisible } from "./harmony64.mjs";
+import classes from "./harmony56.mjs";
+import { DropdownContent } from "./harmony69.mjs";
+import { NavigationTabsItem } from "./harmony70.mjs";
+import { isNavigationItemVisible } from "./harmony71.mjs";
 const NavigationTabs = ({ navigation, activeItem }) => /* @__PURE__ */ jsx("nav", { "aria-label": "Project", children: /* @__PURE__ */ jsx("ul", { className: classes.navigationTabList, "aria-orientation": "horizontal", children: navigation.filter(isNavigationItemVisible).map((item) => {
   var _a, _b, _c;
   if (item.dropdown) {

package/dist/harmony60.cjs

@@ -1,62 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const floatingUi_core = require("./harmony85.cjs");
 const louis = require("@lokalise/louis");
-const useEffectOnce = require("./harmony11.cjs");
-const clsx = require("./harmony48.cjs");
-const React = require("react");
-const Tasks_module = require("./harmony86.cjs");
-const TasksContext = require("./harmony87.cjs");
-const TasksPopover = require("./harmony88.cjs");
-const TasksProvider = require("./harmony89.cjs");
-const taskEvents = require("./harmony90.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 clsx = require("./harmony55.cjs");
+const IconLink_module = require("./harmony75.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=harmony60.cjs.map