@jobber/components 6.36.1 → 6.38.0

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/Frame/Frame.d.ts

@@ -0,0 +1,2 @@
+import { FrameProps } from "./types";
+export declare function Frame({ children, aspectX, aspectY, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }: FrameProps): JSX.Element;

package/dist/Frame/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Frame = require('../Frame-cjs.js');
+require('react');
+require('classnames');
+
+
+
+exports.Frame = Frame.Frame;

package/dist/Frame/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Frame";
+export * from "./types";

package/dist/Frame/index.mjs

@@ -0,0 +1,3 @@
+export { F as Frame } from '../Frame-es.js';
+import 'react';
+import 'classnames';

package/dist/Frame/types.d.ts

@@ -0,0 +1,24 @@
+import { CommonAllowedElements, CommonAtlantisProps } from "../sharedHelpers/types";
+export interface FrameProps extends CommonAtlantisProps {
+    readonly children: React.ReactNode;
+    /** The horizontal (width) part of the aspect ratio */
+    readonly aspectX?: number;
+    /** The vertical (height) part of the aspect ratio */
+    readonly aspectY?: number;
+    /** The HTML tag to render the container as. Defaults to `div`. */
+    as?: CommonAllowedElements;
+    /** **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}

package/dist/Frame-cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"frame":"S15iRxwj9UU-","spinning":"zp7d5mzcSHA-"};
+
+function Frame({ children, aspectX = 16, aspectY = 9, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { className: classnames(styles.frame, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: Object.assign({ "--public-frame-numerator": aspectX, "--public-frame-denominator": aspectY }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) }), children));
+}
+
+exports.Frame = Frame;

package/dist/Frame-es.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"frame":"S15iRxwj9UU-","spinning":"zp7d5mzcSHA-"};
+
+function Frame({ children, aspectX = 16, aspectY = 9, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { className: classnames(styles.frame, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: Object.assign({ "--public-frame-numerator": aspectX, "--public-frame-denominator": aspectY }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) }), children));
+}
+
+export { Frame as F };

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, {

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/ResponsiveSwitcher/ResponsiveSwitcher.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveSwitcherProps } from "./types";
+export declare function ResponsiveSwitcher({ children, threshold, gap, limit, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }: ResponsiveSwitcherProps): JSX.Element;

package/dist/ResponsiveSwitcher/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var ResponsiveSwitcher = require('../ResponsiveSwitcher-cjs.js');
+require('react');
+require('classnames');
+require('../getMappedAtlantisSpaceToken-cjs.js');
+
+
+
+exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;

package/dist/ResponsiveSwitcher/index.d.ts

@@ -0,0 +1 @@
+export * from "./ResponsiveSwitcher";