@jobber/components 5.11.0 → 5.12.1

package/dist/{SideDrawer-Cwyvsm5Y.js → SideDrawer-ceIoqKar.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-DT5qHsLH.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-hzWdB2fN.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DoDVROI1.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CpSdAyCV.js';
 import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-CjhUP8KX.js';
-import { H as Heading } from './Heading-C--rNVSj.js';
-import { B as Button } from './Button-D1Nl8eFV.js';
-import { F as Flex } from './Flex-B9ElSsrT.js';
+import { u as useInView_2 } from './useInView-k_BB_YxE.js';
+import { u as useIsMounted_2 } from './useIsMounted-B6x6Ki5e.js';
+import { H as Heading } from './Heading-D5qh625g.js';
+import { B as Button } from './Button-BEjtnMi3.js';
+import { F as Flex } from './Flex-C-fSP--d.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, "data-elevation": "elevated", 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/Spinner/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Spinner = require('../Spinner-B0wSIb1e.js');
+var Spinner = require('../Spinner-CC0Fg0Ij.js');
 require('react');
 require('classnames');
 

package/dist/Spinner/index.mjs

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

package/dist/StatusIndicator/index.cjs

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

package/dist/StatusIndicator/index.mjs

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

package/dist/StatusLabel/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var StatusLabel = require('../StatusLabel-BeWUnZQj.js');
+var StatusLabel = require('../StatusLabel-BVa_dfqj.js');
 require('react');
 require('classnames');
-require('../Typography-ChmjxXh-.js');
-require('../StatusIndicator-1DEkIWIE.js');
+require('../Typography-Dr0PFsNp.js');
+require('../StatusIndicator-B4VZruZS.js');
 
 
 

package/dist/StatusLabel/index.mjs

@@ -1,5 +1,5 @@
-export { S as StatusLabel } from '../StatusLabel-1yqLHpSh.js';
+export { S as StatusLabel } from '../StatusLabel-Dmfr-up5.js';
 import 'react';
 import 'classnames';
-import '../Typography-CPMGPK-a.js';
-import '../StatusIndicator-CTmlnvlz.js';
+import '../Typography-CBgV6lts.js';
+import '../StatusIndicator-BNRbvMsI.js';

package/dist/{StatusLabel-BeWUnZQj.js → StatusLabel-BVa_dfqj.js}

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

package/dist/{StatusLabel-1yqLHpSh.js → StatusLabel-Dmfr-up5.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-CPMGPK-a.js';
-import { S as StatusIndicator } from './StatusIndicator-CTmlnvlz.js';
+import { T as Typography } from './Typography-CBgV6lts.js';
+import { S as StatusIndicator } from './StatusIndicator-BNRbvMsI.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-Bk1kNNPD.js');
+var Switch = require('../Switch-7RGkwaPw.js');
 require('react');
 require('classnames');
-require('../Typography-ChmjxXh-.js');
+require('../Typography-Dr0PFsNp.js');
 
 
 

package/dist/Switch/index.mjs

@@ -1,4 +1,4 @@
-export { S as Switch } from '../Switch-BNQv5IPe.js';
+export { S as Switch } from '../Switch-CXRqnpmy.js';
 import 'react';
 import 'classnames';
-import '../Typography-CPMGPK-a.js';
+import '../Typography-CBgV6lts.js';

package/dist/{Switch-Bk1kNNPD.js → Switch-7RGkwaPw.js}

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

package/dist/{Switch-BNQv5IPe.js → Switch-CXRqnpmy.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-CPMGPK-a.js';
+import { T as Typography } from './Typography-CBgV6lts.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-DBMal_GK.js');
+var Body = require('../Body-DrAf9Nh3.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-DyCG2oeq.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-wbDMhFA_.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-BijcK7uX.js');
+var Tabs = require('../Tabs-D2JC8KeJ.js');
 require('react');
 require('classnames');
-require('../Typography-ChmjxXh-.js');
+require('../throttle-CoKknGRl.js');
+require('../_commonjsHelpers-BHiefUCo.js');
+require('../debounce-CxniNTxs.js');
+require('../isObjectLike-DkMl4D9x.js');
+require('../isSymbol-DiMISKdX.js');
+require('../Typography-Dr0PFsNp.js');
 
 
 

package/dist/Tabs/index.mjs

@@ -1,4 +1,9 @@
-export { a as Tab, T as Tabs } from '../Tabs-CeM8e2Ff.js';
+export { a as Tab, T as Tabs } from '../Tabs-khQdzKK2.js';
 import 'react';
 import 'classnames';
-import '../Typography-CPMGPK-a.js';
+import '../throttle-DY7UJx0y.js';
+import '../_commonjsHelpers-CTrz9JGn.js';
+import '../debounce-S5mYnGyq.js';
+import '../isObjectLike-ByWGkAiE.js';
+import '../isSymbol-CiYh-KtT.js';
+import '../Typography-CBgV6lts.js';

package/dist/{Tabs-BijcK7uX.js → Tabs-D2JC8KeJ.js}

@@ -2,53 +2,69 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-ChmjxXh-.js');
+var throttle = require('./throttle-CoKknGRl.js');
+var Typography = require('./Typography-Dr0PFsNp.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);

package/dist/{Tabs-CeM8e2Ff.js → Tabs-khQdzKK2.js}

@@ -1,52 +1,68 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-CPMGPK-a.js';
+import { t as throttle } from './throttle-DY7UJx0y.js';
+import { T as Typography } from './Typography-CBgV6lts.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] = useState(activeTabInitialValue);
+function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = useState(false);
     const [overflowLeft, setOverflowLeft] = useState(false);
     const tabRow = 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 = useCallback(throttle(handleOverflowing, 100), []);
     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] = 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;
+    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);

