labsense-ui-kit 1.4.41 → 1.4.43

package/dist/index.modern.js

@@ -6377,6 +6377,29 @@ var StorageDisks = function StorageDisks(_ref) {
   }));
 };
 
+var SyncPlayback = function SyncPlayback(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: '0 0 462 433',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("path", {
+    d: 'M223.118 134.904C224.82 135.91 226.523 136.917 228.226 137.922C229.977 138.957 231.724 139.997 233.471 141.039C238.923 144.283 244.43 147.431 249.93 150.591C252.097 151.841 254.264 153.091 256.43 154.341C257.503 154.96 258.575 155.579 259.68 156.216C264.555 159.029 264.555 159.029 269.43 161.841C270.504 162.461 271.578 163.08 272.684 163.718C274.839 164.961 276.993 166.205 279.147 167.449C284.158 170.341 289.17 173.231 294.189 176.108C295.948 177.117 297.706 178.126 299.463 179.136C301.655 180.395 303.848 181.651 306.042 182.906C332.539 198.137 332.539 198.137 338.18 214.779C340.558 225.825 339.287 236.922 333.387 246.63C326.832 255.601 317.573 260.641 308.055 266.029C306.319 267.021 304.582 268.013 302.846 269.006C301.055 270.03 299.263 271.051 297.47 272.071C291.944 275.221 286.438 278.408 280.93 281.591C278.764 282.841 276.597 284.091 274.43 285.341C272.822 286.269 272.822 286.269 271.18 287.216C266.305 290.029 266.305 290.029 261.43 292.841C260.356 293.461 259.283 294.08 258.176 294.719C256.023 295.961 253.869 297.203 251.715 298.444C246.688 301.343 241.663 304.244 236.646 307.16C234.881 308.185 233.114 309.21 231.348 310.234C229.141 311.514 226.935 312.796 224.731 314.082C199.932 328.45 199.932 328.45 184.79 325.474C173.909 322.561 164.935 317.134 159.075 307.322C155.452 300.262 153.815 293.378 153.79 285.439C153.784 284.338 153.778 283.236 153.773 282.101C153.771 280.907 153.77 279.713 153.769 278.483C153.764 277.214 153.759 275.945 153.754 274.638C153.741 271.166 153.735 267.695 153.73 264.223C153.727 262.049 153.723 259.875 153.719 257.701C153.705 250.884 153.695 244.067 153.691 237.249C153.687 229.408 153.669 221.567 153.64 213.726C153.619 207.647 153.609 201.568 153.607 195.489C153.606 191.867 153.601 188.245 153.583 184.623C153.563 180.573 153.567 176.525 153.574 172.476C153.565 171.294 153.555 170.112 153.546 168.895C153.613 155.418 156.428 144.853 165.618 134.904C183.07 118.175 204.4 123.572 223.118 134.904Z',
+    fill: color
+  }), React.createElement("path", {
+    d: 'M329.931 25.0914C334.328 30.0858 335.282 33.0018 335.216 39.5484C334.695 44.1936 332.272 46.9128 328.868 49.9039C324.761 52.4211 320.613 52.6358 315.931 52.0914C312.846 51.1439 309.978 49.826 307.056 48.4664C261.809 28.5162 211.593 26.3588 165.072 43.911C138.331 54.4625 112.467 70.8707 93.9305 93.0914C92.7897 94.4004 92.7897 94.4004 91.6258 95.7359C60.3536 132.123 43.6974 180.605 47.1078 228.585C47.7873 236.855 48.655 245.093 50.5633 253.181C50.9305 255.091 50.9305 255.091 50.9305 259.091C52.0069 259.045 53.0833 258.999 54.1922 258.951C71.294 258.435 86.166 262.946 98.868 274.9C111.274 288.081 115.592 303.02 115.173 320.654C114.542 335.387 107.874 348.049 97.7235 358.584C84.5862 370.38 70.2493 374.055 53.0321 373.47C37.8635 372.575 24.6685 365.993 14.2547 354.959C3.49029 341.679 -1.29024 326.247 0.297712 309.134C2.28065 295.113 8.24143 282.654 18.9305 273.091C21.2001 271.826 21.2001 271.826 22.9305 271.091C22.6766 270.275 22.4226 269.459 22.161 268.619C7.02316 216.515 16.8645 157.778 42.4598 110.687C52.3938 93.1542 65.0496 77.6133 78.9305 63.0914C79.566 62.4146 80.2015 61.7379 80.8563 61.0406C110.889 29.8607 154.663 9.71689 196.931 3.09138C198.818 2.75687 198.818 2.75687 200.743 2.4156C241.123 -3.66629 295.79 0.976448 329.931 25.0914Z',
+    fill: color
+  }), React.createElement("path", {
+    d: 'M435.559 67.3374C448.913 77.2151 457.963 89.4158 461.305 105.904C463.426 121.524 460.306 137.303 450.93 150.091C443.119 159.695 443.119 159.695 438.93 161.091C439.184 161.896 439.438 162.7 439.7 163.529C455.157 216.328 444.332 274.372 418.93 322.091C409.207 339.545 396.652 354.66 382.93 369.091C382.319 369.744 381.708 370.396 381.079 371.068C350.57 402.734 307.544 421.39 264.93 429.091C264.236 429.223 263.541 429.354 262.826 429.489C220.798 437.114 171.768 429.021 134.391 408.83C131.057 406.474 128.755 403.741 126.93 400.091C126.381 395.08 126.369 391.194 128.68 386.654C132.613 382.175 135.519 380.283 141.563 379.802C146.522 379.872 150.368 381.652 154.805 383.716C200.034 403.659 250.275 405.809 296.787 388.272C311.371 382.522 325.22 375.293 337.93 366.091C338.98 365.34 340.029 364.588 341.11 363.814C357.348 351.817 371.741 336.888 382.93 320.091C383.528 319.196 383.528 319.196 384.137 318.283C410.306 278.363 421.488 228.12 411.805 181.091C411.638 180.39 411.47 179.689 411.298 178.966C410.93 177.091 410.93 177.091 410.93 173.091C409.854 173.138 408.778 173.184 407.669 173.232C391.252 173.727 377.425 169.668 364.68 158.904C354.237 149.04 347.346 135.326 346.708 120.943C346.231 103.65 350.152 89.6139 361.68 76.2163C380.421 56.7386 412.647 52.3257 435.559 67.3374Z',
+    fill: color
+  }));
+};
+
 var Tag = function Tag(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -7328,6 +7351,7 @@ var IconSVGs = {
   Stopwatch: Stopwatch,
   Storage_Disk: Storage_Disk,
   StorageDisks: StorageDisks,
+  SyncPlayback: SyncPlayback,
   Tag: Tag,
   Team_2: Team_2,
   Team: Team,
@@ -9408,7 +9432,7 @@ var DropdownContainer = styled.div(_templateObject$b || (_templateObject$b = _ta
   var $hasTitle = _ref4.$hasTitle;
   return $hasTitle ? 'calc(100% - 22px)' : '100%';
 });
-var DropdownButton = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  scrollbar-width: thin;\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-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
+var DropdownButton = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  min-height: ", ";\n  scrollbar-width: thin;\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-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
   var $replaceLabel = _ref5.$replaceLabel,
     $showAllSelected = _ref5.$showAllSelected;
   return $replaceLabel ? $showAllSelected ? 'auto' : 'hidden' : '';
@@ -9423,26 +9447,30 @@ var DropdownButton = styled.div(_templateObject2$8 || (_templateObject2$8 = _tag
       return '14px 12px';
   }
 }, function (_ref7) {
-  var $width = _ref7.$width;
-  return $width ? $width : '100%';
+  var $replaceLabel = _ref7.$replaceLabel,
+    $size = _ref7.$size;
+  return !$replaceLabel ? '100%' : $size === 'small' ? '46px' : $size === 'large' ? '76px' : '56px';
 }, function (_ref8) {
-  var $height = _ref8.$height;
-  return $height || '100%';
+  var $width = _ref8.$width;
+  return $width ? $width : '100%';
 }, function (_ref9) {
-  var $border = _ref9.$border,
-    $isOpen = _ref9.$isOpen,
-    theme = _ref9.theme;
-  return $isOpen ? "1px solid " + theme.vms.text.dark : $border || "1px solid " + theme.vms.border.light;
+  var $height = _ref9.$height;
+  return $height || '100%';
 }, function (_ref10) {
-  var $borderRadius = _ref10.$borderRadius;
-  return $borderRadius || '8px';
+  var $border = _ref10.$border,
+    $isOpen = _ref10.$isOpen,
+    theme = _ref10.theme;
+  return $isOpen ? "1px solid " + theme.vms.text.dark : $border || "1px solid " + theme.vms.border.light;
 }, function (_ref11) {
-  var $disabled = _ref11.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
+  var $borderRadius = _ref11.$borderRadius;
+  return $borderRadius || '8px';
 }, function (_ref12) {
-  var $background = _ref12.$background,
-    $disabled = _ref12.$disabled,
-    theme = _ref12.theme;
+  var $disabled = _ref12.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref13) {
+  var $background = _ref13.$background,
+    $disabled = _ref13.$disabled,
+    theme = _ref13.theme;
   switch ($background) {
     case 'dark':
       return $disabled ? theme.vms.disabled.secondary : theme.vms.text.dark;
@@ -9463,12 +9491,12 @@ var DropdownButton = styled.div(_templateObject2$8 || (_templateObject2$8 = _tag
     default:
       return $disabled ? theme.vms.disabled.secondary : $background;
   }
-}, function (_ref13) {
-  var $color = _ref13.$color,
-    theme = _ref13.theme;
-  return $color || theme.vms.text.medium;
 }, function (_ref14) {
-  var $size = _ref14.$size;
+  var $color = _ref14.$color,
+    theme = _ref14.theme;
+  return $color || theme.vms.text.medium;
+}, function (_ref15) {
+  var $size = _ref15.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -9477,8 +9505,8 @@ var DropdownButton = styled.div(_templateObject2$8 || (_templateObject2$8 = _tag
     default:
       return '14px';
   }
-}, function (_ref15) {
-  var $size = _ref15.$size;
+}, function (_ref16) {
+  var $size = _ref16.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -9488,20 +9516,20 @@ var DropdownButton = styled.div(_templateObject2$8 || (_templateObject2$8 = _tag
       return '14px';
   }
 });
-var TitleText = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref16) {
-  var $titleWeight = _ref16.$titleWeight;
+var TitleText = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref17) {
+  var $titleWeight = _ref17.$titleWeight;
   return $titleWeight != null ? $titleWeight : '500';
-}, function (_ref17) {
-  var $titleSize = _ref17.$titleSize,
-    $size = _ref17.$size;
-  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref18) {
   var $titleSize = _ref18.$titleSize,
     $size = _ref18.$size;
   return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref19) {
-  var $titleColor = _ref19.$titleColor,
-    theme = _ref19.theme;
+  var $titleSize = _ref19.$titleSize,
+    $size = _ref19.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref20) {
+  var $titleColor = _ref20.$titleColor,
+    theme = _ref20.theme;
   switch ($titleColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9524,29 +9552,29 @@ var TitleText = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTe
   }
 });
 var Container$2 = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  height: 100%;\n"])));
-var LabelText = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref20) {
-  var $labelStyle = _ref20.$labelStyle;
+var LabelText = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref21) {
+  var $labelStyle = _ref21.$labelStyle;
   return $labelStyle;
-}, function (_ref21) {
-  var $labelColor = _ref21.$labelColor,
-    theme = _ref21.theme;
+}, function (_ref22) {
+  var $labelColor = _ref22.$labelColor,
+    theme = _ref22.theme;
   return $labelColor || theme.vms.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  \n  ", "\n"])), function (_ref22) {
-  var theme = _ref22.theme;
+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  \n  ", "\n"])), function (_ref23) {
+  var theme = _ref23.theme;
   return "1px solid " + theme.vms.border.light;
-}, function (_ref23) {
-  var $optionsBorderRadius = _ref23.$optionsBorderRadius;
-  return $optionsBorderRadius || '8px';
 }, function (_ref24) {
-  var $width = _ref24.$width;
-  return $width ? $width : 'max-content';
+  var $optionsBorderRadius = _ref24.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
 }, function (_ref25) {
-  var $menuBackground = _ref25.$menuBackground,
-    theme = _ref25.theme;
-  return $menuBackground || theme.vms.accent.light_2;
+  var $width = _ref25.$width;
+  return $width ? $width : 'max-content';
 }, function (_ref26) {
-  var $position = _ref26.$position;
+  var $menuBackground = _ref26.$menuBackground,
+    theme = _ref26.theme;
+  return $menuBackground || theme.vms.accent.light_2;
+}, function (_ref27) {
+  var $position = _ref27.$position;
   switch ($position) {
     case 'topLeft':
       return "\n          bottom: calc(100% + 8px);\n          left: 0;\n          top: auto;\n        ";
@@ -9565,10 +9593,10 @@ var DropdownMenu = styled.div(_templateObject6$4 || (_templateObject6$4 = _tagge
   }
 });
 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  white-space: nowrap;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref27) {
-  var $selectedOptionBackground = _ref27.$selectedOptionBackground,
-    $disabled = _ref27.$disabled,
-    theme = _ref27.theme;
+var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref28) {
+  var $selectedOptionBackground = _ref28.$selectedOptionBackground,
+    $disabled = _ref28.$disabled,
+    theme = _ref28.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9589,9 +9617,9 @@ var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref28) {
-  var $selectedOptionColor = _ref28.$selectedOptionColor,
-    theme = _ref28.theme;
+}, function (_ref29) {
+  var $selectedOptionColor = _ref29.$selectedOptionColor,
+    theme = _ref29.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9613,26 +9641,26 @@ var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _
       return $selectedOptionColor;
   }
 });
