@mailstep/design-system 0.8.34 → 0.8.36

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

@@ -44,4 +44,5 @@ export interface UseClickOutsideProps {
     parentRef?: MutableRefObject<HTMLDivElement | null | undefined>;
     closeCurrent?: boolean;
     allowScrollbarClick?: boolean;
+    ignoreClickOutsideClosest?: string;
 }

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

@@ -7,6 +7,7 @@ type DropdownMenuProps = {
     children: React.ReactNode;
     placement?: Placement;
     wrapper?: StyledComponent<any, any>;
+    ignoreClickOutsideClosest?: string;
 };
 declare const Popover: FC<DropdownMenuProps>;
 export default Popover;

package/ui/Blocks/Popover/index.js

@@ -8,10 +8,11 @@ import { Popper } from "react-popper";
 const PopoverWrapper = styled$1.div`
   z-index: 5;
 `;
-const Popover = ({ placement, wrapper, children, onClose, parentRef }) => {
+const Popover = ({ placement, wrapper, children, onClose, parentRef, ignoreClickOutsideClosest }) => {
 	const popperRef = useClickOutside({
 		onClose,
-		parentRef
+		parentRef,
+		ignoreClickOutsideClosest
 	});
 	const Wrapper = wrapper || PopoverWrapper;
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {

package/ui/Blocks/Scheduler/components/BookedTimeSlots/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const BookedTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const BookedTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     startPoint: number;
     heightInMinutes: number;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Body: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const CurrentTimeContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const CurrentTimeContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     minutes: number;
 }, never>;
-export declare const CurrentTime: 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 CurrentTime: 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/Scheduler/components/DateChanger/styles.d.ts

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

package/ui/Blocks/Scheduler/components/Groups/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const GroupContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const GroupItem: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const GroupContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const GroupItem: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     bg?: string;
     groupsCount: number;
 }, never>;
-export declare const Gap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Gap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Scheduler/components/TimeSlots/styles.d.ts

@@ -1,10 +1,10 @@
-export declare const TimeSlotsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const TimeRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TimeSlotsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const TimeRow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const EmptyTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const EmptyTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isSlotSelected?: boolean;
     activeTime: boolean;
     groupsCount: number;
 }, never>;
-export declare const TimeInterval: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const TimeInterval: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

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

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

package/ui/Blocks/SideMenu/MenuItem.js

@@ -9,20 +9,25 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { matchPath } from "react-router";
 //#region packages/ui/Blocks/SideMenu/MenuItem.tsx
 const removeOptionalEnd = /\?$/;
