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

package/ui/Blocks/SideMenu/styles.js

@@ -1,310 +1,162 @@
-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 };
+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;

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

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

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

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

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

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

package/ui/Blocks/Stepper/Stepper.js

@@ -1,34 +1,21 @@
-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
-	})] });
+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 })] }));
 };
-//#endregion
-export { Stepper };

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

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

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

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