labsense-ui-kit 1.1.76 → 1.1.78

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useId } from 'react';
-import styled, { css, keyframes, styled as styled$1 } from 'styled-components';
+import styled, { css, keyframes, useTheme as useTheme$1, styled as styled$1 } from 'styled-components';
 import { useNavigate, NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-hot-toast';
@@ -159,13 +159,15 @@ var dark = {
 };
 var getCurrentTheme = function getCurrentTheme() {
   if (typeof document !== 'undefined') {
-    return document.documentElement.classList.contains('dark') ? dark : light;
+    var isDarkClass = document.documentElement.classList.contains('dark');
+    return isDarkClass ? 'dark' : 'light';
   }
-  return light;
+  return 'light';
 };
 var colorVariables = new Proxy({}, {
   get: function get(_, prop) {
-    var currentTheme = getCurrentTheme();
+    var currentThemeName = getCurrentTheme();
+    var currentTheme = themes[currentThemeName];
     return currentTheme[prop];
   }
 });
@@ -4820,8 +4822,9 @@ var DropdownButton = styled.div(_templateObject2$7 || (_templateObject2$7 = _tag
   return $height || '100%';
 }, function (_ref8) {
   var $border = _ref8.$border,
-    $isOpen = _ref8.$isOpen;
-  return $isOpen ? "1px solid " + colorVariables.text.dark : $border || "1px solid " + colorVariables.border.light;
+    $isOpen = _ref8.$isOpen,
+    theme = _ref8.theme;
+  return $isOpen ? "1px solid " + theme.text.dark : $border || "1px solid " + theme.border.light;
 }, function (_ref9) {
   var $borderRadius = _ref9.$borderRadius;
   return $borderRadius || '8px';
@@ -4830,30 +4833,32 @@ var DropdownButton = styled.div(_templateObject2$7 || (_templateObject2$7 = _tag
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref11) {
   var $background = _ref11.$background,
-    $disabled = _ref11.$disabled;
+    $disabled = _ref11.$disabled,
+    theme = _ref11.theme;
   switch ($background) {
     case 'dark':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.dark;
+      return $disabled ? theme.disabled.secondary : theme.text.dark;
     case 'medium':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.medium;
+      return $disabled ? theme.disabled.secondary : theme.text.medium;
     case 'light':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.light;
+      return $disabled ? theme.disabled.secondary : theme.text.light;
     case 'white':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.white;
+      return $disabled ? theme.disabled.secondary : theme.text.white;
     case 'warning':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].warning;
+      return $disabled ? theme.disabled.secondary : theme["default"].warning;
     case 'info':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].info;
+      return $disabled ? theme.disabled.secondary : theme["default"].info;
     case 'success':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].success;
+      return $disabled ? theme.disabled.secondary : theme["default"].success;
     case 'error':
-      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].error;
+      return $disabled ? theme.disabled.secondary : theme["default"].error;
     default:
-      return $disabled ? colorVariables.disabled.secondary : $background;
+      return $disabled ? theme.disabled.secondary : $background;
   }
 }, function (_ref12) {
-  var $color = _ref12.$color;
-  return $color || colorVariables.text.medium;
+  var $color = _ref12.$color,
+    theme = _ref12.theme;
+  return $color || theme.text.medium;
 }, function (_ref13) {
   var $size = _ref13.$size;
   switch ($size) {
@@ -4887,24 +4892,25 @@ var TitleText = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTe
     $size = _ref17.$size;
   return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref18) {
-  var $titleColor = _ref18.$titleColor;
+  var $titleColor = _ref18.$titleColor,
+    theme = _ref18.theme;
   switch ($titleColor) {
     case 'dark':
-      return colorVariables.text.dark;
+      return theme.text.dark;
     case 'medium':
-      return colorVariables.text.medium;
+      return theme.text.medium;
     case 'light':
-      return colorVariables.text.light;
+      return theme.text.light;
     case 'white':
-      return colorVariables.text.white;
+      return theme.text.white;
     case 'warning':
-      return colorVariables["default"].warning;
+      return theme["default"].warning;
     case 'info':
-      return colorVariables["default"].info;
+      return theme["default"].info;
     case 'success':
-      return colorVariables["default"].success;
+      return theme["default"].success;
     case 'error':
-      return colorVariables["default"].error;
+      return theme["default"].error;
     default:
       return $titleColor;
   }
@@ -4913,126 +4919,139 @@ var Container$2 = styled.div(_templateObject4$4 || (_templateObject4$4 = _tagged
 var LabelText = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref19) {
   var $labelStyle = _ref19.$labelStyle;
   return $labelStyle;
-}, colorVariables.text.medium);
-var DropdownMenu = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), colorVariables.border.light, function (_ref20) {
-  var $optionsBorderRadius = _ref20.$optionsBorderRadius;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.text.medium;
+});
+var DropdownMenu = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), function (_ref21) {
+  var theme = _ref21.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref22) {
+  var $optionsBorderRadius = _ref22.$optionsBorderRadius;
   return $optionsBorderRadius || '8px';
-}, function (_ref21) {
-  var $width = _ref21.$width;
+}, function (_ref23) {
+  var $width = _ref23.$width;
   return $width ? $width : 'max-content';
-}, function (_ref22) {
-  var $menuBackground = _ref22.$menuBackground;
-  return $menuBackground || colorVariables.accent.light_2;
+}, function (_ref24) {
+  var $menuBackground = _ref24.$menuBackground,
+    theme = _ref24.theme;
+  return $menuBackground || theme.accent.light_2;
 });
 var SelectedOptionsWrapper = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
