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

package/dist/harmony.css

@@ -56,51 +56,6 @@
 	padding-top: 0;
 	box-shadow: none;
 }
-._sidebarContainer_bmdti_1 {
-	border-right: 1px solid var(--lok-color-border-default);
-	position: fixed;
-	width: 65px;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	background-color: var(--lok-color-background-surface-middle);
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	padding-bottom: var(--lok-spacing-3);
-	z-index: 1;
-}
-
-._logoLink_bmdti_16 {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 67px;
-	position: relative;
-
-	&:hover {
-		background-color: var(--lok-color-background-surface-middle);
-	}
-
-	> img {
-		width: 36px;
-	}
-}
-._logoLink_1baxb_1 {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 67px;
-	position: relative;
-
-	&:hover {
-		background-color: var(--lok-color-background-surface-middle);
-	}
-
-	> img {
-		width: 36px;
-	}
-}
 ._link_18vhx_1._link_18vhx_1 {
 	display: flex;
 	justify-content: center;
@@ -122,94 +77,16 @@
 	color: var(--lok-color-background-action-primary-default);
 	background-color: var(--lok-color-background-surface-fore);
 }
-._dropdownButton_1naek_1 {
-	cursor: pointer;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 65px;
-	width: 64px;
-	background: transparent;
-	border: none;
-	outline: none;
-	color: var(--lok-color-text-light-default);
-
-	&:hover {
-		color: var(--lok-color-background-action-primary-default);
-		background-color: var(--lok-color-background-surface-fore);
-	}
-}
-
-._dropdownButtonActive_1naek_19 {
-	color: var(--lok-color-background-action-primary-default);
-	background-color: var(--lok-color-background-surface-fore);
-}
-._iconContainer_nz34m_1 {
-	color: var(--lok-color-background-surface-default);
-	background-color: var(--lok-color-background-action-danger-default);
-	border-radius: 100%;
-	font-size: 10px;
-	height: 16px;
-	width: 16px;
-}
-:root {
-	--menu-container-width: 300px;
-	--profile-button-size: 65px;
-}
-
-._popoverContent_1phdw_6 {
-	width: var(--menu-container-width);
-}
-
-._menuContainer_1phdw_10 {
-	width: var(--menu-container-width);
-	font-size: var(--lok-font-size-small);
-	button,
-	a {
-		font-size: var(--lok-font-size-small);
-		padding: var(--lok-spacing-3) var(--lok-spacing-4);
-	}
-}
-
-._profileButton_1phdw_20 {
-	cursor: pointer;
-	position: relative;
-	border: none;
-	background: transparent;
-	height: var(--profile-button-size);
-	width: var(--profile-button-size);
-
-	&:hover {
-		background: none;
-	}
-}
-
-._profileImage_1phdw_33 {
-	width: 40px;
-	height: 40px;
-	border-radius: 100%;
-	background-color: var(--lok-color-background-surface-default);
-	object-fit: contain; /* Make sure that non-square images maintain their aspect ratio */
-}
-
-._profileImageHighlight_1phdw_41 {
-	border: 3px solid var(--lok-color-background-action-danger-default);
+._mainLabel_1baso_1 {
+	color: var(--lok-color-text-disabled);
 }
 
-._profileImageUpgradeIcon_1phdw_45 {
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
+._subLabel_1baso_5 {
+	color: var(--lok-color-text-disabled);
+	font: var(--lok-typography-body-tiny-default);
 }
-
-._userIconWrapper_1phdw_51 {
-	width: 45px;
-	height: 45px;
-	display: flex;
-	align-items: center;
-	border-radius: var(--lok-radius-rounded);
-	justify-content: center;
-	margin: auto;
+._switchContainer_9byp6_1 {
+	flex-grow: 1;
 }
 ._container_q5pot_1 {
 	max-width: 100%;
@@ -305,6 +182,14 @@
 	background-color: var(--lok-color-background-surface-default);
 	object-fit: contain;
 }
+._iconContainer_nz34m_1 {
+	color: var(--lok-color-background-surface-default);
+	background-color: var(--lok-color-background-action-danger-default);
+	border-radius: 100%;
+	font-size: 10px;
+	height: 16px;
+	width: 16px;
+}
 ._container_1u995_1 {
 	max-width: 100%;
 	min-width: 0;
@@ -328,226 +213,134 @@
 	font: var(--lok-typography-body-small-strong);
 	height: 16px;
 }
-._navItem_1dudv_1._navItem_1dudv_1 {
-	border: 0;
-	background: none;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	height: 65px;
-	color: var(--lok-color-text-light-default);
-
-	&:hover {
-		color: var(--lok-color-background-action-primary-default);
-		background-color: var(--lok-color-background-surface-fore);
-	}
-}
-
-._activeNavItem_1dudv_18 {
-	color: var(--lok-color-background-action-primary-default);
-	background-color: var(--lok-color-background-surface-fore);
+:root {
+	--menu-container-width: 300px;
+	--profile-button-size: 65px;
 }
 
-._badge_1dudv_23 {
-	position: absolute;
-	top: calc(50% - 16px);
-	left: calc(50% + 2px);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-
-	width: 16px;
-	height: 16px;
-	border-radius: var(--lok-radius-rounded);
-	background-color: var(--lok-color-text-danger);
-
-	font-size: var(--lok-font-size-tiny);
-	text-transform: uppercase;
-	color: var(--lok-color-text-inverse);
+._popoverContent_1phdw_6 {
+	width: var(--menu-container-width);
 }
-._langRowCompleted_vpgdi_1 {
-	background: var(--lok-color-background-info);
-	td {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-align: start;
 
-		&:first-child {
-			border-left: 2px solid
-				var(--lok-color-background-action-primary-default);
-		}
+._menuContainer_1phdw_10 {
+	width: var(--menu-container-width);
+	font-size: var(--lok-font-size-small);
+	button,
+	a {
+		font-size: var(--lok-font-size-small);
+		padding: var(--lok-spacing-3) var(--lok-spacing-4);
 	}
 }
 
-._langCellSecondary_vpgdi_15 {
-	color: var(--lok-color-text-light-default);
-	text-align: left;
-}
-
-._langStatus_vpgdi_20 {
-	color: var(--lok-color-text-light-default);
-
-	&::before {
-		display: inline-block;
-		content: '';
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		margin: var(--lok-spacing-1);
-		background-color: #cbd5e0;
-	}
-
-	&[data-status='completed'] {
-		&::before {
-			background-color: #60e778;
-		}
-	}
-
-	&[data-status='in_progress'] {
-		&::before {
-			background-color: #facc15;
-		}
-	}
-}
-._taskContainer_mt2or_1 {
-	padding: var(--lok-spacing-4);
+._profileButton_1phdw_20 {
+	cursor: pointer;
 	position: relative;
+	border: none;
+	background: transparent;
+	height: var(--profile-button-size);
+	width: var(--profile-button-size);
 
-	&:not(:first-child)::before {
-		display: block;
-		content: '';
-		height: 1px;
-		width: calc(100% - 2 * var(--lok-spacing-4));
-		position: absolute;
-		top: 0;
-		left: var(--lok-spacing-4);
-		background: var(--lok-color-background-surface-fore);
+	&:hover {
+		background: none;
 	}
 }
 
-._tagDue_mt2or_17 {
-	background: #dea829;
+._profileImage_1phdw_33 {
+	width: 40px;
+	height: 40px;
+	border-radius: 100%;
+	background-color: var(--lok-color-background-surface-default);
+	object-fit: contain; /* Make sure that non-square images maintain their aspect ratio */
 }
 
-._taskTitle_mt2or_21 {
-	font: var(--lok-typography-body-small-default);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-block: var(--lok-spacing-4) var(--lok-spacing-2);
+._profileImageHighlight_1phdw_41 {
+	border: 3px solid var(--lok-color-background-action-danger-default);
 }
 
-._taskDescription_mt2or_28 {
-	color: var(--lok-color-text-light-default);
-	font: var(--lok-typography-body-action-small);
-	overflow: hidden;
-	text-overflow: ellipsis;
+._profileImageUpgradeIcon_1phdw_45 {
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
 }
 
-._languagesTable_mt2or_35 {
-	table-layout: fixed;
-	margin-top: var(--lok-spacing-3);
-	width: auto;
-	margin-left: calc(var(--lok-spacing-4) * -1);
-	border-collapse: separate;
-
-	tbody td {
-		padding-top: var(--lok-spacing-1);
-		padding-bottom: var(--lok-spacing-1);
-	}
-
-	thead th:first-child,
-	tbody td:first-child {
-		padding-left: var(--lok-spacing-4);
-	}
-
-	thead th,
-	tbody td {
-		padding-left: var(--lok-spacing-2);
-	}
+._userIconWrapper_1phdw_51 {
+	width: 45px;
+	height: 45px;
+	display: flex;
+	align-items: center;
+	border-radius: var(--lok-radius-rounded);
+	justify-content: center;
+	margin: auto;
+}
+._logoLink_1baxb_1 {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 67px;
+	position: relative;
 
-	thead th:last-child,
-	tbody td:last-child {
-		padding-right: var(--lok-spacing-4);
+	&:hover {
+		background-color: var(--lok-color-background-surface-middle);
 	}
 
-	thead tr th {
-		color: var(--lok-color-text-light-default);
-		text-align: left;
-		padding-bottom: var(--lok-spacing-1);
-		font: var(--lok-typography-body-tiny-default);
-		text-transform: uppercase;
-
-		&:nth-child(1) {
-			width: 170px;
-		}
-
-		&:nth-child(2) {
-			width: 107px;
-		}
-
-		&:nth-child(3) {
-			width: 75px;
-		}
-
-		&:nth-child(4) {
-			width: 118px;
-		}
+	> img {
+		width: 36px;
 	}
 }
+._shortcutMenu_ujdmb_1:hover {
+	background-color: var(--lok-color-background-active);
+}
 
-._metadata_mt2or_87 {
+._shortcutLabel_ujdmb_5 {
+	margin-left: var(--lok-spacing-1);
 	color: var(--lok-color-text-light-default);
-	margin: var(--lok-spacing-4) 0 0;
-	font: var(--lok-typography-body-tiny-default);
-
-	> span {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex-basis: 100%;
-		max-width: max-content;
+	width: 47px;
+	text-align: right;
+}
 
-		&:not(:first-child) {
-			margin-left: var(--lok-spacing-1);
-		}
+._dropdownButton_ujdmb_12 {
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 65px;
+	width: 64px;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--lok-color-text-light-default);
 
-		&:not(:first-child)::before {
-			content: '•';
-			margin-right: var(--lok-spacing-1);
-		}
+	&:hover {
+		color: var(--lok-color-background-action-primary-default);
+		background-color: var(--lok-color-background-surface-fore);
 	}
 }
-._loadingContainer_19d6m_1 {
-	height: 100px;
-	width: 487px;
-	left: 69px;
-}
 
-._noTasksContainer_19d6m_7 {
-	text-align: center;
-	padding: var(--lok-spacing-8);
-	width: 360px;
-	left: 65px;
-}
-
-._noTasksHeading_19d6m_14 {
-	font: var(--lok-typography-heading-3);
+._dropdownButtonActive_ujdmb_30 {
+	color: var(--lok-color-background-action-primary-default);
+	background-color: var(--lok-color-background-surface-fore);
 }
-
-._noTasksText_19d6m_18 {
-	font: var(--lok-typography-body-action-base);
-	color: var(--lok-color-text-light-default);
+._sidebarContainer_1x0gj_1 {
+	border-right: 1px solid var(--lok-color-border-default);
+	position: fixed;
+	width: 65px;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background-color: var(--lok-color-background-surface-middle);
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	padding-bottom: var(--lok-spacing-3);
+	z-index: 1;
 }
 
-._tasksContainer_19d6m_23 {
-	width: 487px;
-	max-height: 70vh;
-	overflow-y: auto;
-	overflow-x: hidden;
-	left: 65px;
+._sidebarSkeleton_1x0gj_16 {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: var(--lok-spacing-5);
 }
 ._breadcrumbsItem_1hm6a_1 {
 	color: var(--lok-color-text-light-default);

package/dist/harmony100.cjs

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const louis = require("@lokalise/louis");
-const SortingIcon = ({ direction }) => {
-  if (direction === "asc") {
-    return /* @__PURE__ */ jsxRuntime.jsx(louis.SortAscendingIcon, { ariaLabel: "ascending sorting" });
-  }
-  if (direction === "desc") {
-    return /* @__PURE__ */ jsxRuntime.jsx(louis.SortDescendingIcon, { ariaLabel: "descending sorting" });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(louis.SortIcon, { ariaLabel: "sorting" });
-};
-exports.SortingIcon = SortingIcon;
+const Avatar_module = require("./harmony119.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=harmony100.cjs.map

package/dist/harmony100.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony100.cjs","sources":["../src/components/Table/components/SortingIcon.tsx"],"sourcesContent":["import { SortAscendingIcon, SortDescendingIcon, SortIcon } from '@lokalise/louis'\nimport type { SortDirection } from '@tanstack/react-table'\n\ntype SortingIconProps = {\n\tdirection: SortDirection | false\n}\n\nexport const SortingIcon = ({ direction }: SortingIconProps) => {\n\tif (direction === 'asc') {\n\t\treturn <SortAscendingIcon ariaLabel=\"ascending sorting\" />\n\t}\n\tif (direction === 'desc') {\n\t\treturn <SortDescendingIcon ariaLabel=\"descending sorting\" />\n\t}\n\treturn <SortIcon ariaLabel=\"sorting\" />\n}\n"],"names":["jsx","SortAscendingIcon","SortDescendingIcon","SortIcon"],"mappings":";;;;AAOO,MAAM,cAAc,CAAC,EAAE,gBAAkC;AAC/D,MAAI,cAAc,OAAO;AACjB,WAAAA,2BAAA,IAACC,MAAkB,mBAAA,EAAA,WAAU,oBAAoB,CAAA;AAAA,EAAA;AAEzD,MAAI,cAAc,QAAQ;AAClB,WAAAD,2BAAA,IAACE,MAAmB,oBAAA,EAAA,WAAU,qBAAqB,CAAA;AAAA,EAAA;AAEpD,SAAAF,2BAAA,IAACG,MAAS,UAAA,EAAA,WAAU,UAAU,CAAA;AACtC;;"}
+{"version":3,"file":"harmony100.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 *\n * @example\n * ```\n * <Avatar src=\"/logo.png\" href=\"/\" ariaLabel=\"Home\" alt=\"\" />\n * ```\n */\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":";;;;AAuBO,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/harmony100.mjs

@@ -1,15 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { SortAscendingIcon, SortDescendingIcon, SortIcon } from "@lokalise/louis";
-const SortingIcon = ({ direction }) => {
-  if (direction === "asc") {
-    return /* @__PURE__ */ jsx(SortAscendingIcon, { ariaLabel: "ascending sorting" });
-  }
-  if (direction === "desc") {
-    return /* @__PURE__ */ jsx(SortDescendingIcon, { ariaLabel: "descending sorting" });
-  }
-  return /* @__PURE__ */ jsx(SortIcon, { ariaLabel: "sorting" });
-};
+import styles from "./harmony119.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 {
-  SortingIcon
+  Avatar
 };
 //# sourceMappingURL=harmony100.mjs.map

package/dist/harmony100.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony100.mjs","sources":["../src/components/Table/components/SortingIcon.tsx"],"sourcesContent":["import { SortAscendingIcon, SortDescendingIcon, SortIcon } from '@lokalise/louis'\nimport type { SortDirection } from '@tanstack/react-table'\n\ntype SortingIconProps = {\n\tdirection: SortDirection | false\n}\n\nexport const SortingIcon = ({ direction }: SortingIconProps) => {\n\tif (direction === 'asc') {\n\t\treturn <SortAscendingIcon ariaLabel=\"ascending sorting\" />\n\t}\n\tif (direction === 'desc') {\n\t\treturn <SortDescendingIcon ariaLabel=\"descending sorting\" />\n\t}\n\treturn <SortIcon ariaLabel=\"sorting\" />\n}\n"],"names":[],"mappings":";;AAOO,MAAM,cAAc,CAAC,EAAE,gBAAkC;AAC/D,MAAI,cAAc,OAAO;AACjB,WAAA,oBAAC,mBAAkB,EAAA,WAAU,oBAAoB,CAAA;AAAA,EAAA;AAEzD,MAAI,cAAc,QAAQ;AAClB,WAAA,oBAAC,oBAAmB,EAAA,WAAU,qBAAqB,CAAA;AAAA,EAAA;AAEpD,SAAA,oBAAC,UAAS,EAAA,WAAU,UAAU,CAAA;AACtC;"}
+{"version":3,"file":"harmony100.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 *\n * @example\n * ```\n * <Avatar src=\"/logo.png\" href=\"/\" ariaLabel=\"Home\" alt=\"\" />\n * ```\n */\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":";;AAuBO,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/harmony101.cjs

@@ -1,15 +1,50 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const headerSortButton = "_headerSortButton_b5tlh_1";
-const centeredCell = "_centeredCell_b5tlh_15";
-const rightAlignedCell = "_rightAlignedCell_b5tlh_19";
-const styles = {
-  headerSortButton,
-  centeredCell,
-  rightAlignedCell
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const louis = require("@lokalise/louis");
+const clsx = require("./harmony73.cjs");
+const HelpMenu_module = require("./harmony120.cjs");
+const HelpMenu = ({ contactSupport, keyboardShortcuts }) => {
+  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(HelpMenu_module.default.dropdownButton, {
+            [HelpMenu_module.default.dropdownButtonActive]: opened
+          }),
+          "data-testid": "sidebar-help-menu-button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(louis.HelpCenterIcon, { size: "25px" })
+        }
+      ) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(louis.MenuList, { placement: "right-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: "https://lokalise.com/blog/category/tutorials/", target: "_blank", children: "Tutorials" }),
+        contactSupport && /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { onClick: contactSupport.onClick, children: "Contact support" }),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: "https://docs.lokalise.com/en/", target: "_blank", children: "Documentation" }),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuDivider, {}),
+        keyboardShortcuts && /* @__PURE__ */ jsxRuntime.jsxs(louis.MenuItem, { className: HelpMenu_module.default.shortcutMenu, onClick: keyboardShortcuts.onClick, children: [
+          "Keyboard shortcuts",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: HelpMenu_module.default.shortcutLabel, children: keyboardShortcuts.label })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          louis.MenuItem,
+          {
+            href: "https://developers.lokalise.com/reference/lokalise-rest-api",
+            target: "_blank",
+            children: "API reference"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: "https://github.com/lokalise/lokalise-cli-2-go", target: "_blank", children: "CLI tool" }),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuDivider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: "https://lokalise.com/blog/category/product-updates/", target: "_blank", children: "What’s new" }),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: "https://lokalise.com/blog/", target: "_blank", children: "Blog" }),
+        /* @__PURE__ */ jsxRuntime.jsx(louis.MenuItem, { href: "https://lokalise.com/product/apps", target: "_blank", children: "Apps" })
+      ] })
+    }
+  );
 };
-exports.centeredCell = centeredCell;
-exports.default = styles;
-exports.headerSortButton = headerSortButton;
-exports.rightAlignedCell = rightAlignedCell;
+exports.HelpMenu = HelpMenu;
 //# sourceMappingURL=harmony101.cjs.map

package/dist/harmony101.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"harmony101.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"harmony101.cjs","sources":["../src/components/Sidebar/Widgets/HelpMenu/HelpMenu.tsx"],"sourcesContent":["import type { HelpMenuConfig } from '@components/Sidebar/types'\nimport { HelpCenterIcon, Menu, MenuDivider, MenuItem, MenuList, Tooltip } from '@lokalise/louis'\nimport clsx from 'clsx'\nimport styles from './HelpMenu.module.css'\n\n/**\n * Help menu component that provides links to tutorials, documentation, support, and more.\n *\n * @example\n * ```\n * <HelpMenu\n *   contactSupport={{ onClick: handleContactSupport }}\n *   keyboardShortcuts={{ onClick: handleShowShortcuts, label: '⌘K' }}\n * />\n * ```\n */\n\nexport const HelpMenu = ({ contactSupport, keyboardShortcuts }: HelpMenuConfig) => {\n\treturn (\n\t\t<Menu\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\tdata-testid=\"sidebar-help-menu-button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<HelpCenterIcon 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\">\n\t\t\t\t<MenuItem href=\"https://lokalise.com/blog/category/tutorials/\" target=\"_blank\">\n\t\t\t\t\tTutorials\n\t\t\t\t</MenuItem>\n\t\t\t\t{contactSupport && <MenuItem onClick={contactSupport.onClick}>Contact support</MenuItem>}\n\t\t\t\t<MenuItem href=\"https://docs.lokalise.com/en/\" target=\"_blank\">\n\t\t\t\t\tDocumentation\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuDivider />\n\t\t\t\t{keyboardShortcuts && (\n\t\t\t\t\t<MenuItem className={styles.shortcutMenu} onClick={keyboardShortcuts.onClick}>\n\t\t\t\t\t\tKeyboard shortcuts{' '}\n\t\t\t\t\t\t<span className={styles.shortcutLabel}>{keyboardShortcuts.label}</span>\n\t\t\t\t\t</MenuItem>\n\t\t\t\t)}\n\t\t\t\t<MenuItem\n\t\t\t\t\thref=\"https://developers.lokalise.com/reference/lokalise-rest-api\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t>\n\t\t\t\t\tAPI reference\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem href=\"https://github.com/lokalise/lokalise-cli-2-go\" target=\"_blank\">\n\t\t\t\t\tCLI tool\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuDivider />\n\t\t\t\t<MenuItem href=\"https://lokalise.com/blog/category/product-updates/\" target=\"_blank\">\n\t\t\t\t\tWhat’s new\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem href=\"https://lokalise.com/blog/\" target=\"_blank\">\n\t\t\t\t\tBlog\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem href=\"https://lokalise.com/product/apps\" target=\"_blank\">\n\t\t\t\t\tApps\n\t\t\t\t</MenuItem>\n\t\t\t</MenuList>\n\t\t</Menu>\n\t)\n}\n"],"names":["jsx","Menu","Tooltip","clsx","styles","HelpCenterIcon","jsxs","MenuList","MenuItem","MenuDivider"],"mappings":";;;;;;AAiBO,MAAM,WAAW,CAAC,EAAE,gBAAgB,wBAAwC;AAEjF,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,gBAAA,QAAO,gBAAgB;AAAA,YACtC,CAACA,gBAAAA,QAAO,oBAAoB,GAAG;AAAA,UAAA,CAC/B;AAAA,UACD,eAAY;AAAA,UAEZ,UAAAJ,2BAAAA,IAACK,MAAAA,gBAAe,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA,GAE9B;AAAA,MAGD,UAAAC,2BAAA,KAACC,MAAS,UAAA,EAAA,WAAU,eACnB,UAAA;AAAA,QAAAP,+BAACQ,MAAAA,UAAS,EAAA,MAAK,iDAAgD,QAAO,UAAS,UAE/E,aAAA;AAAA,QACC,kBAAmBR,2BAAAA,IAAAQ,MAAAA,UAAA,EAAS,SAAS,eAAe,SAAS,UAAe,mBAAA;AAAA,uCAC5EA,MAAAA,UAAS,EAAA,MAAK,iCAAgC,QAAO,UAAS,UAE/D,iBAAA;AAAA,uCACCC,MAAY,aAAA,EAAA;AAAA,QACZ,qDACCD,gBAAS,EAAA,WAAWJ,gBAAAA,QAAO,cAAc,SAAS,kBAAkB,SAAS,UAAA;AAAA,UAAA;AAAA,UAC1D;AAAA,yCAClB,QAAK,EAAA,WAAWA,gBAAAA,QAAO,eAAgB,4BAAkB,MAAM,CAAA;AAAA,QAAA,GACjE;AAAA,QAEDJ,2BAAA;AAAA,UAACQ,MAAA;AAAA,UAAA;AAAA,YACA,MAAK;AAAA,YACL,QAAO;AAAA,YACP,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,uCACCA,MAAAA,UAAS,EAAA,MAAK,iDAAgD,QAAO,UAAS,UAE/E,YAAA;AAAA,uCACCC,MAAY,aAAA,EAAA;AAAA,uCACZD,MAAAA,UAAS,EAAA,MAAK,uDAAsD,QAAO,UAAS,UAErF,cAAA;AAAA,uCACCA,MAAAA,UAAS,EAAA,MAAK,8BAA6B,QAAO,UAAS,UAE5D,QAAA;AAAA,uCACCA,MAAAA,UAAS,EAAA,MAAK,qCAAoC,QAAO,UAAS,UAEnE,OAAA,CAAA;AAAA,MAAA,EACD,CAAA;AAAA,IAAA;AAAA,EACD;AAEF;;"}