@jobber/components 4.77.4 → 4.77.6-JOB-84042.2

package/dist/{Combobox-d85ce78c.js → Combobox-d24f1fec.js}

@@ -6,15 +6,18 @@ var ReactDOM = require('react-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
-var Glimmer = require('./Glimmer-f40d5ea5.js');
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var Glimmer = require('./Glimmer-7c317864.js');
+var Spinner = require('./Spinner-9d8fc7ff.js');
+var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
+var useInView = require('@jobber/hooks/useInView');
 var Typography = require('./Typography-c45bf216.js');
 var Button = require('./Button-b73a5e01.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Chip = require('./Chip-c91fd6c8.js');
+var Chip = require('./Chip-3d1bfddc.js');
 var debounce = require('lodash/debounce');
 var noop = require('lodash/noop');
 require('@jobber/design');
@@ -28,13 +31,13 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 
-var css_248z$6 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
-var styles$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
-styleInject_es.styleInject(css_248z$6);
+var css_248z$7 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
+var styles$7 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject_es.styleInject(css_248z$7);
 
-var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles$5 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
-styleInject_es.styleInject(css_248z$5);
+var css_248z$6 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$6 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+styleInject_es.styleInject(css_248z$6);
 
 function ComboboxContentSearch(props) {
     const searchRef = React.useRef(null);
@@ -46,9 +49,9 @@ function ComboboxContentSearch(props) {
             }, 0);
         }
     }, [props.open]);