-var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _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 (_ref23) {
-  var $selectedOptionBackground = _ref23.$selectedOptionBackground,
-    $disabled = _ref23.$disabled;
+var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _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 (_ref25) {
+  var $selectedOptionBackground = _ref25.$selectedOptionBackground,
+    $disabled = _ref25.$disabled,
+    theme = _ref25.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
-      return colorVariables.text.dark;
+      return theme.text.dark;
     case 'medium':
-      return colorVariables.text.medium;
+      return theme.text.medium;
     case 'light':
-      return colorVariables.text.light;
+      return theme.text.light;
     case 'white':
-      return colorVariables.text.white;
+      return theme.text.white;
     case 'warning':
-      return $disabled ? colorVariables.disabled.warning : colorVariables["default"].warning;
+      return $disabled ? theme.disabled.warning : theme["default"].warning;
     case 'info':
-      return $disabled ? colorVariables.disabled.info : colorVariables["default"].info;
+      return $disabled ? theme.disabled.info : theme["default"].info;
     case 'success':
-      return $disabled ? colorVariables.disabled.success : colorVariables["default"].success;
+      return $disabled ? theme.disabled.success : theme["default"].success;
     case 'error':
-      return $disabled ? colorVariables.disabled.error : colorVariables["default"].error;
+      return $disabled ? theme.disabled.error : theme["default"].error;
     default:
-      return $selectedOptionBackground || colorVariables.accent.light_2;
+      return $selectedOptionBackground || theme.accent.light_2;
   }
-}, function (_ref24) {
-  var $selectedOptionColor = _ref24.$selectedOptionColor;
+}, function (_ref26) {
+  var $selectedOptionColor = _ref26.$selectedOptionColor,
+    theme = _ref26.theme;
   switch ($selectedOptionColor) {
     case 'dark':
-      return colorVariables.text.dark;
+      return theme.text.dark;
     case 'medium':
-      return colorVariables.text.medium;
+      return theme.text.medium;
     case 'light':
-      return colorVariables.text.light;
+      return theme.text.light;
     case 'white':
-      return colorVariables.text.white;
+      return theme.text.white;
     case 'warning':
-      return colorVariables["default"].warning;
+      return theme["default"].warning;
     case 'info':
-      return colorVariables["default"].info;
+      return theme["default"].info;
     case 'success':
-      return colorVariables["default"].success;
+      return theme["default"].success;
     case 'error':
-      return colorVariables["default"].error;
+      return theme["default"].error;
     default:
       return $selectedOptionColor;
   }
 });
-var RemoveIcon = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref25) {
-  var $disabled = _ref25.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref26) {
-  var removeIconBackground = _ref26.removeIconBackground,
-    $type = _ref26.$type;
-  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
-}, function (_ref27) {
+var RemoveIcon = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref27) {
   var $disabled = _ref27.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref28) {
+  var removeIconBackground = _ref28.removeIconBackground,
+    $type = _ref28.$type,
+    theme = _ref28.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
+}, function (_ref29) {
+  var $disabled = _ref29.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 });
 var TextWrapper = styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
