@mailstep/design-system 0.8.31-beta.4 → 0.8.31

package/ui/Blocks/SideMenu/styles.js

@@ -1,162 +1,310 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
-var compactMenuItem = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])));
-export var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? 'block' : 'none');
-});
-export var SubItemsWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ", ";\n"], ["\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ", ";\n"])), th('colors.red1'));
-export var ItemsSeparator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ", ";\n"], ["\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ", ";\n"])), th('colors.lightGray6'));
-export var ItemLabel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'column' : 'row');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '10px' : '0');
-}, function (_a) {
-    var isSubitem = _a.isSubitem;
-    return (isSubitem ? '15px' : '0');
-});
-export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  svg {\n    max-width: 11px;\n  }\n"], ["\n  color: ", ";\n  svg {\n    max-width: 11px;\n  }\n"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : 'white');
-});
-export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"], ["\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"])));
-export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'column' : 'row');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '60px' : '40px');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? '8px' : '10px');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : th.color('lightGray5'));
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '0 0 12px 0' : '16px 0');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '10px 14px 6px 13px' : '9px 10px');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'none' : '30px');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'center' : 'space-between');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th('colors.red1') : 'white');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th('colors.red1') : 'white');
-}, TooltipItemLabel, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red20') : th.color('blue2'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-}, th('colors.red1'), TooltipItemLabel, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : th.color('white'));
-}, ItemDropdownArrow, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-});
-export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('blue2') : undefined);
-}, ItemLabel, ItemLabel, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('blue2'));
-}, function (_a) {
-    var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering;
-    return $isCompact &&
-        hasChildren &&
-        isHovering && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          & ", " {\n            ", "\n            ::after {\n              background-color: ", ";\n            }\n          }\n        "], ["\n          & ", " {\n            ", "\n            ::after {\n              background-color: ", ";\n            }\n          }\n        "])), ItemIcon, leftMenuAfter, function (_a) {
-        var $lightMode = _a.$lightMode;
-        return ($lightMode ? th.color('neutral20') : th.color('neutral500'));
-    });
-}, function (_a) {
-    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode, hasChildren = _a.hasChildren;
-    return $isCompact && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n            & ", " {\n              ", "\n              :hover {\n                background-color: ", ";\n              }\n            }\n          "], ["\n            & ", " {\n              ", "\n              :hover {\n                background-color: ", ";\n              }\n            }\n          "])), ItemIcon, compactMenuItem, hasChildren ? 'transparent' : $lightMode ? th.color('neutral20') : th.color('neutral500'));
-}, function (_a) {
-    var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering, $lightMode = _a.$lightMode;
-    return $isCompact && hasChildren && isHovering
-        ? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                    & ", " {\n                      ", "\n                      ::after {\n                        background-color: ", ";\n                      }\n                    }\n                  "], ["\n                    & ", " {\n                      ", "\n                      ::after {\n                        background-color: ", ";\n                      }\n                    }\n                  "])), ItemIcon, leftMenuAfter, $lightMode ? th.color('red20') : th.color('neutral500')) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    & ", " {\n                      background-color: ", ";\n                      :hover {\n                        background-color: ", ";\n                      }\n                    }\n                  "], ["\n                    & ", " {\n                      background-color: ", ";\n                      :hover {\n                        background-color: ", ";\n                      }\n                    }\n                  "])), ItemIcon, !$isCompact ? 'transparent' : $lightMode ? th.color('red20') : th.color('red1'), $lightMode ? th.color('red20') : 'none');
-}, function (_a) {
-    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
-    if ($isCompact)
-        return 'none';
-    if ($lightMode)
-        return th.color('red20');
-    return th.color('red1');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-}, ItemDropdownArrow, ItemLinkWrap, function (_a) {
-    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
-    return $isCompact ? 'none' : $lightMode ? th.color('neutral20') : th.color('blue4');
-}, ItemLinkWrap, ItemLinkWrap, function (_a) {
-    var $lightMode = _a.$lightMode, $isCompact = _a.$isCompact;
-    if ($isCompact)
-        return 'none';
-    if ($lightMode)
-        return th.color('red20');
-    return th.color('red70');
-}, ItemLinkWrap);
-export var ItemIcon = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '0' : '11px');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '4px' : '0');
-});
-export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('white') : th.color('neutral500'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('neutral20') : th('colors.textTertiary'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red20') : th.color('blue2'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red20') : th.color('blue2'));
-});
-export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var lightMode = _a.lightMode;
-    return (lightMode ? 'white' : th('colors.blue3'));
-}, th('colors.lightGray6'), function (_a) {
-    var isCompact = _a.isCompact;
-    return "".concat(isCompact ? compactMenuWidth : expandedMenuWidth, "px");
-}, function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? '0' : undefined);
-}, function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? '100%' : 'calc(100% - 52px)');
-});
-export var ScrollWrap = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  padding: ", ";\n  height: calc(100% - 52px);\n"], ["\n  width: 100%;\n  text-align: center;\n  padding: ", ";\n  height: calc(100% - 52px);\n"])), function (_a) {
-    var isCompact = _a.isCompact;
-    return (isCompact ? '24px 9px' : '24px 22px');
-});
-export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\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"], ["\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"])), createRgba('blue2', 0.6));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+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 "@xstyled/system";
+import { NavLink } from "react-router-dom";
+//#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 };

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

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import { type ReactNode } from 'react';
 export type MenuItemType = {
     icon?: ReactNode;
     onClick?: () => void;

package/ui/Blocks/SideMenu/utils/constants.js

@@ -1,2 +1,5 @@
-export var compactMenuWidth = 75;
-export var expandedMenuWidth = 255;
+//#region packages/ui/Blocks/SideMenu/utils/constants.ts
+const compactMenuWidth = 75;
+const expandedMenuWidth = 255;
+//#endregion
+export { compactMenuWidth, expandedMenuWidth };

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { StepperProps } from './types';
-
+import { type FC } from 'react';
+import type { StepperProps } from './types';
 export declare const Stepper: FC<StepperProps>;

package/ui/Blocks/Stepper/Stepper.js

@@ -1,21 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { StepItem } from './components/StepItem';
-import { Container, ItemsWrapper } from './styles';
-export var Stepper = function (_a) {
-    var items = _a.items, activeStep = _a.activeStep, hasStepNumbering = _a.hasStepNumbering, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep, isLoading = _a.isLoading;
-    var Component = useMemo(function () { var _a; return (_a = items[activeStep]) === null || _a === void 0 ? void 0 : _a.component; }, [items, activeStep]);
-    useEffect(function () {
-        var _a;
-        if (!!activeStep && !((_a = items[activeStep - 1]) === null || _a === void 0 ? void 0 : _a.completed)) {
-            handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(0)();
-        }
-    }, [items]);
-    if (!(items === null || items === void 0 ? void 0 : items.length))
-        return null;
-    return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, hasComponent: !!Component, children: items.map(function (_a, index) {
-                    var _b;
-                    var title = _a.title, disabled = _a.disabled, visible = _a.visible, completed = _a.completed, icon = _a.icon;
-                    return (_jsx(StepItem, { isPrevStepCompleted: (_b = items[index - 1]) === null || _b === void 0 ? void 0 : _b.completed, onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, visible: visible, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
-                }) }), Component && _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));
+import { StepItem } from "./components/StepItem/index.js";
+import { Container, ItemsWrapper } from "./styles.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Stepper/Stepper.tsx
+const Stepper = ({ items, activeStep, hasStepNumbering, handleChangeStep, handleGoToNextStep, isLoading }) => {
+	const Component = useMemo(() => items[activeStep]?.component, [items, activeStep]);
+	useEffect(() => {
+		if (!!activeStep && !items[activeStep - 1]?.completed) handleChangeStep?.(0)();
+	}, [items]);
+	if (!items?.length) return null;
+	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsx(ItemsWrapper, {
+		total: items.length,
+		hasComponent: !!Component,
+		children: items.map(({ title, disabled, visible, completed, icon }, index) => /* @__PURE__ */ jsx(StepItem, {
+			isPrevStepCompleted: items[index - 1]?.completed,
+			onClick: handleChangeStep?.(index),
+			title,
+			index,
+			total: items.length,
+			activeStep,
+			disabled,
+			visible,
+			completed,
+			hasStepNumbering,
+			icon
+		}, title))
+	}), Component && /* @__PURE__ */ jsx(Component, {
+		handleGoToNextStep,
+		isLoading
+	})] });
 };