-    return (React__default["default"].createElement("div", { className: styles$5.search },
-        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$5.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
-        props.searchValue && (React__default["default"].createElement("button", { className: styles$5.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+    return (React__default["default"].createElement("div", { className: styles$6.search },
+        React__default["default"].createElement("input", { type: "search", ref: searchRef, className: styles$6.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React__default["default"].createElement("button", { className: styles$6.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
             React__default["default"].createElement(Icon.Icon, { name: "remove", size: "small" })))));
     function clearSearch() {
         var _a;
@@ -62,13 +65,13 @@ function ComboboxContentSearch(props) {
     }
 }
 
-var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n";
-var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-"};
-styleInject_es.styleInject(css_248z$4);
+var css_248z$5 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc((16px / 2) * 33.33);\n\n  max-height: calc(calc(16px / 2) * 33.33);\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: sticky;\n  bottom: 0;\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n  display: none;\n}\n";
+var styles$5 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+styleInject_es.styleInject(css_248z$5);
 
-var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
-var styles$3 = {"option":"_5QdRGmaNHvc-"};
-styleInject_es.styleInject(css_248z$3);
+var css_248z$4 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$4 = {"option":"_5QdRGmaNHvc-"};
+styleInject_es.styleInject(css_248z$4);
 
 const ComboboxContext = React__default["default"].createContext({});
 function ComboboxContextProvider(_a) {
@@ -80,29 +83,42 @@ function ComboboxOption(props) {
     const { selected, selectionHandler } = React.useContext(ComboboxContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     return (React__default["default"].createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
-            selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$3.option) },
+            selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$4.option) },
         props.label,
-        isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+        React__default["default"].createElement("div", null, isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" }))));
+}
+
+var css_248z$3 = "._3s8-RC5Ky3s- {\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n";
+var styles$3 = {"trigger":"_3s8-RC5Ky3s-"};
+styleInject_es.styleInject(css_248z$3);
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView.useInView();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React__default["default"].createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles$3.trigger }));
 }
 
 function ComboboxContentList(props) {
     const optionsExist = props.options.length > 0;
-    const showOptions = optionsExist && !props.loading;
     const hasSearchTerm = props.searchValue.length > 0;
     const { listScrollState } = useScrollState(props.optionsListRef, props.options);
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$4.container, styles$4[listScrollState]) },
-        optionsExist && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
-            showOptions &&
-                props.options.map(option => {
-                    return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
-                }),
-            props.loading && (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default["default"].createElement("div", { className: styles$4.loadingContainer, key: index },
-                React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))))),
-        hasSearchTerm && !optionsExist && (React__default["default"].createElement("div", { className: styles$4.filterMessage },
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$5.container, styles$5[listScrollState]) },
+        optionsExist && (React__default["default"].createElement("ul", { className: styles$5.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
+            props.options.map(option => {
+                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
+            }),
+            React__default["default"].createElement("div", { className: classnames__default["default"]([styles$5.loadingContainer, styles$5.hasOptions]) },
+                React__default["default"].createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
+            props.onLoadMore && (React__default["default"].createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+        props.loading && !optionsExist && (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default["default"].createElement("div", { className: styles$5.loadingContainer, key: index },
+            React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
+        hasSearchTerm && !props.loading && !optionsExist && (React__default["default"].createElement("div", { className: styles$5.filterMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" },
                 "No results for ",
                 `“${props.searchValue}”`))),
-        !hasSearchTerm && !optionsExist && (React__default["default"].createElement("div", { className: styles$4.emptyStateMessage },
+        !hasSearchTerm && !props.loading && !optionsExist && (React__default["default"].createElement("div", { className: styles$5.emptyStateMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
 }
 function getZeroIndexStateText(subjectNoun) {
@@ -123,7 +139,7 @@ function useScrollState(optionsListRef, options) {
                 else if (scrollTop === 0) {
                     setlistScrollState("scrollTop");
                 }
-                else if (scrollTop + clientHeight === scrollHeight) {
+                else if (scrollTop + clientHeight >= scrollHeight) {
                     setlistScrollState("scrollBottom");
                 }
                 else {
@@ -283,16 +299,16 @@ function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { optionsListRef } = useComboboxContent(props.open, props.selected);
     const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
-    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$6.content, { [styles$6.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$7.content, { [styles$7.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
         React__default["default"].createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
-        props.multiselect && optionsExist && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
             }, onSelectAll: () => {
                 props.selectedStateSetter(props.options);
             } })),
-        React__default["default"].createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading }),
-        props.actionElements && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
-                [styles$6.actionPadding]: index === childrenArray.length - 1,
+        React__default["default"].createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        props.actionElements && (React__default["default"].createElement("div", { className: styles$7.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+                [styles$7.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
     return ReactDOM__default["default"].createPortal(template, document.body);
 }
@@ -335,15 +351,16 @@ var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  b
 var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
 styleInject_es.styleInject(css_248z);
 
-function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = React.useCallback(() => {
         setOpen(false);
         setSearchValue("");
+        onSearch && onSearch("");
         onClose && onClose();
         if (selectedOptions.length > 0) {
             shouldScroll.current = true;
         }
-    }, [setOpen, setSearchValue, onClose, selectedOptions.length]);
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
     const handleSelection = React.useCallback((selection) => {
         if (multiSelect) {
             handleMultiSelect(selectedStateSetter, selectedOptions, selection);
@@ -376,7 +393,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
-    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,
@@ -448,7 +465,7 @@ function Combobox(props) {
         React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper },
             open && (React__default["default"].createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
             triggerElement || (React__default["default"].createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
-            React__default["default"].createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange }))));
+            React__default["default"].createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
 Combobox.Activator = ComboboxActivator;
 Combobox.Action = ComboboxAction;

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-0a6f3a28.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('classnames');
@@ -15,11 +15,12 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
+require('../Menu-5fc613a1.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataList/DataList.const.d.ts

@@ -15,6 +15,7 @@ export declare const SEARCH_DEBOUNCE_DELAY: number;
 export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 export declare const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+export declare const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
 export declare const TRANSITION_DURATION_IN_SECONDS: number;
 export declare const TRANSITION_DELAY_IN_SECONDS: number;
 export {};

package/dist/DataList/DataList.types.d.ts

@@ -39,6 +39,10 @@ export interface SortableOptions {
     readonly label: string;
     readonly order: "asc" | "desc";
 }
+export interface DataListSortable {
+    readonly key: string;
+    readonly options?: SortableOptions[];
+}
 export interface DataListProps<T extends DataListObject> {
     /**
      * The data to render in the DataList.
@@ -92,10 +96,7 @@ export interface DataListProps<T extends DataListObject> {
      * `onSort`: The callback function when the user sorting a column.
      */
     readonly sorting?: {
-        readonly sortable: {
-            key: string;
-            options?: SortableOptions[];
-        }[];
+        readonly sortable: DataListSortable[];
         readonly state: DataListSorting | undefined;
         readonly onSort: (sorting?: DataListSorting) => void;
     };

package/dist/DataList/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./DataList";
-export { DataListItemType, DataListSorting, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";
+export { DataListItemType, DataListSorting, DataListSortable, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";

package/dist/DataList/index.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Text = require('../Text-259af966.js');
-var Glimmer = require('../Glimmer-f40d5ea5.js');
+var Glimmer = require('../Glimmer-7c317864.js');
 var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var Tooltip = require('../Tooltip-27771182.js');
+var Tooltip = require('../Tooltip-ef3d6ef4.js');
 var Button = require('../Button-b73a5e01.js');
 var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
@@ -23,26 +23,28 @@ var Icon = require('../Icon-405a216c.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-1e8e4bd3.js');
 var ReactDOM = require('react-dom');
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
-var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Combobox = require('../Combobox-d85ce78c.js');
-var Chip = require('../Chip-c91fd6c8.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
+var Combobox = require('../Combobox-d24f1fec.js');
+var Chip = require('../Chip-3d1bfddc.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-6c71361e.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
 require('../Content-e3f7b6fc.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('uuid');
 require('react-hook-form');
+require('../AnimatedPresence-20a02aaa.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../FormField-b0e74d32.js');
+require('../FormField-b4e6c549.js');
 require('@jobber/hooks/useShowClear');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,7 +54,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.TFO76ysivmg-:empty {\n  display: none;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
 var styles$g = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
 styleInject_es.styleInject(css_248z$g);
 
@@ -144,6 +146,7 @@ const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
 const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
@@ -304,13 +307,13 @@ styleInject_es.styleInject(css_248z$8);
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
     useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
     useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
+    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map(option => (React__default["default"].createElement("li", { className: styles$8.option, key: option.id, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
         option.label,
         option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
     function handleKeyDown(event, option) {
@@ -320,9 +323,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
     }
     function handleClickOutside(event) {
         var _a, _b;
-        const isClickInsideOptions = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
-        const isClickInsideHeader = (_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
-        if (!isClickInsideOptions && !isClickInsideHeader) {
+        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
+        if (!isClickInside) {
             onClose();
         }
     }
@@ -332,9 +335,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
 function DataListHeaderTile({ headers, headerKey, visible = false, }) {
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const { sorting } = useDataListContext();
-    const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
+    const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
     const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
-    const dataListHeaderTileRef = React__default["default"].useRef(null);
+    const dataListHeaderTileRef = React.useRef(null);
     const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
     const isSortable = Boolean(sortableItem);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
@@ -344,15 +347,15 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }), onClick: handleOnClick, ref: dataListHeaderTileRef },
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
         isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
-        (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
-    function toggleSorting(newSortingKey, newId, newLabel, newOrder) {
+        isSortable && (React__default["default"].createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
         const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
         const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
-        if (isSameKey && isDescending && newOrder === undefined) {
+        if (isSameKey && isDescending) {
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
             return;
         }
-        const sortingOrder = newOrder || (isSameKey && !isDescending ? "desc" : "asc");
+        const sortingOrder = isSameKey ? "desc" : "asc";
         setSorting(newSortingKey, newId, newLabel, sortingOrder);
     }
     function setSorting(newSortingKey, newId, newLabel, newOrder) {
@@ -371,11 +374,8 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
             setIsDropDownOpen(!isDropDownOpen);
         }
         else {
-            const headerValue = headers[headerKey];
             const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
-            if (headerValue !== undefined) {
-                toggleSorting(id, headerKey, headerValue);
-            }
+            toggleSorting(id, headerKey, headers[headerKey]);
         }
     }
     function handleSelectChange(newSortOption) {
@@ -1019,7 +1019,7 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
+    return (React__default["default"].createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
 }
 
 var css_248z$4 = ".tj0MOMhLEEY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n  position: absolute;\n  top: 50%;\n  right: calc((16px * 3) - (16px / 4));\n  right: calc(calc(16px * 3) - calc(16px / 4));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  padding: calc(16px / 4) 0;\n  padding: var(--space-smaller) 0;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  opacity: 0;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
@@ -1233,6 +1233,8 @@ function DataList(_a) {
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
     const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
     const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
+    const headerCount = Object.keys(props.headers).length;
+    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || headerCount > 0;
     return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
@@ -1245,7 +1247,7 @@ function DataList(_a) {
             registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
-        React__default["default"].createElement(InternalDataList, null)));
+        React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
     function registerLayoutBreakpoints(size) {
         setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
     }
@@ -1253,7 +1255,7 @@ function DataList(_a) {
         setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
     }
 }
-function InternalDataList() {
+function InternalDataList({ shouldRenderStickyHeader, }) {
     const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
     const backToTopRef = React.useRef(null);
     const initialLoading = loadingState === "initial";
@@ -1264,12 +1266,12 @@ function InternalDataList() {
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement("div", { ref: backToTopRef }),
-        React__default["default"].createElement(DataListStickyHeader, null,
+        shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader, null,
             React__default["default"].createElement("div", { className: styles$g.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
             React__default["default"].createElement(InternalDataListStatusBar, null),
-            React__default["default"].createElement(DataListHeader, null)),
+            React__default["default"].createElement(DataListHeader, null))),
         initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
         layoutComponents,

package/dist/DataTable/index.js

@@ -7,19 +7,19 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Glimmer = require('../Glimmer-f40d5ea5.js');
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-b715f6b4.js');
+var Glimmer = require('../Glimmer-7c317864.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
+var Option = require('../Option-8565da71.js');
 var Button = require('../Button-b73a5e01.js');
 var Text = require('../Text-259af966.js');
 require('../Content-e3f7b6fc.js');
-require('../FormField-b0e74d32.js');
+require('../FormField-b4e6c549.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 require('react-router-dom');

package/dist/Form/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 

package/dist/FormField/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-b0e74d32.js');
-require('../tslib.es6-5b8768b7.js');
+var FormField = require('../FormField-b4e6c549.js');
+require('../tslib.es6-754e2961.js');
 require('react');
 require('uuid');
 require('react-hook-form');
@@ -16,7 +16,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
 require('../Text-259af966.js');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/{FormField-b0e74d32.js → FormField-b4e6c549.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
 var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
@@ -10,7 +10,7 @@ var useShowClear = require('@jobber/hooks/useShowClear');
 var Button = require('./Button-b73a5e01.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
-var InputValidation = require('./InputValidation-a7a737f9.js');
+var InputValidation = require('./InputValidation-05e839fa.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }