labsense-ui-kit 1.1.83 → 1.1.84

package/dist/index.js

@@ -4843,8 +4843,144 @@ var OptionComponent = function OptionComponent(_ref9) {
   }, NoOptionsText))));
 };
 
-var _templateObject$a, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2;
-var DropdownContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 100%;\n  position: relative;\n  max-height: ", ";\n"])), function (_ref) {
+var useClickOutside = function useClickOutside(elRef, elCallback) {
+  var callbackRef = React.useRef(elCallback);
+  callbackRef.current = elCallback;
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(eve) {
+      var _elRef$current;
+      if (!(elRef !== null && elRef !== void 0 && (_elRef$current = elRef.current) !== null && _elRef$current !== void 0 && _elRef$current.contains(eve.target))) {
+        callbackRef.current(eve);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return function () {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [elCallback, elRef]);
+};
+
+var _templateObject$a, _templateObject2$7;
+var ModalOverlay = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
+var ModalContainer = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: visible;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_1;
+}, function (_ref2) {
+  var $maxWidth = _ref2.$maxWidth;
+  return $maxWidth ? $maxWidth : '400px';
+});
+var Modal = function Modal(_ref3) {
+  var isOpen = _ref3.isOpen,
+    maxWidth = _ref3.maxWidth,
+    children = _ref3.children;
+  if (!isOpen) return null;
+  return React__default.createElement(ModalOverlay, null, React__default.createElement(ModalContainer, {
+    "$maxWidth": maxWidth,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children));
+};
+var useCustomModal = function useCustomModal(_ref4) {
+  var maxWidth = _ref4.maxWidth;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var createModal = function createModal(content) {
+    return React__default.createElement(Modal, {
+      isOpen: isOpen,
+      maxWidth: maxWidth
+    }, content);
+  };
+  return {
+    setIsOpen: setIsOpen,
+    createModal: createModal
+  };
+};
+
+var useNotification = function useNotification() {
+  var sendNotification = function sendNotification(_ref) {
+    var type = _ref.type,
+      message = _ref.message,
+      promiseConfig = _ref.promiseConfig,
+      customStyle = _ref.customStyle,
+      _ref$clearCurrent = _ref.clearCurrent,
+      clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
+    if (clearCurrent) {
+      reactHotToast.toast.dismiss();
+    }
+    switch (type) {
+      case 'success':
+        reactHotToast.toast.success(message);
+        break;
+      case 'error':
+        reactHotToast.toast.error(message);
+        break;
+      case 'info':
+        reactHotToast.toast(message, {
+          icon: React__default.createElement(Container, {
+            "$minWidth": '20px',
+            "$height": '20px',
+            "$width": '20px',
+            "$alignItems": 'center',
+            "$justifyContent": 'center',
+            "$borderRadius": '100%',
+            "$background": colorVariables.disabled.info
+          }, React__default.createElement(Icon, {
+            icon: 'InformationFilled',
+            weight: '0px',
+            size: 20,
+            color: colorVariables["default"].info
+          })),
+          style: {
+            borderRadius: '8px',
+            background: colorVariables.text.white,
+            color: '#363636',
+            maxWidth: '648px'
+          }
+        });
+        break;
+      case 'promise':
+        if (promiseConfig) {
+          reactHotToast.toast.promise(promiseConfig.promise, {
+            loading: promiseConfig.loading,
+            success: promiseConfig.success,
+            error: promiseConfig.error
+          }, {
+            style: {
+              minWidth: '300px'
+            }
+          });
+        }
+        break;
+      case 'custom':
+        reactHotToast.toast(message, {
+          icon: React__default.createElement(Icon, {
+            icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add_1',
+            size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
+            weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
+          }),
+          style: {
+            background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
+            color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
+          }
+        });
+        break;
+      default:
+        console.error('Invalid notification type or missing configuration!');
+    }
+  };
+  return {
+    sendNotification: sendNotification
+  };
+};
+
+var useTheme = function useTheme() {
+  return styled.useTheme();
+};
+
+var _templateObject$b, _templateObject2$8, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2;
+var DropdownContainer = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 100%;\n  position: relative;\n  max-height: ", ";\n"])), function (_ref) {
   var $width = _ref.$width;
   return $width || '100%';
 }, function (_ref2) {
@@ -4854,7 +4990,7 @@ var DropdownContainer = styled__default.div(_templateObject$a || (_templateObjec
   var $replaceLabel = _ref3.$replaceLabel;
   return $replaceLabel ? 'calc(100% - 22px)' : '';
 });
-var DropdownButton = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  gap: 8px;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref4) {
+var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  gap: 8px;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref4) {
   var $replaceLabel = _ref4.$replaceLabel;
   return $replaceLabel ? 'auto' : '';
 }, function (_ref5) {
@@ -5060,8 +5196,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
   var title = _ref31.title,
     titleWeight = _ref31.titleWeight,
     titleSize = _ref31.titleSize,
-    _ref31$titleColor = _ref31.titleColor,
-    titleColor = _ref31$titleColor === void 0 ? colorVariables.text.dark : _ref31$titleColor,
+    titleColor = _ref31.titleColor,
     _ref31$labelText = _ref31.labelText,
     labelText = _ref31$labelText === void 0 ? 'Select Cameras' : _ref31$labelText,
     labelStyle = _ref31.labelStyle,
@@ -5074,8 +5209,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     height = _ref31.height,
     placeholder = _ref31.placeholder,
     border = _ref31.border,
-    _ref31$background = _ref31.background,
-    background = _ref31$background === void 0 ? colorVariables["default"].tertiary : _ref31$background,
+    background = _ref31.background,
     selectedOptionBackground = _ref31.selectedOptionBackground,
     selectedOptionColor = _ref31.selectedOptionColor,
     _ref31$menuBackground = _ref31.menuBackground,
@@ -5105,6 +5239,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     searchBox = _ref31$searchBox === void 0 ? true : _ref31$searchBox,
     _ref31$NoOptionsText = _ref31.NoOptionsText,
     NoOptionsText = _ref31$NoOptionsText === void 0 ? 'No Options Available' : _ref31$NoOptionsText;
+  var themeColors = useTheme();
   var _useState = React.useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -5138,7 +5273,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     }
   };
   return React__default.createElement(Container$2, null, title && React__default.createElement(TitleText, {
-    "$titleColor": titleColor,
+    "$titleColor": titleColor || themeColors.text.dark,
     "$titleSize": titleSize,
     "$size": size,
     "$titleWeight": titleWeight
@@ -5152,7 +5287,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     "$height": height,
     "$width": width,
     "$border": border,
-    "$background": background,
+    "$background": background || themeColors["default"].tertiary,
     "$borderRadius": borderRadius,
     "$size": size,
     "$color": labelColor,
@@ -5176,21 +5311,21 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     }, React__default.createElement(Icon, {
       icon: 'Close',
       size: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.size) || 6,
-      color: removeIcon !== null && removeIcon !== void 0 && removeIcon.color || type === 'remove' ? colorVariables["default"].error : colorVariables.brand.primary,
+      color: removeIcon !== null && removeIcon !== void 0 && removeIcon.color || type === 'remove' ? themeColors["default"].error : themeColors.brand.primary,
       weight: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.weight) || '0'
     })));
   })) : React__default.createElement(TextWrapper, null, icon && React__default.createElement(Icon, {
     icon: icon.name || 'Tag',
     size: icon.size || 14,
     weight: icon.weight || '1',
-    color: icon.color || colorVariables.text.medium
+    color: icon.color || themeColors.text.medium
   }), React__default.createElement(LabelText, {
     "$labelStyle": labelStyle
   }, labelText)), React__default.createElement(Icon, {
     icon: isOpen ? 'UpArrow' : 'DownArrow',
     size: 7,
     weight: '2px',
-    color: colorVariables.text.medium
+    color: themeColors.text.medium
   })), isOpen && React__default.createElement(DropdownMenu, {
     "$width": optionWidth,
     "$menuBackground": menuBackground,
@@ -5205,7 +5340,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     optionColor: optionColor,
     searchIcon: searchIcon,
     searchbarTextColor: searchbarTextColor,
-    searchBoxBorder: searchBoxBorder || "1px solid " + colorVariables.border.light,
+    searchBoxBorder: searchBoxBorder || "1px solid " + themeColors.border.light,
     searchBoxBorderRadius: searchBoxBorderRadius || '0px',
     searchBoxBackground: searchBoxBackground,
     searchBox: searchBox,
@@ -5213,9 +5348,9 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
   }))));
 };
 
