@mailstep/design-system 0.8.34-beta.0 → 0.8.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.34-beta.0",
+  "version": "0.8.35",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -16,12 +16,11 @@
     "build:win": "tsdown && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
     "build-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
-    "deploy:beta": "npm run build && npm publish ./build --tag beta",
     "deploy:win": "npm run build:win && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
     "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
-    "prepare": "husky"
+    "prepare": "husky install"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "yarn eslint --fix"

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledColumnButton: import("styled-components").StyledComponent<import("react").FC<import("../../../../Elements/Button/types").Props>, import("@xstyled/system").Theme, {}, never>;
+export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledColumnButton: import("styled-components").StyledComponent<import("react").FC<import("../../../../Elements/Button/types").Props>, import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts

@@ -1,6 +1,6 @@
 import { type FC } from 'react';
 import { type CommonGridProps, type ExtraControlButton } from '../../types';
-export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     targetPosition?: ExtraControlButton['position'];

package/ui/Blocks/CommonGrid/components/FloatingButton/FloatingButton.d.ts

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { type FloatingButtonProps } from '../../types';
-export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isOpen: boolean;
 }, never>;
 declare const FloatingButton: FC<FloatingButtonProps>;

package/ui/Blocks/CommonGrid/components/GridAggregation/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const ColumnTitle: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const ColumnTitle: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;

package/ui/Blocks/CommonGrid/components/IconList/IconList.d.ts

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
-export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;
-export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     selected?: boolean;
 }, never>;
-export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
 type Item = {
     value: string;
     icon?: string;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const RowLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const RowLayout: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $isVisible: boolean;
     transition?: string;
     transform?: string;

package/ui/Blocks/CommonGrid/components/MobileOverlayWrapper.d.ts

@@ -1 +1 @@
-export declare const MobileOverlayWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const MobileOverlayWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.d.ts

@@ -1 +1 @@
-export declare const TagRemove: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const TagRemove: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/Table.d.ts

@@ -1,8 +1,8 @@
-export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasRowClick?: boolean;
     align?: string;
 }, never>;
-export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;
@@ -10,13 +10,13 @@ export declare const Cell: import("styled-components").StyledComponent<"div", im
     transition?: string;
     transform?: string;
 }, never>;
-export declare const StyledDataRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledDataRow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasRowClick?: boolean;
     align?: string;
 } & {
     isEven: boolean;
 }, never>;
-export declare const TextCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TextCell: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;
@@ -24,7 +24,7 @@ export declare const TextCell: import("styled-components").StyledComponent<"div"
     transition?: string;
     transform?: string;
 }, never>;
-export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;
@@ -33,10 +33,10 @@ export declare const MessageCell: import("styled-components").StyledComponent<"d
     transform?: string;
 }, never>;
 declare const variantColors: {
-    error: (props: import("@xstyled/util").Props<import("@xstyled/system").Theme>) => import("@xstyled/system").CSSScalar;
-    info: (props: import("@xstyled/util").Props<import("@xstyled/system").Theme>) => import("@xstyled/system").CSSScalar;
+    error: (props: import("@xstyled/util").Props<import("@xstyled/styled-components").Theme>) => import("@xstyled/styled-components").CSSScalar;
+    info: (props: import("@xstyled/util").Props<import("@xstyled/styled-components").Theme>) => import("@xstyled/styled-components").CSSScalar;
 };
-export declare const MessageCellBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const MessageCellBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;

package/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.d.ts

@@ -1 +1 @@
-export declare const LinkInCell: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/system").Theme, import("../../../../Elements/SimpleLink/SimpleLink").Props, never>;
+export declare const LinkInCell: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/styled-components").Theme, import("../../../../Elements/SimpleLink/SimpleLink").Props, never>;

package/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.d.ts

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { type DataCellProps } from '../../types';
 type Props = DataCellProps<any>;
-export declare const Wrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Trigger: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Wrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Trigger: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const RemoveCell: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/styles.d.ts

@@ -1,11 +1,11 @@
-export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
     hasContent: boolean;
 }, "color">;
-export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
 export declare const CommonGridWithStyles: import("styled-components").StyledComponent<import("react").FC<import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig;
     handleDragEnd: (item: import("@dnd-kit/core").DragEndEvent) => void;
@@ -13,7 +13,7 @@ export declare const CommonGridWithStyles: import("styled-components").StyledCom
     hasGroups: boolean;
     hasFilters: boolean;
     onCellClick?: (columnName: string) => void;
