labsense-ui-kit 1.4.55 → 1.4.57

package/dist/index.js

@@ -9563,7 +9563,7 @@ var DropdownContainer = styled__default.div(_templateObject$b || (_templateObjec
   var $hasTitle = _ref4.$hasTitle;
   return $hasTitle ? 'calc(100% - 22px)' : '100%';
 });
-var DropdownButton = styled__default.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 DropdownButton = styled__default.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\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\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' : '';
@@ -9596,12 +9596,15 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
   var $borderRadius = _ref11.$borderRadius;
   return $borderRadius || '8px';
 }, function (_ref12) {
-  var $disabled = _ref12.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
+  var theme = _ref12.theme;
+  return theme.vms.text.dark;
 }, function (_ref13) {
-  var $background = _ref13.$background,
-    $disabled = _ref13.$disabled,
-    theme = _ref13.theme;
+  var $disabled = _ref13.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref14) {
+  var $background = _ref14.$background,
+    $disabled = _ref14.$disabled,
+    theme = _ref14.theme;
   switch ($background) {
     case 'dark':
       return $disabled ? theme.vms.disabled.secondary : theme.vms.text.dark;
@@ -9622,12 +9625,12 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
     default:
       return $disabled ? theme.vms.disabled.secondary : $background;
   }
-}, function (_ref14) {
-  var $color = _ref14.$color,
-    theme = _ref14.theme;
-  return $color || theme.vms.text.medium;
 }, function (_ref15) {
-  var $size = _ref15.$size;
+  var $color = _ref15.$color,
+    theme = _ref15.theme;
+  return $color || theme.vms.text.medium;
+}, function (_ref16) {
+  var $size = _ref16.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -9636,8 +9639,8 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
     default:
       return '14px';
   }
-}, function (_ref16) {
-  var $size = _ref16.$size;
+}, function (_ref17) {
+  var $size = _ref17.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -9647,20 +9650,20 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
       return '14px';
   }
 });
-var TitleText = styled__default.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;
+var TitleText = styled__default.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 (_ref18) {
+  var $titleWeight = _ref18.$titleWeight;
   return $titleWeight != null ? $titleWeight : '500';
-}, function (_ref18) {
-  var $titleSize = _ref18.$titleSize,
-    $size = _ref18.$size;
-  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref19) {
   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;
+  var $titleSize = _ref20.$titleSize,
+    $size = _ref20.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref21) {
+  var $titleColor = _ref21.$titleColor,
+    theme = _ref21.theme;
   switch ($titleColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9683,29 +9686,29 @@ var TitleText = styled__default.div(_templateObject3$5 || (_templateObject3$5 =
   }
 });
 var Container$2 = styled__default.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__default.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;
+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 (_ref22) {
+  var $labelStyle = _ref22.$labelStyle;
   return $labelStyle;
-}, function (_ref22) {
-  var $labelColor = _ref22.$labelColor,
-    theme = _ref22.theme;
+}, function (_ref23) {
+  var $labelColor = _ref23.$labelColor,
+    theme = _ref23.theme;
   return $labelColor || theme.vms.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: 5;\n  scrollbar-width: thin;\n  \n  ", "\n"])), function (_ref23) {
-  var theme = _ref23.theme;
+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: 5;\n  scrollbar-width: thin;\n  \n  ", "\n"])), function (_ref24) {
+  var theme = _ref24.theme;
   return "1px solid " + theme.vms.border.light;
-}, function (_ref24) {
-  var $optionsBorderRadius = _ref24.$optionsBorderRadius;
-  return $optionsBorderRadius || '8px';
 }, function (_ref25) {
-  var $width = _ref25.$width;
-  return $width ? $width : 'max-content';
+  var $optionsBorderRadius = _ref25.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
 }, function (_ref26) {
-  var $menuBackground = _ref26.$menuBackground,
-    theme = _ref26.theme;
-  return $menuBackground || theme.vms.accent.light_2;
+  var $width = _ref26.$width;
+  return $width ? $width : 'max-content';
 }, function (_ref27) {
-  var $position = _ref27.$position;
+  var $menuBackground = _ref27.$menuBackground,
+    theme = _ref27.theme;
+  return $menuBackground || theme.vms.accent.light_2;
+}, function (_ref28) {
+  var $position = _ref28.$position;
   switch ($position) {
     case 'topLeft':
       return "\n          bottom: calc(100% + 8px);\n          left: 0;\n          top: auto;\n        ";
@@ -9724,10 +9727,10 @@ var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4
   }
 });
 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  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;
+var SelectedOptionDiv = styled__default.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 (_ref29) {
+  var $selectedOptionBackground = _ref29.$selectedOptionBackground,
+    $disabled = _ref29.$disabled,
+    theme = _ref29.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9748,9 +9751,9 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref29) {
-  var $selectedOptionColor = _ref29.$selectedOptionColor,
-    theme = _ref29.theme;
+}, function (_ref30) {
+  var $selectedOptionColor = _ref30.$selectedOptionColor,
+    theme = _ref30.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9772,26 +9775,26 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
       return $selectedOptionColor;
   }
 });
-var RemoveIcon = styled__default.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;
+var RemoveIcon = styled__default.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 (_ref31) {
+  var $disabled = _ref31.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref31) {
-  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;
+  var removeIconBackground = _ref32.removeIconBackground,
+    $type = _ref32.$type,
+    theme = _ref32.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
+}, function (_ref33) {
+  var $disabled = _ref33.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
 var TextWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
 var ChipArea = styled__default.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__default.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__default.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__default.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;
+var OverflowCountBadge = styled__default.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 (_ref34) {
+  var $selectedOptionBackground = _ref34.$selectedOptionBackground,
+    $disabled = _ref34.$disabled,
+    theme = _ref34.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9812,9 +9815,9 @@ var OverflowCountBadge = styled__default.div(_templateObject14$1 || (_templateOb
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref34) {
-  var $selectedOptionColor = _ref34.$selectedOptionColor,
-    theme = _ref34.theme;
+}, function (_ref35) {
+  var $selectedOptionColor = _ref35.$selectedOptionColor,
+    theme = _ref35.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -9836,66 +9839,66 @@ var OverflowCountBadge = styled__default.div(_templateObject14$1 || (_templateOb
       return $selectedOptionColor || theme.vms.text.medium;
   }
 });
-var Asterisk = styled__default.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;
+var Asterisk = styled__default.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 (_ref36) {
+  var theme = _ref36.theme;
   return theme.vms["default"].error;
 });
-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 MultiSelectDropdown = function MultiSelectDropdown(_ref37) {
+  var title = _ref37.title,
+    titleWeight = _ref37.titleWeight,
+    titleSize = _ref37.titleSize,
+    titleColor = _ref37.titleColor,
+    _ref37$labelText = _ref37.labelText,
+    labelText = _ref37$labelText === void 0 ? 'Select Cameras' : _ref37$labelText,
+    labelStyle = _ref37.labelStyle,
+    labelColor = _ref37.labelColor,
+    _ref37$replaceLabel = _ref37.replaceLabel,
+    replaceLabel = _ref37$replaceLabel === void 0 ? true : _ref37$replaceLabel,
+    options = _ref37.options,
+    width = _ref37.width,
+    optionWidth = _ref37.optionWidth,
+    height = _ref37.height,
+    placeholder = _ref37.placeholder,
+    border = _ref37.border,
+    background = _ref37.background,
+    selectedOptionBackground = _ref37.selectedOptionBackground,
+    selectedOptionColor = _ref37.selectedOptionColor,
+    menuBackground = _ref37.menuBackground,
+    optionsBorderRadius = _ref37.optionsBorderRadius,
+    borderRadius = _ref37.borderRadius,
+    removeIconBackground = _ref37.removeIconBackground,
+    handleSelectChange = _ref37.handleSelectChange,
+    selectedOptions = _ref37.selectedOptions,
+    placeholderColor = _ref37.placeholderColor,
+    optionBorder = _ref37.optionBorder,
+    optionColor = _ref37.optionColor,
+    searchIcon = _ref37.searchIcon,
+    searchbarTextColor = _ref37.searchbarTextColor,
+    searchBoxBackground = _ref37.searchBoxBackground,
+    searchBoxBorder = _ref37.searchBoxBorder,
+    searchBoxBorderRadius = _ref37.searchBoxBorderRadius,
+    size = _ref37.size,
+    removeIcon = _ref37.removeIcon,
+    type = _ref37.type,
+    icon = _ref37.icon,
+    _ref37$disabled = _ref37.disabled,
+    disabled = _ref37$disabled === void 0 ? false : _ref37$disabled,
+    _ref37$required = _ref37.required,
+    required = _ref37$required === void 0 ? false : _ref37$required,
+    _ref37$searchBox = _ref37.searchBox,
+    searchBox = _ref37$searchBox === void 0 ? true : _ref37$searchBox,
+    _ref37$searchBoxTextL = _ref37.searchBoxTextLength,
+    searchBoxTextLength = _ref37$searchBoxTextL === void 0 ? 50 : _ref37$searchBoxTextL,
+    _ref37$NoOptionsText = _ref37.NoOptionsText,
+    NoOptionsText = _ref37$NoOptionsText === void 0 ? 'No Options Available' : _ref37$NoOptionsText,
+    _ref37$selectAllOptio = _ref37.selectAllOption,
+    selectAllOption = _ref37$selectAllOptio === void 0 ? false : _ref37$selectAllOptio,
+    _ref37$selectAllLabel = _ref37.selectAllLabel,
+    selectAllLabel = _ref37$selectAllLabel === void 0 ? 'Select All' : _ref37$selectAllLabel,
+    selectAllChecked = _ref37.selectAllChecked,
+    dropdownPosition = _ref37.dropdownPosition,
+    _ref37$showAllSelecte = _ref37.showAllSelected,
+    showAllSelected = _ref37$showAllSelecte === void 0 ? false : _ref37$showAllSelecte;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -10246,7 +10249,7 @@ var DropdownContainer$1 = styled__default.div(_templateObject2$9 || (_templateOb
   var $width = _ref4.$width;
   return $width || '100%';
 });
-var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  font-weight: 400;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  transition: all 0.3s ease;\n  border: ", ";\n  gap: 6px;\n  padding: ", ";\n  background: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
+var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  font-weight: 400;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  transition: all 0.3s ease;\n  border: ", ";\n  gap: 6px;\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  background: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
   var $disabled = _ref5.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref6) {
@@ -10274,12 +10277,15 @@ var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_templateObjec
       return '9.5px 12px';
   }
 }, function (_ref11) {
-  var $background = _ref11.$background,
-    $disabled = _ref11.$disabled,
-    theme = _ref11.theme;
-  return $disabled ? theme.vms.border.light : $background || theme.vms.accent.light_2;
+  var theme = _ref11.theme;
+  return theme.vms.text.dark;
 }, function (_ref12) {
-  var $size = _ref12.$size;
+  var $background = _ref12.$background,
+    $disabled = _ref12.$disabled,
+    theme = _ref12.theme;
+  return $disabled ? theme.vms.border.light : $background || theme.vms.accent.light_2;
+}, function (_ref13) {
+  var $size = _ref13.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -10288,8 +10294,8 @@ var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_templateObjec
     default:
       return '14px';
   }
-}, function (_ref13) {
-  var $size = _ref13.$size;
+}, function (_ref14) {
+  var $size = _ref14.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -10299,33 +10305,33 @@ var DropdownButton$1 = styled__default.div(_templateObject3$6 || (_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  word-wrap: break-word;\n  overflow-wrap: break-word;\n  white-space: normal;\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n\n"])), function (_ref14) {
-  var $optionColor = _ref14.$optionColor,
-    $optionSelected = _ref14.$optionSelected,
-    $isHighlighted = _ref14.$isHighlighted,
-    theme = _ref14.theme;
+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  word-wrap: break-word;\n  overflow-wrap: break-word;\n  white-space: normal;\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n\n"])), function (_ref15) {
+  var $optionColor = _ref15.$optionColor,
+    $optionSelected = _ref15.$optionSelected,
+    $isHighlighted = _ref15.$isHighlighted,
+    theme = _ref15.theme;
   return $optionSelected || $isHighlighted ? theme.vms.text.white : $optionColor || theme.vms.text.medium;
-}, function (_ref15) {
-  var $optionFontSize = _ref15.$optionFontSize;
-  return $optionFontSize || '14px';
 }, function (_ref16) {
-  var $optionFontWeight = _ref16.$optionFontWeight;
-  return $optionFontWeight || 400;
+  var $optionFontSize = _ref16.$optionFontSize;
+  return $optionFontSize || '14px';
 }, function (_ref17) {
-  var $optionBackgroundColor = _ref17.$optionBackgroundColor,
-    $optionSelected = _ref17.$optionSelected,
-    $isHighlighted = _ref17.$isHighlighted,
-    theme = _ref17.theme;
-  return $optionSelected ? theme.vms["default"].primary : $isHighlighted ? theme.vms.hover.primary : $optionBackgroundColor || theme.vms["default"].tertiary;
+  var $optionFontWeight = _ref17.$optionFontWeight;
+  return $optionFontWeight || 400;
 }, function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.vms.hover.primary;
+  var $optionBackgroundColor = _ref18.$optionBackgroundColor,
+    $optionSelected = _ref18.$optionSelected,
+    $isHighlighted = _ref18.$isHighlighted,
+    theme = _ref18.theme;
+  return $optionSelected ? theme.vms["default"].primary : $isHighlighted ? theme.vms.hover.primary : $optionBackgroundColor || theme.vms["default"].tertiary;
 }, function (_ref19) {
   var theme = _ref19.theme;
+  return theme.vms.hover.primary;
+}, function (_ref20) {
+  var theme = _ref20.theme;
   return theme.vms.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  flex: 1;\n  // overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), function (_ref20) {
-  var $size = _ref20.$size;
+var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n  flex: 1;\n  // overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), function (_ref21) {
+  var $size = _ref21.$size;
   switch ($size) {
     case 'small':
       return '14px';
@@ -10334,8 +10340,8 @@ var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5
     default:
       return '14px';
   }
-}, function (_ref21) {
-  var $size = _ref21.$size;
+}, function (_ref22) {
+  var $size = _ref22.$size;
   switch ($size) {
     case 'small':
       return 'normal';
@@ -10344,40 +10350,40 @@ var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5
     default:
       return 'normal';
   }
-}, function (_ref22) {
-  var $fontStyle = _ref22.$fontStyle;
-  return $fontStyle || '';
 }, function (_ref23) {
-  var $color = _ref23.$color,
-    $disabled = _ref23.$disabled,
-    theme = _ref23.theme;
+  var $fontStyle = _ref23.$fontStyle;
+  return $fontStyle || '';
+}, function (_ref24) {
+  var $color = _ref24.$color,
+    $disabled = _ref24.$disabled,
+    theme = _ref24.theme;
   return $disabled ? theme.vms.text.medium : $color || theme.vms.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: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  max-width: ", ";\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: 2;\n  outline: none;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref24) {
-  var theme = _ref24.theme;
+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  max-width: ", ";\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: 2;\n  outline: none;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref25) {
+  var theme = _ref25.theme;
   return "1px solid " + theme.vms.border.light;
-}, function (_ref25) {
-  var $optionsBorderRadius = _ref25.$optionsBorderRadius;
-  return $optionsBorderRadius || '8px';
 }, function (_ref26) {
-  var $width = _ref26.$width;
-  return $width ? $width : '100%';
+  var $optionsBorderRadius = _ref26.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
 }, function (_ref27) {
   var $width = _ref27.$width;
   return $width ? $width : '100%';
 }, function (_ref28) {
-  var $menuBackground = _ref28.$menuBackground,
-    theme = _ref28.theme;
-  return $menuBackground || theme.vms.accent.light_2;
+  var $width = _ref28.$width;
+  return $width ? $width : '100%';
 }, function (_ref29) {
-  var $top = _ref29.$top;
-  return $top && "top: " + $top + ";";
+  var $menuBackground = _ref29.$menuBackground,
+    theme = _ref29.theme;
+  return $menuBackground || theme.vms.accent.light_2;
 }, function (_ref30) {
-  var $bottom = _ref30.$bottom;
-  return $bottom && "bottom: " + $bottom + ";";
+  var $top = _ref30.$top;
+  return $top && "top: " + $top + ";";
 }, function (_ref31) {
-  var $dropDownPosition = _ref31.$dropDownPosition;
+  var $bottom = _ref31.$bottom;
+  return $bottom && "bottom: " + $bottom + ";";
+}, function (_ref32) {
+  var $dropDownPosition = _ref32.$dropDownPosition;
   switch ($dropDownPosition) {
     case 'center':
       return "\n          left: 50%;\n          transform: translateX(-50%);\n        ";
@@ -10388,27 +10394,27 @@ var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7
   }
 });
 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$2 || (_templateObject9$2 = _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 (_ref32) {
-  var $background = _ref32.$background,
-    theme = _ref32.theme;
+var SearchContainer$1 = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _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 (_ref33) {
+  var $background = _ref33.$background,
+    theme = _ref33.theme;
   return $background || theme.vms.accent.light_2;
-}, function (_ref33) {
-  var $border = _ref33.$border;
-  return $border || 'none';
 }, function (_ref34) {
-  var theme = _ref34.theme;
-  return "1px solid " + theme.vms.border.light;
+  var $border = _ref34.$border;
+  return $border || 'none';
 }, function (_ref35) {
-  var $borderRadius = _ref35.$borderRadius;
+  var theme = _ref35.theme;
+  return "1px solid " + theme.vms.border.light;
+}, function (_ref36) {
+  var $borderRadius = _ref36.$borderRadius;
   return $borderRadius || '8px 8px 0 0';
 });
-var SearchBar$1 = styled__default.input(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\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 (_ref36) {
-  var $inputColor = _ref36.$inputColor,
-    theme = _ref36.theme;
-  return $inputColor || theme.vms.text.medium;
-}, function (_ref37) {
-  var $placeholderColor = _ref37.$placeholderColor,
+var SearchBar$1 = styled__default.input(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\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 (_ref37) {
+  var $inputColor = _ref37.$inputColor,
     theme = _ref37.theme;
+  return $inputColor || theme.vms.text.medium;
+}, function (_ref38) {
+  var $placeholderColor = _ref38.$placeholderColor,
+    theme = _ref38.theme;
   return $placeholderColor || theme.vms.text.light;
 });
 var getClippingBoundary = function getClippingBoundary(element) {
@@ -10429,61 +10435,61 @@ var getClippingBoundary = function getClippingBoundary(element) {
     bottom: bottom
   };
 };
-var SelectOption = function SelectOption(_ref38) {
-  var title = _ref38.title,
-    titlecolor = _ref38.titlecolor,
-    titleWeight = _ref38.titleWeight,
-    options = _ref38.options,
-    value = _ref38.value,
-    onChange = _ref38.onChange,
-    _ref38$disabled = _ref38.disabled,
-    disabled = _ref38$disabled === void 0 ? false : _ref38$disabled,
-    size = _ref38.size,
-    width = _ref38.width,
-    _ref38$labelText = _ref38.labelText,
-    labelText = _ref38$labelText === void 0 ? 'Select' : _ref38$labelText,
-    border = _ref38.border,
-    background = _ref38.background,
-    _ref38$padding = _ref38.padding,
-    padding = _ref38$padding === void 0 ? '0px' : _ref38$padding,
-    borderRadius = _ref38.borderRadius,
-    optionColor = _ref38.optionColor,
-    optionFontSize = _ref38.optionFontSize,
-    optionFontWeight = _ref38.optionFontWeight,
-    optionBackgroundColor = _ref38.optionBackgroundColor,
-    menuBackground = _ref38.menuBackground,
-    optionsBorderRadius = _ref38.optionsBorderRadius,
-    color = _ref38.color,
-    required = _ref38.required,
-    _ref38$NoOptionsText = _ref38.NoOptionsText,
-    NoOptionsText = _ref38$NoOptionsText === void 0 ? 'No Options Available' : _ref38$NoOptionsText,
-    positionRef = _ref38.positionRef,
-    fontStyle = _ref38.fontStyle,
-    icon = _ref38.icon,
-    _ref38$searchBox = _ref38.searchBox,
-    searchBox = _ref38$searchBox === void 0 ? true : _ref38$searchBox,
-    searchBoxBackground = _ref38.searchBoxBackground,
-    searchBoxBorder = _ref38.searchBoxBorder,
-    searchBoxBorderRadius = _ref38.searchBoxBorderRadius,
-    searchIcon = _ref38.searchIcon,
-    _ref38$placeholderTex = _ref38.placeholderText,
-    placeholderText = _ref38$placeholderTex === void 0 ? 'Search...' : _ref38$placeholderTex,
-    iconColor = _ref38.iconColor,
-    placeholderColor = _ref38.placeholderColor,
-    inputColor = _ref38.inputColor,
-    _ref38$iconSize = _ref38.iconSize,
-    iconSize = _ref38$iconSize === void 0 ? 16 : _ref38$iconSize,
-    _ref38$allowDeselect = _ref38.allowDeselect,
-    allowDeselect = _ref38$allowDeselect === void 0 ? true : _ref38$allowDeselect,
-    titleRightNode = _ref38.titleRightNode,
-    _ref38$dropDownPositi = _ref38.dropDownPosition,
-    dropDownPosition = _ref38$dropDownPositi === void 0 ? 'left' : _ref38$dropDownPositi,
-    _ref38$allowCustomVal = _ref38.allowCustomValue,
-    allowCustomValue = _ref38$allowCustomVal === void 0 ? false : _ref38$allowCustomVal,
-    _ref38$loading = _ref38.loading,
-    loading = _ref38$loading === void 0 ? false : _ref38$loading,
-    _ref38$loadingText = _ref38.loadingText,
-    loadingText = _ref38$loadingText === void 0 ? 'Loading...' : _ref38$loadingText;
+var SelectOption = function SelectOption(_ref39) {
+  var title = _ref39.title,
+    titlecolor = _ref39.titlecolor,
+    titleWeight = _ref39.titleWeight,
+    options = _ref39.options,
+    value = _ref39.value,
+    onChange = _ref39.onChange,
+    _ref39$disabled = _ref39.disabled,
+    disabled = _ref39$disabled === void 0 ? false : _ref39$disabled,
+    size = _ref39.size,
+    width = _ref39.width,
+    _ref39$labelText = _ref39.labelText,
+    labelText = _ref39$labelText === void 0 ? 'Select' : _ref39$labelText,
+    border = _ref39.border,
+    background = _ref39.background,
+    _ref39$padding = _ref39.padding,
+    padding = _ref39$padding === void 0 ? '0px' : _ref39$padding,
+    borderRadius = _ref39.borderRadius,
+    optionColor = _ref39.optionColor,
+    optionFontSize = _ref39.optionFontSize,
+    optionFontWeight = _ref39.optionFontWeight,
+    optionBackgroundColor = _ref39.optionBackgroundColor,
+    menuBackground = _ref39.menuBackground,
+    optionsBorderRadius = _ref39.optionsBorderRadius,
+    color = _ref39.color,
+    required = _ref39.required,
+    _ref39$NoOptionsText = _ref39.NoOptionsText,
+    NoOptionsText = _ref39$NoOptionsText === void 0 ? 'No Options Available' : _ref39$NoOptionsText,
+    positionRef = _ref39.positionRef,
+    fontStyle = _ref39.fontStyle,
+    icon = _ref39.icon,
+    _ref39$searchBox = _ref39.searchBox,
+    searchBox = _ref39$searchBox === void 0 ? true : _ref39$searchBox,
+    searchBoxBackground = _ref39.searchBoxBackground,
+    searchBoxBorder = _ref39.searchBoxBorder,
+    searchBoxBorderRadius = _ref39.searchBoxBorderRadius,
+    searchIcon = _ref39.searchIcon,
+    _ref39$placeholderTex = _ref39.placeholderText,
+    placeholderText = _ref39$placeholderTex === void 0 ? 'Search...' : _ref39$placeholderTex,
+    iconColor = _ref39.iconColor,
+    placeholderColor = _ref39.placeholderColor,
+    inputColor = _ref39.inputColor,
+    _ref39$iconSize = _ref39.iconSize,
+    iconSize = _ref39$iconSize === void 0 ? 16 : _ref39$iconSize,
+    _ref39$allowDeselect = _ref39.allowDeselect,
+    allowDeselect = _ref39$allowDeselect === void 0 ? true : _ref39$allowDeselect,
+    titleRightNode = _ref39.titleRightNode,
+    _ref39$dropDownPositi = _ref39.dropDownPosition,
+    dropDownPosition = _ref39$dropDownPositi === void 0 ? 'left' : _ref39$dropDownPositi,
+    _ref39$allowCustomVal = _ref39.allowCustomValue,
+    allowCustomValue = _ref39$allowCustomVal === void 0 ? false : _ref39$allowCustomVal,
+    _ref39$loading = _ref39.loading,
+    loading = _ref39$loading === void 0 ? false : _ref39$loading,
+    _ref39$loadingText = _ref39.loadingText,
+    loadingText = _ref39$loadingText === void 0 ? 'Loading...' : _ref39$loadingText;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -12548,7 +12554,7 @@ var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObjec
   var $isMobileOpen = _ref7.$isMobileOpen;
   return $isMobileOpen ? 'visible' : 'hidden';
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Remove all transitions for instant color changes */\n  * {\n    transition: none !important;\n  }\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n    }\n  }\n"])), function (_ref8) {
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Remove all transitions for instant color changes */\n  * {\n    transition: none !important;\n  }\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n\n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (_ref8) {
   var $padding = _ref8.$padding;
   return $padding;
 }, function (_ref9) {
@@ -12572,16 +12578,16 @@ var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject4$9 ||
 }, function (_ref15) {
   var theme = _ref15.theme;
   return theme.vms.text.white;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.vms.text.white;
 });
-var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Ensure icons inherit hover color from parent */\n  svg {\n    transition: none;\n  }\n"])), function (_ref16) {
-  var $selected = _ref16.$selected,
-    theme = _ref16.theme;
+var IconWrapper$2 = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Ensure icons inherit hover color from parent */\n  svg {\n    transition: none;\n  }\n"])), function (_ref17) {
+  var $selected = _ref17.$selected,
+    theme = _ref17.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
-var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.vms.text.white;
-}, function (_ref18) {
+var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref18) {
   var theme = _ref18.theme;
   return theme.vms.text.white;
 }, function (_ref19) {
@@ -12592,31 +12598,34 @@ var StyledContainer = styled__default(Container)(_templateObject6$8 || (_templat
   return theme.vms.text.white;
 }, function (_ref21) {
   var theme = _ref21.theme;
+  return theme.vms.text.white;
+}, function (_ref22) {
+  var theme = _ref22.theme;
   return theme.vms.text.medium;
 });
 var Logo = styled__default(Container)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
-var TextContainer = styled__default.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref22) {
-  var $padding = _ref22.$padding;
+var TextContainer = styled__default.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref23) {
+  var $padding = _ref23.$padding;
   return $padding;
-}, function (_ref23) {
-  var $fontSize = _ref23.$fontSize;
-  return $fontSize || '20px';
 }, function (_ref24) {
-  var $fontWeight = _ref24.$fontWeight;
+  var $fontSize = _ref24.$fontSize;
+  return $fontSize || '20px';
+}, function (_ref25) {
+  var $fontWeight = _ref25.$fontWeight;
   return $fontWeight || '500';
 }, SidebarContainer, MOBILE_BREAKPOINT);
