@jobber/components 8.25.0 → 8.25.1

package/dist/Dialog/Dialog.d.ts

@@ -1,3 +1,47 @@
-import type { DialogComponent } from "./Dialog.types";
-declare const Dialog: DialogComponent;
-export { Dialog };
+import React from "react";
+import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogFooterProps, DialogHandle, DialogHeaderProps, DialogRootProps, DialogScrollAreaProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
+import { DialogActions } from "./dialogComposableShared";
+/**
+ * The Dialog root is a centered modal on
+ * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
+ * `Dialog.Content`, and the layout parts.
+ */
+export declare function Dialog<Payload = unknown>({ onRequestClose, size, type, finalFocus, children, onOpenChange, ...rest }: DialogRootProps<Payload>): React.JSX.Element;
+export declare namespace Dialog {
+    var Trigger: typeof DialogTrigger;
+    var Content: typeof DialogContent;
+    var Header: typeof DialogHeader;
+    var Title: typeof DialogTitle;
+    var Close: typeof DialogClose;
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+    var Actions: typeof DialogActions;
+    var ScrollArea: typeof DialogScrollArea;
+    var createHandle: <Payload = unknown>() => DialogHandle<Payload>;
+}
+/**
+ * Opens the dialog. Accepts an Atlantis `<Button>` (via `children` or `render`)
+ * or links a detached `Dialog` through a matching `handle`.
+ */
+declare function DialogTrigger<Payload = unknown>(props: DialogTriggerProps<Payload>): React.JSX.Element;
+/**
+ * The dialog popup surface. Holds the `Header`, `Body`, and `Footer`; renders as a
+ * centered modal on desktop and a bottom sheet on mobile.
+ */
+declare function DialogContent(props: DialogContentProps): React.JSX.Element;
+/** Layout-only header row — typically a `Dialog.Title` and a `Dialog.Close`. */
+declare function DialogHeader(props: DialogHeaderProps): React.JSX.Element;
+/** The dialog's accessible title; wired to `aria-labelledby`. */
+declare function DialogTitle(props: DialogTitleProps): React.JSX.Element;
+/** A dismiss button that closes the dialog. */
+declare function DialogClose(props: DialogCloseProps): React.JSX.Element;
+/** The dialog body; wired to `aria-describedby`. */
+declare function DialogBody(props: DialogBodyProps): React.JSX.Element;
+/** Footer region for actions or supporting content. */
+declare function DialogFooter(props: DialogFooterProps): React.JSX.Element;
+/**
+ * Advanced scroll region. Delegates to the shell: the modal uses a native
+ * scrollbar; the sheet uses the BottomSheet primitive's scroll area (with fade).
+ */
+declare function DialogScrollArea(props: DialogScrollAreaProps): React.JSX.Element;
+export {};

