@jobber/components 4.2.2 → 4.2.3-pre.1

package/dist/Chips/index.js

@@ -7,15 +7,15 @@ var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var jobberHooks = require('@jobber/hooks');
 var Icon = require('../Icon-405a216c.js');
-var Avatar = require('../Avatar-01c5ba8b.js');
-var Typography = require('../Typography-dd9717e7.js');
-var Tooltip = require('../Tooltip-27720f96.js');
+var Avatar = require('../Avatar-99324b59.js');
+var Typography = require('../Typography-01077f8f.js');
+var Tooltip = require('../Tooltip-8531962b.js');
 var uuid = require('uuid');
 var lodash = require('lodash');
 var reactPopper = require('react-popper');
-var Text = require('../Text-4c04ddc3.js');
-var Button = require('../Button-186ef2c1.js');
-var Spinner = require('../Spinner-35cee923.js');
+var Text = require('../Text-1c12d786.js');
+var Button = require('../Button-1063207a.js');
+var Spinner = require('../Spinner-aca146ee.js');
 require('@jobber/design');
 require('color');
 require('react-dom');
@@ -27,13 +27,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS):hover,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
-var styles$1 = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
+var css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.wrapper {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.chip {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n.hasPrefix,\n.hasSuffix {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.hasPrefix {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.hasSuffix {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n.hasPrefix.hasSuffix {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n.clickable,\n.input ~ .chip {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.chip:focus,\n.input:focus ~ .chip {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.clickable:hover,\n.input ~ .chip:not(.active):hover,\n.input:focus ~ .chip:not(.active) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.chip.active {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n.chip.invalid {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n.chip.disabled {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n.active.disabled {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n.invalid.disabled {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n.button {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n.button:hover,\n.button:focus {\n  background-color: var(--color-surface--hover);\n}\n\n.button:focus,\n.clickable .button:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n.icon > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
 styleInject_es.styleInject(css_248z$1);
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
     const buttonRef = React.useRef();
-    return (React__default["default"].createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+    return (React__default["default"].createElement("div", { ref: buttonRef, className: css_248z$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default["default"].createElement(Icon.Icon, { name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&
@@ -75,7 +74,7 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
     return React__default["default"].createElement(React__default["default"].Fragment, null);
     function renderChipIcon(icon) {
         const color = getIconColor();
-        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
+        return (React__default["default"].createElement("div", { className: css_248z$1.icon }, React__default["default"].cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
     }
     function getIconColor() {
         if (disabled && !active)
@@ -97,13 +96,13 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
     const [truncateRef, setTruncateRef] = React.useState();
     const isClickable = onClick && !disabled;
-    const classNames = classnames__default["default"](styles$1.chip, {
-        [styles$1.clickable]: isClickable,
-        [styles$1.active]: active,
-        [styles$1.disabled]: disabled,
-        [styles$1.invalid]: invalid,
-        [styles$1.hasPrefix]: prefix,
-        [styles$1.hasSuffix]: suffix,
+    const classNames = classnames__default["default"](css_248z$1.chip, {
+        [css_248z$1.clickable]: isClickable,
+        [css_248z$1.active]: active,
+        [css_248z$1.disabled]: disabled,
+        [css_248z$1.invalid]: invalid,
+        [css_248z$1.hasPrefix]: prefix,
+        [css_248z$1.hasSuffix]: suffix,
     });
     const affixProps = { active, invalid, disabled };
     const Tag = onClick ? "button" : "div";
@@ -126,10 +125,10 @@ function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestR
 }
 
 function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
-    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
+    return (React__default["default"].createElement("div", { className: css_248z$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
         const isSelected = child.props.value === selected;
         return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
+            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: css_248z$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
                     /* No op. onClick handles the change to allow deselecting. */
                 }, disabled: child.props.disabled }),
             React__default["default"].createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
@@ -157,10 +156,10 @@ function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChan
 }
 
 function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
-    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, chip => {
+    return (React__default["default"].createElement("div", { className: css_248z$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, chip => {
         const isChipActive = isChipSelected(chip.props.value);
         return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
+            React__default["default"].createElement("input", { type: "checkbox", checked: isChipActive, className: css_248z$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
             React__default["default"].createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
     })));
     function isChipSelected(value) {
@@ -200,8 +199,7 @@ function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
     }
 }
 
-var css_248z = ".UICoKaZcJNyJZu_jLSFe0 {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: var(--border-base) solid transparent;\n  border-radius: var(--radius-base);\n  transition: all var(--timing-base);\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.iYpu9Vckapbgfo7nKby6- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: var(--typography--fontSize-base);\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.iYpu9Vckapbgfo7nKby6-:focus {\n  outline: none;\n}\n\n._3Y-bhobfNvAAUslopzbOoq {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n._3pV83Z-mpuL-nlud9deXib {\n  max-height: 320px;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-small) 0;\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: var(--color-surface);\n}\n\n.yZlvrckyLt2bbuJSDc3s_,\n._1JS35aIdiRtVwq3RLMJLlj {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.yZlvrckyLt2bbuJSDc3s_:focus,\n._1P6NA2S4eCq-AiLRgspXJX {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._1JS35aIdiRtVwq3RLMJLlj {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
-var styles = {"wrapper":"UICoKaZcJNyJZu_jLSFe0","input":"iYpu9Vckapbgfo7nKby6-","menu":"_3Y-bhobfNvAAUslopzbOoq","menuList":"_3pV83Z-mpuL-nlud9deXib","menuListOption":"yZlvrckyLt2bbuJSDc3s_","loadingIndicator":"_1JS35aIdiRtVwq3RLMJLlj","activeOption":"_1P6NA2S4eCq-AiLRgspXJX"};
+var css_248z = ".wrapper {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: var(--border-base) solid transparent;\n  border-radius: var(--radius-base);\n  transition: all var(--timing-base);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.input {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: var(--typography--fontSize-base);\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n.menu {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.menuList {\n  max-height: 320px;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-small) 0;\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: var(--color-surface);\n}\n\n.menuListOption,\n.loadingIndicator {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n.menuListOption:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.menuListOption:focus,\n.activeOption {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n.loadingIndicator {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
 styleInject_es.styleInject(css_248z);
 
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
@@ -476,22 +474,22 @@ function InternalChipDismissibleInput(props) {
         return React__default["default"].cloneElement(activator, { onClick: handleOpenMenu });
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
-            React__default["default"].createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map((option, i) => (React__default["default"].createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, {
-                        [styles.activeOption]: activeIndex === i,
+        React__default["default"].createElement("input", { ref: inputRef, className: css_248z.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
+        (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", Object.assign({ ref: setPositionedElementRef, className: css_248z.menu, style: popperStyles.popper }, attributes.popper),
+            React__default["default"].createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: css_248z.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React__default["default"].createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames__default["default"](css_248z.menuListOption, {
+                        [css_248z.activeOption]: activeIndex === i,
                     }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
                     React__default["default"].createElement("span", { "aria-hidden": true }, option.prefix),
                     React__default["default"].createElement(Text.Text, null, option.label)))),
                 React__default["default"].createElement("div", { ref: visibleChildRef }),
-                isLoadingMore && (React__default["default"].createElement("div", { className: styles.loadingIndicator },
+                isLoadingMore && (React__default["default"].createElement("div", { className: css_248z.loadingIndicator },
                     React__default["default"].createElement(Spinner.Spinner, { size: "small", inline: true }))))))));
 }
 
 function InternalChipDismissible(props) {
     const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
-    return (React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+    return (React__default["default"].createElement("div", { ref: wrapperRef, className: css_248z.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
         sortedVisibleChipOptions.map(chip => (React__default["default"].createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.value}. Press delete or backspace to remove ${chip.value}`, tabIndex: 0, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
         React__default["default"].createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
 }

package/dist/ConfirmationModal/index.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-ac668c46.js');
+var ConfirmationModal = require('../ConfirmationModal-c8b6667c.js');
 require('react');
 require('@jobber/hooks');
-require('../Modal-e41f9284.js');
+require('../Modal-2769f7e5.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-8c6e4e0b.js');
-require('../Typography-dd9717e7.js');
-require('../Button-186ef2c1.js');
+require('../Heading-19272e83.js');
+require('../Typography-01077f8f.js');
+require('../Button-1063207a.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-d2d16622.js');
-require('../Content-af82acba.js');
-require('../Markdown-5d86d6e7.js');
+require('../ButtonDismiss-bc13d061.js');
+require('../Content-373bbaee.js');
+require('../Markdown-b38da515.js');
 require('react-markdown');
-require('../Text-4c04ddc3.js');
-require('../Emphasis-53e963b5.js');
+require('../Text-1c12d786.js');
+require('../Emphasis-ec5bfff3.js');
 
 
 

package/dist/{ConfirmationModal-ac668c46.js → ConfirmationModal-c8b6667c.js}

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

package/dist/Content/index.js

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

package/dist/Content-373bbaee.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+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_248z$1 = ".base > :not(:last-child) {\n  margin-bottom: var(--space-base);\n}\n\n.small > :not(:last-child) {\n  margin-bottom: var(--space-small);\n}\n\n.large > :not(:last-child) {\n  margin-bottom: var(--space-large);\n}\n";
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = ".padded {\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
+styleInject_es.styleInject(css_248z);
+
+function Content({ children, spacing = "base" }) {
+    const className = classnames__default["default"](css_248z.padded, css_248z$1[spacing]);
+    return React__default["default"].createElement("div", { className: className }, children);
+}
+
+exports.Content = Content;

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-c0f88c0f.js');
-var Content = require('../Content-af82acba.js');
-var Emphasis = require('../Emphasis-53e963b5.js');
+var Card = require('../Card-e9b9b7c9.js');
+var Content = require('../Content-373bbaee.js');
+var Emphasis = require('../Emphasis-ec5bfff3.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-8c6e4e0b.js');
-require('../Typography-dd9717e7.js');
-require('../Button-186ef2c1.js');
+require('../Heading-19272e83.js');
+require('../Typography-01077f8f.js');
+require('../Button-1063207a.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-b5e8d8f9.js');
+require('../Menu-be1689cd.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks');

package/dist/DataTable/index.js

@@ -8,19 +8,19 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-9e93d069.js');
-var Button = require('../Button-186ef2c1.js');
-var Text = require('../Text-4c04ddc3.js');
-require('../FormField-e1c3af82.js');
+var Option = require('../Option-7e17c787.js');
+var Button = require('../Button-1063207a.js');
+var Text = require('../Text-1c12d786.js');
+require('../FormField-a62cc4de.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-e09f5d20.js');
+require('../InputValidation-96fa6b11.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-aca146ee.js');
 require('react-router-dom');
-require('../Typography-dd9717e7.js');
+require('../Typography-01077f8f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,12 +46,11 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
 
-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"};
+var css_248z$3 = ".dataTableContainer {\n  position: relative;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n.tableContainer {\n  overflow: auto;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n.table 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.table thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.table tbody tr {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.table tbody tr td {\n  padding: var(--space-base);\n}\n\n.table 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.table tfoot tr th {\n  padding: var(--space-base);\n}\n\n.pinFirstColumn thead tr th:first-child,\n.pinFirstColumn 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.pinFirstColumn th:first-child::after,\n.pinFirstColumn 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.stickyHeader {\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.pinFirstHeaderSortable:first-child:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n.sortableColumn:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n.clickableRow:hover,\n.clickableRow:hover :first-child {\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n\n.emptyState {\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";
 styleInject_es.styleInject(css_248z$3);
 
 function Body({ table, onRowClick, emptyState, }) {
-    const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
+    const bodyRowClasses = classnames__default["default"]({ [css_248z$3.clickableRow]: !!onRowClick });
     const handleRowClick = React.useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
@@ -65,7 +64,7 @@ function Body({ table, onRowClick, emptyState, }) {
                     maxWidth: cell.column.columnDef.maxSize,
                 } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
-    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState));
+    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](css_248z$3.emptyState) }, emptyState));
 }
 
 function createTableSettings(data, columns, options) {
@@ -121,8 +120,7 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-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"};
+var css_248z$2 = ".pagination {\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  gap: var(--space-small);\n}\n\n.paginationInfo {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n.paginationNav {\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  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.paginationSelect {\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  gap: var(--space-small);\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n.paginationSelectLabel {\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.paginationButtons {\n  display: -ms-flexbox;\n  display: flex;\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.paginationButtons {\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (--handhelds) {\n\n.paginationButtons {\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n";
 styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
@@ -132,23 +130,22 @@ function Pagination({ table, itemsPerPage, totalItems, }) {
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     const itemsPerPageOptions = React.useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
-    return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: styles$2.pagination },
-        React__default["default"].createElement("div", { className: styles$2.paginationInfo },
-            React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
-        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
-        React__default["default"].createElement("div", { className: styles$2.paginationNav },
-            React__default["default"].createElement("div", { className: styles$2.paginationSelect },
+    return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: css_248z$2.pagination },
+        React__default["default"].createElement("div", { className: css_248z$2.paginationInfo },
+            React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: css_248z$2.pagination },
+        React__default["default"].createElement("div", { className: css_248z$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
+        React__default["default"].createElement("div", { className: css_248z$2.paginationNav },
+            React__default["default"].createElement("div", { className: css_248z$2.paginationSelect },
                 React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
-                React__default["default"].createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
-            React__default["default"].createElement("div", { className: styles$2.paginationButtons },
+                React__default["default"].createElement("span", { className: css_248z$2.paginationSelectLabel }, "per page")),
+            React__default["default"].createElement("div", { className: css_248z$2.paginationButtons },
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }),
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => table.nextPage(), disabled: !table.getCanNextPage() })))));
 }
 
-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"};
+var css_248z$1 = ".mobileFooterContainer {\n  padding: var(--space-base);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n.mobileFooterRow {\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\"] .mobileFooterRow * {\n  text-align: left;\n}\n\n.mobileFooterRow *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .mobileFooterRow * {\n  text-align: right;\n}\n\n.mobileFooterRow *:dir(rtl) {\n  text-align: right;\n}\n\n.mobileFooterRow * {\n  text-align: start;\n}\n\n[dir=\"ltr\"] .mobileFooterRowData,[dir=\"ltr\"] \n.mobileFooterRowData * {\n  text-align: right;\n}\n\n.mobileFooterRowData:dir(ltr),\n.mobileFooterRowData *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .mobileFooterRowData,[dir=\"rtl\"] \n.mobileFooterRowData * {\n  text-align: left;\n}\n\n.mobileFooterRowData:dir(rtl),\n.mobileFooterRowData *:dir(rtl) {\n  text-align: left;\n}\n\n.mobileFooterRowData,\n.mobileFooterRowData * {\n  font-weight: normal;\n  text-align: end;\n}\n\n.mobileFooterRow:not(:last-child) {\n  padding-bottom: var(--space-small);\n}\n";
 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: {
@@ -156,11 +153,11 @@ const DesktopView = ({ table }) => (React__default["default"].createElement("tfo
         minWidth: header.column.columnDef.minSize,
         maxWidth: header.column.columnDef.maxSize,
     } }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))))));
-const HandheldView = ({ table }) => (React__default["default"].createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
+const HandheldView = ({ table }) => (React__default["default"].createElement("div", { className: css_248z$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
     .filter(header => header.column.columnDef.footer)
-    .map((header, index) => (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
+    .map((header, index) => (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: css_248z$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: css_248z$1.mobileFooterRow, key: footerGroup.id },
     reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-    React__default["default"].createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
+    React__default["default"].createElement("div", { className: css_248z$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
 const Footer = ({ table, viewType = "handheld", }) => {
     const hasFooter = table
         .getAllColumns()
@@ -171,8 +168,7 @@ const Footer = ({ table, viewType = "handheld", }) => {
     return null;
 };
 
-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_"};
+var css_248z = ".sortIcon {\n  padding-right: var(--space-small);\n}\n.sortIcon path {\n  fill: var(--color-greyBlue);\n}\n.sortIcon path.active {\n  fill: var(--color-blue);\n}\n.sortIcon path.inactive {\n  fill: var(--color-greyBlue--lighter);\n}\n";
 styleInject_es.styleInject(css_248z);
 
 var SortDirection;
@@ -189,31 +185,31 @@ const sortStyleIndex = [
     },
     {
         option: SortDirection.ascending,
-        upArrowStyle: classnames__default["default"](styles.active),
-        downArrowStyle: classnames__default["default"](styles.inactive),
+        upArrowStyle: classnames__default["default"](css_248z.active),
+        downArrowStyle: classnames__default["default"](css_248z.inactive),
     },
     {
         option: SortDirection.descending,
-        upArrowStyle: classnames__default["default"](styles.inactive),
-        downArrowStyle: classnames__default["default"](styles.active),
+        upArrowStyle: classnames__default["default"](css_248z.inactive),
+        downArrowStyle: classnames__default["default"](css_248z.active),
     },
 ];
 function SortIcon({ direction }) {
     const foundStyle = sortStyleIndex.find(style => style.option === direction);
     const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.sortIcon) },
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](css_248z.sortIcon) },
         React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default["default"].createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
             React__default["default"].createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
 function Header({ table, stickyHeader, sorting, onRowClick, }) {
-    const stickyClass = classnames__default["default"]({ [styles$3.stickyHeader]: stickyHeader });
+    const stickyClass = classnames__default["default"]({ [css_248z$3.stickyHeader]: stickyHeader });
     return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
         const isSorting = sorting && header.column.getCanSort();
         return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
-                ? classnames__default["default"](styles$3.sortableColumn, {
-                    [styles$3.pinFirstHeaderSortable]: !!onRowClick,
+                ? classnames__default["default"](css_248z$3.sortableColumn, {
+                    [css_248z$3.pinFirstHeaderSortable]: !!onRowClick,
                 })
                 : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
                 width: header.getSize(),
@@ -239,12 +235,12 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         pagination,
         sorting,
     });
-    const tableClasses = classnames__default["default"](styles$3.table, {
-        [styles$3.pinFirstColumn]: pinFirstColumn,
+    const tableClasses = classnames__default["default"](css_248z$3.table, {
+        [css_248z$3.pinFirstColumn]: pinFirstColumn,
     });
     const table = reactTable.useReactTable(tableSettings);
-    return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
-        React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height }, ref: ref },
+    return (React__default["default"].createElement("div", { className: css_248z$3.dataTableContainer },
+        React__default["default"].createElement("div", { className: css_248z$3.tableContainer, style: { height }, ref: ref },
             React__default["default"].createElement("table", { className: tableClasses },
                 React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
                 React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-90d542d7.js');
+var DatePicker = require('../DatePicker-f62e2518.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-dd9717e7.js');
-require('../Button-186ef2c1.js');
+require('../Typography-01077f8f.js');
+require('../Button-1063207a.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');