@lokalise/harmony 1.26.1 → 1.27.0

package/dist/harmony63.cjs

@@ -1,32 +1,9 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const clsx = require("./harmony48.cjs");
-const React = require("react");
-const NavItemContents = require("./harmony76.cjs");
-const styles_module = require("./harmony77.cjs");
-const NavigationTabsItem = React.forwardRef(
-  ({ label, href = "", disabled = false, badge, onClick, novel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { tooltip: "You do not have access to this function", show: disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: disabled ? styles_module.default.projectNavigationItemDisabled : styles_module.default.projectNavigationItem,
-      children: onClick || disabled || !href ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          ref,
-          className: clsx.clsx(styles_module.default.withNavLinkStyle, {
-            [styles_module.default.disabled]: disabled
-          }),
-          disabled,
-          onClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(NavItemContents.NavItemContents, { label, badge, novel })
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: styles_module.default.withNavLinkStyle, children: /* @__PURE__ */ jsxRuntime.jsx(NavItemContents.NavItemContents, { label, badge, novel }) })
-    }
-  ) })
-);
-NavigationTabsItem.displayName = "NavigationTabsItem";
-exports.NavigationTabsItem = NavigationTabsItem;
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const sidebarContainer = "_sidebarContainer_bmdti_1";
+const styles = {
+  sidebarContainer
+};
+exports.default = styles;
+exports.sidebarContainer = sidebarContainer;
 //# sourceMappingURL=harmony63.cjs.map

package/dist/harmony63.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony63.cjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.tsx"],"sourcesContent":["import { Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport { NavItemContents } from './NavItemContents'\nimport classes from './styles.module.css'\n\ntype NavigationTabsItemProps = {\n\tlabel: string\n\tbadge?: number\n\tdisabled?: boolean\n\tactive?: boolean\n\tonClick?: () => void\n\thref?: string\n\tnovel?: string\n}\n\nexport const NavigationTabsItem = forwardRef<HTMLButtonElement, NavigationTabsItemProps>(\n\t({ label, href = '', disabled = false, badge, onClick, novel }, ref) => (\n\t\t<Tooltip tooltip=\"You do not have access to this function\" show={disabled}>\n\t\t\t<div\n\t\t\t\tclassName={disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem}\n\t\t\t>\n\t\t\t\t{onClick || disabled || !href ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={clsx(classes.withNavLinkStyle, {\n\t\t\t\t\t\t\t[classes.disabled]: disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<a href={href} className={classes.withNavLinkStyle}>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</a>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Tooltip>\n\t),\n)\n\nNavigationTabsItem.displayName = 'NavigationTabsItem'\n"],"names":["forwardRef","jsx","Tooltip","classes","clsx","NavItemContents"],"mappings":";;;;;;;;AAgBO,MAAM,qBAAqBA,MAAA;AAAA,EACjC,CAAC,EAAE,OAAO,OAAO,IAAI,WAAW,OAAO,OAAO,SAAS,MAAA,GAAS,QAC/DC,2BAAA,IAACC,iBAAQ,SAAQ,2CAA0C,MAAM,UAChE,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW,WAAWE,cAAAA,QAAQ,gCAAgCA,cAAQ,QAAA;AAAA,MAErE,UAAA,WAAW,YAAY,CAAC,OACxBF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,WAAWG,KAAAA,KAAKD,cAAA,QAAQ,kBAAkB;AAAA,YACzC,CAACA,cAAAA,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACpB;AAAA,UACD;AAAA,UACA;AAAA,UAEA,UAACF,2BAAA,IAAAI,gBAAA,iBAAA,EAAgB,OAAc,OAAc,MAAc,CAAA;AAAA,QAAA;AAAA,MAAA,IAG5DJ,2BAAAA,IAAC,KAAE,EAAA,MAAY,WAAWE,cAAA,QAAQ,kBACjC,UAAAF,2BAAA,IAACI,gBAAgB,iBAAA,EAAA,OAAc,OAAc,MAAc,CAAA,EAC5D,CAAA;AAAA,IAAA;AAAA,EAAA,EAGH,CAAA;AAEF;AAEA,mBAAmB,cAAc;;"}
+{"version":3,"file":"harmony63.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/harmony63.mjs

@@ -1,32 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { Tooltip } from "@lokalise/louis";
-import { clsx } from "./harmony48.mjs";
-import { forwardRef } from "react";
-import { NavItemContents } from "./harmony76.mjs";
-import classes from "./harmony77.mjs";
-const NavigationTabsItem = forwardRef(
-  ({ label, href = "", disabled = false, badge, onClick, novel }, ref) => /* @__PURE__ */ jsx(Tooltip, { tooltip: "You do not have access to this function", show: disabled, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem,
-      children: onClick || disabled || !href ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          ref,
-          className: clsx(classes.withNavLinkStyle, {
-            [classes.disabled]: disabled
-          }),
-          disabled,
-          onClick,
-          children: /* @__PURE__ */ jsx(NavItemContents, { label, badge, novel })
-        }
-      ) : /* @__PURE__ */ jsx("a", { href, className: classes.withNavLinkStyle, children: /* @__PURE__ */ jsx(NavItemContents, { label, badge, novel }) })
-    }
-  ) })
-);
-NavigationTabsItem.displayName = "NavigationTabsItem";
+const sidebarContainer = "_sidebarContainer_bmdti_1";
+const styles = {
+  sidebarContainer
+};
 export {
-  NavigationTabsItem
+  styles as default,
+  sidebarContainer
 };
 //# sourceMappingURL=harmony63.mjs.map

