@mailstep/design-system 0.8.34 → 0.8.35

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

@@ -4,46 +4,56 @@ import { useToggleAndClose } from "../../../../hooks/useToggleAndClose.js";
 import Avatar_default from "../../../../Elements/Avatar/index.js";
 import { UserInfoBlock } from "./components/UserInfo/index.js";
 import { useLogout } from "./hooks/useLogout.js";
-import { DropdownContentWrap, Line, UserWrap } from "./styles.js";
+import { DropdownContentWrap, Line } from "./styles.js";
 import { useRef } from "react";
+import { th, useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/Header/components/UserMenu/index.tsx
-const UserMenu = ({ user, onLogout }) => {
+const UserMenu = ({ user, onLogout, hasUserMenu, userMenuOverride, withInitials, withChevron, withName, ignoreClickOutsideClosest }) => {
 	const [isDropdownOpen, toggleDropdown, closeDropdown] = useToggleAndClose(false);
 	const parentRef = useRef(null);
+	const theme = useTheme();
 	const { handleLogout } = useLogout({
 		closeDropdown,
 		onLogout
 	});
-	return /* @__PURE__ */ jsxs(UserWrap, { children: [/* @__PURE__ */ jsx("div", {
+	if (!user) return null;
+	return /* @__PURE__ */ jsxs("div", {
 		ref: parentRef,
-		onClick: toggleDropdown,
-		children: /* @__PURE__ */ jsx(Avatar_default, {
-			colorBack: isDropdownOpen ? "lightGray7" : "neutral20",
-			size: 34
-		})
-	}), isDropdownOpen && /* @__PURE__ */ jsx(Popover, {
-		parentRef,
-		onClose: closeDropdown,
-		children: /* @__PURE__ */ jsxs(DropdownContentWrap, { children: [
-			/* @__PURE__ */ jsx(UserInfoBlock, {
-				userName: `${user?.firstName ?? ""} ${user?.lastName ?? ""}`,
-				role: user?.roles?.[0] ?? ""
-			}),
-			/* @__PURE__ */ jsx(Line, {}),
-			/* @__PURE__ */ jsx(Button_default, {
-				onClick: handleLogout,
-				iconLeft: "logout",
-				variant: "ghost",
-				fullWidth: true,
-				children: /* @__PURE__ */ jsx(Trans, {
-					id: "logout",
-					message: "Logout"
+		children: [/* @__PURE__ */ jsx(Avatar_default, {
+			user,
+			colorFront: withInitials ? th.color("white")({ theme }) : th.color("blue2")({ theme }),
+			colorBack: withInitials ? th.color("red1")({ theme }) : isDropdownOpen ? th.color("lightGray7")({ theme }) : th.color("neutral20")({ theme }),
+			hoverColorBack: withInitials ? "" : th.color("lightGray7")({ theme }),
+			size: 34,
+			onClick: hasUserMenu ? toggleDropdown : void 0,
+			withInitials,
+			withChevron,
+			withName
+		}), hasUserMenu && isDropdownOpen && /* @__PURE__ */ jsx(Popover, {
+			parentRef,
+			onClose: closeDropdown,
+			ignoreClickOutsideClosest,
+			children: userMenuOverride ?? /* @__PURE__ */ jsxs(DropdownContentWrap, { children: [
+				/* @__PURE__ */ jsx(UserInfoBlock, {
+					userName: `${user?.firstName ?? ""} ${user?.lastName ?? ""}`,
+					role: user?.roles?.[0] ?? ""
+				}),
+				/* @__PURE__ */ jsx(Line, {}),
+				/* @__PURE__ */ jsx(Button_default, {
+					onClick: handleLogout,
+					iconLeft: "logout",
+					variant: "ghost",
+					fullWidth: true,
+					children: /* @__PURE__ */ jsx(Trans, {
+						id: "logout",
+						message: "Logout"
+					})
 				})
-			})
-		] })
-	})] });
+			] })
+		})]
+	});
 };
 //#endregion
 export { UserMenu };

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

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

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

@@ -1,11 +1,5 @@
 import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Header/components/UserMenu/styles.ts
-const UserWrap = styled$1.div`
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  align-items: center;
-`;
 const DropdownContentWrap = styled$1.div`
   width: 295px;
   background-color: white;
@@ -22,4 +16,4 @@ const Line = styled$1.div`
   margin: 4px 0;
 `;
 //#endregion
-export { DropdownContentWrap, Line, UserWrap };
+export { DropdownContentWrap, Line };

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

@@ -1,19 +1,32 @@
-import { type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import type { Brand, Variant } from '../../Elements/Logo';
 import { type LanguageItem } from '../LanguageSwitch';
 import type { MenuItemType } from '../SideMenu/types';
-import type { User } from './types';
+import type { HeaderVariant, User } from './types';
 type Props = {
+    withInitials?: boolean;
+    withChevron?: boolean;
+    withName?: boolean;
     homeLink: string;
     isMobileMenuOpen?: boolean;
     logo?: Brand;
     logoVariant?: Variant;
+    logoVariantSmall?: Variant;
+    logoWidth?: string;
+    logoSmallWidth?: string;
     logoSrc?: string;
     logoSrcWidth?: string;
     user?: User | null;
     currentLanguage?: string;
     hasUserMenu?: boolean;
+    leftMenuItems?: MenuItemType[];
     rightMenuItems?: MenuItemType[];
+    rightSideStart?: ReactNode;
+    userMenuOverride?: ReactNode;
+    variant?: HeaderVariant;
+    height?: string;
+    smallLogoBreakpoint?: string;
+    mobileMenuBreakpoint?: string;
     languageItems?: LanguageItem[];
     showLanguageWithTitle?: boolean;
     languageFlagWrapBackgroundColor?: string;
@@ -21,6 +34,7 @@ type Props = {
     onChangeLanguage?: (language: string) => void;
     onLogout?: () => void;
     withLanguageSwitch?: boolean;
+    ignoreClickOutsideClosest?: string;
 };
 export declare const Header: FC<Props>;
 export {};

package/ui/Blocks/Header/index.js

@@ -1,45 +1,107 @@
 import LanguageSwitch_default from "../LanguageSwitch/index.js";
-import { HamburgerMenuButton } from "../SideMenu/components/HamburgerMenu.js";
-import "../SideMenu/index.js";
+import SideMenu_default from "../SideMenu/index.js";
 import Logo_default from "../../Elements/Logo/index.js";
+import { HamburgerToggle } from "./components/HamburgerToggle/index.js";
 import { MenuItems } from "./components/MenuItems/index.js";
 import { UserMenu } from "./components/UserMenu/index.js";
 import { useChangeLanguage } from "./hooks/useChangeLanguage.js";
 import { languageItems } from "./utils/languageItems.js";
-import { Container, LanguageWrapper, LeftSide, RightSide } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Container, HamburgerWrap, HeaderRoot, LanguageWrapper, LeftMenuDesktop, LeftSide, LogoWrap, LogoWrapSmall, MobileSideMenuPortal, RightSide } from "./styles.js";
+import { useCallback, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 //#region packages/ui/Blocks/Header/index.tsx
-const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, rightMenuItems, showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
+const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmall, logoWidth = "145px", logoSmallWidth = "45px", logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, leftMenuItems, rightMenuItems, rightSideStart, userMenuOverride, withInitials = false, withChevron = false, withName = false, variant = "light", height = "60px", smallLogoBreakpoint = "1801px", mobileMenuBreakpoint = "1024px", showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, ignoreClickOutsideClosest, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
 	const { handleChangeLanguage } = useChangeLanguage({ onChangeLanguage });
-	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsxs(LeftSide, { children: [onOpenMobileSideMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
-		isLeftMenuOpen: isMobileMenuOpen,
-		onClick: onOpenMobileSideMenu
-	}), /* @__PURE__ */ jsx(Link, {
-		to: homeLink,
-		children: logoSrc ? /* @__PURE__ */ jsx("img", {
-			src: logoSrc,
-			alt: "logo",
-			width: logoSrcWidth
-		}) : logo && /* @__PURE__ */ jsx(Logo_default, {
-			brand: logo,
-			variant: logoVariant,
-			width: "145px"
+	const hasLeftMenu = Array.isArray(leftMenuItems) && leftMenuItems.length > 0;
+	const hasInternalMobileMenu = hasLeftMenu && !onOpenMobileSideMenu;
+	const [isInternalLeftMenuOpen, setIsInternalLeftMenuOpen] = useState(false);
+	const toggleInternal = useCallback(() => {
+		setIsInternalLeftMenuOpen((s) => !s);
+	}, []);
+	const closeInternal = useCallback(() => {
+		setIsInternalLeftMenuOpen(false);
+	}, []);
+	const hamburgerOnClick = onOpenMobileSideMenu ?? (hasInternalMobileMenu ? toggleInternal : void 0);
+	return /* @__PURE__ */ jsxs(HeaderRoot, { children: [/* @__PURE__ */ jsxs(Container, {
+		$variant: variant,
+		$height: height,
+		children: [/* @__PURE__ */ jsxs(LeftSide, { children: [
+			!!hamburgerOnClick && /* @__PURE__ */ jsx(HamburgerWrap, {
+				$mobileMenuBreakpoint: mobileMenuBreakpoint,
+				children: /* @__PURE__ */ jsx(HamburgerToggle, {
+					isOpen: onOpenMobileSideMenu ? isMobileMenuOpen : isInternalLeftMenuOpen,
+					onClick: hamburgerOnClick,
+					variant
+				})
+			}),
+			/* @__PURE__ */ jsx(Link, {
+				to: homeLink,
+				children: logoSrc ? /* @__PURE__ */ jsx("img", {
+					src: logoSrc,
+					alt: "logo",
+					width: logoSrcWidth
+				}) : logo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LogoWrap, {
+					$hasSmallVariant: !!logoVariantSmall,
+					$smallLogoBreakpoint: smallLogoBreakpoint,
+					children: /* @__PURE__ */ jsx(Logo_default, {
+						brand: logo,
+						variant: logoVariant,
+						width: logoWidth
+					})
+				}), logoVariantSmall && /* @__PURE__ */ jsx(LogoWrapSmall, {
+					$smallLogoBreakpoint: smallLogoBreakpoint,
+					children: /* @__PURE__ */ jsx(Logo_default, {
+						brand: logo,
+						variant: logoVariantSmall,
+						width: logoSmallWidth
+					})
+				})] })
+			}),
+			hasLeftMenu && /* @__PURE__ */ jsx(LeftMenuDesktop, {
+				$mobileMenuBreakpoint: mobileMenuBreakpoint,
+				children: /* @__PURE__ */ jsx(MenuItems, {
+					items: leftMenuItems,
+					variant
+				})
+			})
+		] }), /* @__PURE__ */ jsxs(RightSide, { children: [
+			rightSideStart,
+			!!rightMenuItems?.length && /* @__PURE__ */ jsx(MenuItems, {
+				items: rightMenuItems,
+				variant
+			}),
+			withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, { children: /* @__PURE__ */ jsx(LanguageSwitch_default, {
+				languageItems: languageItems$1,
+				withTitle: showLanguageWithTitle,
+				onLanguageChange: handleChangeLanguage,
+				activeLanguage: currentLanguage,
+				languageFlagWrapBackgroundColor
+			}) }),
+			/* @__PURE__ */ jsx(UserMenu, {
+				ignoreClickOutsideClosest,
+				user,
+				onLogout,
+				hasUserMenu,
+				userMenuOverride,
+				withInitials,
+				withChevron,
+				withName
+			})
+		] })]
+	}), hasInternalMobileMenu && /* @__PURE__ */ jsx(MobileSideMenuPortal, {
+		$mobileMenuBreakpoint: mobileMenuBreakpoint,
+		$headerHeight: height,
+		isLeftMenuOpen: isInternalLeftMenuOpen,
+		children: /* @__PURE__ */ jsx(SideMenu_default, {
+			menuItems: leftMenuItems,
+			isCompact: false,
+			isLeftMenuOpen: isInternalLeftMenuOpen,
+			isAlwaysVisible: false,
+			onCloseLeftMenu: closeInternal,
+			variant: "dark"
 		})
-	})] }), /* @__PURE__ */ jsxs(RightSide, { children: [
-		Array.isArray(rightMenuItems) && rightMenuItems?.length > 0 && /* @__PURE__ */ jsx(MenuItems, { items: rightMenuItems }),
-		withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, { children: /* @__PURE__ */ jsx(LanguageSwitch_default, {
-			languageItems: languageItems$1,
-			withTitle: showLanguageWithTitle,
-			onLanguageChange: handleChangeLanguage,
-			activeLanguage: currentLanguage,
-			languageFlagWrapBackgroundColor
-		}) }),
-		hasUserMenu && /* @__PURE__ */ jsx(UserMenu, {
-			user,
-			onLogout
-		})
-	] })] });
+	})] });
 };
 //#endregion
 export { Header };

package/ui/Blocks/Header/stories/Header.stories.d.ts

@@ -2,16 +2,29 @@ import type { FC } from 'react';
 declare const meta: {
     title: string;
     component: FC<{
+        withInitials?: boolean;
+        withChevron?: boolean;
+        withName?: boolean;
         homeLink: string;
         isMobileMenuOpen?: boolean;
         logo?: import("../../..").Brand;
         logoVariant?: import("../../..").Variant;
+        logoVariantSmall?: import("../../..").Variant;
+        logoWidth?: string;
+        logoSmallWidth?: string;
         logoSrc?: string;
         logoSrcWidth?: string;
         user?: import("../types").User | null;
         currentLanguage?: string;
         hasUserMenu?: boolean;
+        leftMenuItems?: import("../../SideMenu").MenuItemType[];
         rightMenuItems?: import("../../SideMenu").MenuItemType[];
+        rightSideStart?: import("react").ReactNode;
+        userMenuOverride?: import("react").ReactNode;
+        variant?: import("../types").HeaderVariant;
+        height?: string;
+        smallLogoBreakpoint?: string;
+        mobileMenuBreakpoint?: string;
         languageItems?: import("../../LanguageSwitch").LanguageItem[];
         showLanguageWithTitle?: boolean;
         languageFlagWrapBackgroundColor?: string;
@@ -19,6 +32,7 @@ declare const meta: {
         onChangeLanguage?: (language: string) => void;
         onLogout?: () => void;
         withLanguageSwitch?: boolean;
+        ignoreClickOutsideClosest?: string;
     }>;
     tags: string[];
     argTypes: {};
@@ -27,6 +41,11 @@ export default meta;
 export declare const HeaderBasic: FC;
 export declare const HeaderWithUser: FC;
 export declare const HeaderWithRightLinks: FC;
+export declare const HeaderWithLeftMenuAndSubmenus: FC;
 export declare const HeaderWithLanguageSwitch: FC;
 export declare const HeaderWithCustomLogo: FC;
 export declare const HeaderWithAllItems: FC;
+export declare const HeaderWithLeftNestedMenuVariant: FC;
+export declare const HeaderMailwiseWhiteBgLogo: FC;
+export declare const HeaderResponsiveHamburger: FC;
+export declare const HeaderDarkVariantWithCustomSlots: FC;

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

@@ -1,4 +1,27 @@
-export declare const Container: import("styled-components").StyledComponent<"header", import("@xstyled/system").Theme, {}, never>;
-export declare const LeftSide: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const RightSide: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+import type { HeaderVariant } from './types';
+export declare const HeaderRoot: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"header", import("@xstyled/styled-components").Theme, {
+    $variant?: HeaderVariant;
+    $height?: string;
+}, never>;
+export declare const LeftSide: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LogoWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $hasSmallVariant?: boolean;
+    $smallLogoBreakpoint?: string;
+}, never>;
+export declare const LogoWrapSmall: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $smallLogoBreakpoint?: string;
+}, never>;
+export declare const LeftMenuDesktop: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $mobileMenuBreakpoint?: string;
+}, never>;
+export declare const HamburgerWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $mobileMenuBreakpoint?: string;
+}, never>;
+export declare const LanguageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const RightSide: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const MobileSideMenuPortal: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $mobileMenuBreakpoint?: string;
+    $headerHeight?: string;
+    isLeftMenuOpen?: boolean;
+}, never>;

package/ui/Blocks/Header/styles.js

@@ -1,14 +1,21 @@
-import { headerHeight } from "./utils/constants.js";
-import styled$1, { th } from "@xstyled/styled-components";
+import styled$1, { css, th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Header/styles.ts
+const HeaderRoot = styled$1.div`
+  position: relative;
+  width: 100%;
+`;
 const Container = styled$1.header`
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 8px;
-  height: ${headerHeight};
+  height: ${({ $height }) => $height};
   border-bottom: 1px solid ${th.color("lightGray7")};
+  ${({ $variant }) => $variant === "dark" && css`
+      background-color: ${th.color("blue3")};
+      color: white;
+    `}
 
   @media (min-width: 768px) {
     padding: 0 20px;
@@ -16,6 +23,42 @@ const Container = styled$1.header`
 `;
 const LeftSide = styled$1.div`
   display: flex;
+  gap: 4px;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    gap: 20px;
+  }
+`;
+const LogoWrap = styled$1.div`
+  display: ${({ $hasSmallVariant }) => $hasSmallVariant ? "none" : "block"};
+
+  @media (min-width: ${({ $smallLogoBreakpoint }) => $smallLogoBreakpoint}) {
+    display: block;
+  }
+`;
+const LogoWrapSmall = styled$1.div`
+  display: block;
+
+  @media (min-width: ${({ $smallLogoBreakpoint }) => $smallLogoBreakpoint}) {
+    display: none;
+  }
+`;
+const LeftMenuDesktop = styled$1.div`
+  display: none;
+  align-self: stretch;
+
+  @media (min-width: ${({ $mobileMenuBreakpoint }) => $mobileMenuBreakpoint}) {
+    display: block;
+  }
+`;
+const HamburgerWrap = styled$1.div`
+  display: flex;
+  align-items: center;
+
+  @media (min-width: ${({ $mobileMenuBreakpoint }) => $mobileMenuBreakpoint}) {
+    display: none;
+  }
 `;
 const LanguageWrapper = styled$1.div`
   display: flex;
@@ -30,5 +73,17 @@ const RightSide = styled$1.div`
     gap: 20px;
   }
 `;
+const MobileSideMenuPortal = styled$1.div`
+  position: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "fixed" : "none"};
+  top: ${({ $headerHeight }) => $headerHeight};
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 90;
+
+  @media (min-width: ${({ $mobileMenuBreakpoint }) => $mobileMenuBreakpoint}) {
+    display: none;
+  }
+`;
 //#endregion
-export { Container, LanguageWrapper, LeftSide, RightSide };
+export { Container, HamburgerWrap, HeaderRoot, LanguageWrapper, LeftMenuDesktop, LeftSide, LogoWrap, LogoWrapSmall, MobileSideMenuPortal, RightSide };

package/ui/Blocks/Header/types.d.ts

@@ -7,3 +7,4 @@ export type MenuItem = {
     name: string;
     link: string;
 };
+export type HeaderVariant = 'light' | 'dark';

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,5 +1,5 @@
-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, {
     isDisabled?: boolean;
     hasRemove?: boolean;
 }, never>;
-export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;
+export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/ImageList/components/CloseButton/styles.d.ts

@@ -1,3 +1,3 @@
-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, {
     isDisabled?: boolean;
 }, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,8 +1,8 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/styled-components").Theme, {
     selected?: boolean;
 }, never>;
-export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     visible: boolean;
     hasImageRemove: boolean;
 }, never>;

package/ui/Blocks/ImageList/components/ImageTag/styles.d.ts

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

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

@@ -1,5 +1,5 @@
-export declare const ImageListContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ImageListContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isLeft?: boolean;
     isDisabled: boolean;
     hasRemove?: boolean;

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

@@ -1,6 +1,6 @@
-export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     backgroundColor?: string;
     withTitle?: boolean;
 }, never>;

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

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

package/ui/Blocks/LoginPage/components/SocialLinks.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-export declare const SocialLinksWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const SocialLinksBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LinkTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
-export declare const SocialFooter: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const SocialLinksWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const SocialLinksBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LinkTo: import("styled-components").StyledComponent<"a", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const SocialFooter: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const SocialLinks: FC;

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

@@ -1,10 +1,10 @@
 import { BackgroundImages } from './types';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     backgroundImage?: BackgroundImages;
 }, never>;
-export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
-export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const MainLogo: import("styled-components").StyledComponent<import("react").FC<import("../../Elements/Logo/types").LogoProps>, import("@xstyled/system").Theme, {}, never>;
-export declare const Version: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const MainLogo: import("styled-components").StyledComponent<import("react").FC<import("../../Elements/Logo/types").LogoProps>, import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Version: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Modal/hooks/useClickOutside.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from 'react';
 import { type UseClickOutsideProps } from '../types';
-export declare const useClickOutside: ({ onClose, parentRef, ignoreClickOutside, closeCurrent, allowScrollbarClick }: UseClickOutsideProps) => RefObject<HTMLDivElement>;
+export declare const useClickOutside: ({ onClose, parentRef, ignoreClickOutside, closeCurrent, allowScrollbarClick, ignoreClickOutsideClosest }: UseClickOutsideProps) => RefObject<HTMLDivElement>;

package/ui/Blocks/Modal/hooks/useClickOutside.js

@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useRef } from "react";
 //#region packages/ui/Blocks/Modal/hooks/useClickOutside.ts
-const useClickOutside = ({ onClose, parentRef, ignoreClickOutside = false, closeCurrent = false, allowScrollbarClick = false }) => {
+const useClickOutside = ({ onClose, parentRef, ignoreClickOutside = false, closeCurrent = false, allowScrollbarClick = false, ignoreClickOutsideClosest }) => {
 	const elementRef = useRef(null);
 	const onCloseModal = !ignoreClickOutside ? onClose : void 0;
 	const handleClickOutside = useCallback((e) => {
-		if (!(allowScrollbarClick && e.offsetX > e.target.clientWidth) && elementRef.current && !elementRef.current.contains(e.target) && !parentRef?.current?.contains(e.target)) closeCurrent ? e.target.contains(elementRef.current) && onCloseModal?.() : onCloseModal?.();
+		const ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
+		if (ignoreClickOutsideClosest && e.target?.closest(ignoreClickOutsideClosest) !== null) return;
+		if (!ignoreEvent && elementRef.current && !elementRef.current.contains(e.target) && !parentRef?.current?.contains(e.target)) closeCurrent ? e.target.contains(elementRef.current) && onCloseModal?.() : onCloseModal?.();
 	}, [
 		allowScrollbarClick,
 		parentRef,

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

@@ -1,8 +1,8 @@
 import { type Variant } from './types';
-export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     backgroundColor?: string;
 }, never>;
-export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $backgroundColor?: string;
     $minWidth?: string;
     $minHeight?: string;
@@ -11,18 +11,18 @@ export declare const DialogWindow: import("styled-components").StyledComponent<"
     variant: Variant;
     top?: string;
 }, never>;
-export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     variant: Variant;
 }, never>;
-export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     variant: Variant;
 }, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasSpaceBetween: boolean;
 }, never>;
-export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasExtraAction: boolean;
     hasBothButtons: boolean;
 }, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;