-var Asterisk = styled.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables["default"].error);
-var MultiSelectDropdown = function MultiSelectDropdown(_ref28) {
-  var title = _ref28.title,
-    titleWeight = _ref28.titleWeight,
-    titleSize = _ref28.titleSize,
-    _ref28$titleColor = _ref28.titleColor,
-    titleColor = _ref28$titleColor === void 0 ? colorVariables.text.dark : _ref28$titleColor,
-    _ref28$labelText = _ref28.labelText,
-    labelText = _ref28$labelText === void 0 ? 'Select Cameras' : _ref28$labelText,
-    labelStyle = _ref28.labelStyle,
-    labelColor = _ref28.labelColor,
-    _ref28$replaceLabel = _ref28.replaceLabel,
-    replaceLabel = _ref28$replaceLabel === void 0 ? true : _ref28$replaceLabel,
-    options = _ref28.options,
-    width = _ref28.width,
-    optionWidth = _ref28.optionWidth,
-    height = _ref28.height,
-    placeholder = _ref28.placeholder,
-    border = _ref28.border,
-    _ref28$background = _ref28.background,
-    background = _ref28$background === void 0 ? colorVariables["default"].tertiary : _ref28$background,
-    selectedOptionBackground = _ref28.selectedOptionBackground,
-    selectedOptionColor = _ref28.selectedOptionColor,
-    _ref28$menuBackground = _ref28.menuBackground,
-    menuBackground = _ref28$menuBackground === void 0 ? 'white' : _ref28$menuBackground,
-    optionsBorderRadius = _ref28.optionsBorderRadius,
-    borderRadius = _ref28.borderRadius,
-    removeIconBackground = _ref28.removeIconBackground,
-    handleSelectChange = _ref28.handleSelectChange,
-    selectedOptions = _ref28.selectedOptions,
-    placeholderColor = _ref28.placeholderColor,
-    optionBorder = _ref28.optionBorder,
-    optionColor = _ref28.optionColor,
-    searchIcon = _ref28.searchIcon,
-    searchbarTextColor = _ref28.searchbarTextColor,
-    searchBoxBackground = _ref28.searchBoxBackground,
-    searchBoxBorder = _ref28.searchBoxBorder,
-    searchBoxBorderRadius = _ref28.searchBoxBorderRadius,
-    size = _ref28.size,
-    removeIcon = _ref28.removeIcon,
-    type = _ref28.type,
-    icon = _ref28.icon,
-    _ref28$disabled = _ref28.disabled,
-    disabled = _ref28$disabled === void 0 ? false : _ref28$disabled,
-    _ref28$required = _ref28.required,
-    required = _ref28$required === void 0 ? false : _ref28$required,
-    _ref28$searchBox = _ref28.searchBox,
-    searchBox = _ref28$searchBox === void 0 ? true : _ref28$searchBox,
-    _ref28$NoOptionsText = _ref28.NoOptionsText,
-    NoOptionsText = _ref28$NoOptionsText === void 0 ? 'No Options Available' : _ref28$NoOptionsText;
+var Asterisk = styled.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref30) {
+  var theme = _ref30.theme;
+  return theme["default"].error;
+});
+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,
+    _ref31$labelText = _ref31.labelText,
+    labelText = _ref31$labelText === void 0 ? 'Select Cameras' : _ref31$labelText,
+    labelStyle = _ref31.labelStyle,
+    labelColor = _ref31.labelColor,
+    _ref31$replaceLabel = _ref31.replaceLabel,
+    replaceLabel = _ref31$replaceLabel === void 0 ? true : _ref31$replaceLabel,
+    options = _ref31.options,
+    width = _ref31.width,
+    optionWidth = _ref31.optionWidth,
+    height = _ref31.height,
+    placeholder = _ref31.placeholder,
+    border = _ref31.border,
+    _ref31$background = _ref31.background,
+    background = _ref31$background === void 0 ? colorVariables["default"].tertiary : _ref31$background,
+    selectedOptionBackground = _ref31.selectedOptionBackground,
+    selectedOptionColor = _ref31.selectedOptionColor,
+    _ref31$menuBackground = _ref31.menuBackground,
+    menuBackground = _ref31$menuBackground === void 0 ? 'white' : _ref31$menuBackground,
+    optionsBorderRadius = _ref31.optionsBorderRadius,
+    borderRadius = _ref31.borderRadius,
+    removeIconBackground = _ref31.removeIconBackground,
+    handleSelectChange = _ref31.handleSelectChange,
+    selectedOptions = _ref31.selectedOptions,
+    placeholderColor = _ref31.placeholderColor,
+    optionBorder = _ref31.optionBorder,
+    optionColor = _ref31.optionColor,
+    searchIcon = _ref31.searchIcon,
+    searchbarTextColor = _ref31.searchbarTextColor,
+    searchBoxBackground = _ref31.searchBoxBackground,
+    searchBoxBorder = _ref31.searchBoxBorder,
+    searchBoxBorderRadius = _ref31.searchBoxBorderRadius,
+    size = _ref31.size,
+    removeIcon = _ref31.removeIcon,
+    type = _ref31.type,
+    icon = _ref31.icon,
+    _ref31$disabled = _ref31.disabled,
+    disabled = _ref31$disabled === void 0 ? false : _ref31$disabled,
+    _ref31$required = _ref31.required,
+    required = _ref31$required === void 0 ? false : _ref31$required,
+    _ref31$searchBox = _ref31.searchBox,
+    searchBox = _ref31$searchBox === void 0 ? true : _ref31$searchBox,
+    _ref31$NoOptionsText = _ref31.NoOptionsText,
+    NoOptionsText = _ref31$NoOptionsText === void 0 ? 'No Options Available' : _ref31$NoOptionsText;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -5220,24 +5239,25 @@ var TitleText$1 = styled.label(_templateObject$c || (_templateObject$c = _tagged
       return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
   }
 }, function (_ref3) {
-  var $titlecolor = _ref3.$titlecolor;
+  var $titlecolor = _ref3.$titlecolor,
+    theme = _ref3.theme;
   switch ($titlecolor) {
     case 'dark':
-      return colorVariables.text.dark;
+      return theme.text.dark;
     case 'medium':
-      return colorVariables.text.medium;
+      return theme.text.medium;
     case 'light':
-      return colorVariables.text.light;
+      return theme.text.light;
     case 'white':
-      return colorVariables.text.white;
+      return theme.text.white;
     case 'warning':
-      return colorVariables["default"].warning;
+      return theme["default"].warning;
     case 'info':
-      return colorVariables["default"].info;
+      return theme["default"].info;
     case 'success':
-      return colorVariables["default"].success;
+      return theme["default"].success;
     case 'error':
-      return colorVariables["default"].error;
+      return theme["default"].error;
     default:
       return $titlecolor;
   }
@@ -5260,8 +5280,9 @@ var DropdownButton$1 = styled.div(_templateObject3$7 || (_templateObject3$7 = _t
   return $borderRadius || '8px';
 }, function (_ref9) {
   var $border = _ref9.$border,
-    $isOpen = _ref9.$isOpen;
-  return $isOpen ? "1px solid " + colorVariables.text.dark : $border || "1px solid " + colorVariables.border.light;
+    $isOpen = _ref9.$isOpen,
+    theme = _ref9.theme;
+  return $isOpen ? "1px solid " + theme.text.dark : $border || "1px solid " + theme.border.light;
 }, function (_ref10) {
   var $size = _ref10.$size;
   switch ($size) {
@@ -5274,8 +5295,9 @@ var DropdownButton$1 = styled.div(_templateObject3$7 || (_templateObject3$7 = _t
   }
 }, function (_ref11) {
   var $background = _ref11.$background,
-    $disabled = _ref11.$disabled;
-  return $disabled ? colorVariables.border.light : $background || colorVariables.accent.light_2;
+    $disabled = _ref11.$disabled,
+    theme = _ref11.theme;
+  return $disabled ? theme.border.light : $background || theme.accent.light_2;
 }, function (_ref12) {
   var $size = _ref12.$size;
   switch ($size) {
@@ -5297,10 +5319,11 @@ var DropdownButton$1 = styled.div(_templateObject3$7 || (_templateObject3$7 = _t
       return '14px';
   }
 });
-var Options = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  padding: 5px 10px;\n  width: 100%;\n  font-size: ", ";\n  font-weight: ", ";\n  background-color: ", ";\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n\n  }\n\n"])), function (_ref14) {
+var Options = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  padding: 5px 10px;\n  width: 100%;\n  font-size: ", ";\n  font-weight: ", ";\n  background-color: ", ";\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n\n"])), function (_ref14) {
   var $optionColor = _ref14.$optionColor,
-    $optionSelected = _ref14.$optionSelected;
-  return $optionSelected ? colorVariables.text.white : $optionColor || colorVariables.text.medium;
+    $optionSelected = _ref14.$optionSelected,
+    theme = _ref14.theme;
+  return $optionSelected ? theme.text.white : $optionColor || theme.text.medium;
 }, function (_ref15) {
   var $optionFontSize = _ref15.$optionFontSize;
   return $optionFontSize || '14px';
@@ -5309,11 +5332,18 @@ var Options = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemp
   return $optionFontWeight || 400;
 }, function (_ref17) {
   var $optionBackgroundColor = _ref17.$optionBackgroundColor,
-    $optionSelected = _ref17.$optionSelected;
-  return $optionSelected ? colorVariables["default"].primary : $optionBackgroundColor || colorVariables["default"].tertiary;
-}, colorVariables.hover.primary, colorVariables.text.white);
-var LabelText$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n"])), function (_ref18) {
-  var $size = _ref18.$size;
+    $optionSelected = _ref17.$optionSelected,
+    theme = _ref17.theme;
+  return $optionSelected ? theme["default"].primary : $optionBackgroundColor || theme["default"].tertiary;
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.hover.primary;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.text.white;
+});
+var LabelText$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n"])), function (_ref20) {
+  var $size = _ref20.$size;
   switch ($size) {
     case 'small':
       return '14px';
@@ -5322,8 +5352,8 @@ var LabelText$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _tagged
     default:
       return '14px';
   }
