labsense-ui-kit 1.1.44 → 1.1.46

package/dist/index.modern.js

@@ -4545,16 +4545,19 @@ var DropdownButton = styled.div(_templateObject2$6 || (_templateObject2$6 = _tag
       return '14px';
   }
 });
-var TitleText = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
-  var $titleSize = _ref15.$titleSize,
-    $size = _ref15.$size;
-  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+var TitleText = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
+  var $titleWeight = _ref15.$titleWeight;
+  return $titleWeight != null ? $titleWeight : '500';
 }, function (_ref16) {
   var $titleSize = _ref16.$titleSize,
     $size = _ref16.$size;
   return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref17) {
-  var $titleColor = _ref17.$titleColor;
+  var $titleSize = _ref17.$titleSize,
+    $size = _ref17.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref18) {
+  var $titleColor = _ref18.$titleColor;
   switch ($titleColor) {
     case 'dark':
       return colorVariables.text.dark;
@@ -4577,24 +4580,24 @@ var TitleText = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTe
   }
 });
 var Container$2 = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n"])));
-var LabelText = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref18) {
-  var $labelStyle = _ref18.$labelStyle;
+var LabelText = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref19) {
+  var $labelStyle = _ref19.$labelStyle;
   return $labelStyle;
 }, colorVariables.text.medium);
-var DropdownMenu = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), colorVariables.border.light, function (_ref19) {
-  var $optionsBorderRadius = _ref19.$optionsBorderRadius;
+var DropdownMenu = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), colorVariables.border.light, function (_ref20) {
+  var $optionsBorderRadius = _ref20.$optionsBorderRadius;
   return $optionsBorderRadius || '8px';
-}, function (_ref20) {
-  var $width = _ref20.$width;
-  return $width ? $width : 'max-content';
 }, function (_ref21) {
-  var $menuBackground = _ref21.$menuBackground;
+  var $width = _ref21.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref22) {
+  var $menuBackground = _ref22.$menuBackground;
   return $menuBackground || colorVariables.accent.extraLight;
 });
 var SelectedOptionsWrapper = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
