@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Blocks/SideMenu/MenuItem.js

@@ -0,0 +1,196 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { Fragment, jsx, jsxs } 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 MenuItem1(param) {
+    var icon = param.icon, title = param.title, _param_link = param.link, link = _param_link === void 0 ? "" : _param_link, items = param.items, id = param.id, isSubitem = param.isSubitem, isCompact = param.isCompact, _param_lightMode = param.lightMode, lightMode = _param_lightMode === void 0 ? false : _param_lightMode, _param_separator = param.separator, separator = _param_separator === void 0 ? false : _param_separator, isLeftMenuOpen = param.isLeftMenuOpen, onCloseLeftMenu = param.onCloseLeftMenu;
+    var hasChildren = useMemo(function() {
+        return items && (items === null || items === void 0 ? void 0 : items.length) > 0;
+    }, [
+        items
+    ]);
+    var _useLeftMenuContext = useLeftMenuContext(), expandedItem = _useLeftMenuContext.expandedItem, expandItem = _useLeftMenuContext.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 _useOutSideHover = useOutSideHover({
+        parentRef: parentRef
+    }), childRef = _useOutSideHover.ref, isHovering = _useOutSideHover.isHovering, handleMouseOver = _useOutSideHover.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 _item_link;
+            return ((_item_link = item.link) === null || _item_link === void 0 ? void 0 : _item_link.replace(removeOptionalEnd, "")) === location.pathname;
+        }));
+        var isActive2 = !!matchPath(location.pathname, {
+            path: match === null || match === void 0 ? void 0 : match.path
+        });
+        var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes("/settings/");
+        return isActive2 || childSelected || partialMatch;
+    }, [
+        items,
+        link
+    ]);
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            separator && /* @__PURE__ */ jsx(ItemsSeparator, {}),
+            /* @__PURE__ */ jsxs(MenuItemContainer, {
+                ref: parentRef,
+                $isCompact: isCompact,
+                $lightMode: lightMode,
+                hasChildren: hasChildren,
+                isHovering: isHovering,
+                children: [
+                    /* @__PURE__ */ jsxs(ItemLinkWrap, _object_spread_props(_object_spread({}, linkProps), {
+                        onMouseOver: handleMouseOver,
+                        exact: true,
+                        activeClassName: hasChildren ? "selected" : void 0,
+                        onClick: toggleChildren,
+                        $isCompact: isCompact,
+                        className: itemLinkWrapClassName,
+                        isActive: isActive,
+                        $lightMode: lightMode,
+                        children: [
+                            /* @__PURE__ */ jsxs(ItemLabel, {
+                                $isCompact: isCompact,
+                                isSubitem: isSubitem,
+                                children: [
+                                    !isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
+                                        className: "mainIcon",
+                                        $isCompact: isCompact,
+                                        children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+                                            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: items,
+                        childRef: childRef,
+                        parentRef: parentRef,
+                        isLeftMenuOpen: isLeftMenuOpen,
+                        onCloseLeftMenu: onCloseLeftMenu,
+                        lightMode: lightMode
+                    })
+                ]
+            }),
+            hasChildren && listExpandedItems && /* @__PURE__ */ jsx(SubItemsWrap, {
+                children: items === null || items === void 0 ? void 0 : items.map(function(item, index) {
+                    return /* @__PURE__ */ jsx(MenuItem, _object_spread_props(_object_spread({
+                        isCompact: isCompact,
+                        lightMode: lightMode
+                    }, item), {
+                        onCloseLeftMenu: onCloseLeftMenu,
+                        isSubitem: true
+                    }), "".concat(index));
+                })
+            })
+        ]
+    });
+};
+var MenuItem_default = memo(MenuItem);
+export { MenuItem_default as default };

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

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

package/ui/Blocks/SideMenu/SideMenu.js

@@ -0,0 +1,82 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { jsx, 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 SideMenu(param) {
+    var menuItems = param.menuItems, isCompact = param.isCompact, setIsCompact = param.setIsCompact, isLeftMenuOpen = param.isLeftMenuOpen, onCloseLeftMenu = param.onCloseLeftMenu, _param_variant = param.variant, variant = _param_variant === void 0 ? "dark" : _param_variant, children = param.children;
+    var lightMode = variant === "light";
+    var pickerRef = useClickOutside({
+        onClose: onCloseLeftMenu
+    });
+    return /* @__PURE__ */ jsx(LeftMenuProvider, {
+        children: /* @__PURE__ */ jsxs(Container, {
+            isLeftMenuOpen: isLeftMenuOpen,
+            children: [
+                /* @__PURE__ */ jsxs(TopLevelWrap, {
+                    isCompact: isCompact,
+                    isLeftMenuOpen: isLeftMenuOpen,
+                    ref: pickerRef,
+                    lightMode: lightMode,
+                    children: [
+                        /* @__PURE__ */ jsx(ScrollWrap, {
+                            children: /* @__PURE__ */ jsxs(BodyWrap, {
+                                isCompact: isCompact,
+                                children: [
+                                    menuItems.map(function(item, index) {
+                                        var _item_id;
+                                        return /* @__PURE__ */ jsx(MenuItem, _object_spread({
+                                            isCompact: isCompact,
+                                            isLeftMenuOpen: isLeftMenuOpen,
+                                            onCloseLeftMenu: onCloseLeftMenu,
+                                            lightMode: lightMode,
+                                            separator: !!item.separator
+                                        }, item), "".concat((_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : item.title, "-").concat(index));
+                                    }),
+                                    children
+                                ]
+                            })
+                        }),
+                        /* @__PURE__ */ jsx(FooterRow, {
+                            isCompact: isCompact,
+                            setIsCompact: setIsCompact,
+                            lightMode: lightMode
+                        })
+                    ]
+                }),
+                /* @__PURE__ */ jsx(Overlay, {})
+            ]
+        })
+    });
+};
+var SideMenu_default = SideMenu;
+export { SideMenu_default as default };

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

@@ -1,9 +1,8 @@
-import { FC } from 'react';
-
-export declare const FooterWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+import { type 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;
 }, never>;

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

@@ -0,0 +1,98 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  margin-bottom: 24px;\n  justify-content: ",
+        ";\n  padding-left: ",
+        ";\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n          fill: ",
+        ";\n        "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, 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";
+var FooterWrap = styled.div(_templateObject(), function(props) {
+    return props.isCompact ? "center" : "flex-start";
+}, function(props) {
+    return props.isCompact ? "0" : "22px";
+});
+var SizeToggle = styled.div(_templateObject2(), function(param) {
+    var $lightMode = param.$lightMode;
+    return $lightMode ? th.color("typoPrimary") : th.color("gray");
+}, function(props) {
+    return props.isCompact ? "rotate(180deg)" : "rotate(0deg)";
+}, function(param) {
+    var $lightMode = param.$lightMode;
+    return $lightMode && css(_templateObject1(), th.color("neutral20"));
+}, th.color("lightGray5"));
+var MenuFooter = function MenuFooter(param) {
+    var isCompact = param.isCompact, setIsCompact = param.setIsCompact, lightMode = param.lightMode;
+    var toggleIsCompact = useCallback(function() {
+        setIsCompact === null || setIsCompact === void 0 ? void 0 : setIsCompact(!isCompact);
+    }, [
+        setIsCompact,
+        isCompact
+    ]);
+    return /* @__PURE__ */ jsx(FooterWrap, {
+        isCompact: isCompact,
+        children: /* @__PURE__ */ jsxs(SizeToggle, {
+            onClick: toggleIsCompact,
+            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 Footer_default = MenuFooter;
+export { FooterWrap, SizeToggle, Footer_default as default };

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

@@ -0,0 +1,71 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n          position: absolute;\n          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n          & > svg > path {\n            stroke: ",
+        ";\n          }\n        "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { 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)(_templateObject2(), th.color("neutral20"), th.shadow("dropShadow"), function(param) {
+    var isLeftMenuOpen = param.isLeftMenuOpen;
+    return isLeftMenuOpen ? css(_templateObject()) : css(_templateObject1(), th.color("blue2"));
+});
+var HamburgerMenuButton = function HamburgerMenuButton(param) {
+    var isLeftMenuOpen = param.isLeftMenuOpen, onClick = param.onClick;
+    var theme = useTheme();
+    var neutralColor = th.color("neutral20")({
+        theme: theme
+    });
+    var dispalyedIcon = isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, {
+        fill: neutralColor
+    }) : /* @__PURE__ */ jsx(HamburgerMenuIcon, {
+        fill: neutralColor,
+        stroke: "none"
+    });
+    return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
+        mr: "8px",
+        onClick: onClick,
+        isLeftMenuOpen: !!isLeftMenuOpen,
+        children: dispalyedIcon
+    });
+};
+export { HamburgerMenuButton };

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

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

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

@@ -0,0 +1,137 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  z-index: 5;\n  display: ",
+        ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Popper } from "react-popper";
+import styled from "styled-components";
+import Portal from "../../../Elements/Portal";
+import { H6 } from "../../../Elements/Typography/Typography";
+import { ItemLinkWrap, TooltipWrap, TooltipItemLabel } from "../styles";
+var TooltipItem = function TooltipItem(param) {
+    var title = param.title, _param_link = param.link, link = _param_link === void 0 ? "" : _param_link, lightMode = param.lightMode;
+    var linkProps = useMemo(function() {
+        return link.startsWith("https://") ? {
+            to: {
+                pathname: link
+            },
+            target: "_blank"
+        } : {
+            to: link
+        };
+    }, [
+        link
+    ]);
+    return /* @__PURE__ */ jsx(ItemLinkWrap, _object_spread_props(_object_spread({}, linkProps), {
+        exact: true,
+        $lightMode: lightMode,
+        children: /* @__PURE__ */ jsx(TooltipItemLabel, {
+            children: /* @__PURE__ */ jsx(H6, {
+                variant: "medium",
+                children: title
+            })
+        })
+    }));
+};
+var PopoverWrapper = styled.div(_templateObject(), function(param) {
+    var isLeftMenuOpen = param.isLeftMenuOpen;
+    return isLeftMenuOpen ? "block" : "none";
+});
+var SubitemTooltip = function SubitemTooltip(param) {
+    var items = param.items, childRef = param.childRef, parentRef = param.parentRef, isLeftMenuOpen = param.isLeftMenuOpen, onCloseLeftMenu = param.onCloseLeftMenu, lightMode = param.lightMode;
+    return /* @__PURE__ */ jsx(Portal, {
+        children: /* @__PURE__ */ jsx(Popper, {
+            innerRef: childRef,
+            referenceElement: parentRef.current,
+            placement: "right-start",
+            children: function children(param) {
+                var ref = param.ref, style = param.style;
+                return /* @__PURE__ */ jsx(PopoverWrapper, {
+                    ref: ref,
+                    style: style,
+                    onClick: onCloseLeftMenu,
+                    isLeftMenuOpen: isLeftMenuOpen,
+                    children: /* @__PURE__ */ jsx(TooltipWrap, {
+                        $lightMode: lightMode,
+                        children: items === null || items === void 0 ? void 0 : items.map(function(item, index) {
+                            return /* @__PURE__ */ jsx(TooltipItem, _object_spread_props(_object_spread({}, item), {
+                                lightMode: lightMode
+                            }), "".concat(index));
+                        })
+                    })
+                });
+            }
+        })
+    });
+};
+var SubitemTooltip_default = SubitemTooltip;
+export { SubitemTooltip_default as default };

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

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 type LeftMenuContextType = {
     expandedItem: string | null;
     expandItem: (item: string | null) => void;