@jobber/components 4.67.2-JOB-84261.6 → 4.67.2-pre.25

package/dist/Chips/index.js

@@ -4,24 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var useAssert = require('@jobber/hooks/useAssert');
-var Icon = require('../Icon-405a216c.js');
-var Avatar = require('../Avatar-76a799fa.js');
-var Typography = require('../Typography-973b122e.js');
-var Tooltip = require('../Tooltip-6b12f1c2.js');
-var uuid = require('uuid');
+var Icon = require('../Icon-361343e0.js');
+var Avatar = require('../Avatar-765d6e45.js');
+var Typography = require('../Typography-75f58b60.js');
+var Tooltip = require('../Tooltip-99440954.js');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
-var reactPopper = require('react-popper');
-var Text = require('../Text-4a2bc89f.js');
-var Button = require('../Button-163a0641.js');
-var Spinner = require('../Spinner-9d8fc7ff.js');
 require('@jobber/design');
+var reactPopper = require('react-popper');
+var Text = require('../Text-9f261dde.js');
+var Button = require('../Button-8bde6560.js');
+var Spinner = require('../Spinner-cac356ee.js');
 require('color');
 require('react-dom');
 require('framer-motion');
+require('../ClientOnly-4f3e136d.js');
+require('../useSafeLayoutEffect-b63708b1.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -31,9 +31,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-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  gap: calc(16px / 2);\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: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: 200ms ease-in-out;\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  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n  padding: calc((16px / 4) + (16px / 8)) calc(16px / 2);\n  padding: calc(calc(16px / 4) + calc(16px / 8)) calc(16px / 2);\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: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  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: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n  border-color: rgb(1, 41, 57);\n  border-color: var(--color-surface--reverse);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n  border-color: rgb(128, 25, 0);\n  border-color: var(--color-critical--onSurface);\n  color: rgb(128, 25, 0);\n  color: var(--color-critical--onSurface);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n  border-color: rgb(181, 181, 181);\n  border-color: var(--color-disabled);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\n  border-color: rgb(201, 66, 33);\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: calc(16px / 8);\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: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n  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: rgba(101, 120, 132, 1);\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();
@@ -129,7 +127,7 @@ function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestR
     return (React__default["default"].createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
+function InternalChipSingleSelect({ children, selected, name = React.useId(), onChange, onClick, }) {
     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,
@@ -204,9 +202,7 @@ function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
     }
 }
 
-var css_248z = ".sCNIjluCskc- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  gap: calc(16px / 2);\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: calc(16px / 2) 0;\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: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  line-height: 1.25;\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: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.LdytkOeCU9c- {\n  max-height: 320px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: calc(16px / 2);\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  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.y7Cz2u8BuNE-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: rgb(244, 246, 250);\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, }) {
     const ref = React.useRef(null);
@@ -269,9 +265,9 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
         availableChipOptions });
 }
 
-const menuId = uuid.v1();
 // eslint-disable-next-line max-statements
 function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
+    const menuId = React.useId();
     const [allOptions, setAllOptions] = React.useState([]);
     const [searchValue, setSearchValue] = React.useState("");
     const [menuOpen, setMenuOpen] = React.useState(false);

package/dist/ClientOnly-4f3e136d.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+let hydrating = true;
+function useHydrated() {
+    const [hydrated, setHydrated] = React.useState(() => !hydrating);
+    React.useEffect(() => {
+        hydrating = false;
+        setHydrated(true);
+    }, []);
+    return hydrated;
+}
+function ClientOnly({ children, fallback = null, }) {
+    const hydrated = useHydrated();
+    return hydrated ? React__default["default"].createElement(React__default["default"].Fragment, null, children) : React__default["default"].createElement(React__default["default"].Fragment, null, fallback);
+}
+
+exports.ClientOnly = ClientOnly;

package/dist/Combobox/index.js

@@ -2,28 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-eb1e5817.js');
+var Combobox = require('../Combobox-35a3ea22.js');
 require('react');
 require('classnames');
 require('react-dom');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Icon-405a216c.js');
+require('../ClientOnly-4f3e136d.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Text-4a2bc89f.js');
-require('../Typography-973b122e.js');
-require('../tslib.es6-5b8768b7.js');
-require('../Button-163a0641.js');
+require('../Text-9f261dde.js');
+require('../Typography-75f58b60.js');
+require('../tslib.es6-a575af05.js');
+require('../Button-8bde6560.js');
 require('react-router-dom');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('react-popper');
 require('@jobber/hooks/useOnKeyDown');