-var _templateObject$b, _templateObject2$8, _templateObject3$6;
-var SelectedOptionsWrapper$1 = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
-var SelectedOptionDiv$1 = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$c, _templateObject2$9, _templateObject3$6;
+var SelectedOptionsWrapper$1 = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
+var SelectedOptionDiv$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref) {
   var $selectedOptionBackground = _ref.$selectedOptionBackground,
     $type = _ref.$type,
     theme = _ref.theme;
@@ -5278,8 +5413,8 @@ var SelectedOption = function SelectedOption(_ref4) {
   }));
 };
 
-var _templateObject$c, _templateObject2$9, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
-var TitleText$1 = styled__default.label(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: max-content;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$d, _templateObject2$a, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3;
+var TitleText$1 = styled__default.label(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: max-content;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $titleWeight = _ref.$titleWeight;
   return $titleWeight || 500;
 }, function (_ref2) {
@@ -5318,7 +5453,7 @@ var TitleText$1 = styled__default.label(_templateObject$c || (_templateObject$c
       return $titlecolor;
   }
 });
-var DropdownContainer$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: 100%;\n  position: relative;\n  gap: 8px;\n  display: flex;\n"])), function (_ref4) {
+var DropdownContainer$1 = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: 100%;\n  position: relative;\n  gap: 8px;\n  display: flex;\n"])), function (_ref4) {
   var $width = _ref4.$width;
   return $width || '100%';
 });
