labsense-ui-kit 1.3.77 → 1.3.79

package/dist/index.js

@@ -10810,59 +10810,58 @@ var Overlay = styled__default.div(_templateObject$n || (_templateObject$n = _tag
   var $isOpen = _ref2.$isOpen;
   return $isOpen ? 'visible' : 'hidden';
 });
-var HamburgerButton = styled__default.button(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: none;\n  \n  @media (max-width: ", ") {\n    display: flex;\n    position: fixed;\n    top: 20px;\n    left: 20px;\n    z-index: 999;\n    background: ", ";\n    border: none;\n    border-radius: 8px;\n    padding: 12px;\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: transform 0.2s ease;\n\n    &:active {\n      transform: scale(0.95);\n    }\n  }\n"])), MOBILE_BREAKPOINT, function (_ref3) {
+var HamburgerButton = styled__default.button(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: none;\n  \n  @media (max-width: ", ") {\n    display: flex;\n    width: max-content;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: transform 0.2s ease;\n\n    &:active {\n      transform: scale(0.95);\n    }\n  }\n"])), MOBILE_BREAKPOINT);
+var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObject3$c = _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: 998;\n  justify-content: space-between;\n  gap: 24px;\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\n  /* Mobile styles */\n  @media (max-width: ", ") {\n    transform: translateX(", ");\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    width: 280px;\n    max-width: 280px;\n    box-shadow: ", ";\n\n    /* Always show text on mobile when open */\n    span, .expandable {\n      opacity: ", ";\n      visibility: ", ";\n      transform: translateX(0);\n    }\n\n    /* Disable hover expansion on mobile */\n    &:hover {\n      width: 280px;\n      max-width: 280px;\n    }\n  }\n"])), function (_ref3) {
   var $background = _ref3.$background,
     theme = _ref3.theme;
   return $background || theme.vms.accent.softBlue;
-});
-var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObject3$c = _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: 998;\n  justify-content: space-between;\n  gap: 24px;\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\n  /* Mobile styles */\n  @media (max-width: ", ") {\n    transform: translateX(", ");\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    width: 280px;\n    max-width: 280px;\n    box-shadow: ", ";\n\n    /* Always show text on mobile when open */\n    span, .expandable {\n      opacity: ", ";\n      visibility: ", ";\n      transform: translateX(0);\n    }\n\n    /* Disable hover expansion on mobile */\n    &:hover {\n      width: 280px;\n      max-width: 280px;\n    }\n  }\n"])), function (_ref4) {
-  var $background = _ref4.$background,
-    theme = _ref4.theme;
-  return $background || theme.vms.accent.softBlue;
-}, MOBILE_BREAKPOINT, function (_ref5) {
-  var $isMobileOpen = _ref5.$isMobileOpen;
+}, MOBILE_BREAKPOINT, function (_ref4) {
+  var $isMobileOpen = _ref4.$isMobileOpen;
   return $isMobileOpen ? '0' : '-100%';
+}, function (_ref5) {
+  var $isMobileOpen = _ref5.$isMobileOpen;
+  return $isMobileOpen ? '2px 0 8px rgba(0, 0, 0, 0.15)' : 'none';
 }, function (_ref6) {
   var $isMobileOpen = _ref6.$isMobileOpen;
-  return $isMobileOpen ? '2px 0 8px rgba(0, 0, 0, 0.15)' : 'none';
+  return $isMobileOpen ? 1 : 0;
 }, function (_ref7) {
   var $isMobileOpen = _ref7.$isMobileOpen;
-  return $isMobileOpen ? 1 : 0;
-}, function (_ref8) {
-  var $isMobileOpen = _ref8.$isMobileOpen;
   return $isMobileOpen ? 'visible' : 'hidden';
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _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 (_ref9) {
-  var $padding = _ref9.$padding;
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _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 (_ref8) {
+  var $padding = _ref8.$padding;
   return $padding;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.vms.text.medium;
 }, function (_ref10) {
   var theme = _ref10.theme;
-  return theme.vms.text.medium;
+  return theme.vms.text.white;
 }, function (_ref11) {
   var theme = _ref11.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.vms["default"].primary;
+  return theme.vms.text.white;
 }, function (_ref13) {
   var theme = _ref13.theme;
   return theme.vms.text.white;
 }, function (_ref14) {
   var theme = _ref14.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref15) {
   var theme = _ref15.theme;
-  return theme.vms["default"].primary;
-}, function (_ref16) {
-  var theme = _ref16.theme;
   return theme.vms.text.white;
 });
-var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _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 (_ref17) {
-  var $selected = _ref17.$selected,
-    theme = _ref17.theme;
+var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _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 (_ref16) {
+  var $selected = _ref16.$selected,
+    theme = _ref16.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
-var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref18) {
+var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.vms.text.white;
+}, function (_ref18) {
   var theme = _ref18.theme;
   return theme.vms.text.white;
 }, function (_ref19) {
@@ -10873,34 +10872,31 @@ var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templat
   return theme.vms.text.white;
 }, function (_ref21) {
   var theme = _ref21.theme;
-  return theme.vms.text.white;
-}, function (_ref22) {
-  var theme = _ref22.theme;
   return theme.vms.text.medium;
 });
-var Logo = styled__default.div(_templateObject7$6 || (_templateObject7$6 = _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(_templateObject8$5 || (_templateObject8$5 = _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\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref23) {
-  var $padding = _ref23.$padding;
+var Logo = styled__default(Container)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
+var TextContainer = styled__default.span(_templateObject8$5 || (_templateObject8$5 = _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\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref22) {
+  var $padding = _ref22.$padding;
   return $padding;
-}, function (_ref24) {
-  var $fontSize = _ref24.$fontSize;
+}, function (_ref23) {
+  var $fontSize = _ref23.$fontSize;
   return $fontSize || '20px';
-}, function (_ref25) {
-  var $fontWeight = _ref25.$fontWeight;
+}, function (_ref24) {
+  var $fontWeight = _ref24.$fontWeight;
   return $fontWeight || '500';
 }, SidebarContainer, MOBILE_BREAKPOINT);
-var NotificationBadge = styled__default.div(_templateObject9$5 || (_templateObject9$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  z-index: 100;\n  width: max-content;\n"])), function (_ref26) {
-  var $position = _ref26.$position;
+var NotificationBadge = styled__default.div(_templateObject9$5 || (_templateObject9$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  z-index: 100;\n  width: max-content;\n"])), function (_ref25) {
+  var $position = _ref25.$position;
   return $position || 'absolute';
 });
-var Sidebar = function Sidebar(_ref27) {
-  var logo = _ref27.logo,
-    content = _ref27.content,
-    background = _ref27.background,
-    ProfileContent = _ref27.ProfileContent,
-    _ref27$isExpanded = _ref27.isExpanded,
-    isExpanded = _ref27$isExpanded === void 0 ? false : _ref27$isExpanded,
-    setIsExpanded = _ref27.setIsExpanded;
+var Sidebar = function Sidebar(_ref26) {
+  var logo = _ref26.logo,
+    content = _ref26.content,
+    background = _ref26.background,
+    ProfileContent = _ref26.ProfileContent,
+    _ref26$isExpanded = _ref26.isExpanded,
+    isExpanded = _ref26$isExpanded === void 0 ? false : _ref26$isExpanded,
+    setIsExpanded = _ref26.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
@@ -10940,6 +10936,14 @@ var Sidebar = function Sidebar(_ref27) {
     isExpandedRef.current = isExpanded;
     if (!isExpanded) setOpenMenus({});
   }, [isExpanded]);
+  React.useEffect(function () {
+    if (isMobile && !isMobileOpen) {
+      setOpenMenus({});
+    }
+    if (isMobile) {
+      setIsExpanded(true);
+    }
+  }, [isMobile, isMobileOpen]);
   var toggleMobileMenu = React.useCallback(function () {
     setIsMobileOpen(function (prev) {
       return !prev;
@@ -10955,9 +10959,9 @@ var Sidebar = function Sidebar(_ref27) {
   }, []);
   var toggleMenu = function toggleMenu(id) {
     setOpenMenus(function (prev) {
-      var _ref28;
+      var _ref27;
       var isCurrentlyOpen = !!prev[id];
-      return isCurrentlyOpen ? {} : (_ref28 = {}, _ref28[id] = true, _ref28);
+      return isCurrentlyOpen ? {} : (_ref27 = {}, _ref27[id] = true, _ref27);
     });
   };
   var getTotalNotifications = React.useCallback(function (item) {
@@ -10982,8 +10986,8 @@ var Sidebar = function Sidebar(_ref27) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = function ChildLink(_ref29) {
-    var child = _ref29.child;
+  var ChildLink = function ChildLink(_ref28) {
+    var child = _ref28.child;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
@@ -11030,14 +11034,14 @@ var Sidebar = function Sidebar(_ref27) {
       });
     }));
   };
-  var SidebarItem = function SidebarItem(_ref30) {
-    var item = _ref30.item,
-      isActive = _ref30.isActive,
-      isOpen = _ref30.isOpen,
-      hasChildren = _ref30.hasChildren,
-      isExpanded = _ref30.isExpanded,
-      onToggle = _ref30.onToggle,
-      renderChildLinks = _ref30.renderChildLinks;
+  var SidebarItem = function SidebarItem(_ref29) {
+    var item = _ref29.item,
+      isActive = _ref29.isActive,
+      isOpen = _ref29.isOpen,
+      hasChildren = _ref29.hasChildren,
+      isExpanded = _ref29.isExpanded,
+      onToggle = _ref29.onToggle,
+      renderChildLinks = _ref29.renderChildLinks;
     var themeColors = styled.useTheme();
     var activeClass = isActive ? 'active' : '';
     var handleClick = React.useCallback(function () {
@@ -11173,15 +11177,33 @@ var Sidebar = function Sidebar(_ref27) {
     };
   }, [content, isExpanded, getTotalNotifications]);
   var themeColors = styled.useTheme();
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(HamburgerButton, {
-    "$background": background,
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container, {
+    "$width": '100%',
+    "$background": background != null ? background : themeColors.vms.accent.softBlue,
+    "$alignItems": 'center'
+  }, logo && isMobile && (logo.icon ? React__default.createElement(Logo, {
+    "$padding": '10px 10px 10px 46px',
+    "$height": 'max-content'
+  }, React__default.createElement(Icon, {
+    icon: logo.icon,
+    color: logo.iconColor
+  }), React__default.createElement(TextContainer, null, logo.name)) : logo.imageDetails && React__default.createElement(Logo, {
+    "$padding": '10px 10px 10px 46px',
+    "$height": 'max-content'
+  }, React__default.createElement("img", {
+    src: logo.imageDetails.url,
+    alt: logo.imageDetails.altText,
+    width: logo.imageDetails.width,
+    height: logo.imageDetails.height
+  }))), React__default.createElement(HamburgerButton, {
     onClick: toggleMobileMenu,
-    "aria-label": "Toggle menu"
+    "aria-label": 'Toggle menu'
   }, React__default.createElement(Icon, {
     icon: isMobileOpen ? 'X' : 'Hamburger',
-    size: 24,
-    color: themeColors.vms.text.white
-  })), React__default.createElement(Overlay, {
+    size: 20,
+    color: themeColors.vms.text.dark,
+    weight: '1px'
+  }))), React__default.createElement(Overlay, {
     "$isOpen": isMobileOpen,
     onClick: handleOverlayClick
   }), React__default.createElement(SidebarContainer, {
@@ -11193,10 +11215,14 @@ var Sidebar = function Sidebar(_ref27) {
     "$gap": '28px',
     "$width": '100%',
     "$overflow": 'hidden'
-  }, logo && (logo.icon ? React__default.createElement(Logo, null, React__default.createElement(Icon, {
+  }, logo && (logo.icon ? React__default.createElement(Logo, {
+    "$height": '32px'
+  }, React__default.createElement(Icon, {
     icon: logo.icon,
     color: logo.iconColor
-  }), React__default.createElement(TextContainer, null, 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, {
+    "$height": '32px'
+  }, React__default.createElement("img", {
     src: logo.imageDetails.url,
     alt: logo.imageDetails.altText,
     width: logo.imageDetails.width,
@@ -11218,7 +11244,7 @@ var Sidebar = function Sidebar(_ref27) {
       isActive: active,
       isOpen: isOpen,
       hasChildren: hasChildren,
-      isExpanded: isMobile ? isMobileOpen : isExpanded,
+      isExpanded: isMobile ? true : isExpanded,
       onToggle: function onToggle() {
         return toggleMenu(item.id);
       },