labsense-ui-kit 1.2.92 → 1.2.94

package/dist/index.js

@@ -9274,86 +9274,71 @@ var ProgressBar = function ProgressBar(_ref3) {
 };
 
 var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$5;
-var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
-  var $isExpanded = _ref.$isExpanded;
-  return $isExpanded ? 'max-content' : '68px';
-}, function (_ref2) {
-  var $isExpanded = _ref2.$isExpanded;
-  return $isExpanded ? '400px' : '68px';
-}, function (_ref3) {
-  var $background = _ref3.$background,
-    theme = _ref3.theme;
+var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n"])), function (_ref) {
+  var $background = _ref.$background,
+    theme = _ref.theme;
   return $background || theme.vms.accent.softBlue;
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref4) {
-  var $padding = _ref4.$padding;
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref2) {
+  var $padding = _ref2.$padding;
   return $padding;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.vms.text.medium;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.vms.text.white;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.vms.text.medium;
+  return theme.vms["default"].primary;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.vms.text.white;
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.vms["default"].primary;
+  return theme.vms.text.white;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.vms.text.white;
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.vms["default"].primary;
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.vms.text.white;
 });
-var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref12) {
-  var $selected = _ref12.$selected,
-    theme = _ref12.theme;
+var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref10) {
+  var $selected = _ref10.$selected,
+    theme = _ref10.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
-var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  \n  &:hover {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n  \n  &.active {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref13) {
-  var theme = _ref13.theme;
+var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  \n  &:hover {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n  \n  &.active {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref11) {
+  var theme = _ref11.theme;
   return theme.vms.text.white;
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, function (_ref12) {
+  var theme = _ref12.theme;
   return theme.vms.text.white;
 });
 var Logo = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
-var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: none;\n  transform: ", ";\n"])), function (_ref15) {
-  var $padding = _ref15.$padding;
+var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: all 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref13) {
+  var $padding = _ref13.$padding;
   return $padding;
-}, function (_ref16) {
-  var $fontSize = _ref16.$fontSize;
+}, function (_ref14) {
+  var $fontSize = _ref14.$fontSize;
   return $fontSize || '20px';
-}, function (_ref17) {
-  var $fontWeight = _ref17.$fontWeight;
+}, function (_ref15) {
+  var $fontWeight = _ref15.$fontWeight;
   return $fontWeight || '500';
-}, function (_ref18) {
-  var $isExpanded = _ref18.$isExpanded;
-  return $isExpanded ? 1 : 0;
-}, function (_ref19) {
-  var $isExpanded = _ref19.$isExpanded;
-  return $isExpanded ? 'visible' : 'hidden';
-}, function (_ref20) {
-  var $isExpanded = _ref20.$isExpanded;
-  return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
-});
-var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref21) {
-  var $position = _ref21.$position;
+}, SidebarContainer);
+var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref16) {
+  var $position = _ref16.$position;
   return $position || 'absolute';
 });
-var Sidebar = function Sidebar(_ref22) {
-  var logo = _ref22.logo,
-    content = _ref22.content,
-    background = _ref22.background,
-    ProfileContent = _ref22.ProfileContent,
-    _ref22$isExpanded = _ref22.isExpanded,
-    isExpanded = _ref22$isExpanded === void 0 ? false : _ref22$isExpanded,
-    setIsExpanded = _ref22.setIsExpanded;
+var Sidebar = function Sidebar(_ref17) {
+  var logo = _ref17.logo,
+    content = _ref17.content,
+    background = _ref17.background,
+    ProfileContent = _ref17.ProfileContent,
+    _ref17$isExpanded = _ref17.isExpanded,
+    isExpanded = _ref17$isExpanded === void 0 ? false : _ref17$isExpanded,
+    setIsExpanded = _ref17.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
@@ -9391,9 +9376,8 @@ var Sidebar = function Sidebar(_ref22) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = React__default.memo(function (_ref23) {
-    var child = _ref23.child,
-      isExpanded = _ref23.isExpanded;
+  var ChildLink = React__default.memo(function (_ref18) {
+    var child = _ref18.child;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
@@ -9411,6 +9395,7 @@ var Sidebar = function Sidebar(_ref22) {
     }, React__default.createElement(IconWrapper$2, {
       "$selected": active
     }, React__default.createElement(Icon, {
+      cursor: 'pointer',
       icon: child.icon,
       size: 18,
       weight: child.iconWeight,
@@ -9420,7 +9405,6 @@ var Sidebar = function Sidebar(_ref22) {
       "$justifyContent": 'space-between',
       "$gap": '5px'
     }, React__default.createElement(TextContainer, {
-      "$isExpanded": isExpanded,
       "$fontSize": '12px'
     }, child.label), _getTotalNotifications(child) > 0 && React__default.createElement(NotificationBadge, {
       "$position": 'unset'
@@ -9439,14 +9423,14 @@ var Sidebar = function Sidebar(_ref22) {
       });
     }));
   };
-  var SidebarItem = React__default.memo(function (_ref24) {
-    var item = _ref24.item,
-      isActive = _ref24.isActive,
-      isOpen = _ref24.isOpen,
-      hasChildren = _ref24.hasChildren,
-      isExpanded = _ref24.isExpanded,
-      onToggle = _ref24.onToggle,
-      renderChildLinks = _ref24.renderChildLinks;
+  var SidebarItem = React__default.memo(function (_ref19) {
+    var item = _ref19.item,
+      isActive = _ref19.isActive,
+      isOpen = _ref19.isOpen,
+      hasChildren = _ref19.hasChildren,
+      isExpanded = _ref19.isExpanded,
+      onToggle = _ref19.onToggle,
+      renderChildLinks = _ref19.renderChildLinks;
     var themeColors = styled.useTheme();
     var activeClass = isActive ? 'active' : '';
     var handleClick = React__default.useCallback(function () {
@@ -9475,21 +9459,21 @@ var Sidebar = function Sidebar(_ref22) {
     }, React__default.createElement(IconWrapper$2, {
       "$selected": !!isActive
     }, React__default.createElement(Icon, {
+      cursor: 'pointer',
       icon: item.icon,
       size: 20,
       weight: item.iconWeight,
       color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
     })), _getTotalNotifications(item) > 0 && React__default.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React__default.createElement(TextContainer, {
-      "$isExpanded": isExpanded,
       "$fontSize": '14px'
     }, item.label)), hasChildren && React__default.createElement(Container, {
       "$padding": '9px',
       "$opacity": isExpanded ? 1 : 0
     }, React__default.createElement(Icon, {
+      cursor: 'pointer',
       icon: isOpen ? 'UpArrow' : 'DownArrow',
       size: 10,
-      color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium,
-      cursor: 'pointer'
+      color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
     })));
     var handleNavClick = React__default.useCallback(function (e) {
       if (item.url === location.pathname) {
@@ -9524,7 +9508,6 @@ var Sidebar = function Sidebar(_ref22) {
   }, [setIsExpanded]);
   return React__default.createElement(SidebarContainer, {
     "$background": background,
-    "$isExpanded": isExpanded,
     onMouseEnter: function onMouseEnter() {
       return handleSidebarExpansion(true);
     },
@@ -9534,14 +9517,12 @@ var Sidebar = function Sidebar(_ref22) {
   }, React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '28px',
-    "$width": '100%'
+    "$width": '100%',
+    "$overflow": 'hidden'
   }, logo && (logo.icon ? React__default.createElement(Logo, null, React__default.createElement(Icon, {
     icon: logo.icon,
     color: logo.iconColor
-  }), React__default.createElement(TextContainer, {
-    "$isExpanded": isExpanded,
-    "$fontWeight": '700'
-  }, logo.name)) : logo.imageDetails && React__default.createElement(Logo, null, React__default.createElement("img", {
+  }), React__default.createElement(TextContainer, null, logo.name)) : logo.imageDetails && React__default.createElement(Logo, null, React__default.createElement("img", {
     src: logo.imageDetails.url,
     alt: logo.imageDetails.altText,
     width: logo.imageDetails.width,