-require('../Chip-168acf3e.js');
+require('../Chip-dca6c22b.js');
 require('@jobber/hooks/useInView');
-require('../Avatar-76a799fa.js');
+require('../Avatar-765d6e45.js');
 require('color');
-require('../Tooltip-6b12f1c2.js');
+require('../Tooltip-99440954.js');
 require('framer-motion');
+require('../useSafeLayoutEffect-b63708b1.js');
 require('@jobber/hooks/useAssert');
 
 

package/dist/{Combobox-eb1e5817.js → Combobox-35a3ea22.js}

@@ -3,17 +3,17 @@
 var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-4a2bc89f.js');
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
-var Typography = require('./Typography-973b122e.js');
-var Button = require('./Button-163a0641.js');
+var ClientOnly = require('./ClientOnly-4f3e136d.js');
+var Icon = require('./Icon-361343e0.js');
+var Text = require('./Text-9f261dde.js');
+var tslib_es6 = require('./tslib.es6-a575af05.js');
+var Typography = require('./Typography-75f58b60.js');
+var Button = require('./Button-8bde6560.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Chip = require('./Chip-168acf3e.js');
+var Chip = require('./Chip-dca6c22b.js');
 require('@jobber/design');
 var useAssert = require('@jobber/hooks/useAssert');
 
@@ -23,13 +23,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-var css_248z$6 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  max-width: var(--popover--width);\n  min-width: calc((16px * 4) * 3.75);\n  min-width: calc(calc(16px * 4) * 3.75);\n  min-width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: scroll;\n  overflow-y: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
 var styles$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
-styleInject_es.styleInject(css_248z$6);
 
-var css_248z$5 = ".MIyb-oFZg9w- {\n  position: relative;\n}\n\n.WZPK91I4aJs- {\n  width: 100%;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  padding-right: calc((16px * 1.5) * 2.25);\n  padding-right: calc(calc(16px * 1.5) * 2.25);\n  padding-right: calc(var(--space-large) * 2.25);\n  border: none;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n  outline: none;\n}\n\n._7loHrVUe-Rk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
 var styles$5 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
-styleInject_es.styleInject(css_248z$5);
 
 function ComboboxContentSearch(props) {
     const searchRef = React.useRef(null);
@@ -55,13 +51,9 @@ function ComboboxContentSearch(props) {
     }
 }
 
-var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n  pointer-events: none;\n}\n\n.SgMzjOcdE-E-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n  pointer-events: none;\n}\n";
-var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
-styleInject_es.styleInject(css_248z$4);
+var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-"};
 
-var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
 var styles$3 = {"option":"_5QdRGmaNHvc-"};
-styleInject_es.styleInject(css_248z$3);
 
 const ComboboxContext = React__default["default"].createContext({});
 function ComboboxContextProvider(_a) {
@@ -79,7 +71,39 @@ function ComboboxOption(props) {
 }
 
 function ComboboxContentList(props) {
-    return (React__default["default"].createElement("div", { className: styles$4.container },
+    const [listScrollState, setlistScrollState] = React.useState("");
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (props.optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = props.optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight === scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (!props.showEmptyState && props.options.length === 0) {
+            handleScroll();
+        }
+        if (props.optionsListRef.current) {
+            props.optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (props.optionsListRef.current) {
+                props.optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [props.options]);
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$4.container, styles$4[listScrollState]) },
         !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
             props.options.map(option => {
                 return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
@@ -98,9 +122,7 @@ function getZeroIndexStateText(subjectNoun) {
     return "No options yet";
 }
 
-var css_248z$2 = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1) calc(16px / 2) 0 calc(16px * 1);\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
 var styles$2 = {"header":"Q-mwo-g5Fi8-"};
-styleInject_es.styleInject(css_248z$2);
 
 function ComboboxContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
@@ -247,12 +269,11 @@ function ComboboxContent(props) {
         props.actionElements && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
                 [styles$6.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
-    return ReactDOM__default["default"].createPortal(template, document.body);
+    return (React__default["default"].createElement(ClientOnly.ClientOnly, null, typeof document !== "undefined" &&
+        ReactDOM__default["default"].createPortal(template, document.body)));
 }
 
-var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
 var styles$1 = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
-styleInject_es.styleInject(css_248z$1);
 
 function ComboboxAction(props) {
     const { searchValue } = React.useContext(ComboboxContext);
@@ -284,9 +305,7 @@ function ComboboxTrigger({ label = "Select", selected, }) {
         React__default["default"].createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 
-var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: transparent;\n}\n\n._-0dkolvLF-Y- {\n  display: inline-block;\n}\n";
 var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
-styleInject_es.styleInject(css_248z);
 
 function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
     const handleClose = React.useCallback(() => {

package/dist/ConfirmationModal/index.js

@@ -2,28 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-0f85d96c.js');
+var ConfirmationModal = require('../ConfirmationModal-f6c0afc7.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-70daa0e2.js');
+require('../Modal-357fd1df.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-0f4ecb0c.js');
-require('../Typography-973b122e.js');
-require('../Button-163a0641.js');
+require('../Heading-f066883a.js');
+require('../Typography-75f58b60.js');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../ButtonDismiss-2b98d075.js');
-require('../Content-2ca1ffe1.js');
-require('../Markdown-96070121.js');
-require('react-markdown');
-require('../Text-4a2bc89f.js');
-require('../Emphasis-b2d1b3aa.js');
+require('../ButtonDismiss-af17d76d.js');
+require('../ClientOnly-4f3e136d.js');
+require('../Content-80486307.js');
+require('../Markdown-10fc9d3e.js');
+require('../tslib.es6-a575af05.js');
+require('markdown-to-jsx');
+require('../Text-9f261dde.js');
+require('../Emphasis-7a2893bb.js');
 
 
 

package/dist/{ConfirmationModal-0f85d96c.js → ConfirmationModal-f6c0afc7.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-70daa0e2.js');
-var Content = require('./Content-2ca1ffe1.js');
-var Markdown = require('./Markdown-96070121.js');
+var Modal = require('./Modal-357fd1df.js');
+var Content = require('./Content-80486307.js');
+var Markdown = require('./Markdown-10fc9d3e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Content/index.js

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

package/dist/{Content-2ca1ffe1.js → Content-80486307.js}

@@ -2,19 +2,14 @@
 
 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 classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$1 = ".SRYe3DkjH1c- > :not(:last-child) {\n  margin-bottom: calc(16px * 1);\n  margin-bottom: var(--space-base);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n  margin-bottom: calc(16px * 1.5);\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 = "._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", type = "div", }) {
     const className = classnames__default["default"](styles.padded, spacings[spacing]);

package/dist/DataDump/index.js

@@ -3,22 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-3178033c.js');
-var Content = require('../Content-2ca1ffe1.js');
-var Emphasis = require('../Emphasis-b2d1b3aa.js');
+var Card = require('../Card-9dfc98d3.js');
+var Content = require('../Content-80486307.js');
+var Emphasis = require('../Emphasis-7a2893bb.js');
 require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-0f4ecb0c.js');
-require('../Typography-973b122e.js');
-require('../Button-163a0641.js');
+require('../Heading-f066883a.js');
+require('../Typography-75f58b60.js');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Menu-d7ea093c.js');
-require('uuid');
+require('../Menu-7b7aa325.js');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('../useSafeLayoutEffect-b63708b1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataList/components/DataListHeader/DataListHeaderCheckbox.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { ReactElement } from "react-markdown/lib/react-markdown";
+import { ReactElement } from "react";
 interface DataListHeaderCheckbox {
     readonly children: ReactElement;
 }

package/dist/DataList/components/DataListHeaderTile/DataListSortingArrows.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface DataListSortingArrowsProps {
-    readonly order?: "asc" | "desc";
+    readonly order?: "asc" | "desc" | "none";
 }
 export declare const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
 export declare function DataListSortingArrows({ order }: DataListSortingArrowsProps): JSX.Element;

package/dist/DataList/hooks/useMediaQuery.d.ts

@@ -1 +1,3 @@
-export declare function useMediaQuery(CSSMediaQuery: string): boolean;
+declare function useUnSafeMediaQuery(CSSMediaQuery: string): boolean;
+export declare const useMediaQuery: typeof useUnSafeMediaQuery;
+export {};