@jobber/components 5.9.0 → 5.9.1-fix-dynami.6

package/dist/SideDrawer/SideDrawerContext.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
+export interface RegisteredComponents {
+    backButton: boolean;
+}
 interface SideDrawerContextValue {
     readonly actionPortal?: HTMLElement | null;
     readonly titlePortal?: HTMLElement | null;
     readonly toolbarPortal?: HTMLElement | null;
     readonly backPortal?: HTMLElement | null;
     readonly footerPortal?: HTMLElement | null;
+    readonly components: RegisteredComponents;
+    readonly registerComponent: (key: keyof RegisteredComponents) => void;
+    readonly unRegisterComponent: (key: keyof RegisteredComponents) => void;
 }
 declare const SideDrawerContext: import("react").Context<SideDrawerContextValue>;
 declare function useSideDrawerContext(): SideDrawerContextValue;

package/dist/SideDrawer/index.cjs

@@ -1,20 +1,22 @@
 'use strict';
 
-var SideDrawer = require('../SideDrawer-C4JGK5DR.js');
+var SideDrawer = require('../SideDrawer-BQoHrBtE.js');
 require('react');
 require('react-dom');
 require('framer-motion');
 require('@jobber/design');
-require('../useRefocusOnActivator-BmIUdoxU.js');
-require('../useFocusTrap-Bjr9iBsJ.js');
+require('../useRefocusOnActivator-CMr73hlP.js');
+require('../useFocusTrap-CdTai3LS.js');
 require('classnames');
-require('../useInView-C3_BqnZk.js');
-require('../Heading-DoLEoxtf.js');
-require('../Typography-CVJEvEOt.js');
-require('../Button-JvyTYV5X.js');
+require('../useInView-BMcbYL9d.js');
+require('../useIsMounted-ncB5omxx.js');
+require('../useSafeLayoutEffect-DISHM5lB.js');
+require('../Heading-VrwN5vNo.js');
+require('../Typography-BxHuYs-o.js');
+require('../Button-IlITnb5h.js');
 require('react-router-dom');
-require('../Icon-DT5jb3j1.js');
-require('../Flex-BQqMUahF.js');
+require('../Icon-B5K-k88P.js');
+require('../Flex-B-2n5FGM.js');
 
 
 

package/dist/SideDrawer/index.mjs

@@ -1,15 +1,17 @@
-export { S as SideDrawer } from '../SideDrawer-BKG18DG4.js';
+export { S as SideDrawer } from '../SideDrawer-BM005WDZ.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
 import '@jobber/design';
-import '../useRefocusOnActivator-DKmnJsR4.js';
-import '../useFocusTrap-WBrWJBGI.js';
+import '../useRefocusOnActivator-BY6yfU3j.js';
+import '../useFocusTrap-aorIzbaa.js';
 import 'classnames';
-import '../useInView-DVmYM6QD.js';
-import '../Heading-CjF0hBSe.js';
-import '../Typography-DPvvnhdJ.js';
-import '../Button-B8SWkG_r.js';
+import '../useInView-D3rAs5eq.js';
+import '../useIsMounted-Cc4Vkkxz.js';
+import '../useSafeLayoutEffect-B3UGWYPF.js';
+import '../Heading-CN8lJwCa.js';
+import '../Typography-kdjvbOK4.js';
+import '../Button-BoJmpRfn.js';
 import 'react-router-dom';
-import '../Icon-C5a2rKDn.js';
-import '../Flex-CjRbbevF.js';
+import '../Icon-CKzbLfwz.js';
+import '../Flex-Dy_EZ7bM.js';

package/dist/{SideDrawer-BKG18DG4.js → SideDrawer-BM005WDZ.js}

