@jobber/components 2.90.0 → 2.90.1-pre.2

package/dist/DataTable/index.js

@@ -6,41 +6,60 @@ var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var reactTable = require('@tanstack/react-table');
 var classnames = require('classnames');
 var React = require('react');
-var hooks = require('@jobber/hooks');
+var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Option = require('../Option-201e55a7.js');
-var Button = require('../Button-5b2f1636.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-require('../FormField-a92c7bac.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-9bc093e9.js');
-require('../Typography-7e542a72.js');
-require('../InputValidation-24d3621a.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 }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 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(),
@@ -48,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) {
@@ -104,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) {
@@ -116,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;
@@ -166,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;
@@ -183,30 +181,112 @@ 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 _c = tslib_es6.__read(hooks.useResizeObserver(), 2), ref = _c[0], exactWidth = _c[1].exactWidth;
+    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 > hooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
-        exactWidth && exactWidth <= hooks.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 }))));
 }
 
+var mockContainerWidth = function (exactWidth) {
+    jest.spyOn(jobberHooks__namespace, "useResizeObserver").mockReturnValue([
+        { current: null },
+        {
+            width: 1200,
+            height: 800,
+            exactWidth: exactWidth || 1200,
+            exactHeight: 800,
+        },
+    ]);
+};
+
 Object.defineProperty(exports, 'ColumnDef', {
   enumerable: true,
   get: function () { return reactTable.ColumnDef; }
@@ -228,3 +308,4 @@ Object.defineProperty(exports, 'createColumnHelper', {
   get: function () { return reactTable.createColumnHelper; }
 });
 exports.DataTable = DataTable;
+exports.mockContainerWidth = mockContainerWidth;

package/dist/DataTable/test-utilities/helpers.d.ts

@@ -0,0 +1 @@
+export declare const mockContainerWidth: (exactWidth?: number | undefined) => void;

package/dist/DataTable/test-utilities/index.d.ts

@@ -1 +1,2 @@
 export * from "./mocks";
+export * from "./helpers";

package/dist/DatePicker/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-ad6f8630.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-7e542a72.js');
-require('../Button-5b2f1636.js');
+require('../Typography-c8df6609.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');

package/dist/{DatePicker-ad6f8630.js → DatePicker-ec6e34ef.js}

@@ -4,10 +4,10 @@ var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var ReactDatePicker = require('react-datepicker');
-var hooks = require('@jobber/hooks');
+var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Typography = require('./Typography-7e542a72.js');
-var Button = require('./Button-5b2f1636.js');
+var Typography = require('./Typography-c8df6609.js');
+var Button = require('./Button-d0f7848a.js');
 var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -84,7 +84,7 @@ function DatePicker(_a) {
         _c[styles.inline] = inline,
         _c));
     if (smartAutofocus) {
-        hooks.useRefocusOnActivator(open);
+        jobberHooks.useRefocusOnActivator(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },

package/dist/DescriptionList/index.js

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

package/dist/Disclosure/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-56750113.js');
+var Heading = require('../Heading-36fd27db.js');
 var Icon = require('../Icon-d5ad1a6d.js');
-require('../Typography-7e542a72.js');
+require('../Typography-c8df6609.js');
 require('classnames');
 require('@jobber/design');
 

package/dist/Drawer/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Typography = require('../Typography-7e542a72.js');
-var ButtonDismiss = require('../ButtonDismiss-4cde8f7c.js');
+var Typography = require('../Typography-c8df6609.js');
+var ButtonDismiss = require('../ButtonDismiss-6d3608f5.js');
 require('../tslib.es6-5b50eb8e.js');
-require('../Button-5b2f1636.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');

package/dist/Emphasis/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Emphasis = require('../Emphasis-fd845639.js');
+var Emphasis = require('../Emphasis-391519b1.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
-require('../Typography-7e542a72.js');
+require('../Typography-c8df6609.js');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 

package/dist/{Emphasis-fd845639.js → Emphasis-391519b1.js}

@@ -2,7 +2,7 @@
 
 var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
-var Typography = require('./Typography-7e542a72.js');
+var Typography = require('./Typography-c8df6609.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/FeatureSwitch/index.js

@@ -7,14 +7,14 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-56750113.js');
-var Text = require('../Text-9bc093e9.js');
+var Heading = require('../Heading-36fd27db.js');
+var Text = require('../Text-c317e805.js');
 var Content = require('../Content-18de5fbb.js');
-var Switch = require('../Switch-d2bec677.js');
-var Button = require('../Button-5b2f1636.js');
-var Emphasis = require('../Emphasis-fd845639.js');
-var Markdown = require('../Markdown-69986c49.js');
-require('../Typography-7e542a72.js');
+var Switch = require('../Switch-5c72bad3.js');
+var Button = require('../Button-d0f7848a.js');
+var Emphasis = require('../Emphasis-391519b1.js');
+var Markdown = require('../Markdown-edd7468b.js');
+require('../Typography-c8df6609.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');

package/dist/FormField/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-a92c7bac.js');
+var FormField = require('../FormField-4ef1dd6b.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-5b2f1636.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Typography-7e542a72.js');
-require('../Text-9bc093e9.js');
-require('../InputValidation-24d3621a.js');
+require('../Typography-c8df6609.js');
+require('../Text-c317e805.js');
+require('../InputValidation-c9309e0a.js');
 require('framer-motion');
 require('../Spinner-18d3dee6.js');
 

package/dist/{FormField-a92c7bac.js → FormField-4ef1dd6b.js}

@@ -6,10 +6,10 @@ var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var classnames = require('classnames');
-var Button = require('./Button-5b2f1636.js');
+var Button = require('./Button-d0f7848a.js');
 var Icon = require('./Icon-d5ad1a6d.js');
-var Text = require('./Text-9bc093e9.js');
-var InputValidation = require('./InputValidation-24d3621a.js');
+var Text = require('./Text-c317e805.js');
+var InputValidation = require('./InputValidation-c9309e0a.js');
 var Spinner = require('./Spinner-18d3dee6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -205,7 +205,7 @@ function setAutocomplete(autocompleteSetting) {
         return undefined;
     }
     else if (autocompleteSetting === false) {
-        return "autocomplete-off";
+        return "off";
     }
     return autocompleteSetting;
 }

package/dist/FormatFile/index.js

@@ -2,29 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-5391d4cf.js');
+var FormatFile = require('../FormatFile-d93126eb.js');
 require('react');
 require('classnames');
 require('filesize');
 require('../style-inject.es-dcee06b6.js');
 require('../tslib.es6-5b50eb8e.js');
-require('../Button-5b2f1636.js');
+require('../Button-d0f7848a.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Typography-7e542a72.js');
-require('../ConfirmationModal-b7ef110f.js');
+require('../Typography-c8df6609.js');
+require('../ConfirmationModal-474b3dbb.js');
 require('@jobber/hooks');
-require('../Modal-aaaaf2df.js');
+require('../Modal-1f7e7433.js');
 require('react-dom');
 require('framer-motion');
-require('../ButtonDismiss-4cde8f7c.js');
+require('../ButtonDismiss-6d3608f5.js');
 require('../Content-18de5fbb.js');
-require('../Markdown-69986c49.js');
+require('../Markdown-edd7468b.js');
 require('react-markdown');
-require('../Text-9bc093e9.js');
-require('../Emphasis-fd845639.js');
-require('../Heading-56750113.js');
+require('../Text-c317e805.js');
+require('../Emphasis-391519b1.js');
+require('../Heading-36fd27db.js');
 require('../ProgressBar-e9a49129.js');
 
 

package/dist/{FormatFile-5391d4cf.js → FormatFile-d93126eb.js}

@@ -5,11 +5,11 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
-var Button = require('./Button-5b2f1636.js');
-var ConfirmationModal = require('./ConfirmationModal-b7ef110f.js');
+var Button = require('./Button-d0f7848a.js');
+var ConfirmationModal = require('./ConfirmationModal-474b3dbb.js');
 var Icon = require('./Icon-d5ad1a6d.js');
-var Typography = require('./Typography-7e542a72.js');
-var Text = require('./Text-9bc093e9.js');
+var Typography = require('./Typography-c8df6609.js');
+var Text = require('./Text-c317e805.js');
 var ProgressBar = require('./ProgressBar-e9a49129.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Gallery/index.js

@@ -7,24 +7,24 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var LightBox = require('../LightBox-b893b656.js');
-var FormatFile = require('../FormatFile-5391d4cf.js');
-var Button = require('../Button-5b2f1636.js');
+var FormatFile = require('../FormatFile-d93126eb.js');
+var Button = require('../Button-d0f7848a.js');
 require('react-image-lightbox');
 require('react-image-lightbox/style.css');
 require('filesize');
-require('../ConfirmationModal-b7ef110f.js');
+require('../ConfirmationModal-474b3dbb.js');
 require('@jobber/hooks');
-require('../Modal-aaaaf2df.js');
+require('../Modal-1f7e7433.js');
 require('react-dom');
 require('framer-motion');
-require('../Typography-7e542a72.js');
-require('../ButtonDismiss-4cde8f7c.js');
+require('../Typography-c8df6609.js');
+require('../ButtonDismiss-6d3608f5.js');
 require('../Content-18de5fbb.js');
-require('../Markdown-69986c49.js');
+require('../Markdown-edd7468b.js');
 require('react-markdown');
-require('../Text-9bc093e9.js');
-require('../Emphasis-fd845639.js');
-require('../Heading-56750113.js');
+require('../Text-c317e805.js');
+require('../Emphasis-391519b1.js');
+require('../Heading-36fd27db.js');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
 require('../ProgressBar-e9a49129.js');