@jobber/components 8.24.1 → 8.25.1

package/ProgressIndicator.d.ts

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

package/ProgressIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var ProgressIndicator = require("./dist/ProgressIndicator");
+
+Object.keys(ProgressIndicator).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return ProgressIndicator[key];
+    },
+  });
+});

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

@@ -1,5 +1,8 @@
 import React from "react";
 import sizes from "./ProgressBarSizes.module.css";
+/**
+ * @deprecated Use `ProgressIndicator` instead.
+ */
 interface ProgressBarProps {
     /**
      * The current step that the progress bar is on.
@@ -30,5 +33,9 @@ interface ProgressBarProps {
      */
     readonly UNSAFE_style?: React.CSSProperties;
 }
+/**
+ * @deprecated Use `ProgressIndicator` from
+ * `@jobber/components/ProgressIndicator` instead.
+ */
 export declare function ProgressBar({ currentStep, totalSteps, size, variation, UNSAFE_className, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;
 export {};

package/dist/ProgressBar-cjs.js

@@ -19,6 +19,10 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
     })));
 }
 
+/**
+ * @deprecated Use `ProgressIndicator` from
+ * `@jobber/components/ProgressIndicator` instead.
+ */
 function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", UNSAFE_className, UNSAFE_style, }) {
     const percentage = (currentStep / totalSteps) * 100;
     const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);

package/dist/ProgressBar-es.js

@@ -17,6 +17,10 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
     })));
 }
 
+/**
+ * @deprecated Use `ProgressIndicator` from
+ * `@jobber/components/ProgressIndicator` instead.
+ */
 function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", UNSAFE_className, UNSAFE_style, }) {
     const percentage = (currentStep / totalSteps) * 100;
     const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);

package/dist/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import type { CSSProperties } from "react";
+export interface ProgressIndicatorProps {
+    /**
+     * Current progress. Expected to be in the range `0..max` inclusive.
+     */
+    readonly value: number;
+    /**
+     * Maximum value. Pass `max={4}` with `value={2}` for "2 of 4 steps"; pass
+     * `value={75}` for "75%".
+     *
+     * @default 100
+     */
+    readonly max?: number;
+    /**
+     * Visual variation:
+     * - `continuous` renders a single fill bar driven by `value / max`.
+     * - `stepped` renders `max` segments, the first `value` of which are filled.
+     *
+     * @default "continuous"
+     */
+    readonly variation?: "continuous" | "stepped";
+    /**
+     * Visual size. `smaller` renders at 4px tall, `small` at 8px, `base` at 16px.
+     *
+     * @default "base"
+     */
+    readonly size?: "smaller" | "small" | "base";
+    /**
+     * Accessible label exposed via `aria-label` on the root element. When
+     * omitted, defaults to `"{value}%"` when `max === 100` (or `max` is
+     * omitted), and `"{value} / {max}"` otherwise.
+     *
+     * Override to localize or to describe the specific activity (e.g.
+     * `"Uploading file"`).
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Custom class name merged onto the root element alongside the component's
+     * own classes.
+     */
+    readonly className?: string;
+    /**
+     * Custom inline styles applied to the root element.
+     */
+    readonly style?: CSSProperties;
+}
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+export declare function ProgressIndicator({ value, max, variation, size, ariaLabel, className, style, }: ProgressIndicatorProps): React.JSX.Element;

package/dist/ProgressIndicator/index.cjs

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

package/dist/ProgressIndicator/index.d.ts

@@ -0,0 +1 @@
+export { ProgressIndicator } from "./ProgressIndicator";

package/dist/ProgressIndicator/index.mjs

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

package/dist/ProgressIndicator-cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"indicator":"-TBRV1VUsfc-","smaller":"MStgN8AhV3s-","small":"iAlYWHjs6JQ-","base":"WWEzA1-OjSM-","continuous":"r9ShSj58V6w-","fill":"Hsuq8zT-KzY-","stepped":"FB1e9bL90tI-","segment":"bpLIiDGlsCs-","filled":"_0FxmImvY-04-","spinning":"_2aJghEPvl14-"};
+
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+function ProgressIndicator({ value, max = 100, variation = "continuous", size = "base", ariaLabel, className, style, }) {
+    const clampedValue = Math.min(value, max);
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : defaultAriaLabel(clampedValue, max);
+    return (React.createElement("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": resolvedAriaLabel, className: classnames(styles.indicator, styles[size], variation === "stepped" ? styles.stepped : styles.continuous, className), style: style }, variation === "stepped"
+        ? SteppedSegments({ value: clampedValue, max })
+        : ContinuousFill({ value: clampedValue, max })));
+}
+function ContinuousFill({ value, max, }) {
+    const percentage = max === 0 ? 0 : (value / max) * 100;
+    return (React.createElement("div", { className: styles.fill, style: { "--progress-indicator--fill-amount": percentage } }));
+}
+function SteppedSegments({ value, max, }) {
+    return (React.createElement(React.Fragment, null, Array.from({ length: max }).map((_, index) => {
+        const step = index + 1;
+        return (React.createElement("div", { key: step, className: classnames(styles.segment, step <= value && styles.filled) }));
+    })));
+}
+function defaultAriaLabel(value, max) {
+    if (max === 100)
+        return `${value}%`;
+    return `${value} / ${max}`;
+}
+
+exports.ProgressIndicator = ProgressIndicator;

package/dist/ProgressIndicator-es.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"indicator":"-TBRV1VUsfc-","smaller":"MStgN8AhV3s-","small":"iAlYWHjs6JQ-","base":"WWEzA1-OjSM-","continuous":"r9ShSj58V6w-","fill":"Hsuq8zT-KzY-","stepped":"FB1e9bL90tI-","segment":"bpLIiDGlsCs-","filled":"_0FxmImvY-04-","spinning":"_2aJghEPvl14-"};
+
+/**
+ * `ProgressIndicator` communicates **determinate** progress — a known fraction
+ * of a task that has been completed. Use it when you can express progress as
+ * `value / max`, such as a multi-step setup wizard or a file upload with a
+ * known total size.
+ *
+ * For indeterminate activity (loading time or fraction unknown), use
+ * `ActivityIndicator` instead.
+ *
+ * For now, the legacy `ProgressBar` component also remains available; new code
+ * should prefer `ProgressIndicator`.
+ */
+function ProgressIndicator({ value, max = 100, variation = "continuous", size = "base", ariaLabel, className, style, }) {
+    const clampedValue = Math.min(value, max);
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : defaultAriaLabel(clampedValue, max);
+    return (React__default.createElement("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": resolvedAriaLabel, className: classnames(styles.indicator, styles[size], variation === "stepped" ? styles.stepped : styles.continuous, className), style: style }, variation === "stepped"
+        ? SteppedSegments({ value: clampedValue, max })
+        : ContinuousFill({ value: clampedValue, max })));
+}
+function ContinuousFill({ value, max, }) {
+    const percentage = max === 0 ? 0 : (value / max) * 100;
+    return (React__default.createElement("div", { className: styles.fill, style: { "--progress-indicator--fill-amount": percentage } }));
+}
+function SteppedSegments({ value, max, }) {
+    return (React__default.createElement(React__default.Fragment, null, Array.from({ length: max }).map((_, index) => {
+        const step = index + 1;
+        return (React__default.createElement("div", { key: step, className: classnames(styles.segment, step <= value && styles.filled) }));
+    })));
+}
+function defaultAriaLabel(value, max) {
+    if (max === 100)
+        return `${value}%`;
+    return `${value} / ${max}`;
+}
+
+export { ProgressIndicator as P };

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;