@jobber/components 4.77.5 → 4.77.6-JOB-84042.1

package/AnimatedPresence.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AnimatedPresence";

package/AnimatedPresence.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AnimatedPresence = require("./dist/AnimatedPresence");
+
+Object.keys(AnimatedPresence).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AnimatedPresence[key];
+    },
+  });
+});

package/dist/AnimatedPresence/AnimatedPresence.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react";
+declare const transitions: {
+    fromBottom: import("framer-motion").Variants;
+    fromTop: import("framer-motion").Variants;
+    fromLeft: import("framer-motion").Variants;
+    fromRight: import("framer-motion").Variants;
+    popIn: import("framer-motion").Variants;
+    fromLeftToRight: import("framer-motion").Variants;
+    fromRightToLeft: import("framer-motion").Variants;
+    fade: import("framer-motion").Variants;
+};
+export type AnimatedPresenceTransitions = keyof typeof transitions;
+interface AnimatedPresenceProps extends Required<PropsWithChildren> {
+    /**
+     * The type of transition you can use.
+     */
+    readonly transition?: AnimatedPresenceTransitions;
+    /**
+     * Whether or not to animate the children on mount. By default it's set to false.
+     */
+    readonly initial?: boolean;
+}
+export declare function AnimatedPresence(props: AnimatedPresenceProps): JSX.Element;
+export {};

package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "framer-motion";
+export declare const TIMING_QUICK: number;
+export declare const TIMING_BASE: number;
+export declare const fade: Variants;
+export declare const popIn: Variants;
+export declare const fromTop: Variants;
+export declare const fromBottom: Variants;
+export declare const fromLeft: Variants;
+export declare const fromRight: Variants;
+export declare const fromLeftToRight: Variants;
+export declare const fromRightToLeft: Variants;

package/dist/AnimatedPresence/hooks/usePreviousValue.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePreviousValue<T>(value: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/AnimatedPresence/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnimatedPresence";

package/dist/AnimatedPresence/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
+require('react');
+require('framer-motion');
+require('@jobber/design');
+
+
+
+exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;

package/dist/AnimatedPresence-20a02aaa.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
+const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
+const baseTransition = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const fade = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const popIn = {
+    visible: Object.assign({ scale: 1 }, baseTransition.visible),
+    hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
+};
+const fromTop = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromBottom = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeft = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRight = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeftToRight = {
+    initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRightToLeft = {
+    initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+function toSeconds(ms) {
+    return ms / 1000;
+}
+
+function usePreviousValue(value) {
+    const [previousValue, setPreviousValue] = React.useState(value);
+    React.useEffect(() => {
+        setPreviousValue(value);
+    }, [value]);
+    return [previousValue, setPreviousValue];
+}
+
+const transitions = {
+    fromBottom,
+    fromTop,
+    fromLeft,
+    fromRight,
+    popIn,
+    fromLeftToRight,
+    fromRightToLeft,
+    fade,
+};
+function AnimatedPresence(props) {
+    const shouldReduceMotion = framerMotion.useReducedMotion();
+    if (shouldReduceMotion) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
+    }
+    return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
+}
+function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
+    const transitionVariation = transitions[transition];
+    const hasInitialTransition = "initial" in transitionVariation;
+    const childCount = React.Children.count(children);
+    // Set the initial value to 0 so it staggers the animation on mount when
+    // initial is true.
+    const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
+    // Whenever the children count changes, update the last index.
+    React.useEffect(() => {
+        setLastChildIndex(childCount - 1);
+    }, [childCount]);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React__default["default"].createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
+            duration: TIMING_BASE,
+            delay: generateDelayTime(i),
+        } }, child)))));
+    function generateDelayTime(index) {
+        // Don't add a delay if it's already rendered.
+        if (lastChildIndex > index)
+            return 0;
+        // Stagger the animation starting after the previous last child index.
+        return (index - lastChildIndex) * TIMING_QUICK;
+    }
+}
+
+exports.AnimatedPresence = AnimatedPresence;

package/dist/Autocomplete/Menu.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import { RefObject } from "react";
 import { Option } from "./Option";
 interface MenuProps {
     readonly visible: boolean;
@@ -10,5 +10,5 @@ interface MenuProps {
     readonly attachTo: RefObject<Element | null>;
     onOptionSelect(chosenOption: Option): void;
 }
-export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): React.ReactPortal;
+export declare function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }: MenuProps): JSX.Element;
 export {};

package/dist/Autocomplete/index.js