package/dist/harmony63.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony63.mjs","sources":["../src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.tsx"],"sourcesContent":["import { Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport { NavItemContents } from './NavItemContents'\nimport classes from './styles.module.css'\n\ntype NavigationTabsItemProps = {\n\tlabel: string\n\tbadge?: number\n\tdisabled?: boolean\n\tactive?: boolean\n\tonClick?: () => void\n\thref?: string\n\tnovel?: string\n}\n\nexport const NavigationTabsItem = forwardRef<HTMLButtonElement, NavigationTabsItemProps>(\n\t({ label, href = '', disabled = false, badge, onClick, novel }, ref) => (\n\t\t<Tooltip tooltip=\"You do not have access to this function\" show={disabled}>\n\t\t\t<div\n\t\t\t\tclassName={disabled ? classes.projectNavigationItemDisabled : classes.projectNavigationItem}\n\t\t\t>\n\t\t\t\t{onClick || disabled || !href ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={clsx(classes.withNavLinkStyle, {\n\t\t\t\t\t\t\t[classes.disabled]: disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<a href={href} className={classes.withNavLinkStyle}>\n\t\t\t\t\t\t<NavItemContents label={label} badge={badge} novel={novel} />\n\t\t\t\t\t</a>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Tooltip>\n\t),\n)\n\nNavigationTabsItem.displayName = 'NavigationTabsItem'\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,qBAAqB;AAAA,EACjC,CAAC,EAAE,OAAO,OAAO,IAAI,WAAW,OAAO,OAAO,SAAS,MAAA,GAAS,QAC/D,oBAAC,WAAQ,SAAQ,2CAA0C,MAAM,UAChE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW,WAAW,QAAQ,gCAAgC,QAAQ;AAAA,MAErE,UAAA,WAAW,YAAY,CAAC,OACxB;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,WAAW,KAAK,QAAQ,kBAAkB;AAAA,YACzC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACpB;AAAA,UACD;AAAA,UACA;AAAA,UAEA,UAAC,oBAAA,iBAAA,EAAgB,OAAc,OAAc,MAAc,CAAA;AAAA,QAAA;AAAA,MAAA,IAG5D,oBAAC,KAAE,EAAA,MAAY,WAAW,QAAQ,kBACjC,UAAA,oBAAC,iBAAgB,EAAA,OAAc,OAAc,MAAc,CAAA,EAC5D,CAAA;AAAA,IAAA;AAAA,EAAA,EAGH,CAAA;AAEF;AAEA,mBAAmB,cAAc;"}
+{"version":3,"file":"harmony63.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/harmony64.cjs

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const hasVisibleItems = (dropdownSections) => (dropdownSections == null ? void 0 : dropdownSections.some((section) => section.some((item) => item.visible))) ?? false;
-const isNavigationItemVisible = (item) => item.visible && (!item.dropdown || hasVisibleItems(item.dropdown));
-exports.isNavigationItemVisible = isNavigationItemVisible;
+const jsxRuntime = require("react/jsx-runtime");
+const Avatar_module = require("./harmony77.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=harmony64.cjs.map

package/dist/harmony64.cjs.map

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

@@ -1,6 +1,12 @@
-const hasVisibleItems = (dropdownSections) => (dropdownSections == null ? void 0 : dropdownSections.some((section) => section.some((item) => item.visible))) ?? false;
-const isNavigationItemVisible = (item) => item.visible && (!item.dropdown || hasVisibleItems(item.dropdown));
+import { jsx } from "react/jsx-runtime";
+import styles from "./harmony77.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 {
-  isNavigationItemVisible
+  Avatar
 };
 //# sourceMappingURL=harmony64.mjs.map

package/dist/harmony64.mjs.map

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

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

package/dist/harmony65.cjs.map

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

package/dist/harmony65.mjs

@@ -1,9 +1,21 @@
-const logoLink = "_logoLink_1baxb_1";
-const styles = {
-  logoLink
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, Link } from "@lokalise/louis";
+import { clsx } from "./harmony60.mjs";
+import styles from "./harmony78.mjs";
+const IconLink = ({ label, to, icon: Icon }) => {
+  return /* @__PURE__ */ jsx(Tooltip, { placement: "right", tooltip: label, children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      "aria-label": label,
+      className: clsx(styles.link, {
+        [styles.active]: window.location.pathname.startsWith(to)
+      }),
+      href: to,
+      children: /* @__PURE__ */ jsx(Icon, { size: "25px" })
+    }
+  ) });
 };
 export {
-  styles as default,
-  logoLink
+  IconLink
 };
 //# sourceMappingURL=harmony65.mjs.map

package/dist/harmony65.mjs.map

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

package/dist/harmony66.cjs

@@ -1,12 +1,26 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const link = "_link_18vhx_1";
-const active = "_active_18vhx_18";
-const styles = {
-  link,
-  active
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const louis = require("@lokalise/louis");
+const clsx = require("./harmony60.cjs");
+const Menu_module = require("./harmony79.cjs");
+const Menu = ({ children, icon: Icon }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    louis.Menu,
+    {
+      menuButton: ({ opened }) => /* @__PURE__ */ jsxRuntime.jsx(louis.Tooltip, { placement: "right", tooltip: "Help", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: clsx.clsx(Menu_module.default.dropdownButton, {
+            [Menu_module.default.dropdownButtonActive]: opened
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "25px" })
+        }
+      ) }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(louis.MenuList, { placement: "right-start", children })
+    }
+  );
 };
