@jobber/components 8.20.0 → 8.20.1-select-nat-3a2699a.20

package/Dialog.d.ts

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

package/{Select.js → Dialog.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var Select = require("./dist/Select");
+var Dialog = require("./dist/Dialog");
 
-Object.keys(Select).forEach(function(key) {
+Object.keys(Dialog).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return Select[key];
+      return Dialog[key];
     },
   });
 });

package/LegacySelect.d.ts

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

package/{DescriptionList.js → LegacySelect.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var DescriptionList = require("./dist/DescriptionList");
+var LegacySelect = require("./dist/LegacySelect");
 
-Object.keys(DescriptionList).forEach(function(key) {
+Object.keys(LegacySelect).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return DescriptionList[key];
+      return LegacySelect[key];
     },
   });
 });

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

@@ -1,5 +1,5 @@
 import React from "react";
 import type { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
 export declare const atlantisThemeContextDefaultValues: AtlantisThemeContextValue;
-export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }: AtlantisThemeContextProviderProps): React.JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, storageKey, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/AtlantisThemeContext/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var AtlantisThemeContext = require('../AtlantisThemeContext-cjs.js');
-var updateTheme = require('../updateTheme-cjs.js');
 require('@jobber/design');
 require('react');
 require('../_commonjsHelpers-cjs.js');
@@ -19,5 +18,5 @@ require('../_setToString-cjs.js');
 exports.AtlantisThemeContextProvider = AtlantisThemeContext.AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = AtlantisThemeContext.THEME_CHANGE_EVENT;
 exports.atlantisThemeContextDefaultValues = AtlantisThemeContext.atlantisThemeContextDefaultValues;
+exports.updateTheme = AtlantisThemeContext.updateTheme;
 exports.useAtlantisTheme = AtlantisThemeContext.useAtlantisTheme;
-exports.updateTheme = updateTheme.updateTheme;

package/dist/AtlantisThemeContext/index.mjs

@@ -1,5 +1,4 @@
-export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from '../AtlantisThemeContext-es.js';
-export { u as updateTheme } from '../updateTheme-es.js';
+export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, b as updateTheme, u as useAtlantisTheme } from '../AtlantisThemeContext-es.js';
 import '@jobber/design';
 import 'react';
 import '../_commonjsHelpers-es.js';

package/dist/AtlantisThemeContext/themeStore.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "./types";
+/**
+ * `useSyncExternalStore` source for the theme. `data-theme` on the document
+ * element is the source of truth: `updateTheme` writes it and dispatches
+ * `THEME_CHANGE_EVENT`, which this store subscribes to.
+ */
+export declare const themeStore: {
+    readonly subscribe: (onStoreChange: () => void) => () => void;
+    readonly getSnapshot: () => Theme;
+    readonly getServerSnapshot: () => Theme;
+};

package/dist/AtlantisThemeContext/types.d.ts

@@ -32,6 +32,20 @@ export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
      * **Important**: you should provide a constant or at least a memoized value for performance reasons.
      */
     readonly dangerouslyOverrideTokens?: OverrideTokens;
+    /**
+     * The `localStorage` key your app writes to when toggling the theme (e.g.
+     * `"jobber_theme"`). When set, the provider listens for `window` `storage`
+     * events on this key and applies theme changes signalled by other browser
+     * tabs. Writing to `localStorage` remains the app's responsibility; Atlantis
+     * only handles the listen-and-react side.
+     *
+     * Cross-tab sync is opt-in: omit this prop and no `storage` listener is added,
+     * preserving the previous within-tab-only behavior.
+     *
+     * Has no effect when `dangerouslyOverrideTheme` is set, since that provider
+     * is intentionally isolated from the shared theme store.
+     */
+    readonly storageKey?: string;
 }
 export type OverrideTokens = {
     [K in keyof typeof tokens]?: (typeof tokens)[K];

package/dist/AtlantisThemeContext/updateTheme.d.ts

@@ -2,6 +2,6 @@ import type { Theme } from "./types";
 /**
  * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
  * Will add data-theme="<newTheme>" to the <html> element.
- * Will dispatch a custom event "atlantis.toggle-theme" with the new theme for other providers to subscribe to.
+ * Will dispatch a custom event "atlantis.toggle-theme" that theme providers subscribe to.
  */
 export declare function updateTheme(theme: Theme): void;

package/dist/AtlantisThemeContext-cjs.js

@@ -340,9 +340,45 @@ var merge_1 = merge;
 
 var merge$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(merge_1);
 
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+/**
+ * `useSyncExternalStore` source for the theme. `data-theme` on the document
+ * element is the source of truth: `updateTheme` writes it and dispatches
+ * `THEME_CHANGE_EVENT`, which this store subscribes to.
+ */
+const themeStore = {
+    subscribe(onStoreChange) {
+        globalThis.window.addEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        return () => {
+            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        };
+    },
+    getSnapshot() {
+        var _a, _b, _c, _d;
+        return ((_d = (_c = (_b = (_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.theme) !== null && _d !== void 0 ? _d : "light");
+    },
+    getServerSnapshot() {
+        return "light";
+    },
+};
+
+/**
+ * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
+ * Will add data-theme="<newTheme>" to the <html> element.
+ * Will dispatch a custom event "atlantis.toggle-theme" that theme providers subscribe to.
+ */
+function updateTheme(theme) {
+    if (!globalThis.window)
+        return;
+    globalThis.document.documentElement.setAttribute("data-theme", theme);
+    const event = new CustomEvent(THEME_CHANGE_EVENT, {
+        detail: { theme },
+    });
+    globalThis.window.dispatchEvent(event);
+}
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -350,31 +386,35 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, design.tokens, design.darkTokens);
 const AtlantisThemeContext = React.createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, storageKey, }) {
     if (dangerouslyOverrideTheme) {
         return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
+    return (React.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, storageKey: storageKey }, children));
 }
-function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
-    var _a;
-    const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
-    const [internalTheme, setInternalTheme] = React.useState(initialTheme);
-    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
-    const handleThemeChangeEvent = React.useCallback((event) => {
-        const newTheme = event.detail.theme;
-        setInternalTheme(newTheme);
-    }, []);
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, storageKey, }) {
+    const theme = React.useSyncExternalStore(themeStore.subscribe, themeStore.getSnapshot, themeStore.getServerSnapshot);
+    const { finalTokens, cssVariableOverrides } = useTokens(theme, dangerouslyOverrideTokens);
     React.useEffect(() => {
-        if (!globalThis.window)
+        if (!storageKey || !globalThis.window)
             return;
-        globalThis.window.addEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+        function handleStorage(event) {
+            if (event.key !== storageKey)
+                return;
+            const next = event.newValue;
+            if (next !== "light" && next !== "dark")
+                return;
+            if (next === themeStore.getSnapshot())
+                return;
+            updateTheme(next);
+        }
+        globalThis.window.addEventListener("storage", handleStorage);
         return () => {
-            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+            globalThis.window.removeEventListener("storage", handleStorage);
         };
-    }, [handleThemeChangeEvent]);
+    }, [storageKey]);
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
-            theme: internalTheme,
+            theme: theme,
             tokens: finalTokens,
             overrideTokens: dangerouslyOverrideTokens,
         } }, cssVariableOverrides ? (React.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
@@ -419,4 +459,5 @@ function useTokens(theme, overrideTokens) {
 exports.AtlantisThemeContextProvider = AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = THEME_CHANGE_EVENT;
 exports.atlantisThemeContextDefaultValues = atlantisThemeContextDefaultValues;
+exports.updateTheme = updateTheme;
 exports.useAtlantisTheme = useAtlantisTheme;

package/dist/AtlantisThemeContext-es.js

@@ -1,11 +1,11 @@
 import { tokens, darkTokens } from '@jobber/design';
-import React__default, { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
+import React__default, { createContext, useSyncExternalStore, useEffect, useContext, useMemo } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { e as eq_1, c as _Stack } from './identity-es.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
 import { _ as _baseFor } from './_baseFor-es.js';
 import { _ as _copyObject, k as keysIn_1, a as _cloneBufferExports, b as _cloneTypedArray, c as _copyArray, d as _initCloneObject, i as isPlainObject_1 } from './keysIn-es.js';
-import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, j as isFunction_1, d as isTypedArray_1 } from './isTypedArray-es.js';
+import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, k as isFunction_1, d as isTypedArray_1 } from './isTypedArray-es.js';
 import { i as isObjectLike_1, a as isObject_1 } from './isObjectLike-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 
@@ -338,9 +338,45 @@ var merge_1 = merge;
 
 var merge$1 = /*@__PURE__*/getDefaultExportFromCjs(merge_1);
 
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
+/**
+ * `useSyncExternalStore` source for the theme. `data-theme` on the document
+ * element is the source of truth: `updateTheme` writes it and dispatches
+ * `THEME_CHANGE_EVENT`, which this store subscribes to.
+ */
+const themeStore = {
+    subscribe(onStoreChange) {
+        globalThis.window.addEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        return () => {
+            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, onStoreChange);
+        };
+    },
+    getSnapshot() {
+        var _a, _b, _c, _d;
+        return ((_d = (_c = (_b = (_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.theme) !== null && _d !== void 0 ? _d : "light");
+    },
+    getServerSnapshot() {
+        return "light";
+    },
+};
+
+/**
+ * Toggle the theme of the application. If subscribed, the tokens will be updated accordingly.
+ * Will add data-theme="<newTheme>" to the <html> element.
+ * Will dispatch a custom event "atlantis.toggle-theme" that theme providers subscribe to.
+ */
+function updateTheme(theme) {
+    if (!globalThis.window)
+        return;
+    globalThis.document.documentElement.setAttribute("data-theme", theme);
+    const event = new CustomEvent(THEME_CHANGE_EVENT, {
+        detail: { theme },
+    });
+    globalThis.window.dispatchEvent(event);
+}
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -348,31 +384,35 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, tokens, darkTokens);
 const AtlantisThemeContext = createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, storageKey, }) {
     if (dangerouslyOverrideTheme) {
         return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React__default.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
+    return (React__default.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, storageKey: storageKey }, children));
 }