@@ -1,16 +1,23 @@
-import React, { createContext, useContext, useState, useId } from 'react';
+import React, { createContext, useContext, useEffect, useState, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DKmnJsR4.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-WBrWJBGI.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-BY6yfU3j.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-aorIzbaa.js';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-DVmYM6QD.js';
-import { H as Heading } from './Heading-CjF0hBSe.js';
-import { B as Button } from './Button-B8SWkG_r.js';
-import { F as Flex } from './Flex-CjRbbevF.js';
+import { u as useInView_2 } from './useInView-D3rAs5eq.js';
+import { u as useIsMounted_2 } from './useIsMounted-Cc4Vkkxz.js';
+import { H as Heading } from './Heading-CN8lJwCa.js';
+import { B as Button } from './Button-BoJmpRfn.js';
+import { F as Flex } from './Flex-Dy_EZ7bM.js';
 
-const SideDrawerContext = createContext({});
+const SideDrawerContext = createContext({
+    components: {
+        backButton: false,
+    },
+    registerComponent: () => undefined,
+    unRegisterComponent: () => undefined,
+});
 function useSideDrawerContext() {
     const context = useContext(SideDrawerContext);
     return context;
@@ -40,10 +47,16 @@ function SideDrawerToolbar({ children }) {
     return createPortal(children, toolbarPortal);
 }
 
-var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","subtle":"j-us8-p4bfY-","header":"di7wVz6Zdy8-","footer":"UXAxYfbJy1Q-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-","content":"ngWetY6itkw-"};
+var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","header":"di7wVz6Zdy8-","content":"ngWetY6itkw-","footer":"UXAxYfbJy1Q-","subtle":"j-us8-p4bfY-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-","reverseScroll":"D2c5PtgziXk-","headerShadowListener":"-zW1vxkjXYU-","footerShadowListener":"ZTQgpIVUpoQ-","backButton":"P8ODgotVStw-","backButtonVisible":"_2HLMHzID71U-"};
 
 function SideDrawerBackButton({ onClick, }) {
-    const { backPortal } = useSideDrawerContext();
+    const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
+    useEffect(() => {
+        registerComponent("backButton");
+        return () => {
+            unRegisterComponent("backButton");
+        };
+    }, []);
     if (!backPortal)
         return null;
     return createPortal(React.createElement(Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
@@ -60,21 +73,20 @@ const variants = {
     hidden: { x: "100%" },
     visible: { x: 0, transitionEnd: { x: 0 } },
 };
-// eslint-disable-next-line max-statements
-function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, }) {
     var _a;
     const [ref, setRef] = useState(null);
-    const toolbar = useSlotID();
-    const title = useSlotID("title");
-    const actions = useSlotID();
-    const backButton = useSlotID("back");
-    const footer = useSlotID();
+    const [components, setComponents] = useState({
+        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();
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
-    if (!container)
+    const isMounted = useIsMounted_2();
+    if (!isMounted.current && !container)
         return null;
     return createPortal(React.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
@@ -82,37 +94,53 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
             toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(toolbar.selector),
             backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(backButton.selector),
             footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(footer.selector),
+            components,
+            registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
+            unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
         open && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
-        React.createElement(AnimatePresence, { initial: false }, open && (React.createElement(motion.div, { className: styles.drawer, ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+        React.createElement(AnimatePresence, { initial: false }, open && (React.createElement(motion.div, { className: classnames(styles.drawer, {
+                [styles.reverseScroll]: scrollDirection === "reverse",
+            }), ref: setRef, "data-elevation": "elevated", variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
                 duration: tokens["timing-base"] / 1000,
             } },
             React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
                 }), tabIndex: 0, onKeyUp: handleKeyUp },
-                React.createElement("div", { ref: headerShadowRef }),
                 React.createElement("div", { className: classnames(styles.header, {
                         [styles.hasShadow]: headerShadowRef.current && !noHeaderShadow,
                     }) },
                     React.createElement(Flex, { template: ["grow", "shrink"] },
                         React.createElement(Flex, { template: ["shrink", "grow"], gap: "none" },
-                            React.createElement("div", Object.assign({}, backButton.attr)),
+                            React.createElement("div", Object.assign({ className: classnames(styles.backButton, {
+                                    [styles.backButtonVisible]: components.backButton,
+                                }) }, backButton.attr)),
                             React.createElement("div", Object.assign({}, title.attr))),
                         React.createElement("div", { className: styles.headerActions },
                             React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, actions.attr)),
                             React.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, toolbar.attr))),
-                React.createElement("div", { className: styles.content }, children),
+                React.createElement("div", { className: styles.content },
+                    React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
+                    children,
+                    React.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
                 React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
                         [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
-                    }) }, footer.attr)),
-                React.createElement("div", { ref: footerShadowRef })))))), container);
+                    }) }, footer.attr))))))), container);
     function handleKeyUp(event) {
         if (event.key === "Escape") {
             onRequestClose();
         }
     }
 }
