@jobber/components 4.79.0 → 4.79.1-JOB-85851.2

package/StatusIndicator.d.ts

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

package/StatusIndicator.js

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

package/dist/AnimatedPresence/index.js

@@ -2,105 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var framerMotion = require('framer-motion');
-var design = require('@jobber/design');
+var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
+require('react');
+require('framer-motion');
+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;
+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

@@ -10,20 +10,21 @@ var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Text = require('../Text-259af966.js');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
+var useIsMounted = require('@jobber/hooks/useIsMounted');
+var Text = require('../Text-fbeaaca6.js');
 var Icon = require('../Icon-405a216c.js');
-var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-6e356985.js');
-require('../Typography-c45bf216.js');
+var Heading = require('../Heading-bae3c69e.js');
+var InputText = require('../InputText-de22af8c.js');
+require('../Typography-e2a23b7e.js');
 require('@jobber/design');
-require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-b4e6c549.js');
-require('uuid');
+require('../useAtlantisConfig-ed0bee66.js');
+require('../FormField-3ec1c85d.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
-require('../Button-b73a5e01.js');
+require('../Button-6b922fc1.js');
 require('react-router-dom');
-require('../InputValidation-05e839fa.js');
+require('../InputValidation-a92bb519.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 
@@ -42,6 +43,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 +55,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 +74,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.current ? ReactDOM.createPortal(menu, document.body) : menu;
     function setupKeyListeners() {
         React.useEffect(() => {
             var _a, _b;
@@ -127,7 +132,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/Banner/index.js

@@ -6,12 +6,13 @@ var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var getAtlantisConfig = require('../getAtlantisConfig-0f3e8af2.js');
+var useAtlantisConfig = require('../useAtlantisConfig-ed0bee66.js');
 var Icon = require('../Icon-405a216c.js');
-var Text = require('../Text-259af966.js');
-var Button = require('../Button-b73a5e01.js');
+var Text = require('../Text-fbeaaca6.js');
+var Button = require('../Button-6b922fc1.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -32,7 +33,7 @@ var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c
 styleInject_es.styleInject(css_248z);
 
 function BannerIcon({ icon, type }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     if (JOBBER_RETHEME) {
         return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.iconWrapper, iconStyles[type]) },
             React__default["default"].createElement(Icon.Icon, { name: icon, color: "white", size: "small" })));
@@ -41,7 +42,7 @@ function BannerIcon({ icon, type }) {
 }
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     const [showBanner, setShowBanner] = React.useState(true);
     const bannerIcon = icon || getBannerIcon(type);
     const bannerWidths = {
@@ -84,7 +85,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     }
 }
 function getBannerIcon(type) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     if (!JOBBER_RETHEME)
         return;
     switch (type) {

package/dist/Button/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-b73a5e01.js');
+var Button = require('../Button-6b922fc1.js');
 require('react');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 
 
 

package/dist/{Button-b73a5e01.js → Button-6b922fc1.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-c45bf216.js');
+var Typography = require('./Typography-e2a23b7e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/ButtonDismiss/ButtonDismiss.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface ButtonDismissProps {
     onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
-    ariaLabel: string;
+    readonly ariaLabel: string;
 }
 export declare function ButtonDismiss({ onClick, ariaLabel }: ButtonDismissProps): JSX.Element;
 export {};

package/dist/ButtonDismiss/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-350af163.js');
+var ButtonDismiss = require('../ButtonDismiss-a3ba1de2.js');
 require('react');
-require('../Button-b73a5e01.js');
+require('../Button-6b922fc1.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Typography-e2a23b7e.js');
 
 
 

package/dist/{ButtonDismiss-350af163.js → ButtonDismiss-a3ba1de2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Button = require('./Button-b73a5e01.js');
+var Button = require('./Button-6b922fc1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Card/CardClickable.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 interface ClickableCardProps {
     onClick(event: React.MouseEvent<HTMLElement>): void;
-    className: string;
+    readonly className: string;
     readonly children: ReactNode | ReactNode[];
 }
 /**

package/dist/Card/index.js

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-74f078a4.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-1e8e4bd3.js');
-require('../Typography-c45bf216.js');
-require('../getAtlantisConfig-0f3e8af2.js');
-require('../Button-b73a5e01.js');
+require('../Heading-bae3c69e.js');
+require('../Typography-e2a23b7e.js');
+require('../useAtlantisConfig-ed0bee66.js');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('../Button-6b922fc1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
-require('uuid');
+require('../Menu-d6dd673e.js');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{Card-426a68a8.js → Card-74f078a4.js}

@@ -3,16 +3,16 @@
 var React = require('react');
 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 Heading = require('./Heading-bae3c69e.js');
+var Button = require('./Button-6b922fc1.js');
+var Menu = require('./Menu-d6dd673e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--card--border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n.jobber-retheme ._5LfUFF9DYsk- {\n  border-top-width: 1px;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.5rem solid rgb(181, 181, 181);\n  border-top: 0.5rem solid var(--card--accent-color);\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.jobber-retheme ._5LfUFF9DYsk-::before {\n  display: none;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\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\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- 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";
+var css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--card--border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.375rem solid rgb(181, 181, 181);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\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\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- 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";
 var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};
 styleInject_es.styleInject(css_248z$1);
 

package/dist/Checkbox/index.js

@@ -2,17 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-99f6297f.js');
+var Checkbox = require('../Checkbox-e481a4b1.js');
 require('../tslib.es6-754e2961.js');
 require('react');
-require('uuid');
 require('classnames');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Text-259af966.js');
-require('../Typography-c45bf216.js');
+require('../Text-fbeaaca6.js');
+require('../Typography-e2a23b7e.js');
 
 
 

package/dist/{Checkbox-99f6297f.js → Checkbox-e481a4b1.js}

@@ -2,12 +2,11 @@
 
 var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
-var uuid = require('uuid');
 var classnames = require('classnames');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-259af966.js');
+var Text = require('./Text-fbeaaca6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +22,7 @@ function Checkbox({ checked, defaultChecked, disabled, label, name, value, indet
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
-    const [identifier] = React.useState(uuid.v1());
+    const [identifier] = React.useState(React.useId());
     /**
      * Generate a name if one is not supplied, this is the name
      * that will be used for react-hook-form and not neccessarily

package/dist/Chip/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('../Chip-c91fd6c8.js');
+var Chip = require('../Chip-76f18555.js');
 var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');
@@ -11,10 +11,12 @@ require('@jobber/hooks/useInView');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../Typography-c45bf216.js');
-require('../Tooltip-27771182.js');
+require('../Typography-e2a23b7e.js');
+require('../Tooltip-b9de6e57.js');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('@jobber/hooks/useIsMounted');
 require('react-popper');
 require('@jobber/design');
 

package/dist/{Chip-c91fd6c8.js → Chip-76f18555.js}

@@ -6,8 +6,8 @@ var useInView = require('@jobber/hooks/useInView');
 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 Typography = require('./Typography-e2a23b7e.js');
+var Tooltip = require('./Tooltip-b9de6e57.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -8,20 +8,21 @@ 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-c45bf216.js');
-var Tooltip = require('../Tooltip-27771182.js');
-var uuid = require('uuid');
+var Typography = require('../Typography-e2a23b7e.js');
+var Tooltip = require('../Tooltip-b9de6e57.js');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
+require('@jobber/design');
 var reactPopper = require('react-popper');
-var Text = require('../Text-259af966.js');
-var Button = require('../Button-b73a5e01.js');
+var Text = require('../Text-fbeaaca6.js');
+var Button = require('../Button-6b922fc1.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
-require('@jobber/design');
 require('color');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('@jobber/hooks/useIsMounted');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -129,7 +130,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,
@@ -269,9 +270,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/Combobox/Combobox.types.d.ts

@@ -62,6 +62,10 @@ export interface ComboboxOption {
      * The value to be visually displayed in the Combobox options list.
      */
     label: string;
+    /**
+     * An optional component to be displayed before the label.
+     */
+    prefix?: React.ReactElement;
 }
 export interface ComboboxContentProps {
     /**