@jobber/components 6.36.0 → 6.37.0

package/dist/Menu-es.js

@@ -7,7 +7,7 @@ import { usePopper } from 'react-popper';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
 import ReactDOM__default from 'react-dom';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
 import { f as formFieldFocusAttribute } from './useFormFieldFocus-es.js';
@@ -96,7 +96,7 @@ function Menu({ activator, items }) {
     const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
         ? Object.assign(Object.assign({}, attributes.popper), { style: popperStyles.popper }) : {};
     if (!activator) {
-        activator = (React__default.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
+        activator = (React__default.createElement(ButtonNamespace, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
     }
     return (React__default.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
         React__default.createElement("div", { ref: popperRef }, React__default.cloneElement(activator, {

package/dist/Modal-cjs.js

@@ -54,10 +54,10 @@ function Actions({ primary, secondary, tertiary }) {
     }
     return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: styles.actionBar },
         React.createElement("div", { className: styles.rightAction },
-            primary && React.createElement(Button.Button, Object.assign({}, primary)),
-            secondary && React.createElement(Button.Button, Object.assign({}, secondary))),
+            primary && React.createElement(Button.ButtonNamespace, Object.assign({}, primary)),
+            secondary && React.createElement(Button.ButtonNamespace, Object.assign({}, secondary))),
         tertiary && (React.createElement("div", { className: styles.leftAction },
-            React.createElement(Button.Button, Object.assign({}, tertiary))))))));
+            React.createElement(Button.ButtonNamespace, Object.assign({}, tertiary))))))));
 }
 
 exports.Modal = Modal;

package/dist/Modal-es.js

@@ -6,7 +6,7 @@ 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 { H as Heading } from './Heading-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var styles = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
@@ -52,10 +52,10 @@ function Actions({ primary, secondary, tertiary }) {
     }
     return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: styles.actionBar },
         React__default.createElement("div", { className: styles.rightAction },
-            primary && React__default.createElement(Button, Object.assign({}, primary)),
-            secondary && React__default.createElement(Button, Object.assign({}, secondary))),
+            primary && React__default.createElement(ButtonNamespace, Object.assign({}, primary)),
+            secondary && React__default.createElement(ButtonNamespace, Object.assign({}, secondary))),
         tertiary && (React__default.createElement("div", { className: styles.leftAction },
-            React__default.createElement(Button, Object.assign({}, tertiary))))))));
+            React__default.createElement(ButtonNamespace, Object.assign({}, tertiary))))))));
 }
 
 export { Modal as M };

package/dist/Page-cjs.js

@@ -46,9 +46,9 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                     React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React.createElement("div", { className: styles.actionGroup },
                         primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
+                            React.createElement(Button.ButtonNamespace, Object.assign({}, getActionProps(primaryAction))))),
                         secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