-const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu }) => {
-	const hasChildren = useMemo(() => items && items?.length > 0, [items]);
+const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
+	const hasChildren = items && items?.length > 0;
 	const { expandedItem, expandItem } = useLeftMenuContext();
 	const isExpanded = expandedItem === id;
 	const toggleChildren = useCallback(() => {
-		hasChildren && expandItem(isExpanded ? null : id ?? null);
-		!hasChildren && !lightMode && onCloseLeftMenu && onCloseLeftMenu();
+		if (hasChildren) {
+			expandItem(isExpanded ? null : id ?? null);
+			return;
+		}
+		onClick?.();
+		if (!lightMode) onCloseLeftMenu?.();
 	}, [
 		hasChildren,
 		expandItem,
 		isExpanded,
 		id,
 		lightMode,
-		onCloseLeftMenu
+		onCloseLeftMenu,
+		onClick
 	]);
 	const linkProps = useMemo(() => link.startsWith("https://") ? {
 		to: { pathname: link },
@@ -52,13 +57,16 @@ const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lig
 			children: [/* @__PURE__ */ jsxs(ItemLinkWrap, {
 				...linkProps,
 				onMouseOver: handleMouseOver,
-				exact: true,
-				activeClassName: hasChildren ? "selected" : void 0,
 				onClick: toggleChildren,
 				$isCompact: isCompact,
 				className: itemLinkWrapClassName,
-				isActive,
 				$lightMode: lightMode,
+				as: link ? void 0 : "a",
+				...link ? {
+					exact: true,
+					activeClassName: hasChildren ? "selected" : void 0,
+					isActive
+				} : {},
 				children: [/* @__PURE__ */ jsxs(ItemLabel, {
 					$isCompact: isCompact,
 					isSubitem,

package/ui/Blocks/SideMenu/SideMenu.js

@@ -6,10 +6,11 @@ import MenuItem_default from "./MenuItem.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/SideMenu/SideMenu.tsx
-const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, onCloseLeftMenu, variant = "dark", children }) => {
+const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, variant = "dark", children }) => {
 	const lightMode = variant === "light";
 	return /* @__PURE__ */ jsx(LeftMenuProvider, { children: /* @__PURE__ */ jsxs(Container, {
 		isLeftMenuOpen,
+		isAlwaysVisible,
 		children: [/* @__PURE__ */ jsxs(TopLevelWrap, {
 			isCompact,
 			isLeftMenuOpen,

package/ui/Blocks/SideMenu/components/Footer.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-export declare const FooterWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const FooterWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isCompact: boolean;
 }, never>;
-export declare const SizeToggle: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const SizeToggle: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isCompact: boolean;
     $lightMode?: boolean;
 }, never>;

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

@@ -1,42 +1,43 @@
 import { NavLink } from 'react-router-dom';
-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, {
     isLeftMenuOpen?: boolean;
+    isAlwaysVisible?: boolean;
 }, never>;
-export declare const SubItemsWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemsSeparator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const SubItemsWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemsSeparator: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
     isSubitem?: boolean;
 }, never>;
-export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
+export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/styled-components").Theme, {
     $lightMode?: boolean;
 }, never>;
-export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/system").Theme, {
+export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
     appearance?: "gray" | "default";
 }, never>;
-export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
     hasChildren?: boolean;
     isHovering?: boolean;
 }, never>;
-export declare const ItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+export declare const ItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
 }, never>;
-export declare const TooltipWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TooltipWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $lightMode?: boolean;
 }, never>;
-export declare const OverflowWithEllipsis: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const TopLevelWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const OverflowWithEllipsis: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const TopLevelWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isCompact: boolean;
     isLeftMenuOpen?: boolean;
     lightMode?: boolean;
 }, never>;
-export declare const ScrollWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const BodyWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ScrollWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const BodyWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isCompact: boolean;
 }, never>;
-export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/SideMenu/styles.js

@@ -30,7 +30,7 @@ const Container = styled$1.div`
   display: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "block" : "none"};
 
   @media (min-width: 1024px) {
-    display: block;
+    display: ${({ isAlwaysVisible, isLeftMenuOpen }) => isAlwaysVisible || isLeftMenuOpen ? "block" : "none"};
     align-self: stretch;
     height: fit-content;
 

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

@@ -16,6 +16,7 @@ export type SideMenuProps = {
     isCompact: boolean;
     setIsCompact?: (compact: boolean) => void;
     isLeftMenuOpen?: boolean;
+    isAlwaysVisible?: boolean;
     onCloseLeftMenu?: () => void;
     variant?: 'dark' | 'light';
     children?: ReactNode;

package/ui/Blocks/Stepper/components/StepCircle/styles.d.ts

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

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isActiveStep: boolean;
     isDisabled?: boolean;
     isVisible?: boolean;
     total: number;
     onClick?: () => void;
 }, never>;
-export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isActiveStep: boolean;
     isCompletedStep: boolean;
 }, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

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

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

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

@@ -1,12 +1,12 @@
-export declare const StyledImageBox: 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 StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const RoundedWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledImageBox: 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 StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const RoundedWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     active: boolean;
     disabled?: boolean;
     minWidth?: string | string[];
 }, never>;
-export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $mb?: string;
     $mt?: string;
 }, never>;

package/ui/Elements/Alert/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
     $inline?: boolean;
     $colorFill: string;
     $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
     $colorFill?: string;
 }, "color">;
-export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
 export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const LinkWrapper: import("styled-components").StyledComponent<import("react").FC<{
@@ -30,4 +30,4 @@ export declare const ActionButton: import("styled-components").StyledComponent<"
     $colorFill: string;
 }, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, import("@xstyled/util").Props<import("@xstyled/system").Theme>, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme>, never>;

package/ui/Elements/Avatar/Avatar.js

@@ -1,38 +1,42 @@
 import { Profile } from "../Icon/icons/Profile.js";
+import Icon from "../Icon/Icon.js";
 import "../Icon/index.js";
-import "react";
-import styled$1, { th } from "@xstyled/styled-components";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { AvatarWrap, Chevron, StyledAvatarWrap } from "./styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Elements/Avatar/Avatar.tsx
-const defaultDimension = 100;
-const StyledAvatarWrap = styled$1.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : "auto"};
-  background-color: ${(props) => props.$colorBack ? th.color(props.$colorBack) : "auto"};
-  width: ${(props) => `${props.size}px`};
-  height: ${(props) => `${props.size}px`};
-  :hover {
-    background-color: ${(props) => props.$hoverColorBack ? th.color(props.$hoverColorBack) : "auto"};
-  }
-`;
-const Avatar = ({ src, size = defaultDimension, colorFront, colorBack, className, hoverColorBack, ...rest }) => {
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(StyledAvatarWrap, {
-		size: size || 34,
-		className,
-		$colorBack: colorBack || "neutral20",
-		$colorFront: colorFront || "blue2",
-		$hoverColorBack: hoverColorBack || "lightGray7",
-		...rest,
-		children: src ? /* @__PURE__ */ jsx("img", {
-			src,
-			width: size,
-			height: size
-		}) : /* @__PURE__ */ jsx(Profile, { stroke: colorFront || "blue2" })
-	}) });
+const getInitials = (user) => {
+	const initials = `${user?.firstName?.[0] ?? ""}${user?.lastName?.[0] ?? ""}`.toUpperCase();
+	if (initials) return initials;
+	return (user?.username ?? "?").slice(0, 2).toUpperCase();
+};
+const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName }) => {
+	return /* @__PURE__ */ jsxs(AvatarWrap, {
+		onClick,
+		children: [
+			/* @__PURE__ */ jsxs(StyledAvatarWrap, {
+				size,
+				className,
+				$colorBack: colorBack,
+				$colorFront: colorFront,
+				$hoverColorBack: hoverColorBack,
+				children: [
+					!!src && /* @__PURE__ */ jsx("img", {
+						src,
+						width: size,
+						height: size
+					}),
+					!!withInitials && getInitials(user),
+					!src && !withInitials && /* @__PURE__ */ jsx(Profile, { stroke: colorFront })
+				]
+			}),
+			withName && user?.username,
+			withChevron && /* @__PURE__ */ jsx(Chevron, { children: /* @__PURE__ */ jsx(Icon, {
+				icon: "goDown",
+				fill: "white",
+				size: 10
+			}) })
+		]
+	});
 };
 //#endregion
 export { Avatar };

package/ui/Elements/Avatar/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const AvatarWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    onClick?: () => void;
+}, never>;
+export declare const StyledAvatarWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    size: number;
+    $colorBack?: string;
+    $colorFront?: string;
+    $hoverColorBack?: string;
+}, never>;
+export declare const Chevron: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Elements/Avatar/styles.js