-exports.active = active;
-exports.default = styles;
-exports.link = link;
+exports.Menu = Menu;
 //# sourceMappingURL=harmony66.cjs.map

package/dist/harmony66.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony66.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"harmony66.cjs","sources":["../src/components/Sidebar/Widgets/Menu/Menu.tsx"],"sourcesContent":["import { MenuList, type SvgIconProps, Tooltip, Menu as UIMenu } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { FC, PropsWithChildren } from 'react'\nimport styles from './Menu.module.css'\n\ntype MenuProps = PropsWithChildren<{\n\t/** Icon component from @lokalise/louis to display in the menu button */\n\ticon: FC<SvgIconProps>\n}>\n\n/**\n * A dropdown menu component that displays an icon button which reveals a menu list when clicked.\n * The menu is positioned to the right of the button and includes a tooltip.\n *\n * Used primarily for dropdown menus in the Sidebar, such as the Help menu.\n *\n * @example\n * ```tsx\n * <Menu icon={HelpCenterIcon}>\n *   <MenuItem href=\"/docs\">Documentation</MenuItem>\n *   <MenuItem href=\"/tutorial\">Tutorials</MenuItem>\n *   <MenuDivider />\n *   <MenuItem href=\"/blog\">Blog</MenuItem>\n * </Menu>\n * ```\n */\nexport const Menu = ({ children, icon: Icon }: MenuProps) => {\n\treturn (\n\t\t<UIMenu\n\t\t\tmenuButton={({ opened }) => (\n\t\t\t\t<Tooltip placement=\"right\" tooltip=\"Help\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={clsx(styles.dropdownButton, {\n\t\t\t\t\t\t\t[styles.dropdownButtonActive]: opened,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon size=\"25px\" />\n\t\t\t\t\t</button>\n\t\t\t\t</Tooltip>\n\t\t\t)}\n\t\t>\n\t\t\t<MenuList placement=\"right-start\">{children}</MenuList>\n\t\t</UIMenu>\n\t)\n}\n"],"names":["jsx","UIMenu","Tooltip","clsx","styles","MenuList"],"mappings":";;;;;;AA0BO,MAAM,OAAO,CAAC,EAAE,UAAU,MAAM,WAAsB;AAE3D,SAAAA,2BAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACA,YAAY,CAAC,EAAE,OAAO,qCACpBC,MAAQ,SAAA,EAAA,WAAU,SAAQ,SAAQ,QAClC,UAAAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,WAAWG,KAAAA,KAAKC,YAAA,QAAO,gBAAgB;AAAA,YACtC,CAACA,YAAAA,QAAO,oBAAoB,GAAG;AAAA,UAAA,CAC/B;AAAA,UAED,UAAAJ,2BAAAA,IAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA,GAEpB;AAAA,MAGD,UAACA,2BAAA,IAAAK,MAAA,UAAA,EAAS,WAAU,eAAe,SAAS,CAAA;AAAA,IAAA;AAAA,EAC7C;AAEF;;"}

package/dist/harmony66.mjs

