@jobber/components 4.1.2 → 4.1.3-pre.14

package/dist/ConfirmationModal/index.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-6a7beee2.js');
+var ConfirmationModal = require('../ConfirmationModal-ac668c46.js');
 require('react');
 require('@jobber/hooks');
-require('../Modal-757e83fd.js');
+require('../Modal-e41f9284.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
-require('../style-inject.es-dcee06b6.js');
-require('../Heading-7b203f7f.js');
-require('../Typography-9262511f.js');
-require('../Button-16e043ec.js');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Heading-8c6e4e0b.js');
+require('../Typography-dd9717e7.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-3fb1eaf9.js');
-require('../Content-05df8f7f.js');
-require('../Markdown-be2dcd0c.js');
+require('../ButtonDismiss-d2d16622.js');
+require('../Content-af82acba.js');
+require('../Markdown-5d86d6e7.js');
 require('react-markdown');
-require('../Text-7ce00adb.js');
-require('../Emphasis-23dc2a0a.js');
+require('../Text-4c04ddc3.js');
+require('../Emphasis-53e963b5.js');
 
 
 

package/dist/{ConfirmationModal-6a7beee2.js → ConfirmationModal-ac668c46.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
-var Modal = require('./Modal-757e83fd.js');
-var Content = require('./Content-05df8f7f.js');
-var Markdown = require('./Markdown-be2dcd0c.js');
+var Modal = require('./Modal-e41f9284.js');
+var Content = require('./Content-af82acba.js');
+var Markdown = require('./Markdown-5d86d6e7.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Content/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Content = require('../Content-05df8f7f.js');
+var Content = require('../Content-af82acba.js');
 require('react');
 require('classnames');
-require('../style-inject.es-dcee06b6.js');
+require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/{Content-05df8f7f.js → Content-af82acba.js}

@@ -2,20 +2,20 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css$1 = "._3XB3f5356G3URhbYQmxO0U > :not(:last-child) {\n  margin-bottom: var(--space-base);\n}\n\n._3rRW5nzLQ-amnwpzAPjyCg > :not(:last-child) {\n  margin-bottom: var(--space-small);\n}\n\n._2phzyL8OjyxQ0GU2n05YKL > :not(:last-child) {\n  margin-bottom: var(--space-large);\n}\n";
+var css_248z$1 = "._3XB3f5356G3URhbYQmxO0U > :not(:last-child) {\n  margin-bottom: var(--space-base);\n}\n\n._3rRW5nzLQ-amnwpzAPjyCg > :not(:last-child) {\n  margin-bottom: var(--space-small);\n}\n\n._2phzyL8OjyxQ0GU2n05YKL > :not(:last-child) {\n  margin-bottom: var(--space-large);\n}\n";
 var spacings = {"base":"_3XB3f5356G3URhbYQmxO0U","small":"_3rRW5nzLQ-amnwpzAPjyCg","large":"_2phzyL8OjyxQ0GU2n05YKL"};
-styleInject_es.styleInject(css$1);
+styleInject_es.styleInject(css_248z$1);
 
-var css = "._1TB2WRsjEoAUFq0FMfwdQ3 {\n  padding: 0;\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
+var css_248z = "._1TB2WRsjEoAUFq0FMfwdQ3 {\n  padding: 0;\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
 var styles = {"padded":"_1TB2WRsjEoAUFq0FMfwdQ3"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function Content({ children, spacing = "base" }) {
     const className = classnames__default["default"](styles.padded, spacings[spacing]);

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-edab9c3c.js');
-var Content = require('../Content-05df8f7f.js');
-var Emphasis = require('../Emphasis-23dc2a0a.js');
+var Card = require('../Card-c0f88c0f.js');
+var Content = require('../Content-af82acba.js');
+var Emphasis = require('../Emphasis-53e963b5.js');
 require('classnames');
-require('../style-inject.es-dcee06b6.js');
-require('../Heading-7b203f7f.js');
-require('../Typography-9262511f.js');
-require('../Button-16e043ec.js');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Heading-8c6e4e0b.js');
+require('../Typography-dd9717e7.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-d6a7d17b.js');
+require('../Menu-b5e8d8f9.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks');

package/dist/DataTable/index.js

@@ -6,21 +6,21 @@ var reactTable = require('@tanstack/react-table');
 var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var tslib_es6 = require('../tslib.es6-efe27175.js');
-var Option = require('../Option-5fd699dc.js');
-var Button = require('../Button-16e043ec.js');
-var Text = require('../Text-7ce00adb.js');
-require('../FormField-34e4701b.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var Option = require('../Option-9aa09e72.js');
+var Button = require('../Button-186ef2c1.js');
+var Text = require('../Text-4c04ddc3.js');
+require('../FormField-aff52a1d.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-97dd0dcf.js');
+require('../InputValidation-e09f5d20.js');
 require('framer-motion');
-require('../Spinner-ae4c8a85.js');
+require('../Spinner-35cee923.js');
 require('react-router-dom');
-require('../Typography-9262511f.js');
+require('../Typography-dd9717e7.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,9 +46,9 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
 
-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 css_248z$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);
+styleInject_es.styleInject(css_248z$3);
 
 function Body({ table, onRowClick, emptyState, }) {
     const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
@@ -121,9 +121,9 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-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 css_248z$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);
+styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
 function Pagination({ table, itemsPerPage, totalItems, }) {
@@ -147,9 +147,9 @@ function Pagination({ table, itemsPerPage, totalItems, }) {
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => table.nextPage(), disabled: !table.getCanNextPage() })))));
 }
 
-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 css_248z$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);
+styleInject_es.styleInject(css_248z$1);
 
 const DesktopView = ({ table }) => (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React__default["default"].createElement("th", { key: header.id, style: {
         width: header.getSize(),
@@ -171,9 +171,9 @@ const Footer = ({ table, viewType = "handheld", }) => {
     return null;
 };
 
-var css = "._1bd_Q6KrI5RAN8TRKHTRVl {\n  padding-right: var(--space-small);\n}\n._1bd_Q6KrI5RAN8TRKHTRVl path {\n  fill: var(--color-greyBlue);\n}\n._1bd_Q6KrI5RAN8TRKHTRVl path.D5KkCh2ebFU8GZn8_usvy {\n  fill: var(--color-blue);\n}\n._1bd_Q6KrI5RAN8TRKHTRVl path._1Yv-bZHiCELA_VP7732is_ {\n  fill: var(--color-greyBlue--lighter);\n}\n";
+var css_248z = "._1bd_Q6KrI5RAN8TRKHTRVl {\n  padding-right: var(--space-small);\n}\n._1bd_Q6KrI5RAN8TRKHTRVl path {\n  fill: var(--color-greyBlue);\n}\n._1bd_Q6KrI5RAN8TRKHTRVl path.D5KkCh2ebFU8GZn8_usvy {\n  fill: var(--color-blue);\n}\n._1bd_Q6KrI5RAN8TRKHTRVl path._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);
+styleInject_es.styleInject(css_248z);
 
 var SortDirection;
 (function (SortDirection) {

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-0696b0f0.js');
+var DatePicker = require('../DatePicker-e085dff4.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks');
-require('../style-inject.es-dcee06b6.js');
-require('../Typography-9262511f.js');
-require('../Button-16e043ec.js');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Typography-dd9717e7.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/DatePicker-e085dff4.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var ReactDatePicker = require('react-datepicker');
+var jobberHooks = require('@jobber/hooks');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Typography = require('./Typography-dd9717e7.js');
+var Button = require('./Button-186ef2c1.js');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
+
+var css_248z = "@charset \"UTF-8\";\n/* stylelint-disable */\n:global .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view--down-arrow, :global .react-datepicker__navigation-icon::before {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  margin-left: -4px;\n  position: absolute;\n  width: 0;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n  box-sizing: content-box;\n  position: absolute;\n  border: 8px solid transparent;\n  height: 0;\n  width: 1px;\n  content: \"\";\n  z-index: -1;\n  border-width: 8px;\n  left: -8px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n  border-bottom-color: #aeaeae;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  top: 0;\n  margin-top: -8px;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n  border-top: none;\n  border-bottom-color: #f0f0f0;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n  top: 0;\n}\n:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n  top: -1px;\n  border-bottom-color: #aeaeae;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  bottom: 0;\n  margin-bottom: -8px;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n  border-bottom: none;\n  border-top-color: #fff;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n  bottom: 0;\n}\n:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n  bottom: -1px;\n  border-top-color: #aeaeae;\n}\n:global .react-datepicker-wrapper {\n  display: inline-block;\n  padding: 0;\n  border: 0;\n  width: 100%;\n}\n:global .react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #fff;\n  color: #000;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n}\n:global .react-datepicker--time-only .react-datepicker__triangle {\n  left: 35px;\n}\n:global .react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n:global .react-datepicker--time-only .react-datepicker__time,\n:global .react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n:global .react-datepicker__triangle {\n  position: absolute;\n  left: 50px;\n}\n:global .react-datepicker-popper {\n  z-index: 1;\n}\n:global .react-datepicker-popper[data-placement^=bottom] {\n  padding-top: 10px;\n}\n:global .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n  left: auto;\n  right: 50px;\n}\n:global .react-datepicker-popper[data-placement^=top] {\n  padding-bottom: 10px;\n}\n:global .react-datepicker-popper[data-placement^=right] {\n  padding-left: 8px;\n}\n:global .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n  left: auto;\n  right: 42px;\n}\n:global .react-datepicker-popper[data-placement^=left] {\n  padding-right: 8px;\n}\n:global .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n  left: 42px;\n  right: auto;\n}\n:global .react-datepicker__header {\n  text-align: center;\n  background-color: #f0f0f0;\n  border-bottom: 1px solid #aeaeae;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n:global .react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n:global .react-datepicker__header--time:not(:global .react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n:global .react-datepicker__header:not(:global .react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-dropdown-container--select,\n:global .react-datepicker__month-dropdown-container--select,\n:global .react-datepicker__month-year-dropdown-container--select,\n:global .react-datepicker__year-dropdown-container--scroll,\n:global .react-datepicker__month-dropdown-container--scroll,\n:global .react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n:global .react-datepicker__current-month,\n:global .react-datepicker-time__header,\n:global .react-datepicker-year-header {\n  margin-top: 0;\n  color: #000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n:global .react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n:global .react-datepicker__navigation {\n  -ms-flex-align: center;\n      align-items: center;\n  background: none;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n:global .react-datepicker__navigation--previous {\n  left: 2px;\n}\n:global .react-datepicker__navigation--next {\n  right: 2px;\n}\n:global .react-datepicker__navigation--next--with-time:not(:global .react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n:global .react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n:global .react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n:global .react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n:global .react-datepicker__navigation:hover *::before {\n  border-color: #a6a6a6;\n}\n:global .react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n:global .react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n:global .react-datepicker__navigation-icon--next::before {\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  left: -7px;\n}\n:global .react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n:global .react-datepicker__navigation-icon--previous::before {\n  -webkit-transform: rotate(225deg);\n          transform: rotate(225deg);\n  right: -7px;\n}\n:global .react-datepicker__month-container {\n  float: left;\n}\n:global .react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n:global .react-datepicker__year-wrapper {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  max-width: 180px;\n}\n:global .react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n:global .react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n:global .react-datepicker__month .react-datepicker__month-text,\n:global .react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n:global .react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n  -moz-appearance: textfield;\n}\n:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n:global .react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #aeaeae;\n  width: 85px;\n}\n:global .react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n:global .react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + (1.7rem / 2));\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n:global .react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n:global .react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n:global .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n:global .react-datepicker__day-names,\n:global .react-datepicker__week {\n  white-space: nowrap;\n}\n:global .react-datepicker__day-names {\n  margin-bottom: -8px;\n}\n:global .react-datepicker__day-name,\n:global .react-datepicker__day,\n:global .react-datepicker__time-name {\n  color: #000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n:global .react-datepicker__month--selected, :global .react-datepicker__month--in-selecting-range, :global .react-datepicker__month--in-range,\n:global .react-datepicker__quarter--selected,\n:global .react-datepicker__quarter--in-selecting-range,\n:global .react-datepicker__quarter--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n:global .react-datepicker__month--selected:hover, :global .react-datepicker__month--in-selecting-range:hover, :global .react-datepicker__month--in-range:hover,\n:global .react-datepicker__quarter--selected:hover,\n:global .react-datepicker__quarter--in-selecting-range:hover,\n:global .react-datepicker__quarter--in-range:hover {\n  background-color: #1d5d90;\n}\n:global .react-datepicker__month--disabled,\n:global .react-datepicker__quarter--disabled {\n  color: #ccc;\n  pointer-events: none;\n}\n:global .react-datepicker__month--disabled:hover,\n:global .react-datepicker__quarter--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n:global .react-datepicker__day,\n:global .react-datepicker__month-text,\n:global .react-datepicker__quarter-text,\n:global .react-datepicker__year-text {\n  cursor: pointer;\n}\n:global .react-datepicker__day:hover,\n:global .react-datepicker__month-text:hover,\n:global .react-datepicker__quarter-text:hover,\n:global .react-datepicker__year-text:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n:global .react-datepicker__day--today,\n:global .react-datepicker__month-text--today,\n:global .react-datepicker__quarter-text--today,\n:global .react-datepicker__year-text--today {\n  font-weight: bold;\n}\n:global .react-datepicker__day--highlighted,\n:global .react-datepicker__month-text--highlighted,\n:global .react-datepicker__quarter-text--highlighted,\n:global .react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #fff;\n}\n:global .react-datepicker__day--highlighted:hover,\n:global .react-datepicker__month-text--highlighted:hover,\n:global .react-datepicker__quarter-text--highlighted:hover,\n:global .react-datepicker__year-text--highlighted:hover {\n  background-color: #32be3f;\n}\n:global .react-datepicker__day--highlighted-custom-1,\n:global .react-datepicker__month-text--highlighted-custom-1,\n:global .react-datepicker__quarter-text--highlighted-custom-1,\n:global .react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n:global .react-datepicker__day--highlighted-custom-2,\n:global .react-datepicker__month-text--highlighted-custom-2,\n:global .react-datepicker__quarter-text--highlighted-custom-2,\n:global .react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n:global .react-datepicker__day--selected, :global .react-datepicker__day--in-selecting-range, :global .react-datepicker__day--in-range,\n:global .react-datepicker__month-text--selected,\n:global .react-datepicker__month-text--in-selecting-range,\n:global .react-datepicker__month-text--in-range,\n:global .react-datepicker__quarter-text--selected,\n:global .react-datepicker__quarter-text--in-selecting-range,\n:global .react-datepicker__quarter-text--in-range,\n:global .react-datepicker__year-text--selected,\n:global .react-datepicker__year-text--in-selecting-range,\n:global .react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n:global .react-datepicker__day--selected:hover, :global .react-datepicker__day--in-selecting-range:hover, :global .react-datepicker__day--in-range:hover,\n:global .react-datepicker__month-text--selected:hover,\n:global .react-datepicker__month-text--in-selecting-range:hover,\n:global .react-datepicker__month-text--in-range:hover,\n:global .react-datepicker__quarter-text--selected:hover,\n:global .react-datepicker__quarter-text--in-selecting-range:hover,\n:global .react-datepicker__quarter-text--in-range:hover,\n:global .react-datepicker__year-text--selected:hover,\n:global .react-datepicker__year-text--in-selecting-range:hover,\n:global .react-datepicker__year-text--in-range:hover {\n  background-color: #1d5d90;\n}\n:global .react-datepicker__day--keyboard-selected,\n:global .react-datepicker__month-text--keyboard-selected,\n:global .react-datepicker__quarter-text--keyboard-selected,\n:global .react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #bad9f1;\n  color: rgb(0, 0, 0);\n}\n:global .react-datepicker__day--keyboard-selected:hover,\n:global .react-datepicker__month-text--keyboard-selected:hover,\n:global .react-datepicker__quarter-text--keyboard-selected:hover,\n:global .react-datepicker__year-text--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n:global .react-datepicker__day--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__month-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__quarter-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range),\n:global .react-datepicker__year-text--in-selecting-range:not(:global .react-datepicker__day--in-range):not(:global .react-datepicker__month-text--in-range):not(:global .react-datepicker__quarter-text--in-range):not(:global .react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.react-datepicker__month--selecting-range :global .react-datepicker__day--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__month-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__quarter-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range :global .react-datepicker__year-text--in-range:not(:global .react-datepicker__day--in-selecting-range):not(:global .react-datepicker__month-text--in-selecting-range):not(:global .react-datepicker__quarter-text--in-selecting-range):not(:global .react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000;\n}\n:global .react-datepicker__day--disabled,\n:global .react-datepicker__month-text--disabled,\n:global .react-datepicker__quarter-text--disabled,\n:global .react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n:global .react-datepicker__day--disabled:hover,\n:global .react-datepicker__month-text--disabled:hover,\n:global .react-datepicker__quarter-text--disabled:hover,\n:global .react-datepicker__year-text--disabled:hover {\n  background-color: transparent;\n}\n:global .react-datepicker__month-text.react-datepicker__month--selected:hover, :global .react-datepicker__month-text.react-datepicker__month--in-range:hover, :global .react-datepicker__month-text.react-datepicker__quarter--selected:hover, :global .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,\n:global .react-datepicker__quarter-text.react-datepicker__month--selected:hover,\n:global .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,\n:global .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,\n:global .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n  background-color: #216ba5;\n}\n:global .react-datepicker__month-text:hover,\n:global .react-datepicker__quarter-text:hover {\n  background-color: #f0f0f0;\n}\n:global .react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n:global .react-datepicker__year-read-view,\n:global .react-datepicker__month-read-view,\n:global .react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n:global .react-datepicker__year-read-view:hover,\n:global .react-datepicker__month-read-view:hover,\n:global .react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n:global .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: #b3b3b3;\n}\n:global .react-datepicker__year-read-view--down-arrow,\n:global .react-datepicker__month-read-view--down-arrow,\n:global .react-datepicker__month-year-read-view--down-arrow {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n:global .react-datepicker__year-dropdown,\n:global .react-datepicker__month-dropdown,\n:global .react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #aeaeae;\n}\n:global .react-datepicker__year-dropdown:hover,\n:global .react-datepicker__month-dropdown:hover,\n:global .react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n:global .react-datepicker__year-dropdown--scrollable,\n:global .react-datepicker__month-dropdown--scrollable,\n:global .react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n:global .react-datepicker__year-option,\n:global .react-datepicker__month-option,\n:global .react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n:global .react-datepicker__year-option:first-of-type,\n:global .react-datepicker__month-option:first-of-type,\n:global .react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-option:last-of-type,\n:global .react-datepicker__month-option:last-of-type,\n:global .react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n:global .react-datepicker__year-option:hover,\n:global .react-datepicker__month-option:hover,\n:global .react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: #b3b3b3;\n}\n:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: #b3b3b3;\n}\n:global .react-datepicker__year-option--selected,\n:global .react-datepicker__month-option--selected,\n:global .react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n:global .react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n:global .react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: #216ba5;\n  color: #fff;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n  padding: 2px;\n  font-size: 12px;\n  line-height: 1;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n:global .react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #aeaeae;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n:global .react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 2147483647;\n}\n:global .react-datepicker__portal .react-datepicker__day-name,\n:global .react-datepicker__portal .react-datepicker__day,\n:global .react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  :global .react-datepicker__portal .react-datepicker__day-name,\n  :global .react-datepicker__portal .react-datepicker__day,\n  :global .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n:global .react-datepicker__portal .react-datepicker__current-month,\n:global .react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n:global .react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n:global .react-datepicker__aria-live {\n  position: absolute;\n  -webkit-clip-path: circle(0);\n          clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n/* stylelint-enable */\n._3X5QGNINiwa77cbEb9mEzZ {\n  display: inline-block;\n}\n._1DR69DMoP49Ux6kq7LUoGR {\n  display: block;\n  width: 100%;\n}\n._2oJDyYPkJRLltnyYbYWifk.react-datepicker {\n  --datepicker-cell-size: calc(var(--space-base) * 2.375);\n  box-shadow: var(--shadow-base);\n  border-color: var(--color-border);\n  border-radius: var(--radius-base);\n  font-family: var(--typography--fontFamily-normal);\n}\n._2oJDyYPkJRLltnyYbYWifk._1YVIHRF3DM3t3EzyRTDvbj {\n  box-shadow: none;\n}\n.react-datepicker__input-container,\n.react-datepicker-wrapper {\n  max-width: 100%;\n}\n._3X5QGNINiwa77cbEb9mEzZ .react-datepicker-popper {\n  z-index: var(--elevation-datepicker);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__header {\n  padding: 0;\n  border-bottom: var(--border-base) solid var(--color-border);\n  background: var(--color-surface);\n}\n._2XaofeiwYq6Mon3dJkoPd_ {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: var(--datepicker-cell-size);\n  height: var(--datepicker-cell-size);\n  margin: 0;\n  border-radius: var(--radius-base);\n  color: var(--color-heading);\n  font-size: var(--typography--fontSize-base);\n  line-height: inherit;\n  background: var(--color-surface);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--highlighted {\n  background: var(--color-surface--active);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--outside-month {\n  border-radius: 0;\n  color: var(--color-text);\n  background: var(--color-disabled--secondary);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--disabled {\n  color: var(--color-disabled);\n  cursor: default;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__month {\n  margin: 0;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected {\n  color: var(--color-text--reverse);\n  background: var(--color-interactive);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day-names {\n  display: -ms-flexbox;\n  display: flex;\n  margin: 0;\n  padding: var(--space-smallest) 0 0;\n  color: var(--color-text);\n  font-size: var(--typography--fontSize-small);\n  text-transform: uppercase;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day-name {\n  width: auto;\n  color: var(--color-text);\n  -ms-flex: 1;\n      flex: 1;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:focus {\n  background: var(--color-surface--hover);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day:focus {\n  position: relative;\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--selected:focus {\n  background: var(--color-interactive--hover);\n}\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--disabled:hover,\n._2oJDyYPkJRLltnyYbYWifk .react-datepicker__day--disabled:focus {\n  box-shadow: none;\n  background: transparent;\n}\n._2oJDyYPkJRLltnyYbYWifk\n  .react-datepicker__day--disabled.react-datepicker__day--outside-month:hover,\n._2oJDyYPkJRLltnyYbYWifk\n  .react-datepicker__day--disabled.react-datepicker__day--outside-month:focus {\n  box-shadow: none;\n  background: var(--color-disabled--secondary);\n}\n._2lX9pishvsqKh-Hj11F0yo {\n  margin-top: var(--space-minuscule);\n  color: var(--color-heading);\n}\n";
+var styles = {"datePickerWrapper":"_3X5QGNINiwa77cbEb9mEzZ","fullWidth":"_1DR69DMoP49Ux6kq7LUoGR","datePicker":"_2oJDyYPkJRLltnyYbYWifk","inline-left":"_1YVIHRF3DM3t3EzyRTDvbj","inline-right":"_1YVIHRF3DM3t3EzyRTDvbj","inline":"_1YVIHRF3DM3t3EzyRTDvbj","header":"_2XaofeiwYq6Mon3dJkoPd_","month":"_2lX9pishvsqKh-Hj11F0yo"};
+styleInject_es.styleInject(css_248z);
+
+function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
+    return (React__default["default"].createElement("div", { className: styles.header },
+        React__default["default"].createElement(Button.Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
+        React__default["default"].createElement("div", { className: styles.month },
+            React__default["default"].createElement(Typography.Typography, { element: "span", fontFamily: "display", size: "large" }, monthDate.toLocaleString("en-US", {
+                month: "long",
+                year: "numeric",
+            }))),
+        React__default["default"].createElement(Button.Button, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, icon: "arrowRight", ariaLabel: "Next Month", variation: "work", type: "tertiary" })));
+}
+
+const DatePickerActivator = React.forwardRef(InternalActivator);
+function InternalActivator(props, ref) {
+    const { activator, fullWidth } = props;
+    const newActivatorProps = lodash.omit(props, ["activator", "fullWidth"]);
+    if (activator) {
+        if (React.isValidElement(activator)) {
+            const isAComponent = typeof activator.type === "function";
+            return React.cloneElement(activator, Object.assign(Object.assign(Object.assign({}, newActivatorProps), (isAComponent && { fullWidth: fullWidth })), { ref }));
+        }
+        else {
+            return activator(props);
+        }
+    }
+    else {
+        return (React__default["default"].createElement(Button.Button, Object.assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
+    }
+}
+
+function useFocusOnSelectedDate() {
+    const ref = React.useRef();
+    function focusOnSelectedDate() {
+        var _a;
+        const selectedDateClass = ".react-datepicker__day--selected";
+        const selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
+        if (selectedDate instanceof HTMLDivElement) {
+            selectedDate.focus();
+        }
+    }
+    return { ref, focusOnSelectedDate };
+}
+
+function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, }) {
+    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
+    const [open, setOpen] = React.useState(false);
+    const wrapperClassName = classnames__default["default"](styles.datePickerWrapper, {
+        // react-datepicker uses this class name to not close the date picker when
+        // the activator is clicked
+        // https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L905
+        //
+        // It uses react-onclickoutside package and declaring some elements to be
+        // ignored via said class name
+        // https://www.npmjs.com/package/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
+        "react-datepicker-ignore-onclickoutside": !inline,
+        [styles.fullWidth]: fullWidth,
+    });
+    const datePickerClassNames = classnames__default["default"](styles.datePicker, {
+        [styles.inline]: inline,
+    });
+    if (smartAutofocus) {
+        jobberHooks.useRefocusOnActivator(open);
+        React.useEffect(focusOnSelectedDate, [open]);
+    }
+    return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },
+        React__default["default"].createElement(ReactDatePicker__default["default"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"], highlightDates: highlightDates, onMonthChange: onMonthChange })));
+    /**
+     * The onChange callback on ReactDatePicker returns a Date and an Event, but
+     * the onChange in our interface only provides the Date. Simplifying the code
+     * by removing this function and passing it directly to the underlying
+     * component breaks tests both here and downstream (i.e. the pattern
+     * `expect(onChange).toHaveBeenCalledWith(date)` is commonly used and would
+     * fail).
+     */
+    function handleChange(value /* , event: React.SyntheticEvent */) {
+        onChange(value);
+    }
+    function handleCalendarOpen() {
+        setOpen(true);
+    }
+    function handleCalendarClose() {
+        setOpen(false);
+    }
+}
+
+exports.DatePicker = DatePicker;

package/dist/DescriptionList/index.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Typography = require('../Typography-9262511f.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Typography = require('../Typography-dd9717e7.js');
 require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css = "._2v2alHUPCR1uRMbtusHoPI {\n  margin: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  padding: var(--space-small) 0;\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3F8K2c6jcFhxba3JNK5dok:first-child {\n  padding-top: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok:last-child {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-left: 0;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-left: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(ltr) {\n          margin-left: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-right: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(rtl) {\n          margin-right: 0;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-left: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(ltr) {\n          margin-left: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(rtl) {\n          margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd {\n  min-width: calc(var(--base-unit) * 7.5);\n  box-sizing: border-box;\n  padding-right: var(--space-small);\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  -ms-flex: 1 1 40%;\n      flex: 1 1 40%;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dt {\n  -ms-flex: 1 1 60%;\n      flex: 1 1 60%;\n}\n";
+var css_248z = "._2v2alHUPCR1uRMbtusHoPI {\n  margin: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  padding: var(--space-small) 0;\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3F8K2c6jcFhxba3JNK5dok:first-child {\n  padding-top: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok:last-child {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-left: 0;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-left: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(ltr) {\n          margin-left: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-right: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(rtl) {\n          margin-right: 0;\n}\n\n[dir=\"ltr\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-left: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(ltr) {\n          margin-left: 0;\n}\n\n[dir=\"rtl\"] ._3F8K2c6jcFhxba3JNK5dok dd {\n          margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd:dir(rtl) {\n          margin-right: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dd {\n  min-width: calc(var(--base-unit) * 7.5);\n  box-sizing: border-box;\n  padding-right: var(--space-small);\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  -ms-flex: 1 1 40%;\n      flex: 1 1 40%;\n}\n\n._3F8K2c6jcFhxba3JNK5dok dt {\n  -ms-flex: 1 1 60%;\n      flex: 1 1 60%;\n}\n";
 var styles = {"descriptionList":"_2v2alHUPCR1uRMbtusHoPI","termGroup":"_3F8K2c6jcFhxba3JNK5dok"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function DescriptionList({ data }) {
     return (React__default["default"].createElement("dl", { className: styles.descriptionList }, data.map(([term, description]) => (React__default["default"].createElement("div", { key: term, className: styles.termGroup },

package/dist/Disclosure/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-7b203f7f.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Heading = require('../Heading-8c6e4e0b.js');
 var Icon = require('../Icon-405a216c.js');
-require('../Typography-9262511f.js');
+require('../Typography-dd9717e7.js');
 require('classnames');
 require('@jobber/design');
 
@@ -14,9 +14,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css = "._359GUq8c3Ojy8ytOlbeU_8 {\n  -webkit-transform-origin: 50% 47.5% 0;\n          transform-origin: 50% 47.5% 0;\n  transition: -webkit-transform var(--timing-quick);\n  transition: transform var(--timing-quick);\n  transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);\n  -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n}\n\n.M6AheKOqP9CP5eAwb3x6r[open] ._359GUq8c3Ojy8ytOlbeU_8 {\n  -webkit-transform: rotateX(180deg);\n          transform: rotateX(180deg);\n}\n\n._1YM_nAG8-pDqub2waVYnIF {\n  padding: var(--space-smaller) 0 var(--space-smallest) 0;\n  border: none;\n  list-style: none;\n  cursor: pointer;\n  outline-color: none;\n  transition: background var(--timing-quick), box-shadow var(--timing-base);\n}\n\n._1YM_nAG8-pDqub2waVYnIF::-webkit-details-marker {\n  display: none;\n}\n\n._1YM_nAG8-pDqub2waVYnIF:hover,\n._1YM_nAG8-pDqub2waVYnIF:focus {\n  background: var(--color-surface--hover);\n}\n\n._1YM_nAG8-pDqub2waVYnIF:focus,\n._1YM_nAG8-pDqub2waVYnIF:active {\n  box-shadow: var(--shadow-focus);\n  border: none;\n  outline: none;\n}\n\n._1YM_nAG8-pDqub2waVYnIF * {\n  pointer-events: none;\n}\n\n.QzfYliV58f72hx9_z2PMi {\n  -ms-flex-align: baseline;\n      align-items: baseline;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.QzfYliV58f72hx9_z2PMi h4 {\n  -ms-flex: 1 0 0px;\n      flex: 1 0 0;\n}\n\n._1tmHsYFm14xDJs73GzHDpJ {\n  display: block;\n  padding: var(--space-small) 0;\n}\n\n.M6AheKOqP9CP5eAwb3x6r[open] > ._1tmHsYFm14xDJs73GzHDpJ {\n  -webkit-animation: _3BXkEbBVu3FDvlRn5fKdbH var(--timing-base);\n  animation: _3BXkEbBVu3FDvlRn5fKdbH var(--timing-base);\n}\n\n@-webkit-keyframes _3BXkEbBVu3FDvlRn5fKdbH {\n  0% {\n    margin-top: calc(var(--space-small) * -1);\n    opacity: 0;\n  }\n  100% {\n    margin-top: 0px;\n    opacity: 1;\n  }\n}\n\n@keyframes _3BXkEbBVu3FDvlRn5fKdbH {\n  0% {\n    margin-top: calc(var(--space-small) * -1);\n    opacity: 0;\n  }\n  100% {\n    margin-top: 0px;\n    opacity: 1;\n  }\n}\n";
+var css_248z = "._359GUq8c3Ojy8ytOlbeU_8 {\n  -webkit-transform-origin: 50% 47.5% 0;\n          transform-origin: 50% 47.5% 0;\n  transition: -webkit-transform var(--timing-quick);\n  transition: transform var(--timing-quick);\n  transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);\n  -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n}\n\n.M6AheKOqP9CP5eAwb3x6r[open] ._359GUq8c3Ojy8ytOlbeU_8 {\n  -webkit-transform: rotateX(180deg);\n          transform: rotateX(180deg);\n}\n\n._1YM_nAG8-pDqub2waVYnIF {\n  padding: var(--space-smaller) 0 var(--space-smallest) 0;\n  border: none;\n  list-style: none;\n  cursor: pointer;\n  outline-color: none;\n  transition: background var(--timing-quick), box-shadow var(--timing-base);\n}\n\n._1YM_nAG8-pDqub2waVYnIF::-webkit-details-marker {\n  display: none;\n}\n\n._1YM_nAG8-pDqub2waVYnIF:hover,\n._1YM_nAG8-pDqub2waVYnIF:focus {\n  background: var(--color-surface--hover);\n}\n\n._1YM_nAG8-pDqub2waVYnIF:focus,\n._1YM_nAG8-pDqub2waVYnIF:active {\n  box-shadow: var(--shadow-focus);\n  border: none;\n  outline: none;\n}\n\n._1YM_nAG8-pDqub2waVYnIF * {\n  pointer-events: none;\n}\n\n.QzfYliV58f72hx9_z2PMi {\n  -ms-flex-align: baseline;\n      align-items: baseline;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.QzfYliV58f72hx9_z2PMi h4 {\n  -ms-flex: 1 0 0px;\n      flex: 1 0 0;\n}\n\n._1tmHsYFm14xDJs73GzHDpJ {\n  display: block;\n  padding: var(--space-small) 0;\n}\n\n.M6AheKOqP9CP5eAwb3x6r[open] > ._1tmHsYFm14xDJs73GzHDpJ {\n  -webkit-animation: _3BXkEbBVu3FDvlRn5fKdbH var(--timing-base);\n  animation: _3BXkEbBVu3FDvlRn5fKdbH var(--timing-base);\n}\n\n@-webkit-keyframes _3BXkEbBVu3FDvlRn5fKdbH {\n  0% {\n    margin-top: calc(var(--space-small) * -1);\n    opacity: 0;\n  }\n  100% {\n    margin-top: 0px;\n    opacity: 1;\n  }\n}\n\n@keyframes _3BXkEbBVu3FDvlRn5fKdbH {\n  0% {\n    margin-top: calc(var(--space-small) * -1);\n    opacity: 0;\n  }\n  100% {\n    margin-top: 0px;\n    opacity: 1;\n  }\n}\n";
 var styles = {"arrowIconWrapper":"_359GUq8c3Ojy8ytOlbeU_8","details":"M6AheKOqP9CP5eAwb3x6r","summary":"_1YM_nAG8-pDqub2waVYnIF","summaryWrap":"QzfYliV58f72hx9_z2PMi","content":"_1tmHsYFm14xDJs73GzHDpJ","openAnimation":"_3BXkEbBVu3FDvlRn5fKdbH"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function Disclosure({ children, title, defaultOpen = false, }) {
     const [isOpen, setOpen] = React.useState(defaultOpen);

package/dist/Divider/index.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css = "._1lHHuy-WH0jlwJ_lGhdiii {\n  --divider-width: var(--border-base);\n  --divider-color: var(--color-border);\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n\n._1La5_WQqF0YS39yJ_pZZ3e {\n  --divider-width: var(--border-thick);\n  opacity: 0.875;\n}\n\n._3ZdPUgFJAWOcd4dAR08Wlc {\n  --divider-width: var(--border-thicker);\n  opacity: 0.625;\n}\n\n.siB9kwvA8N088YvEHsPgj {\n  --divider-width: var(--border-thickest);\n  opacity: 0.375;\n}\n\n._2OCfx1xRlcq8zW27BOHOD8 {\n  height: var(--space-minuscule);\n  border-bottom: var(--divider-width) solid var(--divider-color);\n}\n\n.gxDpfq11BuK6UcrhdsKuQ {\n  width: var(--space-miniscule);\n  height: auto;\n  border-right: var(--divider-width) solid var(--divider-color);\n}\n";
+var css_248z = "._1lHHuy-WH0jlwJ_lGhdiii {\n  --divider-width: var(--border-base);\n  --divider-color: var(--color-border);\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n\n._1La5_WQqF0YS39yJ_pZZ3e {\n  --divider-width: var(--border-thick);\n  opacity: 0.875;\n}\n\n._3ZdPUgFJAWOcd4dAR08Wlc {\n  --divider-width: var(--border-thicker);\n  opacity: 0.625;\n}\n\n.siB9kwvA8N088YvEHsPgj {\n  --divider-width: var(--border-thickest);\n  opacity: 0.375;\n}\n\n._2OCfx1xRlcq8zW27BOHOD8 {\n  height: var(--space-minuscule);\n  border-bottom: var(--divider-width) solid var(--divider-color);\n}\n\n.gxDpfq11BuK6UcrhdsKuQ {\n  width: var(--space-miniscule);\n  height: auto;\n  border-right: var(--divider-width) solid var(--divider-color);\n}\n";
 var styles = {"divider":"_1lHHuy-WH0jlwJ_lGhdiii","large":"_1La5_WQqF0YS39yJ_pZZ3e","larger":"_3ZdPUgFJAWOcd4dAR08Wlc","largest":"siB9kwvA8N088YvEHsPgj","horizontal":"_2OCfx1xRlcq8zW27BOHOD8","vertical":"gxDpfq11BuK6UcrhdsKuQ"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function Divider({ size = "base", direction = "horizontal", }) {
     const className = classnames__default["default"](styles.divider, {

package/dist/Drawer/index.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-7b203f7f.js');
-var ButtonDismiss = require('../ButtonDismiss-3fb1eaf9.js');
-require('../Typography-9262511f.js');
-require('../Button-16e043ec.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Heading = require('../Heading-8c6e4e0b.js');
+var ButtonDismiss = require('../ButtonDismiss-d2d16622.js');
+require('../Typography-dd9717e7.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
@@ -18,9 +18,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css$1 = ":root {\n  --drawer-width: calc(var(--space-base) * 17.5);\n  --drawer--base-padding: var(--space-base);\n}\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n  display: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  overflow: hidden\n}\n\n@media (min-width: 640px), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width)\n}\n  }\n\n@media (min-width: 640px), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width)\n}\n  }\n\n@media (--medium-screens), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width)\n}\n  }\n\n@media (min-width: 1024px) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    --drawer-width: calc(var(--space-base) * 26.25)\n}\n  }\n\n@media (min-width: 1024px) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    --drawer-width: calc(var(--space-base) * 26.25)\n}\n  }\n\n@media (--wide-screens) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    --drawer-width: calc(var(--space-base) * 26.25)\n}\n  }\n\n._2nsJzlCbORiq2Zp1r2Zfjq {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: var(--border-base) solid var(--color-border);\n  background-color: var(--color-surface);\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.BVcThJJ-WMJCtzGk9CfUq {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._1ql7AVWGaU-1bl2yZegFqH {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-small) var(--space-base);\n  padding: var(--space-small) var(--space-base);\n  padding: var(--space-small) var(--drawer--base-padding);\n  background-color: var(--color-surface--background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.axZAc8S3vSa8nFC4yMJaW {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  overflow-y: auto;\n}\n\n._3MACAQEV8zhNH4_KtJ0DiM {\n  width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._3MACAQEV8zhNH4_KtJ0DiM > * {\n  --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._3MACAQEV8zhNH4_KtJ0DiM > * > * {\n  --public-content--padding: 0;\n}\n";
+var css_248z$1 = ":root {\n  --drawer-width: calc(var(--space-base) * 17.5);\n  --drawer--base-padding: var(--space-base);\n}\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n  display: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  overflow: hidden\n}\n\n@media (min-width: 640px), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width)\n}\n  }\n\n@media (min-width: 640px), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width)\n}\n  }\n\n@media (--medium-screens), print {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    position: relative;\n    z-index: auto;\n    width: calc(var(--space-base) * 17.5);\n    width: calc(var(--space-base) * 17.5);\n    width: var(--drawer-width)\n}\n  }\n\n@media (min-width: 1024px) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    --drawer-width: calc(var(--space-base) * 26.25)\n}\n  }\n\n@media (min-width: 1024px) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    --drawer-width: calc(var(--space-base) * 26.25)\n}\n  }\n\n@media (--wide-screens) {\n\n._3XszLcqw8Bk5bbTId3P8ZV {\n    --drawer-width: calc(var(--space-base) * 26.25)\n}\n  }\n\n._2nsJzlCbORiq2Zp1r2Zfjq {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: var(--border-base) solid var(--color-border);\n  background-color: var(--color-surface);\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.BVcThJJ-WMJCtzGk9CfUq {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._1ql7AVWGaU-1bl2yZegFqH {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-small) var(--space-base);\n  padding: var(--space-small) var(--space-base);\n  padding: var(--space-small) var(--drawer--base-padding);\n  background-color: var(--color-surface--background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.axZAc8S3vSa8nFC4yMJaW {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  overflow-y: auto;\n}\n\n._3MACAQEV8zhNH4_KtJ0DiM {\n  width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._3MACAQEV8zhNH4_KtJ0DiM > * {\n  --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._3MACAQEV8zhNH4_KtJ0DiM > * > * {\n  --public-content--padding: 0;\n}\n";
 var styles$1 = {"container":"_3XszLcqw8Bk5bbTId3P8ZV","drawer":"_2nsJzlCbORiq2Zp1r2Zfjq","open":"BVcThJJ-WMJCtzGk9CfUq","header":"_1ql7AVWGaU-1bl2yZegFqH","contentScroll":"axZAc8S3vSa8nFC4yMJaW","content":"_3MACAQEV8zhNH4_KtJ0DiM"};
-styleInject_es.styleInject(css$1);
+styleInject_es.styleInject(css_248z$1);
 
 function Drawer({ title, children, open = true, onRequestClose, id, }) {
     const drawerClassNames = classnames__default["default"](styles$1.container, open && styles$1.open);
@@ -37,9 +37,9 @@ function Header({ title, onRequestClose }) {
         React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
 }
 
-var css = ".Sc90BtF67zpsMHXh3g9kq {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);\n  grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);\n  grid-template-rows: 1fr;\n}\n";
+var css_248z = ".Sc90BtF67zpsMHXh3g9kq {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);\n  grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);\n  grid-template-rows: 1fr;\n}\n";
 var styles = {"drawerGrid":"Sc90BtF67zpsMHXh3g9kq"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function DrawerGrid({ children }) {
     return React__default["default"].createElement("div", { className: styles.drawerGrid }, children);

package/dist/Emphasis/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Emphasis = require('../Emphasis-23dc2a0a.js');
+var Emphasis = require('../Emphasis-53e963b5.js');
 require('react');
-require('../Typography-9262511f.js');
+require('../Typography-dd9717e7.js');
 require('classnames');
-require('../style-inject.es-dcee06b6.js');
+require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/{Emphasis-23dc2a0a.js → Emphasis-53e963b5.js}

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