labsense-ui-kit 1.1.75 → 1.1.77

package/dist/index.js

@@ -3261,6 +3261,23 @@ var WiFiCam = function WiFiCam(_ref) {
   }));
 };
 
+var WiFiLaptop = function WiFiLaptop(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: "0 0 30 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M1.32291 19.4919C0.900894 19.4919 0.515879 19.6654 0.256201 19.9718C-0.00347653 20.2782 -0.0963711 20.7861 0.130764 21.1972C0.561091 21.976 1.39776 22.5001 2.34907 22.5001H27.651C28.6022 22.5001 29.4416 21.9786 29.873 21.1972C30.1007 20.7847 30.0047 20.2734 29.7437 19.9681C29.4828 19.6628 29.0955 19.4919 28.6733 19.4919H14.9981H1.32291ZM1.32291 20.4996H14.9982H28.6734C28.8034 20.4996 28.9293 20.5667 28.9761 20.6213C29.0227 20.6759 29.0307 20.6443 28.995 20.7099C28.7401 21.1715 28.2337 21.4961 27.6515 21.4961H2.34941C1.76711 21.4961 1.26625 21.1745 1.00957 20.7099C0.972343 20.6424 0.979327 20.6746 1.02468 20.6213C1.06985 20.568 1.19251 20.4996 1.32291 20.4996ZM3.50066 4.4953C2.12426 4.4953 1.00179 5.62144 1.00179 6.99782V19.9976C1.00224 20.1296 1.05493 20.2561 1.14827 20.3494C1.24162 20.4428 1.36806 20.4954 1.50007 20.4959C1.56576 20.4961 1.63088 20.4835 1.69166 20.4586C1.75244 20.4336 1.80768 20.397 1.8543 20.3507C1.90091 20.3045 1.93794 20.2495 1.9633 20.1889C1.98865 20.1283 2.00183 20.0633 2.00205 19.9976V6.99782C2.00205 6.15816 2.66099 5.49558 3.50066 5.49558H4.00258C4.1346 5.49513 4.26109 5.44248 4.35444 5.34914C4.44779 5.25579 4.50047 5.12931 4.50093 4.99729C4.50119 4.93161 4.48846 4.86651 4.46356 4.80573C4.43865 4.74495 4.40204 4.68967 4.35577 4.64306C4.30949 4.59644 4.25448 4.5594 4.19388 4.53404C4.13329 4.50869 4.06827 4.49553 4.00258 4.4953H3.50066ZM26.0011 4.4953C25.9354 4.49553 25.8704 4.5087 25.8098 4.53405C25.7492 4.5594 25.6943 4.59645 25.648 4.64306C25.6017 4.68968 25.565 4.74496 25.5401 4.80574C25.5152 4.86652 25.5026 4.93161 25.5028 4.99729C25.5033 5.12931 25.5559 5.25578 25.6492 5.34913C25.7426 5.44248 25.8691 5.49512 26.0011 5.49558H26.5031C27.3428 5.49558 28.0016 6.15816 28.0016 6.99782V19.9976C28.0019 20.0633 28.015 20.1283 28.0404 20.1889C28.0657 20.2495 28.1028 20.3045 28.1494 20.3507C28.196 20.397 28.2513 20.4336 28.3121 20.4586C28.3729 20.4835 28.4379 20.4961 28.5036 20.4959C28.6356 20.4954 28.7621 20.4428 28.8555 20.3494C28.9488 20.2561 29.0014 20.1296 29.0019 19.9976V6.99782C29.0019 5.62146 27.8795 4.4953 26.5031 4.4953H26.0011ZM5.81066 4.2975C5.71775 4.39037 5.64405 4.50063 5.59376 4.62199C5.54347 4.74335 5.51757 4.87343 5.51757 5.00479C5.51757 5.13616 5.54347 5.26624 5.59376 5.3876C5.64405 5.50896 5.71775 5.61922 5.81066 5.71209C5.90353 5.805 6.01377 5.8787 6.13513 5.92899C6.25649 5.97928 6.38653 6.00516 6.5179 6.00516C6.64926 6.00516 6.77937 5.97928 6.90072 5.92899C7.02208 5.8787 7.13232 5.805 7.22519 5.71209C11.5294 1.40786 18.4763 1.40786 22.7805 5.71209C22.8734 5.805 22.9836 5.87871 23.105 5.92899C23.2263 5.97928 23.3564 6.00516 23.4878 6.00516C23.6192 6.00516 23.7492 5.97928 23.8706 5.92899C23.9919 5.87871 24.1022 5.805 24.1951 5.71209C24.288 5.61922 24.3617 5.50896 24.412 5.3876C24.4623 5.26624 24.4882 5.13616 24.4882 5.00479C24.4882 4.87343 24.4623 4.74335 24.412 4.62199C24.3617 4.50063 24.288 4.39037 24.1951 4.2975C19.1266 -0.771041 10.8792 -0.771041 5.81066 4.2975ZM8.63723 7.12407C8.54432 7.21694 8.47061 7.3272 8.42033 7.44856C8.37004 7.56992 8.34414 7.7 8.34414 7.83137C8.34414 7.96274 8.37004 8.09281 8.42033 8.21417C8.47061 8.33553 8.54432 8.4458 8.63723 8.53866C8.7301 8.63158 8.84034 8.70528 8.9617 8.75557C9.08306 8.80586 9.21316 8.83174 9.34452 8.83174C9.47589 8.83174 9.60593 8.80586 9.72729 8.75557C9.84865 8.70528 9.95895 8.63158 10.0518 8.53866C12.7939 5.79656 17.2092 5.79917 19.9513 8.54055C20.0442 8.63347 20.1545 8.70717 20.2758 8.75746C20.3972 8.80775 20.5272 8.83363 20.6586 8.83363C20.79 8.83363 20.9201 8.80775 21.0414 8.75746C21.1628 8.70717 21.2731 8.63347 21.3659 8.54055C21.4589 8.44769 21.5326 8.33743 21.5828 8.21607C21.6331 8.09471 21.659 7.96463 21.659 7.83326C21.659 7.70189 21.6331 7.57181 21.5828 7.45045C21.5326 7.32909 21.4589 7.21883 21.3659 7.12596C17.8595 3.61955 12.1436 3.61694 8.63723 7.12407ZM11.4664 9.95325C11.3735 10.0461 11.2998 10.1564 11.2495 10.2777C11.1992 10.3991 11.1733 10.5292 11.1733 10.6606C11.1733 10.7919 11.1992 10.922 11.2495 11.0434C11.2998 11.1647 11.3735 11.275 11.4664 11.3678C11.5593 11.4608 11.6695 11.5345 11.7909 11.5848C11.9122 11.635 12.0423 11.6609 12.1737 11.6609C12.3051 11.6609 12.4351 11.635 12.5565 11.5848C12.6778 11.5345 12.7881 11.4608 12.881 11.3678C14.061 10.1879 15.9422 10.1905 17.1221 11.3697C17.215 11.4626 17.3253 11.5364 17.4467 11.5866C17.568 11.6369 17.6981 11.6628 17.8294 11.6628C17.9608 11.6628 18.0909 11.6369 18.2123 11.5866C18.3336 11.5364 18.4438 11.4626 18.5367 11.3697C18.6296 11.2769 18.7033 11.1666 18.7536 11.0452C18.8039 10.9239 18.8298 10.7938 18.8298 10.6624C18.8298 10.5311 18.8039 10.401 18.7536 10.2796C18.7033 10.1583 18.6296 10.048 18.5367 9.95515C16.5924 8.01086 13.4107 8.00825 11.4664 9.95325ZM14.2956 12.7824C13.9092 13.1688 13.9092 13.8107 14.2956 14.197C14.6819 14.5834 15.3238 14.5834 15.7101 14.197C16.0965 13.8107 16.0965 13.1688 15.7101 12.7824C15.3238 12.3961 14.6819 12.3961 14.2956 12.7824Z",
+    fill: color
+  }));
+};
+
 var Zapper = function Zapper(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -3418,6 +3435,7 @@ var IconSVGs = {
   Wallet: Wallet,
   Web: Web,
   WiFiCam: WiFiCam,
+  WiFiLaptop: WiFiLaptop,
   Zapper: Zapper
 };
 var Icon = function Icon(_ref2) {
@@ -4806,8 +4824,9 @@ var DropdownButton = styled__default.div(_templateObject2$7 || (_templateObject2
   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';
@@ -4816,30 +4835,32 @@ var DropdownButton = styled__default.div(_templateObject2$7 || (_templateObject2
   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) {
@@ -4873,24 +4894,25 @@ var TitleText = styled__default.div(_templateObject3$5 || (_templateObject3$5 =
     $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;
   }
@@ -4899,126 +4921,139 @@ var Container$2 = styled__default.div(_templateObject4$4 || (_templateObject4$4
 var LabelText = styled__default.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__default.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__default.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__default.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
-var SelectedOptionDiv = styled__default.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__default.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__default.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__default.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__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
-var Asterisk = styled__default.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__default.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 = React.useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -5206,24 +5241,25 @@ var TitleText$1 = styled__default.label(_templateObject$c || (_templateObject$c
       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;
   }
@@ -5246,8 +5282,9 @@ var DropdownButton$1 = styled__default.div(_templateObject3$7 || (_templateObjec
   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) {
@@ -5260,8 +5297,9 @@ var DropdownButton$1 = styled__default.div(_templateObject3$7 || (_templateObjec
   }
 }, 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) {
@@ -5283,10 +5321,11 @@ var DropdownButton$1 = styled__default.div(_templateObject3$7 || (_templateObjec
       return '14px';
   }
 });
-var Options = styled__default.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__default.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';
@@ -5295,11 +5334,18 @@ var Options = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _t
   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__default.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__default.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';
@@ -5308,8 +5354,8 @@ var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5
     default:
       return '14px';
   }
-}, function (_ref19) {
-  var $size = _ref19.$size;
+}, function (_ref21) {
+  var $size = _ref21.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -5318,98 +5364,109 @@ var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5
     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__default(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__default.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__default.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__default.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__default.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__default.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__default.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__default.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 = React.useState(false),
     dropUp = _useState[0],
     setDropUp = _useState[1];
@@ -5698,6 +5755,10 @@ var useNotification = function useNotification() {
   };
 };
 
+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: 1px solid ", ";\n  }\n"])), function (_ref) {
   var $background = _ref.$background;
@@ -7340,4 +7401,5 @@ exports.timeStringToSeconds = timeStringToSeconds;
 exports.useClickOutside = useClickOutside;
 exports.useCustomModal = useCustomModal;
 exports.useNotification = useNotification;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map