+//#endregion
+export { Stepper };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type Props = {
     icon?: string;
     isCompleted?: boolean;

package/ui/Blocks/Stepper/components/StepCircle/index.js

@@ -1,7 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '../../../../Elements/Icon';
-import { StepCircleContainer } from './styles';
-export var StepCircle = function (_a) {
-    var icon = _a.icon, isCompleted = _a.isCompleted, children = _a.children, isActiveStep = _a.isActiveStep;
-    return (_jsx(StepCircleContainer, { isCompleted: isCompleted, isActiveStep: isActiveStep, children: icon ? _jsx(Icon, { icon: icon, size: "12px", fill: isCompleted || isActiveStep ? 'red1' : 'lightGray6' }) : children }));
+import Icon_default from "../../../../Elements/Icon/index.js";
+import { StepCircleContainer } from "./styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Stepper/components/StepCircle/index.tsx
+const StepCircle = ({ icon, isCompleted, children, isActiveStep }) => {
+	return /* @__PURE__ */ jsx(StepCircleContainer, {
+		isCompleted,
+		isActiveStep,
+		children: icon ? /* @__PURE__ */ jsx(Icon_default, {
+			icon,
+			size: "12px",
+			fill: isCompleted || isActiveStep ? "red1" : "lightGray6"
+		}) : children
+	});
 };
+//#endregion
+export { StepCircle };

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, {
-    isCompleted?: boolean | undefined;
-    isActiveStep?: boolean | undefined;
+export declare const StepCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    isCompleted?: boolean;
+    isActiveStep?: boolean;
 }, never>;