@@ -7,13 +7,15 @@ var React = require('react');
 var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
+var useIsMounted = require('@jobber/hooks/useIsMounted');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-6e356985.js');
+var InputText = require('../InputText-6c71361e.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
@@ -42,6 +44,9 @@ var IndexChange;
     IndexChange[IndexChange["Previous"] = -1] = "Previous";
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
+// Adding useIsMounted is what tipped this to 13 statements.
+// Any additions beyond useIsMounted should probably see this component refactored a bit
+// eslint-disable-next-line max-statements
 function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
     const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
@@ -51,6 +56,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
     const initialHighlight = options.some(detectGroups) ? 1 : 0;
     setupKeyListeners();
     React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    const mounted = useIsMounted.useIsMounted();
     const menu = (React__default["default"].createElement("div", Object.assign({ className: classnames__default["default"](styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
         const optionClass = classnames__default["default"](styles.option, {
             [styles.active]: index === highlightedIndex,
@@ -69,7 +75,7 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 option.details !== undefined && (React__default["default"].createElement("div", { className: styles.details },
                     React__default["default"].createElement(Text.Text, null, option.details))))));
     })));
-    return ReactDOM.createPortal(menu, document.body);
+    return mounted ? reactDom.createPortal(menu, document.body) : menu;
     function setupKeyListeners() {
         React.useEffect(() => {
             var _a, _b;
@@ -127,7 +133,7 @@ function useRepositionMenu(attachTo, visible = false) {
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         var _a;
         (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
     }, [visible]);

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-0a6f3a28.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -13,11 +13,12 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
+require('../Menu-5fc613a1.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 
 

package/dist/{Card-426a68a8.js → Card-0a6f3a28.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
-var Menu = require('./Menu-81b12936.js');
+var Menu = require('./Menu-5fc613a1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/{Chip-c91fd6c8.js → Chip-be6a438f.js}

@@ -7,7 +7,7 @@ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Avatar = require('./Avatar-76a799fa.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');
-var Tooltip = require('./Tooltip-27771182.js');
+var Tooltip = require('./Tooltip-7635add8.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Combobox/Combobox.types.d.ts

@@ -34,6 +34,10 @@ export interface ComboboxProps {
      * The amount of time in ms to debounce the onSearch callback. Defaults to 300ms.
      */
     readonly onSearchDebounce?: number;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
     /**
      * The Chip heading for the trigger
      */
@@ -97,6 +101,10 @@ export interface ComboboxContentProps {
      * Function called when search input changes.
      */
     readonly handleSearchChange: (value: string) => void;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
     /**
      * Reference to the wrapping div element of all the Combobox pieces
      */
@@ -191,6 +199,10 @@ export interface ComboboxListProps {
      * Should loading state be shown.
      */
     readonly loading?: boolean;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
 }
 export interface ComboboxActionProps {
     /**

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ComboboxLoadMoreProps {
+    readonly onLoadMore: () => void;
+}
+export declare function ComboboxLoadMore({ onLoadMore }: ComboboxLoadMoreProps): JSX.Element;
+export {};

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxLoadMore } from "./ComboboxLoadMore";

package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts

@@ -4,4 +4,4 @@ export interface UseMakeComboboxHandlersReturn {
     handleClose: () => void;
     handleSelection: (selection: ComboboxOption) => void;
 }
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void): UseMakeComboboxHandlersReturn;
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

package/dist/{Combobox-237caf42.js → Combobox-e0d16e4f.js}

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

package/dist/{ConfirmationModal-f1a049fb.js → ConfirmationModal-8da79c12.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-a0627c92.js');
+var Modal = require('./Modal-13c0ea54.js');
 var Content = require('./Content-e3f7b6fc.js');
 var Markdown = require('./Markdown-f7c55304.js');
 

package/dist/DataDump/index.js

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

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

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

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

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

package/dist/DataList/components/DataListActionsMenu/DataListActionsMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 interface DataListActionsMenuProps {
     readonly visible: boolean;
     readonly position: {
@@ -7,5 +7,5 @@ interface DataListActionsMenuProps {
     };
     readonly onRequestClose: () => void;
 }
-export declare function DataListActionsMenu({ visible, position, onRequestClose, children, }: PropsWithChildren<DataListActionsMenuProps>): React.ReactPortal;
+export declare function DataListActionsMenu({ visible, position, onRequestClose, children, }: PropsWithChildren<DataListActionsMenuProps>): JSX.Element;
 export {};

package/dist/DataList/index.d.ts

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

package/dist/{FormatFile-652edda8.js → FormatFile-e4237595.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-b73a5e01.js');
-var ConfirmationModal = require('./ConfirmationModal-f1a049fb.js');
+var ConfirmationModal = require('./ConfirmationModal-8da79c12.js');
 var Glimmer = require('./Glimmer-7c317864.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');

package/dist/InputText/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-6e356985.js');
+var InputText = require('../InputText-6c71361e.js');
 require('react');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../FormField-b4e6c549.js');
 require('../tslib.es6-754e2961.js');
 require('uuid');

package/dist/{InputText-6e356985.js → InputText-6c71361e.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var FormField = require('./FormField-b4e6c549.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -34,7 +35,7 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
             resize(inputRef.current);
         }

package/dist/LightBox/LightBox.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 interface PresentedImage {
     title?: string;
     caption?: string;
@@ -33,5 +33,5 @@ interface LightBoxProps {
      */
     onRequestClose(options: RequestCloseOptions): void;
 }
-export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): React.ReactPortal;
+export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
 export {};

package/dist/{LightBox-a89d8863.js → LightBox-bdc90b7b.js}

@@ -2,11 +2,12 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 var debounce = require('lodash/debounce');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var index = require('./index-6e91168e.js');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var ButtonDismiss = require('./ButtonDismiss-350af163.js');
 var Button = require('./Button-b73a5e01.js');
@@ -14,7 +15,6 @@ var Button = require('./Button-b73a5e01.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 var css_248z = "._3JgBCebdbNU-,\n.JJOBEL7d-10- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n._3JgBCebdbNU- {\n  right: calc(16px * 1);\n  right: var(--space-base);\n}\n\n.JJOBEL7d-10- {\n  left: calc(16px * 1);\n  left: var(--space-base);\n}\n\n.fAep1A-0xIU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1001;\n  z-index: var(--elevation-modal);\n  width: 100%;\n  height: 100%;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.AfUUWErd5S4- {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  color: rgb(193, 201, 206);\n  color: var(--color-text--reverse--secondary);\n  font-size: calc(16px * 1);\n  font-size: var(--typography--fontSize-large);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--color-surface--reverse);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.jobber-retheme .AfUUWErd5S4- {\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.ysUYbBTaORk- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.GSOVtN1Y3IU- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: relative;\n  -ms-flex: 1 1 0px;\n      flex: 1 1 0;\n  min-height: 0;\n}\n\n.-V917BdNqSs- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n.sjwUjzb3a5c- {\n  position: absolute;\n  top: 50%;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n}\n";
@@ -60,6 +60,7 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     const lightboxRef = useFocusTrap.useFocusTrap(open);
     const debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
     const debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
+    const mounted = index.useAssert.useIsMounted();
     useRefocusOnActivator.useRefocusOnActivator(open);
     useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
     useOnKeyDown.useOnKeyDown(debouncedHandlePrevious, {
@@ -83,7 +84,7 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
             React__default["default"].createElement(NextButton, { onClick: debouncedHandleNext }))),
         React__default["default"].createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
         React__default["default"].createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
-    return ReactDOM__default["default"].createPortal(template, document.body);
+    return mounted ? reactDom.createPortal(template, document.body) : template;
     function handleMovePrevious() {
         setDirection(-1);
         setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);

package/dist/Menu/Menu.d.ts

@@ -25,15 +25,15 @@ export interface ActionProps {
     /**
      * Action label
      */
-    label: string;
+    readonly label: string;
     /**
      * Parent Section Label
      */
-    sectionLabel?: string;
+    readonly sectionLabel?: string;
     /**
      * Visual cue for the action label
      */
-    icon?: IconNames;
+    readonly icon?: IconNames;
     /**
      * Callback when an action gets clicked
      */
@@ -41,5 +41,5 @@ export interface ActionProps {
     /**
      * Focus on the action when rendered
      */
-    shouldFocus?: boolean;
+    readonly shouldFocus?: boolean;
 }

package/dist/Menu/index.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-81b12936.js');
+var Menu = require('../Menu-5fc613a1.js');
 require('react');
 require('uuid');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Button-b73a5e01.js');
 require('react-router-dom');

package/dist/{Menu-81b12936.js → Menu-5fc613a1.js}

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-b73a5e01.js');
 var Typography = require('./Typography-c45bf216.js');
@@ -45,7 +46,7 @@ function Menu({ activator, items }) {
     const buttonID = uuid.v1();
     const menuID = uuid.v1();
     useOnKeyDown.useOnKeyDown(handleKeyboardShortcut, ["Escape"]);
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         if (wrapperRef.current) {
             const bounds = wrapperRef.current.getBoundingClientRect();
             const newPosition = Object.assign({}, position);

package/dist/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import sizes from "./Sizes.css";
 import { ButtonProps } from "../Button";
 export interface ModalProps {
@@ -18,4 +18,4 @@ export interface ModalProps {
     readonly tertiaryAction?: ButtonProps;
     onRequestClose?(): void;
 }
-export declare function Modal({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalProps): React.ReactPortal;
+export declare function Modal({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalProps): JSX.Element;

package/dist/{Modal-a0627c92.js → Modal-13c0ea54.js}

@@ -1,12 +1,13 @@
 'use strict';
 
 var React = require('react');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var index = require('./index-6e91168e.js');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
@@ -15,7 +16,6 @@ var ButtonDismiss = require('./ButtonDismiss-350af163.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css_248z$1 = ":root {\n  --modal--width: calc(var(--base-unit) * 37.5);\n  --modal--padding-horizontal: var(--space-base);\n  --modal--padding-vertical: var(--space-base);\n  --modal--padding: var(--modal--padding-vertical)\n    var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n    --modal--padding-horizontal: var(--space-large);\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n:root {\n    --modal--padding-horizontal: var(--space-large);\n}\n  }\n\n:root .jobber-retheme {\n  --modal--shadow: var(--shadow-base);\n}\n\n@media (min-width: 768px) {\n\n:root .jobber-retheme {\n    --modal--padding-horizontal: var(--space-large);\n    --modal--padding-vertical: var(--space-large);\n    --modal--padding: var(--modal--padding-vertical)\n      var(--modal--padding-horizontal);\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n:root .jobber-retheme {\n    --modal--padding-horizontal: var(--space-large);\n    --modal--padding-vertical: var(--space-large);\n    --modal--padding: var(--modal--padding-vertical)\n      var(--modal--padding-horizontal);\n}\n  }\n\n.QGRLFHPoV5E- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  z-index: 1001;\n  z-index: var(--elevation-modal);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  overflow: auto;\n}\n\n.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._4WzGOMUGj5I- {\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n  position: relative;\n  width: 100%;\n  max-width: calc(16px * 37.5);\n  max-width: var(--modal--width);\n  box-shadow: var(--modal--shadow);\n  margin: auto;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n  --public-content--padding: var(--modal--padding);\n  --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n  --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px * 1)\n    calc(16px * 1);\n  padding: var(--modal--padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .wjrPpIUNNrk- {\n  background-color: transparent;\n}\n\n.jobber-retheme .wjrPpIUNNrk- h3 {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 1.5);\n  font-size: calc(calc(16px * 1) * 1.5);\n  font-size: var(--typography--fontSize-largest);\n}\n\n/**\n * Ensure there's no extra padding top on the next element. This mostly negates\n * the <Content /> padding\n */\n\n.jobber-retheme .wjrPpIUNNrk- + * {\n  padding-top: 0;\n}\n\n.rKvigUnOyYE- {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n._62c8HLZFwvs- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1)\n    calc(16px * 1);\n  padding: var(--modal--padding);\n  padding-top: 0;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Xl1Ptn-P9Ew- {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n/* This is in a correct position and order */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.p2s7GtpoZz0- > * {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- *:first-child {\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- *:nth-child(2) {\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n";
@@ -31,6 +31,7 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
     useRefocusOnActivator.useRefocusOnActivator(open);
     const modalRef = useFocusTrap.useFocusTrap(open);
     useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
+    const mounted = index.useAssert.useIsMounted();
     const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, role: "dialog", className: styles.container, tabIndex: 0 },
         React__default["default"].createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default["default"].createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
@@ -40,7 +41,7 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
             title != undefined && (React__default["default"].createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
             children,
             React__default["default"].createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
-    return ReactDOM__default["default"].createPortal(template, document.body);
+    return mounted ? reactDom.createPortal(template, document.body) : template;
     function handleRequestClose() {
         if (open && onRequestClose) {
             onRequestClose();

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-259af966.js');
 var Content = require('../Content-e3f7b6fc.js');
 var Markdown = require('../Markdown-f7c55304.js');
 var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-81b12936.js');
+var Menu = require('../Menu-5fc613a1.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');
@@ -23,6 +23,7 @@ require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Table/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var formatters = require('@jobber/formatters');
+var require$$3 = require('@jobber/formatters');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,7 +39,7 @@ function CellNumeric({ value }) {
 }
 
 function CellCurrency({ value, currency = undefined, }) {
-    return React__default["default"].createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
+    return React__default["default"].createElement(CellNumeric, { value: require$$3.formatCurrency(value, currency) });
 }
 
 function Header({ children }) {

package/dist/{Tooltip-27771182.js → Tooltip-7635add8.js}

@@ -2,8 +2,10 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 var framerMotion = require('framer-motion');
+var index = require('./index-6e91168e.js');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var reactPopper = require('react-popper');
 
@@ -11,7 +13,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 var css_248z = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * var(--space-smaller));\n  --tooltip--surface: var(--color-surface--reverse);\n}\n\n.q07bkGoq714- {\n  display: none;\n}\n\n.dkCTRfc3vYk- {\n  display: inline-block;\n  position: absolute;\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  pointer-events: none;\n}\n\n.yAFP4gRKlTM- {\n  display: inline-block;\n  position: relative;\n  max-width: calc(16px * 15);\n  max-width: calc(var(--base-unit) * 15);\n  padding: calc((16px * 1) - (16px / 8)) calc(16px * 1);\n  padding: calc(calc(16px * 1) - calc(16px / 8)) calc(16px * 1);\n  padding: calc(var(--space-base) - var(--space-smallest)) var(--space-base);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--tooltip--surface);\n}\n\n.jobber-retheme .yAFP4gRKlTM- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-,\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  width: calc(16px / 2);\n  width: var(--tooltip--arrow-size);\n  height: calc(16px / 2);\n  height: var(--tooltip--arrow-size);\n  background-color: transparent;\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  background-color: rgb(1, 41, 57);\n  background-color: var(--tooltip--surface);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n.B6uh34-qEuA- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU- {\n  bottom: calc(-1 * (16px / 4));\n  bottom: calc(-1 * calc(16px / 4));\n  bottom: var(--tooltip--offset);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.Wft7Ug-lXEc- {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU- {\n  top: calc(-1 * (16px / 4));\n  top: calc(-1 * calc(16px / 4));\n  top: var(--tooltip--offset);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n\n.TpdeLUuiQMg- {\n  margin: 0;\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\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  font-weight: 600;\n  line-height: 1.25;\n  line-height: var(--typography--lineHeight-base);\n}\n";
 var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","above":"B6uh34-qEuA-","below":"Wft7Ug-lXEc-","tooltipMessage":"TpdeLUuiQMg-"};
@@ -43,19 +44,20 @@ const variation = {
 };
 function Tooltip({ message, children }) {
     const [show, setShow] = React.useState(false);
+    const mounted = index.useAssert.useIsMounted();
     const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning();
     initializeListeners();
     const toolTipClassNames = classnames__default["default"](styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
-        React__default["default"].createElement(TooltipPortal, null, show && Boolean(message) && (React__default["default"].createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+        mounted && (React__default["default"].createElement(TooltipPortal, null, show && Boolean(message) && (React__default["default"].createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
             React__default["default"].createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
                     damping: 50,
                     stiffness: 500,
                 } },
                 React__default["default"].createElement("p", { className: styles.tooltipMessage }, message),
-                React__default["default"].createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
+                React__default["default"].createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow }))))))));
     function initializeListeners() {
         const showTooltip = () => {
             setShow(true);
@@ -95,7 +97,7 @@ function Tooltip({ message, children }) {
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        React.useLayoutEffect(() => {
+        useSafeLayoutEffect.useSafeLayoutEffect(() => {
             injectAttributes();
             addListeners();
             return () => {
@@ -105,7 +107,7 @@ function Tooltip({ message, children }) {
     }
 }
 function TooltipPortal({ children }) {
-    return ReactDOM__default["default"].createPortal(children, document.body);
+    return reactDom.createPortal(children, document.body);
 }
 
 exports.Tooltip = Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.77.5",
+  "version": "4.77.6-JOB-84042.1+dc73bd04",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.53.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.8.1",
+    "@jobber/design": "^0.53.1-JOB-84042.9+dc73bd04",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.8.2-JOB-84042.25+dc73bd04",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -31,7 +31,7 @@
     "@types/react-router": "5.1.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.3",
-    "axios": "^0.21.2",
+    "axios": "^1.6.0",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
     "filesize": "^6.1.0",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3f1d6b70deb0ca76a8d1b818cb857151b371a598"
+  "gitHead": "dc73bd04b7349a7a940d57cf1bce9dc89a3bc67b"
 }