-}, function (_ref19) {
-  var $size = _ref19.$size;
+}, function (_ref21) {
+  var $size = _ref21.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -5332,98 +5362,109 @@ var LabelText$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _tagged
     default:
       return '14px';
   }
-}, function (_ref20) {
-  var $fontStyle = _ref20.$fontStyle;
+}, function (_ref22) {
+  var $fontStyle = _ref22.$fontStyle;
   return $fontStyle || '';
-}, function (_ref21) {
-  var $color = _ref21.$color,
-    $disabled = _ref21.$disabled;
-  return $disabled ? colorVariables.text.medium : $color || colorVariables.text.medium;
+}, function (_ref23) {
+  var $color = _ref23.$color,
+    $disabled = _ref23.$disabled,
+    theme = _ref23.theme;
+  return $disabled ? theme.text.medium : $color || theme.text.medium;
 });
 var NoOptions = styled(Span)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 12px;\n  font-size: 14px;\n  font-weight: 400;\n"])));
-var DropdownMenu$1 = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden; \n  position: absolute;\n  z-index: 1;\n  ", "\n  ", "\n  \n"])), colorVariables.border.light, function (_ref22) {
-  var $optionsBorderRadius = _ref22.$optionsBorderRadius;
+var DropdownMenu$1 = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden; \n  position: absolute;\n  z-index: 1;\n  ", "\n  ", "\n  \n"])), function (_ref24) {
+  var theme = _ref24.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref25) {
+  var $optionsBorderRadius = _ref25.$optionsBorderRadius;
   return $optionsBorderRadius || '8px';
-}, function (_ref23) {
-  var $width = _ref23.$width;
+}, function (_ref26) {
+  var $width = _ref26.$width;
   return $width ? $width : 'max-content';
-}, function (_ref24) {
-  var $menuBackground = _ref24.$menuBackground;
-  return $menuBackground || colorVariables.accent.light_2;
-}, function (_ref25) {
-  var $top = _ref25.$top;
+}, function (_ref27) {
+  var $menuBackground = _ref27.$menuBackground,
+    theme = _ref27.theme;
+  return $menuBackground || theme.accent.light_2;
+}, function (_ref28) {
+  var $top = _ref28.$top;
   return $top && "top: " + $top + ";";
-}, function (_ref26) {
-  var $bottom = _ref26.$bottom;
+}, function (_ref29) {
+  var $bottom = _ref29.$bottom;
   return $bottom && "bottom: " + $bottom + ";";
 });
 var OptionsWrapper = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  max-height: 150px; \n  overflow-y: auto;\n  scrollbar-width: thin;\n  width: 100%;\n"])));
