labsense-ui-kit 1.3.27 → 1.3.29

package/dist/Inputs/TextField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconNames } from '../Icons';
 export declare const Asterisk: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-declare type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | 'checkbox' | 'radio' | 'range' | 'file' | 'hidden';
+declare type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time-24hr' | 'time-12hr' | 'color' | 'checkbox' | 'radio' | 'range' | 'file' | 'hidden';
 interface InputProps {
     type?: InputType;
     name?: string;

package/dist/index.js

@@ -8579,7 +8579,7 @@ var SearchBox = function SearchBox(_ref9) {
   }));
 };
 
-var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6;
+var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$4, _templateObject11$3;
 var Label = styled__default.label(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: ", ";\n  position: relative;\n  white-space: nowrap;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $fontWeight = _ref.$fontWeight;
   return $fontWeight != null ? $fontWeight : '500';
@@ -8685,33 +8685,75 @@ var Asterisk$1 = styled__default.span(_templateObject5$6 || (_templateObject5$6
   var theme = _ref13.theme;
   return theme.vms["default"].error;
 });
-var TextField = function TextField(_ref14) {
-  var _ref14$type = _ref14.type,
-    type = _ref14$type === void 0 ? 'text' : _ref14$type,
-    title = _ref14.title,
-    name = _ref14.name,
-    titleWeight = _ref14.titleWeight,
-    placeholder = _ref14.placeholder,
-    _ref14$disabled = _ref14.disabled,
-    disabled = _ref14$disabled === void 0 ? false : _ref14$disabled,
-    inputValue = _ref14.inputValue,
-    onChange = _ref14.onChange,
-    _ref14$size = _ref14.size,
-    size = _ref14$size === void 0 ? 'medium' : _ref14$size,
-    color = _ref14.color,
-    _ref14$padding = _ref14.padding,
-    padding = _ref14$padding === void 0 ? '0px' : _ref14$padding,
-    titlecolor = _ref14.titlecolor,
-    icon = _ref14.icon,
-    _ref14$iconsize = _ref14.iconsize,
-    iconsize = _ref14$iconsize === void 0 ? 18 : _ref14$iconsize,
-    iconweight = _ref14.iconweight,
-    iconcolor = _ref14.iconcolor,
-    _ref14$required = _ref14.required,
-    required = _ref14$required === void 0 ? false : _ref14$required,
-    background = _ref14.background,
-    onEnter = _ref14.onEnter,
-    titleRightNode = _ref14.titleRightNode;
+var TimeInputWrapper$1 = styled__default(InputWrapper$1)(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  input {\n    cursor: pointer;\n  }\n"])));
+var TimePickerDropdown = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  display: flex;\n  gap: 8px;\n  padding: 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 999;\n"])), function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.vms.border.light;
+}, function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.vms.text.white;
+});
+var SliderColumn = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n"])));
+var SliderLabel = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 4px;\n"])), function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.vms.text.medium;
+});
+var SliderWrapper = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  height: 150px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  background: ", ";\n  width: 60px;\n  scroll-behavior: smooth;\n  \n  /* Custom scrollbar */\n  &::-webkit-scrollbar {\n    width: 4px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 2px;\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.vms.border.light;
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.vms.accent.light_2;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.vms.accent.light_2;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.vms.border.medium;
+}, function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.vms.text.medium;
+});
+var SliderItem = styled__default.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  text-align: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: ", ";\n  background: ", ";\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref22) {
+  var $selected = _ref22.$selected,
+    theme = _ref22.theme;
+  return $selected ? theme.vms.text.white : theme.vms.text.dark;
+}, function (_ref23) {
+  var $selected = _ref23.$selected,
+    theme = _ref23.theme;
+  return $selected ? theme.vms["default"].primary : 'transparent';
+}, function (_ref24) {
+  var $selected = _ref24.$selected,
+    theme = _ref24.theme;
+  return $selected ? theme.vms["default"].primary : theme.vms.accent.light_3;
+});
+var TextField = function TextField(_ref25) {
+  var _ref25$type = _ref25.type,
+    type = _ref25$type === void 0 ? 'text' : _ref25$type,
+    title = _ref25.title,
+    name = _ref25.name,
+    titleWeight = _ref25.titleWeight,
+    placeholder = _ref25.placeholder,
+    _ref25$disabled = _ref25.disabled,
+    disabled = _ref25$disabled === void 0 ? false : _ref25$disabled,
+    inputValue = _ref25.inputValue,
+    onChange = _ref25.onChange,
+    _ref25$size = _ref25.size,
+    size = _ref25$size === void 0 ? 'medium' : _ref25$size,
+    color = _ref25.color,
+    _ref25$padding = _ref25.padding,
+    padding = _ref25$padding === void 0 ? '0px' : _ref25$padding,
+    titlecolor = _ref25.titlecolor,
+    icon = _ref25.icon,
+    _ref25$iconsize = _ref25.iconsize,
+    iconsize = _ref25$iconsize === void 0 ? 18 : _ref25$iconsize,
+    iconweight = _ref25.iconweight,
+    iconcolor = _ref25.iconcolor,
+    _ref25$required = _ref25.required,
+    required = _ref25$required === void 0 ? false : _ref25$required,
+    background = _ref25.background,
+    onEnter = _ref25.onEnter,
+    titleRightNode = _ref25.titleRightNode;
   var themeColors = useTheme();
   var _useState = React.useState(disabled),
     isDisabled = _useState[0],
@@ -8719,19 +8761,218 @@ var TextField = function TextField(_ref14) {
   var _useState2 = React.useState(type),
     inputType = _useState2[0],
     setInputType = _useState2[1];
-  var handleToggleDisabled = function handleToggleDisabled() {
-    setIsDisabled(function (prev) {
-      return !prev;
+  var _useState3 = React.useState(false),
+    showDropdown = _useState3[0],
+    setShowDropdown = _useState3[1];
+  var _useState4 = React.useState(inputValue),
+    timeValue = _useState4[0],
+    setTimeValue = _useState4[1];
+  var _useState5 = React.useState(0),
+    selectedHour = _useState5[0],
+    setSelectedHour = _useState5[1];
+  var _useState6 = React.useState(0),
+    selectedMinute = _useState6[0],
+    setSelectedMinute = _useState6[1];
+  var _useState7 = React.useState('AM'),
+    selectedPeriod = _useState7[0],
+    setSelectedPeriod = _useState7[1];
+  var timePickerRef = React.useRef(null);
+  React.useEffect(function () {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  var _useState8 = React.useState({}),
+    dropdownStyle = _useState8[0],
+    setDropdownStyle = _useState8[1];
+  React.useEffect(function () {
+    if (!showDropdown) return;
+    var closeDropdown = function closeDropdown(event) {
+      if (event && event instanceof MouseEvent && timePickerRef.current && timePickerRef.current.contains(event.target)) {
+        return;
+      }
+      setShowDropdown(false);
+    };
+    document.addEventListener('mousedown', closeDropdown);
+    window.addEventListener('scroll', closeDropdown, true);
+    window.addEventListener('resize', closeDropdown);
+    return function () {
+      document.removeEventListener('mousedown', closeDropdown);
+      window.removeEventListener('scroll', closeDropdown, true);
+      window.removeEventListener('resize', closeDropdown);
+    };
+  }, [showDropdown]);
+  React.useEffect(function () {
+    if (inputValue && (type === 'time-24hr' || type === 'time-12hr')) {
+      var parts = inputValue.split(':');
+      if (parts.length === 2) {
+        var hour = parseInt(parts[0], 10);
+        var minute = parseInt(parts[1], 10);
+        if (type === 'time-24hr') {
+          setSelectedHour(hour);
+          setSelectedMinute(minute);
+        } else if (type === 'time-12hr') {
+          var isPM = inputValue.toLowerCase().includes('pm');
+          setSelectedPeriod(isPM ? 'PM' : 'AM');
+          setSelectedHour(hour === 0 ? 12 : hour > 12 ? hour - 12 : hour);
+          setSelectedMinute(minute);
+        }
+      }
+    }
+  }, [inputValue, type]);
+  var handleTimeInput = function handleTimeInput(e) {
+    var val = e.target.value.replace(/\D/g, '');
+    if (val.length > 4) val = val.slice(0, 4);
+    var formatted = val;
+    if (val.length >= 3) {
+      formatted = val.slice(0, 2) + ':' + val.slice(2);
+    }
+    if (val.length >= 2) {
+      var hour = parseInt(val.slice(0, 2), 10);
+      if (type === 'time-24hr' && hour >= 0 && hour <= 23) {
+        setSelectedHour(hour);
+      } else if (type === 'time-12hr' && hour >= 1 && hour <= 12) {
+        setSelectedHour(hour);
+      }
+    }
+    if (val.length === 4) {
+      var minute = parseInt(val.slice(2, 4), 10);
+      if (minute >= 0 && minute <= 59) {
+        setSelectedMinute(minute);
+      }
+    }
+    setTimeValue(formatted);
+    var syntheticEvent = _extends({}, e, {
+      target: _extends({}, e.target, {
+        value: formatted
+      })
     });
+    onChange === null || onChange === void 0 ? void 0 : onChange(syntheticEvent);
   };
-  var handleShowPassword = function handleShowPassword() {
-    setInputType(function (prevType) {
-      return prevType === 'password' ? 'text' : 'password';
+  var getHours = function getHours() {
+    if (type === 'time-12hr') {
+      return Array.from({
+        length: 12
+      }, function (_, i) {
+        return i + 1;
+      });
+    }
+    return Array.from({
+      length: 24
+    }, function (_, i) {
+      return i;
     });
   };
-  React.useEffect(function () {
-    setIsDisabled(disabled);
-  }, [disabled]);
+  var minutes = Array.from({
+    length: 60
+  }, function (_, i) {
+    return i;
+  });
+  var handleTimeChange = function handleTimeChange(hour, minute, period) {
+    var h = hour !== undefined ? hour : selectedHour;
+    var m = minute !== undefined ? minute : selectedMinute;
+    var p = period !== undefined ? period : selectedPeriod;
+    if (hour !== undefined) setSelectedHour(hour);
+    if (minute !== undefined) setSelectedMinute(minute);
+    if (period !== undefined) setSelectedPeriod(period);
+    var formatted = '';
+    if (type === 'time-24hr') {
+      formatted = h.toString().padStart(2, '0') + ":" + m.toString().padStart(2, '0');
+    } else if (type === 'time-12hr') {
+      var hour24 = h;
+      if (p === 'PM' && h !== 12) hour24 = h + 12;
+      if (p === 'AM' && h === 12) hour24 = 0;
+      formatted = hour24.toString().padStart(2, '0') + ":" + m.toString().padStart(2, '0');
+    }
+    setTimeValue(formatted);
+    var syntheticEvent = {
+      target: {
+        value: formatted,
+        name: name
+      }
+    };
+    onChange === null || onChange === void 0 ? void 0 : onChange(syntheticEvent);
+  };
+  var toggleDropdown = function toggleDropdown() {
+    if (isDisabled) return;
+    if (!showDropdown && timePickerRef.current) {
+      var rect = timePickerRef.current.getBoundingClientRect();
+      var dropdownHeight = 200;
+      var _padding = 8;
+      var spaceBelow = window.innerHeight - rect.bottom;
+      var openUp = spaceBelow < dropdownHeight && rect.top > dropdownHeight;
+      var top = openUp ? rect.top - dropdownHeight - _padding : rect.bottom + _padding;
+      setDropdownStyle({
+        position: 'fixed',
+        top: top,
+        left: rect.left,
+        zIndex: 999
+      });
+    }
+    setShowDropdown(function (prev) {
+      return !prev;
+    });
+  };
+  if (type === 'time-24hr' || type === 'time-12hr') {
+    return React__default.createElement(Container, {
+      "$flexDirection": 'column',
+      "$width": '100%',
+      "$gap": '8px',
+      "$padding": padding,
+      "$position": 'relative'
+    }, (title || titleRightNode) && React__default.createElement(Container, {
+      "$gap": titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.gap
+    }, title && React__default.createElement(Label, {
+      "$size": size,
+      "$fontWeight": titleWeight,
+      htmlFor: title,
+      "$titlecolor": titlecolor || themeColors.vms.text.dark
+    }, title, required && React__default.createElement(Asterisk$1, null, "*")), titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.node), React__default.createElement(TimeInputWrapper$1, {
+      ref: timePickerRef
+    }, React__default.createElement(Input, {
+      type: 'text',
+      value: timeValue,
+      placeholder: type === 'time-12hr' ? 'HHMM' : 'HHMM',
+      onClick: toggleDropdown,
+      onChange: handleTimeInput,
+      "$disabled": isDisabled,
+      "$size": size,
+      "$color": color || themeColors.vms.text.dark,
+      "$background": background || themeColors.vms["default"].tertiary,
+      readOnly: false
+    }), React__default.createElement(IconWrapper$1, {
+      onClick: toggleDropdown
+    }, React__default.createElement(Icon, {
+      icon: 'Calendar',
+      size: iconsize,
+      weight: iconweight,
+      color: iconcolor || themeColors.vms["default"].primary
+    })), showDropdown && React__default.createElement(TimePickerDropdown, {
+      style: dropdownStyle
+    }, React__default.createElement(SliderColumn, null, React__default.createElement(SliderLabel, null, type === 'time-12hr' ? 'Hour' : 'Hours'), React__default.createElement(SliderWrapper, null, getHours().map(function (h) {
+      return React__default.createElement(SliderItem, {
+        key: h,
+        "$selected": selectedHour === h,
+        onClick: function onClick() {
+          return handleTimeChange(h, undefined, undefined);
+        }
+      }, h.toString().padStart(2, '0'));
+    }))), React__default.createElement(SliderColumn, null, React__default.createElement(SliderLabel, null, "Minutes"), React__default.createElement(SliderWrapper, null, minutes.map(function (m) {
+      return React__default.createElement(SliderItem, {
+        key: m,
+        "$selected": selectedMinute === m,
+        onClick: function onClick() {
+          return handleTimeChange(undefined, m, undefined);
+        }
+      }, m.toString().padStart(2, '0'));
+    }))), type === 'time-12hr' && React__default.createElement(SliderColumn, null, React__default.createElement(SliderLabel, null, "Period"), React__default.createElement(SliderWrapper, null, ['AM', 'PM'].map(function (period) {
+      return React__default.createElement(SliderItem, {
+        key: period,
+        "$selected": selectedPeriod === period,
+        onClick: function onClick() {
+          return handleTimeChange(undefined, undefined, period);
+        }
+      }, period);
+    }))))));
+  }
   return React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$width": '100%',
@@ -8758,14 +8999,14 @@ var TextField = function TextField(_ref14) {
     "$background": background || themeColors.vms["default"].tertiary,
     readOnly: onChange === undefined || isDisabled ? true : false,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        if (onEnter) onEnter();
-      }
+      if (e.key === 'Enter') onEnter === null || onEnter === void 0 ? void 0 : onEnter();
     }
   }), type === 'password' && inputValue && React__default.createElement(IconWrapper$1, {
     "$disabled": disabled,
     onClick: function onClick() {
-      if (!disabled) handleShowPassword();
+      if (!disabled) setInputType(function (prev) {
+        return prev === 'password' ? 'text' : 'password';
+      });
     }
   }, React__default.createElement(Icon, {
     icon: inputType === 'password' ? 'CloseEye' : 'OpenEye',
@@ -8773,7 +9014,11 @@ var TextField = function TextField(_ref14) {
     weight: iconweight,
     color: iconcolor || themeColors.vms["default"].primary
   })), icon && type !== 'password' && React__default.createElement(IconWrapper$1, {
-    onClick: handleToggleDisabled
+    onClick: function onClick() {
+      return setIsDisabled(function (prev) {
+        return !prev;
+      });
+    }
   }, React__default.createElement(Icon, {
     icon: icon,
     size: iconsize,
@@ -8889,7 +9134,7 @@ var TextArea = function TextArea(_ref13) {
   }));
 };
 
-var _templateObject$h, _templateObject2$e, _templateObject3$a, _templateObject4$7, _templateObject5$7, _templateObject6$6, _templateObject7$4;
+var _templateObject$h, _templateObject2$e, _templateObject3$a, _templateObject4$7, _templateObject5$7, _templateObject6$7, _templateObject7$5;
 var OptionContainer$1 = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.vms.text.white;
@@ -8950,7 +9195,7 @@ var SearchContainer$3 = styled__default.div(_templateObject5$7 || (_templateObje
   var $borderRadius = _ref11.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$3 = styled__default.input(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), function (_ref12) {
+var SearchBar$3 = styled__default.input(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), function (_ref12) {
   var theme = _ref12.theme;
   return theme.vms["default"].tertiary;
 }, function (_ref13) {
@@ -9000,7 +9245,7 @@ var SearchBar$3 = styled__default.input(_templateObject6$6 || (_templateObject6$
       return $placeholderColor;
   }
 });
-var OptionsWrapper$1 = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", ";\n"])), function (_ref15) {
+var OptionsWrapper$1 = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", ";\n"])), function (_ref15) {
   var theme = _ref15.theme;
   return theme.vms.text.white;
 });
@@ -9608,7 +9853,7 @@ var ProgressBar = function ProgressBar(_ref3) {
   }));
 };
 
-var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$5;
+var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$8, _templateObject7$6;
 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: 9988;\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;
@@ -9652,7 +9897,7 @@ var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templat
   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  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 TextContainer = styled__default.span(_templateObject6$8 || (_templateObject6$8 = _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 (_ref14) {
@@ -9662,7 +9907,7 @@ var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6
   var $fontWeight = _ref15.$fontWeight;
   return $fontWeight || '500';
 }, 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  z-index: 100;\n  width: max-content;\n"])), function (_ref16) {
+var NotificationBadge = styled__default.div(_templateObject7$6 || (_templateObject7$6 = _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 (_ref16) {
   var $position = _ref16.$position;
   return $position || 'absolute';
 });
@@ -10317,7 +10562,7 @@ var Table = function Table(_ref9) {
   })));
 };
 
-var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8;
+var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
 var Container$4 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $overflow = _ref.$overflow;
   return $overflow || 'visible';
@@ -10366,7 +10611,7 @@ var DetailsFirstContainer = styled__default.div(_templateObject5$a || (_template
     theme = _ref13.theme;
   return $active ? theme.vms["default"].primary : theme.vms.text.medium;
 });
-var TabItemsWrapper = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var TabItemsWrapper = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
 var Tabs = function Tabs(_ref14) {
   var tabItems = _ref14.tabItems,
     _ref14$disabled = _ref14.disabled,