@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/SideMenu/styles.js

@@ -1,417 +1,310 @@
-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  ::after {\n    content: '';\n    position: absolute;\n    width: 60px;\n    height: 40px;\n    z-index: -1;\n    border-radius: 9px 0 0 9px;\n    left: 8px;\n    top: -1px;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  height: 40px;\n  width: 40px;\n  padding: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: ",
-        ";\n\n  @media (min-width: 1024px) {\n    display: block;\n    align-self: stretch;\n    height: fit-content;\n\n    @media print {\n      display: none;\n    }\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ",
-        ";\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ",
-        ";\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ",
-        ";\n  margin-bottom: ",
-        ";\n  margin-left: ",
-        ";\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  color: ",
-        ";\n  svg {\n    max-width: 11px;\n  }\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: ",
-        ";\n  align-items: center;\n  cursor: pointer;\n  height: ",
-        ";\n  border-radius: ",
-        ";\n  font-weight: 600;\n  letter-spacing: 0.4px;\n  position: relative;\n  color: ",
-        ";\n  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition-property: transform;\n\n  &.toplevel {\n    margin: ",
-        ";\n    padding: ",
-        ";\n    gap: ",
-        ";\n    justify-content: ",
-        ";\n    &.active {\n      color: ",
-        ";\n    }\n  }\n\n  &.nestedlevel {\n    padding: 0;\n    :hover {\n      color: ",
-        ";\n    }\n  }\n\n  &.active > ",
-        " {\n    background-color: ",
-        ";\n    color: ",
-        ";\n    width: 100%;\n    border-left: 4px solid ",
-        ";\n    :last-child {\n      border-bottom-right-radius: 10px;\n    }\n    :first-child {\n      border-top-right-radius: 10px;\n    }\n  }\n\n  ",
-        " {\n    color: ",
-        ";\n    padding-left: 10px;\n    width: -webkit-fill-available;\n    height: -webkit-fill-available;\n  }\n\n  &.active,\n  &.selected {\n    ",
-        " {\n      color: ",
-        ";\n    }\n  }\n"
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n          & ",
-        " {\n            ",
-        "\n            ::after {\n              background-color: ",
-        ";\n            }\n          }\n        "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n            & ",
-        " {\n              ",
-        "\n              :hover {\n                background-color: ",
-        ";\n              }\n            }\n          "
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        "\n                    & ",
-        " {\n                      ",
-        "\n                      ::after {\n                        background-color: ",
-        ";\n                      }\n                    }\n                  "
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject12() {
-    var data = _tagged_template_literal([
-        "\n                    & ",
-        " {\n                      background-color: ",
-        ";\n                      :hover {\n                        background-color: ",
-        ";\n                      }\n                    }\n                  "
-    ]);
-    _templateObject12 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject13() {
-    var data = _tagged_template_literal([
-        "\n   z-index: 1;\n   stroke: ",
-        ";\n   .selected > ",
-        ", .active > ",
-        " {\n     color: ",
-        ";\n     stroke: ",
-        ";\n   }\n\n    .toplevel {\n      ",
-        "\n\n        ",
-        "\n\n          &.active, &.selected {\n            ",
-        "\n       \n            background-color: ",
-        ";\n            svg {\n              stroke: ",
-        ";\n            }\n          }\n\n          &.expanded > ",
-        " {\n            visibility: visible;\n            svg {\n              transform: rotate(180deg);\n            }\n          }\n    }\n\n    &:hover {\n      ",
-        ".toplevel {\n        background-color: ",
-        ";\n      }\n      ",
-        ".toplevel.active, ",
-        ".toplevel.selected {\n        background-color: ",
-        ";\n      }\n      ",
-        ".nestedlevel {\n        background-color: inherit;\n      }\n    }\n  }\n"
-    ]);
-    _templateObject13 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject14() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ",
-        ";\n  margin-bottom: ",
-        ";\n"
-    ]);
-    _templateObject14 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject15() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  background-color: ",
-        ";\n  white-space: nowrap;\n  transform: translateX(8px);\n  width: 248px;\n  border-radius: 0 10px 10px 0;\n  z-index: 5;\n  &::before {\n    content: '';\n    position: absolute;\n    border-radius: 10px;\n    width: calc(100% + 80px);\n    height: calc(100% + 100px);\n    left: -16px;\n    top: -50px;\n  }\n\n  & :not(:last-child) {\n    border-radius: 0;\n    border-bottom: 0.5px solid ",
-        ";\n  }\n\n  &:first-child > {\n    :hover {\n      border-top-right-radius: 10px;\n      background-color: ",
-        ";\n    }\n  }\n\n  & :not(:first-child) {\n    :hover {\n      border-top-right-radius: 0;\n    }\n  }\n\n  & :last-child > {\n    :hover {\n      border-bottom-right-radius: 10px;\n      background-color: ",
-        ";\n    }\n  }\n"
-    ]);
-    _templateObject15 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject16() {
-    var data = _tagged_template_literal([
-        "\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"
-    ]);
-    _templateObject16 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject17() {
-    var data = _tagged_template_literal([
-        "\n  background-color: ",
-        ";\n  border-right: 1px solid ",
-        ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ",
-        ";\n\n  z-index: 7;\n  position: absolute;\n  top: ",
-        ";\n  height: ",
-        ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"
-    ]);
-    _templateObject17 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject18() {
-    var data = _tagged_template_literal([
-        "\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"
-    ]);
-    _templateObject18 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject19() {
-    var data = _tagged_template_literal([
-        "\n  width: 100%;\n  text-align: center;\n  padding: ",
-        ";\n  height: calc(100% - 52px);\n"
-    ]);
-    _templateObject19 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject20() {
-    var data = _tagged_template_literal([
-        "\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ",
-        ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"
-    ]);
-    _templateObject20 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import Icon from "../../Elements/Icon/Icon.js";
+import { createRgba } from "../../utils/CreateRgba/createRgba.js";
+import "./utils/constants.js";
+import styled$1, { css } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
 import { NavLink } from "react-router-dom";
-import Icon from "../../Elements/Icon/Icon";
-import createRgba from "../../utils/CreateRgba/createRgba";
-import { compactMenuWidth, expandedMenuWidth } from "./utils/constants";
-import styled, { css } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var leftMenuAfter = css(_templateObject());
-var compactMenuItem = css(_templateObject1());
-var Container = styled.div(_templateObject2(), function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "block" : "none";
-});
-var SubItemsWrap = styled.div(_templateObject3(), th("colors.red1"));
-var ItemsSeparator = styled.div(_templateObject4(), th("colors.lightGray6"));
-var ItemLabel = styled.div(_templateObject5(), function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "column" : "row";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "10px" : "0";
-}, function(param) {
-    var isSubitem = param.isSubitem;
-    return isSubitem ? "15px" : "0";
-});
-var ItemDropdownArrow = styled(Icon)(_templateObject6(), function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("typoPrimary") : "white";
-});
-var TooltipItemLabel = styled.div(_templateObject7());
-var ItemLinkWrap = styled(NavLink)(_templateObject8(), function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "column" : "row";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "60px" : "40px";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? "8px" : "10px";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("typoPrimary") : th.color("lightGray5");
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "0 0 12px 0" : "16px 0";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "10px 14px 6px 13px" : "9px 10px";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "none" : "30px";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "center" : "space-between";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th("colors.red1") : "white";
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th("colors.red1") : "white";
-}, TooltipItemLabel, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red20") : th.color("blue2");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-}, th("colors.red1"), TooltipItemLabel, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("typoPrimary") : th.color("white");
-}, ItemDropdownArrow, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-});
-var MenuItemContainer = styled.div(_templateObject13(), function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("blue2") : void 0;
-}, ItemLabel, ItemLabel, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("blue2");
-}, function(param) {
-    var $isCompact = param.$isCompact, hasChildren = param.hasChildren, isHovering = param.isHovering;
-    return $isCompact && hasChildren && isHovering && css(_templateObject9(), ItemIcon, leftMenuAfter, function(param) {
-        var $lightMode = param.$lightMode;
-        return $lightMode ? th.color("neutral20") : th.color("neutral500");
-    });
-}, function(param) {
-    var $isCompact = param.$isCompact, $lightMode = param.$lightMode, hasChildren = param.hasChildren;
-    return $isCompact && css(_templateObject10(), ItemIcon, compactMenuItem, hasChildren ? "transparent" : $lightMode ? th.color("neutral20") : th.color("neutral500"));
-}, function(param) {
-    var $isCompact = param.$isCompact, hasChildren = param.hasChildren, isHovering = param.isHovering, $lightMode = param.$lightMode;
-    return $isCompact && hasChildren && isHovering ? css(_templateObject11(), ItemIcon, leftMenuAfter, $lightMode ? th.color("red20") : th.color("neutral500")) : css(_templateObject12(), ItemIcon, !$isCompact ? "transparent" : $lightMode ? th.color("red20") : th.color("red1"), $lightMode ? th.color("red20") : "none");
-}, function(param) {
-    var $isCompact = param.$isCompact, $lightMode = param.$lightMode;
-    if ($isCompact) return "none";
-    if ($lightMode) return th.color("red20");
-    return th.color("red1");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red1") : th.color("white");
-}, ItemDropdownArrow, ItemLinkWrap, function(param) {
-    var $isCompact = param.$isCompact, $lightMode = param.$lightMode;
-    return $isCompact ? "none" : $lightMode ? th.color("neutral20") : th.color("blue4");
-}, ItemLinkWrap, ItemLinkWrap, function(param) {
-    var $lightMode = param.$lightMode, $isCompact = param.$isCompact;
-    if ($isCompact) return "none";
-    if ($lightMode) return th.color("red20");
-    return th.color("red70");
-}, ItemLinkWrap);
-var ItemIcon = styled.span(_templateObject14(), function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "0" : "11px";
-}, function(param) {
-    var $isCompact = param.$isCompact;
-    return $isCompact ? "4px" : "0";
-});
-var TooltipWrap = styled.div(_templateObject15(), function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("white") : th.color("neutral500");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("neutral20") : th("colors.textTertiary");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red20") : th.color("blue2");
-}, function(param) {
-    var $lightMode = param.$lightMode;
-    return $lightMode ? th.color("red20") : th.color("blue2");
-});
-var OverflowWithEllipsis = styled.span(_templateObject16());
-var TopLevelWrap = styled.div(_templateObject17(), function(param) {
-    var lightMode = param.lightMode;
-    return lightMode ? "white" : th("colors.blue3");
-}, th("colors.lightGray6"), function(param) {
-    var isCompact = param.isCompact;
-    return "".concat(isCompact ? compactMenuWidth : expandedMenuWidth, "px");
-}, function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "0" : void 0;
-}, function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "100%" : "calc(100% - 52px)";
-});
-var ScrollWrap = styled.div(_templateObject18());
-var BodyWrap = styled.div(_templateObject19(), function(param) {
-    var isCompact = param.isCompact;
-    return isCompact ? "24px 9px" : "24px 22px";
-});
-var Overlay = styled.div(_templateObject20(), createRgba("blue2", 0.6));
+//#region packages/ui/Blocks/SideMenu/styles.ts
+const leftMenuAfter = css`
+  ::after {
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 40px;
+    z-index: -1;
+    border-radius: 9px 0 0 9px;
+    left: 8px;
+    top: -1px;
+  }
+`;
+const compactMenuItem = css`
+  height: 40px;
+  width: 40px;
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+`;
+const Container = styled$1.div`
+  display: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "block" : "none"};
+
+  @media (min-width: 1024px) {
+    display: block;
+    align-self: stretch;
+    height: fit-content;
+
+    @media print {
+      display: none;
+    }
+  }
+`;
+const SubItemsWrap = styled$1.div`
+  margin-left: 23px;
+  border-left: 1.5px solid;
+  border-color: ${th$1("colors.red1")};
+`;
+const ItemsSeparator = styled$1.div`
+  height: 1px;
+  width: 100%;
+  margin: 12px 0;
+  background-color: ${th$1("colors.lightGray6")};
+`;
+const ItemLabel = styled$1.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: ${({ $isCompact }) => $isCompact ? "column" : "row"};
+  margin-bottom: ${({ $isCompact }) => $isCompact ? "10px" : "0"};
+  margin-left: ${({ isSubitem }) => isSubitem ? "15px" : "0"};
+`;
+const ItemDropdownArrow = styled$1(Icon)`
+  color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : "white"};
+  svg {
+    max-width: 11px;
+  }
+`;
+const TooltipItemLabel = styled$1.div`
+  line-height: 1.5;
+  letter-spacing: 0.4px;
+`;
+const ItemLinkWrap = styled$1(NavLink)`
+  display: flex;
+  flex-direction: ${({ $isCompact }) => $isCompact ? "column" : "row"};
+  align-items: center;
+  cursor: pointer;
+  height: ${({ $isCompact }) => $isCompact ? "60px" : "40px"};
+  border-radius: ${({ $lightMode }) => $lightMode ? "8px" : "10px"};
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  position: relative;
+  color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : th$1.color("lightGray5")};
+  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-property: transform;
+
+  &.toplevel {
+    margin: ${({ $isCompact }) => $isCompact ? "0 0 12px 0" : "16px 0"};
+    padding: ${({ $isCompact }) => $isCompact ? "10px 14px 6px 13px" : "9px 10px"};
+    gap: ${({ $isCompact }) => $isCompact ? "none" : "30px"};
+    justify-content: ${({ $isCompact }) => $isCompact ? "center" : "space-between"};
+    &.active {
+      color: ${({ $lightMode }) => $lightMode ? th$1("colors.red1") : "white"};
+    }
+  }
+
+  &.nestedlevel {
+    padding: 0;
+    :hover {
+      color: ${({ $lightMode }) => $lightMode ? th$1("colors.red1") : "white"};
+    }
+  }
+
+  &.active > ${TooltipItemLabel} {
+    background-color: ${({ $lightMode }) => $lightMode ? th$1.color("red20") : th$1.color("blue2")};
+    color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
+    width: 100%;
+    border-left: 4px solid ${th$1("colors.red1")};
+    :last-child {
+      border-bottom-right-radius: 10px;
+    }
+    :first-child {
+      border-top-right-radius: 10px;
+    }
+  }
+
+  ${TooltipItemLabel} {
+    color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : th$1.color("white")};
+    padding-left: 10px;
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+  }
+
+  &.active,
+  &.selected {
+    ${ItemDropdownArrow} {
+      color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
+    }
+  }
+`;
+const MenuItemContainer = styled$1.div`
+   z-index: 1;
+   stroke: ${({ $lightMode }) => $lightMode ? th$1.color("blue2") : void 0};
+   .selected > ${ItemLabel}, .active > ${ItemLabel} {
+     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
+     stroke: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("blue2")};
+   }
+
+    .toplevel {
+      ${({ $isCompact, hasChildren, isHovering }) => $isCompact && hasChildren && isHovering && css`
+          & ${ItemIcon} {
+            ${leftMenuAfter}
+            ::after {
+              background-color: ${({ $lightMode }) => $lightMode ? th$1.color("neutral20") : th$1.color("neutral500")};
+            }
+          }
+        `}
+
+        ${({ $isCompact, $lightMode, hasChildren }) => $isCompact && css`
+            & ${ItemIcon} {
+              ${compactMenuItem}
+              :hover {
+                background-color: ${hasChildren ? "transparent" : $lightMode ? th$1.color("neutral20") : th$1.color("neutral500")};
+              }
+            }
+          `}
+
+          &.active, &.selected {
+            ${({ $isCompact, hasChildren, isHovering, $lightMode }) => $isCompact && hasChildren && isHovering ? css`
+                    & ${ItemIcon} {
+                      ${leftMenuAfter}
+                      ::after {
+                        background-color: ${$lightMode ? th$1.color("red20") : th$1.color("neutral500")};
+                      }
+                    }
+                  ` : css`
+                    & ${ItemIcon} {
+                      background-color: ${!$isCompact ? "transparent" : $lightMode ? th$1.color("red20") : th$1.color("red1")};
+                      :hover {
+                        background-color: ${$lightMode ? th$1.color("red20") : "none"};
+                      }
+                    }
+                  `}
+       
+            background-color: ${({ $isCompact, $lightMode }) => {
+	if ($isCompact) return "none";
+	if ($lightMode) return th$1.color("red20");
+	return th$1.color("red1");
+}};
+            svg {
+              stroke: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
+            }
+          }
+
+          &.expanded > ${ItemDropdownArrow} {
+            visibility: visible;
+            svg {
+              transform: rotate(180deg);
+            }
+          }
+    }
+
+    &:hover {
+      ${ItemLinkWrap}.toplevel {
+        background-color: ${({ $isCompact, $lightMode }) => $isCompact ? "none" : $lightMode ? th$1.color("neutral20") : th$1.color("blue4")};
+      }
+      ${ItemLinkWrap}.toplevel.active, ${ItemLinkWrap}.toplevel.selected {
+        background-color: ${({ $lightMode, $isCompact }) => {
+	if ($isCompact) return "none";
+	if ($lightMode) return th$1.color("red20");
+	return th$1.color("red70");
+}};
+      }
+      ${ItemLinkWrap}.nestedlevel {
+        background-color: inherit;
+      }
+    }
+  }
+`;
+const ItemIcon = styled$1.span`
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: ${({ $isCompact }) => $isCompact ? "0" : "11px"};
+  margin-bottom: ${({ $isCompact }) => $isCompact ? "4px" : "0"};
+`;
+const TooltipWrap = styled$1.div`
+  position: absolute;
+  background-color: ${({ $lightMode }) => $lightMode ? th$1.color("white") : th$1.color("neutral500")};
+  white-space: nowrap;
+  transform: translateX(8px);
+  width: 248px;
+  border-radius: 0 10px 10px 0;
+  z-index: 5;
+  &::before {
+    content: '';
+    position: absolute;
+    border-radius: 10px;
+    width: calc(100% + 80px);
+    height: calc(100% + 100px);
+    left: -16px;
+    top: -50px;
+  }
+
+  & :not(:last-child) {
+    border-radius: 0;
+    border-bottom: 0.5px solid ${({ $lightMode }) => $lightMode ? th$1.color("neutral20") : th$1("colors.textTertiary")};
+  }
+
+  &:first-child > {
+    :hover {
+      border-top-right-radius: 10px;
+      background-color: ${({ $lightMode }) => $lightMode ? th$1.color("red20") : th$1.color("blue2")};
+    }
+  }
+
+  & :not(:first-child) {
+    :hover {
+      border-top-right-radius: 0;
+    }
+  }
+
+  & :last-child > {
+    :hover {
+      border-bottom-right-radius: 10px;
+      background-color: ${({ $lightMode }) => $lightMode ? th$1.color("red20") : th$1.color("blue2")};
+    }
+  }
+`;
+const OverflowWithEllipsis = styled$1.span`
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const TopLevelWrap = styled$1.div`
+  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.blue3")};
+  border-right: 1px solid ${th$1("colors.lightGray6")};
+  height: -webkit-fill-available;
+  transition: width 0.5s ease;
+  width: ${({ isCompact }) => `${isCompact ? 75 : 255}px`};
+
+  z-index: 7;
+  position: absolute;
+  top: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "0" : void 0};
+  height: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "100%" : "calc(100% - 52px)"};
+
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1024px) {
+    top: inherit;
+    z-index: 2;
+  }
+`;
+const ScrollWrap = styled$1.div`
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const BodyWrap = styled$1.div`
+  width: 100%;
+  text-align: center;
+  padding: ${({ isCompact }) => isCompact ? "24px 9px" : "24px 22px"};
+  height: calc(100% - 52px);
+`;
+const Overlay = styled$1.div`
+  position: fixed;
+  top: 0;
+  z-index: 6;
+  height: 100%;
+  width: 100%;
+  background-color: ${createRgba("blue2", .6)};
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`;
+//#endregion
 export { BodyWrap, Container, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };