@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTTable/theme.js

@@ -0,0 +1,357 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../scss/variables/colors.module.scss';
+import { withImportant } from '../../utils/classesUtils';
+export const retrieveStyle = _ref => {
+  var _theme$UTTable, _theme$UTTable2, _theme$UTTable3, _theme$UTTable4, _theme$UTTable5, _theme$UTTable6, _theme$UTTable7, _theme$UTTable8, _theme$UTTable9, _theme$UTTable0, _theme$UTTable1, _theme$UTTable10, _theme$UTTable11, _theme$UTTable12, _theme$UTTable13, _theme$UTTable14, _theme$UTTable15, _theme$UTTable16, _theme$UTTable17, _theme$UTTable18, _theme$UTTable19, _theme$UTTable20, _theme$UTTable21, _theme$UTTable22, _theme$UTTable23, _theme$UTTable24, _theme$UTTable25, _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3;
+  let {
+    theme
+  } = _ref;
+  const tabletMobile = getIn(theme, ['Media', 'tabletMobile']);
+  return {
+    table: {
+      fontFamily: getIn(theme, ['UTTable', 'table', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily']))
+    },
+    header: {
+      backgroundColor: getIn(theme, ['UTTable', 'header', 'backgroundColor'], Colors.white),
+      borderRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+      borderColor: getIn(theme, ['UTTable', 'header', 'borderColor']),
+      borderBottomStyle: getIn(theme, ['UTTable', 'header', 'borderStyle'], 'solid'),
+      borderTopStyle: getIn(theme, ['UTTable', 'header', 'borderStyle'], 'solid')
+    },
+    headerCell: {
+      fontSize: getIn(theme, ['UTTable', 'headerCell', 'fontSize'], getIn(theme, ['Fonts', 'large'])),
+      fontWeight: getIn(theme, ['UTTable', 'headerCell', 'fontWeight'], 500)
+    },
+    headerInactiveCell: {
+      color: getIn(theme, ['UTTable', 'headerCell', 'color'])
+    },
+    headerCellHover: {
+      transition: getIn(theme, ['UTTable', 'headerCell', 'transition'], 'all .4s'),
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTTable', 'headerCellHover', 'backgroundColor']),
+        borderColor: getIn(theme, ['UTTable', 'headerCellHover', 'borderColor']),
+        color: getIn(theme, ['UTTable', 'headerCellHover', 'color']),
+        opacity: getIn(theme, ['UTTable', 'headerCellHover', 'opacity'], 0.6)
+      }
+    },
+    headerActiveCell: {
+      backgroundColor: getIn(theme, ['UTTable', 'headerActiveCell', 'backgroundColor']),
+      borderColor: getIn(theme, ['UTTable', 'headerActiveCell', 'borderColor']),
+      color: getIn(theme, ['UTTable', 'headerActiveCell', 'color']),
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTTable', 'headerActiveCellHover', 'backgroundColor']),
+        borderColor: getIn(theme, ['UTTable', 'headerActiveCellHover', 'borderColor']),
+        color: getIn(theme, ['UTTable', 'headerActiveCellHover', 'color']),
+        opacity: getIn(theme, ['UTTable', 'headerActiveCellHover', 'opacity'], 0.6)
+      }
+    },
+    headerCellCategoryName: {
+      color: withImportant(theme === null || theme === void 0 || (_theme$UTTable = theme.UTTable) === null || _theme$UTTable === void 0 || (_theme$UTTable = _theme$UTTable.headerCellCategoryName) === null || _theme$UTTable === void 0 ? void 0 : _theme$UTTable.color),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTTable2 = theme.UTTable) === null || _theme$UTTable2 === void 0 || (_theme$UTTable2 = _theme$UTTable2.headerCellCategoryName) === null || _theme$UTTable2 === void 0 ? void 0 : _theme$UTTable2.fontSize) || '12px'),
+      fontWeight: withImportant(theme === null || theme === void 0 || (_theme$UTTable3 = theme.UTTable) === null || _theme$UTTable3 === void 0 || (_theme$UTTable3 = _theme$UTTable3.headerCellCategoryName) === null || _theme$UTTable3 === void 0 ? void 0 : _theme$UTTable3.fontWeight),
+      marginBottom: getIn(theme, ['UTTable', 'headerCellCategoryName', 'marginBottom'], 5)
+    },
+    headerCellUnit: {
+      color: withImportant(theme === null || theme === void 0 || (_theme$UTTable4 = theme.UTTable) === null || _theme$UTTable4 === void 0 || (_theme$UTTable4 = _theme$UTTable4.headerCellUnit) === null || _theme$UTTable4 === void 0 ? void 0 : _theme$UTTable4.color),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTTable5 = theme.UTTable) === null || _theme$UTTable5 === void 0 || (_theme$UTTable5 = _theme$UTTable5.headerCellUnit) === null || _theme$UTTable5 === void 0 ? void 0 : _theme$UTTable5.fontSize) || '14px'),
+      fontWeight: withImportant(theme === null || theme === void 0 || (_theme$UTTable6 = theme.UTTable) === null || _theme$UTTable6 === void 0 || (_theme$UTTable6 = _theme$UTTable6.headerCellUnit) === null || _theme$UTTable6 === void 0 ? void 0 : _theme$UTTable6.fontWeight)
+    },
+    orderIcon: {
+      color: getIn(theme, ['UTTable', 'orderIcon', 'color'])
+    },
+    scrollbar: {
+      '& .ps__thumb-x': {
+        backgroundColor: getIn(theme, ['UTTable', 'scrollbar', 'backgroundColor'])
+      },
+      '& .ps__rail-x': {
+        borderTopLeftRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+        borderTopRightRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+        '&:hover > .ps__thumb-x': {
+          backgroundColor: getIn(theme, ['UTTable', 'scrollbar', 'hover', 'backgroundColor'])
+        },
+        '&.ps--clicking > .ps__thumb-x': {
+          backgroundColor: getIn(theme, ['UTTable', 'scrollbar', 'hover', 'backgroundColor'])
+        }
+      }
+    },
+    fixedHeaderRowLeft: {
+      backgroundColor: getIn(theme, ['UTTable', 'fixedHeaderRowLeft', 'backgroundColor'], getIn(theme, ['UTTable', 'header', 'backgroundColor'], '#FFF')),
+      borderColor: getIn(theme, ['UTTable', 'header', 'borderColor']),
+      borderRightColor: getIn(theme, ['UTTable', 'header', 'fixedHeaderDivisorColor']),
+      borderBottomLeftRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+      borderTopLeftRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+      borderStyle: getIn(theme, ['UTTable', 'header', 'borderStyle'], 'solid'),
+      boxShadow: getIn(theme, ['UTTable', 'fixedHeaderRowLeft', 'boxShadow'])
+    },
+    fixedHeaderRowRight: {
+      backgroundColor: getIn(theme, ['UTTable', 'fixedHeaderRowRight', 'backgroundColor'], getIn(theme, ['UTTable', 'header', 'backgroundColor'], Colors.white)),
+      borderColor: getIn(theme, ['UTTable', 'header', 'borderColor']),
+      borderLeftColor: getIn(theme, ['UTTable', 'header', 'fixedHeaderDivisorColor']),
+      borderBottomRightRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+      borderTopRightRadius: getIn(theme, ['UTTable', 'header', 'borderRadius']),
+      borderStyle: getIn(theme, ['UTTable', 'header', 'borderStyle'], 'solid'),
+      boxShadow: getIn(theme, ['UTTable', 'fixedHeaderRowRight', 'boxShadow'])
+    },
+    row: {
+      backgroundColor: getIn(theme, ['UTTable', 'row', 'backgroundColor'], Colors.white),
+      boxShadow: getIn(theme, ['UTTable', 'row', 'boxShadow']),
+      borderRadius: getIn(theme, ['UTTable', 'row', 'borderRadius']),
+      borderColor: getIn(theme, ['UTTable', 'row', 'borderColor']),
+      borderStyle: getIn(theme, ['UTTable', 'row', 'borderStyle'], 'solid')
+    },
+    firstRow: {
+      borderTopLeftRadius: withImportant(theme === null || theme === void 0 || (_theme$UTTable7 = theme.UTTable) === null || _theme$UTTable7 === void 0 || (_theme$UTTable7 = _theme$UTTable7.table) === null || _theme$UTTable7 === void 0 ? void 0 : _theme$UTTable7.borderRadius),
+      borderTopRightRadius: withImportant(theme === null || theme === void 0 || (_theme$UTTable8 = theme.UTTable) === null || _theme$UTTable8 === void 0 || (_theme$UTTable8 = _theme$UTTable8.table) === null || _theme$UTTable8 === void 0 ? void 0 : _theme$UTTable8.borderRadius)
+    },
+    lastRow: {
+      borderBottomRightRadius: withImportant(theme === null || theme === void 0 || (_theme$UTTable9 = theme.UTTable) === null || _theme$UTTable9 === void 0 || (_theme$UTTable9 = _theme$UTTable9.table) === null || _theme$UTTable9 === void 0 ? void 0 : _theme$UTTable9.borderRadius),
+      borderBottomLeftRadius: withImportant(theme === null || theme === void 0 || (_theme$UTTable0 = theme.UTTable) === null || _theme$UTTable0 === void 0 || (_theme$UTTable0 = _theme$UTTable0.table) === null || _theme$UTTable0 === void 0 ? void 0 : _theme$UTTable0.borderRadius)
+    },
+    rowCell: {
+      color: getIn(theme, ['UTTable', 'rowCell', 'color']),
+      fontSize: getIn(theme, ['UTTable', 'rowCell', 'fontSize'], getIn(theme, ['Fonts', 'medium'])),
+      fontWeight: getIn(theme, ['UTTable', 'rowCell', 'fontWeight'])
+    },
+    responsiveCell: {
+      borderColor: getIn(theme, ['UTTable', 'rowCell', 'borderColor']),
+      borderStyle: getIn(theme, ['UTTable', 'rowCell', 'borderStyle'], 'solid'),
+      borderWidth: getIn(theme, ['UTTable', 'rowCell', 'borderWidth'], '1px'),
+      color: getIn(theme, ['UTTable', 'rowCell', 'color']),
+      fontSize: getIn(theme, ['UTTable', 'rowCell', 'fontSize'], getIn(theme, ['Fonts', 'medium'])),
+      fontWeight: getIn(theme, ['UTTable', 'rowCell', 'fontWeight']),
+      [tabletMobile]: {
+        fontSize: getIn(theme, ['UTTable', 'rowCell', 'tabletMobile', 'fontSize']),
+        fontWeight: getIn(theme, ['UTTable', 'rowCell', 'tabletMobile', 'fontWeight'])
+      },
+      '&:first-child': {
+        borderTopLeftRadius: withImportant(theme === null || theme === void 0 || (_theme$UTTable1 = theme.UTTable) === null || _theme$UTTable1 === void 0 || (_theme$UTTable1 = _theme$UTTable1.responsiveRow) === null || _theme$UTTable1 === void 0 ? void 0 : _theme$UTTable1.borderRadius),
+        borderTopRightRadius: withImportant(theme === null || theme === void 0 || (_theme$UTTable10 = theme.UTTable) === null || _theme$UTTable10 === void 0 || (_theme$UTTable10 = _theme$UTTable10.responsiveRow) === null || _theme$UTTable10 === void 0 ? void 0 : _theme$UTTable10.borderRadius)
+      }
+    },
+    lastCellContainer: {
+      borderBottomRightRadius: getIn(theme, ['UTTable', 'responsiveRow', 'borderRadius']),
+      borderBottomLeftRadius: getIn(theme, ['UTTable', 'responsiveRow', 'borderRadius'])
+    },
+    responsiveRow: {
+      boxShadow: getIn(theme, ['UTTable', 'responsiveRow', 'boxShadow']),
+      borderRadius: getIn(theme, ['UTTable', 'responsiveRow', 'borderRadius']),
+      overflow: 'hidden'
+    },
+    responsiveRowTopBorder: {
+      borderTopRightRadius: getIn(theme, ['UTTable', 'responsiveRow', 'borderRadius']),
+      borderTopLeftRadius: getIn(theme, ['UTTable', 'responsiveRow', 'borderRadius'])
+    },
+    rowContainerClickable: {
+      '& $fixedRowLeft, & $fixedRowRight, & $row': {
+        transition: getIn(theme, ['UTTable', 'row', 'hover', 'transition'])
+      },
+      '&:hover': {
+        '& $fixedRowLeft, & $fixedRowRight, & $row': {
+          backgroundColor: getIn(theme, ['UTTable', 'row', 'hover', 'backgroundColor'])
+        }
+      }
+    },
+    selectedResponsiveCell: {
+      boxShadow: getIn(theme, ['UTTable', 'selectedResponsiveCell', 'boxShadow'])
+    },
+    responsiveCellTitle: {
+      color: getIn(theme, ['UTTable', 'responsiveCellTitle', 'color']),
+      fontSize: getIn(theme, ['UTTable', 'responsiveCellTitle', 'fontSize'], getIn(theme, ['Fonts', 'medium'])),
+      fontWeight: getIn(theme, ['UTTable', 'responsiveCellTitle', 'fontWeight'])
+    },
+    actionCell: {
+      alignItems: getIn(theme, ['UTTable', 'actionCell', 'alignItems']),
+      color: getIn(theme, ['UTTable', 'actionCell', 'color']),
+      fontSize: getIn(theme, ['UTTable', 'actionCell', 'fontSize'], getIn(theme, ['Fonts', 'medium'])),
+      fontWeight: getIn(theme, ['UTTable', 'actionCell', 'fontWeight']),
+      borderColor: getIn(theme, ['UTTable', 'rowCell', 'borderColor']),
+      borderStyle: getIn(theme, ['UTTable', 'rowCell', 'borderStyle'], 'solid'),
+      borderWidth: withImportant((theme === null || theme === void 0 || (_theme$UTTable11 = theme.UTTable) === null || _theme$UTTable11 === void 0 || (_theme$UTTable11 = _theme$UTTable11.rowCell) === null || _theme$UTTable11 === void 0 ? void 0 : _theme$UTTable11.borderWidth) || '1px')
+    },
+    categoryNameCell: {
+      backgroundColor: getIn(theme, ['UTTable', 'categoryNameCell', 'backgroundColor'], Colors.white),
+      fontSize: getIn(theme, ['UTTable', 'categoryNameCell', 'fontSize'], getIn(theme, ['Fonts', 'medium'])),
+      fontWeight: getIn(theme, ['UTTable', 'categoryNameCell', 'fontWeight'])
+    },
+    firstFixedRowLeft: {
+      borderTopLeftRadius: withImportant("".concat(theme === null || theme === void 0 || (_theme$UTTable12 = theme.UTTable) === null || _theme$UTTable12 === void 0 || (_theme$UTTable12 = _theme$UTTable12.table) === null || _theme$UTTable12 === void 0 ? void 0 : _theme$UTTable12.borderRadius, "px"))
+    },
+    lastFixedRowLeft: {
+      borderBottomLeftRadius: withImportant("".concat(theme === null || theme === void 0 || (_theme$UTTable13 = theme.UTTable) === null || _theme$UTTable13 === void 0 || (_theme$UTTable13 = _theme$UTTable13.table) === null || _theme$UTTable13 === void 0 ? void 0 : _theme$UTTable13.borderRadius, "px"))
+    },
+    fixedRowLeft: {
+      backgroundColor: getIn(theme, ['UTTable', 'fixedRowLeft', 'backgroundColor'], getIn(theme, ['UTTable', 'row', 'backgroundColor'], Colors.white)),
+      borderColor: getIn(theme, ['UTTable', 'row', 'borderColor']),
+      borderBottomLeftRadius: getIn(theme, ['UTTable', 'row', 'borderRadius']),
+      borderTopLeftRadius: getIn(theme, ['UTTable', 'row', 'borderRadius']),
+      borderStyle: getIn(theme, ['UTTable', 'row', 'borderStyle'], 'solid'),
+      borderRightColor: getIn(theme, ['UTTable', 'row', 'fixedDivisorColor']),
+      '&$selectedRow': {
+        borderRightColor: getIn(theme, ['UTTable', 'selectedRow', 'fixedDivisorColor'])
+      },
+      boxShadow: getIn(theme, ['UTTable', 'fixedRowLeft', 'boxShadow'])
+    },
+    firstFixedRowRight: {
+      borderTopRightRadius: withImportant("".concat(theme === null || theme === void 0 || (_theme$UTTable14 = theme.UTTable) === null || _theme$UTTable14 === void 0 || (_theme$UTTable14 = _theme$UTTable14.table) === null || _theme$UTTable14 === void 0 ? void 0 : _theme$UTTable14.borderRadius, "px"))
+    },
+    lastFixedRowRight: {
+      borderTopRightRadius: withImportant("".concat(theme === null || theme === void 0 || (_theme$UTTable15 = theme.UTTable) === null || _theme$UTTable15 === void 0 || (_theme$UTTable15 = _theme$UTTable15.table) === null || _theme$UTTable15 === void 0 ? void 0 : _theme$UTTable15.borderRadius, "px"))
+    },
+    fixedRowRight: {
+      backgroundColor: getIn(theme, ['UTTable', 'fixedRowRight', 'backgroundColor'], getIn(theme, ['UTTable', 'row', 'backgroundColor'], Colors.white)),
+      borderColor: getIn(theme, ['UTTable', 'row', 'borderColor']),
+      borderBottomRightRadius: getIn(theme, ['UTTable', 'row', 'borderRadius']),
+      borderTopRightRadius: getIn(theme, ['UTTable', 'row', 'borderRadius']),
+      borderStyle: getIn(theme, ['UTTable', 'row', 'borderStyle'], 'solid'),
+      borderLeftColor: getIn(theme, ['UTTable', 'row', 'fixedDivisorColor']),
+      '&$selectedRow': {
+        borderLeftColor: getIn(theme, ['UTTable', 'selectedRow', 'fixedDivisorColor'])
+      },
+      boxShadow: getIn(theme, ['UTTable', 'fixedRowRight', 'boxShadow'])
+    },
+    selectedRow: {
+      backgroundColor: getIn(theme, ['UTTable', 'selectedRow', 'backgroundColor']),
+      borderBottomColor: getIn(theme, ['UTTable', 'selectedRow', 'borderBottomColor'])
+    },
+    navigationButton: {
+      backgroundColor: getIn(theme, ['UTTable', 'navigationButton', 'backgroundColor'], Colors.lightBlue),
+      border: getIn(theme, ['UTTable', 'navigationButton', 'border']),
+      borderRadius: getIn(theme, ['UTTable', 'navigationButton', 'borderRadius']),
+      color: getIn(theme, ['UTTable', 'navigationButton', 'color'], Colors.white),
+      fontSize: getIn(theme, ['UTTable', 'navigationButton', 'fontSize'], getIn(theme, ['Fonts', 'medium'])),
+      fontWeight: getIn(theme, ['UTTable', 'navigationButton', 'fontWeight']),
+      height: getIn(theme, ['UTTable', 'navigationButton', 'height'], '30px'),
+      minWidth: getIn(theme, ['UTTable', 'navigationButton', 'minWidth'], '30px'),
+      padding: getIn(theme, ['UTTable', 'navigationButton', 'padding'], '0 8px'),
+      '& path': {
+        fill: getIn(theme, ['UTTable', 'navigationButton', 'color'])
+      }
+    },
+    navigationButtonLeft: {
+      margin: getIn(theme, ['UTTable', 'navigationButtonLeft', 'margin'])
+    },
+    navigationButtonRight: {
+      margin: getIn(theme, ['UTTable', 'navigationButtonRight', 'margin'])
+    },
+    navigationButtonDisabled: {
+      backgroundColor: getIn(theme, ['UTTable', 'navigationButtonDisabled', 'backgroundColor']),
+      border: getIn(theme, ['UTTable', 'navigationButtonDisabled', 'border']),
+      color: getIn(theme, ['UTTable', 'navigationButtonDisabled', 'color']),
+      opacity: getIn(theme, ['UTTable', 'navigationButtonDisabled', 'opacity'])
+    },
+    navigationArrow: {
+      height: getIn(theme, ['UTTable', 'navigationArrow', 'height'], 10)
+    },
+    pageButton: {
+      backgroundColor: getIn(theme, ['UTTable', 'pageButton', 'backgroundColor']),
+      border: getIn(theme, ['UTTable', 'pageButton', 'border']),
+      borderRadius: getIn(theme, ['UTTable', 'pageButton', 'borderRadius']),
+      color: getIn(theme, ['UTTable', 'pageButton', 'color']),
+      fontSize: getIn(theme, ['UTTable', 'pageButton', 'fontSize'], '12px'),
+      fontWeight: getIn(theme, ['UTTable', 'pageButton', 'fontWeight']),
+      height: getIn(theme, ['UTTable', 'pageButton', 'height'], '30px'),
+      margin: getIn(theme, ['UTTable', 'pageButton', 'margin'], '0 4px'),
+      transition: getIn(theme, ['UTTable', 'pageButton', 'transition'], 'all .4s'),
+      width: getIn(theme, ['UTTable', 'pageButton', 'width'], '30px'),
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTTable', 'pageButton', 'hover', 'backgroundColor'], Colors.disabledGray),
+        color: getIn(theme, ['UTTable', 'pageButton', 'hover', 'color']),
+        border: getIn(theme, ['UTTable', 'pageButton', 'hover', 'border'])
+      }
+    },
+    pageButtonSelected: {
+      backgroundColor: getIn(theme, ['UTTable', 'pageButtonSelected', 'backgroundColor'], Colors.disabledGray),
+      border: getIn(theme, ['UTTable', 'pageButtonSelected', 'border']),
+      color: getIn(theme, ['UTTable', 'pageButtonSelected', 'color']),
+      fontSize: getIn(theme, ['UTTable', 'pageButtonSelected', 'fontSize']),
+      height: getIn(theme, ['UTTable', 'pageButtonSelected', 'height']),
+      margin: getIn(theme, ['UTTable', 'pageButtonSelected', 'margin']),
+      width: getIn(theme, ['UTTable', 'pageButtonSelected', 'width'])
+    },
+    reloadIcon: {
+      padding: getIn(theme, ['UTTable', 'reloadIcon', 'padding']),
+      '& use': {
+        fill: getIn(theme, ['UTTable', 'reloadIcon', 'color'])
+      },
+      '& path': {
+        fill: getIn(theme, ['UTTable', 'reloadIcon', 'color'])
+      }
+    },
+    reloadButton: {
+      marginLeft: getIn(theme, ['UTTable', 'reloadButton', 'marginLeft'], 10)
+    },
+    reloadButtonDisabled: {
+      opacity: getIn(theme, ['UTTable', 'reloadButtonDisabled', 'opacity']),
+      pointerEvents: 'none'
+    },
+    tableTitle: {
+      color: withImportant(theme === null || theme === void 0 || (_theme$UTTable16 = theme.UTTable) === null || _theme$UTTable16 === void 0 || (_theme$UTTable16 = _theme$UTTable16.tableTitle) === null || _theme$UTTable16 === void 0 ? void 0 : _theme$UTTable16.color),
+      fontSize: withImportant(theme === null || theme === void 0 || (_theme$UTTable17 = theme.UTTable) === null || _theme$UTTable17 === void 0 || (_theme$UTTable17 = _theme$UTTable17.tableTitle) === null || _theme$UTTable17 === void 0 ? void 0 : _theme$UTTable17.fontSize),
+      fontWeight: withImportant(theme === null || theme === void 0 || (_theme$UTTable18 = theme.UTTable) === null || _theme$UTTable18 === void 0 || (_theme$UTTable18 = _theme$UTTable18.tableTitle) === null || _theme$UTTable18 === void 0 ? void 0 : _theme$UTTable18.fontWeight)
+    },
+    headerContainer: {
+      margin: getIn(theme, ['UTTable', 'headerContainer', 'margin'])
+    },
+    totalRowsLabel: {
+      color: withImportant(theme === null || theme === void 0 || (_theme$UTTable19 = theme.UTTable) === null || _theme$UTTable19 === void 0 || (_theme$UTTable19 = _theme$UTTable19.tableTitle) === null || _theme$UTTable19 === void 0 ? void 0 : _theme$UTTable19.color),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTTable20 = theme.UTTable) === null || _theme$UTTable20 === void 0 || (_theme$UTTable20 = _theme$UTTable20.tableTitle) === null || _theme$UTTable20 === void 0 ? void 0 : _theme$UTTable20.fontSize) || '14px'),
+      fontWeight: withImportant(theme === null || theme === void 0 || (_theme$UTTable21 = theme.UTTable) === null || _theme$UTTable21 === void 0 || (_theme$UTTable21 = _theme$UTTable21.tableTitle) === null || _theme$UTTable21 === void 0 ? void 0 : _theme$UTTable21.fontWeight)
+    },
+    pageSizeSelect: {
+      fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+      fontSize: getIn(theme, ['UTTable', 'pageSizeSelect', 'fontSize']),
+      padding: getIn(theme, ['UTTable', 'pageSizeSelect', 'padding'], 6),
+      textAlign: getIn(theme, ['UTTable', 'pageSizeSelect', 'textAlign'])
+    },
+    pageSizeSelectContainer: {
+      '& fieldset': {
+        border: getIn(theme, ['UTTable', 'pageSizeSelect', 'border'], "1px solid ".concat(Colors.gray3))
+      },
+      '&:hover fieldset': {
+        border: getIn(theme, ['UTTable', 'pageSizeSelect', 'hover', 'border'], "1px solid ".concat(Colors.gray2))
+      }
+    },
+    noResultsContainer: {
+      backgroundColor: getIn(theme, ['UTTable', 'noResultsContainer', 'backgroundColor'], getIn(theme, ['UTTable', 'header', 'backgroundColor'], Colors.gray3)),
+      border: getIn(theme, ['UTTable', 'noResultsContainer', 'border']),
+      borderRadius: getIn(theme, ['UTTable', 'noResultsContainer', 'borderRadius'], getIn(theme, ['UTTable', 'header', 'borderRadius'])),
+      height: getIn(theme, ['UTTable', 'noResultsContainer', 'height'], 200)
+    },
+    noResultsLabel: {
+      color: withImportant(theme === null || theme === void 0 || (_theme$UTTable22 = theme.UTTable) === null || _theme$UTTable22 === void 0 || (_theme$UTTable22 = _theme$UTTable22.noResultsLabel) === null || _theme$UTTable22 === void 0 ? void 0 : _theme$UTTable22.color),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTTable23 = theme.UTTable) === null || _theme$UTTable23 === void 0 || (_theme$UTTable23 = _theme$UTTable23.noResultsLabel) === null || _theme$UTTable23 === void 0 ? void 0 : _theme$UTTable23.fontSize) || '14px'),
+      fontWeight: withImportant(theme === null || theme === void 0 || (_theme$UTTable24 = theme.UTTable) === null || _theme$UTTable24 === void 0 || (_theme$UTTable24 = _theme$UTTable24.noResultsLabel) === null || _theme$UTTable24 === void 0 ? void 0 : _theme$UTTable24.fontWeight)
+    },
+    checkBoxRoot: {
+      color: getIn(theme, ['UTTable', 'checkbox', 'root', 'color'])
+    },
+    checkboxColorChecked: {
+      color: withImportant(theme === null || theme === void 0 || (_theme$UTTable25 = theme.UTTable) === null || _theme$UTTable25 === void 0 || (_theme$UTTable25 = _theme$UTTable25.checkbox) === null || _theme$UTTable25 === void 0 || (_theme$UTTable25 = _theme$UTTable25.selected) === null || _theme$UTTable25 === void 0 ? void 0 : _theme$UTTable25.color)
+    },
+    tableLoading: {
+      backgroundColor: getIn(theme, ['UTTable', 'checkbox', 'backgroundColor'], getIn(theme, ['UTTable', 'header', 'backgroundColor'], Colors.white))
+    },
+    headerDecoratorSelected: {
+      '&:before': {
+        backgroundColor: getIn(theme, ['UTTable', 'headerDecorator', 'root', 'color'])
+      }
+    },
+    headerDecoratorUnselected: {
+      '&:before': {
+        backgroundColor: getIn(theme, ['UTTable', 'headerDecorator', 'unSelected', 'color'], Colors.gray3)
+      }
+    },
+    actionLoading: {
+      color: getIn(theme, ['Loading', 'base', 'color'], Colors.loadingBase)
+    },
+    actionIcon: {
+      color: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['05']) || theme.Palette.neutral['05'],
+      fill: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.neutral['05']) || theme.Palette.neutral['05']
+    },
+    actionIconButton: {
+      '&:hover': {
+        backgroundColor: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.neutral['01']) || theme.Palette.neutral['01']
+      }
+    }
+  };
+};

package/dist/esm/components/UTTable/types.js

@@ -0,0 +1,44 @@
+import { arrayOf, bool, elementType, func, number, objectOf, object, oneOfType, shape, string } from 'prop-types';
+export const columnType = shape({
+  cellRenderer: func,
+  key: string,
+  name: string,
+  position: string,
+  size: string,
+  sortable: bool,
+  type: string,
+  categoryName: string,
+  actions: arrayOf(shape({
+    icon: elementType,
+    tooltip: string,
+    onClick: func,
+    loading: bool
+  }))
+});
+export const columnsType = arrayOf(columnType);
+export const classesType = shape({
+  table: string,
+  header: string,
+  headerCellHover: string,
+  headerActiveCell: string,
+  scrollbar: string,
+  fixedHeaderRowLeft: string,
+  fixedHeaderRowRight: string,
+  row: string,
+  fixedRowRight: string,
+  checkBox: string,
+  navigationButton: string,
+  navigationButtonDisabled: string,
+  navigationArrow: string,
+  pageButton: string,
+  pageButtonSelected: string,
+  reloadIcon: string,
+  reloadButton: string,
+  tableTitle: string,
+  totalRowsLabel: string,
+  actionIconButton: string,
+  actionIcon: string,
+  checkBoxRoot: string,
+  checkboxColorPrimary: string
+});
+export const columnSizesType = oneOfType([objectOf(string), objectOf(number), object]);