@@ -1,12 +1,26 @@
-const link = "_link_18vhx_1";
-const active = "_active_18vhx_18";
-const styles = {
-  link,
-  active
+import { jsx } from "react/jsx-runtime";
+import { Menu as Menu$1, MenuList, Tooltip } from "@lokalise/louis";
+import { clsx } from "./harmony60.mjs";
+import styles from "./harmony79.mjs";
+const Menu = ({ children, icon: Icon }) => {
+  return /* @__PURE__ */ jsx(
+    Menu$1,
+    {
+      menuButton: ({ opened }) => /* @__PURE__ */ jsx(Tooltip, { placement: "right", tooltip: "Help", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: clsx(styles.dropdownButton, {
+            [styles.dropdownButtonActive]: opened
+          }),
+          children: /* @__PURE__ */ jsx(Icon, { size: "25px" })
+        }
+      ) }),
+      children: /* @__PURE__ */ jsx(MenuList, { placement: "right-start", children })
+    }
+  );
 };
 export {
-  active,
-  styles as default,
-  link
+  Menu
 };
 //# sourceMappingURL=harmony66.mjs.map

package/dist/harmony66.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony66.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"harmony66.mjs","sources":["../src/components/Sidebar/Widgets/Menu/Menu.tsx"],"sourcesContent":["import { MenuList, type SvgIconProps, Tooltip, Menu as UIMenu } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { FC, PropsWithChildren } from 'react'\nimport styles from './Menu.module.css'\n\ntype MenuProps = PropsWithChildren<{\n\t/** Icon component from @lokalise/louis to display in the menu button */\n\ticon: FC<SvgIconProps>\n}>\n\n/**\n * A dropdown menu component that displays an icon button which reveals a menu list when clicked.\n * The menu is positioned to the right of the button and includes a tooltip.\n *\n * Used primarily for dropdown menus in the Sidebar, such as the Help menu.\n *\n * @example\n * ```tsx\n * <Menu icon={HelpCenterIcon}>\n *   <MenuItem href=\"/docs\">Documentation</MenuItem>\n *   <MenuItem href=\"/tutorial\">Tutorials</MenuItem>\n *   <MenuDivider />\n *   <MenuItem href=\"/blog\">Blog</MenuItem>\n * </Menu>\n * ```\n */\nexport const Menu = ({ children, icon: Icon }: MenuProps) => {\n\treturn (\n\t\t<UIMenu\n\t\t\tmenuButton={({ opened }) => (\n\t\t\t\t<Tooltip placement=\"right\" tooltip=\"Help\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={clsx(styles.dropdownButton, {\n\t\t\t\t\t\t\t[styles.dropdownButtonActive]: opened,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon size=\"25px\" />\n\t\t\t\t\t</button>\n\t\t\t\t</Tooltip>\n\t\t\t)}\n\t\t>\n\t\t\t<MenuList placement=\"right-start\">{children}</MenuList>\n\t\t</UIMenu>\n\t)\n}\n"],"names":["UIMenu"],"mappings":";;;;AA0BO,MAAM,OAAO,CAAC,EAAE,UAAU,MAAM,WAAsB;AAE3D,SAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACA,YAAY,CAAC,EAAE,OAAO,0BACpB,SAAQ,EAAA,WAAU,SAAQ,SAAQ,QAClC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,WAAW,KAAK,OAAO,gBAAgB;AAAA,YACtC,CAAC,OAAO,oBAAoB,GAAG;AAAA,UAAA,CAC/B;AAAA,UAED,UAAA,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA,GAEpB;AAAA,MAGD,UAAC,oBAAA,UAAA,EAAS,WAAU,eAAe,SAAS,CAAA;AAAA,IAAA;AAAA,EAC7C;AAEF;"}

package/dist/harmony67.cjs

@@ -1,12 +1,8 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const dropdownButton = "_dropdownButton_13l5r_1";
-const dropdownButtonActive = "_dropdownButtonActive_13l5r_18";
-const styles = {
-  dropdownButton,
-  dropdownButtonActive
-};
-exports.default = styles;
-exports.dropdownButton = dropdownButton;
-exports.dropdownButtonActive = dropdownButtonActive;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ProfileMenuContent = require("./harmony80.cjs");
+const ProfileMenuProvider = require("./harmony81.cjs");
+const ProfileMenu = ({ config, children }) => /* @__PURE__ */ jsxRuntime.jsx(ProfileMenuProvider.ProfileMenuProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(ProfileMenuContent.ProfileMenuContent, { children }) });
+exports.ProfileMenu = ProfileMenu;
 //# sourceMappingURL=harmony67.cjs.map