+                            React.createElement(Button.ButtonNamespace, Object.assign({}, getActionProps(secondaryAction))))),
                         showMenu && (React.createElement("div", { className: styles.actionButton },
                             React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
                 intro && (React.createElement(Text.Text, { size: "large" },

package/dist/Page-es.js

@@ -5,7 +5,7 @@ import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { C as Content } from './Content-es.js';
 import { M as Markdown } from './Markdown-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { M as Menu } from './Menu-es.js';
 import { E as Emphasis } from './Emphasis-es.js';
 
@@ -44,9 +44,9 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                     React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
                         primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
+                            React__default.createElement(ButtonNamespace, Object.assign({}, getActionProps(primaryAction))))),
                         secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
+                            React__default.createElement(ButtonNamespace, Object.assign({}, getActionProps(secondaryAction))))),
                         showMenu && (React__default.createElement("div", { className: styles.actionButton },
                             React__default.createElement(Menu, { items: moreActionsMenu })))))),
                 intro && (React__default.createElement(Text, { size: "large" },

package/dist/SideDrawer-cjs.js

@@ -61,7 +61,7 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return ReactDOM.createPortal(React.createElement(Button.ButtonNamespace, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
@@ -143,7 +143,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                             React.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React.createElement("div", { className: styles.headerActions },
                             React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React.createElement(Button.Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                            React.createElement(Button.ButtonNamespace, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React.createElement("div", { className: styles.content },
                     React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),

package/dist/SideDrawer-es.js

@@ -8,7 +8,7 @@ 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';
+import { B as ButtonNamespace } from './Button-es.js';
 import { F as Flex } from './Flex-es.js';
 
 const SideDrawerContext = createContext({
@@ -59,7 +59,7 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return createPortal(React__default.createElement(Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return createPortal(React__default.createElement(ButtonNamespace, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
@@ -141,7 +141,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                             React__default.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React__default.createElement("div", { className: styles.headerActions },
                             React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React__default.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                            React__default.createElement(ButtonNamespace, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React__default.createElement("div", { className: styles.content },
                     React__default.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),

package/dist/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
 interface TabsProps {
-    readonly children: ReactElement | ReactElement[];
+    readonly children: ReactElement | Array<ReactElement | null | undefined | boolean>;
     /**
      * Specifies the index of the tab that should be active on mount
      *

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

@@ -1,5 +1,5 @@
 interface UseArrowKeyNavigationProps {
-    elementsRef: React.RefObject<(HTMLElement | null)[]>;
+    elementsRef: React.RefObject<Map<number, HTMLElement>>;
     onActivate: (index: number) => void;
 }
 export declare const useArrowKeyNavigation: ({ elementsRef, onActivate, }: UseArrowKeyNavigationProps) => (event: React.KeyboardEvent<HTMLElement>) => void;

package/dist/Tabs-cjs.js

@@ -43,11 +43,11 @@ const useArrowKeyNavigation = ({ elementsRef, onActivate, }) => {
         const elements = elementsRef.current;
         if (!elements)
             return;
-        const currentIndex = elements.findIndex(element => element === document.activeElement);
+        const currentIndex = getActiveTabIndex(elements);
         if (currentIndex === -1)
             return;
         const focusAndActivateTab = (index) => {
-            const element = elements[index];
+            const element = elements.get(index);
             if (element) {
                 element.focus();
                 onActivate(index);
@@ -55,21 +55,30 @@ const useArrowKeyNavigation = ({ elementsRef, onActivate, }) => {
         };
         if (event.key === "ArrowRight") {
             event.preventDefault();
-            const nextIndex = (currentIndex + 1) % elements.length;
+            const nextIndex = (currentIndex + 1) % elements.size;
             focusAndActivateTab(nextIndex);
         }
         else if (event.key === "ArrowLeft") {
             event.preventDefault();
-            const prevIndex = (currentIndex - 1 + elements.length) % elements.length;
+            const prevIndex = (currentIndex - 1 + elements.size) % elements.size;
             focusAndActivateTab(prevIndex);
         }
     }, [elementsRef, onActivate]);
     return handleKeyDown;
 };
+function getActiveTabIndex(elements) {
+    const currentTab = Array.from(elements).find(([, element]) => element === document.activeElement);
+    if (!currentTab) {
+        return -1;
+    }
+    const [currentIndex] = currentTab;
+    return currentIndex;
+}
 
 function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabChange, }) {
     var _a;
-    const activeTabInitialValue = defaultTab < React.Children.count(children) ? defaultTab : 0;
+    const tabChildren = getActiveTabs(children);
+    const activeTabInitialValue = defaultTab < tabChildren.length ? defaultTab : 0;
     const [internalActiveTab, setInternalActiveTab] = React.useState(activeTabInitialValue);
     const activeTab = controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
     const { overflowRight, overflowLeft, tabRow } = useTabsOverflow();
@@ -77,7 +86,7 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
         [styles.overflowRight]: overflowRight,
         [styles.overflowLeft]: overflowLeft,
     });
-    const tabRefs = React.useRef([]);
+    const tabRefs = React.useRef(new Map());
     const activateTab = (index) => {
         return () => {
             if (controlledActiveTab === undefined) {
@@ -92,15 +101,28 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
         elementsRef: tabRefs,
         onActivate: index => activateTab(index)(),
     });
-    const activeTabProps = (_a = React.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
+    const activeTabProps = (_a = tabChildren[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
     React.useEffect(() => {
-        if (activeTab > React.Children.count(children) - 1) {
+        if (activeTab > tabChildren.length - 1) {
             setInternalActiveTab(activeTabInitialValue);
         }
-    }, [React.Children.count(children)]);
+    }, [tabChildren.length]);
     return (React.createElement("div", { className: styles.tabs },
         React.createElement("div", { className: overflowClassNames },
-            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow, onKeyDown: handleKeyDown }, React.Children.map(children, (tab, index) => (React.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick, ref: el => (tabRefs.current[index] = el), tabIndex: activeTab === index ? 0 : -1 }))))),
+            React.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow, onKeyDown: handleKeyDown }, React.Children.map(children, child => {
+                if (!isChildTab(child)) {
+                    return child;
+                }
+                const index = tabChildren.findIndex(tab => tab.props.label === child.props.label);
+                return (React.createElement(InternalTab, { label: child.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: child.props.onClick, ref: el => {
+                        if (el) {
+                            tabRefs.current.set(index, el);
+                        }
+                        else {
+                            tabRefs.current.delete(index);
+                        }
+                    }, tabIndex: activeTab === index ? 0 : -1 }));
+            }))),
         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 }) {
@@ -115,6 +137,18 @@ const InternalTab = React.forwardRef(({ label, selected, activateTab, onClick, t
             }, ref: ref, tabIndex: tabIndex }, typeof label === "string" ? (React.createElement(Typography.Typography, { element: "span", size: "large", fontWeight: "semiBold" }, label)) : (label))));
 });
 InternalTab.displayName = "InternalTab";
+function getActiveTabs(children) {
+    const activeTabChildren = [];
+    React.Children.toArray(children).forEach(child => {
+        if (isChildTab(child)) {
+            activeTabChildren.push(child);
+        }
+    });
+    return activeTabChildren;
+}
+function isChildTab(child) {
+    return React.isValidElement(child) && child.type === Tab;
+}
 
 exports.Tab = Tab;
 exports.Tabs = Tabs;

package/dist/Tabs-es.js

@@ -41,11 +41,11 @@ const useArrowKeyNavigation = ({ elementsRef, onActivate, }) => {
         const elements = elementsRef.current;
         if (!elements)
             return;
-        const currentIndex = elements.findIndex(element => element === document.activeElement);
+        const currentIndex = getActiveTabIndex(elements);
         if (currentIndex === -1)
             return;
         const focusAndActivateTab = (index) => {
-            const element = elements[index];
+            const element = elements.get(index);
             if (element) {
                 element.focus();
                 onActivate(index);
@@ -53,21 +53,30 @@ const useArrowKeyNavigation = ({ elementsRef, onActivate, }) => {
         };
         if (event.key === "ArrowRight") {
             event.preventDefault();
-            const nextIndex = (currentIndex + 1) % elements.length;
+            const nextIndex = (currentIndex + 1) % elements.size;
             focusAndActivateTab(nextIndex);
         }
         else if (event.key === "ArrowLeft") {
             event.preventDefault();
-            const prevIndex = (currentIndex - 1 + elements.length) % elements.length;
+            const prevIndex = (currentIndex - 1 + elements.size) % elements.size;
             focusAndActivateTab(prevIndex);
         }
     }, [elementsRef, onActivate]);
     return handleKeyDown;
 };
+function getActiveTabIndex(elements) {
+    const currentTab = Array.from(elements).find(([, element]) => element === document.activeElement);
+    if (!currentTab) {
+        return -1;
+    }
+    const [currentIndex] = currentTab;
+    return currentIndex;
+}
 
 function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabChange, }) {
     var _a;
-    const activeTabInitialValue = defaultTab < React__default.Children.count(children) ? defaultTab : 0;
+    const tabChildren = getActiveTabs(children);
+    const activeTabInitialValue = defaultTab < tabChildren.length ? defaultTab : 0;
     const [internalActiveTab, setInternalActiveTab] = useState(activeTabInitialValue);
     const activeTab = controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
     const { overflowRight, overflowLeft, tabRow } = useTabsOverflow();
@@ -75,7 +84,7 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
         [styles.overflowRight]: overflowRight,
         [styles.overflowLeft]: overflowLeft,
     });
-    const tabRefs = useRef([]);
+    const tabRefs = useRef(new Map());
     const activateTab = (index) => {
         return () => {
             if (controlledActiveTab === undefined) {
@@ -90,15 +99,28 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
         elementsRef: tabRefs,
         onActivate: index => activateTab(index)(),
     });
-    const activeTabProps = (_a = React__default.Children.toArray(children)[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
+    const activeTabProps = (_a = tabChildren[activeTab]) === null || _a === void 0 ? void 0 : _a.props;
     useEffect(() => {
-        if (activeTab > React__default.Children.count(children) - 1) {
+        if (activeTab > tabChildren.length - 1) {
             setInternalActiveTab(activeTabInitialValue);
         }
-    }, [React__default.Children.count(children)]);
+    }, [tabChildren.length]);
     return (React__default.createElement("div", { className: styles.tabs },
         React__default.createElement("div", { className: overflowClassNames },
-            React__default.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow, onKeyDown: handleKeyDown }, React__default.Children.map(children, (tab, index) => (React__default.createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick, ref: el => (tabRefs.current[index] = el), tabIndex: activeTab === index ? 0 : -1 }))))),
+            React__default.createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow, onKeyDown: handleKeyDown }, React__default.Children.map(children, child => {
+                if (!isChildTab(child)) {
+                    return child;
+                }
+                const index = tabChildren.findIndex(tab => tab.props.label === child.props.label);
+                return (React__default.createElement(InternalTab, { label: child.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: child.props.onClick, ref: el => {
+                        if (el) {
+                            tabRefs.current.set(index, el);
+                        }
+                        else {
+                            tabRefs.current.delete(index);
+                        }
+                    }, tabIndex: activeTab === index ? 0 : -1 }));
+            }))),
         React__default.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 }) {
@@ -113,5 +135,17 @@ const InternalTab = React__default.forwardRef(({ label, selected, activateTab, o
             }, ref: ref, tabIndex: tabIndex }, typeof label === "string" ? (React__default.createElement(Typography, { element: "span", size: "large", fontWeight: "semiBold" }, label)) : (label))));
 });
 InternalTab.displayName = "InternalTab";
+function getActiveTabs(children) {
+    const activeTabChildren = [];
+    React__default.Children.toArray(children).forEach(child => {
+        if (isChildTab(child)) {
+            activeTabChildren.push(child);
+        }
+    });
+    return activeTabChildren;
+}
+function isChildTab(child) {
+    return React__default.isValidElement(child) && child.type === Tab;
+}
 
 export { Tabs as T, Tab as a };

package/dist/index.cjs

@@ -197,13 +197,13 @@ exports.Icon = Icon.Icon;
 exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;
-exports.Button = Button.Button;
+exports.Button = Button.ButtonNamespace;
 exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;
 exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
 exports.Card = Card.Card;
 exports.Checkbox = Checkbox_index.Checkbox;
-exports.Chip = Chip.Chip;
+exports.Chip = Chip.ChipNamespace;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
 exports.Chips = Chips.Chips;

package/dist/showToast-cjs.js

@@ -24,9 +24,9 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
         React.createElement("div", { className: styles.slice },
             React.createElement(Icon.Icon, { color: icon.color, name: icon.name }),
             React.createElement(Typography.Typography, { element: "span", size: "large" }, message),
-            action && (React.createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            action && (React.createElement(Button.ButtonNamespace, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
             React.createElement("div", { className: styles.button },
-                React.createElement(Button.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+                React.createElement(Button.ButtonNamespace, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }

package/dist/showToast-es.js

@@ -2,7 +2,7 @@ import React__default, { useState, useEffect, forwardRef, useImperativeHandle, u
 import { createRoot } from 'react-dom/client';
 import { AnimatePresence, motion } from 'framer-motion';
 import { I as Icon } from './Icon-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 import { T as Typography } from './Typography-es.js';
 
@@ -22,9 +22,9 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
         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" })),
+            action && (React__default.createElement(ButtonNamespace, { 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" })))))));
+                React__default.createElement(ButtonNamespace, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.36.0",
+  "version": "6.37.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "afdf51d018850844414cee76e5e743fcf9ae4b05"
+  "gitHead": "0770317eea930044cc8d1999056d3466a9d4322e"
 }