-function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
-    var _a;
-    const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
-    const [internalTheme, setInternalTheme] = useState(initialTheme);
-    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
-    const handleThemeChangeEvent = useCallback((event) => {
-        const newTheme = event.detail.theme;
-        setInternalTheme(newTheme);
-    }, []);
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, storageKey, }) {
+    const theme = useSyncExternalStore(themeStore.subscribe, themeStore.getSnapshot, themeStore.getServerSnapshot);
+    const { finalTokens, cssVariableOverrides } = useTokens(theme, dangerouslyOverrideTokens);
     useEffect(() => {
-        if (!globalThis.window)
+        if (!storageKey || !globalThis.window)
             return;
-        globalThis.window.addEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+        function handleStorage(event) {
+            if (event.key !== storageKey)
+                return;
+            const next = event.newValue;
+            if (next !== "light" && next !== "dark")
+                return;
+            if (next === themeStore.getSnapshot())
+                return;
+            updateTheme(next);
+        }
+        globalThis.window.addEventListener("storage", handleStorage);
         return () => {
-            globalThis.window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChangeEvent);
+            globalThis.window.removeEventListener("storage", handleStorage);
         };
-    }, [handleThemeChangeEvent]);
+    }, [storageKey]);
     return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
-            theme: internalTheme,
+            theme: theme,
             tokens: finalTokens,
             overrideTokens: dangerouslyOverrideTokens,
         } }, cssVariableOverrides ? (React__default.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
@@ -414,4 +454,4 @@ function useTokens(theme, overrideTokens) {
     };
 }
 
-export { AtlantisThemeContextProvider as A, THEME_CHANGE_EVENT as T, atlantisThemeContextDefaultValues as a, useAtlantisTheme as u };
+export { AtlantisThemeContextProvider as A, THEME_CHANGE_EVENT as T, atlantisThemeContextDefaultValues as a, updateTheme as b, useAtlantisTheme as u };

package/dist/Autocomplete/index.cjs

@@ -4,7 +4,7 @@ var Autocomplete = require('../Autocomplete-cjs.js');
 require('react');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
-require('../index.esm-cjs.js');
+require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');

package/dist/Autocomplete/index.mjs

@@ -2,7 +2,7 @@ export { A as Autocomplete } from '../Autocomplete-es.js';
 import 'react';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils.dom-es.js';
-import '../index.esm-es.js';
+import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';

package/dist/Avatar-cjs.js

@@ -41,6 +41,7 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
+const MAX_VISIBLE_INITIALS = 3;
 function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
@@ -72,9 +73,9 @@ function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSA
         return (React.createElement(Icon.Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
-        [styles.smallInitials]: initials.length > 2,
+        [styles.smallInitials]: initials.length >= MAX_VISIBLE_INITIALS,
     });
-    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
+    return (React.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.slice(0, MAX_VISIBLE_INITIALS)));
 }
 
 exports.Avatar = Avatar;