@@ -5680,139 +5815,6 @@ var SelectOption = function SelectOption(_ref36) {
   }) : React__default.createElement(NoOptions, null, NoOptionsText)))));
 };
 
-var useClickOutside = function useClickOutside(elRef, elCallback) {
-  var callbackRef = React.useRef(elCallback);
-  callbackRef.current = elCallback;
-  React.useEffect(function () {
-    var handleClickOutside = function handleClickOutside(eve) {
-      var _elRef$current;
-      if (!(elRef !== null && elRef !== void 0 && (_elRef$current = elRef.current) !== null && _elRef$current !== void 0 && _elRef$current.contains(eve.target))) {
-        callbackRef.current(eve);
-      }
-    };
-    document.addEventListener('click', handleClickOutside, true);
-    return function () {
-      document.removeEventListener('click', handleClickOutside, true);
-    };
-  }, [elCallback, elRef]);
-};
-
-var _templateObject$d, _templateObject2$a;
-var ModalOverlay = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
-var ModalContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: visible;\n"])), colorVariables.accent.light_1, function (_ref) {
-  var $maxWidth = _ref.$maxWidth;
-  return $maxWidth ? $maxWidth : '400px';
-});
-var Modal = function Modal(_ref2) {
-  var isOpen = _ref2.isOpen,
-    maxWidth = _ref2.maxWidth,
-    children = _ref2.children;
-  if (!isOpen) return null;
-  return React__default.createElement(ModalOverlay, null, React__default.createElement(ModalContainer, {
-    "$maxWidth": maxWidth,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, children));
-};
-var useCustomModal = function useCustomModal(_ref3) {
-  var maxWidth = _ref3.maxWidth;
-  var _useState = React.useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var createModal = function createModal(content) {
-    return React__default.createElement(Modal, {
-      isOpen: isOpen,
-      maxWidth: maxWidth
-    }, content);
-  };
-  return {
-    setIsOpen: setIsOpen,
-    createModal: createModal
-  };
-};
-
-var useNotification = function useNotification() {
-  var sendNotification = function sendNotification(_ref) {
-    var type = _ref.type,
-      message = _ref.message,
-      promiseConfig = _ref.promiseConfig,
-      customStyle = _ref.customStyle,
-      _ref$clearCurrent = _ref.clearCurrent,
-      clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
-    if (clearCurrent) {
-      reactHotToast.toast.dismiss();
-    }
-    switch (type) {
-      case 'success':
-        reactHotToast.toast.success(message);
-        break;
-      case 'error':
-        reactHotToast.toast.error(message);
-        break;
-      case 'info':
-        reactHotToast.toast(message, {
-          icon: React__default.createElement(Container, {
-            "$minWidth": '20px',
-            "$height": '20px',
-            "$width": '20px',
-            "$alignItems": 'center',
-            "$justifyContent": 'center',
-            "$borderRadius": '100%',
-            "$background": colorVariables.disabled.info
-          }, React__default.createElement(Icon, {
-            icon: 'InformationFilled',
-            weight: '0px',
-            size: 20,
-            color: colorVariables["default"].info
-          })),
-          style: {
-            borderRadius: '8px',
-            background: colorVariables.text.white,
-            color: '#363636',
-            maxWidth: '648px'
-          }
-        });
-        break;
-      case 'promise':
-        if (promiseConfig) {
-          reactHotToast.toast.promise(promiseConfig.promise, {
-            loading: promiseConfig.loading,
-            success: promiseConfig.success,
-            error: promiseConfig.error
-          }, {
-            style: {
-              minWidth: '300px'
-            }
-          });
-        }
-        break;
-      case 'custom':
-        reactHotToast.toast(message, {
-          icon: React__default.createElement(Icon, {
-            icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add_1',
-            size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
-            weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
-          }),
-          style: {
-            background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
-            color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
-          }
-        });
-        break;
-      default:
-        console.error('Invalid notification type or missing configuration!');
-    }
-  };
-  return {
-    sendNotification: sendNotification
-  };
-};
-
-var useTheme = function useTheme() {
-  return styled.useTheme();
-};
-
 var _templateObject$e, _templateObject2$b;
 var SearchContainer$2 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 5.5px 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  // cursor: ", ";\n  transition: all 0.3s ease;\n\n &:focus-within {\n    border: ", ";\n  }\n"])), function (_ref) {
   var $background = _ref.$background,