@@ -0,0 +1,39 @@
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Avatar/styles.ts
+const AvatarWrap = styled$1.div`
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  cursor: ${({ onClick }) => onClick ? "pointer" : "inherit"};
+  align-items: center;
+  position: relative;
+  &::selection {
+    background: transparent;
+  }
+`;
+const StyledAvatarWrap = styled$1.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  font-size: 14px;
+  white-space: nowrap;
+  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : th.color("blue2")};
+  background-color: ${(props) => props.$colorBack ? th.color(props.$colorBack) : ""};
+  width: ${(props) => `${props.size}px`};
+  height: ${(props) => `${props.size}px`};
+  :hover {
+    background-color: ${(props) => props.$hoverColorBack ? th.color(props.$hoverColorBack) : ""};
+  }
+  svg {
+    stroke: ${({ $colorFront }) => $colorFront ? th.color($colorFront) : th.color("blue2")};
+  }
+`;
+const Chevron = styled$1.div`
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.6;
+`;
+//#endregion
+export { AvatarWrap, Chevron, StyledAvatarWrap };

package/ui/Elements/Avatar/types.d.ts

@@ -1,8 +1,18 @@
 export type Props = {
+    user?: {
+        firstName?: string;
+        lastName?: string;
+        username?: string;
+        roles?: string[];
+    };
     src?: string;
     size?: number;
     className?: string;
     colorFront?: string;
     colorBack?: string;
     hoverColorBack?: string;
+    onClick?: () => void;
+    withInitials?: boolean;
+    withChevron?: boolean;
+    withName?: boolean;
 };

package/ui/Elements/BarChartSymbol/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     height: number;
     minHeight: number;
     index: number;

package/ui/Elements/Button/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StyledWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $addMarginRight: boolean;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/styled-components").Theme, {
     $addMarginRight?: boolean;
     $addMarginLeft?: boolean;
 }, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;

package/ui/Elements/Card/styles.d.ts

@@ -1,5 +1,5 @@
 import { Display } from './types';
-export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     display: Display;
     bg?: string;
     hasOnClick: boolean;

package/ui/Elements/CheckedCircle/styles.d.ts

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

package/ui/Elements/DatePicker/Datetime/components/FooterRow.d.ts

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

package/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.d.ts

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

package/ui/Elements/DatePicker/Datetime/components/TimeInput.d.ts

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

package/ui/Elements/DatePicker/styles.d.ts

@@ -1 +1 @@
-export declare const DatePickerBase: 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 DatePickerBase: 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/Elements/DropdownSelect/DropdownSelect.d.ts

@@ -16,7 +16,7 @@ type DropdownSelectProps = {
     disabled?: boolean;
     ButtonComponent?: React.FC;
 };
-export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
+export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {}, never>;
 declare const DropdownSelect: React.FC<DropdownSelectProps>;
 export default DropdownSelect;
 export type { Item as DropdownSelectItem };

package/ui/Elements/Icon/Icon.js

@@ -243,7 +243,7 @@ const FaIconSizing = styled$1.div`
   --fa-secondary-opacity: 1;
   display: ${({ $fixedWidth }) => $fixedWidth ? "contents" : "block"};
 `;
-const Icon = ({ icon, fill, stroke, style = "normal", size, className, secondaryColor, fixedWidth = true, spinning }) => {
+const Icon = ({ icon, fill, stroke, style = "normal", size, width, height, className, secondaryColor, fixedWidth = true, spinning, onClick, cursor }) => {
 	const theme = useTheme();
 	const colorFill = fill && th.color(fill)({ theme });
 	const colorStroke = stroke && th.color(stroke)({ theme });
@@ -260,21 +260,23 @@ const Icon = ({ icon, fill, stroke, style = "normal", size, className, secondary
 	const flipProp = namedIcon && Array.isArray(namedIcon) && namedIcon[1] || void 0;
 	const IconComponent = icons_exports[icon];
 	return /* @__PURE__ */ jsx(FaIconSizing, {
-		size,
+		size: size ?? width ?? height,
 		className: className ?? "",
 		$colorSecondary: colorSecondary,
 		$fixedWidth: fixedWidth,
 		children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
 			fill: colorFill,
 			stroke: colorStroke,
-			...size ? {
-				width: size,
-				height: size
-			} : {}
+			onClick,
+			cursor: cursor ?? (onClick ? "pointer" : void 0),
+			...width ?? size ? { width: width ?? size } : {},
+			...height ?? size ? { height: height ?? size } : {}
 		}) : /* @__PURE__ */ jsx(FontAwesomeIcon, {
 			color: colorFill,
 			flip: flipProp,
 			icon: iconProp,
+			onClick,
+			style: onClick ? { cursor: cursor ?? "pointer" } : cursor ? { cursor } : void 0,
 			className: `faIcon ${fixedWidth ? "fa-fw" : ""} ${spinning ? "fa-spin" : ""}`
 		})
 	});