-var RemoveIcon = styled.div(_templateObject9$1 || (_templateObject9$1 = _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 (_ref29) {
-  var $disabled = _ref29.$disabled;
+var RemoveIcon = styled.div(_templateObject9$1 || (_templateObject9$1 = _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 (_ref30) {
+  var $disabled = _ref30.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref30) {
-  var removeIconBackground = _ref30.removeIconBackground,
-    $type = _ref30.$type,
-    theme = _ref30.theme;
-  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
 }, function (_ref31) {
-  var $disabled = _ref31.$disabled;
+  var removeIconBackground = _ref31.removeIconBackground,
+    $type = _ref31.$type,
+    theme = _ref31.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
+}, function (_ref32) {
+  var $disabled = _ref32.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
 var TextWrapper = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
 var ChipArea = styled.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
 var MeasureLayer = styled.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 6px;\n  width: 100%;\n  top: 0;\n  left: 0;\n"])));
 var SingleLineRow = styled.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 6px;\n  overflow: hidden;\n  align-items: center;\n  width: 100%;\n"])));
-var OverflowCountBadge = styled.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  font-size: 12px;\n  line-height: 12px;\n  font-weight: 400;\n  white-space: nowrap;\n  background: ", ";\n  color: ", ";\n"])), function (_ref32) {
-  var $selectedOptionBackground = _ref32.$selectedOptionBackground,
-    $disabled = _ref32.$disabled,
-    theme = _ref32.theme;
+var OverflowCountBadge = styled.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  font-size: 12px;\n  line-height: 12px;\n  font-weight: 400;\n  white-space: nowrap;\n  background: ", ";\n  color: ", ";\n"])), function (_ref33) {
+  var $selectedOptionBackground = _ref33.$selectedOptionBackground,
+    $disabled = _ref33.$disabled,
+    theme = _ref33.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9653,9 +9681,9 @@ var OverflowCountBadge = styled.div(_templateObject14$1 || (_templateObject14$1
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref33) {
-  var $selectedOptionColor = _ref33.$selectedOptionColor,
-    theme = _ref33.theme;
+}, function (_ref34) {
+  var $selectedOptionColor = _ref34.$selectedOptionColor,
+    theme = _ref34.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9677,66 +9705,66 @@ var OverflowCountBadge = styled.div(_templateObject14$1 || (_templateObject14$1
       return $selectedOptionColor || theme.vms.text.medium;
   }
 });
-var Asterisk = styled.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref34) {
-  var theme = _ref34.theme;
+var Asterisk = styled.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref35) {
+  var theme = _ref35.theme;
   return theme.vms["default"].error;
 });
-var MultiSelectDropdown = function MultiSelectDropdown(_ref35) {
-  var title = _ref35.title,
-    titleWeight = _ref35.titleWeight,
-    titleSize = _ref35.titleSize,
-    titleColor = _ref35.titleColor,
-    _ref35$labelText = _ref35.labelText,
-    labelText = _ref35$labelText === void 0 ? 'Select Cameras' : _ref35$labelText,
-    labelStyle = _ref35.labelStyle,
-    labelColor = _ref35.labelColor,
-    _ref35$replaceLabel = _ref35.replaceLabel,
-    replaceLabel = _ref35$replaceLabel === void 0 ? true : _ref35$replaceLabel,
-    options = _ref35.options,
-    width = _ref35.width,
-    optionWidth = _ref35.optionWidth,
-    height = _ref35.height,
-    placeholder = _ref35.placeholder,
-    border = _ref35.border,
-    background = _ref35.background,
-    selectedOptionBackground = _ref35.selectedOptionBackground,
-    selectedOptionColor = _ref35.selectedOptionColor,
-    menuBackground = _ref35.menuBackground,
-    optionsBorderRadius = _ref35.optionsBorderRadius,
-    borderRadius = _ref35.borderRadius,
-    removeIconBackground = _ref35.removeIconBackground,
-    handleSelectChange = _ref35.handleSelectChange,
-    selectedOptions = _ref35.selectedOptions,
-    placeholderColor = _ref35.placeholderColor,
-    optionBorder = _ref35.optionBorder,
-    optionColor = _ref35.optionColor,
-    searchIcon = _ref35.searchIcon,
-    searchbarTextColor = _ref35.searchbarTextColor,
-    searchBoxBackground = _ref35.searchBoxBackground,
-    searchBoxBorder = _ref35.searchBoxBorder,
-    searchBoxBorderRadius = _ref35.searchBoxBorderRadius,
-    size = _ref35.size,
-    removeIcon = _ref35.removeIcon,
-    type = _ref35.type,
-    icon = _ref35.icon,
-    _ref35$disabled = _ref35.disabled,
-    disabled = _ref35$disabled === void 0 ? false : _ref35$disabled,
-    _ref35$required = _ref35.required,
-    required = _ref35$required === void 0 ? false : _ref35$required,
-    _ref35$searchBox = _ref35.searchBox,
-    searchBox = _ref35$searchBox === void 0 ? true : _ref35$searchBox,
-    _ref35$searchBoxTextL = _ref35.searchBoxTextLength,
-    searchBoxTextLength = _ref35$searchBoxTextL === void 0 ? 50 : _ref35$searchBoxTextL,
-    _ref35$NoOptionsText = _ref35.NoOptionsText,
-    NoOptionsText = _ref35$NoOptionsText === void 0 ? 'No Options Available' : _ref35$NoOptionsText,
-    _ref35$selectAllOptio = _ref35.selectAllOption,
-    selectAllOption = _ref35$selectAllOptio === void 0 ? false : _ref35$selectAllOptio,
-    _ref35$selectAllLabel = _ref35.selectAllLabel,
-    selectAllLabel = _ref35$selectAllLabel === void 0 ? 'Select All' : _ref35$selectAllLabel,
-    selectAllChecked = _ref35.selectAllChecked,
-    dropdownPosition = _ref35.dropdownPosition,
-    _ref35$showAllSelecte = _ref35.showAllSelected,
-    showAllSelected = _ref35$showAllSelecte === void 0 ? false : _ref35$showAllSelecte;
+var MultiSelectDropdown = function MultiSelectDropdown(_ref36) {
+  var title = _ref36.title,
+    titleWeight = _ref36.titleWeight,
+    titleSize = _ref36.titleSize,
+    titleColor = _ref36.titleColor,
+    _ref36$labelText = _ref36.labelText,
+    labelText = _ref36$labelText === void 0 ? 'Select Cameras' : _ref36$labelText,
+    labelStyle = _ref36.labelStyle,
+    labelColor = _ref36.labelColor,
+    _ref36$replaceLabel = _ref36.replaceLabel,
+    replaceLabel = _ref36$replaceLabel === void 0 ? true : _ref36$replaceLabel,
+    options = _ref36.options,
+    width = _ref36.width,
+    optionWidth = _ref36.optionWidth,
+    height = _ref36.height,
+    placeholder = _ref36.placeholder,
+    border = _ref36.border,
+    background = _ref36.background,
+    selectedOptionBackground = _ref36.selectedOptionBackground,
+    selectedOptionColor = _ref36.selectedOptionColor,
+    menuBackground = _ref36.menuBackground,
+    optionsBorderRadius = _ref36.optionsBorderRadius,
+    borderRadius = _ref36.borderRadius,
+    removeIconBackground = _ref36.removeIconBackground,
+    handleSelectChange = _ref36.handleSelectChange,
+    selectedOptions = _ref36.selectedOptions,
+    placeholderColor = _ref36.placeholderColor,
+    optionBorder = _ref36.optionBorder,
+    optionColor = _ref36.optionColor,
+    searchIcon = _ref36.searchIcon,
+    searchbarTextColor = _ref36.searchbarTextColor,
+    searchBoxBackground = _ref36.searchBoxBackground,
+    searchBoxBorder = _ref36.searchBoxBorder,
+    searchBoxBorderRadius = _ref36.searchBoxBorderRadius,
+    size = _ref36.size,
+    removeIcon = _ref36.removeIcon,
+    type = _ref36.type,
+    icon = _ref36.icon,
+    _ref36$disabled = _ref36.disabled,
+    disabled = _ref36$disabled === void 0 ? false : _ref36$disabled,
+    _ref36$required = _ref36.required,
+    required = _ref36$required === void 0 ? false : _ref36$required,
+    _ref36$searchBox = _ref36.searchBox,
+    searchBox = _ref36$searchBox === void 0 ? true : _ref36$searchBox,
+    _ref36$searchBoxTextL = _ref36.searchBoxTextLength,
+    searchBoxTextLength = _ref36$searchBoxTextL === void 0 ? 50 : _ref36$searchBoxTextL,
+    _ref36$NoOptionsText = _ref36.NoOptionsText,
+    NoOptionsText = _ref36$NoOptionsText === void 0 ? 'No Options Available' : _ref36$NoOptionsText,
+    _ref36$selectAllOptio = _ref36.selectAllOption,
+    selectAllOption = _ref36$selectAllOptio === void 0 ? false : _ref36$selectAllOptio,
+    _ref36$selectAllLabel = _ref36.selectAllLabel,
+    selectAllLabel = _ref36$selectAllLabel === void 0 ? 'Select All' : _ref36$selectAllLabel,
+    selectAllChecked = _ref36.selectAllChecked,
+    dropdownPosition = _ref36.dropdownPosition,
+    _ref36$showAllSelecte = _ref36.showAllSelected,
+    showAllSelected = _ref36$showAllSelecte === void 0 ? false : _ref36$showAllSelecte;
   var themeColors = useTheme();
   var _useState = useState(false),
     dropUp = _useState[0],