labsense-ui-kit 1.1.54 → 1.1.56

package/dist/Table/index.d.ts

@@ -7,6 +7,7 @@ interface HeaderCellConfig {
     maintext?: string;
     alignment?: string;
     CustomFunction?: React.ReactElement;
+    legend?: string;
 }
 interface HeaderConfig {
     headercolor?: string;

package/dist/Themes/index.d.ts

@@ -50,6 +50,7 @@ export interface ThemeColorsInterface {
         light_2: string;
         light_3: string;
         light_4: string;
+        light_5: string;
         softBlue: string;
         extraSoftBlue: string;
         boldTransparent: string;

package/dist/index.js

@@ -32,6 +32,7 @@ var light = {
     light_2: '#F5F8FA',
     light_3: '#F0F3F5',
     light_4: '#ECF0F4',
+    light_5: '#F0F0F3',
     softBlue: '#D4EEFF',
     extraSoftBlue: '#E4F4FF',
     boldTransparent: '#5E5E5E80',
@@ -101,6 +102,7 @@ var dark = {
     light_2: '#1F2327',
     light_3: '#F0F3F5',
     light_4: '#ECF0F4',
+    light_5: '#F0F0F3',
     softBlue: '#2C3E50',
     extraSoftBlue: '#34495E',
     boldTransparent: '#D3D3D380',
@@ -6848,15 +6850,41 @@ var Table = function Table(_ref) {
     type: 'checkbox',
     checked: isAllSelected,
     onChange: toggleSelectAll
-  })), tableheaderconfig.headerdata.map(function (columndata, key) {
+  })), tableheaderconfig.headerdata.map(function (columndata, index, allCols) {
     var _columndata$maintext;
-    return React__default.createElement(TableCell, {
-      key: key,
+    var currentLegend = columndata.legend || '';
+    var prevLegend = index > 0 ? allCols[index - 1].legend || '' : '';
+    var isFirstOfGroup = currentLegend && currentLegend !== prevLegend;
+    var isInLegendGroup = !!currentLegend;
+    return React__default.createElement(Container, {
+      key: index,
+      "$flexDirection": 'column',
+      "$width": columndata.width || '100px',
+      "$gap": '8px'
+    }, tableheaderconfig.headerdata.some(function (col) {
+      return !!col.legend;
+    }) && React__default.createElement(Container, {
+      "$alignItems": 'center',
+      "$height": '16px'
+    }, isInLegendGroup ? React__default.createElement(Container, null, isFirstOfGroup ? React__default.createElement(Container, null, React__default.createElement(Span, {
+      "$fontSize": '12px',
+      "$fontWeight": '400',
+      "$width": 'max-content',
+      "$lineHeight": 'normal'
+    }, currentLegend), React__default.createElement(Container, {
+      "$flex": '1',
+      "$height": '1px',
+      "$background": colorVariables.border.extraLight
+    })) : React__default.createElement(Container, {
+      "$flex": '1',
+      "$height": '1px',
+      "$background": colorVariables.border.extraLight
+    })) : null), React__default.createElement(TableCell, {
       maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
       width: columndata.width,
       alignment: columndata.alignment
-    });
-  })), loading ? React__default.createElement(Container, {
+    }));
+  })), React__default.createElement(Divider, null), loading ? React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$alignItems": 'center',
     "$justifyContent": 'center',