+function useSlotIDs() {
+    const toolbar = useSlotID();
+    const title = useSlotID("title");
+    const actions = useSlotID();
+    const backButton = useSlotID("back");
+    const footer = useSlotID();
+    return { toolbar, title, actions, backButton, footer };
+}
 function useSlotID(prefix) {
     const id = useId();
     const prefixedId = prefix ? `${prefix}-${id}` : id;

package/dist/{SideDrawer-C4JGK5DR.js → SideDrawer-BQoHrBtE.js}

@@ -4,15 +4,22 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BmIUdoxU.js');
-var useFocusTrap = require('./useFocusTrap-Bjr9iBsJ.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-CMr73hlP.js');
+var useFocusTrap = require('./useFocusTrap-CdTai3LS.js');
 var classnames = require('classnames');
-var useInView = require('./useInView-C3_BqnZk.js');
-var Heading = require('./Heading-DoLEoxtf.js');
-var Button = require('./Button-JvyTYV5X.js');
-var Flex = require('./Flex-BQqMUahF.js');
+var useInView = require('./useInView-BMcbYL9d.js');
+var useIsMounted = require('./useIsMounted-ncB5omxx.js');
+var Heading = require('./Heading-VrwN5vNo.js');
+var Button = require('./Button-IlITnb5h.js');
+var Flex = require('./Flex-B-2n5FGM.js');
 
-const SideDrawerContext = React.createContext({});
+const SideDrawerContext = React.createContext({
+    components: {
+        backButton: false,
+    },
+    registerComponent: () => undefined,
+    unRegisterComponent: () => undefined,
+});
 function useSideDrawerContext() {
     const context = React.useContext(SideDrawerContext);
     return context;
@@ -42,10 +49,16 @@ function SideDrawerToolbar({ children }) {
     return ReactDOM.createPortal(children, toolbarPortal);
 }
 
-var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","subtle":"j-us8-p4bfY-","header":"di7wVz6Zdy8-","footer":"UXAxYfbJy1Q-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-","content":"ngWetY6itkw-"};
+var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","header":"di7wVz6Zdy8-","content":"ngWetY6itkw-","footer":"UXAxYfbJy1Q-","subtle":"j-us8-p4bfY-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-","reverseScroll":"D2c5PtgziXk-","headerShadowListener":"-zW1vxkjXYU-","footerShadowListener":"ZTQgpIVUpoQ-","backButton":"P8ODgotVStw-","backButtonVisible":"_2HLMHzID71U-"};
 
 function SideDrawerBackButton({ onClick, }) {
-    const { backPortal } = useSideDrawerContext();
+    const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
+    React.useEffect(() => {
+        registerComponent("backButton");
+        return () => {
+            unRegisterComponent("backButton");
+        };
+    }, []);
     if (!backPortal)
         return null;
     return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
@@ -62,21 +75,20 @@ const variants = {
     hidden: { x: "100%" },
     visible: { x: 0, transitionEnd: { x: 0 } },
 };
-// eslint-disable-next-line max-statements
-function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, }) {
     var _a;
     const [ref, setRef] = React.useState(null);
-    const toolbar = useSlotID();
-    const title = useSlotID("title");
-    const actions = useSlotID();
-    const backButton = useSlotID("back");
-    const footer = useSlotID();
+    const [components, setComponents] = React.useState({
+        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();
     const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
-    if (!container)
+    const isMounted = useIsMounted.useIsMounted_2();
+    if (!isMounted.current && !container)
         return null;
     return ReactDOM.createPortal(React.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
@@ -84,37 +96,53 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
             toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(toolbar.selector),
             backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(backButton.selector),
             footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(footer.selector),
+            components,
+            registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
+            unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
         open && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
-        React.createElement(framerMotion.AnimatePresence, { initial: false }, open && (React.createElement(framerMotion.motion.div, { className: styles.drawer, ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+        React.createElement(framerMotion.AnimatePresence, { initial: false }, open && (React.createElement(framerMotion.motion.div, { className: classnames(styles.drawer, {
+                [styles.reverseScroll]: scrollDirection === "reverse",
+            }), ref: setRef, "data-elevation": "elevated", variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
                 duration: design.tokens["timing-base"] / 1000,
             } },
             React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
                     [styles.subtle]: variation === "subtle",
                 }), tabIndex: 0, onKeyUp: handleKeyUp },
-                React.createElement("div", { ref: headerShadowRef }),
                 React.createElement("div", { className: classnames(styles.header, {
                         [styles.hasShadow]: headerShadowRef.current && !noHeaderShadow,
                     }) },
                     React.createElement(Flex.Flex, { template: ["grow", "shrink"] },
                         React.createElement(Flex.Flex, { template: ["shrink", "grow"], gap: "none" },
-                            React.createElement("div", Object.assign({}, backButton.attr)),
+                            React.createElement("div", Object.assign({ className: classnames(styles.backButton, {
+                                    [styles.backButtonVisible]: components.backButton,
+                                }) }, backButton.attr)),
                             React.createElement("div", Object.assign({}, title.attr))),
                         React.createElement("div", { className: styles.headerActions },
                             React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, actions.attr)),
                             React.createElement(Button.Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, toolbar.attr))),
-                React.createElement("div", { className: styles.content }, children),
+                React.createElement("div", { className: styles.content },
+                    React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
+                    children,
+                    React.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
                 React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
                         [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
-                    }) }, footer.attr)),
-                React.createElement("div", { ref: footerShadowRef })))))), container);
+                    }) }, footer.attr))))))), container);
     function handleKeyUp(event) {
         if (event.key === "Escape") {
             onRequestClose();
         }
     }
 }
