labsense-ui-kit 1.3.81 → 1.3.83

package/dist/index.js

@@ -9480,7 +9480,7 @@ var Label = styled__default.label(_templateObject$f || (_templateObject$f = _tag
       return $titlecolor;
   }
 });
-var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref4) {
+var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref5) {
@@ -9495,11 +9495,8 @@ var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _t
   var $color = _ref7.$color;
   return $color;
 }, function (_ref8) {
-  var $disabled = _ref8.$disabled;
-  return $disabled ? 'none' : 'auto';
-}, function (_ref9) {
-  var $size = _ref9.$size,
-    $type = _ref9.$type;
+  var $size = _ref8.$size,
+    $type = _ref8.$type;
   switch ($size) {
     case 'small':
       return "\n          font-size: 12px;\n          padding: " + ($type === 'password' ? '5px 38px 5px 10px' : '5px 10px') + ";\n        ";
@@ -9510,9 +9507,9 @@ var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _t
     default:
       return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n        ";
   }
-}, function (_ref10) {
-  var $color = _ref10.$color,
-    theme = _ref10.theme;
+}, function (_ref9) {
+  var $color = _ref9.$color,
+    theme = _ref9.theme;
   switch ($color) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9533,89 +9530,95 @@ var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _t
     default:
       return $color;
   }