-}>, import("@xstyled/system").Theme, {
+}>, import("@xstyled/styled-components").Theme, {
     withButtonStrip: boolean;
     hasGroupsOrFilters: boolean;
     hasGroups: boolean;

package/ui/Blocks/CornerDialog/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $mounted: boolean;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Status: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Status: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     background: string;
 }, never>;
-export declare const CloseBtn: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StatusText: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const CloseBtn: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StatusText: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     fontColor: string;
 }, never>;

package/ui/Blocks/Header/components/HamburgerToggle/index.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import type { HeaderVariant } from '../../types';
+type HamburgerToggleProps = {
+    isOpen?: boolean;
+    onClick?: () => void;
+    variant?: HeaderVariant;
+};
+export declare const HamburgerToggle: FC<HamburgerToggleProps>;
+export {};

package/ui/Blocks/Header/components/HamburgerToggle/index.js

@@ -0,0 +1,64 @@
+import { HamburgerToggleButton } from "./styles.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Header/components/HamburgerToggle/index.tsx
+const HamburgerToggle = ({ isOpen, onClick, variant = "light" }) => {
+	const lineColor = variant === "dark" ? "#fff" : "#0C1F2F";
+	return /* @__PURE__ */ jsx(HamburgerToggleButton, {
+		type: "button",
+		onClick,
+		onMouseDown: useCallback((event) => {
+			event.stopPropagation();
+		}, []),
+		children: isOpen ? /* @__PURE__ */ jsxs("svg", {
+			width: "27",
+			height: "27",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: lineColor,
+			strokeWidth: "1.25",
+			strokeLinecap: "round",
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: "6",
+				y1: "6",
+				x2: "18",
+				y2: "18"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: "18",
+				y1: "6",
+				x2: "6",
+				y2: "18"
+			})]
+		}) : /* @__PURE__ */ jsxs("svg", {
+			width: "27",
+			height: "27",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: lineColor,
+			strokeWidth: "1.25",
+			strokeLinecap: "round",
+			children: [
+				/* @__PURE__ */ jsx("line", {
+					x1: "4",
+					y1: "8",
+					x2: "20",
+					y2: "8"
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: "4",
+					y1: "12",
+					x2: "20",
+					y2: "12"
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: "4",
+					y1: "16",
+					x2: "20",
+					y2: "16"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { HamburgerToggle };

package/ui/Blocks/Header/components/HamburgerToggle/styles.d.ts

@@ -0,0 +1 @@
+export declare const HamburgerToggleButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Header/components/HamburgerToggle/styles.js

@@ -0,0 +1,20 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Header/components/HamburgerToggle/styles.ts
+const HamburgerToggleButton = styled$1.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+//#endregion
+export { HamburgerToggleButton };

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.d.ts

@@ -1,7 +1,9 @@
 import { type FC } from 'react';
 import type { MenuItemType } from '../../../../../SideMenu/types';
+import type { HeaderVariant } from '../../../../types';
 type MenuItemProps = {
     item: MenuItemType;
+    variant?: HeaderVariant;
 };
 export declare const MenuItem: FC<MenuItemProps>;
 export {};

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -1,15 +1,32 @@
-import { MenuItemsListItem } from "../../styles.js";
-import { jsx } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
+import Icon from "../../../../../../Elements/Icon/Icon.js";
+import { MenuItemDropdownArrow, MenuItemLabel, MenuItemsListItem, SubMenuItemRow, SubMenuList } from "../../styles.js";
+import { isItemActive, isLinkExactActive } from "./utils/isItemActive.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link, useLocation } from "react-router-dom";
 //#region packages/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.tsx
-const MenuItem = ({ item }) => {
-	return /* @__PURE__ */ jsx(MenuItemsListItem, {
-		onClick: item.onClick,
-		pointer: !!item.onClick,
-		children: item.link ? /* @__PURE__ */ jsx(Link, {
-			to: item.link,
-			children: item.title
-		}) : item.title
+const MenuItem = ({ item, variant = "light" }) => {
+	const hasSubmenu = Array.isArray(item.items) && item.items.length > 0;
+	const { pathname, search } = useLocation();
+	const isActive = isItemActive(pathname, item);
+	return /* @__PURE__ */ jsxs(MenuItemsListItem, {
+		pointer: !!item.onClick || hasSubmenu,
+		$variant: variant,
+		$isActive: isActive,
+		children: [/* @__PURE__ */ jsxs(MenuItemLabel, {
+			onClick: item.onClick,
+			children: [item.link && !hasSubmenu ? /* @__PURE__ */ jsx(Link, {
+				to: item.link,
+				children: item.title
+			}) : /* @__PURE__ */ jsx("span", { children: item.title }), hasSubmenu && /* @__PURE__ */ jsx(MenuItemDropdownArrow, { children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" }) })]
+		}), hasSubmenu && /* @__PURE__ */ jsx(SubMenuList, { children: item.items?.map((subItem, key) => /* @__PURE__ */ jsx(SubMenuItemRow, {
+			pointer: !!subItem.onClick,
+			onClick: subItem.onClick,
+			$isActive: isLinkExactActive(pathname, search, subItem.link),
+			children: subItem.link ? /* @__PURE__ */ jsx(Link, {
+				to: subItem.link,
+				children: subItem.title
+			}) : /* @__PURE__ */ jsx("span", { children: subItem.title })
+		}, key)) })]
 	});
 };
 //#endregion

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/utils/isItemActive.d.ts

@@ -0,0 +1,10 @@
+import type { MenuItemType } from '../../../../../../SideMenu/types';
+type IsLinkActiveType = (pathname: string, link?: string) => boolean;
+/** Loose path match — used for top-level item highlight (parent of any submenu item). */
+export declare const isLinkActive: IsLinkActiveType;
+type IsLinkExactActiveType = (pathname: string, search: string, link?: string) => boolean;
+/** Exact path + query match — used for submenu item highlight. */
+export declare const isLinkExactActive: IsLinkExactActiveType;
+type IsItemActiveType = (pathname: string, item: MenuItemType) => boolean;
+export declare const isItemActive: IsItemActiveType;
+export {};

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/utils/isItemActive.js

@@ -0,0 +1,33 @@
+import { matchPath } from "react-router-dom";
+//#region packages/ui/Blocks/Header/components/MenuItems/components/MenuItem/utils/isItemActive.ts
+const normalizeQuery = (search) => {
+	const cleaned = search.startsWith("?") ? search.slice(1) : search;
+	if (!cleaned) return "";
+	const params = new URLSearchParams(cleaned);
+	return Array.from(params.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}=${v}`).join("&");
+};
+/** Loose path match — used for top-level item highlight (parent of any submenu item). */
+const isLinkActive = (pathname, link) => {
+	if (!link) return false;
+	const path = link.split("?")[0];
+	return !!matchPath(pathname, {
+		path,
+		exact: false
+	});
+};
+/** Exact path + query match — used for submenu item highlight. */
+const isLinkExactActive = (pathname, search, link) => {
+	if (!link) return false;
+	const [linkPath, linkSearch = ""] = link.split("?");
+	if (!matchPath(pathname, {
+		path: linkPath,
+		exact: true
+	})) return false;
+	return normalizeQuery(search) === normalizeQuery(linkSearch);
+};
+const isItemActive = (pathname, item) => {
+	if (isLinkActive(pathname, item.link)) return true;
+	return (item.items ?? []).some((subItem) => isLinkActive(pathname, subItem.link));
+};
+//#endregion
+export { isItemActive, isLinkActive, isLinkExactActive };

package/ui/Blocks/Header/components/MenuItems/index.d.ts

@@ -1,7 +1,9 @@
 import { type FC } from 'react';
 import type { MenuItemType } from '../../../SideMenu/types';
+import type { HeaderVariant } from '../../types';
 type MenuItemsProps = {
     items?: MenuItemType[];
+    variant?: HeaderVariant;
 };
 export declare const MenuItems: FC<MenuItemsProps>;
 export {};

package/ui/Blocks/Header/components/MenuItems/index.js

@@ -2,8 +2,11 @@ import { MenuItemsList } from "./styles.js";
 import { MenuItem } from "./components/MenuItem/index.js";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/Header/components/MenuItems/index.tsx
-const MenuItems = ({ items }) => {
-	return /* @__PURE__ */ jsx(MenuItemsList, { children: items?.map((item, key) => /* @__PURE__ */ jsx(MenuItem, { item }, key)) });
+const MenuItems = ({ items, variant = "light" }) => {
+	return /* @__PURE__ */ jsx(MenuItemsList, { children: items?.map((item, key) => /* @__PURE__ */ jsx(MenuItem, {
+		item,
+		variant
+	}, key)) });
 };
 //#endregion
 export { MenuItems };

package/ui/Blocks/Header/components/MenuItems/styles.d.ts

@@ -1,4 +1,14 @@
-export declare const MenuItemsList: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
-export declare const MenuItemsListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {
+import type { HeaderVariant } from '../../types';
+export declare const MenuItemsList: import("styled-components").StyledComponent<"ul", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const SubMenuList: import("styled-components").StyledComponent<"ul", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const MenuItemsListItem: import("styled-components").StyledComponent<"li", import("@xstyled/styled-components").Theme, {
     pointer?: boolean;
+    $variant?: HeaderVariant;
+    $isActive?: boolean;
+}, never>;
+export declare const MenuItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const MenuItemDropdownArrow: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const SubMenuItemRow: import("styled-components").StyledComponent<"li", import("@xstyled/styled-components").Theme, {
+    pointer?: boolean;
+    $isActive?: boolean;
 }, never>;

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -1,22 +1,124 @@
-import styled$1 from "@xstyled/styled-components";
+import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Header/components/MenuItems/styles.ts
 const MenuItemsList = styled$1.ul`
   display: flex;
-  gap: 10px;
+  align-items: stretch;
+  gap: 12px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+
+  @media (min-width: 768px) {
+    gap: 28px;
+  }
+`;
+const SubMenuList = styled$1.ul`
+  display: none;
+  position: absolute;
+  top: calc(100% + 12px);
+  left: 0;
+  z-index: 5;
+  min-width: 220px;
+  margin: 0;
+  padding: 8px 0;
+  list-style: none;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -12px;
+    left: 0;
+    right: 0;
+    height: 12px;
+  }
 `;
 const MenuItemsListItem = styled$1.li`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  color: ${({ $variant }) => $variant === "dark" ? "white" : th.color("typoPrimary")};
   ${({ pointer }) => pointer && "cursor: pointer;"};
 
   a {
+    color: inherit;
     text-decoration: none;
-    border-color: red1;
-    color: typoPrimary;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2.5px;
+    background-color: ${th.color("red1")};
+    opacity: ${({ $isActive }) => $isActive ? 1 : 0};
+    transition: opacity 0.15s ease;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+
+  &:hover > ${SubMenuList} {
+    display: block;
+  }
+`;
+const MenuItemLabel = styled$1.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  user-select: none;
+  height: 100%;
+`;
+const MenuItemDropdownArrow = styled$1.span`
+  display: inline-flex;
+  align-items: center;
+  width: 10px;
+  height: 10px;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+
+  svg {
+    width: 10px;
+    height: 10px;
+    fill: currentColor;
+  }
+
+  ${MenuItemsListItem}:hover & {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+`;
+const SubMenuItemRow = styled$1.li`
+  display: flex;
+  align-items: stretch;
+  ${({ pointer }) => pointer && "cursor: pointer;"};
+
+  a,
+  span {
+    display: block;
+    width: 100%;
+    padding: 10px 18px;
+    color: ${({ $isActive }) => $isActive ? th.color("red1") : th.color("typoPrimary")};
+    font-weight: ${({ $isActive }) => $isActive ? 600 : 400};
+    text-decoration: none;
+    font-size: 14px;
+  }
+
+  &:hover {
+    background-color: ${th.color("lightGray7")};
   }
 
   a:hover {
-    border-bottom: 1px solid;
-    color: red1;
+    border-bottom: none;
+    color: ${({ $isActive }) => $isActive ? th.color("red1") : th.color("typoPrimary")};
   }
 `;
 //#endregion
-export { MenuItemsList, MenuItemsListItem };
+export { MenuItemDropdownArrow, MenuItemLabel, MenuItemsList, MenuItemsListItem, SubMenuItemRow, SubMenuList };

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const UserInfo: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const UserInfo: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Header/components/UserMenu/index.d.ts

@@ -1,8 +1,14 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { User } from '../../types';
 type Props = {
     user?: User | null;
     onLogout?: () => void;
+    hasUserMenu?: boolean;
+    userMenuOverride?: ReactNode;
+    withInitials?: boolean;
+    withChevron?: boolean;
+    withName?: boolean;
+    ignoreClickOutsideClosest?: string;
 };
 export declare const UserMenu: FC<Props>;
 export {};