labsense-ui-kit 1.4.41 → 1.4.42

package/dist/index.modern.js

@@ -9408,7 +9408,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 +9423,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 +9467,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 +9481,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 +9492,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 +9528,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 +9569,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 +9593,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 +9617,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 +9657,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 +9681,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],