package/dist/Text/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var Text = require('../Text-u6EA7uEC.js');
+var Text = require('../Text-Dfz5WLuG.js');
 require('react');
-require('../Typography-ChmjxXh-.js');
+require('../Typography-Dr0PFsNp.js');
 require('classnames');
 
 

package/dist/Text/index.mjs

@@ -1,4 +1,4 @@
-export { T as Text } from '../Text-BBOi4ZNp.js';
+export { T as Text } from '../Text-CoFPi44l.js';
 import 'react';
-import '../Typography-CPMGPK-a.js';
+import '../Typography-CBgV6lts.js';
 import 'classnames';

package/dist/{Text-BBOi4ZNp.js → Text-CoFPi44l.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Typography } from './Typography-CPMGPK-a.js';
+import { T as Typography } from './Typography-CBgV6lts.js';
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
     const textColors = {

package/dist/{Text-u6EA7uEC.js → Text-Dfz5WLuG.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-ChmjxXh-.js');
+var Typography = require('./Typography-Dr0PFsNp.js');
 
 function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
     const textColors = {

package/dist/Toast/index.cjs

@@ -3,9 +3,9 @@
 var React = require('react');
 var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
-var Icon = require('../Icon-Bpfy13I1.js');
-var Button = require('../Button-7kRJPNWg.js');
-var Typography = require('../Typography-ChmjxXh-.js');
+var Icon = require('../Icon-DrIpCyam.js');
+var Button = require('../Button-CFxwhWIH.js');
+var Typography = require('../Typography-Dr0PFsNp.js');
 require('@jobber/design');
 require('classnames');
 require('react-router-dom');

package/dist/Toast/index.mjs

@@ -1,9 +1,9 @@
 import React, { 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-Cqm8KRQs.js';
-import { B as Button } from '../Button-D1Nl8eFV.js';
-import { T as Typography } from '../Typography-CPMGPK-a.js';
+import { I as Icon } from '../Icon-Dc7AZmIn.js';
+import { B as Button } from '../Button-BEjtnMi3.js';
+import { T as Typography } from '../Typography-CBgV6lts.js';
 import '@jobber/design';
 import 'classnames';
 import 'react-router-dom';

package/dist/Tooltip/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var Tooltip = require('../Tooltip-Dq_bir4e.js');
+var Tooltip = require('../Tooltip-DWxm5OE4.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-Dnee8oHc.js');
-require('../useIsMounted-Ca_ObYHt.js');
+require('../useSafeLayoutEffect-PpuKiqR1.js');
+require('../useIsMounted-YeOZBiS5.js');
 require('react-popper');
 
 

package/dist/Tooltip/index.mjs

@@ -1,8 +1,8 @@
-export { T as Tooltip } from '../Tooltip-DCxZIBYV.js';
+export { T as Tooltip } from '../Tooltip-CFjVWuPC.js';
 import 'react';
 import 'classnames';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-319318fT.js';
-import '../useIsMounted-BMC4zYNy.js';
+import '../useSafeLayoutEffect-kMXCQs7S.js';
+import '../useIsMounted-B6x6Ki5e.js';
 import 'react-popper';

package/dist/{Tooltip-DCxZIBYV.js → Tooltip-CFjVWuPC.js}

@@ -2,8 +2,8 @@ import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { motion } from 'framer-motion';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-319318fT.js';
-import { u as useIsMounted_2 } from './useIsMounted-BMC4zYNy.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-kMXCQs7S.js';
+import { u as useIsMounted_2 } from './useIsMounted-B6x6Ki5e.js';
 import { usePopper } from 'react-popper';
 
 var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","top":"DpxWsz9QuIo-","bottom":"_5RblY1rnJOA-","left":"C9MXsqd4wLM-","right":"_2ZZcgQ4fJ-k-","tooltipMessage":"TpdeLUuiQMg-"};

package/dist/{Tooltip-Dq_bir4e.js → Tooltip-DWxm5OE4.js}

@@ -4,8 +4,8 @@ var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-Dnee8oHc.js');
-var useIsMounted = require('./useIsMounted-Ca_ObYHt.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-PpuKiqR1.js');
+var useIsMounted = require('./useIsMounted-YeOZBiS5.js');
 var reactPopper = require('react-popper');
 
 var styles = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","top":"DpxWsz9QuIo-","bottom":"_5RblY1rnJOA-","left":"C9MXsqd4wLM-","right":"_2ZZcgQ4fJ-k-","tooltipMessage":"TpdeLUuiQMg-"};