package/dist/Avatar-es.js

@@ -39,6 +39,7 @@ function deconstructCssCustomProperty(color) {
         .trim();
 }
 
+const MAX_VISIBLE_INITIALS = 3;
 function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
     if (imageUrl) {
@@ -70,9 +71,9 @@ function Initials({ initials, iconColor = "textReverse", iconSize = "base", UNSA
         return (React__default.createElement(Icon, { name: "person", color: iconColor, size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
     }
     const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
-        [styles.smallInitials]: initials.length > 2,
+        [styles.smallInitials]: initials.length >= MAX_VISIBLE_INITIALS,
     });
-    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
+    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.slice(0, MAX_VISIBLE_INITIALS)));
 }
 
 export { Avatar as A };

package/dist/BottomSheet-cjs.js

@@ -3,55 +3,10 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
+var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var Button = require('./Button-cjs.js');
-var useRenderElement = require('./useRenderElement-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 
-function assignRef(ref, instance) {
-    if (!ref) {
-        return;
-    }
-    if (typeof ref === "function") {
-        ref(instance);
-        return;
-    }
-    ref.current = instance;
-}
-function mergeRefs(...refs) {
-    return (instance) => {
-        refs.forEach(ref => {
-            assignRef(ref, instance);
-        });
-    };
-}
-function getElementRef(element) {
-    return element.ref;
-}
-function normalizeBaseUiButtonProps(props) {
-    const rest = tslib_es6.__rest(props, ["type"]);
-    return rest;
-}
-function isAtlantisButtonRenderTarget(element) {
-    return React.isValidElement(element) && element.type === Button.Button;
-}
-function renderAtlantisButtonTarget(element) {
-    return function renderButtonTarget(props) {
-        const mergedProps = useRenderElement.mergeProps(normalizeBaseUiButtonProps(props), element.props);
-        return (React.createElement(Button.Button, Object.assign({}, mergedProps, { ref: mergeRefs(props.ref, getElementRef(element)), key: element.key })));
-    };
-}
-function stripNativeTypeFromButtonRenderTarget(element) {
-    const nativeType = element.props.type;
-    if (nativeType !== "button" &&
-        nativeType !== "submit" &&
-        nativeType !== "reset") {
-        return element;
-    }
-    return React.cloneElement(element, {
-        type: undefined,
-    });
-}
-
 var styles = {"backdrop":"Qf3IFhKJwQ0-","popup":"_868PDAA3U2M-","content":"eKuxReHyju8-","scrollRoot":"V--tRnN-P0I-","scrollArea":"_1I0eaFciaWo-","bottomFade":"BYEzqcZUGls-","spinning":"IJxq5fm5qdw-"};
 
 // `resolveBottomSheetTriggerRender` so an Atlantis `<Button>` works as a trigger
@@ -60,26 +15,35 @@ function resolveBottomSheetTriggerRender({ children, render, }) {
     if (render) {
         if (typeof render === "function") {
             return (props) => {
-                const renderedElement = render(normalizeBaseUiButtonProps(props));
-                return isAtlantisButtonRenderTarget(renderedElement)
-                    ? stripNativeTypeFromButtonRenderTarget(renderedElement)
+                const renderedElement = render(buttonRenderAdapter.normalizeBaseUiButtonProps(props));
+                return buttonRenderAdapter.isAtlantisButtonRenderTarget(renderedElement)
+                    ? buttonRenderAdapter.stripNativeTypeFromButtonRenderTarget(renderedElement)
                     : renderedElement;
             };
         }
-        return isAtlantisButtonRenderTarget(render)
-            ? renderAtlantisButtonTarget(render)
+        return buttonRenderAdapter.isAtlantisButtonRenderTarget(render)
+            ? buttonRenderAdapter.renderAtlantisButtonTarget(render)
             : render;
     }
-    if (isAtlantisButtonRenderTarget(children)) {
-        return renderAtlantisButtonTarget(children);
+    if (buttonRenderAdapter.isAtlantisButtonRenderTarget(children)) {
+        return buttonRenderAdapter.renderAtlantisButtonTarget(children);
     }
     if (React.isValidElement(children)) {
         return children;
     }
-    return renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "primary" },
+    return buttonRenderAdapter.renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "primary" },
         React.createElement(Button.Button.Label, null, children)));
 }
 
