@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/Scheduler/utils/convertMinutesToDuration.js

@@ -1,10 +1,11 @@
-//#region packages/ui/Blocks/Scheduler/utils/convertMinutesToDuration.ts
-const convertMinutesToDuration = (minutes) => {
-	const hours = Math.floor(minutes / 60);
-	const minutesLeft = minutes % 60;
-	if (!hours) return `${minutesLeft} min`;
-	if (!minutesLeft) return `${hours}h`;
-	return `${hours}h ${minutesLeft}m`;
+export var convertMinutesToDuration = function (minutes) {
+    var hours = Math.floor(minutes / 60);
+    var minutesLeft = minutes % 60;
+    if (!hours) {
+        return "".concat(minutesLeft, " min");
+    }
+    if (!minutesLeft) {
+        return "".concat(hours, "h");
+    }
+    return "".concat(hours, "h ").concat(minutesLeft, "m");
 };
-//#endregion
-export { convertMinutesToDuration };

package/ui/Blocks/Scheduler/utils/formatDate.js

@@ -1,8 +1,4 @@
-//#region packages/ui/Blocks/Scheduler/utils/formatDate.ts
-const formatDate = (date, locale = "en-GB") => date.toLocaleDateString(locale, {
-	day: "2-digit",
-	month: "long",
-	year: "numeric"
-});
-//#endregion
-export { formatDate };
+export var formatDate = function (date, locale) {
+    if (locale === void 0) { locale = 'en-GB'; }
+    return date.toLocaleDateString(locale, { day: '2-digit', month: 'long', year: 'numeric' });
+};

package/ui/Blocks/Scheduler/utils/generateTimeArray.js

@@ -1,19 +1,16 @@
-import "./constants.js";
-//#region packages/ui/Blocks/Scheduler/utils/generateTimeArray.ts
-const generateTimeArray = () => {
-	const times = [];
-	let hours = 0;
-	let minutes = 0;
-	while (hours < 24 || hours === 24 && minutes === 0) {
-		const time = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-		times.push(time);
-		minutes += 15;
-		if (minutes === 60) {
-			minutes = 0;
-			hours += 1;
-		}
-	}
-	return times;
+import { stepInMinutes } from './constants';
+export var generateTimeArray = function () {
+    var times = [];
+    var hours = 0;
+    var minutes = 0;
+    while (hours < 24 || (hours === 24 && minutes === 0)) {
+        var time = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
+        times.push(time);
+        minutes += stepInMinutes;
+        if (minutes === 60) {
+            minutes = 0;
+            hours += 1;
+        }
+    }
+    return times;
 };
-//#endregion
-export { generateTimeArray };

package/ui/Blocks/Scheduler/utils/getClosestStep.js

@@ -1,12 +1,9 @@
-import "./constants.js";
-import { getMinutesFromString } from "./getMinutesFromString.js";
-//#region packages/ui/Blocks/Scheduler/utils/getClosestStep.ts
-const getClosestStep = (date) => {
-	const totalMinutes = getMinutesFromString(date);
-	const closestStep = Math.round(totalMinutes / 15) * 15;
-	const hours = Math.floor(closestStep / 60);
-	const minutes = closestStep % 60;
-	return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+import { stepInMinutes } from './constants';
+import { getMinutesFromString } from './getMinutesFromString';
+export var getClosestStep = function (date) {
+    var totalMinutes = getMinutesFromString(date);
+    var closestStep = Math.round(totalMinutes / stepInMinutes) * stepInMinutes;
+    var hours = Math.floor(closestStep / 60);
+    var minutes = closestStep % 60;
+    return "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
 };
-//#endregion
-export { getClosestStep };

package/ui/Blocks/Scheduler/utils/getMinutesFromString.js

@@ -1,6 +1,3 @@
-import { getMinutesFromTime } from "./getMinutesFromTime.js";
-import { convertDateToTime } from "./convertDateToTime.js";
-//#region packages/ui/Blocks/Scheduler/utils/getMinutesFromString.ts
-const getMinutesFromString = (date) => getMinutesFromTime(convertDateToTime(new Date(date)));
-//#endregion
-export { getMinutesFromString };
+import { convertDateToTime } from './convertDateToTime';
+import { getMinutesFromTime } from './getMinutesFromTime';
+export var getMinutesFromString = function (date) { return getMinutesFromTime(convertDateToTime(new Date(date))); };

package/ui/Blocks/Scheduler/utils/getMinutesFromTime.js

@@ -1,7 +1,4 @@
-//#region packages/ui/Blocks/Scheduler/utils/getMinutesFromTime.ts
-const getMinutesFromTime = (time) => {
-	const [hours, minutes] = time.split(":").map(Number);
-	return hours * 60 + minutes;
+export var getMinutesFromTime = function (time) {
+    var _a = time.split(':').map(Number), hours = _a[0], minutes = _a[1];
+    return hours * 60 + minutes;
 };
-//#endregion
-export { getMinutesFromTime };

package/ui/Blocks/Scheduler/utils/isActiveTime.d.ts

@@ -1,4 +1,5 @@
 import { ActiveHours } from '../types';
+
 type Props = {
     activeHours?: ActiveHours;
     time: string;

package/ui/Blocks/Scheduler/utils/isActiveTime.js

@@ -1,11 +1,10 @@
-import { getMinutesFromTime } from "./getMinutesFromTime.js";
-//#region packages/ui/Blocks/Scheduler/utils/isActiveTime.ts
-const isActiveTime = ({ activeHours, time }) => {
-	if (!activeHours) return true;
-	const startMinutes = getMinutesFromTime(activeHours.start);
-	const endMinutes = getMinutesFromTime(activeHours.end);
-	const timeInMinutes = getMinutesFromTime(time);
-	return timeInMinutes >= startMinutes && timeInMinutes <= endMinutes;
+import { getMinutesFromTime } from './getMinutesFromTime';
+export var isActiveTime = function (_a) {
+    var activeHours = _a.activeHours, time = _a.time;
+    if (!activeHours)
+        return true;
+    var startMinutes = getMinutesFromTime(activeHours.start);
+    var endMinutes = getMinutesFromTime(activeHours.end);
+    var timeInMinutes = getMinutesFromTime(time);
+    return timeInMinutes >= startMinutes && timeInMinutes <= endMinutes;
 };
-//#endregion
-export { isActiveTime };

package/ui/Blocks/Scheduler/utils/isToday.js

@@ -1,7 +1,4 @@
-//#region packages/ui/Blocks/Scheduler/utils/isToday.ts
-const isToday = (date) => {
-	const today = /* @__PURE__ */ new Date();
-	return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+export var isToday = function (date) {
+    var today = new Date();
+    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
 };
-//#endregion
-export { isToday };

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

@@ -1,5 +1,6 @@
-import React from 'react';
-import { type MenuItemType } from './types';
+import { default as React } from 'react';
+import { MenuItemType } from './types';
+
 type Props = MenuItemType & {
     isSubitem?: boolean;
     isCompact: boolean;

package/ui/Blocks/SideMenu/MenuItem.js

@@ -1,103 +1,54 @@
-import Icon from "../../Elements/Icon/Icon.js";
-import { Paragraph3, Paragraph5 } from "../../Elements/Typography/Typography.js";
-import { ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
-import SubitemTooltip from "./components/SubitemTooltip.js";
-import { useLeftMenuContext } from "./context/useLeftMenuContext.js";
-import useOutSideHover from "./hooks/useOutsideHover.js";
-import { memo, useCallback, useMemo, useRef } from "react";
-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 { expandedItem, expandItem } = useLeftMenuContext();
-	const isExpanded = expandedItem === id;
-	const toggleChildren = useCallback(() => {
-		hasChildren && expandItem(isExpanded ? null : id ?? null);
-		!hasChildren && !lightMode && onCloseLeftMenu && onCloseLeftMenu();
-	}, [
-		hasChildren,
-		expandItem,
-		isExpanded,
-		id,
-		lightMode,
-		onCloseLeftMenu
-	]);
-	const linkProps = useMemo(() => link.startsWith("https://") ? {
-		to: { pathname: link },
-		target: "_blank"
-	} : { to: link }, [link]);
-	const Title = isCompact ? Paragraph5 : Paragraph3;
-	const listExpandedItems = isExpanded && !isCompact;
-	const parentRef = useRef(null);
-	const { ref: childRef, isHovering, handleMouseOver } = useOutSideHover({ parentRef });
-	let itemLinkWrapClassName = !isSubitem ? "toplevel" : "nestedlevel";
-	if (isExpanded) itemLinkWrapClassName += " expanded";
-	if (separator) itemLinkWrapClassName += " separator";
-	const isActive = useCallback((match, location) => {
-		const childSelected = !!items?.find((item) => item.link?.replace(removeOptionalEnd, "") === location.pathname);
-		const isActive = !!matchPath(location.pathname, { path: match?.path });
-		const partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes("/settings/");
-		return isActive || childSelected || partialMatch;
-	}, [items, link]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		separator && /* @__PURE__ */ jsx(ItemsSeparator, {}),
-		/* @__PURE__ */ jsxs(MenuItemContainer, {
-			ref: parentRef,
-			$isCompact: isCompact,
-			$lightMode: lightMode,
-			hasChildren,
-			isHovering,
-			children: [/* @__PURE__ */ jsxs(ItemLinkWrap, {
-				...linkProps,
-				onMouseOver: handleMouseOver,
-				exact: true,
-				activeClassName: hasChildren ? "selected" : void 0,
-				onClick: toggleChildren,
-				$isCompact: isCompact,
-				className: itemLinkWrapClassName,
-				isActive,
-				$lightMode: lightMode,
-				children: [/* @__PURE__ */ jsxs(ItemLabel, {
-					$isCompact: isCompact,
-					isSubitem,
-					children: [!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
-						className: "mainIcon",
-						$isCompact: isCompact,
-						children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
-							icon,
-							fill: "none"
-						}) : icon
-					}), /* @__PURE__ */ jsx(Title, {
-						variant: "semiBold",
-						mt: 0,
-						mb: 0,
-						textAlign: isCompact ? "center" : "left",
-						children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
-					})]
-				}), !isCompact && hasChildren && /* @__PURE__ */ jsx(ItemDropdownArrow, {
-					icon: "goDown",
-					$lightMode: lightMode
-				})]
-			}), isHovering && isCompact && hasChildren && !listExpandedItems && /* @__PURE__ */ jsx(SubitemTooltip, {
-				items,
-				childRef,
-				parentRef,
-				isLeftMenuOpen,
-				onCloseLeftMenu,
-				lightMode
-			})]
-		}),
-		hasChildren && listExpandedItems && /* @__PURE__ */ jsx(SubItemsWrap, { children: items?.map((item, index) => /* @__PURE__ */ jsx(MenuItem, {
-			isCompact,
-			lightMode,
-			...item,
-			onCloseLeftMenu,
-			isSubitem: true
-		}, `${index}`)) })
-	] });
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-var MenuItem_default = memo(MenuItem);
-//#endregion
-export { MenuItem_default as default };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { matchPath } from 'react-router';
+import Icon from '../../Elements/Icon/Icon';
+import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
+import SubitemTooltip from './components/SubitemTooltip';
+import { useLeftMenuContext } from './context/useLeftMenuContext';
+import useOutSideHover from './hooks/useOutsideHover';
+import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
+var removeOptionalEnd = /\?$/;
+var MenuItem = function (_a) {
+    var icon = _a.icon, title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, items = _a.items, id = _a.id, isSubitem = _a.isSubitem, isCompact = _a.isCompact, _c = _a.lightMode, lightMode = _c === void 0 ? false : _c, _d = _a.separator, separator = _d === void 0 ? false : _d, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu;
+    var hasChildren = useMemo(function () { return items && (items === null || items === void 0 ? void 0 : items.length) > 0; }, [items]);
+    var _e = useLeftMenuContext(), expandedItem = _e.expandedItem, expandItem = _e.expandItem;
+    var isExpanded = expandedItem === id;
+    var toggleChildren = useCallback(function () {
+        hasChildren && expandItem(isExpanded ? null : id !== null && id !== void 0 ? id : null);
+        !hasChildren && !lightMode && onCloseLeftMenu && onCloseLeftMenu();
+    }, [hasChildren, expandItem, isExpanded, id, lightMode, onCloseLeftMenu]);
+    var linkProps = useMemo(function () { return (link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link }); }, [link]);
+    var Title = isCompact ? Paragraph5 : Paragraph3;
+    var listExpandedItems = isExpanded && !isCompact;
+    var parentRef = useRef(null);
+    var _f = useOutSideHover({ parentRef: parentRef }), childRef = _f.ref, isHovering = _f.isHovering, handleMouseOver = _f.handleMouseOver;
+    var itemLinkWrapClassName = !isSubitem ? 'toplevel' : 'nestedlevel';
+    if (isExpanded) {
+        itemLinkWrapClassName += ' expanded';
+    }
+    if (separator) {
+        itemLinkWrapClassName += ' separator';
+    }
+    var isActive = useCallback(function (match, location) {
+        var childSelected = !!(items === null || items === void 0 ? void 0 : items.find(function (item) { var _a; return ((_a = item.link) === null || _a === void 0 ? void 0 : _a.replace(removeOptionalEnd, '')) === location.pathname; }));
+        var isActive = !!matchPath(location.pathname, { path: match === null || match === void 0 ? void 0 : match.path });
+        // partial match helps to match paths with parameters which are not matched by matchPath above
+        var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes('/settings/');
+        return isActive || childSelected || partialMatch;
+    }, [items, link]);
+    return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
+                        // @ts-expect-error
+                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: isCompact ? 'center' : 'left', children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
+};
+export default memo(MenuItem);

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

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
-import { type SideMenuProps } from './types';
+import { FC } from 'react';
+import { SideMenuProps } from './types';
+
 declare const SideMenu: FC<SideMenuProps>;
 export default SideMenu;

package/ui/Blocks/SideMenu/SideMenu.js

@@ -1,37 +1,27 @@
-import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
-import MenuFooter from "./components/Footer.js";
-import { LeftMenuProvider } from "./context/LeftMenuContext.js";
-import { BodyWrap, Container, Overlay, ScrollWrap, TopLevelWrap } from "./styles.js";
-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 lightMode = variant === "light";
-	return /* @__PURE__ */ jsx(LeftMenuProvider, { children: /* @__PURE__ */ jsxs(Container, {
-		isLeftMenuOpen,
-		children: [/* @__PURE__ */ jsxs(TopLevelWrap, {
-			isCompact,
-			isLeftMenuOpen,
-			ref: useClickOutside({ onClose: onCloseLeftMenu }),
-			lightMode,
-			children: [/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
-				isCompact,
-				children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
-					isCompact,
-					isLeftMenuOpen,
-					onCloseLeftMenu,
-					lightMode,
-					separator: !!item.separator,
-					...item
-				}, `${item.id ?? item.title}-${index}`)), children]
-			}) }), /* @__PURE__ */ jsx(MenuFooter, {
-				isCompact,
-				setIsCompact,
-				lightMode
-			})]
-		}), /* @__PURE__ */ jsx(Overlay, {})]
-	}) });
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { SideMenu as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClickOutside } from '../Modal/hooks/useClickOutside';
+import FooterRow from './components/Footer';
+import { LeftMenuProvider } from './context/LeftMenuContext';
+import MenuItem from './MenuItem';
+import { TopLevelWrap, ScrollWrap, BodyWrap, Overlay, Container } from './styles';
+var SideMenu = function (_a) {
+    var menuItems = _a.menuItems, isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, children = _a.children;
+    var lightMode = variant === 'light';
+    var pickerRef = useClickOutside({ onClose: onCloseLeftMenu });
+    return (_jsx(LeftMenuProvider, { children: _jsxs(Container, { isLeftMenuOpen: isLeftMenuOpen, children: [_jsxs(TopLevelWrap, { isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, ref: pickerRef, lightMode: lightMode, children: [_jsx(ScrollWrap, { children: _jsxs(BodyWrap, { isCompact: isCompact, children: [menuItems.map(function (item, index) {
+                                        var _a;
+                                        return (_jsx(MenuItem, __assign({ isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode, separator: !!item.separator }, item), "".concat((_a = item.id) !== null && _a !== void 0 ? _a : item.title, "-").concat(index)));
+                                    }), children] }) }), _jsx(FooterRow, { isCompact: isCompact, setIsCompact: setIsCompact, lightMode: lightMode })] }), _jsx(Overlay, {})] }) }));
+};
+export default SideMenu;

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

