@jobber/components 2.92.3 → 2.93.1

package/CHANGELOG.md

@@ -8,6 +8,26 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.93.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.93.0...@jobber/components@2.93.1) (2023-01-19)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+# [2.93.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.92.3...@jobber/components@2.93.0) (2023-01-17)
+
+
+### Features
+
+* **components:** Add empty state behavior to DataTable component in Atlantis [JOB-58935] ([#973](https://github.com/GetJobber/atlantis/issues/973)) ([5d2882e](https://github.com/GetJobber/atlantis/commit/5d2882ecdf0f66435d44ed53c9c5b70fc89ef972))
+* **components:** Implement the new sorting behavior / alignment to DataTable component in Atlantis [JOB-58028] ([#972](https://github.com/GetJobber/atlantis/issues/972)) ([259b11a](https://github.com/GetJobber/atlantis/commit/259b11a82ef7f36c15f854a49aa52e8a9c72a295))
+
+
+
+
+
 ## [2.92.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.92.2...@jobber/components@2.92.3) (2023-01-12)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Autocomplete/index.js

@@ -8,18 +8,18 @@ var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var classnames = require('classnames');
 var useEventListener = require('@use-it/event-listener');
-var Text = require('../Text-545e4ca6.js');
+var Text = require('../Text-c317e805.js');
 var Icon = require('../Icon-d5ad1a6d.js');
-var Heading = require('../Heading-376e63db.js');
-var InputText = require('../InputText-516a47cb.js');
-require('../Typography-f074f3ec.js');
+var Heading = require('../Heading-36fd27db.js');
+var InputText = require('../InputText-8951021c.js');
+require('../Typography-c8df6609.js');
 require('@jobber/design');
-require('../FormField-24637bbf.js');
+require('../FormField-4ef1dd6b.js');
 require('uuid');
 require('react-hook-form');
-require('../Button-1ce94a21.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
-require('../InputValidation-525d69b1.js');
+require('../InputValidation-c9309e0a.js');
 require('framer-motion');
 require('../Spinner-18d3dee6.js');
 

package/dist/Banner/index.js

@@ -8,10 +8,10 @@ var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var Icon = require('../Icon-d5ad1a6d.js');
-var Text = require('../Text-545e4ca6.js');
-var Button = require('../Button-1ce94a21.js');
+var Text = require('../Text-c317e805.js');
+var Button = require('../Button-d0f7848a.js');
 require('@jobber/design');
-require('../Typography-f074f3ec.js');
+require('../Typography-c8df6609.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Button/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-1ce94a21.js');
+var Button = require('../Button-d0f7848a.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');
@@ -10,7 +10,7 @@ require('react-router-dom');
 require('../style-inject.es-dcee06b6.js');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Typography-f074f3ec.js');
+require('../Typography-c8df6609.js');
 
 
 

package/dist/{Button-1ce94a21.js → Button-d0f7848a.js}

@@ -6,7 +6,7 @@ var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var Icon = require('./Icon-d5ad1a6d.js');
-var Typography = require('./Typography-f074f3ec.js');
+var Typography = require('./Typography-c8df6609.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/ButtonDismiss/index.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-2def7db7.js');
+var ButtonDismiss = require('../ButtonDismiss-6d3608f5.js');
 require('react');
-require('../Button-1ce94a21.js');
+require('../Button-d0f7848a.js');
 require('../tslib.es6-5b50eb8e.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-dcee06b6.js');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Typography-f074f3ec.js');
+require('../Typography-c8df6609.js');
 
 
 

package/dist/{ButtonDismiss-2def7db7.js → ButtonDismiss-6d3608f5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Button = require('./Button-1ce94a21.js');
+var Button = require('./Button-d0f7848a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Card/index.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-38847ea6.js');
+var Card = require('../Card-0e6fde03.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
-require('../Typography-f074f3ec.js');
+require('../Typography-c8df6609.js');
 
 
 

package/dist/{Card-38847ea6.js → Card-0e6fde03.js}

@@ -4,7 +4,7 @@ var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Typography = require('./Typography-f074f3ec.js');
+var Typography = require('./Typography-c8df6609.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Checkbox/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-db1d6ee2.js');
+var Checkbox = require('../Checkbox-4624199c.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Text-545e4ca6.js');
-require('../Typography-f074f3ec.js');
+require('../Text-c317e805.js');
+require('../Typography-c8df6609.js');
 require('../tslib.es6-5b50eb8e.js');
 
 

package/dist/{Checkbox-db1d6ee2.js → Checkbox-4624199c.js}

@@ -4,7 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var Icon = require('./Icon-d5ad1a6d.js');
-var Text = require('./Text-545e4ca6.js');
+var Text = require('./Text-c317e805.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -9,13 +9,13 @@ var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var jobberHooks = require('@jobber/hooks');
 var Icon = require('../Icon-d5ad1a6d.js');
 var Avatar = require('../Avatar-cfd04e86.js');
-var Typography = require('../Typography-f074f3ec.js');
-var Tooltip = require('../Tooltip-297c53a6.js');
+var Typography = require('../Typography-c8df6609.js');
+var Tooltip = require('../Tooltip-443889d8.js');
 var uuid = require('uuid');
 var lodash = require('lodash');
 var reactPopper = require('react-popper');
-var Text = require('../Text-545e4ca6.js');
-var Button = require('../Button-1ce94a21.js');
+var Text = require('../Text-c317e805.js');
+var Button = require('../Button-d0f7848a.js');
 var Spinner = require('../Spinner-18d3dee6.js');
 require('@jobber/design');
 require('color');

package/dist/ConfirmationModal/index.js

@@ -2,27 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-1bf04e58.js');
+var ConfirmationModal = require('../ConfirmationModal-474b3dbb.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('@jobber/hooks');
-require('../Modal-3a29ecf7.js');
+require('../Modal-1f7e7433.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
 require('../style-inject.es-dcee06b6.js');
-require('../Typography-f074f3ec.js');
-require('../Button-1ce94a21.js');
+require('../Typography-c8df6609.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../ButtonDismiss-2def7db7.js');
+require('../ButtonDismiss-6d3608f5.js');
 require('../Content-18de5fbb.js');
-require('../Markdown-0c673d3c.js');
+require('../Markdown-edd7468b.js');
 require('react-markdown');
-require('../Text-545e4ca6.js');
-require('../Emphasis-10916399.js');
-require('../Heading-376e63db.js');
+require('../Text-c317e805.js');
+require('../Emphasis-391519b1.js');
+require('../Heading-36fd27db.js');
 
 
 

package/dist/{ConfirmationModal-1bf04e58.js → ConfirmationModal-474b3dbb.js}

@@ -3,9 +3,9 @@
 var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
-var Modal = require('./Modal-3a29ecf7.js');
+var Modal = require('./Modal-1f7e7433.js');
 var Content = require('./Content-18de5fbb.js');
-var Markdown = require('./Markdown-0c673d3c.js');
+var Markdown = require('./Markdown-edd7468b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataDump/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-38847ea6.js');
+var Card = require('../Card-0e6fde03.js');
 var Content = require('../Content-18de5fbb.js');
-var Emphasis = require('../Emphasis-10916399.js');
+var Emphasis = require('../Emphasis-391519b1.js');
 require('../tslib.es6-5b50eb8e.js');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
-require('../Typography-f074f3ec.js');
+require('../Typography-c8df6609.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataTable/Body.d.ts

@@ -1,7 +1,10 @@
 import { Row, Table } from "@tanstack/react-table";
+import { ReactNode } from "react";
 interface BodyProps<T> {
     table: Table<T>;
     onRowClick?: (row: Row<T>) => void;
+    height?: number;
+    emptyState?: ReactNode | ReactNode[];
 }
-export declare function Body<T extends object>({ table, onRowClick }: BodyProps<T>): JSX.Element;
+export declare function Body<T extends object>({ table, onRowClick, emptyState, }: BodyProps<T>): JSX.Element;
 export {};

package/dist/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { ColumnDef, Row } from "@tanstack/react-table";
+import { ReactNode } from "react";
 import { PaginationType, SortingType } from "./types";
 export interface DataTableProps<T> {
     /**
@@ -44,5 +45,9 @@ export interface DataTableProps<T> {
      * Enables row click action. The provided callback will be executed when the row is clicked.
      */
     onRowClick?: (row: Row<T>) => void;
+    /**
+     * The elements to display when the data table is empty
+     */
+    emptyState?: ReactNode | ReactNode[];
 }
-export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, }: DataTableProps<T>): JSX.Element;
+export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }: DataTableProps<T>): JSX.Element;

package/dist/DataTable/SortIcon.d.ts

@@ -0,0 +1,10 @@
+export declare enum SortDirection {
+    ascending = 0,
+    descending = 1,
+    equilibrium = 2
+}
+interface SortIconProps {
+    direction: SortDirection;
+}
+export declare function SortIcon({ direction }: SortIconProps): JSX.Element;
+export {};

package/dist/DataTable/index.js

@@ -8,19 +8,19 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Option = require('../Option-0b03aaa2.js');
-var Button = require('../Button-1ce94a21.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-require('../FormField-24637bbf.js');
+var Option = require('../Option-5ebb2e0d.js');
+var Button = require('../Button-d0f7848a.js');
+var Text = require('../Text-c317e805.js');
+require('../FormField-4ef1dd6b.js');
 require('uuid');
 require('react-hook-form');
-require('../Text-545e4ca6.js');
-require('../Typography-f074f3ec.js');
-require('../InputValidation-525d69b1.js');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../InputValidation-c9309e0a.js');
 require('framer-motion');
 require('../Spinner-18d3dee6.js');
 require('react-router-dom');
-require('@jobber/design');
+require('../Typography-c8df6609.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,20 +46,20 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
 
-var css$2 = "._1gVnBnwO8rEyN5yXaSAnJz {\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n._2FsiaQmYMKjm0oAa_Dm7Jv {\n  overflow: auto;\n}\n\n._2EflglZd2SRwkv61KFJrg9 {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th {\n  padding: var(--space-base);\n  border-bottom: var(--border-base) solid var(--color-border);\n  color: var(--color-heading);\n  white-space: nowrap;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr:last-child {\n  border-bottom: none;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr td {\n  padding: var(--space-base);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tfoot {\n  position: sticky;\n  z-index: 1;\n  width: 100%;\n  box-shadow: var(--shadow-base);\n  border-top: var(--border-thick) solid var(--color-border);\n  background-color: var(--color-surface);\n  bottom: 0;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tfoot tr th {\n  padding: var(--space-base);\n}\n\n.QRm47JXl1pWi9jKv7PNPG thead tr th:first-child,\n.QRm47JXl1pWi9jKv7PNPG tbody tr td:first-child {\n  position: sticky;\n  left: 0;\n  z-index: 1;\n  height: calc(var(--space-largest) + var(--space-smaller));\n  background-color: var(--color-white);\n}\n\n.QRm47JXl1pWi9jKv7PNPG th:first-child::after,\n.QRm47JXl1pWi9jKv7PNPG td:first-child::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: calc(-1 * var(--space-small));\n  width: var(--space-small);\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    rgba(var(--color-black--rgb), 0.1) 0%,\n    rgba(var(--color-black--rgb), 0) 80%\n  );\n}\n\n._3VxR0m_2LtggJeSToEDE2y {\n  position: sticky;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: var(--shadow-base);\n  background-color: var(--color-white);\n}\n\n._1RROVWbMjf1ZfuVpquC4OS:first-child:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._2uM74VHCeNJuZjyD_SPXR3:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._3P5HGvBjzojCSGgtBjPjJi:hover,\n._3P5HGvBjzojCSGgtBjPjJi:hover :first-child {\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n";
-var styles$2 = {"dataTableContainer":"_1gVnBnwO8rEyN5yXaSAnJz","tableContainer":"_2FsiaQmYMKjm0oAa_Dm7Jv","table":"_2EflglZd2SRwkv61KFJrg9","pinFirstColumn":"QRm47JXl1pWi9jKv7PNPG","stickyHeader":"_3VxR0m_2LtggJeSToEDE2y","pinFirstHeaderSortable":"_1RROVWbMjf1ZfuVpquC4OS","sortableColumn":"_2uM74VHCeNJuZjyD_SPXR3","clickableRow":"_3P5HGvBjzojCSGgtBjPjJi"};
-styleInject_es.styleInject(css$2);
+var css$3 = "._1gVnBnwO8rEyN5yXaSAnJz {\n  position: relative;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n._2FsiaQmYMKjm0oAa_Dm7Jv {\n  overflow: auto;\n}\n\n._2EflglZd2SRwkv61KFJrg9 {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th {\n  padding: var(--space-base);\n  border-bottom: var(--border-base) solid var(--color-border);\n  color: var(--color-heading);\n  white-space: nowrap;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr:last-child {\n  border-bottom: none;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr td {\n  padding: var(--space-base);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tfoot {\n  position: sticky;\n  z-index: 1;\n  width: 100%;\n  box-shadow: var(--shadow-base);\n  border-top: var(--border-thick) solid var(--color-border);\n  background-color: var(--color-surface);\n  bottom: 0;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tfoot tr th {\n  padding: var(--space-base);\n}\n\n.QRm47JXl1pWi9jKv7PNPG thead tr th:first-child,\n.QRm47JXl1pWi9jKv7PNPG tbody tr td:first-child {\n  position: sticky;\n  left: 0;\n  z-index: 1;\n  height: calc(var(--space-largest) + var(--space-smaller));\n  background-color: var(--color-surface);\n}\n\n.QRm47JXl1pWi9jKv7PNPG th:first-child::after,\n.QRm47JXl1pWi9jKv7PNPG td:first-child::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: calc(-1 * var(--space-small));\n  width: var(--space-small);\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    rgba(var(--color-black--rgb), 0.1) 0%,\n    rgba(var(--color-black--rgb), 0) 80%\n  );\n}\n\n._3VxR0m_2LtggJeSToEDE2y {\n  position: sticky;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: var(--shadow-base);\n  background-color: var(--color-surface);\n}\n\n._1RROVWbMjf1ZfuVpquC4OS:first-child:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._2uM74VHCeNJuZjyD_SPXR3:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._3P5HGvBjzojCSGgtBjPjJi:hover,\n._3P5HGvBjzojCSGgtBjPjJi:hover :first-child {\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n\n._1n7mmwsIdhl2OvMBcfI1st {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  top: var(--space-largest);\n  right: 0;\n  bottom: var(--space-largest);\n  left: 0;\n  width: 100%;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$3 = {"dataTableContainer":"_1gVnBnwO8rEyN5yXaSAnJz","tableContainer":"_2FsiaQmYMKjm0oAa_Dm7Jv","table":"_2EflglZd2SRwkv61KFJrg9","pinFirstColumn":"QRm47JXl1pWi9jKv7PNPG","stickyHeader":"_3VxR0m_2LtggJeSToEDE2y","pinFirstHeaderSortable":"_1RROVWbMjf1ZfuVpquC4OS","sortableColumn":"_2uM74VHCeNJuZjyD_SPXR3","clickableRow":"_3P5HGvBjzojCSGgtBjPjJi","emptyState":"_1n7mmwsIdhl2OvMBcfI1st"};
+styleInject_es.styleInject(css$3);
 
 function Body(_a) {
     var _b;
-    var table = _a.table, onRowClick = _a.onRowClick;
-    var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$2.clickableRow] = !!onRowClick, _b));
+    var table = _a.table, onRowClick = _a.onRowClick, emptyState = _a.emptyState;
+    var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$3.clickableRow] = !!onRowClick, _b));
     var handleRowClick = React.useCallback(function (row) { return function () {
         if (onRowClick == undefined)
             return;
         onRowClick(row);
     }; }, [onRowClick]);
-    return (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
+    return table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
         return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(function (cell) {
             return (React__default["default"].createElement("td", { key: cell.id, style: {
                     width: cell.column.getSize(),
@@ -67,7 +67,7 @@ function Body(_a) {
                     maxWidth: cell.column.columnDef.maxSize,
                 } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
-    })));
+    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState));
 }
 
 function createTableSettings(data, columns, options) {
@@ -123,9 +123,9 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-var css$1 = "._1z97TFF0phXLaqvqXHnYJf {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  min-height: calc(var(--space-smaller) + var(--space-largest));\n  padding: var(--space-small) var(--space-base);\n  border-top: var(--border-base) solid var(--color-border);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._12APWOsSPQzcBXU_VtquSF {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n._36ZeprNonyJdE1RQA8egHT {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  grid-gap: var(--space-base);\n  grid-gap: var(--space-base);\n  gap: var(--space-base);\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  min-width: -webkit-fit-content;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.e6F11Aovvn4caXYkkQNRo {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n._3ACIaIFtTSOkMt-sRN5VOO {\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.JBRw_pSS6W6hGIxxLABwo {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-large);\n  grid-gap: var(--space-large);\n  gap: var(--space-large);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center\n}\n\n@media (max-width: 639px) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (max-width: 639px) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (--handhelds) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n";
-var styles$1 = {"pagination":"_1z97TFF0phXLaqvqXHnYJf","paginationInfo":"_12APWOsSPQzcBXU_VtquSF","paginationNav":"_36ZeprNonyJdE1RQA8egHT","paginationSelect":"e6F11Aovvn4caXYkkQNRo","paginationSelectLabel":"_3ACIaIFtTSOkMt-sRN5VOO","paginationButtons":"JBRw_pSS6W6hGIxxLABwo"};
-styleInject_es.styleInject(css$1);
+var css$2 = "._1z97TFF0phXLaqvqXHnYJf {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  min-height: calc(var(--space-smaller) + var(--space-largest));\n  padding: var(--space-small) var(--space-base);\n  border-top: var(--border-base) solid var(--color-border);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._12APWOsSPQzcBXU_VtquSF {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n._36ZeprNonyJdE1RQA8egHT {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  grid-gap: var(--space-base);\n  grid-gap: var(--space-base);\n  gap: var(--space-base);\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  min-width: -webkit-fit-content;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.e6F11Aovvn4caXYkkQNRo {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n._3ACIaIFtTSOkMt-sRN5VOO {\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.JBRw_pSS6W6hGIxxLABwo {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-large);\n  grid-gap: var(--space-large);\n  gap: var(--space-large);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center\n}\n\n@media (max-width: 639px) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (max-width: 639px) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (--handhelds) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n";
+var styles$2 = {"pagination":"_1z97TFF0phXLaqvqXHnYJf","paginationInfo":"_12APWOsSPQzcBXU_VtquSF","paginationNav":"_36ZeprNonyJdE1RQA8egHT","paginationSelect":"e6F11Aovvn4caXYkkQNRo","paginationSelectLabel":"_3ACIaIFtTSOkMt-sRN5VOO","paginationButtons":"JBRw_pSS6W6hGIxxLABwo"};
+styleInject_es.styleInject(css$2);
 
 var defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
 function Pagination(_a) {
@@ -135,45 +135,24 @@ function Pagination(_a) {
     var firstPosition = pageIndex * pageSize + 1;
     var secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     var itemsPerPageOptions = React.useMemo(function () { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(function (item) { return String(item); })) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
-    return (React__default["default"].createElement("div", { className: styles$1.pagination },
-        React__default["default"].createElement("div", { className: styles$1.paginationInfo }, "Showing " + firstPosition + "-" + secondPosition + " of " + totalRows + " items"),
-        React__default["default"].createElement("div", { className: styles$1.paginationNav },
-            React__default["default"].createElement("div", { className: styles$1.paginationSelect },
+    return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: styles$2.pagination },
+        React__default["default"].createElement("div", { className: styles$2.paginationInfo },
+            React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
+        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, "Showing " + firstPosition + "-" + secondPosition + " of " + totalRows + " items"),
+        React__default["default"].createElement("div", { className: styles$2.paginationNav },
+            React__default["default"].createElement("div", { className: styles$2.paginationSelect },
                 React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: function (value) {
                         table.setPageSize(Number(value));
                     }, size: "small" }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
-                React__default["default"].createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
-            React__default["default"].createElement("div", { className: styles$1.paginationButtons },
+                React__default["default"].createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
+            React__default["default"].createElement("div", { className: styles$2.paginationButtons },
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage() }),
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage() })))));
 }
 
-function Header(_a) {
-    var _b;
-    var table = _a.table, stickyHeader = _a.stickyHeader, sorting = _a.sorting, onRowClick = _a.onRowClick;
-    var stickyClass = classnames__default["default"]((_b = {}, _b[styles$2.stickyHeader] = stickyHeader, _b));
-    return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
-        var _a;
-        return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: sorting && header.column.getCanSort()
-                ? classnames__default["default"](styles$2.sortableColumn, (_a = {},
-                    _a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
-                    _a))
-                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
-                width: header.getSize(),
-                minWidth: header.column.columnDef.minSize,
-                maxWidth: header.column.columnDef.maxSize,
-            } }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
-            reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-            {
-                asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
-                desc: React__default["default"].createElement(Icon.Icon, { name: "longArrowDown", color: "green" }),
-            }[header.column.getIsSorted()]))));
-    }))); })));
-}
-
-var css = "._39TtNRcIeia0yD1gs7L70 {\n  padding: var(--space-base);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n._1AkupnXfMaD9bSt37OKKpW {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  font-weight: bold;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: start;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9,\n._2tNVzbdCh57muuCvPjItW9 * {\n  font-weight: normal;\n  text-align: end;\n}\n\n._1AkupnXfMaD9bSt37OKKpW:not(:last-child) {\n  padding-bottom: var(--space-small);\n}\n";
-var styles = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
-styleInject_es.styleInject(css);
+var css$1 = "._39TtNRcIeia0yD1gs7L70 {\n  padding: var(--space-base);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n._1AkupnXfMaD9bSt37OKKpW {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  font-weight: bold;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: start;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9,\n._2tNVzbdCh57muuCvPjItW9 * {\n  font-weight: normal;\n  text-align: end;\n}\n\n._1AkupnXfMaD9bSt37OKKpW:not(:last-child) {\n  padding-bottom: var(--space-small);\n}\n";
+var styles$1 = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
+styleInject_es.styleInject(css$1);
 
 var DesktopView = function (_a) {
     var table = _a.table;
@@ -185,11 +164,11 @@ var DesktopView = function (_a) {
 };
 var HandheldView = function (_a) {
     var table = _a.table;
-    return (React__default["default"].createElement("div", { className: styles.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
+    return (React__default["default"].createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
         .filter(function (header) { return header.column.columnDef.footer; })
-        .map(function (header, index) { return (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: styles.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: styles.mobileFooterRow, key: footerGroup.id },
+        .map(function (header, index) { return (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
         reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-        React__default["default"].createElement("div", { className: styles.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))); }))); })));
+        React__default["default"].createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))); }))); })));
 };
 var Footer = function (_a) {
     var table = _a.table, _b = _a.viewType, viewType = _b === void 0 ? "handheld" : _b;
@@ -202,25 +181,95 @@ var Footer = function (_a) {
     return null;
 };
 
+var css = "._1bd_Q6KrI5RAN8TRKHTRVl {\n  padding-right: var(--space-small);\n}\npath {\n  fill: var(--color-greyBlue);\n}\npath.D5KkCh2ebFU8GZn8_usvy {\n  fill: var(--color-blue);\n}\npath._1Yv-bZHiCELA_VP7732is_ {\n  fill: var(--color-greyBlue--lighter);\n}\n";
+var styles = {"sortIcon":"_1bd_Q6KrI5RAN8TRKHTRVl","active":"D5KkCh2ebFU8GZn8_usvy","inactive":"_1Yv-bZHiCELA_VP7732is_"};
+styleInject_es.styleInject(css);
+
+var SortDirection;
+(function (SortDirection) {
+    SortDirection[SortDirection["ascending"] = 0] = "ascending";
+    SortDirection[SortDirection["descending"] = 1] = "descending";
+    SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
+})(SortDirection || (SortDirection = {}));
+var sortStyleIndex = [
+    {
+        option: SortDirection.equilibrium,
+        upArrowStyle: undefined,
+        downArrowStyle: undefined,
+    },
+    {
+        option: SortDirection.ascending,
+        upArrowStyle: classnames__default["default"](styles.active),
+        downArrowStyle: classnames__default["default"](styles.inactive),
+    },
+    {
+        option: SortDirection.descending,
+        upArrowStyle: classnames__default["default"](styles.inactive),
+        downArrowStyle: classnames__default["default"](styles.active),
+    },
+];
+function SortIcon(_a) {
+    var direction = _a.direction;
+    var foundStyle = sortStyleIndex.find(function (style) { return style.option === direction; });
+    var finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.sortIcon) },
+        React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__default["default"].createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React__default["default"].createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+}
+
+function Header(_a) {
+    var _b;
+    var table = _a.table, stickyHeader = _a.stickyHeader, sorting = _a.sorting, onRowClick = _a.onRowClick;
+    var stickyClass = classnames__default["default"]((_b = {}, _b[styles$3.stickyHeader] = stickyHeader, _b));
+    return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
+        var _a;
+        var isSorting = sorting && header.column.getCanSort();
+        return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
+                ? classnames__default["default"](styles$3.sortableColumn, (_a = {},
+                    _a[styles$3.pinFirstHeaderSortable] = !!onRowClick,
+                    _a))
+                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
+                width: header.getSize(),
+                minWidth: header.column.columnDef.minSize,
+                maxWidth: header.column.columnDef.maxSize,
+                paddingRight: isSorting ? 0 : "inherit",
+            } }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
+            React__default["default"].createElement(React__default["default"].Fragment, null,
+                reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getCanSort() &&
+                    sorting &&
+                    !header.column.getIsSorted() && (React__default["default"].createElement(SortIcon, { direction: SortDirection.equilibrium }))),
+            {
+                asc: React__default["default"].createElement(SortIcon, { direction: SortDirection.ascending }),
+                desc: React__default["default"].createElement(SortIcon, { direction: SortDirection.descending }),
+            }[header.column.getIsSorted()]))));
+    }))); })));
+}
+
 function DataTable(_a) {
     var _b;
-    var data = _a.data, columns = _a.columns, pagination = _a.pagination, sorting = _a.sorting, height = _a.height, stickyHeader = _a.stickyHeader, pinFirstColumn = _a.pinFirstColumn, onRowClick = _a.onRowClick;
+    var data = _a.data, columns = _a.columns, pagination = _a.pagination, sorting = _a.sorting, height = _a.height, stickyHeader = _a.stickyHeader, pinFirstColumn = _a.pinFirstColumn, onRowClick = _a.onRowClick, emptyState = _a.emptyState;
     var _c = tslib_es6.__read(jobberHooks.useResizeObserver(), 2), ref = _c[0], exactWidth = _c[1].exactWidth;
     var tableSettings = createTableSettings(data, columns, {
         pagination: pagination,
         sorting: sorting,
     });
-    var tableClasses = classnames__default["default"](styles$2.table, (_b = {},
-        _b[styles$2.pinFirstColumn] = pinFirstColumn,
+    var tableClasses = classnames__default["default"](styles$3.table, (_b = {},
+        _b[styles$3.pinFirstColumn] = pinFirstColumn,
         _b));
     var table = reactTable.useReactTable(tableSettings);
-    return (React__default["default"].createElement("div", { className: styles$2.dataTableContainer },
-        React__default["default"].createElement("div", { className: styles$2.tableContainer, style: { height: height }, ref: ref },
+    return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
+        React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height: height }, ref: ref },
             React__default["default"].createElement("table", { className: tableClasses },
                 React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
-                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick }),
-                exactWidth && exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
-        exactWidth && exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
+                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
+                table.getRowModel().rows.length &&
+                    exactWidth &&
+                    exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+        table.getRowModel().rows.length &&
+            exactWidth &&
+            exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length }))));

package/dist/DatePicker/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-27f40041.js');
+var DatePicker = require('../DatePicker-ec6e34ef.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks');
 require('../style-inject.es-dcee06b6.js');
-require('../Typography-f074f3ec.js');
-require('../Button-1ce94a21.js');
+require('../Typography-c8df6609.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');