-var NotificationBadge = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  // top: -4px;\n  // right: 4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  width: max-content;\n"])), function (_ref25) {
-  var $position = _ref25.$position;
+var NotificationBadge = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  // top: -4px;\n  // right: 4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  width: max-content;\n"])), function (_ref26) {
+  var $position = _ref26.$position;
   return $position || 'absolute';
 });
-var Sidebar = function Sidebar(_ref26) {
-  var logo = _ref26.logo,
-    content = _ref26.content,
-    background = _ref26.background,
-    ProfileContent = _ref26.ProfileContent,
-    _ref26$isExpanded = _ref26.isExpanded,
-    isExpanded = _ref26$isExpanded === void 0 ? false : _ref26$isExpanded,
-    setIsExpanded = _ref26.setIsExpanded;
+var Sidebar = function Sidebar(_ref27) {
+  var logo = _ref27.logo,
+    content = _ref27.content,
+    background = _ref27.background,
+    ProfileContent = _ref27.ProfileContent,
+    _ref27$isExpanded = _ref27.isExpanded,
+    isExpanded = _ref27$isExpanded === void 0 ? false : _ref27$isExpanded,
+    setIsExpanded = _ref27.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
@@ -12681,9 +12690,9 @@ var Sidebar = function Sidebar(_ref26) {
   }, []);
   var toggleMenu = function toggleMenu(id) {
     setOpenMenus(function (prev) {
-      var _ref27;
+      var _ref28;
       var isCurrentlyOpen = !!prev[id];
-      return isCurrentlyOpen ? {} : (_ref27 = {}, _ref27[id] = true, _ref27);
+      return isCurrentlyOpen ? {} : (_ref28 = {}, _ref28[id] = true, _ref28);
     });
   };
   var getTotalNotifications = React.useCallback(function (item) {
@@ -12708,8 +12717,8 @@ var Sidebar = function Sidebar(_ref26) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = function ChildLink(_ref28) {
-    var child = _ref28.child;
+  var ChildLink = function ChildLink(_ref29) {
+    var child = _ref29.child;
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
     var handleClick = React.useCallback(function (e) {
@@ -12756,14 +12765,14 @@ var Sidebar = function Sidebar(_ref26) {
       });
     }));
   };
-  var SidebarItem = function SidebarItem(_ref29) {
-    var item = _ref29.item,
-      isActive = _ref29.isActive,
-      isOpen = _ref29.isOpen,
-      hasChildren = _ref29.hasChildren,
-      isExpanded = _ref29.isExpanded,
-      onToggle = _ref29.onToggle,
-      renderChildLinks = _ref29.renderChildLinks;
+  var SidebarItem = function SidebarItem(_ref30) {
+    var item = _ref30.item,
+      isActive = _ref30.isActive,
+      isOpen = _ref30.isOpen,
+      hasChildren = _ref30.hasChildren,
+      isExpanded = _ref30.isExpanded,
+      onToggle = _ref30.onToggle,
+      renderChildLinks = _ref30.renderChildLinks;
     var themeColors = styled.useTheme();
     var activeClass = isActive ? 'active' : '';
     var handleClick = React.useCallback(function () {
@@ -13406,7 +13415,7 @@ var FirstContainer = styled__default.div(_templateObject2$m || (_templateObject2
   var $headerPadding = _ref6.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref7) {
+var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    border-radius: 4px;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (_ref7) {
   var $disabled = _ref7.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref8) {
@@ -13421,36 +13430,39 @@ var TabContainer = styled__default.div(_templateObject3$f || (_templateObject3$f
 }, function (_ref11) {
   var $disabled = _ref11.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.vms["default"].primary;
 });
-var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref12) {
-  var $headerHeight = _ref12.$headerHeight;
+var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref13) {
+  var $headerHeight = _ref13.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, function (_ref14) {
+  var theme = _ref14.theme;
   return theme.vms["default"].primary;
 });
-var DetailsFirstContainer = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_ref14) {
-  var $active = _ref14.$active,
-    theme = _ref14.theme;
+var DetailsFirstContainer = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_ref15) {
+  var $active = _ref15.$active,
+    theme = _ref15.theme;
   return $active ? theme.vms["default"].primary : theme.vms.text.medium;
 });
 var TabItemsWrapper = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
-var Tabs = function Tabs(_ref15) {
-  var tabItems = _ref15.tabItems,
-    _ref15$disabled = _ref15.disabled,
-    disabled = _ref15$disabled === void 0 ? false : _ref15$disabled,
-    headerHeight = _ref15.headerHeight,
-    headerPadding = _ref15.headerPadding,
-    activeTab = _ref15.activeTab,
-    border = _ref15.border,
-    _ref15$gap = _ref15.gap,
-    gap = _ref15$gap === void 0 ? '24px' : _ref15$gap,
-    overflow = _ref15.overflow,
-    scrollbarWidth = _ref15.scrollbarWidth,
-    bordeBottom = _ref15.bordeBottom,
-    tabRightNode = _ref15.tabRightNode;
+var Tabs = function Tabs(_ref16) {
+  var tabItems = _ref16.tabItems,
+    _ref16$disabled = _ref16.disabled,
+    disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
+    headerHeight = _ref16.headerHeight,
+    headerPadding = _ref16.headerPadding,
+    activeTab = _ref16.activeTab,
+    border = _ref16.border,
+    _ref16$gap = _ref16.gap,
+    gap = _ref16$gap === void 0 ? '24px' : _ref16$gap,
+    overflow = _ref16.overflow,
+    scrollbarWidth = _ref16.scrollbarWidth,
+    bordeBottom = _ref16.bordeBottom,
+    tabRightNode = _ref16.tabRightNode;
   var themeColors = useTheme();
   return React__default.createElement(Container$4, {
     "$gap": gap,