+/**
+ * Whether `BottomSheet.Popup` renders its own built-in scroll area (with the
+ * bottom fade). Defaults to `true` — the popup wraps its `children` in a
+ * scrollable viewport. A consumer that manages its own scroll region (e.g.
+ * `Dialog`, which pins a header/footer outside a single scroll area) provides
+ * `false` to opt out. Mirrors how `Dialog.Body` decides whether to wrap itself
+ * via context rather than a prop.
+ */
+const BottomSheetScrollAreaContext = React.createContext(true);
 function BottomSheetTrigger(_a) {
     var { children, render, className } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "render", "className"]);
     return (React.createElement(ScrollAreaViewport.DrawerTrigger, Object.assign({}, triggerProps, { className: className, render: resolveBottomSheetTriggerRender({ children, render }) })));
@@ -95,14 +59,30 @@ function BottomSheetRoot(_a) {
 }
 function BottomSheetPopup(_a) {
     var { children, className, initialFocus, finalFocus, ref } = _a, popupProps = tslib_es6.__rest(_a, ["children", "className", "initialFocus", "finalFocus", "ref"]);
+    // Defaults to wrapping; a consumer managing its own scroll region provides
+    // `BottomSheetScrollAreaContext` = false.
+    const renderScrollArea = React.useContext(BottomSheetScrollAreaContext);
     return (React.createElement(ScrollAreaViewport.DrawerPortal, null,
-        React.createElement(ScrollAreaViewport.DrawerBackdrop, { forceRender: true, className: styles.backdrop }),
-        React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }),
-            React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: styles.scrollRoot },
-                React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea", 
-                    // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
-                    style: { overflow: "auto" } }, children),
-                React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })))));
+        React.createElement(ScrollAreaViewport.DrawerBackdrop, { forceRender: true, className: styles.backdrop, "data-testid": "ATL-BottomSheet-Backdrop" }),
+        React.createElement(ScrollAreaViewport.DrawerPopup, Object.assign({}, popupProps, { ref: ref, className: classnames(styles.popup, className), initialFocus: initialFocus, finalFocus: finalFocus }), !renderScrollArea ? (
+        // The consumer manages its own scroll region (e.g. Dialog pins a
+        // header/footer outside a single scroll area) — often by composing
+        // `BottomSheet.ScrollArea` itself.
+        children) : (React.createElement(BottomSheetScrollArea, null, children)))));
+}
+/**
+ * The sheet's scroll region: a styled BaseUI `ScrollArea` (native scrollbar) with
+ * a bottom fade that hints at more content while the viewport can scroll further.
+ * `BottomSheet.Popup` renders this automatically unless a consumer opts out via
+ * `BottomSheetScrollAreaContext` and composes it (or its own scroll region)
+ * directly.
+ */
+function BottomSheetScrollArea({ children, className, style, }) {
+    return (React.createElement(ScrollAreaViewport.ScrollAreaRoot, { className: classnames(styles.scrollRoot, className), style: style },
+        React.createElement(ScrollAreaViewport.ScrollAreaViewport, { className: styles.scrollArea, "data-testid": "ATL-BottomSheet-ScrollArea", 
+            // BaseUI sets overflow: scroll in the style prop by default. This is to override that because adding it to the className doesn't work.
+            style: { overflow: "auto" } }, children),
+        React.createElement("div", { "aria-hidden": "true", className: styles.bottomFade, "data-testid": "ATL-BottomSheet-Fade" })));
 }
 function BottomSheetContent(_a) {
     var { children, className, ref } = _a, contentProps = tslib_es6.__rest(_a, ["children", "className", "ref"]);
@@ -119,10 +99,8 @@ const BottomSheet = Object.assign(BottomSheetComponent, {
     Trigger: BottomSheetTrigger,
     Popup: BottomSheetPopup,
     Content: BottomSheetContent,
+    ScrollArea: BottomSheetScrollArea,
 });
 
 exports.BottomSheet = BottomSheet;
-exports.isAtlantisButtonRenderTarget = isAtlantisButtonRenderTarget;
-exports.normalizeBaseUiButtonProps = normalizeBaseUiButtonProps;
-exports.renderAtlantisButtonTarget = renderAtlantisButtonTarget;
-exports.stripNativeTypeFromButtonRenderTarget = stripNativeTypeFromButtonRenderTarget;
+exports.BottomSheetScrollAreaContext = BottomSheetScrollAreaContext;