-var SearchContainer$1 = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: 1px solid ", ";\n  border-radius: ", ";\n  padding: 10px 12px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  z-index: 10; \n"])), function (_ref27) {
-  var $background = _ref27.$background;
-  return $background || colorVariables.accent.light_2;
-}, function (_ref28) {
-  var $border = _ref28.$border;
+var SearchContainer$1 = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 10px 12px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  z-index: 10; \n"])), function (_ref30) {
+  var $background = _ref30.$background,
+    theme = _ref30.theme;
+  return $background || theme.accent.light_2;
+}, function (_ref31) {
+  var $border = _ref31.$border;
   return $border || 'none';
-}, colorVariables.border.light, function (_ref29) {
-  var $borderRadius = _ref29.$borderRadius;
+}, function (_ref32) {
+  var theme = _ref32.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref33) {
+  var $borderRadius = _ref33.$borderRadius;
   return $borderRadius || '8px 8px 0 0';
 });
-var SearchBar$1 = styled.input(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: transparent;\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref30) {
-  var $inputColor = _ref30.$inputColor;
-  return $inputColor || colorVariables.text.medium;
-}, function (_ref31) {
-  var $placeholderColor = _ref31.$placeholderColor;
-  return $placeholderColor || colorVariables.text.light;
+var SearchBar$1 = styled.input(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: transparent;\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref34) {
+  var $inputColor = _ref34.$inputColor,
+    theme = _ref34.theme;
+  return $inputColor || theme.text.medium;
+}, function (_ref35) {
+  var $placeholderColor = _ref35.$placeholderColor,
+    theme = _ref35.theme;
+  return $placeholderColor || theme.text.light;
 });
