@jobber/components 6.26.0 → 6.26.1

package/dist/Tooltip-es.js

@@ -1,6 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
-import ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
 import { motion } from 'framer-motion';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
@@ -38,17 +38,17 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
     const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning({ preferredPlacement: preferredPlacement });
     initializeListeners();
     const toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.bottom, placement === "top" && styles.top, placement === "left" && styles.left, placement === "right" && styles.right);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
-        React.createElement(TooltipPortal, null, show && Boolean(message) && (React.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
-            React.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
+        React__default.createElement(TooltipPortal, null, show && Boolean(message) && (React__default.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+            React__default.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
                     ease: "easeOut",
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React.createElement("p", { className: styles.tooltipMessage }, message),
-                React.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
+                React__default.createElement("p", { className: styles.tooltipMessage }, message),
+                React__default.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
             setShow(true);
@@ -104,7 +104,7 @@ function TooltipPortal({ children }) {
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }
-    return ReactDOM.createPortal(children, document.body);
+    return ReactDOM__default.createPortal(children, document.body);
 }
 
 export { Tooltip as T };

package/dist/Typography-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 
 var styles = {"base":"j4h-0Mxa5gk-","spinning":"vNKBQk0oak4-"};
@@ -31,7 +31,7 @@ function Typography({ id, children, element: Tag = "p", size, align, fontWeight
         }
         : {};
     const underlineInlineStyles = computeUnderlineStyles(underline, textColor);
-    return (React.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
+    return (React__default.createElement(Tag, { id: id, className: className, style: Object.assign(Object.assign(Object.assign({}, truncateStyles), underlineInlineStyles), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.textStyle) }, children));
 }
 function computeUnderlineStyles(underline, textColor) {
     if (!underline) {

package/dist/showToast-es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import React__default, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { I as Icon } from './Icon-es.js';
@@ -13,18 +13,18 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
     const icon = getIcon();
     let timer;
     useEffect(() => startTimer(), []);
-    return (React.createElement(AnimatePresence, null, visible && (React.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
+    return (React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
             opacity: 0,
             scale: 0.8,
             height: 0,
             transition: { duration: 0.4 },
         } },
-        React.createElement("div", { className: styles.slice },
-            React.createElement(Icon, { color: icon.color, name: icon.name }),
-            React.createElement(Typography, { element: "span", size: "large" }, message),
-            action && (React.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
-            React.createElement("div", { className: styles.button },
-                React.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+        React__default.createElement("div", { className: styles.slice },
+            React__default.createElement(Icon, { color: icon.color, name: icon.name }),
+            React__default.createElement(Typography, { element: "span", size: "large" }, message),
+            action && (React__default.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React__default.createElement("div", { className: styles.button },
+                React__default.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }
@@ -75,14 +75,14 @@ function showToast(props) {
         root = createRoot(target);
     }
     if (root && target && globalThis.document.body.contains(target)) {
-        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
+        root.render(React__default.createElement(ToasterOven, Object.assign({}, props)));
     }
 }
 const ToastContainer = forwardRef(ToastInternal);
 function ToasterOven(props) {
     const toastRef = useRef();
     useEffect(() => toastRef.current.add(props));
-    return React.createElement(ToastContainer, { ref: toastRef });
+    return React__default.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {
     const [toastKey, setToastKey] = useState(0);
@@ -96,7 +96,7 @@ function ToastInternal(_, ref) {
             ]);
         },
     }));
-    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
+    return (React__default.createElement("div", { className: styles.container }, toasts.map(toast => (React__default.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
 }
 
 export { Toast as T, showToast as s };

package/dist/styles.css

@@ -3377,8 +3377,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   width: calc(var(--space-extravagant) * 3.75);
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
-  margin-top: 8px;
-  margin-top: var(--space-small);
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;

package/dist/useChildComponent-es.js

@@ -1,4 +1,4 @@
-import React, { useMemo, isValidElement } from 'react';
+import React__default, { useMemo, isValidElement } from 'react';
 
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
@@ -8,7 +8,7 @@ import React, { useMemo, isValidElement } from 'react';
  */
 function useChildComponent(children, isCorrectComponent) {
     return useMemo(() => {
-        return React.Children.toArray(children).find(d => isValidElement(d) && isCorrectComponent(d));
+        return React__default.Children.toArray(children).find(d => isValidElement(d) && isCorrectComponent(d));
     }, [children]);
 }
 

package/dist/useFocusTrap-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useFocusTrap$1 = {};
 
 Object.defineProperty(useFocusTrap$1, "__esModule", { value: true });
 var useFocusTrap_2 = useFocusTrap$1.useFocusTrap = useFocusTrap;
-const react_1 = React;
+const react_1 = React__default;
 /**
  * Traps the focus within the children of the ref element.
  *

package/dist/useInView-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useInView$1 = {};
 
 Object.defineProperty(useInView$1, "__esModule", { value: true });
 var useInView_2 = useInView$1.useInView = useInView;
-const react_1 = React;
+const react_1 = React__default;
 function useInView() {
     const ref = (0, react_1.useRef)(null);
     const [isInView, setIsInView] = (0, react_1.useState)(false);

package/dist/useIsMounted-es.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-es.js';
 
 var useIsMounted$1 = {};
@@ -14,7 +14,7 @@ var useSafeLayoutEffect = {};
 
 Object.defineProperty(useIsMounted$1, "__esModule", { value: true });
 var useIsMounted_2 = useIsMounted$1.useIsMounted = useIsMounted;
-const react_1 = React;
+const react_1 = React__default;
 const useSafeLayoutEffect_1 = useSafeLayoutEffect;
 /**
  * If you are using this hook in order to only perform an action once after mounting (for example sending

package/dist/useOnKeyDown-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useOnKeyDown$1 = {};
 
 Object.defineProperty(useOnKeyDown$1, "__esModule", { value: true });
 var useOnKeyDown_2 = useOnKeyDown$1.useOnKeyDown = useOnKeyDown;
-const react_1 = React;
+const react_1 = React__default;
 function useOnKeyDown(callback, keys) {
     (0, react_1.useEffect)(() => {
         window.addEventListener("keydown", handler);

package/dist/useRefocusOnActivator-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useRefocusOnActivator$1 = {};
 
 Object.defineProperty(useRefocusOnActivator$1, "__esModule", { value: true });
 var useRefocusOnActivator_2 = useRefocusOnActivator$1.useRefocusOnActivator = useRefocusOnActivator;
-const react_1 = React;
+const react_1 = React__default;
 /**
  * Brings back the focus to the element that opened an overlaid element once
  * said overlaid element is dismissed.

package/dist/useResizeObserver-es.js

@@ -1,5 +1,5 @@
 import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import React from 'react';
+import React__default from 'react';
 import { a as throttle_1 } from './throttle-es.js';
 
 function _mergeNamespaces(n, m) {
@@ -956,7 +956,7 @@ var require$$0 = /*@__PURE__*/getAugmentedNamespace(ResizeObserver_es);
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var ResizeObserver = _interopDefault(require$$0);
-var react = React;
+var react = React__default;
 
 function useResizeObserver$1(opts) {
   if (opts === void 0) {
@@ -1055,7 +1055,7 @@ var polyfilled = useResizeObserver$1;
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.Breakpoints = void 0;
 	exports.useResizeObserver = useResizeObserver;
-	const react_1 = React;
+	const react_1 = React__default;
 	// Importing the polyfilled version of ResizeObserver
 	// eslint-disable-next-line import/no-internal-modules
 	const polyfilled_1 = __importDefault(polyfilled);

package/dist/useSafeLayoutEffect-es.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 
 var useSafeLayoutEffect = {};
 
 Object.defineProperty(useSafeLayoutEffect, "__esModule", { value: true });
 var useSafeLayoutEffect_1 = useSafeLayoutEffect.useSafeLayoutEffect = void 0;
-const react_1 = React;
+const react_1 = React__default;
 useSafeLayoutEffect_1 = useSafeLayoutEffect.useSafeLayoutEffect = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
     ? react_1.useLayoutEffect
     : react_1.useEffect;

package/dist/useScrollToActive-es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useId, useState, useEffect } from 'react';
+import React__default, { useRef, useId, useState, useEffect } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { _ as _baseFlatten } from './_baseFlatten-es.js';
 import { a as _arrayMap, b as _baseGet } from './_baseGet-es.js';
@@ -249,7 +249,7 @@ var useLiveAnnounce$1 = {};
 
 Object.defineProperty(useLiveAnnounce$1, "__esModule", { value: true });
 var useLiveAnnounce_2 = useLiveAnnounce$1.useLiveAnnounce = useLiveAnnounce;
-const react_1 = React;
+const react_1 = React__default;
 /**
  * Announce a message on voice over whenever you do an action. This is
  * especially helpful when you have an action that adds or deletes an element
@@ -479,7 +479,7 @@ function generateCustomOptionObject(searchValue) {
     return {
         value: searchValue,
         label: searchValue,
-        prefix: React.createElement(Icon, { name: "add" }),
+        prefix: React__default.createElement(Icon, { name: "add" }),
         custom: true,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.26.0",
+  "version": "6.26.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -418,6 +418,7 @@
     "dist/*"
   ],
   "dependencies": {
+    "@floating-ui/react": "^0.27.5",
     "@jobber/formatters": "^0.4.0",
     "@popperjs/core": "^2.0.6",
     "@tanstack/react-table": "8.5.13",
@@ -489,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2a98fef2597c160aa330e24cf95cba9c616b3d65"
+  "gitHead": "c6e2e145a9e31df7d2ae1e70d1b7c4d3ac3b1dbf"
 }