package/dist/Dialog/Dialog.types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, FunctionComponent, ReactElement, ReactNode } from "react";
+import type { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import type { Dialog as BaseDialog } from "../unstyledPrimitives";
 import type { ButtonProps } from "../Button";
 type BaseUIPropsToExclude = "render" | "className" | "style" | "ref" | "children";
@@ -162,20 +162,6 @@ export interface DialogContextValue {
 export interface DialogProviderProps extends DialogContextValue {
     readonly children: ReactNode;
 }
-/** The assembled `Dialog` component: a root with the parts attached. */
-export interface DialogComponent {
-    <Payload = unknown>(props: DialogRootProps<Payload>): ReactElement;
-    Trigger: <Payload = unknown>(props: DialogTriggerProps<Payload>) => ReactElement;
-    Content: FunctionComponent<DialogContentProps>;
-    Header: FunctionComponent<DialogHeaderProps>;
-    Title: FunctionComponent<DialogTitleProps>;
-    Close: FunctionComponent<DialogCloseProps>;
-    Body: FunctionComponent<DialogBodyProps>;
-    Footer: FunctionComponent<DialogFooterProps>;
-    Actions: FunctionComponent<DialogActionsProps>;
-    ScrollArea: FunctionComponent<DialogScrollAreaProps>;
-    createHandle: <Payload = unknown>() => DialogHandle<Payload>;
-}
 export type DialogActionsAlign = "left" | "right" | "fullWidth";
 interface DialogActionsBaseProps extends DialogBaseProps, Omit<ComponentPropsWithoutRef<"div">, "className" | "style" | "children"> {
     /** Primary action (right). */

package/dist/Dialog/DialogBottomSheet.d.ts

@@ -1,9 +1,19 @@
 import React from "react";
 import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogScrollAreaProps, DialogShellRootProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
 import { SharedDialogFooter, SharedDialogHeader } from "./dialogComposableShared";
-declare function DialogBottomSheetRoot(props: DialogShellRootProps): React.JSX.Element;
+export declare function DialogBottomSheet(props: DialogShellRootProps): React.JSX.Element;
+export declare namespace DialogBottomSheet {
+    var Trigger: typeof DialogBottomSheetTrigger;
+    var Content: typeof DialogBottomSheetContent;
+    var Header: typeof SharedDialogHeader;
+    var Title: typeof DialogBottomSheetTitle;
+    var Close: typeof DialogBottomSheetClose;
+    var Body: typeof DialogBottomSheetBody;
+    var Footer: typeof SharedDialogFooter;
+    var ScrollArea: typeof DialogBottomSheetScrollArea;
+}
 declare function DialogBottomSheetTrigger<Payload = unknown>(props: DialogTriggerProps<Payload>): React.JSX.Element;
-declare function DialogBottomSheetContent({ children, className, style, ...rest }: DialogContentProps): React.JSX.Element;
+declare function DialogBottomSheetContent({ children, className, style, render, ...rest }: DialogContentProps): React.JSX.Element;
 declare function DialogBottomSheetTitle({ children, ...rest }: DialogTitleProps): React.JSX.Element;
 declare function DialogBottomSheetClose({ children, render, ...rest }: DialogCloseProps): React.JSX.Element;
 /**
@@ -14,15 +24,4 @@ declare function DialogBottomSheetClose({ children, render, ...rest }: DialogClo
  */
 declare function DialogBottomSheetScrollArea({ children, className, style, }: DialogScrollAreaProps): React.JSX.Element;
 declare function DialogBottomSheetBody({ children, fullBleed, className, style, ...rest }: DialogBodyProps): React.JSX.Element;
-/** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-export declare const DialogBottomSheet: typeof DialogBottomSheetRoot & {
-    Trigger: typeof DialogBottomSheetTrigger;
-    Content: typeof DialogBottomSheetContent;
-    Header: typeof SharedDialogHeader;
-    Title: typeof DialogBottomSheetTitle;
-    Close: typeof DialogBottomSheetClose;
-    Body: typeof DialogBottomSheetBody;
-    Footer: typeof SharedDialogFooter;
-    ScrollArea: typeof DialogBottomSheetScrollArea;
-};
 export {};

package/dist/Dialog/DialogModal.d.ts

@@ -1,20 +1,20 @@
 import React from "react";
 import type { DialogBodyProps, DialogCloseProps, DialogContentProps, DialogShellRootProps, DialogTitleProps, DialogTriggerProps } from "./Dialog.types";
 import { DialogScrollArea, SharedDialogFooter, SharedDialogHeader } from "./dialogComposableShared";
-declare function DialogModalRoot(props: DialogShellRootProps): React.JSX.Element;
+export declare function DialogModal(props: DialogShellRootProps): React.JSX.Element;
+export declare namespace DialogModal {
+    var Trigger: typeof DialogModalTrigger;
+    var Content: typeof DialogModalContent;
+    var Header: typeof SharedDialogHeader;
+    var Title: typeof DialogModalTitle;
+    var Close: typeof DialogModalClose;
+    var Body: typeof DialogModalBody;
+    var Footer: typeof SharedDialogFooter;
+    var ScrollArea: typeof DialogScrollArea;
+}
 declare function DialogModalTrigger<Payload = unknown>({ children, render, handle, payload, className, style, ...rest }: DialogTriggerProps<Payload>): React.JSX.Element;
 declare function DialogModalContent({ children, className, style, ...rest }: DialogContentProps): React.JSX.Element;
 declare function DialogModalTitle({ children, ...rest }: DialogTitleProps): React.JSX.Element;
 declare function DialogModalClose({ children, render, ...rest }: DialogCloseProps): React.JSX.Element;
 declare function DialogModalBody({ children, fullBleed, className, style, ...rest }: DialogBodyProps): React.JSX.Element;
-export declare const DialogModal: typeof DialogModalRoot & {
-    Trigger: typeof DialogModalTrigger;
-    Content: typeof DialogModalContent;
-    Header: typeof SharedDialogHeader;
-    Title: typeof DialogModalTitle;
-    Close: typeof DialogModalClose;
-    Body: typeof DialogModalBody;
-    Footer: typeof SharedDialogFooter;
-    ScrollArea: typeof DialogScrollArea;
-};
 export {};

package/dist/Dialog/dialogComposableShared.d.ts

@@ -1,5 +1,7 @@
+import type { ReactElement } from "react";
 import React from "react";
-import type { DialogActionsProps, DialogCloseRender, DialogContextValue, DialogFooterProps, DialogHeaderProps, DialogProviderProps, DialogScrollAreaProps, DialogTriggerRender } from "./Dialog.types";
+import type { DialogActionsProps, DialogCloseRender, DialogContentProps, DialogContextValue, DialogFooterProps, DialogHeaderProps, DialogProviderProps, DialogScrollAreaProps, DialogTriggerRender } from "./Dialog.types";
+import { type Drawer as BaseDrawer } from "../unstyledPrimitives";
 /**
  * Resolves the trigger element for `Dialog.Trigger`. Copied from Menu's
  * `resolveMenuTriggerRender` so an Atlantis `<Button>` works as a trigger via
@@ -9,7 +11,7 @@ import type { DialogActionsProps, DialogCloseRender, DialogContextValue, DialogF
 export declare function resolveComposableTriggerRender({ children, render, }: {
     readonly children?: React.ReactNode;
     readonly render?: DialogTriggerRender;
-}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);
+}): ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
@@ -20,7 +22,15 @@ export declare function resolveComposableTriggerRender({ children, render, }: {
 export declare function resolveComposableCloseRender({ children, render, }: {
     readonly children?: React.ReactNode;
     readonly render?: DialogCloseRender;
-}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);
+}): ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => React.JSX.Element);
+/**
+ * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A
+ * render element passes through; a render function is wrapped to receive the
+ * drawer's state re-shaped as the dialog popup's state (e.g. `nestedDrawerOpen`
+ * becomes `nestedDialogOpen`), so `render` sees the same shape as the desktop
+ * dialog.
+ */
+export declare function resolveBottomSheetContentRender(render: DialogContentProps["render"]): React.ComponentProps<typeof BaseDrawer.Popup>["render"];
 /** Supplies the static config (type/size/isMobile/finalFocus) to the parts. */
 export declare function DialogProvider({ children, type, size, isMobile, finalFocus, }: DialogProviderProps): React.JSX.Element;
 /** Reads the Dialog config; throws if a part is used outside `<Dialog>`. */

package/dist/dialogReturnFocus-cjs.js

@@ -7,10 +7,10 @@ var classnames = require('classnames');
 var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var Button = require('./Button-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var BottomSheet = require('./BottomSheet-cjs.js');
 var DrawerTitle = require('./DrawerTitle-cjs.js');
-var useRenderElement = require('./useRenderElement-cjs.js');
 var DrawerDescription = require('./DrawerDescription-cjs.js');
 
 // Copied from Menu's constant so the two surfaces agree on what "mobile" means.
@@ -81,6 +81,24 @@ function resolveComposableCloseRender({ children, render, }) {
     return buttonRenderAdapter.renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
         React.createElement(Button.Button.Icon, { name: "remove" })));
 }
+/**
+ * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A
+ * render element passes through; a render function is wrapped to receive the
+ * drawer's state re-shaped as the dialog popup's state (e.g. `nestedDrawerOpen`
+ * becomes `nestedDialogOpen`), so `render` sees the same shape as the desktop
+ * dialog.
+ */
+function resolveBottomSheetContentRender(render) {
+    if (typeof render !== "function") {
+        return render;
+    }
+    return (props, drawerState) => render(props, {
+        open: drawerState.open,
+        transitionStatus: drawerState.transitionStatus,
+        nested: drawerState.nested,
+        nestedDialogOpen: drawerState.nestedDrawerOpen,
+    });
+}
 const DialogContext = React.createContext({
     type: "dialog",
     size: "base",
@@ -134,15 +152,26 @@ function SharedDialogFooter(_a) {
     const sticky = !useInsideDialogScrollArea();
     return (React.createElement("div", Object.assign({}, rest, { className: classnames(styles.footer, className), style: style, "data-sticky": sticky || undefined, "data-testid": "ATL-Dialog-Footer" }), children));
 }
+function renderActionButton(action, defaults) {
+    if (!action)
+        return null;
+    return React.isValidElement(action) ? (action) : (React.createElement(Button.Button, Object.assign({}, useRenderElement.mergeProps(defaults, action))));
+}
 /**
  * The action-button layout: tertiary on the left, primary/secondary grouped on
  * the right. Drop it inside a `Dialog.Footer`.
  */
 function DialogActions(_a) {
     var { primary, secondary, tertiary, align = "right", className, style } = _a, rest = tslib_es6.__rest(_a, ["primary", "secondary", "tertiary", "align", "className", "style"]);
-    const secondaryAction = secondary && React.isValidElement(secondary) ? (secondary) : (React.createElement(Button.Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)));
-    const primaryAction = primary && React.isValidElement(primary) ? (primary) : (React.createElement(Button.Button, Object.assign({ type: "primary" }, primary)));
-    const tertiaryAction = tertiary && React.isValidElement(tertiary) ? (tertiary) : (React.createElement(Button.Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary)));
+    const primaryAction = renderActionButton(primary, { type: "primary" });
+    const secondaryAction = renderActionButton(secondary, {
+        type: "primary",
+        variation: "subtle",
+    });
+    const tertiaryAction = renderActionButton(tertiary, {
+        type: "secondary",
+        variation: "destructive",
+    });
     return (React.createElement("div", Object.assign({}, rest, { className: classnames(actionsStyles.actions, [actionsStyles[`align-${align}`]], className), style: style, "data-testid": "ATL-Dialog-Actions" }),
         tertiary && (React.createElement("div", { className: actionsStyles.leftActions }, tertiaryAction)),
         React.createElement("div", { className: classnames(actionsStyles.buttonGroup, actionsStyles[`align-${align}`]) },
@@ -150,20 +179,23 @@ function DialogActions(_a) {
             primary && primaryAction)));
 }
 
-function DialogBottomSheetRoot(props) {
+function DialogBottomSheet(props) {
     return (React.createElement(BottomSheet.BottomSheet.Root, Object.assign({}, props)));
 }
 function DialogBottomSheetTrigger(props) {
     return (React.createElement(BottomSheet.BottomSheet.Trigger, Object.assign({}, props)));
 }
 function DialogBottomSheetContent(_a) {
-    var { children, className, style } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "style"]);
+    var { children, className, style, render } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "style", "render"]);
     const { type, size, finalFocus } = useDialogContext();
     return (
     // Opt-out of the BottomSheet's built-in scroll area.
     // Dialog will handle the scroll area itself.
     React.createElement(BottomSheet.BottomSheetScrollAreaContext.Provider, { value: false },
-        React.createElement(BottomSheet.BottomSheet.Popup, Object.assign({}, rest, { className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
+        React.createElement(BottomSheet.BottomSheet.Popup, Object.assign({}, rest, { 
+            // The bottom sheet is backed by a drawer popup, so re-shape its state
+            // into the dialog popup state the consumer's `render` is typed against.
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
@@ -194,18 +226,16 @@ function DialogBottomSheetBody(_a) {
     return insideScrollArea ? (content) : (React.createElement(DialogBottomSheetScrollArea, null, content));
 }
 /** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-const DialogBottomSheet = Object.assign(DialogBottomSheetRoot, {
-    Trigger: DialogBottomSheetTrigger,
-    Content: DialogBottomSheetContent,
-    Header: SharedDialogHeader,
-    Title: DialogBottomSheetTitle,
-    Close: DialogBottomSheetClose,
-    Body: DialogBottomSheetBody,
-    Footer: SharedDialogFooter,
-    ScrollArea: DialogBottomSheetScrollArea,
-});
+DialogBottomSheet.Trigger = DialogBottomSheetTrigger;
+DialogBottomSheet.Content = DialogBottomSheetContent;
+DialogBottomSheet.Header = SharedDialogHeader;
+DialogBottomSheet.Title = DialogBottomSheetTitle;
+DialogBottomSheet.Close = DialogBottomSheetClose;
+DialogBottomSheet.Body = DialogBottomSheetBody;
+DialogBottomSheet.Footer = SharedDialogFooter;
+DialogBottomSheet.ScrollArea = DialogBottomSheetScrollArea;
 
-function DialogModalRoot(props) {
+function DialogModal(props) {
     return React.createElement(ScrollAreaViewport.DialogRoot, Object.assign({}, props));
 }
 function DialogModalTrigger(_a) {
@@ -238,17 +268,14 @@ function DialogModalBody(_a) {
     const content = (React.createElement(DrawerDescription.DialogDescription, { render: descriptionProps => (React.createElement("div", Object.assign({}, rest, descriptionProps, { className: classnames(styles.body, { [styles.fullBleed]: fullBleed }, className), style: style }), children)) }));
     return insideScrollArea ? (content) : (React.createElement(DialogScrollArea$1, null, content));
 }
-const DialogModal = Object.assign(DialogModalRoot, {
-    Trigger: DialogModalTrigger,
-    Content: DialogModalContent,
-    Header: SharedDialogHeader,
-    Title: DialogModalTitle,
-    Close: DialogModalClose,
-    Body: DialogModalBody,
-    Footer: SharedDialogFooter,
-    // The modal keeps the plain native-scrollbar scroll region.
-    ScrollArea: DialogScrollArea$1,
-});
+DialogModal.Trigger = DialogModalTrigger;
+DialogModal.Content = DialogModalContent;
+DialogModal.Header = SharedDialogHeader;
+DialogModal.Title = DialogModalTitle;
+DialogModal.Close = DialogModalClose;
+DialogModal.Body = DialogModalBody;
+DialogModal.Footer = SharedDialogFooter;
+DialogModal.ScrollArea = DialogScrollArea$1;
 
 /**
  * Creates a handle that opens/closes a `Dialog` from detached triggers (e.g. an
@@ -273,7 +300,7 @@ function useDialogShell() {
  * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
  * `Dialog.Content`, and the layout parts.
  */
-function DialogRoot(_a) {
+function Dialog(_a) {
     var { onRequestClose, size = "base", type = "dialog", finalFocus, children, onOpenChange } = _a, rest = tslib_es6.__rest(_a, ["onRequestClose", "size", "type", "finalFocus", "children", "onOpenChange"]);
     function handleOpenChange(nextOpen, eventDetails) {
         if (!nextOpen) {
@@ -339,7 +366,6 @@ function DialogScrollArea(props) {
     const Shell = useDialogShell();
     return React.createElement(Shell.ScrollArea, Object.assign({}, props));
 }
-const Dialog = DialogRoot;
 Dialog.Trigger = DialogTrigger;
 Dialog.Content = DialogContent;
 Dialog.Header = DialogHeader;

package/dist/dialogReturnFocus-es.js

@@ -4,11 +4,11 @@ import { useWindowDimensions } from '@jobber/hooks';
 import classnames from 'classnames';
 import { n as normalizeBaseUiButtonProps, i as isAtlantisButtonRenderTarget, s as stripNativeTypeFromButtonRenderTarget, r as renderAtlantisButtonTarget } from './buttonRenderAdapter-es.js';
 import { B as Button } from './Button-es.js';
-import { S as ScrollAreaRoot, e as ScrollAreaViewport, g as DialogRoot$1, h as DialogTrigger$1, i as DialogPortal } from './ScrollAreaViewport-es.js';
+import { S as ScrollAreaRoot, e as ScrollAreaViewport, g as DialogRoot, h as DialogTrigger$1, i as DialogPortal } from './ScrollAreaViewport-es.js';
+import { m as mergeProps } from './useRenderElement-es.js';
 import { H as Heading } from './Heading-es.js';
 import { a as BottomSheet, B as BottomSheetScrollAreaContext } from './BottomSheet-es.js';
 import { D as DrawerTitle, a as DrawerClose, b as DialogTitle$1, c as DialogClose$1 } from './DrawerTitle-es.js';
-import { m as mergeProps } from './useRenderElement-es.js';
 import { D as DrawerDescription, a as DialogBackdrop, b as DialogViewport, c as DialogPopup, d as DialogDescription, e as createDialogHandle } from './DrawerDescription-es.js';
 
 // Copied from Menu's constant so the two surfaces agree on what "mobile" means.
@@ -79,6 +79,24 @@ function resolveComposableCloseRender({ children, render, }) {
     return renderAtlantisButtonTarget(React__default.createElement(Button, { type: "tertiary", variation: "subtle", ariaLabel: "Close dialog" },
         React__default.createElement(Button.Icon, { name: "remove" })));
 }
+/**
+ * Adapts a `Dialog.Content` `render` for the bottom sheet's drawer popup. A
+ * render element passes through; a render function is wrapped to receive the
+ * drawer's state re-shaped as the dialog popup's state (e.g. `nestedDrawerOpen`
+ * becomes `nestedDialogOpen`), so `render` sees the same shape as the desktop
+ * dialog.
+ */
+function resolveBottomSheetContentRender(render) {
+    if (typeof render !== "function") {
+        return render;
+    }
+    return (props, drawerState) => render(props, {
+        open: drawerState.open,
+        transitionStatus: drawerState.transitionStatus,
+        nested: drawerState.nested,
+        nestedDialogOpen: drawerState.nestedDrawerOpen,
+    });
+}
 const DialogContext = React__default.createContext({
     type: "dialog",
     size: "base",
@@ -132,15 +150,26 @@ function SharedDialogFooter(_a) {
     const sticky = !useInsideDialogScrollArea();
     return (React__default.createElement("div", Object.assign({}, rest, { className: classnames(styles.footer, className), style: style, "data-sticky": sticky || undefined, "data-testid": "ATL-Dialog-Footer" }), children));
 }
+function renderActionButton(action, defaults) {
+    if (!action)
+        return null;
+    return isValidElement(action) ? (action) : (React__default.createElement(Button, Object.assign({}, mergeProps(defaults, action))));
+}
 /**
  * The action-button layout: tertiary on the left, primary/secondary grouped on
  * the right. Drop it inside a `Dialog.Footer`.
  */
 function DialogActions(_a) {
     var { primary, secondary, tertiary, align = "right", className, style } = _a, rest = __rest(_a, ["primary", "secondary", "tertiary", "align", "className", "style"]);
-    const secondaryAction = secondary && isValidElement(secondary) ? (secondary) : (React__default.createElement(Button, Object.assign({ type: "primary", variation: "subtle" }, secondary)));
-    const primaryAction = primary && isValidElement(primary) ? (primary) : (React__default.createElement(Button, Object.assign({ type: "primary" }, primary)));
-    const tertiaryAction = tertiary && isValidElement(tertiary) ? (tertiary) : (React__default.createElement(Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary)));
+    const primaryAction = renderActionButton(primary, { type: "primary" });
+    const secondaryAction = renderActionButton(secondary, {
+        type: "primary",
+        variation: "subtle",
+    });
+    const tertiaryAction = renderActionButton(tertiary, {
+        type: "secondary",
+        variation: "destructive",
+    });
     return (React__default.createElement("div", Object.assign({}, rest, { className: classnames(actionsStyles.actions, [actionsStyles[`align-${align}`]], className), style: style, "data-testid": "ATL-Dialog-Actions" }),
         tertiary && (React__default.createElement("div", { className: actionsStyles.leftActions }, tertiaryAction)),
         React__default.createElement("div", { className: classnames(actionsStyles.buttonGroup, actionsStyles[`align-${align}`]) },
@@ -148,20 +177,23 @@ function DialogActions(_a) {
             primary && primaryAction)));
 }
 
-function DialogBottomSheetRoot(props) {
+function DialogBottomSheet(props) {
     return (React__default.createElement(BottomSheet.Root, Object.assign({}, props)));
 }
 function DialogBottomSheetTrigger(props) {
     return (React__default.createElement(BottomSheet.Trigger, Object.assign({}, props)));
 }
 function DialogBottomSheetContent(_a) {
-    var { children, className, style } = _a, rest = __rest(_a, ["children", "className", "style"]);
+    var { children, className, style, render } = _a, rest = __rest(_a, ["children", "className", "style", "render"]);
     const { type, size, finalFocus } = useDialogContext();
     return (
     // Opt-out of the BottomSheet's built-in scroll area.
     // Dialog will handle the scroll area itself.
     React__default.createElement(BottomSheetScrollAreaContext.Provider, { value: false },
-        React__default.createElement(BottomSheet.Popup, Object.assign({}, rest, { className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
+        React__default.createElement(BottomSheet.Popup, Object.assign({}, rest, { 
+            // The bottom sheet is backed by a drawer popup, so re-shape its state
+            // into the dialog popup state the consumer's `render` is typed against.
+            render: resolveBottomSheetContentRender(render), className: classnames(styles.sheetSurface, className), style: style, role: type, finalFocus: finalFocus, "data-dialog-variant": "sheet", "data-size": size }), children)));
 }
 function DialogBottomSheetTitle(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -192,19 +224,17 @@ function DialogBottomSheetBody(_a) {
     return insideScrollArea ? (content) : (React__default.createElement(DialogBottomSheetScrollArea, null, content));
 }
 /** Mobile shell: a bottom sheet built on the BottomSheet/Drawer primitives. */
-const DialogBottomSheet = Object.assign(DialogBottomSheetRoot, {
-    Trigger: DialogBottomSheetTrigger,
-    Content: DialogBottomSheetContent,
-    Header: SharedDialogHeader,
-    Title: DialogBottomSheetTitle,
-    Close: DialogBottomSheetClose,
-    Body: DialogBottomSheetBody,
-    Footer: SharedDialogFooter,
-    ScrollArea: DialogBottomSheetScrollArea,
-});
+DialogBottomSheet.Trigger = DialogBottomSheetTrigger;
+DialogBottomSheet.Content = DialogBottomSheetContent;
+DialogBottomSheet.Header = SharedDialogHeader;
+DialogBottomSheet.Title = DialogBottomSheetTitle;
+DialogBottomSheet.Close = DialogBottomSheetClose;
+DialogBottomSheet.Body = DialogBottomSheetBody;
+DialogBottomSheet.Footer = SharedDialogFooter;
+DialogBottomSheet.ScrollArea = DialogBottomSheetScrollArea;
 
-function DialogModalRoot(props) {
-    return React__default.createElement(DialogRoot$1, Object.assign({}, props));
+function DialogModal(props) {
+    return React__default.createElement(DialogRoot, Object.assign({}, props));
 }
 function DialogModalTrigger(_a) {
     var { children, render, handle, payload, className, style } = _a, rest = __rest(_a, ["children", "render", "handle", "payload", "className", "style"]);
@@ -236,17 +266,14 @@ function DialogModalBody(_a) {
     const content = (React__default.createElement(DialogDescription, { render: descriptionProps => (React__default.createElement("div", Object.assign({}, rest, descriptionProps, { className: classnames(styles.body, { [styles.fullBleed]: fullBleed }, className), style: style }), children)) }));
     return insideScrollArea ? (content) : (React__default.createElement(DialogScrollArea$1, null, content));
 }
-const DialogModal = Object.assign(DialogModalRoot, {
-    Trigger: DialogModalTrigger,
-    Content: DialogModalContent,
-    Header: SharedDialogHeader,
-    Title: DialogModalTitle,
-    Close: DialogModalClose,
-    Body: DialogModalBody,
-    Footer: SharedDialogFooter,
-    // The modal keeps the plain native-scrollbar scroll region.
-    ScrollArea: DialogScrollArea$1,
-});
+DialogModal.Trigger = DialogModalTrigger;
+DialogModal.Content = DialogModalContent;
+DialogModal.Header = SharedDialogHeader;
+DialogModal.Title = DialogModalTitle;
+DialogModal.Close = DialogModalClose;
+DialogModal.Body = DialogModalBody;
+DialogModal.Footer = SharedDialogFooter;
+DialogModal.ScrollArea = DialogScrollArea$1;
 
 /**
  * Creates a handle that opens/closes a `Dialog` from detached triggers (e.g. an
@@ -271,7 +298,7 @@ function useDialogShell() {
  * desktop, a bottom sheet on mobile. Compose it with `Dialog.Trigger`,
  * `Dialog.Content`, and the layout parts.
  */
-function DialogRoot(_a) {
+function Dialog(_a) {
     var { onRequestClose, size = "base", type = "dialog", finalFocus, children, onOpenChange } = _a, rest = __rest(_a, ["onRequestClose", "size", "type", "finalFocus", "children", "onOpenChange"]);
     function handleOpenChange(nextOpen, eventDetails) {
         if (!nextOpen) {
@@ -337,7 +364,6 @@ function DialogScrollArea(props) {
     const Shell = useDialogShell();
     return React__default.createElement(Shell.ScrollArea, Object.assign({}, props));
 }
-const Dialog = DialogRoot;
 Dialog.Trigger = DialogTrigger;
 Dialog.Content = DialogContent;
 Dialog.Header = DialogHeader;