@@ -1,10 +1,11 @@
-import { type FC } from 'react';
-export declare const FooterWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+import { FC } from 'react';
+
+export declare const FooterWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').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/system').Theme, {
     isCompact: boolean;
-    $lightMode?: boolean;
+    $lightMode?: boolean | undefined;
 }, never>;
 type Props = {
     isCompact: boolean;

package/ui/Blocks/SideMenu/components/Footer.js

@@ -1,64 +1,28 @@
-import { MenuItems } from "../../../Elements/Icon/icons/MenuItems.js";
-import { Paragraph4 } from "../../../Elements/Typography/Typography.js";
-import "../../../Elements/Typography/index.js";
-import { useCallback } from "react";
-import styled$1, { css } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Blocks/SideMenu/components/Footer.tsx
-const FooterWrap = styled$1.div`
-  display: flex;
-  align-items: center;
-  height: 24px;
-  width: 100%;
-  margin-bottom: 24px;
-  justify-content: ${(props) => props.isCompact ? "center" : "flex-start"};
-  padding-left: ${(props) => props.isCompact ? "0" : "22px"};
-`;
-const SizeToggle = styled$1.div`
-  display: none;
-  @media (min-width: 1024px) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : th$1.color("gray")};
-    font-size: 11px;
-    & svg {
-      transform: ${(props) => props.isCompact ? "rotate(180deg)" : "rotate(0deg)"};
-      ${({ $lightMode }) => $lightMode && css`
-          fill: ${th$1.color("neutral20")};
-        `}
-
-      & > path {
-        stroke: ${th$1.color("lightGray5")};
-      }
-    }
-  }
-`;
-const MenuFooter = ({ isCompact, setIsCompact, lightMode }) => {
-	return /* @__PURE__ */ jsx(FooterWrap, {
-		isCompact,
-		children: /* @__PURE__ */ jsxs(SizeToggle, {
-			onClick: useCallback(() => {
-				setIsCompact?.(!isCompact);
-			}, [setIsCompact, isCompact]),
-			isCompact,
-			$lightMode: lightMode,
-			children: [/* @__PURE__ */ jsx(MenuItems, {
-				stroke: "none",
-				width: "24px"
-			}), !isCompact && /* @__PURE__ */ jsx(Paragraph4, {
-				ml: 2,
-				variant: "semiBold",
-				children: /* @__PURE__ */ jsx(Trans, {
-					id: "footer.collapse",
-					message: "Collapse"
-				})
-			})]
-		})
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { FooterWrap, SizeToggle, MenuFooter as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { MenuItems } from '../../../Elements/Icon/icons/MenuItems';
+import { Paragraph4 } from '../../../Elements/Typography';
+import { Trans } from '@lingui/react';
+import styled, { css } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+export var FooterWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ", ";\n  padding-left: ", ";\n"])), function (props) { return (props.isCompact ? 'center' : 'flex-start'); }, function (props) { return (props.isCompact ? '0' : '22px'); });
+export var SizeToggle = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"], ["\n  display: none;\n  @media (min-width: 1024px) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    color: ", ";\n    font-size: 11px;\n    & svg {\n      transform: ", ";\n      ", "\n\n      & > path {\n        stroke: ", ";\n      }\n    }\n  }\n"])), function (_a) {
+    var $lightMode = _a.$lightMode;
+    return ($lightMode ? th.color('typoPrimary') : th.color('gray'));
+}, function (props) { return (props.isCompact ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
+    var $lightMode = _a.$lightMode;
+    return $lightMode && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          fill: ", ";\n        "], ["\n          fill: ", ";\n        "])), th.color('neutral20'));
+}, th.color('lightGray5'));
+var MenuFooter = function (_a) {
+    var isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, lightMode = _a.lightMode;
+    var toggleIsCompact = useCallback(function () {
+        setIsCompact === null || setIsCompact === void 0 ? void 0 : setIsCompact(!isCompact);
+    }, [setIsCompact, isCompact]);
+    return (_jsx(FooterWrap, { isCompact: isCompact, children: _jsxs(SizeToggle, { onClick: toggleIsCompact, isCompact: isCompact, "$lightMode": lightMode, children: [_jsx(MenuItems, { stroke: "none", width: "24px" }), !isCompact && (_jsx(Paragraph4, { ml: 2, variant: "semiBold", children: _jsx(Trans, { id: "footer.collapse", message: "Collapse" }) }))] }) }));
+};
+export default MenuFooter;
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -1,52 +1,23 @@
-import { HamburgerMenu } from "../../../Elements/Icon/icons/HamburgerMenu.js";
-import { MobileCancel } from "../../../Elements/Icon/icons/MobileCancel.js";
-import "react";
-import { css, useTheme, x } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-import { jsx } from "react/jsx-runtime";
-import styled$2 from "styled-components";
-//#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
-const HamburgerMenuWrapper = styled$2(x.div)`
-  width: 36px;
-  height: 36px;
-  border-radius: 70px;
-  background-color: ${th$1.color("neutral20")};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-shadow: ${th$1.shadow("dropShadow")};
-  &:hover {
-    cursor: pointer;
-  }
-
-  ${({ isLeftMenuOpen }) => isLeftMenuOpen ? css`
-          position: absolute;
-          left: 92%;
-          top: 7px;
-          z-index: 6;
-        ` : css`
-          & > svg > path {
-            stroke: ${th$1.color("blue2")};
-          }
-        `};
-
-  @media (min-width: 1024px) {
-    display: none;
-  }
-`;
-const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
-	const theme = useTheme();
-	const neutralColor = th$1.color("neutral20")({ theme });
-	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
-		mr: "8px",
-		onClick,
-		isLeftMenuOpen: !!isLeftMenuOpen,
-		children: isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, { fill: neutralColor }) : /* @__PURE__ */ jsx(HamburgerMenu, {
-			fill: neutralColor,
-			stroke: "none"
-		})
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { HamburgerMenuButton };
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
+import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
+import { css, x, useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen;
+    return isLeftMenuOpen
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "], ["\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          & > svg > path {\n            stroke: ", ";\n          }\n        "], ["\n          & > svg > path {\n            stroke: ", ";\n          }\n        "])), th.color('blue2'));
+});
+export var HamburgerMenuButton = function (_a) {
+    var isLeftMenuOpen = _a.isLeftMenuOpen, onClick = _a.onClick;
+    var theme = useTheme();
+    var neutralColor = th.color('neutral20')({ theme: theme });
+    var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
+    return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
+};
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,5 +1,6 @@
-import { type MutableRefObject, type FC } from 'react';
-import { type MenuItemType } from '../types';
+import { MutableRefObject, FC } from 'react';
+import { MenuItemType } from '../types';
+
 type Props = {
     itemsOpen?: number;
     childRef: MutableRefObject<HTMLElement | null>;