+function useSlotIDs() {
+    const toolbar = useSlotID();
+    const title = useSlotID("title");
+    const actions = useSlotID();
+    const backButton = useSlotID("back");
+    const footer = useSlotID();
+    return { toolbar, title, actions, backButton, footer };
+}
 function useSlotID(prefix) {
     const id = React.useId();
     const prefixedId = prefix ? `${prefix}-${id}` : id;

package/dist/Spinner/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Spinner = require('../Spinner-DZ-9u_ix.js');
+var Spinner = require('../Spinner-CWYTZNMB.js');
 require('react');
 require('classnames');
 

package/dist/Spinner/index.mjs

@@ -1,3 +1,3 @@
-export { S as Spinner } from '../Spinner-B2nZ092U.js';
+export { S as Spinner } from '../Spinner-C_VUK1P7.js';
 import 'react';
 import 'classnames';

package/dist/StatusIndicator/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var StatusIndicator = require('../StatusIndicator-BXrBu7y3.js');
+var StatusIndicator = require('../StatusIndicator-HsUG9UhF.js');
 require('react');
 
 

package/dist/StatusIndicator/index.mjs

@@ -1,2 +1,2 @@
-export { S as StatusIndicator } from '../StatusIndicator-C_xUa6Pj.js';
+export { S as StatusIndicator } from '../StatusIndicator-C8guE0Az.js';
 import 'react';

package/dist/StatusLabel/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var StatusLabel = require('../StatusLabel-DgXBPx39.js');
+var StatusLabel = require('../StatusLabel-CQ8lm0ly.js');
 require('react');
 require('classnames');
-require('../Typography-CVJEvEOt.js');
-require('../StatusIndicator-BXrBu7y3.js');
+require('../Typography-BxHuYs-o.js');
+require('../StatusIndicator-HsUG9UhF.js');
 
 
 

package/dist/StatusLabel/index.mjs

@@ -1,5 +1,5 @@
-export { S as StatusLabel } from '../StatusLabel-BT1EBR8G.js';
+export { S as StatusLabel } from '../StatusLabel-CwxK3uv2.js';
 import 'react';
 import 'classnames';
-import '../Typography-DPvvnhdJ.js';
-import '../StatusIndicator-C_xUa6Pj.js';
+import '../Typography-kdjvbOK4.js';
+import '../StatusIndicator-C8guE0Az.js';

package/dist/{StatusLabel-DgXBPx39.js → StatusLabel-CQ8lm0ly.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-CVJEvEOt.js');
-var StatusIndicator = require('./StatusIndicator-BXrBu7y3.js');
+var Typography = require('./Typography-BxHuYs-o.js');
+var StatusIndicator = require('./StatusIndicator-HsUG9UhF.js');
 
 var styles = {"success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","statusLabelRow":"MB0ycTR4PHg-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-"};
 

package/dist/{StatusLabel-BT1EBR8G.js → StatusLabel-CwxK3uv2.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-DPvvnhdJ.js';
-import { S as StatusIndicator } from './StatusIndicator-C_xUa6Pj.js';
+import { T as Typography } from './Typography-kdjvbOK4.js';
+import { S as StatusIndicator } from './StatusIndicator-C8guE0Az.js';
 
 var styles = {"success":"WBxCEgPiC98-","warning":"ok6hVljkqSE-","critical":"-YTFHnzpkRE-","inactive":"_2F0I59nddP8-","informative":"BQd6Hylvxh0-","statusLabelRow":"MB0ycTR4PHg-","labelTextEndAligned":"_0kNfkSPBETw-","statusIndicatorWrapper":"NYMNxZSup30-"};
 

package/dist/Switch/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var Switch = require('../Switch-OED7SLDW.js');
+var Switch = require('../Switch-CRJl1O5U.js');
 require('react');
 require('classnames');
-require('../Typography-CVJEvEOt.js');
+require('../Typography-BxHuYs-o.js');
 
 
 

package/dist/Switch/index.mjs

@@ -1,4 +1,4 @@
-export { S as Switch } from '../Switch-BSuyfro-.js';
+export { S as Switch } from '../Switch-C1HYo5Bf.js';
 import 'react';
 import 'classnames';
-import '../Typography-DPvvnhdJ.js';
+import '../Typography-kdjvbOK4.js';

package/dist/{Switch-BSuyfro-.js → Switch-C1HYo5Bf.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-DPvvnhdJ.js';
+import { T as Typography } from './Typography-kdjvbOK4.js';
 
 var styles = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
 

package/dist/{Switch-OED7SLDW.js → Switch-CRJl1O5U.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-CVJEvEOt.js');
+var Typography = require('./Typography-BxHuYs-o.js');
 
 var styles = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
 

package/dist/Table/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Body = require('../Body-Dx0y6ZZ4.js');
+var Body = require('../Body-D265W-1l.js');
 require('react');
 require('@jobber/formatters');
 require('classnames');

package/dist/Table/index.mjs

@@ -1,4 +1,4 @@
-export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from '../Body-Br9V3-hb.js';
+export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from '../Body-C0h92TE_.js';
 import 'react';
 import '@jobber/formatters';
 import 'classnames';

package/dist/Tabs/hooks/useTabsOverflow.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from "react";
+interface UseTabsOverflow {
+    overflowRight: boolean;
+    overflowLeft: boolean;
+    tabRow: MutableRefObject<HTMLUListElement>;
+}
+export declare function useTabsOverflow(): UseTabsOverflow;
+export {};

package/dist/Tabs/index.cjs

@@ -1,9 +1,14 @@
 'use strict';
 
-var Tabs = require('../Tabs-BfBfnMwT.js');
+var Tabs = require('../Tabs-BJN1JPvW.js');
 require('react');
 require('classnames');
-require('../Typography-CVJEvEOt.js');
+require('../throttle-BxKAQmCt.js');
+require('../_commonjsHelpers-DQu2iAfM.js');
+require('../debounce-DXvJZU7k.js');
+require('../isObjectLike-By2TVBfv.js');
+require('../isSymbol-CVauyJsz.js');
+require('../Typography-BxHuYs-o.js');
 
 
 

package/dist/Tabs/index.mjs

@@ -1,4 +1,9 @@
-export { a as Tab, T as Tabs } from '../Tabs-Kw1DYyxP.js';
+export { a as Tab, T as Tabs } from '../Tabs-x4ssIjs6.js';
 import 'react';
 import 'classnames';
-import '../Typography-DPvvnhdJ.js';
+import '../throttle-Cuy8zzht.js';
+import '../_commonjsHelpers-MjLI5q7t.js';
+import '../debounce-DFcrDaT2.js';
+import '../isObjectLike-BRcf1x5E.js';
+import '../isSymbol-EFVKJYy9.js';
+import '../Typography-kdjvbOK4.js';

package/dist/{Tabs-BfBfnMwT.js → Tabs-BJN1JPvW.js}

@@ -2,53 +2,69 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-CVJEvEOt.js');
+var throttle = require('./throttle-BxKAQmCt.js');
+var Typography = require('./Typography-BxHuYs-o.js');
 
 var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
 
-function Tabs({ children, defaultTab = 0, onTabChange }) {
-    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
-    const [activeTab, setActiveTab] = React.useState(activeTabInitialValue);
+function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = React.useState(false);
     const [overflowLeft, setOverflowLeft] = React.useState(false);
     const tabRow = React.useRef();
-    const overflowClassNames = classnames(styles.overflow, {
-        [styles.overflowRight]: overflowRight,
-        [styles.overflowLeft]: overflowLeft,
-    });
-    const activateTab = (index) => {
-        return () => {
-            setActiveTab(index);
-            if (onTabChange) {
-                onTabChange(index);
-            }
-        };
-    };
-    const activeTabProps = React.Children.toArray(children)[activeTab].props;
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
             const clientWidth = tabRow.current.clientWidth;
             const maxScroll = scrollWidth - clientWidth;
             const scrollPos = tabRow.current.scrollLeft;
-            if (scrollWidth > clientWidth) {
-                setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
-                setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
-            }
+            setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
+            setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
         }
     };
+    const throttledHandleOverflowing = React.useCallback(throttle.throttle(handleOverflowing, 100), []);
     React.useEffect(() => {
+        var _a;
         handleOverflowing();
-        tabRow.current &&
-            tabRow.current.addEventListener("scroll", handleOverflowing);
+        (_a = tabRow === null || tabRow === void 0 ? void 0 : tabRow.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", throttledHandleOverflowing);
         return () => {
-            window.removeEventListener("scroll", handleOverflowing);
+            var _a;
+            (_a = tabRow === null || tabRow === void 0 ? void 0 : tabRow.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", throttledHandleOverflowing);
         };
     });
+    return {
+        overflowRight,
+        overflowLeft,
+        tabRow,
+    };
+}
+
+function Tabs({ children, defaultTab = 0, onTabChange }) {
+    var _a;
+    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const [activeTab, setActiveTab] = React.useState(activeTabInitialValue);
+    const { overflowRight, overflowLeft, tabRow } = useTabsOverflow();
+    const overflowClassNames = classnames(styles.overflow, {
+        [styles.overflowRight]: overflowRight,
+        [styles.overflowLeft]: overflowLeft,
+    });
+    const activateTab = (index) => {
+        return () => {
+            setActiveTab(index);
+            if (onTabChange) {
+                onTabChange(index);
+            }
+        };
+    };
+    const activeTabProps = (_a = React.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
+    React.useEffect(() => {
+        if (activeTab > React.Children.count(children) - 1) {
+            setActiveTab(activeTabInitialValue);
+        }
+    }, [React.Children.count(children)]);
     return (React.createElement("div", { className: styles.tabs },
         React.createElement("div", { className: overflowClassNames },
             React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick }))))),
-        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
 }
 function Tab({ label }) {
     return React.createElement(React.Fragment, null, label);