@jobber/components 4.2.2-pree.0 → 4.2.2-pree.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-99324b59.js');
-var Typography = require('../Typography-01077f8f.js');
-var Tooltip = require('../Tooltip-8531962b.js');
+var Avatar = require('../Avatar-98b59e17.js');
+var Typography = require('../Typography-c0bec306.js');
+var Tooltip = require('../Tooltip-3ab4c6db.js');
 var uuid = require('uuid');
 var lodash = require('lodash');
 var reactPopper = require('react-popper');
-var Text = require('../Text-1c12d786.js');
-var Button = require('../Button-1063207a.js');
-var Spinner = require('../Spinner-aca146ee.js');
+var Text = require('../Text-7c99b48d.js');
+var Button = require('../Button-f7b0f481.js');
+var Spinner = require('../Spinner-3480bc34.js');
 require('@jobber/design');
 require('color');
 require('react-dom');
@@ -27,12 +27,13 @@ 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.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";
+var css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.zn6onyiQVmA- {\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.PEnZzMEgbhU- {\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.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.dtysUhwYdG4- {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.xGaMCAYsdwA- {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n.dtysUhwYdG4-.xGaMCAYsdwA- {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n.SNT7gGV-h-o-,\n.W4D98cvEth4- ~ .PEnZzMEgbhU- {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.PEnZzMEgbhU-:focus,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\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.W4D98cvEth4- {\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._0-ZWexS4Gfg- {\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._0-ZWexS4Gfg-:hover,\n._0-ZWexS4Gfg-:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-: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.DQPnZP4UZpw- > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n.DQPnZP4UZpw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
+var styles$1 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-"};
 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: 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" },
+    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" },
         React__default["default"].createElement(Icon.Icon, { name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&
@@ -74,7 +75,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: css_248z$1.icon }, React__default["default"].cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
+        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
     }
     function getIconColor() {
         if (disabled && !active)
@@ -96,13 +97,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"](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 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 affixProps = { active, invalid, disabled };
     const Tag = onClick ? "button" : "div";
@@ -125,10 +126,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: css_248z$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
+    return (React__default["default"].createElement("div", { className: styles$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: css_248z$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: styles$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 }))));
@@ -156,10 +157,10 @@ function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChan
 }
 
 function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
-    return (React__default["default"].createElement("div", { className: css_248z$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, chip => {
+    return (React__default["default"].createElement("div", { className: styles$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: css_248z$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: styles$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) {
@@ -199,7 +200,8 @@ function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
     }
 }
 
-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";
+var css_248z = ".sCNIjluCskc- {\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.MFUlz1WQLdk- {\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.MFUlz1WQLdk-:focus {\n  outline: none;\n}\n\n.V9eYJdjPAeY- {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.LdytkOeCU9c- {\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.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\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.y7Cz2u8BuNE-:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._-7bmao8Q9As- {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
+var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-"};
 styleInject_es.styleInject(css_248z);
 
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
@@ -474,22 +476,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: 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,
+        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,
                     }), 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: css_248z.loadingIndicator },
+                isLoadingMore && (React__default["default"].createElement("div", { className: styles.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: css_248z.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
+    return (React__default["default"].createElement("div", { ref: wrapperRef, className: styles.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-c8b6667c.js');
+var ConfirmationModal = require('../ConfirmationModal-2ca04371.js');
 require('react');
 require('@jobber/hooks');
-require('../Modal-2769f7e5.js');
+require('../Modal-bb8547df.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-19272e83.js');
-require('../Typography-01077f8f.js');
-require('../Button-1063207a.js');
+require('../Heading-f94abfd1.js');
+require('../Typography-c0bec306.js');
+require('../Button-f7b0f481.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-bc13d061.js');
-require('../Content-373bbaee.js');
-require('../Markdown-b38da515.js');
+require('../ButtonDismiss-7b2ceeaa.js');
+require('../Content-db546523.js');
+require('../Markdown-18a7298f.js');
 require('react-markdown');
-require('../Text-1c12d786.js');
-require('../Emphasis-ec5bfff3.js');
+require('../Text-7c99b48d.js');
+require('../Emphasis-6794fc77.js');
 
 
 

package/dist/{ConfirmationModal-c8b6667c.js → ConfirmationModal-2ca04371.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
-var Modal = require('./Modal-2769f7e5.js');
-var Content = require('./Content-373bbaee.js');
-var Markdown = require('./Markdown-b38da515.js');
+var Modal = require('./Modal-bb8547df.js');
+var Content = require('./Content-db546523.js');
+var Markdown = require('./Markdown-18a7298f.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-373bbaee.js');
+var Content = require('../Content-db546523.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{Content-373bbaee.js → Content-db546523.js}

@@ -9,14 +9,16 @@ 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 = ".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";
+var css_248z$1 = ".SRYe3DkjH1c- > :not(:last-child) {\n  margin-bottom: var(--space-base);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n  margin-bottom: var(--space-small);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n  margin-bottom: var(--space-large);\n}\n";
+var spacings = {"base":"SRYe3DkjH1c-","small":"rDJFaGPzCbE-","large":"_7TZ4MI3kr4Y-"};
 styleInject_es.styleInject(css_248z$1);
 
-var css_248z = ".padded {\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
+var css_248z = "._4On2F-4nWuY- {\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
+var styles = {"padded":"_4On2F-4nWuY-"};
 styleInject_es.styleInject(css_248z);
 
 function Content({ children, spacing = "base" }) {
-    const className = classnames__default["default"](css_248z.padded, css_248z$1[spacing]);
+    const className = classnames__default["default"](styles.padded, spacings[spacing]);
     return React__default["default"].createElement("div", { className: className }, children);
 }
 

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-e9b9b7c9.js');
-var Content = require('../Content-373bbaee.js');
-var Emphasis = require('../Emphasis-ec5bfff3.js');
+var Card = require('../Card-13d52e52.js');
+var Content = require('../Content-db546523.js');
+var Emphasis = require('../Emphasis-6794fc77.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-19272e83.js');
-require('../Typography-01077f8f.js');
-require('../Button-1063207a.js');
+require('../Heading-f94abfd1.js');
+require('../Typography-c0bec306.js');
+require('../Button-f7b0f481.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-be1689cd.js');
+require('../Menu-94526305.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-7e17c787.js');
-var Button = require('../Button-1063207a.js');
-var Text = require('../Text-1c12d786.js');
-require('../FormField-a62cc4de.js');
+var Option = require('../Option-8dc5fb8f.js');
+var Button = require('../Button-f7b0f481.js');
+var Text = require('../Text-7c99b48d.js');
+require('../FormField-2ff2e827.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-96fa6b11.js');
+require('../InputValidation-e36c9d5e.js');
 require('framer-motion');
-require('../Spinner-aca146ee.js');
+require('../Spinner-3480bc34.js');
 require('react-router-dom');
-require('../Typography-01077f8f.js');
+require('../Typography-c0bec306.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,11 +46,12 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
 
-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";
+var css_248z$3 = ".m5A5oeRFaMs- {\n  position: relative;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n.cY-5BrIIUg8- {\n  overflow: auto;\n}\n\n.y8xnHe7fwrI- {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n.y8xnHe7fwrI- 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.y8xnHe7fwrI- thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.y8xnHe7fwrI- tbody tr {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.y8xnHe7fwrI- tbody tr:last-child {\n  border-bottom: none;\n}\n\n.y8xnHe7fwrI- tbody tr td {\n  padding: var(--space-base);\n}\n\n.y8xnHe7fwrI- 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.y8xnHe7fwrI- tfoot tr th {\n  padding: var(--space-base);\n}\n\n.t8QYvdtkQXQ- thead tr th:first-child,\n.t8QYvdtkQXQ- 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.t8QYvdtkQXQ- th:first-child::after,\n.t8QYvdtkQXQ- 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.Y21JuHX6fhk- {\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.PJEX8dlqCMA-:first-child:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._9ps4aWGs8W0-:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._59XEEB8l5pI-:hover,\n._59XEEB8l5pI-:hover :first-child {\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n\n.a2BGGBkY5J8- {\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":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
 styleInject_es.styleInject(css_248z$3);
 
 function Body({ table, onRowClick, emptyState, }) {
-    const bodyRowClasses = classnames__default["default"]({ [css_248z$3.clickableRow]: !!onRowClick });
+    const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
     const handleRowClick = React.useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
@@ -64,7 +65,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"](css_248z$3.emptyState) }, emptyState));
+    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState));
 }
 
 function createTableSettings(data, columns, options) {
@@ -120,7 +121,8 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-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";
+var css_248z$2 = ".zn0VRVhObt0- {\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._1d4uh90gfSI- {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n._5Hh01rJlUDs- {\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.N5rXFBBzPxk- {\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.Uq2TUaf9ang- {\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.PeLwUZ2wWPI- {\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.PeLwUZ2wWPI- {\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (--handhelds) {\n\n.PeLwUZ2wWPI- {\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n";
+var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","paginationNav":"_5Hh01rJlUDs-","paginationSelect":"N5rXFBBzPxk-","paginationSelectLabel":"Uq2TUaf9ang-","paginationButtons":"PeLwUZ2wWPI-"};
 styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
@@ -130,22 +132,23 @@ 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: 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 },
+    return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: styles$2.pagination },
+        React__default["default"].createElement("div", { className: styles$2.paginationInfo },
+            React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
+        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
+        React__default["default"].createElement("div", { className: styles$2.paginationNav },
+            React__default["default"].createElement("div", { className: styles$2.paginationSelect },
                 React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: 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: css_248z$2.paginationSelectLabel }, "per page")),
-            React__default["default"].createElement("div", { className: css_248z$2.paginationButtons },
+                React__default["default"].createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
+            React__default["default"].createElement("div", { className: styles$2.paginationButtons },
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => 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 = ".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";
+var css_248z$1 = "._0FexNr-lIgA- {\n  padding: var(--space-base);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n.PKlqQjoQ6DY- {\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\"] .PKlqQjoQ6DY- * {\n  text-align: left;\n}\n\n.PKlqQjoQ6DY- *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .PKlqQjoQ6DY- * {\n  text-align: right;\n}\n\n.PKlqQjoQ6DY- *:dir(rtl) {\n  text-align: right;\n}\n\n.PKlqQjoQ6DY- * {\n  text-align: start;\n}\n\n[dir=\"ltr\"] .ItTcVYUbVNM-,[dir=\"ltr\"] \n.ItTcVYUbVNM- * {\n  text-align: right;\n}\n\n.ItTcVYUbVNM-:dir(ltr),\n.ItTcVYUbVNM- *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .ItTcVYUbVNM-,[dir=\"rtl\"] \n.ItTcVYUbVNM- * {\n  text-align: left;\n}\n\n.ItTcVYUbVNM-:dir(rtl),\n.ItTcVYUbVNM- *:dir(rtl) {\n  text-align: left;\n}\n\n.ItTcVYUbVNM-,\n.ItTcVYUbVNM- * {\n  font-weight: normal;\n  text-align: end;\n}\n\n.PKlqQjoQ6DY-:not(:last-child) {\n  padding-bottom: var(--space-small);\n}\n";
+var styles$1 = {"mobileFooterContainer":"_0FexNr-lIgA-","mobileFooterRow":"PKlqQjoQ6DY-","mobileFooterRowData":"ItTcVYUbVNM-"};
 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: {
@@ -153,11 +156,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: css_248z$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: styles$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: 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 },
+    .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 },
     reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-    React__default["default"].createElement("div", { className: css_248z$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
+    React__default["default"].createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
 const Footer = ({ table, viewType = "handheld", }) => {
     const hasFooter = table
         .getAllColumns()
@@ -168,7 +171,8 @@ const Footer = ({ table, viewType = "handheld", }) => {
     return null;
 };
 
-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";
+var css_248z = ".wtb8keLFxgc- {\n  padding-right: var(--space-small);\n}\n.wtb8keLFxgc- path {\n  fill: var(--color-greyBlue);\n}\n.wtb8keLFxgc- path.TUkZiGiR6hc- {\n  fill: var(--color-blue);\n}\n.wtb8keLFxgc- path.HkPlMeyz3rM- {\n  fill: var(--color-greyBlue--lighter);\n}\n";
+var styles = {"sortIcon":"wtb8keLFxgc-","active":"TUkZiGiR6hc-","inactive":"HkPlMeyz3rM-"};
 styleInject_es.styleInject(css_248z);
 
 var SortDirection;
@@ -185,31 +189,31 @@ const sortStyleIndex = [
     },
     {
         option: SortDirection.ascending,
-        upArrowStyle: classnames__default["default"](css_248z.active),
-        downArrowStyle: classnames__default["default"](css_248z.inactive),
+        upArrowStyle: classnames__default["default"](styles.active),
+        downArrowStyle: classnames__default["default"](styles.inactive),
     },
     {
         option: SortDirection.descending,
-        upArrowStyle: classnames__default["default"](css_248z.inactive),
-        downArrowStyle: classnames__default["default"](css_248z.active),
+        upArrowStyle: classnames__default["default"](styles.inactive),
+        downArrowStyle: classnames__default["default"](styles.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"](css_248z.sortIcon) },
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.sortIcon) },
         React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default["default"].createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
             React__default["default"].createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
 function Header({ table, stickyHeader, sorting, onRowClick, }) {
-    const stickyClass = classnames__default["default"]({ [css_248z$3.stickyHeader]: stickyHeader });
+    const stickyClass = classnames__default["default"]({ [styles$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"](css_248z$3.sortableColumn, {
-                    [css_248z$3.pinFirstHeaderSortable]: !!onRowClick,
+                ? classnames__default["default"](styles$3.sortableColumn, {
+                    [styles$3.pinFirstHeaderSortable]: !!onRowClick,
                 })
                 : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
                 width: header.getSize(),
@@ -235,12 +239,12 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         pagination,
         sorting,
     });
-    const tableClasses = classnames__default["default"](css_248z$3.table, {
-        [css_248z$3.pinFirstColumn]: pinFirstColumn,
+    const tableClasses = classnames__default["default"](styles$3.table, {
+        [styles$3.pinFirstColumn]: pinFirstColumn,
     });
     const table = reactTable.useReactTable(tableSettings);
-    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 },
+    return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
+        React__default["default"].createElement("div", { className: styles$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-f62e2518.js');
+var DatePicker = require('../DatePicker-c0782233.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-01077f8f.js');
-require('../Button-1063207a.js');
+require('../Typography-c0bec306.js');
+require('../Button-f7b0f481.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');