-var SelectedOptionDiv = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref22) {
-  var $selectedOptionBackground = _ref22.$selectedOptionBackground,
-    $disabled = _ref22.$disabled;
+var SelectedOptionDiv = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref23) {
+  var $selectedOptionBackground = _ref23.$selectedOptionBackground,
+    $disabled = _ref23.$disabled;
   switch ($selectedOptionBackground) {
     case 'dark':
       return colorVariables.text.dark;
@@ -4615,8 +4618,8 @@ var SelectedOptionDiv = styled.div(_templateObject8$1 || (_templateObject8$1 = _
     default:
       return $selectedOptionBackground || colorVariables.accent.extraLight;
   }
-}, function (_ref23) {
-  var $selectedOptionColor = _ref23.$selectedOptionColor;
+}, function (_ref24) {
+  var $selectedOptionColor = _ref24.$selectedOptionColor;
   switch ($selectedOptionColor) {
     case 'dark':
       return colorVariables.text.dark;
@@ -4638,67 +4641,68 @@ var SelectedOptionDiv = styled.div(_templateObject8$1 || (_templateObject8$1 = _
       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 (_ref24) {
-  var $disabled = _ref24.$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 (_ref25) {
+  var $disabled = _ref25.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref25) {
-  var removeIconBackground = _ref25.removeIconBackground,
-    $type = _ref25.$type;
-  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
 }, function (_ref26) {
-  var $disabled = _ref26.$disabled;
+  var removeIconBackground = _ref26.removeIconBackground,
+    $type = _ref26.$type;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
+}, function (_ref27) {
+  var $disabled = _ref27.$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 Asterisk = styled.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"])), colorVariables["default"].error);
-var MultiSelectDropdown = function MultiSelectDropdown(_ref27) {
-  var title = _ref27.title,
-    titleSize = _ref27.titleSize,
-    _ref27$titleColor = _ref27.titleColor,
-    titleColor = _ref27$titleColor === void 0 ? colorVariables.text.dark : _ref27$titleColor,
-    _ref27$labelText = _ref27.labelText,
-    labelText = _ref27$labelText === void 0 ? 'Select Cameras' : _ref27$labelText,
-    labelStyle = _ref27.labelStyle,
-    labelColor = _ref27.labelColor,
-    _ref27$replaceLabel = _ref27.replaceLabel,
-    replaceLabel = _ref27$replaceLabel === void 0 ? true : _ref27$replaceLabel,
-    options = _ref27.options,
-    width = _ref27.width,
-    optionWidth = _ref27.optionWidth,
-    height = _ref27.height,
-    placeholder = _ref27.placeholder,
-    border = _ref27.border,
-    _ref27$background = _ref27.background,
-    background = _ref27$background === void 0 ? colorVariables["default"].tertiary : _ref27$background,
-    selectedOptionBackground = _ref27.selectedOptionBackground,
-    selectedOptionColor = _ref27.selectedOptionColor,
-    _ref27$menuBackground = _ref27.menuBackground,
-    menuBackground = _ref27$menuBackground === void 0 ? 'white' : _ref27$menuBackground,
-    optionsBorderRadius = _ref27.optionsBorderRadius,
-    borderRadius = _ref27.borderRadius,
-    removeIconBackground = _ref27.removeIconBackground,
-    handleSelectChange = _ref27.handleSelectChange,
-    selectedOptions = _ref27.selectedOptions,
-    placeholderColor = _ref27.placeholderColor,
-    optionBorder = _ref27.optionBorder,
-    optionColor = _ref27.optionColor,
-    searchIcon = _ref27.searchIcon,
-    searchbarTextColor = _ref27.searchbarTextColor,
-    searchBoxBackground = _ref27.searchBoxBackground,
-    searchBoxBorder = _ref27.searchBoxBorder,
-    searchBoxBorderRadius = _ref27.searchBoxBorderRadius,
-    size = _ref27.size,
-    removeIcon = _ref27.removeIcon,
-    type = _ref27.type,
-    icon = _ref27.icon,
-    _ref27$disabled = _ref27.disabled,
-    disabled = _ref27$disabled === void 0 ? false : _ref27$disabled,
-    _ref27$required = _ref27.required,
-    required = _ref27$required === void 0 ? false : _ref27$required,
-    _ref27$searchBox = _ref27.searchBox,
-    searchBox = _ref27$searchBox === void 0 ? true : _ref27$searchBox,
-    _ref27$NoOptionsText = _ref27.NoOptionsText,
-    NoOptionsText = _ref27$NoOptionsText === void 0 ? 'No Options Available' : _ref27$NoOptionsText;
+var MultiSelectDropdown = function MultiSelectDropdown(_ref28) {
+  var title = _ref28.title,
+    titleWeight = _ref28.titleWeight,
+    titleSize = _ref28.titleSize,
+    _ref28$titleColor = _ref28.titleColor,
+    titleColor = _ref28$titleColor === void 0 ? colorVariables.text.dark : _ref28$titleColor,
+    _ref28$labelText = _ref28.labelText,
+    labelText = _ref28$labelText === void 0 ? 'Select Cameras' : _ref28$labelText,
+    labelStyle = _ref28.labelStyle,
+    labelColor = _ref28.labelColor,
+    _ref28$replaceLabel = _ref28.replaceLabel,
+    replaceLabel = _ref28$replaceLabel === void 0 ? true : _ref28$replaceLabel,
+    options = _ref28.options,
+    width = _ref28.width,
+    optionWidth = _ref28.optionWidth,
+    height = _ref28.height,
+    placeholder = _ref28.placeholder,
+    border = _ref28.border,
+    _ref28$background = _ref28.background,
+    background = _ref28$background === void 0 ? colorVariables["default"].tertiary : _ref28$background,
+    selectedOptionBackground = _ref28.selectedOptionBackground,
+    selectedOptionColor = _ref28.selectedOptionColor,
+    _ref28$menuBackground = _ref28.menuBackground,
+    menuBackground = _ref28$menuBackground === void 0 ? 'white' : _ref28$menuBackground,
+    optionsBorderRadius = _ref28.optionsBorderRadius,
+    borderRadius = _ref28.borderRadius,
+    removeIconBackground = _ref28.removeIconBackground,
+    handleSelectChange = _ref28.handleSelectChange,
+    selectedOptions = _ref28.selectedOptions,
+    placeholderColor = _ref28.placeholderColor,
+    optionBorder = _ref28.optionBorder,
+    optionColor = _ref28.optionColor,
+    searchIcon = _ref28.searchIcon,
+    searchbarTextColor = _ref28.searchbarTextColor,
+    searchBoxBackground = _ref28.searchBoxBackground,
+    searchBoxBorder = _ref28.searchBoxBorder,
+    searchBoxBorderRadius = _ref28.searchBoxBorderRadius,
+    size = _ref28.size,
+    removeIcon = _ref28.removeIcon,
+    type = _ref28.type,
+    icon = _ref28.icon,
+    _ref28$disabled = _ref28.disabled,
+    disabled = _ref28$disabled === void 0 ? false : _ref28$disabled,
+    _ref28$required = _ref28.required,
+    required = _ref28$required === void 0 ? false : _ref28$required,
+    _ref28$searchBox = _ref28.searchBox,
+    searchBox = _ref28$searchBox === void 0 ? true : _ref28$searchBox,
+    _ref28$NoOptionsText = _ref28.NoOptionsText,
+    NoOptionsText = _ref28$NoOptionsText === void 0 ? 'No Options Available' : _ref28$NoOptionsText;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -4734,7 +4738,8 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref27) {
   return React.createElement(Container$2, null, title && React.createElement(TitleText, {
     "$titleColor": titleColor,
     "$titleSize": titleSize,
-    "$size": size
+    "$size": size,
+    "$titleWeight": titleWeight
   }, title, required && React.createElement(Asterisk, null, "*")), React.createElement(DropdownContainer, {
     ref: dropdownRef,
     "$width": width,
@@ -6726,32 +6731,35 @@ var Table = function Table(_ref) {
 };
 
 var _templateObject$p, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$9;
-var Container$4 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
-  var $gap = _ref.$gap;
-  return $gap;
+var Container$4 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+  var $overflow = _ref.$overflow;
+  return $overflow || 'visible';
 }, function (_ref2) {
-  var $border = _ref2.$border;
+  var $gap = _ref2.$gap;
+  return $gap;
+}, function (_ref3) {
+  var $border = _ref3.$border;
   return $border;
 });
-var FirstContainer = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables.border.light, function (_ref3) {
-  var $headerPadding = _ref3.$headerPadding;
+var FirstContainer = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables.border.light, function (_ref4) {
+  var $headerPadding = _ref4.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref4) {
-  var $disabled = _ref4.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref5) {
+var TabContainer = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref5) {
   var $disabled = _ref5.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled;
   return $disabled ? '0.6' : '1';
-}, colorVariables.text.medium, function (_ref6) {
-  var $headerHeight = _ref6.$headerHeight;
+}, colorVariables.text.medium, function (_ref7) {
+  var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
-}, function (_ref7) {
-  var $disabled = _ref7.$disabled;
+}, function (_ref8) {
+  var $disabled = _ref8.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer = styled.div(_templateObject4$b || (_templateObject4$b = _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    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref8) {
-  var $headerHeight = _ref8.$headerHeight;
+var TabItemContainer = styled.div(_templateObject4$b || (_templateObject4$b = _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    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref9) {
+  var $headerHeight = _ref9.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
@@ -6759,19 +6767,21 @@ var TabItemContainer = styled.div(_templateObject4$b || (_templateObject4$b = _t
 var DetailsFirstContainer = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables["default"].primary : colorVariables.text.medium;
 });
-var Tabs = function Tabs(_ref9) {
-  var tabItems = _ref9.tabItems,
-    _ref9$disabled = _ref9.disabled,
-    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
-    headerHeight = _ref9.headerHeight,
-    headerPadding = _ref9.headerPadding,
-    activeTab = _ref9.activeTab,
-    border = _ref9.border,
-    _ref9$gap = _ref9.gap,
-    gap = _ref9$gap === void 0 ? '24px' : _ref9$gap;
+var Tabs = function Tabs(_ref10) {
+  var tabItems = _ref10.tabItems,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    headerHeight = _ref10.headerHeight,
+    headerPadding = _ref10.headerPadding,
+    activeTab = _ref10.activeTab,
+    border = _ref10.border,
+    _ref10$gap = _ref10.gap,
+    gap = _ref10$gap === void 0 ? '24px' : _ref10$gap,
+    overflow = _ref10.overflow;
   return React.createElement(Container$4, {
     "$gap": gap,
-    "$border": border
+    "$border": border,
+    "$overflow": overflow
   }, React.createElement(FirstContainer, {
     "$headerPadding": headerPadding
   }, tabItems.map(function (tab, index) {