-}, function (_ref11) {
-  var theme = _ref11.theme;
+}, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.vms.text.light;
 });
 var InputWrapper$1 = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$1 = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref12) {
-  var $disabled = _ref12.$disabled;
+var IconWrapper$1 = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref11) {
+  var $disabled = _ref11.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$1 = styled__default.span(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref13) {
-  var theme = _ref13.theme;
+var Asterisk$1 = styled__default.span(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.vms["default"].error;
 });
-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 TimeInputWrapper$1 = styled__default(InputWrapper$1)(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  cursor: ", ";\n\n  input {\n    cursor: ", ";\n  }\n"])), function (_ref13) {
+  var $disabled = _ref13.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref14) {
+  var $disabled = _ref14.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+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 (_ref15) {
   var theme = _ref15.theme;
+  return theme.vms.border.light;
+}, function (_ref16) {
+  var theme = _ref16.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;
+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 (_ref17) {
+  var theme = _ref17.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 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 (_ref18) {
   var theme = _ref18.theme;
-  return theme.vms.accent.light_2;
+  return theme.vms.border.light;
 }, function (_ref19) {
   var theme = _ref19.theme;
   return theme.vms.accent.light_2;
 }, function (_ref20) {
   var theme = _ref20.theme;
-  return theme.vms.border.medium;
+  return theme.vms.accent.light_2;
 }, function (_ref21) {
   var theme = _ref21.theme;
+  return theme.vms.border.medium;
+}, function (_ref22) {
+  var theme = _ref22.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 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 (_ref23) {
   var $selected = _ref23.$selected,
     theme = _ref23.theme;
-  return $selected ? theme.vms["default"].primary : 'transparent';
+  return $selected ? theme.vms.text.white : theme.vms.text.dark;
 }, function (_ref24) {
   var $selected = _ref24.$selected,
     theme = _ref24.theme;
+  return $selected ? theme.vms["default"].primary : 'transparent';
+}, function (_ref25) {
+  var $selected = _ref25.$selected,
+    theme = _ref25.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,
-    autoComplete = _ref25.autoComplete;
+var TextField = function TextField(_ref26) {
+  var _ref26$type = _ref26.type,
+    type = _ref26$type === void 0 ? 'text' : _ref26$type,
+    title = _ref26.title,
+    name = _ref26.name,
+    titleWeight = _ref26.titleWeight,
+    placeholder = _ref26.placeholder,
+    _ref26$disabled = _ref26.disabled,
+    disabled = _ref26$disabled === void 0 ? false : _ref26$disabled,
+    inputValue = _ref26.inputValue,
+    onChange = _ref26.onChange,
+    _ref26$size = _ref26.size,
+    size = _ref26$size === void 0 ? 'medium' : _ref26$size,
+    color = _ref26.color,
+    _ref26$padding = _ref26.padding,
+    padding = _ref26$padding === void 0 ? '0px' : _ref26$padding,
+    titlecolor = _ref26.titlecolor,
+    icon = _ref26.icon,
+    _ref26$iconsize = _ref26.iconsize,
+    iconsize = _ref26$iconsize === void 0 ? 18 : _ref26$iconsize,
+    iconweight = _ref26.iconweight,
+    iconcolor = _ref26.iconcolor,
+    _ref26$required = _ref26.required,
+    required = _ref26$required === void 0 ? false : _ref26$required,
+    background = _ref26.background,
+    onEnter = _ref26.onEnter,
+    titleRightNode = _ref26.titleRightNode,
+    autoComplete = _ref26.autoComplete;
   var themeColors = useTheme();
   var _useState = React.useState(disabled),
     isDisabled = _useState[0],
@@ -9804,7 +9807,8 @@ var TextField = function TextField(_ref25) {
       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
+      ref: timePickerRef,
+      "$disabled": isDisabled
     }, React__default.createElement(Input, {
       type: 'text',
       value: timeValue,
@@ -9943,7 +9947,7 @@ var Label$1 = styled__default.label(_templateObject2$d || (_templateObject2$d =
     theme = _ref4.theme;
   return $titlecolor || theme.vms.text.dark;
 });
-var TextAreaComponent = styled__default.textarea(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  pointer-events: ", ";\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref5) {
+var TextAreaComponent = styled__default.textarea(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref6) {
@@ -9958,10 +9962,7 @@ var TextAreaComponent = styled__default.textarea(_templateObject3$9 || (_templat
   var $color = _ref8.$color;
   return $color;
 }, function (_ref9) {
-  var $disabled = _ref9.$disabled;
-  return $disabled ? 'none' : 'auto';
-}, function (_ref10) {
-  var $size = _ref10.$size;
+  var $size = _ref9.$size;
   switch ($size) {
     case 'small':
       return 'font-size: 12px; padding: 5px 10px;';
@@ -9972,32 +9973,32 @@ var TextAreaComponent = styled__default.textarea(_templateObject3$9 || (_templat
     default:
       return 'font-size: 14px; padding: 7px 12px;';
   }
-}, function (_ref11) {
-  var $color = _ref11.$color,
-    theme = _ref11.theme;
+}, function (_ref10) {
+  var $color = _ref10.$color,
+    theme = _ref10.theme;
   return $color || theme.vms.text.dark;
-}, function (_ref12) {
-  var theme = _ref12.theme;
+}, function (_ref11) {
+  var theme = _ref11.theme;
   return theme.vms.text.light;
 });
-var TextArea = function TextArea(_ref13) {
-  var title = _ref13.title,
-    name = _ref13.name,
-    titleWeight = _ref13.titleWeight,
-    placeholder = _ref13.placeholder,
-    _ref13$disabled = _ref13.disabled,
-    disabled = _ref13$disabled === void 0 ? false : _ref13$disabled,
-    inputValue = _ref13.inputValue,
-    onChange = _ref13.onChange,
-    _ref13$size = _ref13.size,
-    size = _ref13$size === void 0 ? 'medium' : _ref13$size,
-    color = _ref13.color,
-    _ref13$padding = _ref13.padding,
-    padding = _ref13$padding === void 0 ? '0px' : _ref13$padding,
-    titlecolor = _ref13.titlecolor,
-    _ref13$required = _ref13.required,
-    required = _ref13$required === void 0 ? false : _ref13$required,
-    background = _ref13.background;
+var TextArea = function TextArea(_ref12) {
+  var title = _ref12.title,
+    name = _ref12.name,
+    titleWeight = _ref12.titleWeight,
+    placeholder = _ref12.placeholder,
+    _ref12$disabled = _ref12.disabled,
+    disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
+    inputValue = _ref12.inputValue,
+    onChange = _ref12.onChange,
+    _ref12$size = _ref12.size,
+    size = _ref12$size === void 0 ? 'medium' : _ref12$size,
+    color = _ref12.color,
+    _ref12$padding = _ref12.padding,
+    padding = _ref12$padding === void 0 ? '0px' : _ref12$padding,
+    titlecolor = _ref12.titlecolor,
+    _ref12$required = _ref12.required,
+    required = _ref12$required === void 0 ? false : _ref12$required,
+    background = _ref12.background;
   var themeColors = useTheme();
   var _useState = React.useState(disabled),
     isDisabled = _useState[0],
@@ -10802,7 +10803,7 @@ var ProgressBar = function ProgressBar(_ref3) {
 };
 
 var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$8, _templateObject7$6, _templateObject8$5, _templateObject9$5;
-var MOBILE_BREAKPOINT = '992px';
+var MOBILE_BREAKPOINT = '991px';
 var Overlay = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  display: none;\n  \n  @media (max-width: ", ") {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 997;\n    opacity: ", ";\n    visibility: ", ";\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n  }\n"])), MOBILE_BREAKPOINT, function (_ref) {
   var $isOpen = _ref.$isOpen;
   return $isOpen ? 1 : 0;
@@ -10924,7 +10925,7 @@ var Sidebar = function Sidebar(_ref26) {
     badgePortalContainer = _useState4[0];
   React.useEffect(function () {
     var checkMobile = function checkMobile() {
-      setIsMobile(window.innerWidth <= 992);
+      setIsMobile(window.innerWidth <= 991);
     };
     checkMobile();
     window.addEventListener('resize', checkMobile);