package/dist/harmony67.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony67.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"harmony67.cjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/ProfileMenu.tsx"],"sourcesContent":["import { ProfileMenuContent, type ProfileMenuContentProps } from './ProfileMenuContent'\nimport { ProfileMenuProvider } from './ProfileMenuProvider'\nimport type { SidebarProfileMenuConfig } from './types'\n\ntype ProfileMenuProps = {\n\t/** Configuration object containing team and user settings */\n\tconfig: SidebarProfileMenuConfig\n\t/** Render function for the menu content */\n\tchildren: ProfileMenuContentProps['children']\n}\n\n/**\n * A contextual menu component that provides team management functionality.\n * It manages team switching, profile settings, billing options, and upgrade prompts.\n *\n * The component uses a render prop pattern to provide context values to its children,\n * allowing flexible composition of menu items based on user permissions and team status.\n *\n * @example\n * ```tsx\n * <ProfileMenu config={profileMenuConfig}>\n *   {({ allowTeamCreation, showBillingButton }) => (\n *     <>\n *       <TeamSwitch onSwitchTeam={handleTeamSwitch} />\n *       {allowTeamCreation && <MenuItem>Create new team</MenuItem>}\n *       {showBillingButton && <MenuItem href=\"/billing\">Billing</MenuItem>}\n *     </>\n *   )}\n * </ProfileMenu>\n * ```\n */\nexport const ProfileMenu = ({ config, children }: ProfileMenuProps) => (\n\t<ProfileMenuProvider config={config}>\n\t\t<ProfileMenuContent>{children}</ProfileMenuContent>\n\t</ProfileMenuProvider>\n)\n"],"names":["jsx","ProfileMenuProvider","ProfileMenuContent"],"mappings":";;;;;AA+BO,MAAM,cAAc,CAAC,EAAE,QAAQ,SAAS,MAC7CA,2BAAA,IAAAC,oBAAA,qBAAA,EAAoB,QACpB,UAAAD,2BAAA,IAACE,mBAAoB,oBAAA,EAAA,SAAS,CAAA,EAC/B,CAAA;;"}

package/dist/harmony67.mjs

@@ -1,12 +1,8 @@
-const dropdownButton = "_dropdownButton_13l5r_1";
-const dropdownButtonActive = "_dropdownButtonActive_13l5r_18";
-const styles = {
-  dropdownButton,
-  dropdownButtonActive
-};
+import { jsx } from "react/jsx-runtime";
+import { ProfileMenuContent } from "./harmony80.mjs";
+import { ProfileMenuProvider } from "./harmony81.mjs";
+const ProfileMenu = ({ config, children }) => /* @__PURE__ */ jsx(ProfileMenuProvider, { config, children: /* @__PURE__ */ jsx(ProfileMenuContent, { children }) });
 export {
-  styles as default,
-  dropdownButton,
-  dropdownButtonActive
+  ProfileMenu
 };
 //# sourceMappingURL=harmony67.mjs.map

package/dist/harmony67.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony67.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"harmony67.mjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/ProfileMenu.tsx"],"sourcesContent":["import { ProfileMenuContent, type ProfileMenuContentProps } from './ProfileMenuContent'\nimport { ProfileMenuProvider } from './ProfileMenuProvider'\nimport type { SidebarProfileMenuConfig } from './types'\n\ntype ProfileMenuProps = {\n\t/** Configuration object containing team and user settings */\n\tconfig: SidebarProfileMenuConfig\n\t/** Render function for the menu content */\n\tchildren: ProfileMenuContentProps['children']\n}\n\n/**\n * A contextual menu component that provides team management functionality.\n * It manages team switching, profile settings, billing options, and upgrade prompts.\n *\n * The component uses a render prop pattern to provide context values to its children,\n * allowing flexible composition of menu items based on user permissions and team status.\n *\n * @example\n * ```tsx\n * <ProfileMenu config={profileMenuConfig}>\n *   {({ allowTeamCreation, showBillingButton }) => (\n *     <>\n *       <TeamSwitch onSwitchTeam={handleTeamSwitch} />\n *       {allowTeamCreation && <MenuItem>Create new team</MenuItem>}\n *       {showBillingButton && <MenuItem href=\"/billing\">Billing</MenuItem>}\n *     </>\n *   )}\n * </ProfileMenu>\n * ```\n */\nexport const ProfileMenu = ({ config, children }: ProfileMenuProps) => (\n\t<ProfileMenuProvider config={config}>\n\t\t<ProfileMenuContent>{children}</ProfileMenuContent>\n\t</ProfileMenuProvider>\n)\n"],"names":[],"mappings":";;;AA+BO,MAAM,cAAc,CAAC,EAAE,QAAQ,SAAS,MAC7C,oBAAA,qBAAA,EAAoB,QACpB,UAAA,oBAAC,oBAAoB,EAAA,SAAS,CAAA,EAC/B,CAAA;"}

