@jobber/components 6.36.1 → 6.37.0

package/dist/DataListActions-es.js

@@ -1,6 +1,6 @@
 import React__default, { Children, isValidElement } from 'react';
 import { T as Tooltip } from './Tooltip-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 import { b as getExposedActions } from './DataList.utils-es.js';
 import { u as useDataListLayoutActionsContext } from './DataListLayoutContext-es2.js';
@@ -29,13 +29,13 @@ function DataListActions({ children, itemsToExpose = 2, }) {
             const actionLabel = getActionLabel();
             // If the action is always visible, we don't want a tooltip.
             if (props.alwaysVisible) {
-                return (React__default.createElement(Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                return (React__default.createElement(ButtonNamespace, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
                         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
                     }, type: "secondary", variation: "subtle" }));
             }
             return (React__default.createElement(Tooltip, { key: actionLabel, message: actionLabel },
-                React__default.createElement(Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
+                React__default.createElement(ButtonNamespace, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {
                             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);

package/dist/DataListEmptyState-cjs.js

@@ -38,7 +38,7 @@ function InternalDataListEmptyState() {
 }
 function renderButton(action) {
     if (action) {
-        if (action.type === Button.Button) {
+        if (action.type === Button.ButtonNamespace) {
             return React.cloneElement(action, {
                 variation: action.props.variation || "subtle",
             });

package/dist/DataListEmptyState-es.js

@@ -2,7 +2,7 @@ import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useContext, cloneElement } from 'react';
 import { D as DataListContext } from './DataListContext-es.js';
 import { T as Text } from './Text-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 import { E as EMPTY_FILTER_RESULTS_MESSAGE, c as EMPTY_RESULTS_MESSAGE, d as EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR } from './DataList.const-es.js';
 
@@ -36,7 +36,7 @@ function InternalDataListEmptyState() {
 }
 function renderButton(action) {
     if (action) {
-        if (action.type === Button) {
+        if (action.type === ButtonNamespace) {
             return cloneElement(action, {
                 variation: action.props.variation || "subtle",
             });

package/dist/DataListHeader-cjs.js

@@ -34,7 +34,7 @@ function DataListHeaderCheckbox({ children }) {
                     Boolean(selectedCount) && React.createElement(Text.Text, null,
                         selectedCount,
                         " selected"),
-                    React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                    React.createElement(Button.ButtonNamespace, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
                 React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) })));
     function isIndeterminate() {
         if (isSelectAll)

package/dist/DataListHeader-es.js

@@ -5,7 +5,7 @@ import { u as useResponsiveSizing } from './useResponsiveSizing-es.js';
 import classnames from 'classnames';
 import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 import { T as Text } from './Text-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { Checkbox } from './Checkbox/index.mjs';
 import { s as styles } from './DataList.module-es.js';
 import { I as InternalDataListBulkActions } from './DataListBulkActions-es.js';
@@ -32,7 +32,7 @@ function DataListHeaderCheckbox({ children }) {
                     Boolean(selectedCount) && React__default.createElement(Text, null,
                         selectedCount,
                         " selected"),
-                    React__default.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                    React__default.createElement(ButtonNamespace, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
                 React__default.createElement(InternalDataListBulkActions, null)) })));
     function isIndeterminate() {
         if (isSelectAll)

package/dist/DataListItemActionsOverflow-cjs.js

@@ -13,7 +13,7 @@ function DataListItemActionsOverflow({ actions, }) {
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip.Tooltip, { message: "More actions" },
-            React.createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "tertiary", variation: "subtle", onClick: handleMoreClick })),
+            React.createElement(Button.ButtonNamespace, { icon: "more", ariaLabel: "More actions", type: "tertiary", variation: "subtle", onClick: handleMoreClick })),
         React.createElement(DataListActionsMenu.DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
     function handleMoreClick(event) {
         // Prevent firing the parent's onClick event when it is nested

package/dist/DataListItemActionsOverflow-es.js

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 import { T as Tooltip } from './Tooltip-es.js';
 import { D as DataListActionsMenu } from './DataListActionsMenu-es.js';
@@ -11,7 +11,7 @@ function DataListItemActionsOverflow({ actions, }) {
         return null;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Tooltip, { message: "More actions" },
-            React__default.createElement(Button, { icon: "more", ariaLabel: "More actions", type: "tertiary", variation: "subtle", onClick: handleMoreClick })),
+            React__default.createElement(ButtonNamespace, { icon: "more", ariaLabel: "More actions", type: "tertiary", variation: "subtle", onClick: handleMoreClick })),
         React__default.createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
     function handleMoreClick(event) {
         // Prevent firing the parent's onClick event when it is nested

package/dist/DataListLoadMore-cjs.js

@@ -28,7 +28,7 @@ function DataListLoadMore({ onBackToTop }) {
         loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
             React.createElement(Spinner.Spinner, { size: "small" }))),
         showBackToTop && (React.createElement("div", { className: styles.backToTop },
-            React.createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+            React.createElement(Button.ButtonNamespace, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
 }
 
 exports.DataListLoadMore = DataListLoadMore;

package/dist/DataListLoadMore-es.js

@@ -3,7 +3,7 @@ import { u as useInView_2 } from './useInView-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { g as DATA_LOAD_MORE_TEST_ID, h as DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from './DataList.const-es.js';
 import { S as Spinner } from './Spinner-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 
 var styles = {"trigger":"aJIHa8Q-WbY-","loadingMore":"lLYWNAYcURY-","backToTop":"qA8J2KI6khc-","fadeIn":"WKPuBJINNCg-","spinning":"mZH3CAkfppI-"};
@@ -26,7 +26,7 @@ function DataListLoadMore({ onBackToTop }) {
         loadingState === "loadingMore" && (React__default.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
             React__default.createElement(Spinner, { size: "small" }))),
         showBackToTop && (React__default.createElement("div", { className: styles.backToTop },
-            React__default.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+            React__default.createElement(ButtonNamespace, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
 }
 
 export { DataListLoadMore as D, MAX_DATA_COUNT as M };

package/dist/DataListSearch-cjs.js

@@ -43,7 +43,7 @@ function InternalDataListSearch() {
                     ? searchComponent.props.onSearch
                     : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
-            React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+            React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.ButtonNamespace, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.ButtonNamespace, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSearch-es.js

@@ -5,7 +5,7 @@ import { tokens } from '@jobber/design';
 import { InputText } from './InputText/index.mjs';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 
 var styles = {"wrapper":"S2Bu0Rv4w-E-","searchInput":"N8dyu-defmc-","searchInputVisible":"UhMQC1SZUns-","searchButton":"zQPIm20aF50-","withNoFilters":"oOqZupWkemo-","spinning":"Wq63M3dVuYs-"};
@@ -41,7 +41,7 @@ function InternalDataListSearch() {
                     ? searchComponent.props.onSearch
                     : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
-            React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
+            React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(ButtonNamespace, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(ButtonNamespace, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
         if (placeholder)
             return placeholder;

package/dist/DataListSort-cjs.js

@@ -21,7 +21,7 @@ function DataListSort() {
             },
         ] },
         React.createElement(Combobox.Combobox.Activator, null,
-            React.createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Chip.Suffix, null,
+            React.createElement(Chip.ChipNamespace, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.ChipNamespace.Suffix, null,
                 React.createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
         sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {

package/dist/DataListSort-es.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { C as Combobox } from './Combobox-es.js';
 import './ComboboxProvider-es.js';
-import { C as Chip } from './Chip-es.js';
+import { C as ChipNamespace } from './Chip-es.js';
 import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 
@@ -19,7 +19,7 @@ function DataListSort() {
             },
         ] },
         React__default.createElement(Combobox.Activator, null,
-            React__default.createElement(Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(Chip.Suffix, null,
+            React__default.createElement(ChipNamespace, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(ChipNamespace.Suffix, null,
                 React__default.createElement(Icon, { name: "arrowDown", size: "small" }))))),
         sortByOptions.map(({ label, value }) => (React__default.createElement(Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {

package/dist/DataTable-cjs.js

@@ -115,11 +115,11 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
             React.createElement("div", { className: styles$2.paginationButtons },
-                React.createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
+                React.createElement(Button.ButtonNamespace, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
                         table.previousPage();
                         onPageChange();
                     }, disabled: !table.getCanPreviousPage() }),
-                React.createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                React.createElement(Button.ButtonNamespace, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
                         table.nextPage();
                         onPageChange();
                     }, disabled: !table.getCanNextPage() })))));

package/dist/DataTable-es.js

@@ -5,7 +5,7 @@ import { u as useResizeObserver } from './useResizeObserver-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { S as Select, a as SelectOption } from './Option-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { T as Text } from './Text-es.js';
 
 var styles$3 = {"dataTableContainer":"_3IHK46TSBOI-","tableContainer":"_8CMtSx4qamA-","table":"bNYpzdn5rPc-","pinFirstColumn":"lKXqbcsnCFs-","emptyStateCell":"i-x8vss2hcI-","stickyHeader":"eWffzdKfJH0-","pinFirstHeaderSortable":"aGF6t8l8iUk-","sortableColumn":"W0kYDUxPkqI-","clickableRow":"vWFyXrAaFtQ-","emptyState":"_8L7icG7E530-","spinning":"O1cxELzWgmM-"};
@@ -113,11 +113,11 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default.createElement(SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React__default.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
             React__default.createElement("div", { className: styles$2.paginationButtons },
-                React__default.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
+                React__default.createElement(ButtonNamespace, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
                         table.previousPage();
                         onPageChange();
                     }, disabled: !table.getCanPreviousPage() }),
-                React__default.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                React__default.createElement(ButtonNamespace, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
                         table.nextPage();
                         onPageChange();
                     }, disabled: !table.getCanNextPage() })))));

package/dist/DatePicker-cjs.js

@@ -7243,13 +7243,13 @@ var styles = {"react-datepicker__month--selecting-range":"-Nzs5104Tmw-","datePic
 
 function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React.createElement("div", { className: styles.header },
-        React.createElement(Button.Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
+        React.createElement(Button.ButtonNamespace, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
         React.createElement("div", { className: styles.month },
             React.createElement(Typography.Typography, { element: "span", fontFamily: "display", size: "large" }, monthDate.toLocaleString("en-US", {
                 month: "long",
                 year: "numeric",
             }))),
-        React.createElement(Button.Button, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, icon: "arrowRight", ariaLabel: "Next Month", variation: "work", type: "tertiary" })));
+        React.createElement(Button.ButtonNamespace, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, icon: "arrowRight", ariaLabel: "Next Month", variation: "work", type: "tertiary" })));
 }
 
 const DatePickerActivator = React.forwardRef(InternalActivator);
@@ -7274,7 +7274,7 @@ function InternalActivator(props, ref) {
     else {
         return (
         // @ts-expect-error - we need to desctructure the newActivatorProps with more care to XOR prop types.
-        React.createElement(Button.Button, Object.assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
+        React.createElement(Button.ButtonNamespace, Object.assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
     }
 }
 

package/dist/DatePicker-es.js

@@ -5,7 +5,7 @@ import ReactDOM__default from 'react-dom';
 import { Popper, Manager, Reference } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { T as Typography } from './Typography-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { o as omit } from './omit-es.js';
 import { u as useAtlantisContext } from './AtlantisContext-es.js';
 
@@ -7241,13 +7241,13 @@ var styles = {"react-datepicker__month--selecting-range":"-Nzs5104Tmw-","datePic
 
 function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React__default.createElement("div", { className: styles.header },
-        React__default.createElement(Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
+        React__default.createElement(ButtonNamespace, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
         React__default.createElement("div", { className: styles.month },
             React__default.createElement(Typography, { element: "span", fontFamily: "display", size: "large" }, monthDate.toLocaleString("en-US", {
                 month: "long",
                 year: "numeric",
             }))),
-        React__default.createElement(Button, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, icon: "arrowRight", ariaLabel: "Next Month", variation: "work", type: "tertiary" })));
+        React__default.createElement(ButtonNamespace, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, icon: "arrowRight", ariaLabel: "Next Month", variation: "work", type: "tertiary" })));
 }
 
 const DatePickerActivator = forwardRef(InternalActivator);
@@ -7272,7 +7272,7 @@ function InternalActivator(props, ref) {
     else {
         return (
         // @ts-expect-error - we need to desctructure the newActivatorProps with more care to XOR prop types.
-        React__default.createElement(Button, Object.assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
+        React__default.createElement(ButtonNamespace, Object.assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
     }
 }
 

package/dist/FeatureSwitch-cjs.js

@@ -37,7 +37,7 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
         (children || onEdit) && (React.createElement("div", { className: styles.container },
             children && (React.createElement("div", { className: featureContentClassnames }, children)),
             onEdit && (React.createElement("div", { className: styles.action },
-                React.createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+                React.createElement(Button.ButtonNamespace, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
     function shouldShowSavedIndicator() {
         // Check if the component is mounted
         const [didMount, setDidMount] = React.useState(false);

package/dist/FeatureSwitch-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 { S as Switch } from './Switch-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { E as Emphasis } from './Emphasis-es.js';
 import { M as Markdown } from './Markdown-es.js';
 
@@ -35,7 +35,7 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
         (children || onEdit) && (React__default.createElement("div", { className: styles.container },
             children && (React__default.createElement("div", { className: featureContentClassnames }, children)),
             onEdit && (React__default.createElement("div", { className: styles.action },
-                React__default.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
+                React__default.createElement(ButtonNamespace, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
     function shouldShowSavedIndicator() {
         // Check if the component is mounted
         const [didMount, setDidMount] = useState(false);

package/dist/FormField-cjs.js

@@ -54,7 +54,7 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
         return null;
-    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.Button
+    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.ButtonNamespace
     /**
      * We can cast the ariaLabel here as a `Suffix`
      * requires an ariaLabel if there is an action

package/dist/FormField-es.js

@@ -2,7 +2,7 @@ import React__default, { useState, useEffect, useRef, useImperativeHandle, useId
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
 import classnames from 'classnames';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
 import { T as Text } from './Text-es.js';
 import { u as useFormFieldFocus } from './useFormFieldFocus-es.js';
@@ -52,7 +52,7 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
         return null;
-    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button
+    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(ButtonNamespace
     /**
      * We can cast the ariaLabel here as a `Suffix`
      * requires an ariaLabel if there is an action

package/dist/FormatFile-cjs.js

@@ -17,7 +17,7 @@ function FormatFileDeleteButton({ size, onDelete }) {
     const buttonSize = size === "base" ? "small" : "base";
     const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
     return (React.createElement("div", { className: styles$2.deleteButton },
-        React.createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React.createElement(Button.ButtonNamespace, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
         React.createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
 }
 

package/dist/FormatFile-es.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import getHumanReadableFileSize from 'filesize';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { C as ConfirmationModal } from './ConfirmationModal-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -15,7 +15,7 @@ function FormatFileDeleteButton({ size, onDelete }) {
     const buttonSize = size === "base" ? "small" : "base";
     const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
     return (React__default.createElement("div", { className: styles$2.deleteButton },
-        React__default.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default.createElement(ButtonNamespace, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
         React__default.createElement(ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
 }
 

package/dist/Gallery-cjs.js

@@ -30,7 +30,7 @@ function Gallery({ files, size = "base", max, onDelete }) {
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
             max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
-                React.createElement(Button.Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+                React.createElement(Button.ButtonNamespace, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
         React.createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));

package/dist/Gallery-es.js

@@ -3,7 +3,7 @@ import React__default, { useState } from 'react';
 import classnames from 'classnames';
 import { L as LightBox } from './LightBox-es.js';
 import { F as FormatFile, i as isSafari } from './FormatFile-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 
 var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 
@@ -28,7 +28,7 @@ function Gallery({ files, size = "base", max, onDelete }) {
                     }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
             }),
             max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
-                React__default.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+                React__default.createElement(ButtonNamespace, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                         setDisplayPastMax(true);
                     } })))),
         React__default.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));

package/dist/InputAvatar-cjs.js

@@ -20,7 +20,7 @@ function InputAvatar(_a) {
                 React.createElement(Centered, null,
                     React.createElement(ProgressBar.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
         React.createElement(InputFile.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button.ButtonNamespace, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);

package/dist/InputAvatar-es.js

@@ -3,7 +3,7 @@ import React__default, { useState } from 'react';
 import { A as Avatar } from './Avatar-es.js';
 import { I as InputFile } from './InputFile-es.js';
 import { P as ProgressBar } from './ProgressBar-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 
 var styles = {"inputAvatar":"CMahTsC0SPE-","preview":"VOVr4KEFeVk-","centered":"HzGL7-Sfok4-","overlay":"Cflv-yL6aVQ-","spinning":"aeMMyPDHQho-"};
@@ -18,7 +18,7 @@ function InputAvatar(_a) {
                 React__default.createElement(Centered, null,
                     React__default.createElement(ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
         React__default.createElement(InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+        avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(ButtonNamespace, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);

package/dist/InputFile-cjs.js

@@ -1518,7 +1518,7 @@ function InputFileDescription(_a) {
 function InputFileButton(_a) {
     var { label, size, fullWidth = false } = _a, buttonProps = tslib_es6.__rest(_a, ["label", "size", "fullWidth"]);
     const { buttonLabel: contextLabel, size: contextSize } = useInputFileContentContext();
-    return (React.createElement(Button.Button, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
+    return (React.createElement(Button.ButtonNamespace, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
 }
 
 function InputFileDropzoneWrapper({ children, }) {

package/dist/InputFile-es.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { P as PropTypes } from './index-es.js';
 import axios from 'axios';
 import { T as Text } from './Text-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { I as InputValidation } from './InputValidation-es.js';
 import { C as Content } from './Content-es.js';
 
@@ -1516,7 +1516,7 @@ function InputFileDescription(_a) {
 function InputFileButton(_a) {
     var { label, size, fullWidth = false } = _a, buttonProps = __rest(_a, ["label", "size", "fullWidth"]);
     const { buttonLabel: contextLabel, size: contextSize } = useInputFileContentContext();
-    return (React__default.createElement(Button, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
+    return (React__default.createElement(ButtonNamespace, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
 }
 
 function InputFileDropzoneWrapper({ children, }) {

package/dist/InternalChipDismissible-cjs.js

@@ -15,15 +15,15 @@ var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
-        suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
+    return (React.createElement(Chip.ChipNamespace, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React.createElement(Chip.ChipNamespace.Prefix, null, prefix),
+        suffix && React.createElement(Chip.ChipNamespace.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
 function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
+    const { activator = React.createElement(Button.ButtonNamespace, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
     const menuRef = useScrollToActive.useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();

package/dist/InternalChipDismissible-es.js

@@ -7,21 +7,21 @@ import { d as debounce } from './debounce-es.js';
 import classnames from 'classnames';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
 import { T as Text } from './Text-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
-import { C as Chip, I as InternalChipButton } from './Chip-es.js';
+import { C as ChipNamespace, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React__default.createElement(Chip.Prefix, null, prefix),
-        suffix && React__default.createElement(Chip.Suffix, null, suffix)));
+    return (React__default.createElement(ChipNamespace, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React__default.createElement(ChipNamespace.Prefix, null, prefix),
+        suffix && React__default.createElement(ChipNamespace.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
 function InternalChipDismissibleInput(props) {
-    const { activator = React__default.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
+    const { activator = React__default.createElement(ButtonNamespace, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
     const menuRef = useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useInView();

package/dist/LightBox-cjs.js

@@ -211,12 +211,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
 function PreviousButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();
     return (React.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
-        React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+        React.createElement(Button.ButtonNamespace, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
 function NextButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();
     return (React.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
-        React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+        React.createElement(Button.ButtonNamespace, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }
 function togglePrintStyles(open) {
     try {

package/dist/LightBox-es.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { u as useDebounce } from './useDebounce-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 import { T as Text } from './Text-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { H as Heading } from './Heading-es.js';
 import { A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
 
@@ -209,12 +209,12 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
 function PreviousButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();
     return (React__default.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
-        React__default.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+        React__default.createElement(ButtonNamespace, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
 function NextButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();
     return (React__default.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
-        React__default.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+        React__default.createElement(ButtonNamespace, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }
 function togglePrintStyles(open) {
     try {

package/dist/Menu-cjs.js

@@ -98,7 +98,7 @@ function Menu({ activator, items }) {
     const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
         ? Object.assign(Object.assign({}, attributes.popper), { style: popperStyles.popper }) : {};
     if (!activator) {
-        activator = (React.createElement(Button.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
+        activator = (React.createElement(Button.ButtonNamespace, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
     }
     return (React.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
         React.createElement("div", { ref: popperRef }, React.cloneElement(activator, {