labsense-ui-kit 1.4.28 → 1.4.29

package/dist/Dropdown/MultiSelectDropdown.d.ts

@@ -60,6 +60,7 @@ interface MultiSelectDropdownProps {
     selectAllOption?: boolean;
     selectAllLabel?: string;
     dropdownPosition?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+    showAllSelected?: boolean;
 }
 declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
 export default MultiSelectDropdown;

package/dist/index.js

@@ -9163,7 +9163,7 @@ var OptionComponent = function OptionComponent(_ref11) {
   }, NoOptionsText))));
 };
 
-var _templateObject$b, _templateObject2$8, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var _templateObject$b, _templateObject2$8, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1;
 var DropdownContainer = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 100%;\n  position: relative;\n  // max-height: ", ";\n  max-height: ", ";\n"])), function (_ref) {
   var $width = _ref.$width;
   return $width || '100%';
@@ -9178,8 +9178,9 @@ var DropdownContainer = styled__default.div(_templateObject$b || (_templateObjec
   return $hasTitle ? 'calc(100% - 22px)' : '100%';
 });
 var DropdownButton = styled__default.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 $replaceLabel = _ref5.$replaceLabel;
-  return $replaceLabel ? 'auto' : '';
+  var $replaceLabel = _ref5.$replaceLabel,
+    $showAllSelected = _ref5.$showAllSelected;
+  return $replaceLabel ? $showAllSelected ? 'auto' : 'hidden' : '';
 }, function (_ref6) {
   var $size = _ref6.$size;
   switch ($size) {
@@ -9333,7 +9334,7 @@ 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  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 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 (_ref27) {
   var $selectedOptionBackground = _ref27.$selectedOptionBackground,
     $disabled = _ref27.$disabled,
     theme = _ref27.theme;
@@ -9394,63 +9395,116 @@ var RemoveIcon = styled__default.div(_templateObject9$1 || (_templateObject9$1 =
   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 Asterisk = styled__default.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref32) {
-  var theme = _ref32.theme;
+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 (_ref32) {
+  var $selectedOptionBackground = _ref32.$selectedOptionBackground,
+    $disabled = _ref32.$disabled,
+    theme = _ref32.theme;
+  switch ($selectedOptionBackground) {
+    case 'dark':
+      return theme.vms.text.dark;
+    case 'medium':
+      return theme.vms.text.medium;
+    case 'light':
+      return theme.vms.text.light;
+    case 'white':
+      return theme.vms.text.white;
+    case 'warning':
+      return $disabled ? theme.vms.disabled.warning : theme.vms["default"].warning;
+    case 'info':
+      return $disabled ? theme.vms.disabled.info : theme.vms["default"].info;
+    case 'success':
+      return $disabled ? theme.vms.disabled.success : theme.vms["default"].success;
+    case 'error':
+      return $disabled ? theme.vms.disabled.error : theme.vms["default"].error;
+    default:
+      return $selectedOptionBackground || theme.vms.accent.light_2;
+  }
+}, function (_ref33) {
+  var $selectedOptionColor = _ref33.$selectedOptionColor,
+    theme = _ref33.theme;
+  switch ($selectedOptionColor) {
+    case 'dark':
+      return theme.vms.text.dark;
+    case 'medium':
+      return theme.vms.text.medium;
+    case 'light':
+      return theme.vms.text.light;
+    case 'white':
+      return theme.vms.text.white;
+    case 'warning':
+      return theme.vms["default"].warning;
+    case 'info':
+      return theme.vms["default"].info;
+    case 'success':
+      return theme.vms["default"].success;
+    case 'error':
+      return theme.vms["default"].error;
+    default:
+      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 (_ref34) {
+  var theme = _ref34.theme;
   return theme.vms["default"].error;
 });
-var MultiSelectDropdown = function MultiSelectDropdown(_ref33) {
-  var title = _ref33.title,
-    titleWeight = _ref33.titleWeight,
-    titleSize = _ref33.titleSize,
-    titleColor = _ref33.titleColor,
-    _ref33$labelText = _ref33.labelText,
-    labelText = _ref33$labelText === void 0 ? 'Select Cameras' : _ref33$labelText,
-    labelStyle = _ref33.labelStyle,
-    labelColor = _ref33.labelColor,
-    _ref33$replaceLabel = _ref33.replaceLabel,
-    replaceLabel = _ref33$replaceLabel === void 0 ? true : _ref33$replaceLabel,
-    options = _ref33.options,
-    width = _ref33.width,
-    optionWidth = _ref33.optionWidth,
-    height = _ref33.height,
-    placeholder = _ref33.placeholder,
-    border = _ref33.border,
-    background = _ref33.background,
-    selectedOptionBackground = _ref33.selectedOptionBackground,
-    selectedOptionColor = _ref33.selectedOptionColor,
-    menuBackground = _ref33.menuBackground,
-    optionsBorderRadius = _ref33.optionsBorderRadius,
-    borderRadius = _ref33.borderRadius,
-    removeIconBackground = _ref33.removeIconBackground,
-    handleSelectChange = _ref33.handleSelectChange,
-    selectedOptions = _ref33.selectedOptions,
-    placeholderColor = _ref33.placeholderColor,
-    optionBorder = _ref33.optionBorder,
-    optionColor = _ref33.optionColor,
-    searchIcon = _ref33.searchIcon,
-    searchbarTextColor = _ref33.searchbarTextColor,
-    searchBoxBackground = _ref33.searchBoxBackground,
-    searchBoxBorder = _ref33.searchBoxBorder,
-    searchBoxBorderRadius = _ref33.searchBoxBorderRadius,
-    size = _ref33.size,
-    removeIcon = _ref33.removeIcon,
-    type = _ref33.type,
-    icon = _ref33.icon,
-    _ref33$disabled = _ref33.disabled,
-    disabled = _ref33$disabled === void 0 ? false : _ref33$disabled,
-    _ref33$required = _ref33.required,
-    required = _ref33$required === void 0 ? false : _ref33$required,
-    _ref33$searchBox = _ref33.searchBox,
-    searchBox = _ref33$searchBox === void 0 ? true : _ref33$searchBox,
-    _ref33$searchBoxTextL = _ref33.searchBoxTextLength,
-    searchBoxTextLength = _ref33$searchBoxTextL === void 0 ? 50 : _ref33$searchBoxTextL,
-    _ref33$NoOptionsText = _ref33.NoOptionsText,
-    NoOptionsText = _ref33$NoOptionsText === void 0 ? 'No Options Available' : _ref33$NoOptionsText,
-    _ref33$selectAllOptio = _ref33.selectAllOption,
-    selectAllOption = _ref33$selectAllOptio === void 0 ? false : _ref33$selectAllOptio,
-    _ref33$selectAllLabel = _ref33.selectAllLabel,
-    selectAllLabel = _ref33$selectAllLabel === void 0 ? 'Select All' : _ref33$selectAllLabel,
-    dropdownPosition = _ref33.dropdownPosition;
+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,
+    dropdownPosition = _ref35.dropdownPosition,
+    _ref35$showAllSelecte = _ref35.showAllSelected,
+    showAllSelected = _ref35$showAllSelecte === void 0 ? false : _ref35$showAllSelecte;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -9508,11 +9562,60 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref33) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  var selectedOptionObjects = options.filter(function (opt) {
-    return selectedOptions.includes(opt.value);
-  }).sort(function (a, b) {
-    return a.labelText.localeCompare(b.labelText);
-  });
+  var selectedOptionObjects = React.useMemo(function () {
+    return options.filter(function (opt) {
+      return selectedOptions.includes(opt.value);
+    }).sort(function (a, b) {
+      return a.labelText.localeCompare(b.labelText);
+    });
+  }, [options, selectedOptions]);
+  var _useState4 = React.useState(null),
+    displayCount = _useState4[0],
+    setDisplayCount = _useState4[1];
+  var measureRef = React.useRef(null);
+  var _useState5 = React.useState(0),
+    containerResizeKey = _useState5[0],
+    setContainerResizeKey = _useState5[1];
+  React.useEffect(function () {
+    if (showAllSelected || !dropdownRef.current) return;
+    var observer = new ResizeObserver(function () {
+      return setContainerResizeKey(function (k) {
+        return k + 1;
+      });
+    });
+    observer.observe(dropdownRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [showAllSelected]);
+  React.useLayoutEffect(function () {
+    if (showAllSelected) {
+      setDisplayCount(null);
+      return;
+    }
+    if (!measureRef.current) return;
+    var container = measureRef.current;
+    var containerWidth = container.offsetWidth;
+    var chips = Array.from(container.querySelectorAll('[data-chip]'));
+    if (chips.length === 0) {
+      setDisplayCount(null);
+      return;
+    }
+    var GAP = 6;
+    var BADGE_WIDTH = 40;
+    var count = 0;
+    for (var i = 0; i < chips.length; i++) {
+      var chipRight = chips[i].offsetLeft + chips[i].offsetWidth;
+      var remaining = chips.length - (i + 1);
+      var limit = remaining > 0 ? containerWidth - BADGE_WIDTH - GAP : containerWidth;
+      if (chipRight <= limit) {
+        count = i + 1;
+      } else {
+        break;
+      }
+    }
+    setDisplayCount(count < chips.length ? count : null);
+  }, [selectedOptionObjects, showAllSelected, containerResizeKey]);
   var handleOptionRemoval = function handleOptionRemoval(optionValue) {
     if (handleSelectChange) {
       handleSelectChange(selectedOptions.filter(function (value) {
@@ -9595,8 +9698,49 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref33) {
     "$color": labelColor,
     "$isOpen": isOpen,
     "$disabled": disabled,
-    "$replaceLabel": replaceLabel
-  }, selectedOptions.length !== 0 && replaceLabel ? React__default.createElement(SelectedOptionsWrapper, null, selectedOptionObjects.map(function (option) {
+    "$replaceLabel": replaceLabel,
+    "$showAllSelected": showAllSelected
+  }, selectedOptions.length !== 0 && replaceLabel ? showAllSelected ? React__default.createElement(SelectedOptionsWrapper, null, selectedOptionObjects.map(function (option) {
+    return React__default.createElement(SelectedOptionDiv, {
+      key: option.value,
+      "$disabled": disabled,
+      "$selectedOptionBackground": selectedOptionBackground,
+      "$selectedOptionColor": selectedOptionColor
+    }, option.labelText, React__default.createElement(RemoveIcon, {
+      removeIconBackground: removeIconBackground,
+      "$type": type,
+      "$disabled": disabled,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        if (!disabled) handleOptionRemoval(option.value);
+      }
+    }, React__default.createElement(Icon, {
+      icon: 'Close',
+      size: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.size) || 6,
+      color: removeIcon !== null && removeIcon !== void 0 && removeIcon.color || type === 'remove' ? themeColors.vms["default"].error : themeColors.vms.brand.primary,
+      weight: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.weight) || '0',
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    })));
+  })) : React__default.createElement(ChipArea, null, React__default.createElement(MeasureLayer, {
+    ref: measureRef
+  }, selectedOptionObjects.map(function (option) {
+    return React__default.createElement(SelectedOptionDiv, {
+      key: option.value,
+      "data-chip": true,
+      "$disabled": disabled,
+      "$selectedOptionBackground": selectedOptionBackground,
+      "$selectedOptionColor": selectedOptionColor
+    }, option.labelText, React__default.createElement(RemoveIcon, {
+      "$type": type,
+      "$disabled": disabled,
+      removeIconBackground: removeIconBackground
+    }, React__default.createElement(Icon, {
+      icon: 'Close',
+      size: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.size) || 6,
+      color: 'transparent',
+      weight: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.weight) || '0'
+    })));
+  })), React__default.createElement(SingleLineRow, null, selectedOptionObjects.slice(0, displayCount != null ? displayCount : selectedOptionObjects.length).map(function (option) {
     return React__default.createElement(SelectedOptionDiv, {
       key: option.value,
       "$disabled": disabled,
@@ -9617,7 +9761,11 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref33) {
       weight: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.weight) || '0',
       cursor: disabled ? 'not-allowed' : 'pointer'
     })));
-  })) : React__default.createElement(TextWrapper, null, icon && React__default.createElement(Icon, {
+  }), displayCount !== null && displayCount < selectedOptionObjects.length && React__default.createElement(OverflowCountBadge, {
+    "$selectedOptionBackground": selectedOptionBackground,
+    "$selectedOptionColor": selectedOptionColor,
+    "$disabled": disabled
+  }, "+", selectedOptionObjects.length - displayCount))) : React__default.createElement(TextWrapper, null, icon && React__default.createElement(Icon, {
     icon: icon.name || 'Tag',
     size: icon.size || 14,
     weight: icon.weight || '1',
@@ -10430,7 +10578,7 @@ var SearchBox = function SearchBox(_ref9) {
   }));
 };
 
-var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
 var Label = styled__default.label(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: ", ";\n  position: relative;\n  white-space: nowrap;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $fontWeight = _ref.$fontWeight;
   return $fontWeight != null ? $fontWeight : '500';
@@ -10587,11 +10735,11 @@ var TimePickerDropdown = styled__default.div(_templateObject10$3 || (_templateOb
   return theme.vms.text.white;
 });
 var SliderColumn = styled__default.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n"])));
-var SliderLabel = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 4px;\n"])), function (_ref19) {
+var SliderLabel = styled__default.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 4px;\n"])), function (_ref19) {
   var theme = _ref19.theme;
   return theme.vms.text.medium;
 });
-var SliderWrapper = styled__default.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  height: 150px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  background: ", ";\n  width: 60px;\n  scroll-behavior: smooth;\n  \n  /* Custom scrollbar */\n  &::-webkit-scrollbar {\n    width: 4px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 2px;\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (_ref20) {
+var SliderWrapper = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  height: 150px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  background: ", ";\n  width: 60px;\n  scroll-behavior: smooth;\n  \n  /* Custom scrollbar */\n  &::-webkit-scrollbar {\n    width: 4px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 2px;\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (_ref20) {
   var theme = _ref20.theme;
   return theme.vms.border.light;
 }, function (_ref21) {
@@ -10607,7 +10755,7 @@ var SliderWrapper = styled__default.div(_templateObject13$1 || (_templateObject1
   var theme = _ref24.theme;
   return theme.vms.text.medium;
 });
-var SliderItem = styled__default.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  text-align: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: ", ";\n  background: ", ";\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref25) {
+var SliderItem = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  text-align: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: ", ";\n  background: ", ";\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref25) {
   var $selected = _ref25.$selected,
     theme = _ref25.theme;
   return $selected ? theme.vms.text.white : theme.vms.text.dark;