package/dist/harmony68.cjs

@@ -2,59 +2,34 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const louis = require("@lokalise/louis");
-const clsx = require("./harmony48.cjs");
-const UpgradeIcon = require("./harmony74.cjs");
-const ProfileMenuContent_module = require("./harmony83.cjs");
-const ProfileMenuContext = require("./harmony70.cjs");
-const ProfileMenuContent = ({ children }) => {
-  const {
-    currentTeam,
-    otherTeams,
-    showUpgradeCta,
-    showBillingButton,
-    allowTeamCreation,
-    isProviderAlpha,
-    canAccessTeamSettings,
-    isEndOfTrialActive,
-    isTeamSuspended,
-    isFullyAuthenticated
-  } = ProfileMenuContext.useProfileMenu();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    louis.Menu,
-    {
-      menuButton: () => /* @__PURE__ */ jsxRuntime.jsxs("button", { className: ProfileMenuContent_module.default.profileButton, "aria-label": "Profile menu", type: "button", children: [
-        (currentTeam == null ? void 0 : currentTeam.logoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: currentTeam.logoUrl,
-            className: clsx.clsx(ProfileMenuContent_module.default.profileImage, {
-              [ProfileMenuContent_module.default.profileImageHighlight]: showUpgradeCta
-            }),
-            alt: "Team Logo"
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: clsx.clsx(ProfileMenuContent_module.default.userIconWrapper, "flex-row", "align-center", "items-center", {
-              [ProfileMenuContent_module.default.profileImageHighlight]: showUpgradeCta
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(louis.UserIcon, { size: "25px" })
-          }
-        ),
-        showUpgradeCta && /* @__PURE__ */ jsxRuntime.jsx(UpgradeIcon.UpgradeIcon, { className: ProfileMenuContent_module.default.profileImageUpgradeIcon })
-      ] }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(louis.MenuList, { placement: "right-end", className: ProfileMenuContent_module.default.menuContainer, children: children({
-        allowTeamCreation,
-        otherTeams,
-        canAccessTeamSettings,
-        isEndOfTrialActive,
-        isTeamSuspended,
-        showBillingButton,
-        isProviderAlpha,
-        isFullyAuthenticated
-      }) })
-    }
-  );
+const ProfileMenuContext = require("./harmony82.cjs");
+const ProfileSettingsMenuItem_module = require("./harmony83.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.ProfileMenuContent = ProfileMenuContent;
+exports.ProfileSettingsMenuItem = ProfileSettingsMenuItem;
 //# sourceMappingURL=harmony68.cjs.map

package/dist/harmony68.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony68.cjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/ProfileMenuContent.tsx"],"sourcesContent":["import { Menu, MenuList, UserIcon } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { ReactNode } from 'react'\nimport { UpgradeIcon } from '../../UpgradeIcon/UpgradeIcon'\nimport styles from './ProfileMenuContent.module.css'\nimport { useProfileMenu } from './ProfileMenuContext'\nimport type { SidebarProfileMenuRenderProps } from './types'\n\nexport type ProfileMenuContentProps = {\n\tchildren: (props: SidebarProfileMenuRenderProps) => ReactNode\n}\n\nexport const ProfileMenuContent = ({ children }: ProfileMenuContentProps) => {\n\tconst {\n\t\tcurrentTeam,\n\t\totherTeams,\n\t\tshowUpgradeCta,\n\t\tshowBillingButton,\n\t\tallowTeamCreation,\n\t\tisProviderAlpha,\n\t\tcanAccessTeamSettings,\n\t\tisEndOfTrialActive,\n\t\tisTeamSuspended,\n\t\tisFullyAuthenticated,\n\t} = useProfileMenu()\n\n\treturn (\n\t\t<Menu\n\t\t\tmenuButton={() => (\n\t\t\t\t<button className={styles.profileButton} aria-label=\"Profile menu\" type=\"button\">\n\t\t\t\t\t{currentTeam?.logoUrl ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={currentTeam.logoUrl}\n\t\t\t\t\t\t\tclassName={clsx(styles.profileImage, {\n\t\t\t\t\t\t\t\t[styles.profileImageHighlight]: showUpgradeCta,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\talt=\"Team Logo\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={clsx(styles.userIconWrapper, 'flex-row', 'align-center', 'items-center', {\n\t\t\t\t\t\t\t\t[styles.profileImageHighlight]: showUpgradeCta,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UserIcon size={'25px'} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showUpgradeCta && <UpgradeIcon className={styles.profileImageUpgradeIcon} />}\n\t\t\t\t</button>\n\t\t\t)}\n\t\t>\n\t\t\t<MenuList placement=\"right-end\" className={styles.menuContainer}>\n\t\t\t\t{children({\n\t\t\t\t\tallowTeamCreation,\n\t\t\t\t\totherTeams,\n\t\t\t\t\tcanAccessTeamSettings,\n\t\t\t\t\tisEndOfTrialActive,\n\t\t\t\t\tisTeamSuspended,\n\t\t\t\t\tshowBillingButton,\n\t\t\t\t\tisProviderAlpha,\n\t\t\t\t\tisFullyAuthenticated,\n\t\t\t\t})}\n\t\t\t</MenuList>\n\t\t</Menu>\n\t)\n}\n"],"names":["useProfileMenu","jsx","Menu","jsxs","styles","clsx","UserIcon","UpgradeIcon","MenuList"],"mappings":";;;;;;;;AAYO,MAAM,qBAAqB,CAAC,EAAE,eAAwC;AACtE,QAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACGA,kCAAe;AAGlB,SAAAC,2BAAA;AAAA,IAACC,MAAA;AAAA,IAAA;AAAA,MACA,YAAY,MACXC,2BAAAA,KAAC,UAAO,EAAA,WAAWC,0BAAAA,QAAO,eAAe,cAAW,gBAAe,MAAK,UACtE,UAAA;AAAA,SAAA,2CAAa,WACbH,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAK,YAAY;AAAA,YACjB,WAAWI,KAAAA,KAAKD,0BAAA,QAAO,cAAc;AAAA,cACpC,CAACA,0BAAAA,QAAO,qBAAqB,GAAG;AAAA,YAAA,CAChC;AAAA,YACD,KAAI;AAAA,UAAA;AAAA,QAAA,IAGLH,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAWI,KAAK,KAAAD,0BAAA,QAAO,iBAAiB,YAAY,gBAAgB,gBAAgB;AAAA,cACnF,CAACA,0BAAAA,QAAO,qBAAqB,GAAG;AAAA,YAAA,CAChC;AAAA,YAED,UAAAH,2BAAAA,IAACK,MAAAA,UAAS,EAAA,MAAM,OAAQ,CAAA;AAAA,UAAA;AAAA,QACzB;AAAA,QAEA,kBAAkBL,2BAAA,IAACM,YAAY,aAAA,EAAA,WAAWH,0BAAAA,QAAO,wBAAyB,CAAA;AAAA,MAAA,GAC5E;AAAA,MAGD,yCAACI,gBAAS,EAAA,WAAU,aAAY,WAAWJ,kCAAO,eAChD,UAAS,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACA,EACF,CAAA;AAAA,IAAA;AAAA,EACD;AAEF;;"}
+{"version":3,"file":"harmony68.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;;"}

package/dist/harmony68.mjs

@@ -1,60 +1,35 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Menu, MenuList, UserIcon } from "@lokalise/louis";
-import { clsx } from "./harmony48.mjs";
-import { UpgradeIcon } from "./harmony74.mjs";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { MenuItem, MenuDivider } from "@lokalise/louis";
+import { useProfileMenu } from "./harmony82.mjs";
 import styles from "./harmony83.mjs";
-import { useProfileMenu } from "./harmony70.mjs";
-const ProfileMenuContent = ({ children }) => {
-  const {
-    currentTeam,
-    otherTeams,
-    showUpgradeCta,
-    showBillingButton,
-    allowTeamCreation,
-    isProviderAlpha,
-    canAccessTeamSettings,
-    isEndOfTrialActive,
-    isTeamSuspended,
-    isFullyAuthenticated
-  } = useProfileMenu();
-  return /* @__PURE__ */ jsx(
-    Menu,
-    {
-      menuButton: () => /* @__PURE__ */ jsxs("button", { className: styles.profileButton, "aria-label": "Profile menu", type: "button", children: [
-        (currentTeam == null ? void 0 : currentTeam.logoUrl) ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: currentTeam.logoUrl,
-            className: clsx(styles.profileImage, {
-              [styles.profileImageHighlight]: showUpgradeCta
-            }),
-            alt: "Team Logo"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(styles.userIconWrapper, "flex-row", "align-center", "items-center", {
-              [styles.profileImageHighlight]: showUpgradeCta
-            }),
-            children: /* @__PURE__ */ jsx(UserIcon, { size: "25px" })
-          }
-        ),
-        showUpgradeCta && /* @__PURE__ */ jsx(UpgradeIcon, { className: styles.profileImageUpgradeIcon })
-      ] }),
-      children: /* @__PURE__ */ jsx(MenuList, { placement: "right-end", className: styles.menuContainer, children: children({
-        allowTeamCreation,
-        otherTeams,
-        canAccessTeamSettings,
-        isEndOfTrialActive,
-        isTeamSuspended,
-        showBillingButton,
-        isProviderAlpha,
-        isFullyAuthenticated
-      }) })
-    }
-  );
+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, {})
+  ] });
 };
 export {
-  ProfileMenuContent
+  ProfileSettingsMenuItem
 };
 //# sourceMappingURL=harmony68.mjs.map

