labsense-ui-kit 1.4.48 → 1.4.49

package/dist/index.js

@@ -12447,7 +12447,7 @@ var Overlay = styled__default.div(_templateObject$n || (_templateObject$n = _tag
   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    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 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 to a fixed width - not max-content, which would resize\n     the sidebar itself depending on which submenu happens to be open (a\n     longer/deeper-indented child label, e.g. \"API Key Management\" under\n     Administration, made the box wider than with it collapsed or another\n     menu open). Sized to comfortably fit the longest current label already\n     used with room to spare; matches the fixed width already used for the\n     mobile-open state below. */\n  &:hover {\n    width: 230px;\n    max-width: 230px;\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;