@jobber/components 6.90.4 → 6.91.1

package/dist/Modal/index.mjs

@@ -2,14 +2,12 @@ import React__default, { useRef, createContext, useContext } from 'react';
 import ReactDOM__default from 'react-dom';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from '../useRefocusOnActivator-es.js';
-import { u as useOnKeyDown_2 } from '../useOnKeyDown-es.js';
-import { u as useFocusTrap_2 } from '../useFocusTrap-es.js';
+import { useRefocusOnActivator, useFocusTrap, useOnKeyDown } from '@jobber/hooks';
 import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { h as useFloatingNodeId, u as useFloating, c as useDismiss, m as useRole, d as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, n as FloatingFocusManager, p as FloatingOverlay } from '../floating-ui.react-es.js';
+import { h as useFloatingNodeId, u as useFloating, a as useDismiss, m as useRole, b as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, n as FloatingFocusManager, p as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';
@@ -33,9 +31,9 @@ var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKIT
 
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
-    useRefocusOnActivator_2(open);
-    const modalRef = useFocusTrap_2(open);
-    useOnKeyDown_2(handleRequestClose, "Escape");
+    useRefocusOnActivator(open);
+    const modalRef = useFocusTrap(open);
+    useOnKeyDown(handleRequestClose, "Escape");
     const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
         React__default.createElement(motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default.createElement(motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {

package/dist/Page/index.cjs

@@ -3,12 +3,7 @@
 var Page = require('../Page-cjs.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../throttle-cjs.js');
-require('../debounce-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
+require('@jobber/hooks');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
@@ -16,6 +11,7 @@ require('../Content-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');
 require('../index-cjs.js');
+require('../_commonjsHelpers-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');
@@ -23,12 +19,8 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
-require('../useFocusTrap-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 

package/dist/Page/index.mjs

@@ -1,12 +1,7 @@
 export { P as Page } from '../Page-es.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-es.js';
-import '../_commonjsHelpers-es.js';
-import '../throttle-es.js';
-import '../debounce-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
+import '@jobber/hooks';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
@@ -14,6 +9,7 @@ import '../Content-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';
 import '../index-es.js';
+import '../_commonjsHelpers-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';
@@ -21,11 +17,7 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
-import '../useFocusTrap-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';

package/dist/Page-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Content = require('./Content-cjs.js');
@@ -15,11 +15,11 @@ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA
 
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = useResizeObserver.useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.small,
-        [styles.large]: titleBarWidth > useResizeObserver.useResizeObserver.Breakpoints.base,
+        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
+        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;

package/dist/Page-es.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-es.js';
+import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { C as Content } from './Content-es.js';
@@ -13,11 +13,11 @@ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA
 
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
-    const [titleBarRef, { width: titleBarWidth = useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver();
+    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > useResizeObserver.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > useResizeObserver.Breakpoints.small,
-        [styles.large]: titleBarWidth > useResizeObserver.Breakpoints.base,
+        [styles.small]: titleBarWidth > Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > Breakpoints.small,
+        [styles.large]: titleBarWidth > Breakpoints.base,
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;

package/dist/Popover/index.cjs

@@ -6,7 +6,7 @@ require('react');
 require('classnames');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
-require('../useRefocusOnActivator-cjs.js');
+require('@jobber/hooks');
 require('../AtlantisPortalContent-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
 require('@jobber/design');

package/dist/Popover/index.mjs

@@ -4,7 +4,7 @@ import 'react';
 import 'classnames';
 import '../floating-ui.react-es.js';
 import 'react-dom';
-import '../useRefocusOnActivator-es.js';
+import '@jobber/hooks';
 import '../AtlantisPortalContent-es.js';
 import '../AtlantisThemeContext-es.js';
 import '@jobber/design';

package/dist/Popover-cjs.js

@@ -4,7 +4,7 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var AtlantisPortalContent = require('./AtlantisPortalContent-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
@@ -53,7 +53,7 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
         // (which we are), not hidden with css. https://floating-ui.com/docs/autoUpdate
         whileElementsMounted: floatingUi_react.autoUpdate,
     });
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    jobberHooks.useRefocusOnActivator(open);
     return {
         setFloatingElement: refs.setFloating,
         setArrowElement,

package/dist/Popover-es.js

@@ -1,8 +1,8 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
-import { a as arrow, u as useFloating, b as autoUpdate, o as offset, s as shift, l as limitShift, k as autoPlacement, f as flip, F as FloatingPortal } from './floating-ui.react-es.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+import { e as arrow, u as useFloating, c as autoUpdate, o as offset, d as shift, l as limitShift, k as autoPlacement, f as flip, F as FloatingPortal } from './floating-ui.react-es.js';
+import { useRefocusOnActivator } from '@jobber/hooks';
 import { A as AtlantisPortalContent } from './AtlantisPortalContent-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
@@ -51,7 +51,7 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
         // (which we are), not hidden with css. https://floating-ui.com/docs/autoUpdate
         whileElementsMounted: autoUpdate,
     });
-    useRefocusOnActivator_2(open);
+    useRefocusOnActivator(open);
     return {
         setFloatingElement: refs.setFloating,
         setArrowElement,

package/dist/RecurringSelect/index.cjs

@@ -20,6 +20,7 @@ require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
 require('../FormField-cjs.js');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');

package/dist/RecurringSelect/index.mjs

@@ -18,6 +18,7 @@ import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
 import '../FormField-es.js';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';

package/dist/Select/index.cjs

@@ -6,6 +6,7 @@ var FormField = require('../FormField-cjs.js');
 var classnames = require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
+require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');

package/dist/Select/index.mjs

@@ -4,6 +4,7 @@ import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFie
 import classnames from 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
+import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';

package/dist/SideDrawer/index.cjs

@@ -4,12 +4,8 @@ var SideDrawer = require('../SideDrawer-cjs.js');
 require('react');
 require('react-dom');
 require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
-require('../useFocusTrap-cjs.js');
+require('@jobber/hooks');
 require('classnames');
-require('../useInView-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
 require('@jobber/design');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');

package/dist/SideDrawer/index.mjs

@@ -2,12 +2,8 @@ export { S as SideDrawer } from '../SideDrawer-es.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
-import '../useFocusTrap-es.js';
+import '@jobber/hooks';
 import 'classnames';
-import '../useInView-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
 import '@jobber/design';
 import '../Heading-es.js';
 import '../Typography-es.js';

package/dist/SideDrawer-cjs.js

@@ -3,11 +3,8 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
-var useFocusTrap = require('./useFocusTrap-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 var classnames = require('classnames');
-var useInView = require('./useInView-cjs.js');
-var useIsMounted = require('./useIsMounted-cjs.js');
 var design = require('@jobber/design');
 var Heading = require('./Heading-cjs.js');
 var Button = require('./Button-cjs.js');
@@ -87,10 +84,10 @@ const useSideDrawerState = (open) => {
         backButton: false,
     });
     const { toolbar, title, actions, backButton, footer } = useSlotIDs();
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const sideDrawerRef = useFocusTrap.useFocusTrap_2(open);
-    const [headerShadowRef, noHeaderShadow] = useInView.useInView_2();
-    const [footerShadowRef, noFooterShadow] = useInView.useInView_2();
+    jobberHooks.useRefocusOnActivator(open);
+    const sideDrawerRef = jobberHooks.useFocusTrap(open);
+    const [headerShadowRef, noHeaderShadow] = jobberHooks.useInView();
+    const [footerShadowRef, noFooterShadow] = jobberHooks.useInView();
     return {
         ref,
         setRef,
@@ -107,9 +104,9 @@ const useSideDrawerState = (open) => {
 function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
-    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    jobberHooks.useRefocusOnActivator(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
-    const isMounted = useIsMounted.useIsMounted_2();
+    const isMounted = jobberHooks.useIsMounted();
     if (!isMounted.current && !container)
         return null;
     const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {

package/dist/SideDrawer-es.js

@@ -1,11 +1,8 @@
 import React__default, { createContext, useContext, useEffect, useState, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
+import { useRefocusOnActivator, useIsMounted, useFocusTrap, useInView } from '@jobber/hooks';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
 import { tokens } from '@jobber/design';
 import { H as Heading } from './Heading-es.js';
 import { B as Button } from './Button-es.js';
@@ -85,10 +82,10 @@ const useSideDrawerState = (open) => {
         backButton: false,
     });
     const { toolbar, title, actions, backButton, footer } = useSlotIDs();
-    useRefocusOnActivator_2(open);
-    const sideDrawerRef = useFocusTrap_2(open);
-    const [headerShadowRef, noHeaderShadow] = useInView_2();
-    const [footerShadowRef, noFooterShadow] = useInView_2();
+    useRefocusOnActivator(open);
+    const sideDrawerRef = useFocusTrap(open);
+    const [headerShadowRef, noHeaderShadow] = useInView();
+    const [footerShadowRef, noFooterShadow] = useInView();
     return {
         ref,
         setRef,
@@ -105,9 +102,9 @@ const useSideDrawerState = (open) => {
 function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
-    useRefocusOnActivator_2(open);
+    useRefocusOnActivator(open);
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
-    const isMounted = useIsMounted_2();
+    const isMounted = useIsMounted();
     if (!isMounted.current && !container)
         return null;
     const SideDrawerRender = (React__default.createElement(SideDrawerContext.Provider, { value: {

package/dist/Tabs/index.cjs

@@ -3,7 +3,6 @@
 var Tabs = require('../Tabs-cjs.js');
 require('react');
 require('classnames');
-require('../throttle-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../debounce-cjs.js');
 require('../isObjectLike-cjs.js');

package/dist/Tabs/index.mjs

@@ -1,7 +1,6 @@
 export { a as Tab, T as Tabs } from '../Tabs-es.js';
 import 'react';
 import 'classnames';
-import '../throttle-es.js';
 import '../_commonjsHelpers-es.js';
 import '../debounce-es.js';
 import '../isObjectLike-es.js';

package/dist/Tabs-cjs.js

@@ -2,11 +2,85 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var throttle = require('./throttle-cjs.js');
+var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
+var debounce$1 = require('./debounce-cjs.js');
+var isObjectLike = require('./isObjectLike-cjs.js');
 var Typography = require('./Typography-cjs.js');
 
 var styles = {"tabs":"cHJe2HsBNic-","overflow":"eQt1Jis30lo-","overflowRight":"_6Vf7pQfyKKk-","overflowLeft":"jyevrJK7Bcg-","tabRow":"LfIIg9bwrhQ-","tab":"DEdzikxlAkw-","selected":"VDB94VYoyB0-","tabContent":"htdKg6As4bY-","spinning":"XFrAkUebMjI-"};
 
+var debounce = debounce$1.debounce_1,
+    isObject = isObjectLike.isObject_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+var throttle_1 = throttle;
+
+var throttle$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(throttle_1);
+
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = React.useState(false);
     const [overflowLeft, setOverflowLeft] = React.useState(false);
@@ -21,7 +95,7 @@ function useTabsOverflow() {
             setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
         }
     };
-    const throttledHandleOverflowing = React.useCallback(throttle.throttle(handleOverflowing, 100), []);
+    const throttledHandleOverflowing = React.useCallback(throttle$1(handleOverflowing, 100), []);
     React.useEffect(() => {
         var _a;
         handleOverflowing();

package/dist/Tabs-es.js

@@ -1,10 +1,84 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { t as throttle } from './throttle-es.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
+import { a as debounce_1 } from './debounce-es.js';
+import { a as isObject_1 } from './isObjectLike-es.js';
 import { T as Typography } from './Typography-es.js';
 
 var styles = {"tabs":"cHJe2HsBNic-","overflow":"eQt1Jis30lo-","overflowRight":"_6Vf7pQfyKKk-","overflowLeft":"jyevrJK7Bcg-","tabRow":"LfIIg9bwrhQ-","tab":"DEdzikxlAkw-","selected":"VDB94VYoyB0-","tabContent":"htdKg6As4bY-","spinning":"XFrAkUebMjI-"};
 
+var debounce = debounce_1,
+    isObject = isObject_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+var throttle_1 = throttle;
+
+var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttle_1);
+
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = useState(false);
     const [overflowLeft, setOverflowLeft] = useState(false);
@@ -19,7 +93,7 @@ function useTabsOverflow() {
             setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
         }
     };
-    const throttledHandleOverflowing = useCallback(throttle(handleOverflowing, 100), []);
+    const throttledHandleOverflowing = useCallback(throttle$1(handleOverflowing, 100), []);
     useEffect(() => {
         var _a;
         handleOverflowing();

package/dist/Tooltip/index.cjs

@@ -6,8 +6,7 @@ require('classnames');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-cjs.js');
-require('../useIsMounted-cjs.js');
+require('@jobber/hooks');
 
 
 

package/dist/Tooltip/index.mjs

@@ -4,5 +4,4 @@ import 'classnames';
 import '../floating-ui.react-es.js';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-es.js';
-import '../useIsMounted-es.js';
+import '@jobber/hooks';

package/dist/Tooltip-cjs.js

@@ -4,8 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var framerMotion = require('framer-motion');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
-var useIsMounted = require('./useIsMounted-cjs.js');
+var jobberHooks = require('@jobber/hooks');
 
 var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","spinning":"bobYmlUMnuY-"};
 
@@ -122,7 +121,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        jobberHooks.useSafeLayoutEffect(() => {
             injectAttributes();
             addListeners();
             return () => {
@@ -132,7 +131,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
     }
 }
 function TooltipPortal({ children }) {
-    const mounted = useIsMounted.useIsMounted_2();
+    const mounted = jobberHooks.useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }

package/dist/Tooltip-es.js

@@ -1,9 +1,8 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
-import { u as useFloating, s as shift, f as flip, a as arrow, b as autoUpdate, l as limitShift, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, d as shift, f as flip, e as arrow, c as autoUpdate, l as limitShift, F as FloatingPortal } from './floating-ui.react-es.js';
 import { motion } from 'framer-motion';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { useSafeLayoutEffect, useIsMounted } from '@jobber/hooks';
 
 var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","spinning":"bobYmlUMnuY-"};
 
@@ -120,7 +119,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        useSafeLayoutEffect_1(() => {
+        useSafeLayoutEffect(() => {
             injectAttributes();
             addListeners();
             return () => {
@@ -130,7 +129,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
     }
 }
 function TooltipPortal({ children }) {
-    const mounted = useIsMounted_2();
+    const mounted = useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }