labsense-ui-kit 1.1.52 → 1.1.54

package/dist/Tabs/Tabs.d.ts

@@ -18,6 +18,7 @@ interface TabProps {
     border?: string;
     gap?: string;
     overflow?: string;
+    bordeBottom?: string;
 }
 declare const Tabs: React.FC<TabProps>;
 export default Tabs;

package/dist/Themes/index.d.ts

@@ -46,9 +46,10 @@ export interface ThemeColorsInterface {
         light: string;
     };
     accent: {
-        light: string;
-        extraLight: string;
-        extraExtraLight: string;
+        light_1: string;
+        light_2: string;
+        light_3: string;
+        light_4: string;
         softBlue: string;
         extraSoftBlue: string;
         boldTransparent: string;

package/dist/index.js

@@ -28,9 +28,10 @@ var light = {
     light: '#FFFFFF'
   },
   accent: {
-    light: '#E1E8ED',
-    extraLight: '#F5F8FA',
-    extraExtraLight: '#F0F3F5',
+    light_1: '#E1E8ED',
+    light_2: '#F5F8FA',
+    light_3: '#F0F3F5',
+    light_4: '#ECF0F4',
     softBlue: '#D4EEFF',
     extraSoftBlue: '#E4F4FF',
     boldTransparent: '#5E5E5E80',
@@ -96,9 +97,10 @@ var dark = {
     light: '#1A1A1A'
   },
   accent: {
-    light: '#2A2E33',
-    extraLight: '#1F2327',
-    extraExtraLight: '#F0F3F5',
+    light_1: '#2A2E33',
+    light_2: '#1F2327',
+    light_3: '#F0F3F5',
+    light_4: '#ECF0F4',
     softBlue: '#2C3E50',
     extraSoftBlue: '#34495E',
     boldTransparent: '#D3D3D380',
@@ -3610,7 +3612,7 @@ var TooltipContainer = styled__default.div(_templateObject$3 || (_templateObject
   return $minWidth != null ? $minWidth : 'auto';
 }, function (_ref2) {
   var $background = _ref2.$background;
-  return $background != null ? $background : colorVariables.accent.light;
+  return $background != null ? $background : colorVariables.accent.light_1;
 }, function (_ref3) {
   var $gap = _ref3.$gap;
   return $gap != null ? $gap : '16px';
@@ -3623,7 +3625,7 @@ var TooltipContainer = styled__default.div(_templateObject$3 || (_templateObject
   return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
 }, function (_ref5) {
   var $background = _ref5.$background;
-  return $background != null ? $background : colorVariables.accent.light;
+  return $background != null ? $background : colorVariables.accent.light_1;
 }, function (_ref6) {
   var $tooltipPosition = _ref6.$tooltipPosition;
   if ($tooltipPosition.startsWith('top')) {
@@ -3649,7 +3651,7 @@ var IconTooltip = function IconTooltip(_ref7) {
     infoText4 = _ref7.infoText4,
     _ref7$tooltipCSS = _ref7.tooltipCSS,
     tooltipCSS = _ref7$tooltipCSS === void 0 ? {
-      background: colorVariables.accent.light,
+      background: colorVariables.accent.light_1,
       color: colorVariables.text.dark,
       gap: '4px',
       minWidth: 'max-content',
@@ -4770,7 +4772,7 @@ var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4
   return $width ? $width : 'max-content';
 }, function (_ref22) {
   var $menuBackground = _ref22.$menuBackground;
-  return $menuBackground || colorVariables.accent.extraLight;
+  return $menuBackground || colorVariables.accent.light_2;
 });
 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-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) {
@@ -4794,7 +4796,7 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
     case 'error':
       return $disabled ? colorVariables.disabled.error : colorVariables["default"].error;
     default:
-      return $selectedOptionBackground || colorVariables.accent.extraLight;
+      return $selectedOptionBackground || colorVariables.accent.light_2;
   }
 }, function (_ref24) {
   var $selectedOptionColor = _ref24.$selectedOptionColor;
@@ -5123,7 +5125,7 @@ var DropdownButton$1 = styled__default.div(_templateObject3$7 || (_templateObjec
 }, function (_ref11) {
   var $background = _ref11.$background,
     $disabled = _ref11.$disabled;
-  return $disabled ? colorVariables.border.light : $background || colorVariables.accent.extraLight;
+  return $disabled ? colorVariables.border.light : $background || colorVariables.accent.light_2;
 }, function (_ref12) {
   var $size = _ref12.$size;
   switch ($size) {
@@ -5197,7 +5199,7 @@ var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7
   return $width ? $width : 'max-content';
 }, function (_ref24) {
   var $menuBackground = _ref24.$menuBackground;
-  return $menuBackground || colorVariables.accent.extraLight;
+  return $menuBackground || colorVariables.accent.light_2;
 }, function (_ref25) {
   var $top = _ref25.$top;
   return $top && "top: " + $top + ";";
@@ -5208,7 +5210,7 @@ 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$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: 1px solid ", ";\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 (_ref27) {
   var $background = _ref27.$background;
-  return $background || colorVariables.accent.extraLight;
+  return $background || colorVariables.accent.light_2;
 }, function (_ref28) {
   var $border = _ref28.$border;
   return $border || 'none';
@@ -5449,7 +5451,7 @@ var useClickOutside = function useClickOutside(elRef, elCallback) {
 
 var _templateObject$d, _templateObject2$a;
 var ModalOverlay = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
-var ModalContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: visible;\n"])), colorVariables.accent.light, function (_ref) {
+var ModalContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: visible;\n"])), colorVariables.accent.light_1, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return $maxWidth ? $maxWidth : '400px';
 });
@@ -6045,7 +6047,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
     "$position": 'relative'
   }, searchBox && React__default.createElement(SearchContainer$3, {
     "$borderBottom": searchBoxBorder,
-    "$background": isSearchBarEnabled ? colorVariables.text.white : colorVariables.accent.light,
+    "$background": isSearchBarEnabled ? colorVariables.text.white : colorVariables.accent.light_1,
     "$borderRadius": searchBoxBorderRadius,
     ref: searchBoxRef
   }, React__default.createElement(Container, {
@@ -6320,7 +6322,7 @@ var Loader = function Loader(_ref4) {
 };
 
 var _templateObject$l;
-var PageInput = styled__default.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables.accent.extraLight, colorVariables.border.light, colorVariables.text.dark);
+var PageInput = styled__default.input(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables.accent.light_2, colorVariables.border.light, colorVariables.text.dark);
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
     currentPage = _ref.currentPage,
@@ -6876,7 +6878,7 @@ var Table = function Table(_ref) {
       "$padding": '9px 12px',
       "$minHeight": '30px',
       "$alignItems": 'center',
-      "$background": colorVariables.accent.light,
+      "$background": colorVariables.accent.light_1,
       onClick: function onClick() {
         return toggleRoleVisibility(role);
       },
@@ -6919,25 +6921,28 @@ var Container$4 = styled__default.div(_templateObject$q || (_templateObject$q =
   var $border = _ref3.$border;
   return $border;
 });
-var FirstContainer = styled__default.div(_templateObject2$l || (_templateObject2$l = _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;
+var FirstContainer = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n"])), function (_ref4) {
+  var $bordeBottom = _ref4.$bordeBottom;
+  return $bordeBottom != null ? $bordeBottom : "1px solid " + colorVariables.border.light;
+}, function (_ref5) {
+  var $headerPadding = _ref5.$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-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 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-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 (_ref6) {
   var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
   return $disabled ? '0.6' : '1';
-}, colorVariables.text.medium, function (_ref7) {
-  var $headerHeight = _ref7.$headerHeight;
+}, colorVariables.text.medium, function (_ref8) {
+  var $headerHeight = _ref8.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
-}, function (_ref8) {
-  var $disabled = _ref8.$disabled;
+}, function (_ref9) {
+  var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-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    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref9) {
-  var $headerHeight = _ref9.$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    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref10) {
+  var $headerHeight = _ref10.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
@@ -6945,23 +6950,25 @@ var TabItemContainer = styled__default.div(_templateObject4$c || (_templateObjec
 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  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(_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;
+var Tabs = function Tabs(_ref11) {
+  var tabItems = _ref11.tabItems,
+    _ref11$disabled = _ref11.disabled,
+    disabled = _ref11$disabled === void 0 ? false : _ref11$disabled,
+    headerHeight = _ref11.headerHeight,
+    headerPadding = _ref11.headerPadding,
+    activeTab = _ref11.activeTab,
+    border = _ref11.border,
+    _ref11$gap = _ref11.gap,
+    gap = _ref11$gap === void 0 ? '24px' : _ref11$gap,
+    overflow = _ref11.overflow,
+    bordeBottom = _ref11.bordeBottom;
   return React__default.createElement(Container$4, {
     "$gap": gap,
     "$border": border,
     "$overflow": overflow
   }, React__default.createElement(FirstContainer, {
-    "$headerPadding": headerPadding
+    "$headerPadding": headerPadding,
+    "$bordeBottom": bordeBottom
   }, tabItems.map(function (tab, index) {
     return React__default.createElement(TabContainer, {
       key: index,