package/dist/harmony68.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony68.mjs","sources":["../src/components/Sidebar/Widgets/ProfileMenu/ProfileMenuContent.tsx"],"sourcesContent":["import { Menu, MenuList, UserIcon } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport type { ReactNode } from 'react'\nimport { UpgradeIcon } from '../../UpgradeIcon/UpgradeIcon'\nimport styles from './ProfileMenuContent.module.css'\nimport { useProfileMenu } from './ProfileMenuContext'\nimport type { SidebarProfileMenuRenderProps } from './types'\n\nexport type ProfileMenuContentProps = {\n\tchildren: (props: SidebarProfileMenuRenderProps) => ReactNode\n}\n\nexport const ProfileMenuContent = ({ children }: ProfileMenuContentProps) => {\n\tconst {\n\t\tcurrentTeam,\n\t\totherTeams,\n\t\tshowUpgradeCta,\n\t\tshowBillingButton,\n\t\tallowTeamCreation,\n\t\tisProviderAlpha,\n\t\tcanAccessTeamSettings,\n\t\tisEndOfTrialActive,\n\t\tisTeamSuspended,\n\t\tisFullyAuthenticated,\n\t} = useProfileMenu()\n\n\treturn (\n\t\t<Menu\n\t\t\tmenuButton={() => (\n\t\t\t\t<button className={styles.profileButton} aria-label=\"Profile menu\" type=\"button\">\n\t\t\t\t\t{currentTeam?.logoUrl ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={currentTeam.logoUrl}\n\t\t\t\t\t\t\tclassName={clsx(styles.profileImage, {\n\t\t\t\t\t\t\t\t[styles.profileImageHighlight]: showUpgradeCta,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\talt=\"Team Logo\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={clsx(styles.userIconWrapper, 'flex-row', 'align-center', 'items-center', {\n\t\t\t\t\t\t\t\t[styles.profileImageHighlight]: showUpgradeCta,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UserIcon size={'25px'} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showUpgradeCta && <UpgradeIcon className={styles.profileImageUpgradeIcon} />}\n\t\t\t\t</button>\n\t\t\t)}\n\t\t>\n\t\t\t<MenuList placement=\"right-end\" className={styles.menuContainer}>\n\t\t\t\t{children({\n\t\t\t\t\tallowTeamCreation,\n\t\t\t\t\totherTeams,\n\t\t\t\t\tcanAccessTeamSettings,\n\t\t\t\t\tisEndOfTrialActive,\n\t\t\t\t\tisTeamSuspended,\n\t\t\t\t\tshowBillingButton,\n\t\t\t\t\tisProviderAlpha,\n\t\t\t\t\tisFullyAuthenticated,\n\t\t\t\t})}\n\t\t\t</MenuList>\n\t\t</Menu>\n\t)\n}\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,qBAAqB,CAAC,EAAE,eAAwC;AACtE,QAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACG,eAAe;AAGlB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,YAAY,MACX,qBAAC,UAAO,EAAA,WAAW,OAAO,eAAe,cAAW,gBAAe,MAAK,UACtE,UAAA;AAAA,SAAA,2CAAa,WACb;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAK,YAAY;AAAA,YACjB,WAAW,KAAK,OAAO,cAAc;AAAA,cACpC,CAAC,OAAO,qBAAqB,GAAG;AAAA,YAAA,CAChC;AAAA,YACD,KAAI;AAAA,UAAA;AAAA,QAAA,IAGL;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAW,KAAK,OAAO,iBAAiB,YAAY,gBAAgB,gBAAgB;AAAA,cACnF,CAAC,OAAO,qBAAqB,GAAG;AAAA,YAAA,CAChC;AAAA,YAED,UAAA,oBAAC,UAAS,EAAA,MAAM,OAAQ,CAAA;AAAA,UAAA;AAAA,QACzB;AAAA,QAEA,kBAAkB,oBAAC,aAAY,EAAA,WAAW,OAAO,wBAAyB,CAAA;AAAA,MAAA,GAC5E;AAAA,MAGD,8BAAC,UAAS,EAAA,WAAU,aAAY,WAAW,OAAO,eAChD,UAAS,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACA,EACF,CAAA;AAAA,IAAA;AAAA,EACD;AAEF;"}
+{"version":3,"file":"harmony68.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;"}