-var SelectOption = function SelectOption(_ref32) {
+var SelectOption = function SelectOption(_ref36) {
   var _options$find;
-  var title = _ref32.title,
-    titlecolor = _ref32.titlecolor,
-    titleWeight = _ref32.titleWeight,
-    options = _ref32.options,
-    value = _ref32.value,
-    onChange = _ref32.onChange,
-    _ref32$disabled = _ref32.disabled,
-    disabled = _ref32$disabled === void 0 ? false : _ref32$disabled,
-    size = _ref32.size,
-    width = _ref32.width,
-    _ref32$labelText = _ref32.labelText,
-    labelText = _ref32$labelText === void 0 ? 'Select' : _ref32$labelText,
-    border = _ref32.border,
-    background = _ref32.background,
-    _ref32$padding = _ref32.padding,
-    padding = _ref32$padding === void 0 ? '0px' : _ref32$padding,
-    borderRadius = _ref32.borderRadius,
-    optionColor = _ref32.optionColor,
-    optionFontSize = _ref32.optionFontSize,
-    optionFontWeight = _ref32.optionFontWeight,
-    optionBackgroundColor = _ref32.optionBackgroundColor,
-    menuBackground = _ref32.menuBackground,
-    optionsBorderRadius = _ref32.optionsBorderRadius,
-    color = _ref32.color,
-    required = _ref32.required,
-    _ref32$NoOptionsText = _ref32.NoOptionsText,
-    NoOptionsText = _ref32$NoOptionsText === void 0 ? 'No Options Available' : _ref32$NoOptionsText,
-    positionRef = _ref32.positionRef,
-    fontStyle = _ref32.fontStyle,
-    icon = _ref32.icon,
-    _ref32$searchBox = _ref32.searchBox,
-    searchBox = _ref32$searchBox === void 0 ? true : _ref32$searchBox,
-    searchBoxBackground = _ref32.searchBoxBackground,
-    searchBoxBorder = _ref32.searchBoxBorder,
-    searchBoxBorderRadius = _ref32.searchBoxBorderRadius,
-    searchIcon = _ref32.searchIcon,
-    _ref32$placeholderTex = _ref32.placeholderText,
-    placeholderText = _ref32$placeholderTex === void 0 ? 'Search...' : _ref32$placeholderTex,
-    _ref32$iconColor = _ref32.iconColor,
-    iconColor = _ref32$iconColor === void 0 ? colorVariables.text.medium : _ref32$iconColor,
-    placeholderColor = _ref32.placeholderColor,
-    inputColor = _ref32.inputColor,
-    _ref32$iconSize = _ref32.iconSize,
-    iconSize = _ref32$iconSize === void 0 ? 16 : _ref32$iconSize,
-    _ref32$allowDeselect = _ref32.allowDeselect,
-    allowDeselect = _ref32$allowDeselect === void 0 ? true : _ref32$allowDeselect,
-    titleRightNode = _ref32.titleRightNode;
+  var title = _ref36.title,
+    titlecolor = _ref36.titlecolor,
+    titleWeight = _ref36.titleWeight,
+    options = _ref36.options,
+    value = _ref36.value,
+    onChange = _ref36.onChange,
+    _ref36$disabled = _ref36.disabled,
+    disabled = _ref36$disabled === void 0 ? false : _ref36$disabled,
+    size = _ref36.size,
+    width = _ref36.width,
+    _ref36$labelText = _ref36.labelText,
+    labelText = _ref36$labelText === void 0 ? 'Select' : _ref36$labelText,
+    border = _ref36.border,
+    background = _ref36.background,
+    _ref36$padding = _ref36.padding,
+    padding = _ref36$padding === void 0 ? '0px' : _ref36$padding,
+    borderRadius = _ref36.borderRadius,
+    optionColor = _ref36.optionColor,
+    optionFontSize = _ref36.optionFontSize,
+    optionFontWeight = _ref36.optionFontWeight,
+    optionBackgroundColor = _ref36.optionBackgroundColor,
+    menuBackground = _ref36.menuBackground,
+    optionsBorderRadius = _ref36.optionsBorderRadius,
+    color = _ref36.color,
+    required = _ref36.required,
+    _ref36$NoOptionsText = _ref36.NoOptionsText,
+    NoOptionsText = _ref36$NoOptionsText === void 0 ? 'No Options Available' : _ref36$NoOptionsText,
+    positionRef = _ref36.positionRef,
+    fontStyle = _ref36.fontStyle,
+    icon = _ref36.icon,
+    _ref36$searchBox = _ref36.searchBox,
+    searchBox = _ref36$searchBox === void 0 ? true : _ref36$searchBox,
+    searchBoxBackground = _ref36.searchBoxBackground,
+    searchBoxBorder = _ref36.searchBoxBorder,
+    searchBoxBorderRadius = _ref36.searchBoxBorderRadius,
+    searchIcon = _ref36.searchIcon,
+    _ref36$placeholderTex = _ref36.placeholderText,
+    placeholderText = _ref36$placeholderTex === void 0 ? 'Search...' : _ref36$placeholderTex,
+    _ref36$iconColor = _ref36.iconColor,
+    iconColor = _ref36$iconColor === void 0 ? colorVariables.text.medium : _ref36$iconColor,
+    placeholderColor = _ref36.placeholderColor,
+    inputColor = _ref36.inputColor,
+    _ref36$iconSize = _ref36.iconSize,
+    iconSize = _ref36$iconSize === void 0 ? 16 : _ref36$iconSize,
+    _ref36$allowDeselect = _ref36.allowDeselect,
+    allowDeselect = _ref36$allowDeselect === void 0 ? true : _ref36$allowDeselect,
+    titleRightNode = _ref36.titleRightNode;
   var _useState = useState(false),
     dropUp = _useState[0],
     setDropUp = _useState[1];
@@ -5712,6 +5753,10 @@ var useNotification = function useNotification() {
   };
 };
 
+var useTheme = function useTheme() {
+  return useTheme$1();
+};
+
 var _templateObject$e, _templateObject2$b;
 var SearchContainer$2 = styled.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: 1px solid ", ";\n  }\n"])), function (_ref) {
   var $background = _ref.$background;
@@ -7308,5 +7353,5 @@ var InternalTabs = function InternalTabs(_ref) {
   }));
 };
 
-export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, CheckBox, CircularLoader, CircularProgress, Container, DatePicker, DropdownMenu$1 as DropdownMenu, Icon, IconTooltip, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Options, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tabs, TextArea, TextField, TextFieldWithDropdown, colorVariables, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCustomModal, useNotification };
+export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, CheckBox, CircularLoader, CircularProgress, Container, DatePicker, DropdownMenu$1 as DropdownMenu, Icon, IconTooltip, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Options, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tabs, TextArea, TextField, TextFieldWithDropdown, colorVariables, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCustomModal, useNotification, useTheme };
 //# sourceMappingURL=index.modern.js.map