package/dist/esm/components/UTTable/utils.js

@@ -0,0 +1,186 @@
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import { INTEGRATION_TYPES } from '../../constants/UTTable';
+import { getPageSizeOptions } from './components/TableFooter/components/PageSizeSelector/utils';
+import { ROW_SIDE_PADDING, ROW_PADDING, ROW_SPACING, ROWS_BORDER_SIZE, CELL_SIDE_PADDING, CELL_TYPES, COLUMN_POSITION, COLUMN_SIZES } from './constants';
+export const getColumnDefinition = (columnns, isResponsive) => {
+  const secondaryColumns = [];
+  const primaryActions = [];
+  const secondaryActions = [];
+  const fixedLeftColumns = [];
+  const fixedRightColumns = [];
+  columnns.forEach(column => {
+    if (isResponsive) {
+      if (column.type === CELL_TYPES.ACTION_BUTTON) {
+        primaryActions.push(column);
+      } else if (column.type === CELL_TYPES.ACTION_ICONS) {
+        secondaryActions.push(column);
+      } else {
+        secondaryColumns.push(column);
+      }
+    } else if (column.position === COLUMN_POSITION.LEFT) {
+      fixedLeftColumns.push(column);
+    } else if (column.position === COLUMN_POSITION.RIGHT) {
+      fixedRightColumns.push(column);
+    } else {
+      secondaryColumns.push(column);
+    }
+  });
+  return {
+    secondaryColumns,
+    primaryActions,
+    secondaryActions,
+    fixedLeftColumns,
+    fixedRightColumns
+  };
+};
+export const customSort = (a, b, order) => {
+  const firstValue = a[order.key] || '';
+  const secondValue = b[order.key] || '';
+  if (firstValue < secondValue) return order.direction === 'asc' ? -1 : 1;
+  if (firstValue > secondValue) return order.direction === 'asc' ? 1 : -1;
+  return 0;
+};
+export const orderRows = (rows, order, defaultRows, columns) => {
+  if (objectIsEmpty(order)) return defaultRows;
+  const ordererRows = [...rows];
+  const sortFunction = columns.find(_ref => {
+    let {
+      key
+    } = _ref;
+    return key === order.key;
+  }).customSort || customSort;
+  ordererRows.sort((a, b) => sortFunction(a, b, order));
+  return ordererRows;
+};
+export const getCurrentRows = (rows, currentPage, rowsPerPage) => {
+  const initialIndex = currentPage * rowsPerPage;
+  const lastIndex = (currentPage + 1) * rowsPerPage;
+  return rows.slice(initialIndex, lastIndex);
+};
+export const createRowStyles = (rowPadding, rowSpacing, headerPadding, isResponsive) => {
+  const margin = ROW_SPACING[rowSpacing] || ROW_SPACING.none;
+  const paddingValue = ROW_PADDING[rowPadding] || ROW_PADDING.small;
+  const headerPaddingValue = ROW_PADDING[headerPadding] || ROW_PADDING.medium;
+  const borderRadius = margin === ROW_SPACING.none && 0;
+  return {
+    fixedRowsLeft: {
+      borderRadius,
+      borderWidth: "".concat(ROWS_BORDER_SIZE, "px"),
+      paddingLeft: CELL_SIDE_PADDING
+    },
+    fixedRowsRight: {
+      borderRadius,
+      borderWidth: "".concat(ROWS_BORDER_SIZE, "px"),
+      paddingRight: CELL_SIDE_PADDING
+    },
+    rowBorderTop: {
+      borderTopWidth: "".concat(ROWS_BORDER_SIZE, "px"),
+      left: ROW_SIDE_PADDING,
+      marginTop: margin,
+      marginBottom: "-".concat(ROWS_BORDER_SIZE, "px"),
+      width: "calc(100% - ".concat(ROW_SIDE_PADDING * 2, "px)")
+    },
+    rowBorderBottom: {
+      borderTopWidth: "".concat(ROWS_BORDER_SIZE, "px"),
+      left: ROW_SIDE_PADDING,
+      marginTop: "-".concat(ROWS_BORDER_SIZE, "px"),
+      width: "calc(100% - ".concat(ROW_SIDE_PADDING * 2, "px)")
+    },
+    cell: {
+      paddingBottom: paddingValue,
+      paddingLeft: CELL_SIDE_PADDING,
+      paddingRight: CELL_SIDE_PADDING,
+      paddingTop: paddingValue
+    },
+    headerCell: {
+      paddingBottom: headerPaddingValue,
+      paddingLeft: CELL_SIDE_PADDING,
+      paddingRight: CELL_SIDE_PADDING,
+      paddingTop: headerPaddingValue
+    },
+    rowBackground: {
+      borderRadius,
+      borderBottomWidth: "".concat(ROWS_BORDER_SIZE, "px"),
+      borderTopWidth: "".concat(ROWS_BORDER_SIZE, "px"),
+      borderLeftWidth: 0,
+      borderRightWidth: 0
+    },
+    rowContainer: {
+      marginBottom: margin,
+      marginTop: margin
+    },
+    headerRowContainer: {
+      marginTop: 0
+    },
+    selectCell: {
+      paddingBottom: paddingValue,
+      paddingLeft: isResponsive ? 0 : CELL_SIDE_PADDING,
+      paddingRight: CELL_SIDE_PADDING,
+      paddingTop: paddingValue
+    },
+    responsiveCell: {
+      padding: CELL_SIDE_PADDING
+    }
+  };
+};
+export const getSelectableRowIds = (rows, rowKey, disableRowSelection) => (disableRowSelection ? rows.filter(_row => !disableRowSelection(_row)) : rows).map(_row => _row[rowKey]);
+export const getInitialValidRowsPerPage = (externalOption, originalOptions, data, integrationType, totalRows) => {
+  if (externalOption === undefined) return originalOptions[0];
+  const options = getPageSizeOptions(originalOptions, integrationType === INTEGRATION_TYPES.EXTERNAL ? totalRows : data.length).map(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value;
+  });
+  return options.includes(externalOption) ? externalOption : options[0];
+};
+export const getInitialValidPage = (externalPage, rowsPerPage, data, integrationType) => integrationType === INTEGRATION_TYPES.EXTERNAL ? externalPage : externalPage === undefined || Math.floor(data.length / rowsPerPage) < externalPage ? 0 : externalPage;
+export const getColumnsSizes = _ref3 => {
+  let {
+    columns,
+    fitColumnsWidth,
+    selectable
+  } = _ref3;
+  const columnSizes = {};
+  if (fitColumnsWidth) {
+    let columnsFullSize = 0;
+    let leftColumnsSize = selectable ? 54 : 0;
+    let secondaryColumnsSize = 0;
+    let rightColumnsSize = 0;
+    columns.forEach(_ref4 => {
+      let {
+        position,
+        size
+      } = _ref4;
+      const columnSize = COLUMN_SIZES[size] || COLUMN_SIZES.medium;
+      columnsFullSize += columnSize;
+      if (position === COLUMN_POSITION.LEFT) leftColumnsSize += columnSize;else if (position === COLUMN_POSITION.RIGHT) rightColumnsSize += columnSize;else secondaryColumnsSize += columnSize;
+    });
+    columns.forEach(_ref5 => {
+      let {
+        key,
+        position,
+        size
+      } = _ref5;
+      const columnSize = COLUMN_SIZES[size] || COLUMN_SIZES.medium;
+      const finalSize = columnSize * 100 / (position === COLUMN_POSITION.LEFT ? leftColumnsSize : position === COLUMN_POSITION.RIGHT ? rightColumnsSize : secondaryColumnsSize);
+      columnSizes[key] = "".concat(finalSize, "%");
+    });
+    columnSizes.leftColumnsSize = "".concat(leftColumnsSize * 100 / columnsFullSize, "%");
+    columnSizes.secondaryColumnsSize = "".concat(secondaryColumnsSize * 100 / columnsFullSize, "%");
+    columnSizes.rightColumnsSize = "".concat(rightColumnsSize * 100 / columnsFullSize, "%");
+  } else {
+    columns.forEach(_ref6 => {
+      let {
+        key,
+        size
+      } = _ref6;
+      columnSizes[key] = COLUMN_SIZES[size] || COLUMN_SIZES.medium;
+    });
+    columnSizes.leftColumnsSize = 'auto';
+    columnSizes.secondaryColumnsSize = 'auto';
+    columnSizes.rightColumnsSize = 'auto';
+  }
+  return columnSizes;
+};
+export const getEnabledHeader = columns => columns.some(column => column.name);

package/dist/esm/components/UTTabs/components/TooltipTab/index.js

@@ -0,0 +1,43 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo } from 'react';
+import { bool, func, string, object } from 'prop-types';
+import UTTooltip from '../../../UTTooltip';
+import { refType } from '../../../../types/commonTypes';
+import styles from './styles.module.scss';
+const TooltipTab = _ref => {
+  let {
+    children,
+    buttonRef,
+    className,
+    isDisabled,
+    onClick,
+    tooltip,
+    tooltipProps = {},
+    ...props
+  } = _ref;
+  const tippyProps = {
+    appendTo: () => document.body,
+    interactive: false,
+    ...tooltipProps
+  };
+  const handleClick = event => {
+    if (!isDisabled) onClick(event);
+  };
+  return /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip,
+    tippyProps: tippyProps
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    className: "".concat(className, " ").concat(styles.button),
+    ref: buttonRef,
+    onClick: handleClick
+  }, props), children));
+};
+TooltipTab.propTypes = {
+  buttonRef: refType,
+  className: string,
+  isDisabled: bool,
+  onClick: func,
+  tooltip: string,
+  tooltipProps: object
+};
+export default /*#__PURE__*/memo(TooltipTab);

package/dist/esm/components/UTTabs/components/TooltipTab/styles.module.scss

@@ -0,0 +1,3 @@
+.button {
+  pointer-events: auto !important;
+}

package/dist/esm/components/UTTabs/constants.js

@@ -0,0 +1,10 @@
+export const DEFAULT_TABS_PROPS = {
+  variant: 'fullWidth',
+  orientation: 'horizontal'
+};
+export const variants = {
+  BASE: 'base',
+  SECONDARY: 'secondary'
+};
+export const DEFAULT_VARIANT = variants.BASE;
+export const DEFAULT_TAB_COMPONENT = 'button';